@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1 lines • 72.8 kB
JavaScript
var SLDS;!function(){"use strict";var e,t,a,n={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},9920:function(e,t,a){a.r(t),a.d(t,{getContents:function(){return Ve},getElement:function(){return Le}});var n=a(1594),l=a.n(n),s=a(5671),i=a(6547),r=a(3212),o=a(1374),b=a(5619),c=a(8342),d=a(4187),m=a.n(d),u=a(942),h=a.n(u),p=a(8347),E=a(6333),v=a.n(E),I=a(6955);function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,n=Array(t);a<t;a++)n[a]=e[a];return n}var w=function(e){return l().createElement("div",{className:h()("slds-panel",e.size&&"slds-size_".concat(e.size),e.docked&&"slds-panel_docked slds-panel_docked-".concat(e.docked),e.isAnimated&&"slds-panel_animated",e.drawer&&"slds-panel_drawer",e.isVisible?"slds-is-open":"slds-hidden"),hidden:!e.isVisible,id:e.id},e.children)},y=function(e){var t=e.children;return l().createElement("div",{className:"slds-panel__header-actions"},t)},g=function(e){var t=e.symbol,a=e.handleVisibility,n=e.title,s=h()({"slds-panel__back":"back"===t||"chevronleft"===t,"slds-panel__close":"close"===t});return l().createElement(I.A,{key:"panel-header-close-button",className:s,symbol:t,size:"small",assistiveText:"Collapse ".concat(n),title:"Collapse ".concat(n),onClick:a})};g.propTypes={symbol:m().oneOf(["back","chevronleft","close"]),handleVisibility:m().func,title:m().string};var T=function(e){return l().createElement("h2",{className:"slds-panel__header-title slds-text-heading_small slds-truncate",key:"panel-header-title",title:e.title},e.title)},A=function(e){var t="close",a=l().createElement(l().Fragment,null,l().createElement(T,{title:e.title}),l().createElement(y,null,e.headerActions,l().createElement(g,{title:e.title,handleVisibility:e.handleVisibility,symbol:t})));return"drill-in"===e.invoke&&(a=e.isInvokedByTab?l().createElement(l().Fragment,null,l().createElement(g,{title:e.title,handleVisibility:e.handleVisibility,symbol:e.iconBack}),l().createElement(T,{title:e.title})):l().createElement(l().Fragment,null,l().createElement(g,{title:e.title,handleVisibility:e.handleVisibility,symbol:e.iconBack}),l().createElement(T,{title:e.title}),l().createElement(y,null,e.headerActions,l().createElement(g,{title:e.title,handleVisibility:e.handleVisibility,symbol:t})))),l().createElement("div",{className:h()("slds-panel__header",e.hasCenterTitle&&"slds-panel__header_align-center",e.customHeader&&"slds-panel__header_custom")},e.customHeader?e.customHeader:a)},C=function(e){var t=e.title,a=e.closeSymbol,n=e.hasCenterTitle,s=e.customHeader;return l().createElement("div",{className:h()("slds-panel__header",n&&"slds-panel__header_align-center",s&&"slds-panel__header_custom")},s||l().createElement(l().Fragment,null,l().createElement(T,{title:t}),l().createElement(g,{title:t,symbol:a})))};C.propTypes={title:m().string,closeSymbol:m().string,hasCenterTitle:m().bool,customHeader:m().node},C.defaultProps={title:"Deprecated Panel Header",closeSymbol:"close"};var O=function(e){return l().createElement("div",{className:"slds-panel__body"},e.children)},_=function(e){var t=e.size,a=e.title,n=e.docked,s=e.invoke,i=e.drawer,r=e.isVisible,o=void 0===r||r,b=e.handleVisibility,c=e.customHeader,d=e.children,m=e.isAnimated,u=e.hasCenterTitle,h=e.isInvokedByTab,p=e.iconBack,E=e.headerActions,v=e.headerSlot,I=e.id;return l().createElement(w,{docked:n,drawer:i,size:t,invoke:s,isVisible:o,isAnimated:m,id:I},v||l().createElement(A,{title:a,docked:n,invoke:s,customHeader:c,handleVisibility:b,hasCenterTitle:u,isInvokedByTab:h,iconBack:p,headerActions:E}),l().createElement(O,null,d))};_.propTypes={size:m().oneOf(["small","medium","large","x-large","full"]),docked:m().oneOf(["left","right","bottom"]),invoke:m().oneOf(["drill-in","toggle"]),hasCenterTitle:m().bool,isInvokedByTab:m().bool,iconBack:m().string,headerActions:m().node,headerSlot:m().node,id:m().string},_.defaultProps={iconBack:"chevronleft"};var N=_,S=function(e){var t,a,s=e.size,i=e.title,r=e.docked,o=e.invoke,b=e.drawer,c=e.hasCenterTitle,d=e.icon,m=e.iconTitle,u=e.children,p=(t=(0,n.useState)(!0),a=2,function(e){if(Array.isArray(e))return e}(t)||function(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=a){var n,l,s,i,r=[],o=!0,b=!1;try{if(s=(a=a.call(e)).next,0===t){if(Object(a)!==a)return;o=!1}else for(;!(o=(n=s.call(a)).done)&&(r.push(n.value),r.length!==t);o=!0);}catch(e){b=!0,l=e}finally{try{if(!o&&null!=a.return&&(i=a.return(),Object(i)!==i))return}finally{if(b)throw l}}return r}}(t,a)||function(e,t){if(e){if("string"==typeof e)return f(e,t);var a={}.toString.call(e).slice(8,-1);return"Object"===a&&e.constructor&&(a=e.constructor.name),"Map"===a||"Set"===a?Array.from(e):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?f(e,t):void 0}}(t,a)||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.")}()),E=p[0],w=p[1],y=v()("example-unique-id-"),g=h()("demo-only-element","slds-theme_default","slds-border_bottom","slds-p-around_small",{"slds-text-align_right":"right"===r}),T=function(){return w(!E)},A={backgroundColor:"#fafaf9",position:"relative",height:"600px",overflow:"hidden",display:"flex",flexDirection:"right"===r&&"row-reverse"};return l().createElement(l().Fragment,null,l().createElement("header",{className:g,style:{zIndex:"1"}},l().createElement(I.A,{theme:"neutral",selected:E,symbol:d,title:m,className:"slds-button_icon-border",onClick:T,"aria-expanded":E,"aria-controls":y,"aria-pressed":E})),l().createElement("div",{className:"demo-only-element",style:A},l().createElement(_,{isVisible:E,size:s,title:i,docked:r,invoke:o,drawer:b,handleVisibility:T,hasCenterTitle:c,id:y},u),l().createElement("div",{className:"demo-only-content slds-col slds-p-around_medium"},"This section is demo-only content representing a custom layout in conjunction with the panel. It is not a part of the blueprint.")))};S.propTypes={size:m().string,title:m().string,docked:m().string,invoke:m().string,drawer:m().bool,hasCenterTitle:m().bool,icon:m().string,iconTitle:m().string,children:m().node},S.defaultProps={size:"medium",title:"Panel Header",docked:"left",invoke:"toggle",icon:"toggle_panel_left",iconTitle:"Toggle panel",children:"A panel body accepts any layout or component"};var x=a(9825);function P(e){return P="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},P(e)}function k(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,U(n.key),n)}}function U(e){var t=function(e){if("object"!=P(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var a=t.call(e,"string");if("object"!=P(a))return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==P(t)?t:t+""}function L(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(L=function(){return!!e})()}function V(e){return V=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},V(e)}function W(e,t){return W=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},W(e,t)}var H=function(e){return l().createElement("div",{className:"slds-tabs-mobile__group"},e.children)};H.propTypes={children:m().node};var B=function(e){return l().createElement("div",{className:"slds-tabs-mobile__container"},e.children)};B.propTypes={children:m().node};var j=function(e){return l().createElement("ul",{className:h()("slds-tabs-mobile",{"slds-hidden":e.isHidden})},e.children)};j.propTypes={children:m().node,isHidden:m().bool};var z=function(e){return l().createElement("li",{className:h()("slds-tabs-mobile__item")},e.children)};z.propTypes={children:m().node};var M=function(e){return l().createElement(x.$n,{isFullWidth:!0,onClick:e.onClick},l().createElement("span",{className:"slds-truncate",title:e.summary},e.summary),l().createElement(p.A,{className:"slds-icon slds-icon_x-small slds-icon-text-default",sprite:"utility",symbol:"chevronright"}))};M.propTypes={onClick:m().func,summary:m().string};var F=function(e){return l().createElement(N,{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")};F.propTypes={hidePanel:m().func,isVisible:m().bool,title:m().string,children:m().node};var D=function(e){return l().createElement(B,null,l().createElement(j,{isHidden:!0},l().createElement(z,null,l().createElement(M,{summary:"Item One"})),l().createElement(z,null,l().createElement(M,{summary:"Item Two"})),l().createElement(z,null,l().createElement(M,{summary:"Item Three"}))),l().createElement(F,{title:"Item 1 Panel",isVisible:!0},l().createElement(j,null,l().createElement(z,null,l().createElement(M,{summary:"Nested Item One"})),l().createElement(z,null,l().createElement(M,{summary:"Nested Item Two"})),l().createElement(z,null,l().createElement(M,{summary:"Nested Item Three"}))),l().createElement("div",null," Any content can be here "),l().createElement(j,null,l().createElement(z,null,l().createElement(M,{summary:"Nested Item Four"})),l().createElement(z,null,l().createElement(M,{summary:"Nested Item Five"})))),l().createElement(F,{title:"Item 2 Panel"}),l().createElement(F,{title:"Item 3 Panel"}),l().createElement(F,{title:"Nested Item 1 Panel"}),l().createElement(F,{title:"Nested Item 2 Panel"}),l().createElement(F,{title:"Nested Item 3 Panel"}),l().createElement(F,{title:"Nested Item 4 Panel"}),l().createElement(F,{title:"Nested Item 5 Panel"}))},$=function(e){function t(e){var a;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),(a=function(e,t,a){return t=V(t),function(e,t){if(t&&("object"==P(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(e,L()?Reflect.construct(t,a||[],V(e).constructor):t.apply(e,a))}(this,t,[e])).hidePanel=a.hidePanel.bind(a),a.state={visiblePanelIdx:-1},a}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&W(e,t)}(t,e),a=t,(n=[{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().createElement(B,null,l().createElement(j,{isHidden:-1!==e},l().createElement(z,null,l().createElement(M,{summary:"Item One",onClick:this.showPanel.bind(this,0)})),l().createElement(z,null,l().createElement(M,{summary:"Item Two",onClick:this.showPanel.bind(this,1)})),l().createElement(z,null,l().createElement(M,{summary:"Item Three",onClick:this.showPanel.bind(this,2)}))),l().createElement(F,{title:"Item 1 Panel",isVisible:0===e,hidePanel:this.hidePanel}),l().createElement(F,{title:"Item 2 Panel",isVisible:1===e,hidePanel:this.hidePanel}),l().createElement(F,{title:"Item 3 Panel",isVisible:2===e,hidePanel:this.hidePanel}))}}])&&k(a.prototype,n),Object.defineProperty(a,"prototype",{writable:!1}),a;var a,n}(n.Component);$.propTypes={visiblePanelIdx:m().number,isStatic:m().bool};var R=$,X=a(2537),q=a(8522),J=a(538),K=a(807),G=a(4760),Q=function(e){return l().createElement(X.A,{flavor:"scoped",selectedIndex:e.selectedIndex||0},l().createElement(X.A.Item,{title:"Item One",id:"tab-scoped-1"},"Item One Content"),l().createElement(X.A.Item,{title:"Item Two",id:"tab-scoped-2"},"Item Two Content"),l().createElement(X.A.Item,{title:"Item Three",id:"tab-scoped-3"},"Item Three Content"))},Y=a(3011),Z=function(e){return l().createElement(X.A,{selectedIndex:e.selectedIndex},l().createElement(X.A.Item,{title:"Item One",id:"tab-default-1"},e.itemOneContent),l().createElement(X.A.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l().createElement(X.A.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};Z.propTypes={selectedIndex:m().number,itemOneContent:m().node},Z.defaultProps={selectedIndex:0,itemOneContent:"Item One Content"};var ee=function(){return l().createElement(Z,{itemOneContent:l().createElement(Q,null)})},te=function(){return l().createElement("div",{className:"demo-only",style:{height:"12rem"}},l().createElement(X.A,null,l().createElement(X.A.Item,{title:"Item One",id:"tab-default-1"},l().createElement("h2",null,"Item One Content")),l().createElement(X.A.Item,{title:"Item Two",id:"tab-default-2"},l().createElement("h2",null,"Item Two Content")),l().createElement(X.A.Item,{title:"Item Three",id:"tab-default-3"},l().createElement("h2",null,"Item Three Content")),l().createElement(X.A.Item,{title:"Item Four",id:"tab-default-4"},l().createElement("h2",null,"Item Four Content")),l().createElement(X.A.Item,{title:"Item Five",id:"tab-default-5"},l().createElement("h2",null,"Item Five Content")),l().createElement(X.A.ItemOverflow,{title:"More Tabs",id:"tab-default-8"},l().createElement(K.y,{label:"More",type:"tabs",flavor:"default",isOpen:!0},l().createElement(ne,null)))))},ae=function(){return l().createElement("div",{className:"demo-only",style:{height:"12rem"}},l().createElement(X.A,null,l().createElement(X.A.Item,{title:"Opportunities",leftIcon:l().createElement(q.b$,{className:"slds-icon_small",symbol:"opportunity",title:"Opportunities",assistiveText:!1}),id:"tab-default-1"},l().createElement("h2",null,"Item One Content")),l().createElement(X.A.Item,{title:"Cases",leftIcon:l().createElement(q.b$,{className:"slds-icon_small",title:"Cases",symbol:"case",assistiveText:!1}),id:"tab-default-2"},l().createElement("h2",null,"Item Two Content")),l().createElement(X.A.Item,{title:"Products",leftIcon:l().createElement(q.b$,{className:"slds-icon_small",title:"Products",symbol:"product",assistiveText:!1}),id:"tab-default-3"},l().createElement("h2",null,"Item Three Content")),l().createElement(X.A.Item,{title:"Price Books",leftIcon:l().createElement(q.b$,{className:"slds-icon_small",title:"Price Books",symbol:"pricebook",assistiveText:!1}),id:"tab-default-4"},l().createElement("h2",null,"Item Four Content")),l().createElement(X.A.Item,{title:"Contacts",leftIcon:l().createElement(q.b$,{className:"slds-icon_small",title:"Contacts",symbol:"contact",assistiveText:!1}),id:"tab-default-5"},l().createElement("h2",null,"Item Five Content")),l().createElement(X.A.ItemOverflow,{title:"More Tabs",id:"tab-default-8"},l().createElement(K.y,{label:"More",type:"tabs",flavor:"default",isOpen:!0},l().createElement(le,null)))))},ne=function(){return l().createElement(G.W1,{className:"slds-dropdown_right"},l().createElement(G.cO,{className:"slds-dropdown_length-with-icon-10"},l().createElement(G.Dr,{title:"Accounts"},"Accounts"),l().createElement(G.Dr,{title:"Approvals"},"Approvals"),l().createElement(G.Dr,{title:"Lead"},"Leads")))},le=function(){return l().createElement(G.W1,{className:"slds-dropdown_right"},l().createElement(G.cO,{className:"slds-dropdown_length-with-icon-10"},l().createElement(G.Dr,{title:"Accounts"},l().createElement("span",{className:"slds-media slds-media_center"},l().createElement("span",{className:"slds-media__figure"},l().createElement(q.b$,{className:"slds-icon_small",symbol:"account",assistiveText:!1})),l().createElement("span",{className:"slds-media__body"},"Accounts"))),l().createElement(G.Dr,{title:"Approvals"},l().createElement("span",{className:"slds-media slds-media_center"},l().createElement("span",{className:"slds-media__figure"},l().createElement(q.b$,{className:"slds-icon_small",symbol:"approval",assistiveText:!1})),l().createElement("span",{className:"slds-media__body"},"Approvals"))),l().createElement(G.Dr,{title:"Lead"},l().createElement("span",{className:"slds-media slds-media_center"},l().createElement("span",{className:"slds-media__figure"},l().createElement(q.b$,{className:"slds-icon_small",symbol:"lead",assistiveText:!1})),l().createElement("span",{className:"slds-media__body"},"Leads")))))},se=function(){return l().createElement(X.A,{isCard:!0,selectedIndex:0},l().createElement(X.A.Item,{title:"Item One",id:"tab-default-1"},l().createElement(Y.Ay,null,l().createElement(Y.aR,{symbol:"contact",title:"Card Header",href:"#",action:l().createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l().createElement(Y.bw,{hasPadding:!0},"This is a card inside an ",l().createElement("code",{className:"doc"},".slds-tabs_card")," to show how styling is removed when cards are nested inside."),l().createElement(Y.wL,null,"View All ",l().createElement("span",{className:"slds-assistive-text"},"Contacts"))),l().createElement(Y.Ay,null,l().createElement(Y.aR,{symbol:"contact",title:"Card Header",href:"#",action:l().createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l().createElement(Y.bw,{hasPadding:!0},"This is a card inside an ",l().createElement("code",{className:"doc"},".slds-tabs_card")," to show how styling is removed when cards are nested inside."),l().createElement(Y.wL,null,"View All ",l().createElement("span",{className:"slds-assistive-text"},"Contacts"))),l().createElement(Y.Ay,{hasCardBoundary:!0},l().createElement(Y.aR,{symbol:"contact",title:"Card Header",href:"#",action:l().createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l().createElement(Y.bw,{hasPadding:!0},"This is a card inside an ",l().createElement("code",{className:"doc"},".slds-tabs_card")," to illustrate how",l().createElement("code",{className:"doc"},".slds-card_boundary")," adds a rounded border when desired."),l().createElement(Y.wL,null,"View All ",l().createElement("span",{className:"slds-assistive-text"},"Contacts")))),l().createElement(X.A.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l().createElement(X.A.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))},ie=function(){return l().createElement("div",{className:"demo-only",style:{height:"12rem"}},l().createElement(X.A,null,l().createElement(X.A.Item,{title:"Item One",id:"tab-default-1"},l().createElement("h2",null,"Item One Content")),l().createElement(X.A.Item,{title:"Item Two",id:"tab-default-2",rightIcon:l().createElement(J.eX,{className:"slds-icon_x-small slds-icon-text-error",symbol:"error",title:"This item has an error",assistiveText:"This item has an error"})},l().createElement("h2",null,"Item Two Content - Has Error")),l().createElement(X.A.Item,{title:"Item Three",id:"tab-default-3"},l().createElement("h2",null,"Item Three Content")),l().createElement(X.A.Item,{title:"Item Four",id:"tab-default-4"},l().createElement("h2",null,"Item Four Content"))))},re=function(e){return l().createElement(X.A,{size:"medium",withHeader:e.withHeader,showHeader:e.showHeader},l().createElement(X.A.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),l().createElement(X.A.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l().createElement(X.A.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};re.propTypes={showHeader:m().bool,withHeader:m().bool},re.defaultProps={showHeader:!1,withHeader:!1};var oe=function(e){return l().createElement(X.A,{size:"large",withHeader:e.withHeader,showHeader:e.showHeader},l().createElement(X.A.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),l().createElement(X.A.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l().createElement(X.A.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};oe.propTypes={showHeader:m().bool,withHeader:m().bool},oe.defaultProps={showHeader:!1,withHeader:!1};var be=function(e){return l().createElement("div",{className:"demo-only",style:{height:"12rem"}},l().createElement(X.A,{withHeader:e.withHeader,showHeader:e.showHeader},l().createElement(X.A.Item,{title:"Item One",id:"tab-default-1"},l().createElement("h2",null,"Item One Content")),l().createElement(X.A.Item,{title:"Item Two",id:"tab-default-2"},l().createElement("h2",null,"Item Two Content")),l().createElement(X.A.Item,{title:"Item Three",id:"tab-default-3"},l().createElement("h2",null,"Item Three Content"))))};be.propTypes={showHeader:m().bool,withHeader:m().bool},be.defaultProps={showHeader:!0,withHeader:!0};var ce=l().createElement(Z,null),de=[{id:"size-medium",label:"Size - Medium",element:l().createElement(re,null)},{id:"size-medium-with-header",label:"Size - Medium - With Header",element:l().createElement(re,{withHeader:!0,showHeader:!0})},{id:"size-large",label:"Size - Large",element:l().createElement(oe,null)},{id:"size-large-with-header",label:"Size - Large - With Header",element:l().createElement(oe,{withHeader:!0,showHeader:!0})},{id:"overflow",label:"Overflowing Items",element:l().createElement(te,null)},{id:"overflow-icons",label:"Overflowing Items with Icons",element:l().createElement(ae,null)},{id:"error",label:"Tabs With Error inside of content",element:l().createElement(ie,null)},{id:"nested",label:"With Nested Scoped Tabs",element:l().createElement(ee,null)},{id:"with-header",label:"With Header",element:l().createElement(be,null)},{id:"with-invisible-header",label:"With Invisible Header",element:l().createElement(be,{showHeader:!1})},{id:"card-look",label:"Tab Card-look",element:l().createElement(se,null)},{id:"styling-hooks",label:"Styling Hooks",demoStyles:"\n --sds-c-tabs-list-sizing-border: 5px;\n --sds-c-tabs-list-color-border: red;\n --sds-c-tabs-item-color-border-hover: pink;\n --sds-c-tabs-item-color-border-active: purple;\n --sds-c-tabs-item-text-color: red;\n --sds-c-tabs-item-text-color-active: purple;\n ",storybookStyles:!0,element:l().createElement(X.A,null,l().createElement(X.A.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),l().createElement(X.A.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l().createElement(X.A.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))}],me=a(5794),ue=function(e){return l().createElement("li",{className:h()("slds-tabs_default__item slds-sub-tabs__item slds-grid slds-grid_vertical-align-center",{"slds-active":e.active,"slds-has-error":"error"===e.statusLevel,"slds-has-focus":e.hasFocus,"slds-has-notification":e.hasNotification,"slds-has-success":"success"===e.statusLevel,"slds-has-warning":"warning"===e.statusLevel,"slds-is-unsaved":e.itemUnsaved},e.className),role:"presentation"},l().createElement("a",{"aria-controls":e.tabPanelId,"aria-selected":e.active?"true":"false",className:"slds-tabs_default__link slds-p-horizontal_xx-small",href:"#",id:e.tabItemId,role:"tab",tabIndex:e.active?"0":"-1",title:e.title,onClick:function(e){return e.preventDefault()}},l().createElement(me.$7,null,e.itemUnsaved&&l().createElement(me.AF,null),e.hasNotification&&l().createElement(me.VK,null)),e.hasIcon&&l().createElement(me.Px,{statusLevel:e.statusLevel,symbol:e.symbol}),l().createElement("span",{className:h()("slds-truncate",e.pinned?"slds-assistive-text":null),title:e.title},e.title)),e.menuIcon?l().createElement("div",{className:h()("slds-dropdown-trigger slds-dropdown-trigger_click slds-p-left_none slds-p-right_none","true"===e.actionOverflow?"slds-is-open":null)},l().createElement(I.A,{"aria-haspopup":"true",assistiveText:"Actions for "+e.title,className:"slds-button_icon-container slds-button_icon-x-small",symbol:"chevrondown",tabIndex:e.active?"0":"-1",theme:"error"===e.statusLevel||"success"===e.statusLevel?"inverse":null,title:"Actions for "+e.title})):null,l().createElement("div",{className:h()("slds-col_bump-left slds-p-left_none slds-p-right_none",e.pinned?"slds-assistive-text":null)},l().createElement(I.A,{assistiveText:"Close "+e.title,className:"slds-button_icon-container slds-button_icon-x-small",symbol:"close",tabIndex:e.active?"0":"-1",theme:"error"===e.statusLevel||"success"===e.statusLevel?"inverse":null,title:"Close "+e.title})))};ue.displayName="Subtab",ue.propTypes={actionOverflow:m().string,active:m().bool,statusLevel:m().oneOf(["error","success","warning"]),className:m().string,hasFocus:m().bool,hasIcon:m().bool,hasNotification:m().bool,itemUnsaved:m().bool,menuIcon:m().bool,pinned:m().bool,symbol:m().string,tabItemId:m().string.isRequired,tabPanelId:m().string.isRequired,title:m().string},ue.defaultProps={hasIcon:!0,title:"Subtab Name"};var he=function(e){return l().createElement("div",{className:"slds-tabs_default slds-sub-tabs"},e.children)};he.displayName="Subtabs",he.propTypes={children:m().node};var pe=function(e){return l().createElement("ul",{className:"slds-tabs_default__nav",role:"tablist"},e.children)};pe.displayName="SubtabList",pe.propTypes={children:m().node};var Ee=function(e){return l().createElement("div",{"aria-labelledby":e.tabId,className:h()("slds-tabs_default__content",{"slds-show":e.isVisible,"slds-hide":!e.isVisible}),id:e.id,role:"tabpanel"},e.children)};Ee.displayName="SubtabPanel",Ee.propTypes={children:m().node,isVisible:m().bool,id:m().string,tabId:m().string};var ve=function(e){return l().createElement("li",{className:h()("slds-tabs_default__item","slds-sub-tabs__item","slds-tabs_default__overflow-button",{"slds-has-error":"error"===e.statusLevel,"slds-has-notification":e.itemUnread,"slds-has-success":"success"===e.statusLevel,"slds-has-warning":"warning"===e.statusLevel,"slds-is-unsaved":e.itemUnsaved}),role:"presentation"},l().createElement("div",{className:h()("slds-dropdown-trigger slds-dropdown-trigger_click",e.isOpen&&"slds-is-open")},l().createElement(x.$n,{"aria-haspopup":"true",title:"More Tab Items",role:"tab"},l().createElement(me.$7,null,e.itemUnsaved&&l().createElement(me.AF,{title:"Tab(s) within menu not saved"}),e.itemUnread&&l().createElement(me.VK,null)),l().createElement("span",{className:"slds-truncate",title:"More Tabs"},"More ",l().createElement("span",{className:"slds-assistive-text"},"Tabs")),l().createElement(p.A,{className:"slds-button__icon slds-button__icon_small slds-button__icon_right",sprite:"utility",symbol:"chevrondown"})),l().createElement(G.W1,{className:"slds-dropdown_right"},l().createElement(G.cO,null,l().createElement(G.Dr,{className:"slds-has-notification",statusLevel:e.statusLevel,title:"Chat - Customer"},l().createElement(me.$7,null,e.itemUnsaved&&l().createElement(me.AF,null),e.itemUnread&&l().createElement(me.VK,null)),e.itemHasIcon&&l().createElement(me.Px,{statusLevel:e.statusLevel,symbol:"live_chat"}),l().createElement("span",null,"error"===e.statusLevel?"SLA Violation":"warning"===e.statusLevel?"SLA 0.30":"Chat - Customer")),l().createElement(G.Dr,{title:"Overflow Tab Item"},l().createElement(me.$7,null),l().createElement(me.Px,null),l().createElement("span",null,"Overflow Tab Item"))))))};ve.displayName="SubtabOverflow",ve.propTypes={statusLevel:m().oneOf(["error","success","warning"]),isOpen:m().bool,itemHasIcon:m().bool,itemUnread:m().bool,itemUnsaved:m().bool},ve.defaultProps={itemHasIcon:!0};var Ie=[{id:"default",label:"Default",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))}],fe=[{id:"subtabs-has-focus",label:"Tab - Focus",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{active:!0,hasFocus:!0,id:"subtab-01",tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content")),script:"\n document.getElementById('subtab-01').focus()\n "},{id:"subtabs-borders",label:"With Borders",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{active:!0,className:"slds-border_right slds-border_left",tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{className:"slds-border_right",symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"subtabs-menu",label:"Tab - Action Overflow",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{active:!0,menuIcon:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{menuIcon:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"subtabs-unsaved",label:"Unsaved Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"}),l().createElement(pe,null,l().createElement(ue,{active:!0,itemUnsaved:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"unread",label:"Unread Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"New activity in Tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{hasNotification:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"unsaved",label:"Unread Unsaved Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"New activity in Tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{hasNotification:!0,itemUnsaved:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"success",label:"Success Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"success",symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"success-unsaved",label:"Unsaved Success Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"success",itemUnsaved:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"success-unread",label:"Unread Success Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"success",hasNotification:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"success-unread-unsaved",label:"Unread and Unsaved Success Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"success",hasNotification:!0,itemUnsaved:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"Chat - Customer"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"warning",label:"Warning Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"warning",symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"SLA 0.30"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"warning-unsaved",label:"Unsaved Warning Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"warning",itemUnsaved:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"SLA 0.30"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"warning-unread",label:"Unread Warning Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"warning",hasNotification:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"SLA 0.30"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"warning-unread-unsaved",label:"Unread and Unsaved Warning Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"warning",hasNotification:!0,itemUnsaved:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"SLA 0.30"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"error",label:"Error Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"error",symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"SLA Violation"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"error-unsaved",label:"Unsaved Error Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"error",itemUnsaved:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"SLA Violation"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"error-unread",label:"Unread Error Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"error",hasNotification:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"SLA Violation"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"error-unread-unsaved",label:"Unread and Unsaved Error Tab",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{active:!0,tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{statusLevel:"error",hasNotification:!0,itemUnsaved:!0,symbol:"live_chat",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"SLA Violation"})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"overflow-tabs",label:"Overflow Tabs",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,null)),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"overflow-tabs-open",label:"Overflow Tabs - Open",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{isOpen:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"unread-overflow-tabs-open",label:"Unread Overflow Tabs - Open",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{isOpen:!0,itemUnread:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"unsaved-overflow-tabs-open",label:"Unsaved Overflow Tabs - Open",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{isOpen:!0,itemUnsaved:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"unsaved-unread-overflow-tabs-open",label:"Unsaved Unread Overflow Tabs - Open",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{isOpen:!0,itemUnread:!0,itemUnsaved:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"unsaved-unread-overflow-tabs-without-icons-open",label:"Unsaved Unread Overflow Tabs without Icons - Open",element:l().createElement(he,null,l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{hasIcon:!1,hasNotification:!0,itemUnsaved:!0,tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{isOpen:!0,itemHasIcon:!1,itemUnread:!0,itemUnsaved:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"overflow-tabs-success",label:"Overflow Tabs - Success",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{statusLevel:"success",isOpen:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"overflow-tabs-success-unread-unsaved",label:"Overflow Tabs - Success Unread and Unsaved",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{statusLevel:"success",isOpen:!0,itemUnread:!0,itemUnsaved:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"overflow-tabs-warning",label:"Overflow Tabs - Warning",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{statusLevel:"warning",isOpen:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"overflow-tabs-warning-unread-unsaved",label:"Overflow Tabs - Warning Unread and Unsaved",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{statusLevel:"warning",isOpen:!0,itemUnread:!0,itemUnsaved:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"overflow-tabs-error",label:"Overflow Tabs - Error",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{statusLevel:"error",isOpen:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))},{id:"overflow-tabs-error-unread-unsaved",label:"Overflow Tabs - Error Unread and Unsaved",element:l().createElement(he,null,l().createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l().createElement(pe,null,l().createElement(ue,{tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01",title:"00071938"}),l().createElement(ue,{tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",title:"00071939"}),l().createElement(ve,{statusLevel:"error",isOpen:!0,itemUnread:!0,itemUnsaved:!0})),l().createElement(Ee,{id:"subtab-tabpanel-01",isVisible:!0,tabId:"subtab-tabitem-01"},"Item One Content"),l().createElement(Ee,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))}],we=a(3785),ye=a(796),ge=l().createElement(we.A,{tabs:ye.pw}),Te=(we.A,ye.vb,we.A,ye.nz,we.A,ye.pw,a(806)),Ae=s.XB.a,Ce=s.XB.code,Oe=s.XB.h2,_e=s.XB.h3,Ne=s.XB.h4,Se=s.XB.h5,xe=s.XB.li,Pe=s.XB.p,ke=s.XB.strong,Ue=s.XB.ul,Le=function(){return(0,n.createElement)(s.Ay,{},(0,n.createElement)("div",{className:"doc lead"},"Tabs keeps related content in a single container that is shown and hidden through navigation."),(0,n.createElement)(i.A,{exampleOnly:!0,demoStyles:"height: 200px;"},(0,Te.NO)(ce)),Oe({id:"About-Tabs"},"About Tabs"),Pe({},"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."),_e({id:"Implementation"},"Implementation"),Ne({id:"Markup"},"Markup"),Pe({},"The following markup is crucial for Accessibility"),Ue({},xe({},"Selected tab’s anchor has ",Ce(