npm - @salesforce-ux/design-system - Versions diffs - 2.17.2 → 2.17.3 - Mend

@salesforce-ux/design-system 2.17.2 → 2.17.3

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 (963) hide show

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/tabs/docs.mdx.js"]=function(e){function t(t){for(var n,i,r=t[0],o=t[1],c=t[2],m=0,b=[];m<r.length;m++)i=r[m],Object.prototype.hasOwnProperty.call(l,i)&&l[i]&&b.push(l[i][0]),l[i]=0;for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n]);for(d&&d(t);b.length;)b.shift()();return s.push.apply(s,c\|\|[]),a()}function a(){for(var e,t=0;t<s.length;t++){for(var a=s[t],n=!0,r=1;r<a.length;r++){var o=a[r];0!==l[o]&&(n=!1)}n&&(s.splice(t--,1),e=i(i.s=a[0]))}return e}var n={},l={73:0},s=[];function i(t){if(n[t])return n[t].exports;var a=n[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,i),a.l=!0,a.exports}i.m=e,i.c=n,i.d=function(e,t,a){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(a,n,function(t){return e[t]}.bind(null,n));return a},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var d=o;return s.push([680,0]),a()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},680:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return de})),a.d(t,"getContents",(function(){return me}));var n=a(0),l=a.n(n),s=a(4),i=a(2),r=a(25),o=a(15),c=a(14),d=a(37),m=a(3),b=a.n(m),u=a(5),h=a.n(u),f=a(10),p=a(61),E=a(12);function v(e){return(v="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})(e)}function y(e,t){for(var a=0;a<t.length;a++){var n=t[a];n.enumerable=n.enumerable\|\|!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function g(e,t){return(g=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function O(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var a,n=j(e);if(t){var l=j(this).constructor;a=Reflect.construct(n,arguments,l)}else a=n.apply(this,arguments);return w(this,a)}}function w(e,t){return!t\|\|"object"!==v(t)&&"function"!=typeof t?T(e):t}function T(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function j(e){return(j=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var I=function(e){return l.a.createElement("div",{className:"slds-tabs-mobile__group"},e.children)};I.propTypes={children:b.a.node};var S=function(e){return l.a.createElement("div",{className:"slds-tabs-mobile__container"},e.children)};S.propTypes={children:b.a.node};var x=function(e){return l.a.createElement("ul",{className:h()("slds-tabs-mobile",{"slds-hidden":e.isHidden})},e.children)};x.propTypes={children:b.a.node,isHidden:b.a.bool};var _=function(e){return l.a.createElement("li",{className:h()("slds-tabs-mobile__item")},e.children)};_.propTypes={children:b.a.node};var N=function(e){return l.a.createElement(E.a,{isFullWidth:!0,onClick:e.onClick},l.a.createElement("span",{className:"slds-truncate",title:e.summary},e.summary),l.a.createElement(f.a,{className:"slds-icon slds-icon_x-small slds-icon-text-default",sprite:"utility",symbol:"chevronright"}))};N.propTypes={onClick:b.a.func,summary:b.a.string};var C=function(e){return l.a.createElement(p.c,{title:e.title,isAnimated:!0,docked:"left",invoke:"drill-in",isInvokedByTab:!0,isVisible:e.isVisible\|\|!1,handleVisibility:e.hidePanel,hasCenterTitle:!0},e.children\|\|"A panel body accepts any layout or component")};C.propTypes={hidePanel:b.a.func,isVisible:b.a.bool,title:b.a.string,children:b.a.node};var k=function(e){return l.a.createElement(S,null,l.a.createElement(x,{isHidden:!0},l.a.createElement(_,null,l.a.createElement(N,{summary:"Item One"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Item Two"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Item Three"}))),l.a.createElement(C,{title:"Item 1 Panel",isVisible:!0},l.a.createElement(x,null,l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item One"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item Two"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item Three"}))),l.a.createElement("div",null," Any content can be here "),l.a.createElement(x,null,l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item Four"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item Five"})))),l.a.createElement(C,{title:"Item 2 Panel"}),l.a.createElement(C,{title:"Item 3 Panel"}),l.a.createElement(C,{title:"Nested Item 1 Panel"}),l.a.createElement(C,{title:"Nested Item 2 Panel"}),l.a.createElement(C,{title:"Nested Item 3 Panel"}),l.a.createElement(C,{title:"Nested Item 4 Panel"}),l.a.createElement(C,{title:"Nested Item 5 Panel"}))},P=function(e){!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}}),t&&g(e,t)}(i,e);var t,a,n,s=O(i);function i(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i),(t=s.call(this,e)).hidePanel=t.hidePanel.bind(T(t)),t.state={visiblePanelIdx:-1},t}return t=i,(a=[{key:"componentDidMount",value:function(){void 0!==this.props.visiblePanelIdx&&-1===this.state.visiblePanelIdx&&this.setState({visiblePanelIdx:this.props.visiblePanelIdx})}},{key:"showPanel",value:function(e){this.props.isStatic\|\|this.setState({visiblePanelIdx:e})}},{key:"hidePanel",value:function(){this.props.isStatic\|\|this.setState({visiblePanelIdx:-1})}},{key:"render",value:function(){var e=this.state.visiblePanelIdx;return l.a.createElement(S,null,l.a.createElement(x,{isHidden:-1!==e},l.a.createElement(_,null,l.a.createElement(N,{summary:"Item One",onClick:this.showPanel.bind(this,0)})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Item Two",onClick:this.showPanel.bind(this,1)})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Item Three",onClick:this.showPanel.bind(this,2)}))),l.a.createElement(C,{title:"Item 1 Panel",isVisible:0===e,hidePanel:this.hidePanel}),l.a.createElement(C,{title:"Item 2 Panel",isVisible:1===e,hidePanel:this.hidePanel}),l.a.createElement(C,{title:"Item 3 Panel",isVisible:2===e,hidePanel:this.hidePanel}))}}])&&y(t.prototype,a),n&&y(t,n),i}(n.Component);P.propTypes={visiblePanelIdx:b.a.number,isStatic:b.a.bool};var A=P,U=a(30),W=a(32),M=a(11),B=a(159),L=a(9),V=a(100),F=a(13),D=function(e){return l.a.createElement(U.a,{selectedIndex:e.selectedIndex},l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},e.itemOneContent),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};D.propTypes={selectedIndex:b.a.number,itemOneContent:b.a.node},D.defaultProps={selectedIndex:0,itemOneContent:"Item One Content"};var R=function(){return l.a.createElement(D,{itemOneContent:l.a.createElement(V.a,null)})},H=function(){return l.a.createElement("div",{className:"demo-only",style:{height:"12rem"}},l.a.createElement(U.a,null,l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},l.a.createElement("h2",null,"Item One Content")),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},l.a.createElement("h2",null,"Item Two Content")),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},l.a.createElement("h2",null,"Item Three Content")),l.a.createElement(U.a.Item,{title:"Item Four",id:"tab-default-4"},l.a.createElement("h2",null,"Item Four Content")),l.a.createElement(U.a.Item,{title:"Item Five",id:"tab-default-5"},l.a.createElement("h2",null,"Item Five Content")),l.a.createElement(U.a.ItemOverflow,{title:"More Tabs",id:"tab-default-8"},l.a.createElement(B.a,{label:"More",type:"tabs",flavor:"default",isOpen:!0},l.a.createElement(q,null)))))},z=function(){return l.a.createElement("div",{className:"demo-only",style:{height:"12rem"}},l.a.createElement(U.a,null,l.a.createElement(U.a.Item,{title:"Opportunities",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",symbol:"opportunity",title:"Opportunities",assistiveText:!1}),id:"tab-default-1"},l.a.createElement("h2",null,"Item One Content")),l.a.createElement(U.a.Item,{title:"Cases",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",title:"Cases",symbol:"case",assistiveText:!1}),id:"tab-default-2"},l.a.createElement("h2",null,"Item Two Content")),l.a.createElement(U.a.Item,{title:"Products",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",title:"Products",symbol:"product",assistiveText:!1}),id:"tab-default-3"},l.a.createElement("h2",null,"Item Three Content")),l.a.createElement(U.a.Item,{title:"Price Books",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",title:"Price Books",symbol:"pricebook",assistiveText:!1}),id:"tab-default-4"},l.a.createElement("h2",null,"Item Four Content")),l.a.createElement(U.a.Item,{title:"Contacts",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",title:"Contacts",symbol:"contact",assistiveText:!1}),id:"tab-default-5"},l.a.createElement("h2",null,"Item Five Content")),l.a.createElement(U.a.ItemOverflow,{title:"More Tabs",id:"tab-default-8"},l.a.createElement(B.a,{label:"More",type:"tabs",flavor:"default",isOpen:!0},l.a.createElement(J,null)))))},q=function(){return l.a.createElement(L.f,{className:"slds-dropdown_right"},l.a.createElement(L.h,{className:"slds-dropdown_length-with-icon-10"},l.a.createElement(L.g,{title:"Accounts"},"Accounts"),l.a.createElement(L.g,{title:"Approvals"},"Approvals"),l.a.createElement(L.g,{title:"Lead"},"Leads")))},J=function(){return l.a.createElement(L.f,{className:"slds-dropdown_right"},l.a.createElement(L.h,{className:"slds-dropdown_length-with-icon-10"},l.a.createElement(L.g,{title:"Accounts"},l.a.createElement("span",{className:"slds-media slds-media_center"},l.a.createElement("span",{className:"slds-media__figure"},l.a.createElement(W.a,{className:"slds-icon_small",symbol:"account",assistiveText:!1})),l.a.createElement("span",{className:"slds-media__body"},"Accounts"))),l.a.createElement(L.g,{title:"Approvals"},l.a.createElement("span",{className:"slds-media slds-media_center"},l.a.createElement("span",{className:"slds-media__figure"},l.a.createElement(W.a,{className:"slds-icon_small",symbol:"approval",assistiveText:!1})),l.a.createElement("span",{className:"slds-media__body"},"Approvals"))),l.a.createElement(L.g,{title:"Lead"},l.a.createElement("span",{className:"slds-media slds-media_center"},l.a.createElement("span",{className:"slds-media__figure"},l.a.createElement(W.a,{className:"slds-icon_small",symbol:"lead",assistiveText:!1})),l.a.createElement("span",{className:"slds-media__body"},"Leads")))))},G=function(){return l.a.createElement(U.a,{isCard:!0,selectedIndex:0},l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},l.a.createElement(F.d,null,l.a.createElement(F.c,{symbol:"contact",title:"Card Header",href:"#",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l.a.createElement(F.a,{hasPadding:!0},"This is a card inside an ",l.a.createElement("code",{className:"doc"},".slds-tabs_card")," ","to show how styling is removed when cards are nested inside."),l.a.createElement(F.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts"))),l.a.createElement(F.d,null,l.a.createElement(F.c,{symbol:"contact",title:"Card Header",href:"#",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l.a.createElement(F.a,{hasPadding:!0},"This is a card inside an ",l.a.createElement("code",{className:"doc"},".slds-tabs_card")," ","to show how styling is removed when cards are nested inside."),l.a.createElement(F.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts"))),l.a.createElement(F.d,{hasCardBoundary:!0},l.a.createElement(F.c,{symbol:"contact",title:"Card Header",href:"#",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l.a.createElement(F.a,{hasPadding:!0},"This is a card inside an ",l.a.createElement("code",{className:"doc"},".slds-tabs_card")," ","to illustrate how",l.a.createElement("code",{className:"doc"},".slds-card_boundary")," adds a rounded border when desired."),l.a.createElement(F.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts")))),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))},K=function(){return l.a.createElement("div",{className:"demo-only",style:{height:"12rem"}},l.a.createElement(U.a,null,l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},l.a.createElement("h2",null,"Item One Content")),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2",rightIcon:l.a.createElement(M.a,{className:"slds-icon_x-small slds-icon-text-error",symbol:"error",title:"This item has an error",assistiveText:"This item has an error"})},l.a.createElement("h2",null,"Item Two Content - Has Error")),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},l.a.createElement("h2",null,"Item Three Content")),l.a.createElement(U.a.Item,{title:"Item Four",id:"tab-default-4"},l.a.createElement("h2",null,"Item Four Content"))))},Y=function(){return l.a.createElement(U.a,{size:"medium"},l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))},$=function(){return l.a.createElement(U.a,{size:"large"},l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))},Q=(U.a,U.a.Item,U.a.Item,U.a.Item,a(44)),X=a(101),Z=a(1),ee=s.c.a,te=s.c.code,ae=s.c.h2,ne=s.c.h3,le=s.c.h4,se=s.c.h5,ie=s.c.li,re=s.c.p,oe=s.c.strong,ce=s.c.ul,de=function(){return Object(n.createElement)(s.b,{},Object(n.createElement)("div",{className:"doc lead"},"Tabs keeps related content in a single container that is shown and hidden through navigation."),Object(n.createElement)(i.a,{exampleOnly:!0,demoStyles:"height: 200px;"},Object(n.createElement)(D,null)),ae({id:"About-Tabs"},"About Tabs"),re({},"The default tab set style encapsulates everything that is underneath it without enclosing it visually. Because tab sets can be nested, pay close attention to the markup. They are constructed to prevent styles from leaking from parent tab sets into child tab sets."),ne({id:"Implementation"},"Implementation"),le({id:"Markup"},"Markup"),re({},"The following markup is crucial for Accessibility"),ce({},ie({},"Selected tab’s anchor has ",te({},'aria-selected="true"'),", all other tabs’ anchors have ",te({},'aria-selected="false"')),ie({},"Selected tab’s anchor has ",te({},'tabindex="0"'),", all other tabs have ",te({},'tabindex="-1"')),ie({},"Each tab’s anchor has an ",te({},"aria-controls")," attribute whose value is the id of the associated ",te({},'<div role="tabpanel">')),ie({},"Each tab panel has an ",te({},"aria-labelledby")," attribute whose value is the id of its associated ",te({},'<a role="tab">'))),le({id:"Keyboard-Interactions"},"Keyboard Interactions"),ce({},ie({},"Arrow keys, when focus is on a selected tab, cycle selection to the next or previous tab"),ie({},"Tab key, when focus is before the tab list, moves focus to the selected tab"),ie({},"Tab key, when focus is on selected tab, moves focus into the selected tab’s associated tab panel or to the next focusable element on the page if that panel has no focusable elements"),ie({},"Shift+Tab keys, when focus is on first element in a tab panel, moves focus back to the selected tab")),le({id:"JavaScript-Needs"},"JavaScript Needs"),re({},"The active tab has two markup requirements:"),ce({},ie({},"The ",te({},".slds-active")," class should be placed on the ",te({},"li")," with ",te({},".slds-tabs_{variant}__item"),"."),ie({},"The corresponding ",te({},".slds-tabs_{variant}__content")," container receives ",te({},".slds-show"),"."),ie({},"In order to achieve the focus state styling, apply ",te({},".slds-has-focus")," to the parent ",te({},"li"),".")),re({},"Inactive ",te({},".slds-tabs_{variant}__content")," containers receive ",te({},".slds-hide"),"."),re({},"When the user clicks a different tab, move the ",te({},".slds-active")," class and toggle the ",te({},".slds-hide"),"/",te({},".slds-show")," classes."),ne({id:"Accessibility"},"Accessibility"),re({},"Tabbed UIs have three parts with specific ",oe({},"ARIA")," role requirements:"),ce({},ie({},"The tab list, which should have ",te({},'role="tablist"')),ie({},"The tabs in that list, which should each be an ",te({},'<a role="tab">')," anchor wrapped in a ",te({},'<li role="presentation">')," list item"),ie({},"The tab panels, which display each tab’s content and should each have ",te({},'role="tabpanel"'))),ae({id:"Base"},"Base"),Object(n.createElement)(o.a,{title:"Tabs Base"},Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(n.createElement)(D,null))),ae({id:"With-Overflow"},"With Overflow"),re({},"The overflow tab style is provided as a tab item type that acts as a menu component and appears as a tab item. It could contain those tab items that don't all fit in a horizontal orientation."),Object(n.createElement)(o.a,{title:"Tabs Overflowing"},Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(n.createElement)(H,null))),Object(n.createElement)(c.a,{type:"note",header:"Implementation Guidelines"},Object(n.createElement)("p",null,"The ",Object(n.createElement)("code",null,"slds-dropdown__list")," element requires a",Object(n.createElement)("code",null,"slds-dropdown_length-with-icon-10")," class, where 10 is the maximum number of items that will be visible before having to scroll.")),ae({id:"With-Icon"},"With Icon"),re({},"Icons can be used with tabs to help users differentiate among them."),Object(n.createElement)(o.a,{title:"Tabs With Icons"},Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(n.createElement)(z,null))),ae({id:"With-Error"},"With Error"),re({},"An icon can be used to communicate when a tab contains a validation error that needs attention."),Object(n.createElement)(o.a,{title:"Tabs With Icons"},Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(n.createElement)(K,null))),ae({id:"With-Nested-Scoped-Tabs"},"With Nested Scoped Tabs"),re({},"If nesting tabs within tabs, the second set should be rendered as ",ee({href:"/components/scoped-tabs"},"Scoped Tabs")," to help differentiate between tab sets."),Object(n.createElement)(o.a,{title:"Tabs with Nested Scoped Tabs"},Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(n.createElement)(R,null))),ae({id:"Size-Modifiers"},"Size Modifiers"),re({},"Tabs come with three size modifiers: default, medium, and large. Each size step will gradually increase the typography. Add the modifier class ",te({},"slds-tabs_medium")," or ",te({},"slds-tabs_large")," to the ",te({},"slds-tabs_default")," element."),ne({id:"Medium"},"Medium"),Object(n.createElement)(o.a,{title:"Tabs with Medium sizing modifier"},Object(n.createElement)(i.a,null,Object(n.createElement)(Y,null))),ne({id:"Large"},"Large"),Object(n.createElement)(o.a,{title:"Tabs with Large sizing modifier"},Object(n.createElement)(i.a,null,Object(n.createElement)($,null))),ae({id:"Subtabs"},"Subtabs"),re({},"Subtabs are used to provide an additional level of navigation below the ",ee({href:"/components/global-navigation"},"Global Navigation")," Tab Bar. Use these tabs when users need to work across multiple sub-pages within a single navigation item."),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.e)),ne({id:"Expected-Behavior"},"Expected Behavior"),ce({},ie({},"The first tab within the Subtab Bar is always the default content for the parent navigation item. To differentiate this tab from other sub-navigation tabs, this tab cannot be closed."),ie({},"When opening a navigation item for the first time, the default sub-navigation tab can be assumed; don’t show the Subtab Bar.",ce({},ie({},"When opening the first additional sub-navigation tab, a new tab bar is inserted containing both the default tab and the new sub-navigation tab."))),ie({},"All subtabs are closed when the parent navigation item is closed."),ie({},"Subtabs can optionally include a tab menu for additional controls.")),ne({id:"With-Focus"},"With Focus"),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"subtabs-has-focus")),ne({id:"With-Borders"},"With Borders"),re({},"To add borders on either side of the subtab, add the classes ",te({},"slds-border_right")," and ",te({},"slds-border_left"),", as needed, to the ",te({},"<li>")," with class ",te({},"slds-sub-tabs__item"),"."),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"subtabs-borders")),ne({id:"With-Tab-Actions"},"With Tab Actions"),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"subtabs-menu")),ne({id:"Status-Options"},"Status Options"),le({id:"Unsaved-Tab"},"Unsaved Tab"),re({},"Unsaved tabs receive a blue asterisk on the tab."),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"subtabs-unsaved")),Object(n.createElement)(c.a,{header:"Additional Tag for Accessibility",type:"a11y"},Object(n.createElement)("p",null,"In order to inform screen readers of the unsaved state, an ",Object(n.createElement)("code",null,"<abbr>")," tag is used to render the asterisk. The ",Object(n.createElement)("code",null,"title")," attribute and ",Object(n.createElement)("code",null,"aria-label")," should read ",Object(n.createElement)("b",null,'"Tab Not Saved"'),".")),Object(n.createElement)(r.a,{toggleCode:!1},Object(n.createElement)("abbr",{className:"slds-indicator_unsaved",title:"Tab Not Saved","aria-label":"Tab Not Saved"},"*")),le({id:"Communicating-Status-to-Screen-Readers"},"Communicating Status to Screen Readers"),re({},"The following examples of subtab status updates should all employ the same technique to communicate that update to users of assistive technology, who would be otherwise unaware of that status change."),re({},"You should use a single hidden ARIA live region for the entire subtabs block, the contents of which gets updated each time a subtab changes its status. The contents should contain a description of the status level and the name of the tab the status change event occurred in. The markup would look something like:"),Object(n.createElement)(r.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"...")),re({},"Upon clearing the status on a given tab, you should clear the message from the live region."),le({id:"Unread-Tab"},"Unread Tab"),re({},"Unread tabs receive a red dot on the tab."),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"unread")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"In order to inform screen readers of new activity in a tab, 2 things should occur."),Object(n.createElement)("ol",{className:"slds-list_ordered"},Object(n.createElement)("li",null,"The ",Object(n.createElement)("code",null,"title")," attribute and ",Object(n.createElement)("code",null,"aria-label")," on the element that displays the red dot should read ",Object(n.createElement)("b",null,'"New Activity"'),'. This will update the text content of the tab to include the "New Activity" text: "New Activity Chat - Customer".'),Object(n.createElement)("li",null,"The hidden live region as described above, should have its content updated to ",Object(n.createElement)("b",null,'"New Activity in Tab: [Tab Name Here]"')," to alert the user of new activity in that particular subtab."))),Object(n.createElement)(r.a,{toggleCode:!1},Object(n.createElement)("span",{"aria-label":"New Activity",className:"slds-indicator_unread",title:"New Activity"})),Object(n.createElement)(r.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"New activity in Tab: Chat - Customer")),le({id:"Unread-and-Unsaved-Tab"},"Unread and Unsaved Tab"),re({},"Unread and unsaved tabs receive a blue asterisk with a red dot underneath. Be sure to check out the individual sections above for the Accessibility requirements."),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"unsaved")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"Don't forget to update the hidden live region with which subtab has new activity")),le({id:"Warning-Tab"},"Warning Tab"),re({},"When you wish to draw attention to a particular subtab because a warning about that tab has occurred, you can use the ",te({},"slds-has-warning")," class to change the background color and introduce a short pulsing animation to draw attention from the user."),re({},"The icon is updated to be the warning icon, to give an extra way to communicate the level of the status without relying on the use of color alone."),re({},"In this example we show that something inside the subtab is about to break a service level agreement in 30 seconds, and we wish to draw the users attention to it to take action."),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"warning")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"Update the hidden live region with a message that informs the user of the status level, the warning and the offending subtab"," ",Object(n.createElement)("b",null,"[level]: [message] in tab: [tab_name]"))),Object(n.createElement)(r.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer")),se({id:"Unsaved-Warning-Tab"},"Unsaved Warning Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"warning-unsaved")),se({id:"Unread-Warning-Tab"},"Unread Warning Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"warning-unread")),le({id:"Error-Tab"},"Error Tab"),re({},"When you wish to draw attention to a particular subtab because an error or violation has occurred in that tab, you can use the ",te({},"slds-has-error")," class to change the background color and introduce a short pulsing animation to draw attention from the user."),re({},"The icon is updated to be the error icon, to give an extra way to communicate the level of the status without relying on the use of color alone."),re({},"In this example we show that something inside the subtab has broken an SLA agreement, and we wish to draw the users attention to it to take action."),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"error")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"Update the hidden live region with a message that informs the user of the status level, the error or violation and the offending subtab"," ",Object(n.createElement)("b",null,"[level]: [message] in tab: [tab_name]"))),Object(n.createElement)(r.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"Violation: SLA agreement in tab: Chat - Customer")),se({id:"Unsaved-Error-Tab"},"Unsaved Error Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"error-unsaved")),se({id:"Unread-Error-Tab"},"Unread Error Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"error-unread")),le({id:"Success-Tab"},"Success Tab"),re({},"When you wish to draw attention to a particular subtab because a warning or violation has been cleared in the subtab, you can use the ",te({},"slds-has-success")," class to change the background color and introduce a short pulsing animation to draw attention from the user."),re({},"The icon is updated to be the success icon, to give an extra way to communicate the level of the status without relying on the use of color alone."),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"success")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"Update the hidden live region with a message that informs the user that the status level has been successfully cleared and the subtab it was cleared from"," ",Object(n.createElement)("b",null,"[level]: [message] in tab: [tab_name]"))),Object(n.createElement)(r.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"Success: SLA agreement warning cleared in tab: Chat - Customer")),se({id:"Unsaved-Success-Tab"},"Unsaved Success Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"success-unsaved")),se({id:"Unread-Success-Tab"},"Unread Success Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"success-unread")),ne({id:"With-Overflow-Tab"},"With Overflow Tab"),re({},"Overflowing subtabs are contained in a More dropdown."),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"overflow-tabs")),le({id:"Overflow-Tab-Open"},"Overflow Tab Open"),Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(Z.f)(Q.f,"overflow-tabs-open")),le({id:"Unread-Overflow-Tab"},"Unread Overflow Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(Z.f)(Q.f,"unread-overflow-tabs-open")),le({id:"Unsaved-Overflow-Tab"},"Unsaved Overflow Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(Z.f)(Q.f,"unsaved-overflow-tabs-open")),le({id:"Unread-and-Unsaved-Overflow-Tab"},"Unread and Unsaved Overflow Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(Z.f)(Q.f,"unsaved-unread-overflow-tabs-open")),le({id:"Success-Overflow-Tab"},"Success Overflow Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(Z.f)(Q.f,"overflow-tabs-success")),le({id:"Unread-and-Unsaved-Success-Overflow-Tab"},"Unread and Unsaved Success Overflow Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(Z.f)(Q.f,"overflow-tabs-success-unread-unsaved")),le({id:"Warning-Overflow-Tab"},"Warning Overflow Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(Z.f)(Q.f,"overflow-tabs-warning")),le({id:"Unread-and-Unsaved-Warning-Overflow-Tab"},"Unread and Unsaved Warning Overflow Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(Z.f)(Q.f,"overflow-tabs-warning-unread-unsaved")),le({id:"Error-Overflow-Tab"},"Error Overflow Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(Z.f)(Q.f,"overflow-tabs-error")),le({id:"Unread-and-Unsaved-Error-Overflow-Tab"},"Unread and Unsaved Error Overflow Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(Z.f)(Q.f,"overflow-tabs-error-unread-unsaved")),ae({id:"Vertical"},"Vertical"),re({},"To use vertical tabs, check out the ",ee({href:"../vertical-tabs"},"Vertical Tabs")," component."),Object(n.createElement)(o.a,{title:"Tabs as Vertical"},X.a),ae({id:"As-a-Card"},"As a Card"),re({},"To style tabs as a card, add the class ",te({},"slds-tabs_card")," to the ",te({},"<div>")," with the class ",te({},"slds-tabs_default"),". See the following example for guidance on styling cards inside the tab panel content."),Object(n.createElement)(o.a,{title:"Tabs as a Card"},Object(n.createElement)(i.a,{demoStyles:"height: 600px;"},Object(n.createElement)(G,null))),ae({id:"On-Mobile"},"On Mobile"),re({},"For mobile, tabs become stacked and act as buttons that drill in to see the tab's content."),re({},"Mobile tabs consist of two parts, the tabs, which are represented via buttons, and their associated panels. When clicking on one of the buttons, the associated panel will slide in from right-to-left."),Object(n.createElement)(c.a,{header:"Focus Management",type:"a11y"},Object(n.createElement)("p",null,"When a user selects a tab button, focus should be placed on the back button of the panel that slides into view. When the user clicks the back button, focus should be placed on the button that was just pressed.")),Object(n.createElement)(o.a,{title:"Tabs Mobile Base"},Object(n.createElement)(i.a,null,Object(n.createElement)(A,null))),ne({id:"Accessibility-2"},"Accessibility"),re({},oe({},"Visibility")),ce({},ie({},"The panels should have ",te({},"aria-hidden=true")," when they are not visible to ensure keyboard and screen reader users cannot access the content."),ie({},"The tabs should have ",te({},"aria-hidden=true")," when a panel is open to ensure keyboard and screen reader users cannot access the buttons.")),re({},oe({},"Focus Management")),re({},"When a user selects a tab button, focus should be placed on the back button of the panel that slides into view. When the user clicks the back button, focus should be placed on the button that was just pressed."),re({},oe({},"Assistive Text")),re({},"The title and assistive text for the panel's back button text should read \"Collapse $&123;heading text&125;” so it stays contextual to the tab that was clicked on."),ne({id:"Panel-Open"},"Panel Open"),re({},'When clicking a tab button, the entire view changes and is replaced with the "content" of that tab inside of a panel. This includes a back button on the top left of the screen to go back to the view with the tabs.'),Object(n.createElement)(o.a,{title:"Tabs Mobile Drilled-in"},Object(n.createElement)(i.a,null,Object(n.createElement)(A,{visiblePanelIdx:0,isStatic:!0}))),ne({id:"Adjacent-Tab-Sets"},"Adjacent Tab Sets"),re({},"When there are two or more immediately adjacent tab sets on mobile, use the ",te({},"slds-tabs_mobile__group")," class to adjust the styling to make them appear as if they're part of one master list. Semantically, they are still two separate lists."),Object(n.createElement)(o.a,{title:"Tabs Mobile Adjacent Stacked"},Object(n.createElement)(i.a,null,Object(n.createElement)(I,null,Object(n.createElement)(A,{isStatic:!0}),Object(n.createElement)(A,{isStatic:!0,startingIdx:3})))),ne({id:"Nested-Tab-Sets"},"Nested Tab Sets"),Object(n.createElement)(o.a,{title:"Tabs Mobile Nested"},Object(n.createElement)(i.a,{demoStyles:"height: 300px;"},Object(n.createElement)(k,null))),ae({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(n.createElement)(d.a,{name:"tabs",type:"component"}))},me=function(){return Object(s.a)(de())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/tabs/docs.mdx.js"]=function(e){function t(t){for(var n,i,r=t[0],o=t[1],c=t[2],m=0,b=[];m<r.length;m++)i=r[m],Object.prototype.hasOwnProperty.call(l,i)&&l[i]&&b.push(l[i][0]),l[i]=0;for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n]);for(d&&d(t);b.length;)b.shift()();return s.push.apply(s,c\|\|[]),a()}function a(){for(var e,t=0;t<s.length;t++){for(var a=s[t],n=!0,r=1;r<a.length;r++){var o=a[r];0!==l[o]&&(n=!1)}n&&(s.splice(t--,1),e=i(i.s=a[0]))}return e}var n={},l={73:0},s=[];function i(t){if(n[t])return n[t].exports;var a=n[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,i),a.l=!0,a.exports}i.m=e,i.c=n,i.d=function(e,t,a){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(a,n,function(t){return e[t]}.bind(null,n));return a},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var d=o;return s.push([681,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},681:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return de})),a.d(t,"getContents",(function(){return me}));var n=a(0),l=a.n(n),s=a(4),i=a(2),r=a(26),o=a(15),c=a(14),d=a(38),m=a(3),b=a.n(m),u=a(5),h=a.n(u),f=a(10),p=a(62),E=a(12);function v(e){return(v="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})(e)}function y(e,t){for(var a=0;a<t.length;a++){var n=t[a];n.enumerable=n.enumerable\|\|!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function g(e,t){return(g=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function O(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var a,n=j(e);if(t){var l=j(this).constructor;a=Reflect.construct(n,arguments,l)}else a=n.apply(this,arguments);return w(this,a)}}function w(e,t){return!t\|\|"object"!==v(t)&&"function"!=typeof t?T(e):t}function T(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function j(e){return(j=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var I=function(e){return l.a.createElement("div",{className:"slds-tabs-mobile__group"},e.children)};I.propTypes={children:b.a.node};var S=function(e){return l.a.createElement("div",{className:"slds-tabs-mobile__container"},e.children)};S.propTypes={children:b.a.node};var x=function(e){return l.a.createElement("ul",{className:h()("slds-tabs-mobile",{"slds-hidden":e.isHidden})},e.children)};x.propTypes={children:b.a.node,isHidden:b.a.bool};var _=function(e){return l.a.createElement("li",{className:h()("slds-tabs-mobile__item")},e.children)};_.propTypes={children:b.a.node};var N=function(e){return l.a.createElement(E.a,{isFullWidth:!0,onClick:e.onClick},l.a.createElement("span",{className:"slds-truncate",title:e.summary},e.summary),l.a.createElement(f.a,{className:"slds-icon slds-icon_x-small slds-icon-text-default",sprite:"utility",symbol:"chevronright"}))};N.propTypes={onClick:b.a.func,summary:b.a.string};var C=function(e){return l.a.createElement(p.c,{title:e.title,isAnimated:!0,docked:"left",invoke:"drill-in",isInvokedByTab:!0,isVisible:e.isVisible\|\|!1,handleVisibility:e.hidePanel,hasCenterTitle:!0},e.children\|\|"A panel body accepts any layout or component")};C.propTypes={hidePanel:b.a.func,isVisible:b.a.bool,title:b.a.string,children:b.a.node};var k=function(e){return l.a.createElement(S,null,l.a.createElement(x,{isHidden:!0},l.a.createElement(_,null,l.a.createElement(N,{summary:"Item One"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Item Two"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Item Three"}))),l.a.createElement(C,{title:"Item 1 Panel",isVisible:!0},l.a.createElement(x,null,l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item One"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item Two"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item Three"}))),l.a.createElement("div",null," Any content can be here "),l.a.createElement(x,null,l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item Four"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item Five"})))),l.a.createElement(C,{title:"Item 2 Panel"}),l.a.createElement(C,{title:"Item 3 Panel"}),l.a.createElement(C,{title:"Nested Item 1 Panel"}),l.a.createElement(C,{title:"Nested Item 2 Panel"}),l.a.createElement(C,{title:"Nested Item 3 Panel"}),l.a.createElement(C,{title:"Nested Item 4 Panel"}),l.a.createElement(C,{title:"Nested Item 5 Panel"}))},P=function(e){!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}}),t&&g(e,t)}(i,e);var t,a,n,s=O(i);function i(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i),(t=s.call(this,e)).hidePanel=t.hidePanel.bind(T(t)),t.state={visiblePanelIdx:-1},t}return t=i,(a=[{key:"componentDidMount",value:function(){void 0!==this.props.visiblePanelIdx&&-1===this.state.visiblePanelIdx&&this.setState({visiblePanelIdx:this.props.visiblePanelIdx})}},{key:"showPanel",value:function(e){this.props.isStatic\|\|this.setState({visiblePanelIdx:e})}},{key:"hidePanel",value:function(){this.props.isStatic\|\|this.setState({visiblePanelIdx:-1})}},{key:"render",value:function(){var e=this.state.visiblePanelIdx;return l.a.createElement(S,null,l.a.createElement(x,{isHidden:-1!==e},l.a.createElement(_,null,l.a.createElement(N,{summary:"Item One",onClick:this.showPanel.bind(this,0)})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Item Two",onClick:this.showPanel.bind(this,1)})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Item Three",onClick:this.showPanel.bind(this,2)}))),l.a.createElement(C,{title:"Item 1 Panel",isVisible:0===e,hidePanel:this.hidePanel}),l.a.createElement(C,{title:"Item 2 Panel",isVisible:1===e,hidePanel:this.hidePanel}),l.a.createElement(C,{title:"Item 3 Panel",isVisible:2===e,hidePanel:this.hidePanel}))}}])&&y(t.prototype,a),n&&y(t,n),i}(n.Component);P.propTypes={visiblePanelIdx:b.a.number,isStatic:b.a.bool};var A=P,U=a(31),W=a(33),M=a(11),B=a(160),L=a(9),V=a(101),F=a(13),D=function(e){return l.a.createElement(U.a,{selectedIndex:e.selectedIndex},l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},e.itemOneContent),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};D.propTypes={selectedIndex:b.a.number,itemOneContent:b.a.node},D.defaultProps={selectedIndex:0,itemOneContent:"Item One Content"};var R=function(){return l.a.createElement(D,{itemOneContent:l.a.createElement(V.a,null)})},H=function(){return l.a.createElement("div",{className:"demo-only",style:{height:"12rem"}},l.a.createElement(U.a,null,l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},l.a.createElement("h2",null,"Item One Content")),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},l.a.createElement("h2",null,"Item Two Content")),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},l.a.createElement("h2",null,"Item Three Content")),l.a.createElement(U.a.Item,{title:"Item Four",id:"tab-default-4"},l.a.createElement("h2",null,"Item Four Content")),l.a.createElement(U.a.Item,{title:"Item Five",id:"tab-default-5"},l.a.createElement("h2",null,"Item Five Content")),l.a.createElement(U.a.ItemOverflow,{title:"More Tabs",id:"tab-default-8"},l.a.createElement(B.a,{label:"More",type:"tabs",flavor:"default",isOpen:!0},l.a.createElement(q,null)))))},z=function(){return l.a.createElement("div",{className:"demo-only",style:{height:"12rem"}},l.a.createElement(U.a,null,l.a.createElement(U.a.Item,{title:"Opportunities",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",symbol:"opportunity",title:"Opportunities",assistiveText:!1}),id:"tab-default-1"},l.a.createElement("h2",null,"Item One Content")),l.a.createElement(U.a.Item,{title:"Cases",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",title:"Cases",symbol:"case",assistiveText:!1}),id:"tab-default-2"},l.a.createElement("h2",null,"Item Two Content")),l.a.createElement(U.a.Item,{title:"Products",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",title:"Products",symbol:"product",assistiveText:!1}),id:"tab-default-3"},l.a.createElement("h2",null,"Item Three Content")),l.a.createElement(U.a.Item,{title:"Price Books",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",title:"Price Books",symbol:"pricebook",assistiveText:!1}),id:"tab-default-4"},l.a.createElement("h2",null,"Item Four Content")),l.a.createElement(U.a.Item,{title:"Contacts",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",title:"Contacts",symbol:"contact",assistiveText:!1}),id:"tab-default-5"},l.a.createElement("h2",null,"Item Five Content")),l.a.createElement(U.a.ItemOverflow,{title:"More Tabs",id:"tab-default-8"},l.a.createElement(B.a,{label:"More",type:"tabs",flavor:"default",isOpen:!0},l.a.createElement(J,null)))))},q=function(){return l.a.createElement(L.f,{className:"slds-dropdown_right"},l.a.createElement(L.h,{className:"slds-dropdown_length-with-icon-10"},l.a.createElement(L.g,{title:"Accounts"},"Accounts"),l.a.createElement(L.g,{title:"Approvals"},"Approvals"),l.a.createElement(L.g,{title:"Lead"},"Leads")))},J=function(){return l.a.createElement(L.f,{className:"slds-dropdown_right"},l.a.createElement(L.h,{className:"slds-dropdown_length-with-icon-10"},l.a.createElement(L.g,{title:"Accounts"},l.a.createElement("span",{className:"slds-media slds-media_center"},l.a.createElement("span",{className:"slds-media__figure"},l.a.createElement(W.a,{className:"slds-icon_small",symbol:"account",assistiveText:!1})),l.a.createElement("span",{className:"slds-media__body"},"Accounts"))),l.a.createElement(L.g,{title:"Approvals"},l.a.createElement("span",{className:"slds-media slds-media_center"},l.a.createElement("span",{className:"slds-media__figure"},l.a.createElement(W.a,{className:"slds-icon_small",symbol:"approval",assistiveText:!1})),l.a.createElement("span",{className:"slds-media__body"},"Approvals"))),l.a.createElement(L.g,{title:"Lead"},l.a.createElement("span",{className:"slds-media slds-media_center"},l.a.createElement("span",{className:"slds-media__figure"},l.a.createElement(W.a,{className:"slds-icon_small",symbol:"lead",assistiveText:!1})),l.a.createElement("span",{className:"slds-media__body"},"Leads")))))},G=function(){return l.a.createElement(U.a,{isCard:!0,selectedIndex:0},l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},l.a.createElement(F.d,null,l.a.createElement(F.c,{symbol:"contact",title:"Card Header",href:"#",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l.a.createElement(F.a,{hasPadding:!0},"This is a card inside an ",l.a.createElement("code",{className:"doc"},".slds-tabs_card")," ","to show how styling is removed when cards are nested inside."),l.a.createElement(F.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts"))),l.a.createElement(F.d,null,l.a.createElement(F.c,{symbol:"contact",title:"Card Header",href:"#",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l.a.createElement(F.a,{hasPadding:!0},"This is a card inside an ",l.a.createElement("code",{className:"doc"},".slds-tabs_card")," ","to show how styling is removed when cards are nested inside."),l.a.createElement(F.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts"))),l.a.createElement(F.d,{hasCardBoundary:!0},l.a.createElement(F.c,{symbol:"contact",title:"Card Header",href:"#",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l.a.createElement(F.a,{hasPadding:!0},"This is a card inside an ",l.a.createElement("code",{className:"doc"},".slds-tabs_card")," ","to illustrate how",l.a.createElement("code",{className:"doc"},".slds-card_boundary")," adds a rounded border when desired."),l.a.createElement(F.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts")))),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))},K=function(){return l.a.createElement("div",{className:"demo-only",style:{height:"12rem"}},l.a.createElement(U.a,null,l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},l.a.createElement("h2",null,"Item One Content")),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2",rightIcon:l.a.createElement(M.a,{className:"slds-icon_x-small slds-icon-text-error",symbol:"error",title:"This item has an error",assistiveText:"This item has an error"})},l.a.createElement("h2",null,"Item Two Content - Has Error")),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},l.a.createElement("h2",null,"Item Three Content")),l.a.createElement(U.a.Item,{title:"Item Four",id:"tab-default-4"},l.a.createElement("h2",null,"Item Four Content"))))},Y=function(){return l.a.createElement(U.a,{size:"medium"},l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))},$=function(){return l.a.createElement(U.a,{size:"large"},l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))},Q=(U.a,U.a.Item,U.a.Item,U.a.Item,a(45)),X=a(102),Z=a(1),ee=s.c.a,te=s.c.code,ae=s.c.h2,ne=s.c.h3,le=s.c.h4,se=s.c.h5,ie=s.c.li,re=s.c.p,oe=s.c.strong,ce=s.c.ul,de=function(){return Object(n.createElement)(s.b,{},Object(n.createElement)("div",{className:"doc lead"},"Tabs keeps related content in a single container that is shown and hidden through navigation."),Object(n.createElement)(i.a,{exampleOnly:!0,demoStyles:"height: 200px;"},Object(n.createElement)(D,null)),ae({id:"About-Tabs"},"About Tabs"),re({},"The default tab set style encapsulates everything that is underneath it without enclosing it visually. Because tab sets can be nested, pay close attention to the markup. They are constructed to prevent styles from leaking from parent tab sets into child tab sets."),ne({id:"Implementation"},"Implementation"),le({id:"Markup"},"Markup"),re({},"The following markup is crucial for Accessibility"),ce({},ie({},"Selected tab’s anchor has ",te({},'aria-selected="true"'),", all other tabs’ anchors have ",te({},'aria-selected="false"')),ie({},"Selected tab’s anchor has ",te({},'tabindex="0"'),", all other tabs have ",te({},'tabindex="-1"')),ie({},"Each tab’s anchor has an ",te({},"aria-controls")," attribute whose value is the id of the associated ",te({},'<div role="tabpanel">')),ie({},"Each tab panel has an ",te({},"aria-labelledby")," attribute whose value is the id of its associated ",te({},'<a role="tab">'))),le({id:"Keyboard-Interactions"},"Keyboard Interactions"),ce({},ie({},"Arrow keys, when focus is on a selected tab, cycle selection to the next or previous tab"),ie({},"Tab key, when focus is before the tab list, moves focus to the selected tab"),ie({},"Tab key, when focus is on selected tab, moves focus into the selected tab’s associated tab panel or to the next focusable element on the page if that panel has no focusable elements"),ie({},"Shift+Tab keys, when focus is on first element in a tab panel, moves focus back to the selected tab")),le({id:"JavaScript-Needs"},"JavaScript Needs"),re({},"The active tab has two markup requirements:"),ce({},ie({},"The ",te({},".slds-active")," class should be placed on the ",te({},"li")," with ",te({},".slds-tabs_{variant}__item"),"."),ie({},"The corresponding ",te({},".slds-tabs_{variant}__content")," container receives ",te({},".slds-show"),"."),ie({},"In order to achieve the focus state styling, apply ",te({},".slds-has-focus")," to the parent ",te({},"li"),".")),re({},"Inactive ",te({},".slds-tabs_{variant}__content")," containers receive ",te({},".slds-hide"),"."),re({},"When the user clicks a different tab, move the ",te({},".slds-active")," class and toggle the ",te({},".slds-hide"),"/",te({},".slds-show")," classes."),ne({id:"Accessibility"},"Accessibility"),re({},"Tabbed UIs have three parts with specific ",oe({},"ARIA")," role requirements:"),ce({},ie({},"The tab list, which should have ",te({},'role="tablist"')),ie({},"The tabs in that list, which should each be an ",te({},'<a role="tab">')," anchor wrapped in a ",te({},'<li role="presentation">')," list item"),ie({},"The tab panels, which display each tab’s content and should each have ",te({},'role="tabpanel"'))),ae({id:"Base"},"Base"),Object(n.createElement)(o.a,{title:"Tabs Base"},Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(n.createElement)(D,null))),ae({id:"With-Overflow"},"With Overflow"),re({},"The overflow tab style is provided as a tab item type that acts as a menu component and appears as a tab item. It could contain those tab items that don't all fit in a horizontal orientation."),Object(n.createElement)(o.a,{title:"Tabs Overflowing"},Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(n.createElement)(H,null))),Object(n.createElement)(c.a,{type:"note",header:"Implementation Guidelines"},Object(n.createElement)("p",null,"The ",Object(n.createElement)("code",null,"slds-dropdown__list")," element requires a",Object(n.createElement)("code",null,"slds-dropdown_length-with-icon-10")," class, where 10 is the maximum number of items that will be visible before having to scroll.")),ae({id:"With-Icon"},"With Icon"),re({},"Icons can be used with tabs to help users differentiate among them."),Object(n.createElement)(o.a,{title:"Tabs With Icons"},Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(n.createElement)(z,null))),ae({id:"With-Error"},"With Error"),re({},"An icon can be used to communicate when a tab contains a validation error that needs attention."),Object(n.createElement)(o.a,{title:"Tabs With Icons"},Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(n.createElement)(K,null))),ae({id:"With-Nested-Scoped-Tabs"},"With Nested Scoped Tabs"),re({},"If nesting tabs within tabs, the second set should be rendered as ",ee({href:"/components/scoped-tabs"},"Scoped Tabs")," to help differentiate between tab sets."),Object(n.createElement)(o.a,{title:"Tabs with Nested Scoped Tabs"},Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(n.createElement)(R,null))),ae({id:"Size-Modifiers"},"Size Modifiers"),re({},"Tabs come with three size modifiers: default, medium, and large. Each size step will gradually increase the typography. Add the modifier class ",te({},"slds-tabs_medium")," or ",te({},"slds-tabs_large")," to the ",te({},"slds-tabs_default")," element."),ne({id:"Medium"},"Medium"),Object(n.createElement)(o.a,{title:"Tabs with Medium sizing modifier"},Object(n.createElement)(i.a,null,Object(n.createElement)(Y,null))),ne({id:"Large"},"Large"),Object(n.createElement)(o.a,{title:"Tabs with Large sizing modifier"},Object(n.createElement)(i.a,null,Object(n.createElement)($,null))),ae({id:"Subtabs"},"Subtabs"),re({},"Subtabs are used to provide an additional level of navigation below the ",ee({href:"/components/global-navigation"},"Global Navigation")," Tab Bar. Use these tabs when users need to work across multiple sub-pages within a single navigation item."),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.e)),ne({id:"Expected-Behavior"},"Expected Behavior"),ce({},ie({},"The first tab within the Subtab Bar is always the default content for the parent navigation item. To differentiate this tab from other sub-navigation tabs, this tab cannot be closed."),ie({},"When opening a navigation item for the first time, the default sub-navigation tab can be assumed; don’t show the Subtab Bar.",ce({},ie({},"When opening the first additional sub-navigation tab, a new tab bar is inserted containing both the default tab and the new sub-navigation tab."))),ie({},"All subtabs are closed when the parent navigation item is closed."),ie({},"Subtabs can optionally include a tab menu for additional controls.")),ne({id:"With-Focus"},"With Focus"),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"subtabs-has-focus")),ne({id:"With-Borders"},"With Borders"),re({},"To add borders on either side of the subtab, add the classes ",te({},"slds-border_right")," and ",te({},"slds-border_left"),", as needed, to the ",te({},"<li>")," with class ",te({},"slds-sub-tabs__item"),"."),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"subtabs-borders")),ne({id:"With-Tab-Actions"},"With Tab Actions"),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"subtabs-menu")),ne({id:"Status-Options"},"Status Options"),le({id:"Unsaved-Tab"},"Unsaved Tab"),re({},"Unsaved tabs receive a blue asterisk on the tab."),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"subtabs-unsaved")),Object(n.createElement)(c.a,{header:"Additional Tag for Accessibility",type:"a11y"},Object(n.createElement)("p",null,"In order to inform screen readers of the unsaved state, an ",Object(n.createElement)("code",null,"<abbr>")," tag is used to render the asterisk. The ",Object(n.createElement)("code",null,"title")," attribute and ",Object(n.createElement)("code",null,"aria-label")," should read ",Object(n.createElement)("b",null,'"Tab Not Saved"'),".")),Object(n.createElement)(r.a,{toggleCode:!1},Object(n.createElement)("abbr",{className:"slds-indicator_unsaved",title:"Tab Not Saved","aria-label":"Tab Not Saved"},"*")),le({id:"Communicating-Status-to-Screen-Readers"},"Communicating Status to Screen Readers"),re({},"The following examples of subtab status updates should all employ the same technique to communicate that update to users of assistive technology, who would be otherwise unaware of that status change."),re({},"You should use a single hidden ARIA live region for the entire subtabs block, the contents of which gets updated each time a subtab changes its status. The contents should contain a description of the status level and the name of the tab the status change event occurred in. The markup would look something like:"),Object(n.createElement)(r.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"...")),re({},"Upon clearing the status on a given tab, you should clear the message from the live region."),le({id:"Unread-Tab"},"Unread Tab"),re({},"Unread tabs receive a red dot on the tab."),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"unread")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"In order to inform screen readers of new activity in a tab, 2 things should occur."),Object(n.createElement)("ol",{className:"slds-list_ordered"},Object(n.createElement)("li",null,"The ",Object(n.createElement)("code",null,"title")," attribute and ",Object(n.createElement)("code",null,"aria-label")," on the element that displays the red dot should read ",Object(n.createElement)("b",null,'"New Activity"'),'. This will update the text content of the tab to include the "New Activity" text: "New Activity Chat - Customer".'),Object(n.createElement)("li",null,"The hidden live region as described above, should have its content updated to ",Object(n.createElement)("b",null,'"New Activity in Tab: [Tab Name Here]"')," to alert the user of new activity in that particular subtab."))),Object(n.createElement)(r.a,{toggleCode:!1},Object(n.createElement)("span",{"aria-label":"New Activity",className:"slds-indicator_unread",title:"New Activity"})),Object(n.createElement)(r.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"New activity in Tab: Chat - Customer")),le({id:"Unread-and-Unsaved-Tab"},"Unread and Unsaved Tab"),re({},"Unread and unsaved tabs receive a blue asterisk with a red dot underneath. Be sure to check out the individual sections above for the Accessibility requirements."),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"unsaved")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"Don't forget to update the hidden live region with which subtab has new activity")),le({id:"Warning-Tab"},"Warning Tab"),re({},"When you wish to draw attention to a particular subtab because a warning about that tab has occurred, you can use the ",te({},"slds-has-warning")," class to change the background color and introduce a short pulsing animation to draw attention from the user."),re({},"The icon is updated to be the warning icon, to give an extra way to communicate the level of the status without relying on the use of color alone."),re({},"In this example we show that something inside the subtab is about to break a service level agreement in 30 seconds, and we wish to draw the users attention to it to take action."),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"warning")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"Update the hidden live region with a message that informs the user of the status level, the warning and the offending subtab"," ",Object(n.createElement)("b",null,"[level]: [message] in tab: [tab_name]"))),Object(n.createElement)(r.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer")),se({id:"Unsaved-Warning-Tab"},"Unsaved Warning Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"warning-unsaved")),se({id:"Unread-Warning-Tab"},"Unread Warning Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"warning-unread")),le({id:"Error-Tab"},"Error Tab"),re({},"When you wish to draw attention to a particular subtab because an error or violation has occurred in that tab, you can use the ",te({},"slds-has-error")," class to change the background color and introduce a short pulsing animation to draw attention from the user."),re({},"The icon is updated to be the error icon, to give an extra way to communicate the level of the status without relying on the use of color alone."),re({},"In this example we show that something inside the subtab has broken an SLA agreement, and we wish to draw the users attention to it to take action."),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"error")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"Update the hidden live region with a message that informs the user of the status level, the error or violation and the offending subtab"," ",Object(n.createElement)("b",null,"[level]: [message] in tab: [tab_name]"))),Object(n.createElement)(r.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"Violation: SLA agreement in tab: Chat - Customer")),se({id:"Unsaved-Error-Tab"},"Unsaved Error Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"error-unsaved")),se({id:"Unread-Error-Tab"},"Unread Error Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"error-unread")),le({id:"Success-Tab"},"Success Tab"),re({},"When you wish to draw attention to a particular subtab because a warning or violation has been cleared in the subtab, you can use the ",te({},"slds-has-success")," class to change the background color and introduce a short pulsing animation to draw attention from the user."),re({},"The icon is updated to be the success icon, to give an extra way to communicate the level of the status without relying on the use of color alone."),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"success")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"Update the hidden live region with a message that informs the user that the status level has been successfully cleared and the subtab it was cleared from"," ",Object(n.createElement)("b",null,"[level]: [message] in tab: [tab_name]"))),Object(n.createElement)(r.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"Success: SLA agreement warning cleared in tab: Chat - Customer")),se({id:"Unsaved-Success-Tab"},"Unsaved Success Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"success-unsaved")),se({id:"Unread-Success-Tab"},"Unread Success Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"success-unread")),ne({id:"With-Overflow-Tab"},"With Overflow Tab"),re({},"Overflowing subtabs are contained in a More dropdown."),Object(n.createElement)(i.a,{demoStyles:"height: 100px;"},Object(Z.f)(Q.f,"overflow-tabs")),le({id:"Overflow-Tab-Open"},"Overflow Tab Open"),Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(Z.f)(Q.f,"overflow-tabs-open")),le({id:"Unread-Overflow-Tab"},"Unread Overflow Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(Z.f)(Q.f,"unread-overflow-tabs-open")),le({id:"Unsaved-Overflow-Tab"},"Unsaved Overflow Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(Z.f)(Q.f,"unsaved-overflow-tabs-open")),le({id:"Unread-and-Unsaved-Overflow-Tab"},"Unread and Unsaved Overflow Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(Z.f)(Q.f,"unsaved-unread-overflow-tabs-open")),le({id:"Success-Overflow-Tab"},"Success Overflow Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(Z.f)(Q.f,"overflow-tabs-success")),le({id:"Unread-and-Unsaved-Success-Overflow-Tab"},"Unread and Unsaved Success Overflow Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(Z.f)(Q.f,"overflow-tabs-success-unread-unsaved")),le({id:"Warning-Overflow-Tab"},"Warning Overflow Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(Z.f)(Q.f,"overflow-tabs-warning")),le({id:"Unread-and-Unsaved-Warning-Overflow-Tab"},"Unread and Unsaved Warning Overflow Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(Z.f)(Q.f,"overflow-tabs-warning-unread-unsaved")),le({id:"Error-Overflow-Tab"},"Error Overflow Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(Z.f)(Q.f,"overflow-tabs-error")),le({id:"Unread-and-Unsaved-Error-Overflow-Tab"},"Unread and Unsaved Error Overflow Tab"),Object(n.createElement)(i.a,{demoStyles:"height: 200px;"},Object(Z.f)(Q.f,"overflow-tabs-error-unread-unsaved")),ae({id:"Vertical"},"Vertical"),re({},"To use vertical tabs, check out the ",ee({href:"../vertical-tabs"},"Vertical Tabs")," component."),Object(n.createElement)(o.a,{title:"Tabs as Vertical"},X.a),ae({id:"As-a-Card"},"As a Card"),re({},"To style tabs as a card, add the class ",te({},"slds-tabs_card")," to the ",te({},"<div>")," with the class ",te({},"slds-tabs_default"),". See the following example for guidance on styling cards inside the tab panel content."),Object(n.createElement)(o.a,{title:"Tabs as a Card"},Object(n.createElement)(i.a,{demoStyles:"height: 600px;"},Object(n.createElement)(G,null))),ae({id:"On-Mobile"},"On Mobile"),re({},"For mobile, tabs become stacked and act as buttons that drill in to see the tab's content."),re({},"Mobile tabs consist of two parts, the tabs, which are represented via buttons, and their associated panels. When clicking on one of the buttons, the associated panel will slide in from right-to-left."),Object(n.createElement)(c.a,{header:"Focus Management",type:"a11y"},Object(n.createElement)("p",null,"When a user selects a tab button, focus should be placed on the back button of the panel that slides into view. When the user clicks the back button, focus should be placed on the button that was just pressed.")),Object(n.createElement)(o.a,{title:"Tabs Mobile Base"},Object(n.createElement)(i.a,null,Object(n.createElement)(A,null))),ne({id:"Accessibility-2"},"Accessibility"),re({},oe({},"Visibility")),ce({},ie({},"The panels should have ",te({},"aria-hidden=true")," when they are not visible to ensure keyboard and screen reader users cannot access the content."),ie({},"The tabs should have ",te({},"aria-hidden=true")," when a panel is open to ensure keyboard and screen reader users cannot access the buttons.")),re({},oe({},"Focus Management")),re({},"When a user selects a tab button, focus should be placed on the back button of the panel that slides into view. When the user clicks the back button, focus should be placed on the button that was just pressed."),re({},oe({},"Assistive Text")),re({},"The title and assistive text for the panel's back button text should read \"Collapse $&123;heading text&125;” so it stays contextual to the tab that was clicked on."),ne({id:"Panel-Open"},"Panel Open"),re({},'When clicking a tab button, the entire view changes and is replaced with the "content" of that tab inside of a panel. This includes a back button on the top left of the screen to go back to the view with the tabs.'),Object(n.createElement)(o.a,{title:"Tabs Mobile Drilled-in"},Object(n.createElement)(i.a,null,Object(n.createElement)(A,{visiblePanelIdx:0,isStatic:!0}))),ne({id:"Adjacent-Tab-Sets"},"Adjacent Tab Sets"),re({},"When there are two or more immediately adjacent tab sets on mobile, use the ",te({},"slds-tabs_mobile__group")," class to adjust the styling to make them appear as if they're part of one master list. Semantically, they are still two separate lists."),Object(n.createElement)(o.a,{title:"Tabs Mobile Adjacent Stacked"},Object(n.createElement)(i.a,null,Object(n.createElement)(I,null,Object(n.createElement)(A,{isStatic:!0}),Object(n.createElement)(A,{isStatic:!0,startingIdx:3})))),ne({id:"Nested-Tab-Sets"},"Nested Tab Sets"),Object(n.createElement)(o.a,{title:"Tabs Mobile Nested"},Object(n.createElement)(i.a,{demoStyles:"height: 300px;"},Object(n.createElement)(k,null))),ae({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(n.createElement)(d.a,{name:"tabs",type:"component"}))},me=function(){return Object(s.a)(de())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/textarea/docs.mdx.js"]=function(e){function t(t){for(var n,c,l=t[0],u=t[1],i=t[2],d=0,f=[];d<l.length;d++)c=l[d],Object.prototype.hasOwnProperty.call(a,c)&&a[c]&&f.push(a[c][0]),a[c]=0;for(n in u)Object.prototype.hasOwnProperty.call(u,n)&&(e[n]=u[n]);for(s&&s(t);f.length;)f.shift()();return o.push.apply(o,i\|\|[]),r()}function r(){for(var e,t=0;t<o.length;t++){for(var r=o[t],n=!0,l=1;l<r.length;l++){var u=r[l];0!==a[u]&&(n=!1)}n&&(o.splice(t--,1),e=c(c.s=r[0]))}return e}var n={},a={74:0},o=[];function c(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,c),r.l=!0,r.exports}c.m=e,c.c=n,c.d=function(e,t,r){c.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:r})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(c.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)c.d(r,n,function(t){return e[t]}.bind(null,n));return r},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/assets/scripts/bundle/";var l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],u=l.push.bind(l);l.push=t,l=l.slice();for(var i=0;i<l.length;i++)t(l[i]);var s=u;return o.push([~~588~~,0]),r()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~588~~:function(e,t,r){"use strict";r.r(t),r.d(t,"getElement",(function(){return b})),r.d(t,"getContents",(function(){return p}));var n=r(0),a=r(4),o=r(2),c=r(37),l=r(1),u=(r(14),r(42)),i=a.c.code,s=a.c.h2,d=a.c.h3,f=a.c.p,b=function(){return Object(n.createElement)(a.b,{},Object(n.createElement)("div",{className:"doc lead"},"Textarea inputs are used for freeform data entry."),Object(n.createElement)(o.a,{exampleOnly:!0},Object(l.f)(u.c,"required")),s({id:"About-Textarea"},"About Textarea"),f({},"You can style the HTML ",i({},"<textarea>")," element to align with the Salesforce brand by using the class ",i({},".slds-textarea")," on the ",i({},"<textarea>")," element."),s({id:"Base"},"Base"),Object(n.createElement)(o.a,null,Object(l.f)(u.b)),s({id:"States"},"States"),d({id:"Disabled"},"Disabled"),Object(n.createElement)(o.a,null,Object(l.f)(u.c,"disabled")),d({id:"Required"},"Required"),Object(n.createElement)(o.a,null,Object(l.f)(u.c,"required")),d({id:"Error"},"Error"),Object(n.createElement)(o.a,null,Object(l.f)(u.c,"error")),d({id:"Read-only"},"Read only"),Object(n.createElement)(o.a,null,Object(l.f)(u.c,"read-only")),s({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(n.createElement)(c.a,{name:"textarea",type:"component"}))},p=function(){return Object(a.a)(b())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/textarea/docs.mdx.js"]=function(e){function t(t){for(var n,c,l=t[0],u=t[1],i=t[2],d=0,f=[];d<l.length;d++)c=l[d],Object.prototype.hasOwnProperty.call(a,c)&&a[c]&&f.push(a[c][0]),a[c]=0;for(n in u)Object.prototype.hasOwnProperty.call(u,n)&&(e[n]=u[n]);for(s&&s(t);f.length;)f.shift()();return o.push.apply(o,i\|\|[]),r()}function r(){for(var e,t=0;t<o.length;t++){for(var r=o[t],n=!0,l=1;l<r.length;l++){var u=r[l];0!==a[u]&&(n=!1)}n&&(o.splice(t--,1),e=c(c.s=r[0]))}return e}var n={},a={74:0},o=[];function c(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,c),r.l=!0,r.exports}c.m=e,c.c=n,c.d=function(e,t,r){c.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:r})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(c.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)c.d(r,n,function(t){return e[t]}.bind(null,n));return r},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/assets/scripts/bundle/";var l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],u=l.push.bind(l);l.push=t,l=l.slice();for(var i=0;i<l.length;i++)t(l[i]);var s=u;return o.push([589,0]),r()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},589:function(e,t,r){"use strict";r.r(t),r.d(t,"getElement",(function(){return b})),r.d(t,"getContents",(function(){return p}));var n=r(0),a=r(4),o=r(2),c=r(38),l=r(1),u=(r(14),r(43)),i=a.c.code,s=a.c.h2,d=a.c.h3,f=a.c.p,b=function(){return Object(n.createElement)(a.b,{},Object(n.createElement)("div",{className:"doc lead"},"Textarea inputs are used for freeform data entry."),Object(n.createElement)(o.a,{exampleOnly:!0},Object(l.f)(u.c,"required")),s({id:"About-Textarea"},"About Textarea"),f({},"You can style the HTML ",i({},"<textarea>")," element to align with the Salesforce brand by using the class ",i({},".slds-textarea")," on the ",i({},"<textarea>")," element."),s({id:"Base"},"Base"),Object(n.createElement)(o.a,null,Object(l.f)(u.b)),s({id:"States"},"States"),d({id:"Disabled"},"Disabled"),Object(n.createElement)(o.a,null,Object(l.f)(u.c,"disabled")),d({id:"Required"},"Required"),Object(n.createElement)(o.a,null,Object(l.f)(u.c,"required")),d({id:"Error"},"Error"),Object(n.createElement)(o.a,null,Object(l.f)(u.c,"error")),d({id:"Read-only"},"Read only"),Object(n.createElement)(o.a,null,Object(l.f)(u.c,"read-only")),s({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(n.createElement)(c.a,{name:"textarea",type:"component"}))},p=function(){return Object(a.a)(b())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/tiles/docs.mdx.js"]=function(e){function t(t){for(var r,c,o=t[0],l=t[1],u=t[2],f=0,d=[];f<o.length;f++)c=o[f],Object.prototype.hasOwnProperty.call(a,c)&&a[c]&&d.push(a[c][0]),a[c]=0;for(r in l)Object.prototype.hasOwnProperty.call(l,r)&&(e[r]=l[r]);for(s&&s(t);d.length;)d.shift()();return i.push.apply(i,u\|\|[]),n()}function n(){for(var e,t=0;t<i.length;t++){for(var n=i[t],r=!0,o=1;o<n.length;o++){var l=n[o];0!==a[l]&&(r=!1)}r&&(i.splice(t--,1),e=c(c.s=n[0]))}return e}var r={},a={75:0},i=[];function c(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,c),n.l=!0,n.exports}c.m=e,c.c=r,c.d=function(e,t,n){c.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(c.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)c.d(n,r,function(t){return e[t]}.bind(null,r));return n},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],l=o.push.bind(o);o.push=t,o=o.slice();for(var u=0;u<o.length;u++)t(o[u]);var s=l;return i.push([~~553~~,0]),n()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~553~~:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return d})),n.d(t,"getContents",(function(){return b}));var r=n(0),a=n(4),i=n(2),c=n(1),o=n(14),l=n(78),u=a.c.h2,s=a.c.h3,f=a.c.p,d=function(){return Object(r.createElement)(a.b,{},Object(r.createElement)("div",{className:"doc lead"},"A tile is a grouping of related information associated with a record."),Object(r.createElement)(i.a,{exampleOnly:!0},Object(c.f)(l.c,"with-icon")),u({id:"About-Tile"},"About Tile"),f({},"Tiles are set up to be displayed with or without an image/icon. The default pattern for tiles has an image/icon, a detail body which contains a list of information and action overflow menu dropdown. The detail body list, by default, comes as a name/value pairing but can be swapped out with a string of text or an inline horizontal list."),Object(r.createElement)(o.a,{type:"warning",header:"Warning"},Object(r.createElement)("p",null,"Tiles can have different groupings of information based on its context. Pay close attention to the markup, as each tile layout is constructed differently.")),u({id:"Base"},"Base"),Object(r.createElement)(i.a,null,Object(c.f)(l.b)),u({id:"Examples"},"Examples"),s({id:"Default-with-actions"},"Default with actions"),Object(r.createElement)(i.a,null,Object(c.f)(l.c,"with-action")),s({id:"With-icon"},"With icon"),Object(r.createElement)(i.a,null,Object(c.f)(l.c,"with-icon")),s({id:"With-avatar"},"With avatar"),Object(r.createElement)(i.a,null,Object(c.f)(l.c,"with-avatar")),s({id:"Task"},"Task"),Object(r.createElement)(i.a,null,Object(c.f)(l.c,"task")),s({id:"Article"},"Article"),Object(r.createElement)(i.a,null,Object(c.f)(l.c,"article")),s({id:"Article-with-like-bar"},"Article with like bar"),Object(r.createElement)(i.a,null,Object(c.f)(l.c,"article-liker-bar")),s({id:"Board"},"Board"),Object(r.createElement)(i.a,null,Object(c.f)(l.c,"board")))},b=function(){return Object(a.a)(d())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/tiles/docs.mdx.js"]=function(e){function t(t){for(var r,c,o=t[0],l=t[1],u=t[2],f=0,d=[];f<o.length;f++)c=o[f],Object.prototype.hasOwnProperty.call(a,c)&&a[c]&&d.push(a[c][0]),a[c]=0;for(r in l)Object.prototype.hasOwnProperty.call(l,r)&&(e[r]=l[r]);for(s&&s(t);d.length;)d.shift()();return i.push.apply(i,u\|\|[]),n()}function n(){for(var e,t=0;t<i.length;t++){for(var n=i[t],r=!0,o=1;o<n.length;o++){var l=n[o];0!==a[l]&&(r=!1)}r&&(i.splice(t--,1),e=c(c.s=n[0]))}return e}var r={},a={75:0},i=[];function c(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,c),n.l=!0,n.exports}c.m=e,c.c=r,c.d=function(e,t,n){c.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(c.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)c.d(n,r,function(t){return e[t]}.bind(null,r));return n},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],l=o.push.bind(o);o.push=t,o=o.slice();for(var u=0;u<o.length;u++)t(o[u]);var s=l;return i.push([554,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},554:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return d})),n.d(t,"getContents",(function(){return b}));var r=n(0),a=n(4),i=n(2),c=n(1),o=n(14),l=n(79),u=a.c.h2,s=a.c.h3,f=a.c.p,d=function(){return Object(r.createElement)(a.b,{},Object(r.createElement)("div",{className:"doc lead"},"A tile is a grouping of related information associated with a record."),Object(r.createElement)(i.a,{exampleOnly:!0},Object(c.f)(l.c,"with-icon")),u({id:"About-Tile"},"About Tile"),f({},"Tiles are set up to be displayed with or without an image/icon. The default pattern for tiles has an image/icon, a detail body which contains a list of information and action overflow menu dropdown. The detail body list, by default, comes as a name/value pairing but can be swapped out with a string of text or an inline horizontal list."),Object(r.createElement)(o.a,{type:"warning",header:"Warning"},Object(r.createElement)("p",null,"Tiles can have different groupings of information based on its context. Pay close attention to the markup, as each tile layout is constructed differently.")),u({id:"Base"},"Base"),Object(r.createElement)(i.a,null,Object(c.f)(l.b)),u({id:"Examples"},"Examples"),s({id:"Default-with-actions"},"Default with actions"),Object(r.createElement)(i.a,null,Object(c.f)(l.c,"with-action")),s({id:"With-icon"},"With icon"),Object(r.createElement)(i.a,null,Object(c.f)(l.c,"with-icon")),s({id:"With-avatar"},"With avatar"),Object(r.createElement)(i.a,null,Object(c.f)(l.c,"with-avatar")),s({id:"Task"},"Task"),Object(r.createElement)(i.a,null,Object(c.f)(l.c,"task")),s({id:"Article"},"Article"),Object(r.createElement)(i.a,null,Object(c.f)(l.c,"article")),s({id:"Article-with-like-bar"},"Article with like bar"),Object(r.createElement)(i.a,null,Object(c.f)(l.c,"article-liker-bar")),s({id:"Board"},"Board"),Object(r.createElement)(i.a,null,Object(c.f)(l.c,"board")))},b=function(){return Object(a.a)(d())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/timepicker/docs.mdx.js"]=function(e){function t(t){for(var n,a,s=t[0],l=t[1],c=t[2],d=0,m=[];d<s.length;d++)a=s[d],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&m.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(u&&u(t);m.length;)m.shift()();return i.push.apply(i,c\|\|[]),r()}function r(){for(var e,t=0;t<i.length;t++){for(var r=i[t],n=!0,s=1;s<r.length;s++){var l=r[s];0!==o[l]&&(n=!1)}n&&(i.splice(t--,1),e=a(a.s=r[0]))}return e}var n={},o={76:0},i=[];function a(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,a),r.l=!0,r.exports}a.m=e,a.c=n,a.d=function(e,t,r){a.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:r})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(a.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)a.d(r,n,function(t){return e[t]}.bind(null,n));return r},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/assets/scripts/bundle/";var s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],l=s.push.bind(s);s.push=t,s=s.slice();for(var c=0;c<s.length;c++)t(s[c]);var u=l;return i.push([~~722~~,0]),r()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~722~~:function(e,t,r){"use strict";r.r(t),r.d(t,"getElement",(function(){return q})),r.d(t,"getContents",(function(){return T}));var n=r(0),o=r.n(n),i=r(4),a=r(2),s=(r(14),r(3)),l=r.n(s),c=r(5),u=r.n(c),d=r(22),m=r(23),p=r(24),b=r(11),h=r(1);function f(e,t){return function(e){if(Array.isArray(e))return e}(e)\|\|function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]\|\|e["@@iterator"];if(null==r)return;var n,o,i=[],a=!0,s=!1;try{for(r=r.call(e);!(a=(n=r.next()).done)&&(i.push(n.value),!t\|\|i.length!==t);a=!0);}catch(e){s=!0,o=e}finally{try{a\|\|null==r.return\|\|r.return()}finally{if(s)throw o}}return i}(e,t)\|\|function(e,t){if(!e)return;if("string"==typeof e)return y(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r\|\|"Set"===r)return Array.from(e);if("Arguments"===r\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(r))return y(e,t)}(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 y(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var x=function(e){var t=e.hasFocus,r=e.isOpen,i=e.listboxData,a=e.hasError,s=e.isRequired,l=e.isDisabled,c=Object(n.useRef)(),p=f(Object(n.useState)(""),2),y=p[0],x=p[1],O=f(Object(n.useState)(""),2),g=O[0],v=O[1],S=f(Object(n.useState)(h.d.uniqueId("example-unique-id-")),1)[0],j=f(Object(n.useState)(h.d.uniqueId("example-unique-id-")),1)[0];return Object(n.useEffect)((function(){c.current&&("id"in c.current&&c.current.id&&x(c.current.id),"ariaChecked"in c.current&&c.current.ariaChecked&&v(c.current.textContent))}),[]),o.a.createElement(o.a.Fragment,null,o.a.createElement(d.b,{className:u()("slds-timepicker",{"slds-has-error":a}),id:S,"aria-controls":j,"aria-activedescendant":y,autocomplete:!0,label:"Time",placeholder:"Select a time…",inputIconPosition:"right",rightInputIcon:o.a.createElement(b.a,{symbol:"clock",className:u()("slds-icon slds-icon_x-small slds-icon-text-default",{"slds-icon-text-error":a,"slds-is-disabled":l}),containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(m.e,{id:j,snapshot:i,type:"plain",count:6,focusedRef:c}),resultsType:"listbox",hasInteractions:!0,hasFocus:t,isOpen:r,hasError:a,isRequired:s,isDisabled:l,value:g}),a&&o.a.createElement("div",{className:"slds-form-element__help",id:S+"-error"},"Complete this field."))};x.propTypes={hasFocus:l.a.bool,isOpen:l.a.bool,hasError:l.a.bool,isRequired:l.a.bool,isDisabled:l.a.bool,listboxData:l.a.object};var O=o.a.createElement(x,{listboxData:p.x}),g=[{id:"focused",label:"Focused",element:o.a.createElement(x,{listboxData:p.x,hasFocus:!0,isOpen:!0})},{id:"open-item-focused",label:"Open - Item Focused",element:o.a.createElement(x,{listboxData:p.y,hasFocus:!0,isOpen:!0})},{id:"time-selection",label:"Open - Time selected",element:o.a.createElement(x,{listboxData:p.z,hasFocus:!0,isOpen:!0})},{id:"required",label:"Required",element:o.a.createElement(x,{listboxData:p.x,isRequired:!0})},{id:"error",label:"Error",element:o.a.createElement(x,{listboxData:p.x,hasError:!0})},{id:"required-error",label:"Required with Error",element:o.a.createElement(x,{listboxData:p.x,isRequired:!0,hasError:!0})},{id:"disabled",label:"Disabled",demoStyles:"min-height: 8rem;",storybookStyles:!0,element:o.a.createElement(x,{listboxData:p.x,isDisabled:!0})}],v=i.c.a,S=i.c.code,j=i.c.h2,E=i.c.h3,_=i.c.li,D=i.c.p,w=i.c.strong,k=i.c.ul,q=function(){return Object(n.createElement)(i.b,{},Object(n.createElement)("div",{className:"doc lead"},"A timepicker is an autocomplete text input to capture a time."),Object(n.createElement)(a.a,{exampleOnly:!0,demoStyles:"height: 16rem;"},Object(h.f)(g,"time-selection")),j({id:"About-Timepicker"},"About Timepicker"),E({id:"Implementation"},"Implementation"),D({},"A timepicker is used to select a single time. The component is using the combobox HTML structure and has the following markup requirements:"),D({},w({},"Desktop:")),k({},_({},"Add ",S({},".slds-is-open")," to the element with ",S({},".slds-dropdown-trigger")," to invoke the dropdown that contains the list of time options."),_({},"The ",S({},".slds-has-focus")," modifier class is required on the ",S({},".slds-listbox__option")," element that has focus."),_({},"The ",S({},".slds-is-selected")," modifier class is required on the ",S({},".slds-listbox__option")," element that has been selected.")),D({},w({},"Mobile:")),k({},_({},"When on mobile, we want to leverage the native timepicker by changing the ",S({},"input")," type from ",S({},"text")," to ",S({},"time")),_({},"When switching ",S({},'input type="text"')," to ",S({},'input type="time"')," for mobile, we need to remove the ARIA attributes. The native rendering doesn't require these.",k({},_({},"On the element with the class ",S({},"slds-combobox"),", please remove ",S({},'role="combobox"'),", ",S({},"aria-expanded"),", and ",S({},"aria-haspopup"),"."),_({},"On the ",S({},"input")," that we just added ",S({},'type="time"')," too, please remove ",S({},"aria-controls"),", ",S({},"aria-autocomplete"),", and ",S({},'role="textbox"'),".")))),E({id:"Accessibility"},"Accessibility"),D({},"Please follow the implementation guidelines found under ",v({href:"/components/combobox"},"Combobox")),j({id:"Base"},"Base"),Object(n.createElement)(a.a,{demoStyles:"height: 16rem;"},Object(h.f)(O)),j({id:"States"},"States"),E({id:"Focused"},"Focused"),Object(n.createElement)(a.a,{demoStyles:"height: 16rem;"},Object(h.f)(g,"focused")),E({id:"Open-Item-Focused"},"Open - Item Focused"),Object(n.createElement)(a.a,{demoStyles:"height: 16rem;"},Object(h.f)(g,"open-item-focused")),E({id:"Open-Time-selected"},"Open - Time selected"),Object(n.createElement)(a.a,{demoStyles:"height: 16rem;"},Object(h.f)(g,"time-selection")))},T=function(){return Object(i.a)(q())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/timepicker/docs.mdx.js"]=function(e){function t(t){for(var n,a,s=t[0],l=t[1],c=t[2],d=0,m=[];d<s.length;d++)a=s[d],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&m.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(u&&u(t);m.length;)m.shift()();return i.push.apply(i,c\|\|[]),r()}function r(){for(var e,t=0;t<i.length;t++){for(var r=i[t],n=!0,s=1;s<r.length;s++){var l=r[s];0!==o[l]&&(n=!1)}n&&(i.splice(t--,1),e=a(a.s=r[0]))}return e}var n={},o={76:0},i=[];function a(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,a),r.l=!0,r.exports}a.m=e,a.c=n,a.d=function(e,t,r){a.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:r})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(a.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)a.d(r,n,function(t){return e[t]}.bind(null,n));return r},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/assets/scripts/bundle/";var s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],l=s.push.bind(s);s.push=t,s=s.slice();for(var c=0;c<s.length;c++)t(s[c]);var u=l;return i.push([723,0]),r()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},723:function(e,t,r){"use strict";r.r(t),r.d(t,"getElement",(function(){return q})),r.d(t,"getContents",(function(){return T}));var n=r(0),o=r.n(n),i=r(4),a=r(2),s=(r(14),r(3)),l=r.n(s),c=r(5),u=r.n(c),d=r(23),m=r(24),p=r(25),b=r(11),h=r(1);function f(e,t){return function(e){if(Array.isArray(e))return e}(e)\|\|function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]\|\|e["@@iterator"];if(null==r)return;var n,o,i=[],a=!0,s=!1;try{for(r=r.call(e);!(a=(n=r.next()).done)&&(i.push(n.value),!t\|\|i.length!==t);a=!0);}catch(e){s=!0,o=e}finally{try{a\|\|null==r.return\|\|r.return()}finally{if(s)throw o}}return i}(e,t)\|\|function(e,t){if(!e)return;if("string"==typeof e)return y(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r\|\|"Set"===r)return Array.from(e);if("Arguments"===r\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(r))return y(e,t)}(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 y(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var x=function(e){var t=e.hasFocus,r=e.isOpen,i=e.listboxData,a=e.hasError,s=e.isRequired,l=e.isDisabled,c=Object(n.useRef)(),p=f(Object(n.useState)(""),2),y=p[0],x=p[1],O=f(Object(n.useState)(""),2),g=O[0],v=O[1],S=f(Object(n.useState)(h.d.uniqueId("example-unique-id-")),1)[0],j=f(Object(n.useState)(h.d.uniqueId("example-unique-id-")),1)[0];return Object(n.useEffect)((function(){c.current&&("id"in c.current&&c.current.id&&x(c.current.id),"ariaChecked"in c.current&&c.current.ariaChecked&&v(c.current.textContent))}),[]),o.a.createElement(o.a.Fragment,null,o.a.createElement(d.b,{className:u()("slds-timepicker",{"slds-has-error":a}),id:S,"aria-controls":j,"aria-activedescendant":y,autocomplete:!0,label:"Time",placeholder:"Select a time…",inputIconPosition:"right",rightInputIcon:o.a.createElement(b.a,{symbol:"clock",className:u()("slds-icon slds-icon_x-small slds-icon-text-default",{"slds-icon-text-error":a,"slds-is-disabled":l}),containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(m.e,{id:j,snapshot:i,type:"plain",count:6,focusedRef:c}),resultsType:"listbox",hasInteractions:!0,hasFocus:t,isOpen:r,hasError:a,isRequired:s,isDisabled:l,value:g}),a&&o.a.createElement("div",{className:"slds-form-element__help",id:S+"-error"},"Complete this field."))};x.propTypes={hasFocus:l.a.bool,isOpen:l.a.bool,hasError:l.a.bool,isRequired:l.a.bool,isDisabled:l.a.bool,listboxData:l.a.object};var O=o.a.createElement(x,{listboxData:p.x}),g=[{id:"focused",label:"Focused",element:o.a.createElement(x,{listboxData:p.x,hasFocus:!0,isOpen:!0})},{id:"open-item-focused",label:"Open - Item Focused",element:o.a.createElement(x,{listboxData:p.y,hasFocus:!0,isOpen:!0})},{id:"time-selection",label:"Open - Time selected",element:o.a.createElement(x,{listboxData:p.z,hasFocus:!0,isOpen:!0})},{id:"required",label:"Required",element:o.a.createElement(x,{listboxData:p.x,isRequired:!0})},{id:"error",label:"Error",element:o.a.createElement(x,{listboxData:p.x,hasError:!0})},{id:"required-error",label:"Required with Error",element:o.a.createElement(x,{listboxData:p.x,isRequired:!0,hasError:!0})},{id:"disabled",label:"Disabled",demoStyles:"min-height: 8rem;",storybookStyles:!0,element:o.a.createElement(x,{listboxData:p.x,isDisabled:!0})}],v=i.c.a,S=i.c.code,j=i.c.h2,E=i.c.h3,_=i.c.li,D=i.c.p,w=i.c.strong,k=i.c.ul,q=function(){return Object(n.createElement)(i.b,{},Object(n.createElement)("div",{className:"doc lead"},"A timepicker is an autocomplete text input to capture a time."),Object(n.createElement)(a.a,{exampleOnly:!0,demoStyles:"height: 16rem;"},Object(h.f)(g,"time-selection")),j({id:"About-Timepicker"},"About Timepicker"),E({id:"Implementation"},"Implementation"),D({},"A timepicker is used to select a single time. The component is using the combobox HTML structure and has the following markup requirements:"),D({},w({},"Desktop:")),k({},_({},"Add ",S({},".slds-is-open")," to the element with ",S({},".slds-dropdown-trigger")," to invoke the dropdown that contains the list of time options."),_({},"The ",S({},".slds-has-focus")," modifier class is required on the ",S({},".slds-listbox__option")," element that has focus."),_({},"The ",S({},".slds-is-selected")," modifier class is required on the ",S({},".slds-listbox__option")," element that has been selected.")),D({},w({},"Mobile:")),k({},_({},"When on mobile, we want to leverage the native timepicker by changing the ",S({},"input")," type from ",S({},"text")," to ",S({},"time")),_({},"When switching ",S({},'input type="text"')," to ",S({},'input type="time"')," for mobile, we need to remove the ARIA attributes. The native rendering doesn't require these.",k({},_({},"On the element with the class ",S({},"slds-combobox"),", please remove ",S({},'role="combobox"'),", ",S({},"aria-expanded"),", and ",S({},"aria-haspopup"),"."),_({},"On the ",S({},"input")," that we just added ",S({},'type="time"')," too, please remove ",S({},"aria-controls"),", ",S({},"aria-autocomplete"),", and ",S({},'role="textbox"'),".")))),E({id:"Accessibility"},"Accessibility"),D({},"Please follow the implementation guidelines found under ",v({href:"/components/combobox"},"Combobox")),j({id:"Base"},"Base"),Object(n.createElement)(a.a,{demoStyles:"height: 16rem;"},Object(h.f)(O)),j({id:"States"},"States"),E({id:"Focused"},"Focused"),Object(n.createElement)(a.a,{demoStyles:"height: 16rem;"},Object(h.f)(g,"focused")),E({id:"Open-Item-Focused"},"Open - Item Focused"),Object(n.createElement)(a.a,{demoStyles:"height: 16rem;"},Object(h.f)(g,"open-item-focused")),E({id:"Open-Time-selected"},"Open - Time selected"),Object(n.createElement)(a.a,{demoStyles:"height: 16rem;"},Object(h.f)(g,"time-selection")))},T=function(){return Object(i.a)(q())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/toast/docs.mdx.js"]=function(e){function t(t){for(var a,r,o=t[0],i=t[1],c=t[2],d=0,u=[];d<o.length;d++)r=o[d],Object.prototype.hasOwnProperty.call(l,r)&&l[r]&&u.push(l[r][0]),l[r]=0;for(a in i)Object.prototype.hasOwnProperty.call(i,a)&&(e[a]=i[a]);for(m&&m(t);u.length;)u.shift()();return n.push.apply(n,c\|\|[]),s()}function s(){for(var e,t=0;t<n.length;t++){for(var s=n[t],a=!0,o=1;o<s.length;o++){var i=s[o];0!==l[i]&&(a=!1)}a&&(n.splice(t--,1),e=r(r.s=s[0]))}return e}var a={},l={77:0},n=[];function r(t){if(a[t])return a[t].exports;var s=a[t]={i:t,l:!1,exports:{}};return e[t].call(s.exports,s,s.exports,r),s.l=!0,s.exports}r.m=e,r.c=a,r.d=function(e,t,s){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:s})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var s=Object.create(null);if(r.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)r.d(s,a,function(t){return e[t]}.bind(null,a));return s},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=o.push.bind(o);o.push=t,o=o.slice();for(var c=0;c<o.length;c++)t(o[c]);var m=i;return n.push([~~676~~,0]),s()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~676~~:function(e,t,s){"use strict";s.r(t),s.d(t,"getElement",(function(){return O})),s.d(t,"getContents",(function(){return C}));var a=s(0),l=s.n(a),n=s(4),r=s(2),o=(s(14),s(37)),i=s(3),c=s.n(i),m=s(5),d=s.n(m),u=s(7),f=function(e){var t=e.containerClassName,s=e.className,a=e.type,n=e.children;return l.a.createElement("div",{className:d()("slds-notify_container",t)},l.a.createElement("div",{className:d()("slds-notify slds-notify_toast",s,a&&"slds-theme_"+a),role:"status"},l.a.createElement("span",{className:"slds-assistive-text"},a),n,l.a.createElement("div",{className:"slds-notify__close"},l.a.createElement(u.b,{className:"slds-button_icon-inverse",iconClassName:"slds-button__icon_large",symbol:"close",assistiveText:"Close",title:"Close"}))))};f.propTypes={containerClassName:c.a.string,className:c.a.string,type:c.a.oneOf(["info","success","warning","error"]),children:c.a.node},f.defaultProps={type:"info"};var h=f,p=s(11),y=[{id:"default",label:"Base - default",element:l.a.createElement(h,{type:"info",containerClassName:"slds-is-relative"},l.a.createElement(p.a,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"info"}),l.a.createElement("div",{className:"slds-notify__content"},l.a.createElement("h2",{className:"slds-text-heading_small"},"26 potential duplicate leads were found."," ",l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Select Leads to Merge"))))}],v=[{id:"success",label:"Success (Theme Class)",element:l.a.createElement(h,{type:"success",containerClassName:"slds-is-relative"},l.a.createElement(p.a,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"success"}),l.a.createElement("div",{className:"slds-notify__content"},l.a.createElement("h2",{className:"slds-text-heading_small "},"Account"," ",l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"ACME - 100")," ","widgets was created.")))},{id:"warning",label:"Warning (Theme Class)",element:l.a.createElement(h,{type:"warning",containerClassName:"slds-is-relative"},l.a.createElement(p.a,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"warning"}),l.a.createElement("div",{className:"slds-notify__content"},l.a.createElement("h2",{className:"slds-text-heading_small "},"Can’t share file “report-q3.pdf” with the"," ",l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"selected users"),".")))},{id:"error",label:"Error (Theme Class)",element:l.a.createElement(h,{type:"error",containerClassName:"slds-is-relative"},l.a.createElement(p.a,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"error"}),l.a.createElement("div",{className:"slds-notify__content"},l.a.createElement("h2",{className:"slds-text-heading_small "},"Can’t save lead “Sally Wong” because"," ",l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"another lead")," ","has the same name.")))},{id:"error-with-details",label:"Error With Details (Theme Class)",element:l.a.createElement(h,{type:"error",containerClassName:"slds-is-relative"},l.a.createElement(p.a,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"error"}),l.a.createElement("div",{className:"slds-notify__content"},l.a.createElement("h2",{className:"slds-text-heading_small"},"You've encountered some errors when trying to save edits to Samuel Smith."),l.a.createElement("p",null,"Here's some detail of"," ",l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"what happened"),", being very descriptive and transparent.")))}],b=[{id:"small",label:"Small Column",demoStyles:"width: 25rem",storybookStyles:!0,element:l.a.createElement("div",{className:"slds-region_narrow"},l.a.createElement(h,{type:"info",containerClassName:"slds-is-relative"},l.a.createElement("div",{className:"slds-notify__content"},l.a.createElement("h2",{className:"slds-text-heading_small"},"26 potential"," ",l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"duplicate leads")," ","were found."))))}],g=s(1),E=n.c.code,_=n.c.h2,S=n.c.h3,N=n.c.p,O=function(){return Object(a.createElement)(n.b,{},Object(a.createElement)("div",{className:"doc lead"},"Toast serves as a feedback & confirmation mechanism after the user takes an action."),Object(a.createElement)(r.a,{exampleOnly:!0,demoStyles:"height: 4rem;"},Object(g.f)(y)),_({id:"About-Toast"},"About Toast"),S({id:"Accessibility"},"Accessibility"),N({},"Toast should contain ",E({},'role="alert"')," on the container to signal to assistive technology that they require the user’s attention."),N({},"When the design uses multiple toasts simultaneously, set the role to ",E({},'role="status"'),". Historically, toasts would use the role of ",E({},"alert"),", but because you can invoke multiple toasts, assertive alerts would override previous toasts in the screen reader's speech queue. The role of ",E({},"status")," is a polite live region, which does not clear the queue, reducing the risk of a missed toast message."),N({},"Use a span with ",E({},"slds-assistive-text")," to let the user know what type of notification it is."),_({id:"Base"},"Base"),Object(a.createElement)(r.a,{demoStyles:"height: 4rem;"},Object(g.f)(y)),_({id:"States"},"States"),S({id:"Success"},"Success"),Object(a.createElement)(r.a,{demoStyles:"height: 4rem;"},Object(g.f)(v,"success")),S({id:"Warning"},"Warning"),Object(a.createElement)(r.a,{demoStyles:"height: 4rem;"},Object(g.f)(v,"warning")),S({id:"Error"},"Error"),Object(a.createElement)(r.a,{demoStyles:"height: 4rem;"},Object(g.f)(v,"error")),S({id:"Error-With-Details"},"Error With Details"),Object(a.createElement)(r.a,{demoStyles:"height: 4rem;"},Object(g.f)(v,"error-with-details")),_({id:"Examples"},"Examples"),S({id:"Small-Column"},"Small Column"),Object(a.createElement)(r.a,{demoStyles:"height: 4rem;"},Object(g.f)(b,"small")),_({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(a.createElement)(o.a,{name:"toast",type:"component"}))},C=function(){return Object(n.a)(O())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/toast/docs.mdx.js"]=function(e){function t(t){for(var a,r,o=t[0],i=t[1],c=t[2],d=0,u=[];d<o.length;d++)r=o[d],Object.prototype.hasOwnProperty.call(l,r)&&l[r]&&u.push(l[r][0]),l[r]=0;for(a in i)Object.prototype.hasOwnProperty.call(i,a)&&(e[a]=i[a]);for(m&&m(t);u.length;)u.shift()();return n.push.apply(n,c\|\|[]),s()}function s(){for(var e,t=0;t<n.length;t++){for(var s=n[t],a=!0,o=1;o<s.length;o++){var i=s[o];0!==l[i]&&(a=!1)}a&&(n.splice(t--,1),e=r(r.s=s[0]))}return e}var a={},l={77:0},n=[];function r(t){if(a[t])return a[t].exports;var s=a[t]={i:t,l:!1,exports:{}};return e[t].call(s.exports,s,s.exports,r),s.l=!0,s.exports}r.m=e,r.c=a,r.d=function(e,t,s){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:s})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var s=Object.create(null);if(r.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)r.d(s,a,function(t){return e[t]}.bind(null,a));return s},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=o.push.bind(o);o.push=t,o=o.slice();for(var c=0;c<o.length;c++)t(o[c]);var m=i;return n.push([677,0]),s()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},677:function(e,t,s){"use strict";s.r(t),s.d(t,"getElement",(function(){return O})),s.d(t,"getContents",(function(){return C}));var a=s(0),l=s.n(a),n=s(4),r=s(2),o=(s(14),s(38)),i=s(3),c=s.n(i),m=s(5),d=s.n(m),u=s(7),f=function(e){var t=e.containerClassName,s=e.className,a=e.type,n=e.children;return l.a.createElement("div",{className:d()("slds-notify_container",t)},l.a.createElement("div",{className:d()("slds-notify slds-notify_toast",s,a&&"slds-theme_"+a),role:"status"},l.a.createElement("span",{className:"slds-assistive-text"},a),n,l.a.createElement("div",{className:"slds-notify__close"},l.a.createElement(u.b,{className:"slds-button_icon-inverse",iconClassName:"slds-button__icon_large",symbol:"close",assistiveText:"Close",title:"Close"}))))};f.propTypes={containerClassName:c.a.string,className:c.a.string,type:c.a.oneOf(["info","success","warning","error"]),children:c.a.node},f.defaultProps={type:"info"};var h=f,p=s(11),y=[{id:"default",label:"Base - default",element:l.a.createElement(h,{type:"info",containerClassName:"slds-is-relative"},l.a.createElement(p.a,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"info"}),l.a.createElement("div",{className:"slds-notify__content"},l.a.createElement("h2",{className:"slds-text-heading_small"},"26 potential duplicate leads were found."," ",l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Select Leads to Merge"))))}],v=[{id:"success",label:"Success (Theme Class)",element:l.a.createElement(h,{type:"success",containerClassName:"slds-is-relative"},l.a.createElement(p.a,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"success"}),l.a.createElement("div",{className:"slds-notify__content"},l.a.createElement("h2",{className:"slds-text-heading_small "},"Account"," ",l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"ACME - 100")," ","widgets was created.")))},{id:"warning",label:"Warning (Theme Class)",element:l.a.createElement(h,{type:"warning",containerClassName:"slds-is-relative"},l.a.createElement(p.a,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"warning"}),l.a.createElement("div",{className:"slds-notify__content"},l.a.createElement("h2",{className:"slds-text-heading_small "},"Can’t share file “report-q3.pdf” with the"," ",l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"selected users"),".")))},{id:"error",label:"Error (Theme Class)",element:l.a.createElement(h,{type:"error",containerClassName:"slds-is-relative"},l.a.createElement(p.a,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"error"}),l.a.createElement("div",{className:"slds-notify__content"},l.a.createElement("h2",{className:"slds-text-heading_small "},"Can’t save lead “Sally Wong” because"," ",l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"another lead")," ","has the same name.")))},{id:"error-with-details",label:"Error With Details (Theme Class)",element:l.a.createElement(h,{type:"error",containerClassName:"slds-is-relative"},l.a.createElement(p.a,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"error"}),l.a.createElement("div",{className:"slds-notify__content"},l.a.createElement("h2",{className:"slds-text-heading_small"},"You've encountered some errors when trying to save edits to Samuel Smith."),l.a.createElement("p",null,"Here's some detail of"," ",l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"what happened"),", being very descriptive and transparent.")))}],b=[{id:"small",label:"Small Column",demoStyles:"width: 25rem",storybookStyles:!0,element:l.a.createElement("div",{className:"slds-region_narrow"},l.a.createElement(h,{type:"info",containerClassName:"slds-is-relative"},l.a.createElement("div",{className:"slds-notify__content"},l.a.createElement("h2",{className:"slds-text-heading_small"},"26 potential"," ",l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"duplicate leads")," ","were found."))))}],g=s(1),E=n.c.code,_=n.c.h2,S=n.c.h3,N=n.c.p,O=function(){return Object(a.createElement)(n.b,{},Object(a.createElement)("div",{className:"doc lead"},"Toast serves as a feedback & confirmation mechanism after the user takes an action."),Object(a.createElement)(r.a,{exampleOnly:!0,demoStyles:"height: 4rem;"},Object(g.f)(y)),_({id:"About-Toast"},"About Toast"),S({id:"Accessibility"},"Accessibility"),N({},"Toast should contain ",E({},'role="alert"')," on the container to signal to assistive technology that they require the user’s attention."),N({},"When the design uses multiple toasts simultaneously, set the role to ",E({},'role="status"'),". Historically, toasts would use the role of ",E({},"alert"),", but because you can invoke multiple toasts, assertive alerts would override previous toasts in the screen reader's speech queue. The role of ",E({},"status")," is a polite live region, which does not clear the queue, reducing the risk of a missed toast message."),N({},"Use a span with ",E({},"slds-assistive-text")," to let the user know what type of notification it is."),_({id:"Base"},"Base"),Object(a.createElement)(r.a,{demoStyles:"height: 4rem;"},Object(g.f)(y)),_({id:"States"},"States"),S({id:"Success"},"Success"),Object(a.createElement)(r.a,{demoStyles:"height: 4rem;"},Object(g.f)(v,"success")),S({id:"Warning"},"Warning"),Object(a.createElement)(r.a,{demoStyles:"height: 4rem;"},Object(g.f)(v,"warning")),S({id:"Error"},"Error"),Object(a.createElement)(r.a,{demoStyles:"height: 4rem;"},Object(g.f)(v,"error")),S({id:"Error-With-Details"},"Error With Details"),Object(a.createElement)(r.a,{demoStyles:"height: 4rem;"},Object(g.f)(v,"error-with-details")),_({id:"Examples"},"Examples"),S({id:"Small-Column"},"Small Column"),Object(a.createElement)(r.a,{demoStyles:"height: 4rem;"},Object(g.f)(b,"small")),_({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(a.createElement)(o.a,{name:"toast",type:"component"}))},C=function(){return Object(n.a)(O())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/tooltips/docs.mdx.js"]=function(e){function t(t){for(var o,r,a=t[0],c=t[1],s=t[2],b=0,d=[];b<a.length;b++)r=a[b],Object.prototype.hasOwnProperty.call(i,r)&&i[r]&&d.push(i[r][0]),i[r]=0;for(o in c)Object.prototype.hasOwnProperty.call(c,o)&&(e[o]=c[o]);for(u&&u(t);d.length;)d.shift()();return l.push.apply(l,s\|\|[]),n()}function n(){for(var e,t=0;t<l.length;t++){for(var n=l[t],o=!0,a=1;a<n.length;a++){var c=n[a];0!==i[c]&&(o=!1)}o&&(l.splice(t--,1),e=r(r.s=n[0]))}return e}var o={},i={78:0},l=[];function r(t){if(o[t])return o[t].exports;var n=o[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.m=e,r.c=o,r.d=function(e,t,n){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var a=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=a.push.bind(a);a.push=t,a=a.slice();for(var s=0;s<a.length;s++)t(a[s]);var u=c;return l.push([~~581~~,0]),n()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~581~~:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return h})),n.d(t,"getContents",(function(){return g}));var o=n(0),i=n(4),l=n(2),r=n(27),a=n(41),c=(n(14),n(37)),s=n(54),u=n(1),b=i.c.a,d=i.c.code,p=i.c.h2,f=i.c.h3,m=i.c.p,h=function(){return Object(o.createElement)(i.b,{},Object(o.createElement)("div",{className:"doc lead"},"A Tooltip is a small piece of contextual information about an element on the screen, which is displayed when a user hovers or focuses on the element it is describing. It is not focusable and cannot contain focusable content."),Object(o.createElement)(l.a,{exampleOnly:!0,demoStyles:" padding-left: 1rem; padding-top: 1rem; position: relative; "},Object(u.f)(s.c,"button-icon")),p({id:"About-Tooltips"},"About Tooltips"),m({},"Nubbins are indicators that inform the user of the direction of the content associated with the tooltip. A tooltip can accept the following nubbin position classes, ",d({},".slds-nubbin_left"),", ",d({},".slds-nubbin_left-top"),", ",d({},".slds-nubbin_left-bottom"),", ",d({},".slds-nubbin_top-left"),", ",d({},".slds-nubbin_top-right"),", ",d({},".slds-nubbin_right-top"),", ",d({},".slds-nubbin_right-bottom"),", ",d({},".slds-nubbin_bottom-left"),", ",d({},".slds-nubbin_bottom-right"),"."),m({},"Learn more about how to use them at the ",b({href:"/components/popovers/#flavor-nubbins"},"Nubbins documentation"),"."),f({id:"Accessibility"},"Accessibility"),m({},"Showing the tooltip on hover or on keyboard focus of a focusable element ensures that all users can access it, even if they aren’t using a mouse. Examples of focusable elements include links, buttons, and inputs. Give the tooltip an ID and use that as the value of the ",d({},"aria-describedby")," attribute of the DOM element it describes. This helps users of assistive technology read the tooltip content."),m({},"When using a link as the focusable element to show a tooltip, add a ",d({},"<div>")," at the bottom of the tooltip bubble that includes a description of where the link will take the user. Add ",d({},"aria-hidden='true'")," to this element, and ensure that the link text itself matches the text within this ",d({},"<div>"),"."),p({id:"Base"},"Base"),Object(o.createElement)(l.a,{demoStyles:" padding-left: 2rem; padding-top: 5rem; position: relative; "},Object(u.f)(s.b)),p({id:"Examples"},"Examples"),f({id:"As-an-icon-link"},"As an icon link"),Object(o.createElement)(l.a,{demoStyles:" padding-left: 2rem; padding-top: 6.75rem; position: relative; "},Object(u.f)(s.c,"link")),f({id:"As-a-Button-Icon"},"As a Button Icon"),Object(o.createElement)(l.a,{demoStyles:" padding-left: 2rem; padding-top: 5rem; position: relative; "},Object(u.f)(s.c,"button-icon")),f({id:"As-a-Button"},"As a Button"),Object(o.createElement)(l.a,{demoStyles:" padding-left: 2rem; padding-top: 5rem; position: relative; "},Object(u.f)(s.c,"button")),p({id:"Modifiers"},"Modifiers"),f({id:"Motion"},"Motion"),Object(o.createElement)(a.a,null,Object(o.createElement)(r.a,null,Object(o.createElement)("strong",null,"Bottom To Top"),Object(o.createElement)(l.a,{toggleCode:!1},Object(u.f)(s.c,"bottom-to-top"))),Object(o.createElement)(r.a,null,Object(o.createElement)("strong",null,"Top To Bottom"),Object(o.createElement)(l.a,{toggleCode:!1},Object(u.f)(s.c,"top-to-bottom"))),Object(o.createElement)(r.a,null,Object(o.createElement)("strong",null,"Right To Left"),Object(o.createElement)(l.a,{toggleCode:!1},Object(u.f)(s.c,"right-to-left"))),Object(o.createElement)(r.a,null,Object(o.createElement)("strong",null,"Left To Right"),Object(o.createElement)(l.a,{toggleCode:!1},Object(u.f)(s.c,"left-to-right")))),f({id:"Toggle"},"Toggle"),Object(o.createElement)(a.a,null,Object(o.createElement)(r.a,null,Object(o.createElement)("strong",null,"Rise"),Object(o.createElement)(l.a,{toggleCode:!1},Object(u.f)(s.c,"rise"))),Object(o.createElement)(r.a,null,Object(o.createElement)("strong",null,"Fall"),Object(o.createElement)(l.a,{toggleCode:!1},Object(u.f)(s.c,"fall")))),p({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(o.createElement)(c.a,{name:"tooltips",type:"component"}))},g=function(){return Object(i.a)(h())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/tooltips/docs.mdx.js"]=function(e){function t(t){for(var o,r,a=t[0],c=t[1],s=t[2],b=0,d=[];b<a.length;b++)r=a[b],Object.prototype.hasOwnProperty.call(i,r)&&i[r]&&d.push(i[r][0]),i[r]=0;for(o in c)Object.prototype.hasOwnProperty.call(c,o)&&(e[o]=c[o]);for(u&&u(t);d.length;)d.shift()();return l.push.apply(l,s\|\|[]),n()}function n(){for(var e,t=0;t<l.length;t++){for(var n=l[t],o=!0,a=1;a<n.length;a++){var c=n[a];0!==i[c]&&(o=!1)}o&&(l.splice(t--,1),e=r(r.s=n[0]))}return e}var o={},i={78:0},l=[];function r(t){if(o[t])return o[t].exports;var n=o[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.m=e,r.c=o,r.d=function(e,t,n){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var a=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=a.push.bind(a);a.push=t,a=a.slice();for(var s=0;s<a.length;s++)t(a[s]);var u=c;return l.push([582,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},582:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return h})),n.d(t,"getContents",(function(){return g}));var o=n(0),i=n(4),l=n(2),r=n(28),a=n(42),c=(n(14),n(38)),s=n(55),u=n(1),b=i.c.a,d=i.c.code,p=i.c.h2,f=i.c.h3,m=i.c.p,h=function(){return Object(o.createElement)(i.b,{},Object(o.createElement)("div",{className:"doc lead"},"A Tooltip is a small piece of contextual information about an element on the screen, which is displayed when a user hovers or focuses on the element it is describing. It is not focusable and cannot contain focusable content."),Object(o.createElement)(l.a,{exampleOnly:!0,demoStyles:" padding-left: 1rem; padding-top: 1rem; position: relative; "},Object(u.f)(s.c,"button-icon")),p({id:"About-Tooltips"},"About Tooltips"),m({},"Nubbins are indicators that inform the user of the direction of the content associated with the tooltip. A tooltip can accept the following nubbin position classes, ",d({},".slds-nubbin_left"),", ",d({},".slds-nubbin_left-top"),", ",d({},".slds-nubbin_left-bottom"),", ",d({},".slds-nubbin_top-left"),", ",d({},".slds-nubbin_top-right"),", ",d({},".slds-nubbin_right-top"),", ",d({},".slds-nubbin_right-bottom"),", ",d({},".slds-nubbin_bottom-left"),", ",d({},".slds-nubbin_bottom-right"),"."),m({},"Learn more about how to use them at the ",b({href:"/components/popovers/#flavor-nubbins"},"Nubbins documentation"),"."),f({id:"Accessibility"},"Accessibility"),m({},"Showing the tooltip on hover or on keyboard focus of a focusable element ensures that all users can access it, even if they aren’t using a mouse. Examples of focusable elements include links, buttons, and inputs. Give the tooltip an ID and use that as the value of the ",d({},"aria-describedby")," attribute of the DOM element it describes. This helps users of assistive technology read the tooltip content."),m({},"When using a link as the focusable element to show a tooltip, add a ",d({},"<div>")," at the bottom of the tooltip bubble that includes a description of where the link will take the user. Add ",d({},"aria-hidden='true'")," to this element, and ensure that the link text itself matches the text within this ",d({},"<div>"),"."),p({id:"Base"},"Base"),Object(o.createElement)(l.a,{demoStyles:" padding-left: 2rem; padding-top: 5rem; position: relative; "},Object(u.f)(s.b)),p({id:"Examples"},"Examples"),f({id:"As-an-icon-link"},"As an icon link"),Object(o.createElement)(l.a,{demoStyles:" padding-left: 2rem; padding-top: 6.75rem; position: relative; "},Object(u.f)(s.c,"link")),f({id:"As-a-Button-Icon"},"As a Button Icon"),Object(o.createElement)(l.a,{demoStyles:" padding-left: 2rem; padding-top: 5rem; position: relative; "},Object(u.f)(s.c,"button-icon")),f({id:"As-a-Button"},"As a Button"),Object(o.createElement)(l.a,{demoStyles:" padding-left: 2rem; padding-top: 5rem; position: relative; "},Object(u.f)(s.c,"button")),p({id:"Modifiers"},"Modifiers"),f({id:"Motion"},"Motion"),Object(o.createElement)(a.a,null,Object(o.createElement)(r.a,null,Object(o.createElement)("strong",null,"Bottom To Top"),Object(o.createElement)(l.a,{toggleCode:!1},Object(u.f)(s.c,"bottom-to-top"))),Object(o.createElement)(r.a,null,Object(o.createElement)("strong",null,"Top To Bottom"),Object(o.createElement)(l.a,{toggleCode:!1},Object(u.f)(s.c,"top-to-bottom"))),Object(o.createElement)(r.a,null,Object(o.createElement)("strong",null,"Right To Left"),Object(o.createElement)(l.a,{toggleCode:!1},Object(u.f)(s.c,"right-to-left"))),Object(o.createElement)(r.a,null,Object(o.createElement)("strong",null,"Left To Right"),Object(o.createElement)(l.a,{toggleCode:!1},Object(u.f)(s.c,"left-to-right")))),f({id:"Toggle"},"Toggle"),Object(o.createElement)(a.a,null,Object(o.createElement)(r.a,null,Object(o.createElement)("strong",null,"Rise"),Object(o.createElement)(l.a,{toggleCode:!1},Object(u.f)(s.c,"rise"))),Object(o.createElement)(r.a,null,Object(o.createElement)("strong",null,"Fall"),Object(o.createElement)(l.a,{toggleCode:!1},Object(u.f)(s.c,"fall")))),p({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(o.createElement)(c.a,{name:"tooltips",type:"component"}))},g=function(){return Object(i.a)(h())}}});

package/__internal/chunked/docs/ui/components/tree-grid/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/tree-grid/docs.mdx.js"]=function(e){function t(t){for(var a,s,o=t[0],r=t[1],d=t[2],m=0,h=[];m<o.length;m++)s=o[m],Object.prototype.hasOwnProperty.call(n,s)&&n[s]&&h.push(n[s][0]),n[s]=0;for(a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);for(c&&c(t);h.length;)h.shift()();return i.push.apply(i,d\|\|[]),l()}function l(){for(var e,t=0;t<i.length;t++){for(var l=i[t],a=!0,o=1;o<l.length;o++){var r=l[o];0!==n[r]&&(a=!1)}a&&(i.splice(t--,1),e=s(s.s=l[0]))}return e}var a={},n={79:0},i=[];function s(t){if(a[t])return a[t].exports;var l=a[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,s),l.l=!0,l.exports}s.m=e,s.c=a,s.d=function(e,t,l){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:l})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(s.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)s.d(l,a,function(t){return e[t]}.bind(null,a));return l},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=o.push.bind(o);o.push=t,o=o.slice();for(var d=0;d<o.length;d++)t(o[d]);var c=r;return i.push([679,0]),l()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},679:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return C})),l.d(t,"getContents",(function(){return _}));var a=l(0),n=l.n(a),i=l(4),s=l(2),o=l(5),r=l.n(o),d=l(3),c=l.n(d),m=l(6),h=function(e){var t=e.ariaLabel,l=e.ariaLabelledBy,a=e.children,i=e.hasHiddenHeader,s=e.isBordered,o=e.isFixedLayout,r=e.isResizable,d=e.selectionType;return n.a.createElement(m.s,{ariaLabel:t,ariaLabelledBy:l,hasHiddenHeader:i,isBordered:s,isEditable:!0,isFixedLayout:o,isResizable:r,selectionType:d,type:"treegrid"},a)};h.propTypes={ariaLabel:c.a.string,ariaLabelledBy:c.a.string,children:c.a.node,hasHiddenHeader:c.a.bool,isBordered:c.a.bool,isFixedLayout:c.a.bool,isResizable:c.a.bool,selectionType:c.a.string};var p=l(7),b=["Account Name","Employees","Phone Number","Account Owner","Billing City"],u=["Account Name"],w=0,E=function(e){return n.a.createElement(m.p,{isExpanded:e.isExpanded,isSelected:e.isSelected,level:e.level,positionWithinLevel:e.positionWithinLevel,numberOfItemsAtLevel:e.numberOfItemsAtLevel,tabIndex:e.isFocusable?"0":null},!e.hasSingleRowSelection&&n.a.createElement(m.t,{isRightAligned:!0,type:"advanced",style:{width:"3.25rem"}},n.a.createElement(m.n,{index:w++,checked:e.isSelected})),n.a.createElement(m.m,{"data-label":"Account Name",type:"treegrid",isItemHovered:e.isItemHovered},n.a.createElement(p.b,{"aria-hidden":"true",assistiveText:e.isExpanded?"Collapse ".concat(e.name):"Expand ".concat(e.name),className:r()("slds-button_icon-x-small slds-m-right_x-small",{"slds-is-disabled":null===e.isExpanded\|\|void 0===e.isExpanded}),iconClassName:"slds-button__icon_small",symbol:"chevronright",tabIndex:"-1",title:e.isExpanded?"Collapse ".concat(e.name):"Expand ".concat(e.name)}),n.a.createElement(m.j,{cellLink:!0,cellText:e.name})),n.a.createElement(m.t,{"data-label":"Employees",type:"treegrid"},n.a.createElement(m.j,{cellText:e.employees})),n.a.createElement(m.t,{"data-label":"Phone Number",type:"treegrid"},n.a.createElement(m.j,{cellText:e.phone})),n.a.createElement(m.t,{"data-label":"Account Owner",type:"treegrid"},n.a.createElement(m.j,{cellLink:!0,cellText:e.owner})),n.a.createElement(m.t,{"data-label":"Billing City",type:"treegrid"},n.a.createElement(m.j,{cellText:e.city})),n.a.createElement(m.t,{type:"treegrid",style:{width:"3.25rem"}},n.a.createElement(m.k,{rowName:e.name})))};E.propTypes={city:c.a.string.isRequired,employees:c.a.string.isRequired,hasSingleRowSelection:c.a.bool,isExpanded:c.a.bool,isFocusable:c.a.bool,isSelected:c.a.bool,level:c.a.string.isRequired,name:c.a.string.isRequired,numberOfItemsAtLevel:c.a.string.isRequired,owner:c.a.string.isRequired,phone:c.a.string.isRequired,positionWithinLevel:c.a.string.isRequired};var S=function(e){return n.a.createElement(m.p,{isExpanded:e.isExpanded,isSelected:e.isSelected,level:e.level,numberOfItemsAtLevel:e.numberOfItemsAtLevel,positionWithinLevel:e.positionWithinLevel,tabIndex:e.isFocusable?"0":null},!e.hasSingleRowSelection&&n.a.createElement(m.t,{isRightAligned:!0,type:"advanced",style:{width:"3.25rem"}},n.a.createElement(m.n,{index:w++,checked:e.isSelected})),n.a.createElement(m.m,{"data-label":"Account Name",type:"treegrid"},n.a.createElement(p.b,{"aria-hidden":"true",assistiveText:e.isExpanded?"Collapse ".concat(e.name):"Expand ".concat(e.name),className:r()("slds-button_icon slds-button_icon-x-small slds-m-right_x-small",{"slds-is-disabled":null===e.isExpanded\|\|void 0===e.isExpanded}),iconClassName:"slds-button__icon_small",symbol:"chevronright",tabIndex:"-1",title:e.isExpanded?"Collapse ".concat(e.name):"Expand ".concat(e.name)}),n.a.createElement(m.j,{cellLink:!0,cellText:e.name})),n.a.createElement(m.t,{type:"treegrid",style:{width:"3.25rem"}},n.a.createElement(m.k,{rowName:e.name})))};S.displayName="HeadlessRow",S.propTypes={hasSingleRowSelection:c.a.bool,isExpanded:c.a.bool,isFocusable:c.a.bool,isSelected:c.a.bool,level:c.a.string.isRequired,name:c.a.string.isRequired,numberOfItemsAtLevel:c.a.string.isRequired,positionWithinLevel:c.a.string.isRequired};var g=function(e){return n.a.createElement(m.o,null,n.a.createElement(E,{hasSingleRowSelection:e.hasSingleRowSelection,city:"Phoenix, AZ",employees:"3,100",isFocusable:!0,isSelected:!!e.hasSingleRowSelection&&null,level:"1",name:"Rewis Inc",numberOfItemsAtLevel:"4",owner:"Jane Doe",phone:"837-555-1212",positionWithinLevel:"1"}),n.a.createElement(E,{hasSingleRowSelection:e.hasSingleRowSelection,city:"San Francisco, CA",employees:"10,000",isExpanded:e.isExpanded,isSelected:e.hasSingleRowSelection?e.hasSelectedRow\|\|null:e.hasSelectedRow\|\|!1,level:"1",name:"Acme Corporation",numberOfItemsAtLevel:"4",owner:"John Doe",phone:"837-555-1212",positionWithinLevel:"2"}),e.additionalItem,n.a.createElement(E,{hasSingleRowSelection:e.hasSingleRowSelection,city:"New York, NY",employees:"6,000",isExpanded:!1,isSelected:!!e.hasSingleRowSelection&&null,level:"1",name:"Rohde Enterprises",numberOfItemsAtLevel:"4",owner:"John Doe",phone:"837-555-1212",positionWithinLevel:"3"}),n.a.createElement(E,{hasSingleRowSelection:e.hasSingleRowSelection,city:"Paris, France",employees:"1,234",isSelected:!!e.hasSingleRowSelection&&null,level:"1",name:"Cheese Corp",numberOfItemsAtLevel:"4",owner:"Jane Doe",phone:"837-555-1212",positionWithinLevel:"4"}))};g.displayName="DefaultRows",g.propTypes={additionalItem:c.a.node,hasSelectedRow:c.a.bool,hasSingleRowSelection:c.a.bool,isExpanded:c.a.bool};var v=function(e){return n.a.createElement(E,{city:"New York, NY",employees:"745",isSelected:!1,level:"2",name:"Acme Corporation (Oakland)",numberOfItemsAtLevel:"1",owner:"John Doe",phone:"837-555-1212",positionWithinLevel:"1"})},y=function(e){return n.a.createElement(m.o,null,n.a.createElement(E,{level:"1",positionWithinLevel:"1",numberOfItemsAtLevel:"4",name:"Rewis Inc",employees:"3,100",phone:"837-555-1212",owner:"Jane Doe",city:"Phoenix, AZ",isFocusable:!0,isSelected:!1}),n.a.createElement(E,{isExpanded:!0,level:"1",positionWithinLevel:"2",numberOfItemsAtLevel:"4",name:"Acme Corporation",employees:"10,000",phone:"837-555-1212",owner:"John Doe",city:"San Francisco, CA",isSelected:!1}),n.a.createElement(E,{isExpanded:!0,level:"2",positionWithinLevel:"1",numberOfItemsAtLevel:"2",name:"Acme Corporation (Bay Area)",employees:"3,000",phone:"837-555-1212",owner:"John Doe",city:"New York, NY",isSelected:!1}),n.a.createElement(E,{level:"3",positionWithinLevel:"1",numberOfItemsAtLevel:"2",name:"Acme Corporation (Oakland)",employees:"745",phone:"837-555-1212",owner:"John Doe",city:"New York, NY",isSelected:!1}),n.a.createElement(E,{level:"3",positionWithinLevel:"2",numberOfItemsAtLevel:"2",name:"Acme Corporation (San Francisco)",employees:"578",phone:"837-555-1212",owner:"Jane Doe",city:"Los Angeles, CA",isSelected:!1}),n.a.createElement(E,{isExpanded:!0,level:"2",positionWithinLevel:"2",numberOfItemsAtLevel:"2",name:"Acme Corporation (East)",employees:"430",phone:"837-555-1212",owner:"John Doe",city:"San Francisco, CA",isSelected:!1}),n.a.createElement(E,{level:"3",positionWithinLevel:"1",numberOfItemsAtLevel:"2",name:"Acme Corporation (NY)",employees:"1,210",phone:"837-555-1212",owner:"Jane Doe",city:"New York, NY",isSelected:!1}),n.a.createElement(E,{isExpanded:!0,level:"3",positionWithinLevel:"2",numberOfItemsAtLevel:"2",name:"Acme Corporation (VA)",employees:"410",phone:"837-555-1212",owner:"John Doe",city:"New York, NY",isSelected:!1}),n.a.createElement(E,{isExpanded:!0,level:"4",positionWithinLevel:"1",numberOfItemsAtLevel:"1",name:"Allied Technologies",employees:"390",phone:"837-555-1212",owner:"Jane Doe",city:"Los Angeles, CA",isSelected:!1}),n.a.createElement(E,{level:"5",positionWithinLevel:"1",numberOfItemsAtLevel:"1",name:"Allied Technologies (UV)",employees:"270",phone:"837-555-1212",owner:"John Doe",city:"San Francisco, CA",isSelected:!1}),n.a.createElement(E,{isExpanded:!0,level:"1",positionWithinLevel:"3",numberOfItemsAtLevel:"4",name:"Rohde Enterprises",employees:"6,000",phone:"837-555-1212",owner:"John Doe",city:"New York, NY",isSelected:!1}),n.a.createElement(E,{level:"2",positionWithinLevel:"1",numberOfItemsAtLevel:"1",name:"Rohde Enterprises (UCA)",employees:"2,540",phone:"837-555-1212",owner:"John Doe",city:"New York, NY",isSelected:!1}),n.a.createElement(E,{isExpanded:!0,level:"1",positionWithinLevel:"4",numberOfItemsAtLevel:"4",name:"Tech Labs",employees:"1,856",phone:"837-555-1212",owner:"John Doe",city:"New York, NY",isSelected:!1}),n.a.createElement(E,{level:"2",positionWithinLevel:"1",numberOfItemsAtLevel:"1",name:"Opportunity Resources Inc",employees:"1,934",phone:"837-555-1212",owner:"John Doe",city:"Los Angeles, CA",isSelected:!1}))},f=function(e){return n.a.createElement(m.o,null,n.a.createElement(S,{hasSingleRowSelection:e.hasSingleRowSelection,isFocusable:!0,isSelected:!!e.hasSingleRowSelection&&null,level:"1",name:"Rewis Inc",numberOfItemsAtLevel:"4",positionWithinLevel:"1"}),n.a.createElement(S,{hasSingleRowSelection:e.hasSingleRowSelection,isExpanded:e.isExpanded,isSelected:e.hasSingleRowSelection?e.hasSelectedRow\|\|null:e.hasSelectedRow\|\|!1,level:"1",name:"Acme Corporation",numberOfItemsAtLevel:"4",positionWithinLevel:"2"}),n.a.createElement(S,{hasSingleRowSelection:e.hasSingleRowSelection,isExpanded:!1,isSelected:!!e.hasSingleRowSelection&&null,level:"1",name:"Rohde Enterprises",numberOfItemsAtLevel:"4",positionWithinLevel:"3"}),n.a.createElement(S,{hasSingleRowSelection:e.hasSingleRowSelection,isSelected:!!e.hasSingleRowSelection&&null,level:"1",name:"Cheese Corp",numberOfItemsAtLevel:"4",positionWithinLevel:"4"}))};f.displayName="HeadlessRows",f.propTypes={isExpanded:c.a.any,hasSelectedRow:c.a.bool,hasSingleRowSelection:c.a.bool};var x=n.a.createElement(h,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",ariaLabel:"Example default tree grid"},n.a.createElement(m.a,{columns:b,hasMenus:!0}),n.a.createElement(g,{isExpanded:!1})),L=[{id:"expanded",label:"Expanded",element:n.a.createElement(h,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",ariaLabel:"Example expanded tree grid"},n.a.createElement(m.a,{columns:b,hasMenus:!0}),n.a.createElement(g,{isExpanded:!0,additionalItem:n.a.createElement(v,null)}))},{id:"selected-row",label:"Selected row",element:n.a.createElement(h,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",ariaLabel:"Example tree grid with selected row"},n.a.createElement(m.a,{columns:b,hasMenus:!0}),n.a.createElement(g,{isExpanded:!0,hasSelectedRow:!0,additionalItem:n.a.createElement(v,null)}))},{id:"deep-nesting",label:"Deeply nested branches",element:n.a.createElement(h,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",ariaLabel:"Example tree grid with deep nesting"},n.a.createElement(m.a,{columns:b,hasMenus:!0}),n.a.createElement(y,null))}],R=[{id:"treegrid-headless",label:"Headless",element:n.a.createElement(h,{isBordered:!0,selectionType:"multiple",hasHiddenHeader:!0,ariaLabel:"Example headless tree grid"},n.a.createElement(m.a,{columns:u,hasSingleRowSelect:!0,isHidden:!0}),n.a.createElement(f,{isExpanded:!1}))},{id:"treegrid-headless-selected-row",label:"Headless with selected row",element:n.a.createElement(h,{isBordered:!0,selectionType:"multiple",hasHiddenHeader:!0,ariaLabel:"Example headless tree grid with selected row"},n.a.createElement(m.a,{columns:u,hasSingleRowSelect:!0,isHidden:!0}),n.a.createElement(f,{isExpanded:!1,hasSelectedRow:!0}))},{id:"treegrid-headless-no-borders",label:"Headless with no borders",element:n.a.createElement(h,{selectionType:"multiple",hasHiddenHeader:!0,ariaLabel:"Example headless border-less tree grid"},n.a.createElement(m.a,{hasSingleRowSelect:!0,columns:u,isHidden:!0}),n.a.createElement(f,{isExpanded:!1}))},{id:"treegrid-headless-no-borders-selected-row",label:"Headless with no borders and a selected row",element:n.a.createElement(h,{selectionType:"multiple",hasHiddenHeader:!0,ariaLabel:"Example headless border-less tree grid with selected row"},n.a.createElement(m.a,{hasSingleRowSelect:!0,columns:u,isHidden:!0}),n.a.createElement(f,{isExpanded:!1,hasSelectedRow:!0}))},{id:"treegrid-single-select",label:"Single select",element:n.a.createElement(h,{isBordered:!0,isFixedLayout:!0,isResizable:!0,ariaLabel:"Example single select tree grid"},n.a.createElement(m.a,{hasNoRowSelection:!0,columns:b,hasMenus:!0}),n.a.createElement(g,{isExpanded:!1,hasSingleRowSelection:!0}))},{id:"treegrid-single-select-selected-row",label:"Single select with a selected row",element:n.a.createElement(h,{isBordered:!0,isFixedLayout:!0,isResizable:!0,ariaLabel:"Example single select tree grid with selected row"},n.a.createElement(m.a,{hasNoRowSelection:!0,columns:b,hasMenus:!0}),n.a.createElement(g,{isExpanded:!1,hasSelectedRow:!0,hasSingleRowSelection:!0}))},{id:"treegrid-single-select-headless",label:"Single select headless",element:n.a.createElement(h,{isBordered:!0,hasHiddenHeader:!0,ariaLabel:"Example headless single select tree grid"},n.a.createElement(m.a,{hasNoRowSelection:!0,columns:u,isHidden:!0}),n.a.createElement(f,{isExpanded:!1,hasSingleRowSelection:!0}))},{id:"treegrid-single-select-headless-selected",label:"Single select headless with selected row",element:n.a.createElement(h,{isBordered:!0,hasHiddenHeader:!0,ariaLabel:"Example single select tree grid with selected row"},n.a.createElement(m.a,{hasNoRowSelection:!0,columns:u,isHidden:!0}),n.a.createElement(f,{isExpanded:!1,hasSelectedRow:!0,hasSingleRowSelection:!0}))},{id:"treegrid-single-select-headless-no-borders",label:"Single select headless with no borders",element:n.a.createElement(h,{hasHiddenHeader:!0,ariaLabel:"Example headless border-less single select tree grid"},n.a.createElement(m.a,{hasNoRowSelection:!0,columns:u,isHidden:!0}),n.a.createElement(f,{isExpanded:!1,hasSingleRowSelection:!0}))},{id:"treegrid-single-select-headless-no-borders-with-selected",label:"Single select headless with no borders and a selected row",element:n.a.createElement(h,{hasHiddenHeader:!0,ariaLabel:"Example headless border-less single select tree grid with selected row"},n.a.createElement(m.a,{hasNoRowSelection:!0,columns:u,isHidden:!0}),n.a.createElement(f,{isExpanded:!1,hasSelectedRow:!0,hasSingleRowSelection:!0}))},{id:"item-disabled",label:"Item Disabled",element:n.a.createElement(h,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",ariaLabel:"Example tree grid with disabled item"},n.a.createElement(m.a,{columns:b,hasMenus:!0}),n.a.createElement(g,{isExpanded:!1}))},{id:"item-hovered",label:"Item Hovered",element:n.a.createElement(h,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",ariaLabel:"Example tree grid with hovered item"},n.a.createElement(m.a,{columns:b,hasMenus:!0}),n.a.createElement(m.o,null,n.a.createElement(E,{city:"Phoenix, AZ",employees:"3,100",isItemHovered:!0,isFocusable:!0,isExpanded:!1,level:"1",name:"Rewis Inc",numberOfItemsAtLevel:"4",owner:"Jane Doe",phone:"837-555-1212",positionWithinLevel:"1"}),n.a.createElement(E,{city:"San Francisco, CA",employees:"10,000",isExpanded:!1,level:"1",name:"Acme Corporation",numberOfItemsAtLevel:"4",owner:"John Doe",phone:"837-555-1212",positionWithinLevel:"2"}),n.a.createElement(E,{city:"New York, NY",employees:"6,000",isExpanded:!1,level:"1",name:"Rohde Enterprises",numberOfItemsAtLevel:"4",owner:"John Doe",phone:"837-555-1212",positionWithinLevel:"3"})))}],O=l(1),A=i.c.a,I=i.c.code,j=i.c.h2,H=i.c.h3,k=i.c.h4,N=i.c.li,D=i.c.p,T=i.c.strong,W=i.c.ul,C=function(){return Object(a.createElement)(i.b,{},Object(a.createElement)("div",{className:"doc lead"},"A tree is visualization of a structure hierarchy. A branch can be expanded or collapsed."),Object(a.createElement)(s.a,{exampleOnly:!0,demoStyles:"overflow: hidden;"},Object(O.f)(x)),j({id:"About-Tree-Grid"},"About Tree Grid"),D({},"A tree grid is additional semantics that are laid on top of a grid based component via ARIA attributes, to enable hierarchically structured tabular data."),D({},"The tree grid comes with a very specific keyboard interaction model which ",T({},"must")," be implemented for the component to be screen reader accessible."),H({id:"Accessibility"},"Accessibility"),k({id:"Markup"},"Markup"),W({},N({},I({},'role="treegrid"')," should be applied to the ",I({},"table")," element"),N({},I({},'aria-readonly="true"')," should be applied to the ",I({},"table")," element"),N({},I({},'aria-level="n"')," where ",I({},"n")," represents the nesting level of a particular grid row, should be applied to the ",I({},"tr")," element"),N({},I({},'aria-setsize="n"')," where ",I({},"n")," is the number of items for that specific ",I({},"aria-level")," should be applied to the ",I({},"tr")," element"),N({},I({},'aria-posinset="n"')," where ",I({},"n")," represents the position in the ",I({},"aria-level")," set the row is placed at, should be applied to the ",I({},"tr")," element"),N({},I({},'aria-expanded="false"')," should be placed on rows that are collapsed and have child rows"),N({},I({},'aria-expanded="true"')," should be placed on rows that are expanded and have child rows"),N({},I({},'tabindex="0"')," should be placed on the first ",I({},"tr")," in the grid on load, to make the row focusable"),N({},"Every actionable element in the grid should have ",I({},'tabindex="-1"')," applied to make them not focusable in the grids navigation mode")),D({},T({},"Multi select tree grid:")),W({},N({},I({},'aria-multiselectable="true"')," should be placed on the ",I({},"table")," element"),N({},I({},'aria-selected="false"')," should be set by default on all ",I({},"tr")," elements that aren't selected"),N({},I({},'aria-selected="true"')," should be set only on the ",I({},"tr")," elements that are selected")),D({},T({},"Single Select tree grid:")),W({},N({},I({},'aria-selected="true"')," should be applied to the ",I({},"tr")," that is selected in the tree grid")),k({id:"Keyboard-Interactions"},"Keyboard Interactions"),W({},N({},"Overall keyboard interaction should follow the same keyboard modal as the ",A({href:"/components/data-tables"},"Advanced and Inline Edit Data Table")," with some additions",W({},N({},"Navigation mode is the default mode. The grid only has a single focusable element at any time and it is either the ",I({},"tr")," or the ",I({},"td")),N({},"Actionable mode is enabled when the user presses the ",I({},"Enter")," key, where actionable elements become focusable in the cell"),N({},"Actionable mode is exited when the user presses the ",I({},"Escape")," key, and the user is placed back into Navigation Mode on the last cell they were in"))),N({},"User focus is initially placed on the first row in the tree grid"),N({},I({},"Down")," arrow key moves the user down one row and moves ",I({},'tabindex="0"')," with it"),N({},I({},"Up")," arrow key moves the user up one row and moves ",I({},'tabindex="0"')," with it"),N({},I({},"Space")," key when focused on a row should select that row by setting ",I({},'aria-selected="true')," on the ",I({},"tr")," element"),N({},I({},"Right")," arrow key on a collapsed row, will expand it and update ",I({},"aria-expanded")),N({},I({},"Right")," arrow key on an expanded or end row will move the user to the first cell in the row and move ",I({},'tabindex="0"')," with it"),N({},I({},"Right")," arrow key on a cell will move the user to the next cell in the row and move ",I({},'tabindex="0"')," with it"),N({},I({},"Left")," arrow key on a collapsed or end row will move the user to it's parent row and collapse it, if it has one"),N({},I({},"Left")," arrow key on an expanded row will collapse it and update ",I({},"aria-expanded")),N({},I({},"Left")," arrow key on a cell will move the user to the previous cell in the row and moves ",I({},'tabindex="0"')," with it"),N({},I({},"Left")," arrow key on the first cell of a row will move the user back to the row and moves ",I({},'tabindex="0"')," with it")),j({id:"Base"},"Base"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(x)),H({id:"States"},"States"),k({id:"Expanded"},"Expanded"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(L,"expanded")),k({id:"Selected-row"},"Selected row"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(L,"selected-row")),k({id:"Deeply-nested-branches"},"Deeply nested branches"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(L,"deep-nesting")),j({id:"Examples"},"Examples"),H({id:"Headless"},"Headless"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(R,"treegrid-headless")),H({id:"Headless-with-selected-row"},"Headless with selected row"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(R,"treegrid-headless-selected-row")),H({id:"Headless-with-no-borders"},"Headless with no borders"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(R,"treegrid-headless-no-borders")),H({id:"Headless-with-no-borders-and-a-selected-row"},"Headless with no borders and a selected row"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(R,"treegrid-headless-no-borders-selected-row")),H({id:"Single-select"},"Single select"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(R,"treegrid-single-select")),H({id:"Single-select-with-a-selected-row"},"Single select with a selected row"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(R,"treegrid-single-select-selected-row")),H({id:"Single-select-headless"},"Single select headless"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(R,"treegrid-single-select-headless")),H({id:"Single-select-headless-with-selected-row"},"Single select headless with selected row"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(R,"treegrid-single-select-headless-selected")),H({id:"Single-select-headless-with-no-borders"},"Single select headless with no borders"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(R,"treegrid-single-select-headless-no-borders")),H({id:"Single-select-headless-with-no-borders-and-a-selected-row"},"Single select headless with no borders and a selected row"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(R,"treegrid-single-select-headless-no-borders-with-selected")),j({id:"Modifiers"},"Modifiers"),H({id:"Interaction"},"Interaction"),k({id:"Item-Disabled"},"Item Disabled"),D({},"When a branch doesn't have children, apply ",I({},"slds-is-disabled")," to the corresponding ",I({},"slds-button_icon")," element."),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(R,"item-disabled")),k({id:"Item-Hovered"},"Item Hovered"),D({},"When a tree item is hovered, apply ",I({},"slds-is-hovered")," to ",I({},"slds-tree__item")," element`."),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(R,"item-hovered")))},_=function(){return Object(i.a)(C())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/tree-grid/docs.mdx.js"]=function(e){function t(t){for(var a,s,o=t[0],r=t[1],d=t[2],m=0,h=[];m<o.length;m++)s=o[m],Object.prototype.hasOwnProperty.call(n,s)&&n[s]&&h.push(n[s][0]),n[s]=0;for(a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);for(c&&c(t);h.length;)h.shift()();return i.push.apply(i,d\|\|[]),l()}function l(){for(var e,t=0;t<i.length;t++){for(var l=i[t],a=!0,o=1;o<l.length;o++){var r=l[o];0!==n[r]&&(a=!1)}a&&(i.splice(t--,1),e=s(s.s=l[0]))}return e}var a={},n={79:0},i=[];function s(t){if(a[t])return a[t].exports;var l=a[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,s),l.l=!0,l.exports}s.m=e,s.c=a,s.d=function(e,t,l){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:l})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(s.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)s.d(l,a,function(t){return e[t]}.bind(null,a));return l},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=o.push.bind(o);o.push=t,o=o.slice();for(var d=0;d<o.length;d++)t(o[d]);var c=r;return i.push([680,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},680:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return C})),l.d(t,"getContents",(function(){return _}));var a=l(0),n=l.n(a),i=l(4),s=l(2),o=l(5),r=l.n(o),d=l(3),c=l.n(d),m=l(6),h=function(e){var t=e.ariaLabel,l=e.ariaLabelledBy,a=e.children,i=e.hasHiddenHeader,s=e.isBordered,o=e.isFixedLayout,r=e.isResizable,d=e.selectionType;return n.a.createElement(m.s,{ariaLabel:t,ariaLabelledBy:l,hasHiddenHeader:i,isBordered:s,isEditable:!0,isFixedLayout:o,isResizable:r,selectionType:d,type:"treegrid"},a)};h.propTypes={ariaLabel:c.a.string,ariaLabelledBy:c.a.string,children:c.a.node,hasHiddenHeader:c.a.bool,isBordered:c.a.bool,isFixedLayout:c.a.bool,isResizable:c.a.bool,selectionType:c.a.string};var p=l(7),b=["Account Name","Employees","Phone Number","Account Owner","Billing City"],u=["Account Name"],w=0,E=function(e){return n.a.createElement(m.p,{isExpanded:e.isExpanded,isSelected:e.isSelected,level:e.level,positionWithinLevel:e.positionWithinLevel,numberOfItemsAtLevel:e.numberOfItemsAtLevel,tabIndex:e.isFocusable?"0":null},!e.hasSingleRowSelection&&n.a.createElement(m.t,{isRightAligned:!0,type:"advanced",style:{width:"3.25rem"}},n.a.createElement(m.n,{index:w++,checked:e.isSelected})),n.a.createElement(m.m,{"data-label":"Account Name",type:"treegrid",isItemHovered:e.isItemHovered},n.a.createElement(p.b,{"aria-hidden":"true",assistiveText:e.isExpanded?"Collapse ".concat(e.name):"Expand ".concat(e.name),className:r()("slds-button_icon-x-small slds-m-right_x-small",{"slds-is-disabled":null===e.isExpanded\|\|void 0===e.isExpanded}),iconClassName:"slds-button__icon_small",symbol:"chevronright",tabIndex:"-1",title:e.isExpanded?"Collapse ".concat(e.name):"Expand ".concat(e.name)}),n.a.createElement(m.j,{cellLink:!0,cellText:e.name})),n.a.createElement(m.t,{"data-label":"Employees",type:"treegrid"},n.a.createElement(m.j,{cellText:e.employees})),n.a.createElement(m.t,{"data-label":"Phone Number",type:"treegrid"},n.a.createElement(m.j,{cellText:e.phone})),n.a.createElement(m.t,{"data-label":"Account Owner",type:"treegrid"},n.a.createElement(m.j,{cellLink:!0,cellText:e.owner})),n.a.createElement(m.t,{"data-label":"Billing City",type:"treegrid"},n.a.createElement(m.j,{cellText:e.city})),n.a.createElement(m.t,{type:"treegrid",style:{width:"3.25rem"}},n.a.createElement(m.k,{rowName:e.name})))};E.propTypes={city:c.a.string.isRequired,employees:c.a.string.isRequired,hasSingleRowSelection:c.a.bool,isExpanded:c.a.bool,isFocusable:c.a.bool,isSelected:c.a.bool,level:c.a.string.isRequired,name:c.a.string.isRequired,numberOfItemsAtLevel:c.a.string.isRequired,owner:c.a.string.isRequired,phone:c.a.string.isRequired,positionWithinLevel:c.a.string.isRequired};var S=function(e){return n.a.createElement(m.p,{isExpanded:e.isExpanded,isSelected:e.isSelected,level:e.level,numberOfItemsAtLevel:e.numberOfItemsAtLevel,positionWithinLevel:e.positionWithinLevel,tabIndex:e.isFocusable?"0":null},!e.hasSingleRowSelection&&n.a.createElement(m.t,{isRightAligned:!0,type:"advanced",style:{width:"3.25rem"}},n.a.createElement(m.n,{index:w++,checked:e.isSelected})),n.a.createElement(m.m,{"data-label":"Account Name",type:"treegrid"},n.a.createElement(p.b,{"aria-hidden":"true",assistiveText:e.isExpanded?"Collapse ".concat(e.name):"Expand ".concat(e.name),className:r()("slds-button_icon slds-button_icon-x-small slds-m-right_x-small",{"slds-is-disabled":null===e.isExpanded\|\|void 0===e.isExpanded}),iconClassName:"slds-button__icon_small",symbol:"chevronright",tabIndex:"-1",title:e.isExpanded?"Collapse ".concat(e.name):"Expand ".concat(e.name)}),n.a.createElement(m.j,{cellLink:!0,cellText:e.name})),n.a.createElement(m.t,{type:"treegrid",style:{width:"3.25rem"}},n.a.createElement(m.k,{rowName:e.name})))};S.displayName="HeadlessRow",S.propTypes={hasSingleRowSelection:c.a.bool,isExpanded:c.a.bool,isFocusable:c.a.bool,isSelected:c.a.bool,level:c.a.string.isRequired,name:c.a.string.isRequired,numberOfItemsAtLevel:c.a.string.isRequired,positionWithinLevel:c.a.string.isRequired};var g=function(e){return n.a.createElement(m.o,null,n.a.createElement(E,{hasSingleRowSelection:e.hasSingleRowSelection,city:"Phoenix, AZ",employees:"3,100",isFocusable:!0,isSelected:!!e.hasSingleRowSelection&&null,level:"1",name:"Rewis Inc",numberOfItemsAtLevel:"4",owner:"Jane Doe",phone:"837-555-1212",positionWithinLevel:"1"}),n.a.createElement(E,{hasSingleRowSelection:e.hasSingleRowSelection,city:"San Francisco, CA",employees:"10,000",isExpanded:e.isExpanded,isSelected:e.hasSingleRowSelection?e.hasSelectedRow\|\|null:e.hasSelectedRow\|\|!1,level:"1",name:"Acme Corporation",numberOfItemsAtLevel:"4",owner:"John Doe",phone:"837-555-1212",positionWithinLevel:"2"}),e.additionalItem,n.a.createElement(E,{hasSingleRowSelection:e.hasSingleRowSelection,city:"New York, NY",employees:"6,000",isExpanded:!1,isSelected:!!e.hasSingleRowSelection&&null,level:"1",name:"Rohde Enterprises",numberOfItemsAtLevel:"4",owner:"John Doe",phone:"837-555-1212",positionWithinLevel:"3"}),n.a.createElement(E,{hasSingleRowSelection:e.hasSingleRowSelection,city:"Paris, France",employees:"1,234",isSelected:!!e.hasSingleRowSelection&&null,level:"1",name:"Cheese Corp",numberOfItemsAtLevel:"4",owner:"Jane Doe",phone:"837-555-1212",positionWithinLevel:"4"}))};g.displayName="DefaultRows",g.propTypes={additionalItem:c.a.node,hasSelectedRow:c.a.bool,hasSingleRowSelection:c.a.bool,isExpanded:c.a.bool};var v=function(e){return n.a.createElement(E,{city:"New York, NY",employees:"745",isSelected:!1,level:"2",name:"Acme Corporation (Oakland)",numberOfItemsAtLevel:"1",owner:"John Doe",phone:"837-555-1212",positionWithinLevel:"1"})},y=function(e){return n.a.createElement(m.o,null,n.a.createElement(E,{level:"1",positionWithinLevel:"1",numberOfItemsAtLevel:"4",name:"Rewis Inc",employees:"3,100",phone:"837-555-1212",owner:"Jane Doe",city:"Phoenix, AZ",isFocusable:!0,isSelected:!1}),n.a.createElement(E,{isExpanded:!0,level:"1",positionWithinLevel:"2",numberOfItemsAtLevel:"4",name:"Acme Corporation",employees:"10,000",phone:"837-555-1212",owner:"John Doe",city:"San Francisco, CA",isSelected:!1}),n.a.createElement(E,{isExpanded:!0,level:"2",positionWithinLevel:"1",numberOfItemsAtLevel:"2",name:"Acme Corporation (Bay Area)",employees:"3,000",phone:"837-555-1212",owner:"John Doe",city:"New York, NY",isSelected:!1}),n.a.createElement(E,{level:"3",positionWithinLevel:"1",numberOfItemsAtLevel:"2",name:"Acme Corporation (Oakland)",employees:"745",phone:"837-555-1212",owner:"John Doe",city:"New York, NY",isSelected:!1}),n.a.createElement(E,{level:"3",positionWithinLevel:"2",numberOfItemsAtLevel:"2",name:"Acme Corporation (San Francisco)",employees:"578",phone:"837-555-1212",owner:"Jane Doe",city:"Los Angeles, CA",isSelected:!1}),n.a.createElement(E,{isExpanded:!0,level:"2",positionWithinLevel:"2",numberOfItemsAtLevel:"2",name:"Acme Corporation (East)",employees:"430",phone:"837-555-1212",owner:"John Doe",city:"San Francisco, CA",isSelected:!1}),n.a.createElement(E,{level:"3",positionWithinLevel:"1",numberOfItemsAtLevel:"2",name:"Acme Corporation (NY)",employees:"1,210",phone:"837-555-1212",owner:"Jane Doe",city:"New York, NY",isSelected:!1}),n.a.createElement(E,{isExpanded:!0,level:"3",positionWithinLevel:"2",numberOfItemsAtLevel:"2",name:"Acme Corporation (VA)",employees:"410",phone:"837-555-1212",owner:"John Doe",city:"New York, NY",isSelected:!1}),n.a.createElement(E,{isExpanded:!0,level:"4",positionWithinLevel:"1",numberOfItemsAtLevel:"1",name:"Allied Technologies",employees:"390",phone:"837-555-1212",owner:"Jane Doe",city:"Los Angeles, CA",isSelected:!1}),n.a.createElement(E,{level:"5",positionWithinLevel:"1",numberOfItemsAtLevel:"1",name:"Allied Technologies (UV)",employees:"270",phone:"837-555-1212",owner:"John Doe",city:"San Francisco, CA",isSelected:!1}),n.a.createElement(E,{isExpanded:!0,level:"1",positionWithinLevel:"3",numberOfItemsAtLevel:"4",name:"Rohde Enterprises",employees:"6,000",phone:"837-555-1212",owner:"John Doe",city:"New York, NY",isSelected:!1}),n.a.createElement(E,{level:"2",positionWithinLevel:"1",numberOfItemsAtLevel:"1",name:"Rohde Enterprises (UCA)",employees:"2,540",phone:"837-555-1212",owner:"John Doe",city:"New York, NY",isSelected:!1}),n.a.createElement(E,{isExpanded:!0,level:"1",positionWithinLevel:"4",numberOfItemsAtLevel:"4",name:"Tech Labs",employees:"1,856",phone:"837-555-1212",owner:"John Doe",city:"New York, NY",isSelected:!1}),n.a.createElement(E,{level:"2",positionWithinLevel:"1",numberOfItemsAtLevel:"1",name:"Opportunity Resources Inc",employees:"1,934",phone:"837-555-1212",owner:"John Doe",city:"Los Angeles, CA",isSelected:!1}))},f=function(e){return n.a.createElement(m.o,null,n.a.createElement(S,{hasSingleRowSelection:e.hasSingleRowSelection,isFocusable:!0,isSelected:!!e.hasSingleRowSelection&&null,level:"1",name:"Rewis Inc",numberOfItemsAtLevel:"4",positionWithinLevel:"1"}),n.a.createElement(S,{hasSingleRowSelection:e.hasSingleRowSelection,isExpanded:e.isExpanded,isSelected:e.hasSingleRowSelection?e.hasSelectedRow\|\|null:e.hasSelectedRow\|\|!1,level:"1",name:"Acme Corporation",numberOfItemsAtLevel:"4",positionWithinLevel:"2"}),n.a.createElement(S,{hasSingleRowSelection:e.hasSingleRowSelection,isExpanded:!1,isSelected:!!e.hasSingleRowSelection&&null,level:"1",name:"Rohde Enterprises",numberOfItemsAtLevel:"4",positionWithinLevel:"3"}),n.a.createElement(S,{hasSingleRowSelection:e.hasSingleRowSelection,isSelected:!!e.hasSingleRowSelection&&null,level:"1",name:"Cheese Corp",numberOfItemsAtLevel:"4",positionWithinLevel:"4"}))};f.displayName="HeadlessRows",f.propTypes={isExpanded:c.a.any,hasSelectedRow:c.a.bool,hasSingleRowSelection:c.a.bool};var x=n.a.createElement(h,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",ariaLabel:"Example default tree grid"},n.a.createElement(m.a,{columns:b,hasMenus:!0}),n.a.createElement(g,{isExpanded:!1})),L=[{id:"expanded",label:"Expanded",element:n.a.createElement(h,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",ariaLabel:"Example expanded tree grid"},n.a.createElement(m.a,{columns:b,hasMenus:!0}),n.a.createElement(g,{isExpanded:!0,additionalItem:n.a.createElement(v,null)}))},{id:"selected-row",label:"Selected row",element:n.a.createElement(h,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",ariaLabel:"Example tree grid with selected row"},n.a.createElement(m.a,{columns:b,hasMenus:!0}),n.a.createElement(g,{isExpanded:!0,hasSelectedRow:!0,additionalItem:n.a.createElement(v,null)}))},{id:"deep-nesting",label:"Deeply nested branches",element:n.a.createElement(h,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",ariaLabel:"Example tree grid with deep nesting"},n.a.createElement(m.a,{columns:b,hasMenus:!0}),n.a.createElement(y,null))}],R=[{id:"treegrid-headless",label:"Headless",element:n.a.createElement(h,{isBordered:!0,selectionType:"multiple",hasHiddenHeader:!0,ariaLabel:"Example headless tree grid"},n.a.createElement(m.a,{columns:u,hasSingleRowSelect:!0,isHidden:!0}),n.a.createElement(f,{isExpanded:!1}))},{id:"treegrid-headless-selected-row",label:"Headless with selected row",element:n.a.createElement(h,{isBordered:!0,selectionType:"multiple",hasHiddenHeader:!0,ariaLabel:"Example headless tree grid with selected row"},n.a.createElement(m.a,{columns:u,hasSingleRowSelect:!0,isHidden:!0}),n.a.createElement(f,{isExpanded:!1,hasSelectedRow:!0}))},{id:"treegrid-headless-no-borders",label:"Headless with no borders",element:n.a.createElement(h,{selectionType:"multiple",hasHiddenHeader:!0,ariaLabel:"Example headless border-less tree grid"},n.a.createElement(m.a,{hasSingleRowSelect:!0,columns:u,isHidden:!0}),n.a.createElement(f,{isExpanded:!1}))},{id:"treegrid-headless-no-borders-selected-row",label:"Headless with no borders and a selected row",element:n.a.createElement(h,{selectionType:"multiple",hasHiddenHeader:!0,ariaLabel:"Example headless border-less tree grid with selected row"},n.a.createElement(m.a,{hasSingleRowSelect:!0,columns:u,isHidden:!0}),n.a.createElement(f,{isExpanded:!1,hasSelectedRow:!0}))},{id:"treegrid-single-select",label:"Single select",element:n.a.createElement(h,{isBordered:!0,isFixedLayout:!0,isResizable:!0,ariaLabel:"Example single select tree grid"},n.a.createElement(m.a,{hasNoRowSelection:!0,columns:b,hasMenus:!0}),n.a.createElement(g,{isExpanded:!1,hasSingleRowSelection:!0}))},{id:"treegrid-single-select-selected-row",label:"Single select with a selected row",element:n.a.createElement(h,{isBordered:!0,isFixedLayout:!0,isResizable:!0,ariaLabel:"Example single select tree grid with selected row"},n.a.createElement(m.a,{hasNoRowSelection:!0,columns:b,hasMenus:!0}),n.a.createElement(g,{isExpanded:!1,hasSelectedRow:!0,hasSingleRowSelection:!0}))},{id:"treegrid-single-select-headless",label:"Single select headless",element:n.a.createElement(h,{isBordered:!0,hasHiddenHeader:!0,ariaLabel:"Example headless single select tree grid"},n.a.createElement(m.a,{hasNoRowSelection:!0,columns:u,isHidden:!0}),n.a.createElement(f,{isExpanded:!1,hasSingleRowSelection:!0}))},{id:"treegrid-single-select-headless-selected",label:"Single select headless with selected row",element:n.a.createElement(h,{isBordered:!0,hasHiddenHeader:!0,ariaLabel:"Example single select tree grid with selected row"},n.a.createElement(m.a,{hasNoRowSelection:!0,columns:u,isHidden:!0}),n.a.createElement(f,{isExpanded:!1,hasSelectedRow:!0,hasSingleRowSelection:!0}))},{id:"treegrid-single-select-headless-no-borders",label:"Single select headless with no borders",element:n.a.createElement(h,{hasHiddenHeader:!0,ariaLabel:"Example headless border-less single select tree grid"},n.a.createElement(m.a,{hasNoRowSelection:!0,columns:u,isHidden:!0}),n.a.createElement(f,{isExpanded:!1,hasSingleRowSelection:!0}))},{id:"treegrid-single-select-headless-no-borders-with-selected",label:"Single select headless with no borders and a selected row",element:n.a.createElement(h,{hasHiddenHeader:!0,ariaLabel:"Example headless border-less single select tree grid with selected row"},n.a.createElement(m.a,{hasNoRowSelection:!0,columns:u,isHidden:!0}),n.a.createElement(f,{isExpanded:!1,hasSelectedRow:!0,hasSingleRowSelection:!0}))},{id:"item-disabled",label:"Item Disabled",element:n.a.createElement(h,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",ariaLabel:"Example tree grid with disabled item"},n.a.createElement(m.a,{columns:b,hasMenus:!0}),n.a.createElement(g,{isExpanded:!1}))},{id:"item-hovered",label:"Item Hovered",element:n.a.createElement(h,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",ariaLabel:"Example tree grid with hovered item"},n.a.createElement(m.a,{columns:b,hasMenus:!0}),n.a.createElement(m.o,null,n.a.createElement(E,{city:"Phoenix, AZ",employees:"3,100",isItemHovered:!0,isFocusable:!0,isExpanded:!1,level:"1",name:"Rewis Inc",numberOfItemsAtLevel:"4",owner:"Jane Doe",phone:"837-555-1212",positionWithinLevel:"1"}),n.a.createElement(E,{city:"San Francisco, CA",employees:"10,000",isExpanded:!1,level:"1",name:"Acme Corporation",numberOfItemsAtLevel:"4",owner:"John Doe",phone:"837-555-1212",positionWithinLevel:"2"}),n.a.createElement(E,{city:"New York, NY",employees:"6,000",isExpanded:!1,level:"1",name:"Rohde Enterprises",numberOfItemsAtLevel:"4",owner:"John Doe",phone:"837-555-1212",positionWithinLevel:"3"})))}],O=l(1),A=i.c.a,I=i.c.code,j=i.c.h2,H=i.c.h3,k=i.c.h4,N=i.c.li,D=i.c.p,T=i.c.strong,W=i.c.ul,C=function(){return Object(a.createElement)(i.b,{},Object(a.createElement)("div",{className:"doc lead"},"A tree is visualization of a structure hierarchy. A branch can be expanded or collapsed."),Object(a.createElement)(s.a,{exampleOnly:!0,demoStyles:"overflow: hidden;"},Object(O.f)(x)),j({id:"About-Tree-Grid"},"About Tree Grid"),D({},"A tree grid is additional semantics that are laid on top of a grid based component via ARIA attributes, to enable hierarchically structured tabular data."),D({},"The tree grid comes with a very specific keyboard interaction model which ",T({},"must")," be implemented for the component to be screen reader accessible."),H({id:"Accessibility"},"Accessibility"),k({id:"Markup"},"Markup"),W({},N({},I({},'role="treegrid"')," should be applied to the ",I({},"table")," element"),N({},I({},'aria-readonly="true"')," should be applied to the ",I({},"table")," element"),N({},I({},'aria-level="n"')," where ",I({},"n")," represents the nesting level of a particular grid row, should be applied to the ",I({},"tr")," element"),N({},I({},'aria-setsize="n"')," where ",I({},"n")," is the number of items for that specific ",I({},"aria-level")," should be applied to the ",I({},"tr")," element"),N({},I({},'aria-posinset="n"')," where ",I({},"n")," represents the position in the ",I({},"aria-level")," set the row is placed at, should be applied to the ",I({},"tr")," element"),N({},I({},'aria-expanded="false"')," should be placed on rows that are collapsed and have child rows"),N({},I({},'aria-expanded="true"')," should be placed on rows that are expanded and have child rows"),N({},I({},'tabindex="0"')," should be placed on the first ",I({},"tr")," in the grid on load, to make the row focusable"),N({},"Every actionable element in the grid should have ",I({},'tabindex="-1"')," applied to make them not focusable in the grids navigation mode")),D({},T({},"Multi select tree grid:")),W({},N({},I({},'aria-multiselectable="true"')," should be placed on the ",I({},"table")," element"),N({},I({},'aria-selected="false"')," should be set by default on all ",I({},"tr")," elements that aren't selected"),N({},I({},'aria-selected="true"')," should be set only on the ",I({},"tr")," elements that are selected")),D({},T({},"Single Select tree grid:")),W({},N({},I({},'aria-selected="true"')," should be applied to the ",I({},"tr")," that is selected in the tree grid")),k({id:"Keyboard-Interactions"},"Keyboard Interactions"),W({},N({},"Overall keyboard interaction should follow the same keyboard modal as the ",A({href:"/components/data-tables"},"Advanced and Inline Edit Data Table")," with some additions",W({},N({},"Navigation mode is the default mode. The grid only has a single focusable element at any time and it is either the ",I({},"tr")," or the ",I({},"td")),N({},"Actionable mode is enabled when the user presses the ",I({},"Enter")," key, where actionable elements become focusable in the cell"),N({},"Actionable mode is exited when the user presses the ",I({},"Escape")," key, and the user is placed back into Navigation Mode on the last cell they were in"))),N({},"User focus is initially placed on the first row in the tree grid"),N({},I({},"Down")," arrow key moves the user down one row and moves ",I({},'tabindex="0"')," with it"),N({},I({},"Up")," arrow key moves the user up one row and moves ",I({},'tabindex="0"')," with it"),N({},I({},"Space")," key when focused on a row should select that row by setting ",I({},'aria-selected="true')," on the ",I({},"tr")," element"),N({},I({},"Right")," arrow key on a collapsed row, will expand it and update ",I({},"aria-expanded")),N({},I({},"Right")," arrow key on an expanded or end row will move the user to the first cell in the row and move ",I({},'tabindex="0"')," with it"),N({},I({},"Right")," arrow key on a cell will move the user to the next cell in the row and move ",I({},'tabindex="0"')," with it"),N({},I({},"Left")," arrow key on a collapsed or end row will move the user to it's parent row and collapse it, if it has one"),N({},I({},"Left")," arrow key on an expanded row will collapse it and update ",I({},"aria-expanded")),N({},I({},"Left")," arrow key on a cell will move the user to the previous cell in the row and moves ",I({},'tabindex="0"')," with it"),N({},I({},"Left")," arrow key on the first cell of a row will move the user back to the row and moves ",I({},'tabindex="0"')," with it")),j({id:"Base"},"Base"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(x)),H({id:"States"},"States"),k({id:"Expanded"},"Expanded"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(L,"expanded")),k({id:"Selected-row"},"Selected row"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(L,"selected-row")),k({id:"Deeply-nested-branches"},"Deeply nested branches"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(L,"deep-nesting")),j({id:"Examples"},"Examples"),H({id:"Headless"},"Headless"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(R,"treegrid-headless")),H({id:"Headless-with-selected-row"},"Headless with selected row"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(R,"treegrid-headless-selected-row")),H({id:"Headless-with-no-borders"},"Headless with no borders"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(R,"treegrid-headless-no-borders")),H({id:"Headless-with-no-borders-and-a-selected-row"},"Headless with no borders and a selected row"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(R,"treegrid-headless-no-borders-selected-row")),H({id:"Single-select"},"Single select"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(R,"treegrid-single-select")),H({id:"Single-select-with-a-selected-row"},"Single select with a selected row"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(R,"treegrid-single-select-selected-row")),H({id:"Single-select-headless"},"Single select headless"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(R,"treegrid-single-select-headless")),H({id:"Single-select-headless-with-selected-row"},"Single select headless with selected row"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(R,"treegrid-single-select-headless-selected")),H({id:"Single-select-headless-with-no-borders"},"Single select headless with no borders"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(R,"treegrid-single-select-headless-no-borders")),H({id:"Single-select-headless-with-no-borders-and-a-selected-row"},"Single select headless with no borders and a selected row"),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(R,"treegrid-single-select-headless-no-borders-with-selected")),j({id:"Modifiers"},"Modifiers"),H({id:"Interaction"},"Interaction"),k({id:"Item-Disabled"},"Item Disabled"),D({},"When a branch doesn't have children, apply ",I({},"slds-is-disabled")," to the corresponding ",I({},"slds-button_icon")," element."),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(R,"item-disabled")),k({id:"Item-Hovered"},"Item Hovered"),D({},"When a tree item is hovered, apply ",I({},"slds-is-hovered")," to ",I({},"slds-tree__item")," element`."),Object(a.createElement)(s.a,{demoStyles:"overflow: hidden;"},Object(O.f)(R,"item-hovered")))},_=function(){return Object(i.a)(C())}}});