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

@salesforce-ux/design-system 2.29.0 → 2.29.1

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

Files changed (754) hide show

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

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,n,r={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},6186:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return T},getElement:function(){return k}});var r=n(1594),o=n.n(r),i=n(5671),s=n(6547),l=(n(5619),n(~~7412~~)),a=n.n(l),u=n(942),c=n.n(u),d=n(5159),m=n(6185),f=n(3964),p=n(538),h=n(806);function b(e,t){return function(e){if(Array.isArray(e))return e}(e)\|\|function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]\|\|e["@@iterator"];if(null!=n){var r,o,i,s,l=[],a=!0,u=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;a=!1}else for(;!(a=(r=i.call(n)).done)&&(l.push(r.value),l.length!==t);a=!0);}catch(e){u=!0,o=e}finally{try{if(!a&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(u)throw o}}return l}}(e,t)\|\|function(e,t){if(e){if("string"==typeof e)return y(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n\|\|"Set"===n?Array.from(e):"Arguments"===n\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(n)?y(e,t):void 0}}(e,t)\|\|function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function y(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var v=function(e){var t=e.hasFocus,n=e.isOpen,i=e.listboxData,s=e.hasError,l=e.isRequired,a=e.isDisabled,u=e.isReadOnlyInput,f=(0,r.useRef)(),y=b((0,r.useState)(""),2),v=y[0],O=y[1],g=b((0,r.useState)(""),2),x=g[0],E=g[1],S=b((0,r.useState)(h.Ay.uniqueId("example-unique-id-")),1)[0],_=b((0,r.useState)(h.Ay.uniqueId("example-unique-id-")),1)[0];return(0,r.useEffect)(function(){f.current&&("id"in f.current&&f.current.id&&O(f.current.id),"ariaChecked"in f.current&&f.current.ariaChecked&&E(f.current.textContent))},[]),o().createElement(o().Fragment,null,o().createElement(d.Ay,{className:c()("slds-timepicker",{"slds-has-error":s}),id:S,"aria-controls":_,"aria-activedescendant":v,autocomplete:!0,label:"Time",placeholder:"Select a time…",inputIconPosition:"right",rightInputIcon:o().createElement(p.eX,{symbol:"clock",className:c()("slds-icon slds-icon_x-small slds-icon-text-default",{"slds-icon-text-error":s,"slds-is-disabled":a}),containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o().createElement(m.Ay,{id:_,snapshot:i,type:"plain",count:6,focusedRef:f}),resultsType:"listbox",hasInteractions:!u,hasFocus:t,isOpen:n,hasError:s,isRequired:l,isDisabled:a,isReadOnlyInput:u,value:x}),s&&o().createElement("div",{className:"slds-form-element__help",id:S+"-error"},"Complete this field."))};v.propTypes={hasFocus:a().bool,isOpen:a().bool,hasError:a().bool,isRequired:a().bool,isDisabled:a().bool,isReadOnlyInput:a().bool,listboxData:a().object};var O=o().createElement(v,{listboxData:f.eE}),g=[{id:"focused",label:"Focused",element:o().createElement(v,{listboxData:f.eE,hasFocus:!0,isOpen:!0})},{id:"open-item-focused",label:"Open - Item Focused",element:o().createElement(v,{listboxData:f.T5,hasFocus:!0,isOpen:!0})},{id:"time-selection",label:"Open - Time selected",element:o().createElement(v,{listboxData:f.F_,hasFocus:!0,isOpen:!0})},{id:"required",label:"Required",element:o().createElement(v,{listboxData:f.eE,isRequired:!0})},{id:"error",label:"Error",element:o().createElement(v,{listboxData:f.eE,hasError:!0})},{id:"required-error",label:"Required with Error",element:o().createElement(v,{listboxData:f.eE,isRequired:!0,hasError:!0})},{id:"disabled",label:"Disabled",demoStyles:"min-height: 8rem;",storybookStyles:!0,element:o().createElement(v,{listboxData:f.eE,isDisabled:!0})},{id:"readonly",label:"Readonly",demoStyles:"min-height: 8rem;",storybookStyles:!0,element:o().createElement(v,{listboxData:f.eE,isReadOnlyInput:!0})}],x=i.XB.a,E=i.XB.code,S=i.XB.h2,_=i.XB.h3,A=i.XB.li,w=i.XB.p,D=i.XB.strong,j=i.XB.ul,k=function(){return(0,r.createElement)(i.Ay,{},(0,r.createElement)("div",{className:"doc lead"},"A timepicker is an autocomplete text input to capture a time."),(0,r.createElement)(s.A,{exampleOnly:!0,demoStyles:"height: 16rem;"},(0,h.NO)(g,"time-selection")),S({id:"About-Timepicker"},"About Timepicker"),_({id:"Implementation"},"Implementation"),w({},"A timepicker is used to select a single time. The component is using the combobox HTML structure and has the following markup requirements:"),w({},D({},"Desktop:")),j({},A({},"Add ",E({},".slds-is-open")," to the element with ",E({},".slds-dropdown-trigger")," to invoke the dropdown that contains the list of time options."),A({},"The ",E({},".slds-has-focus")," modifier class is required on the ",E({},".slds-listbox__option")," element that has focus."),A({},"The ",E({},".slds-is-selected")," modifier class is required on the ",E({},".slds-listbox__option")," element that has been selected.")),w({},D({},"Mobile:")),j({},A({},"When on mobile, we want to leverage the native timepicker by changing the ",E({},"input")," type from ",E({},"text")," to ",E({},"time")),A({},"When switching ",E({},'input type="text"')," to ",E({},'input type="time"')," for mobile, we need to remove the ARIA attributes. The native rendering doesn't require these.",j({},A({},"On the element with the class ",E({},"slds-combobox"),", please remove ",E({},'role="combobox"'),", ",E({},"aria-expanded"),", and ",E({},"aria-haspopup"),"."),A({},"On the ",E({},"input")," that we just added ",E({},'type="time"')," too, please remove ",E({},"aria-controls"),", ",E({},"aria-autocomplete"),", and ",E({},'role="textbox"'),".")))),_({id:"Accessibility"},"Accessibility"),w({},"Please follow the implementation guidelines found under ",x({href:"/components/combobox"},"Combobox")),S({id:"Base"},"Base"),(0,r.createElement)(s.A,{demoStyles:"height: 16rem;"},(0,h.NO)(O)),S({id:"States"},"States"),_({id:"Focused"},"Focused"),(0,r.createElement)(s.A,{demoStyles:"height: 16rem;"},(0,h.NO)(g,"focused")),_({id:"Open-Item-Focused"},"Open - Item Focused"),(0,r.createElement)(s.A,{demoStyles:"height: 16rem;"},(0,h.NO)(g,"open-item-focused")),_({id:"Open-Time-selected"},"Open - Time selected"),(0,r.createElement)(s.A,{demoStyles:"height: 16rem;"},(0,h.NO)(g,"time-selection")))},T=function(){return(0,i.Qr)(k())}}},o={};function i(e){var t=o[e];if(void 0!==t)return t.exports;var n=o[e]={id:e,exports:{}};return r[e](n,n.exports,i),n.exports}i.m=r,i.amdO={},e=[],i.O=function(t,n,r,o){if(!n){var s=1/0;for(c=0;c<e.length;c++){n=e[c][0],r=e[c][1],o=e[c][2];for(var l=!0,a=0;a<n.length;a++)(!1&o\|\|s>=o)&&Object.keys(i.O).every(function(e){return i.O[e](n[a])})?n.splice(a--,1):(l=!1,o<s&&(s=o));if(l){e.splice(c--,1);var u=r();void 0!==u&&(t=u)}}return t}o=o\|\|0;for(var c=e.length;c>0&&e[c-1][2]>o;c--)e[c]=e[c-1];e[c]=[n,r,o]},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},i.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var o=Object.create(null);i.r(o);var s={};t=t\|\|[null,n({}),n([]),n(n)];for(var l=2&r&&e;("object"==typeof l\|\|"function"==typeof l)&&!~t.indexOf(l);l=n(l))Object.getOwnPropertyNames(l).forEach(function(t){s[t]=function(){return e[t]}});return s.default=function(){return e},i.d(o,s),o},i.d=function(e,t){for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.e=function(){return Promise.resolve()},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=2310,function(){var e={2310:0};i.O.j=function(t){return 0===e[t]};var t=function(t,n){var r,o,s=n[0],l=n[1],a=n[2],u=0;if(s.some(function(t){return 0!==e[t]})){for(r in l)i.o(l,r)&&(i.m[r]=l[r]);if(a)var c=a(i)}for(t&&t(n);u<s.length;u++)o=s[u],i.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return i.O(c)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),i.nc=void 0;var s=i.O(void 0,[3540],function(){return i(6186)});s=i.O(s),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/timepicker/docs.mdx.js"]=s}();
1	+ var SLDS;!function(){"use strict";var e,t,n,r={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},6186:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return T},getElement:function(){return k}});var r=n(1594),o=n.n(r),i=n(5671),s=n(6547),l=(n(5619),n(4187)),a=n.n(l),u=n(942),c=n.n(u),d=n(5159),m=n(6185),f=n(3964),p=n(538),h=n(806);function b(e,t){return function(e){if(Array.isArray(e))return e}(e)\|\|function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]\|\|e["@@iterator"];if(null!=n){var r,o,i,s,l=[],a=!0,u=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;a=!1}else for(;!(a=(r=i.call(n)).done)&&(l.push(r.value),l.length!==t);a=!0);}catch(e){u=!0,o=e}finally{try{if(!a&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(u)throw o}}return l}}(e,t)\|\|function(e,t){if(e){if("string"==typeof e)return y(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n\|\|"Set"===n?Array.from(e):"Arguments"===n\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(n)?y(e,t):void 0}}(e,t)\|\|function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function y(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var v=function(e){var t=e.hasFocus,n=e.isOpen,i=e.listboxData,s=e.hasError,l=e.isRequired,a=e.isDisabled,u=e.isReadOnlyInput,f=(0,r.useRef)(),y=b((0,r.useState)(""),2),v=y[0],O=y[1],g=b((0,r.useState)(""),2),x=g[0],E=g[1],S=b((0,r.useState)(h.Ay.uniqueId("example-unique-id-")),1)[0],_=b((0,r.useState)(h.Ay.uniqueId("example-unique-id-")),1)[0];return(0,r.useEffect)(function(){f.current&&("id"in f.current&&f.current.id&&O(f.current.id),"ariaChecked"in f.current&&f.current.ariaChecked&&E(f.current.textContent))},[]),o().createElement(o().Fragment,null,o().createElement(d.Ay,{className:c()("slds-timepicker",{"slds-has-error":s}),id:S,"aria-controls":_,"aria-activedescendant":v,autocomplete:!0,label:"Time",placeholder:"Select a time…",inputIconPosition:"right",rightInputIcon:o().createElement(p.eX,{symbol:"clock",className:c()("slds-icon slds-icon_x-small slds-icon-text-default",{"slds-icon-text-error":s,"slds-is-disabled":a}),containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o().createElement(m.Ay,{id:_,snapshot:i,type:"plain",count:6,focusedRef:f}),resultsType:"listbox",hasInteractions:!u,hasFocus:t,isOpen:n,hasError:s,isRequired:l,isDisabled:a,isReadOnlyInput:u,value:x}),s&&o().createElement("div",{className:"slds-form-element__help",id:S+"-error"},"Complete this field."))};v.propTypes={hasFocus:a().bool,isOpen:a().bool,hasError:a().bool,isRequired:a().bool,isDisabled:a().bool,isReadOnlyInput:a().bool,listboxData:a().object};var O=o().createElement(v,{listboxData:f.eE}),g=[{id:"focused",label:"Focused",element:o().createElement(v,{listboxData:f.eE,hasFocus:!0,isOpen:!0})},{id:"open-item-focused",label:"Open - Item Focused",element:o().createElement(v,{listboxData:f.T5,hasFocus:!0,isOpen:!0})},{id:"time-selection",label:"Open - Time selected",element:o().createElement(v,{listboxData:f.F_,hasFocus:!0,isOpen:!0})},{id:"required",label:"Required",element:o().createElement(v,{listboxData:f.eE,isRequired:!0})},{id:"error",label:"Error",element:o().createElement(v,{listboxData:f.eE,hasError:!0})},{id:"required-error",label:"Required with Error",element:o().createElement(v,{listboxData:f.eE,isRequired:!0,hasError:!0})},{id:"disabled",label:"Disabled",demoStyles:"min-height: 8rem;",storybookStyles:!0,element:o().createElement(v,{listboxData:f.eE,isDisabled:!0})},{id:"readonly",label:"Readonly",demoStyles:"min-height: 8rem;",storybookStyles:!0,element:o().createElement(v,{listboxData:f.eE,isReadOnlyInput:!0})}],x=i.XB.a,E=i.XB.code,S=i.XB.h2,_=i.XB.h3,A=i.XB.li,w=i.XB.p,D=i.XB.strong,j=i.XB.ul,k=function(){return(0,r.createElement)(i.Ay,{},(0,r.createElement)("div",{className:"doc lead"},"A timepicker is an autocomplete text input to capture a time."),(0,r.createElement)(s.A,{exampleOnly:!0,demoStyles:"height: 16rem;"},(0,h.NO)(g,"time-selection")),S({id:"About-Timepicker"},"About Timepicker"),_({id:"Implementation"},"Implementation"),w({},"A timepicker is used to select a single time. The component is using the combobox HTML structure and has the following markup requirements:"),w({},D({},"Desktop:")),j({},A({},"Add ",E({},".slds-is-open")," to the element with ",E({},".slds-dropdown-trigger")," to invoke the dropdown that contains the list of time options."),A({},"The ",E({},".slds-has-focus")," modifier class is required on the ",E({},".slds-listbox__option")," element that has focus."),A({},"The ",E({},".slds-is-selected")," modifier class is required on the ",E({},".slds-listbox__option")," element that has been selected.")),w({},D({},"Mobile:")),j({},A({},"When on mobile, we want to leverage the native timepicker by changing the ",E({},"input")," type from ",E({},"text")," to ",E({},"time")),A({},"When switching ",E({},'input type="text"')," to ",E({},'input type="time"')," for mobile, we need to remove the ARIA attributes. The native rendering doesn't require these.",j({},A({},"On the element with the class ",E({},"slds-combobox"),", please remove ",E({},'role="combobox"'),", ",E({},"aria-expanded"),", and ",E({},"aria-haspopup"),"."),A({},"On the ",E({},"input")," that we just added ",E({},'type="time"')," too, please remove ",E({},"aria-controls"),", ",E({},"aria-autocomplete"),", and ",E({},'role="textbox"'),".")))),_({id:"Accessibility"},"Accessibility"),w({},"Please follow the implementation guidelines found under ",x({href:"/components/combobox"},"Combobox")),S({id:"Base"},"Base"),(0,r.createElement)(s.A,{demoStyles:"height: 16rem;"},(0,h.NO)(O)),S({id:"States"},"States"),_({id:"Focused"},"Focused"),(0,r.createElement)(s.A,{demoStyles:"height: 16rem;"},(0,h.NO)(g,"focused")),_({id:"Open-Item-Focused"},"Open - Item Focused"),(0,r.createElement)(s.A,{demoStyles:"height: 16rem;"},(0,h.NO)(g,"open-item-focused")),_({id:"Open-Time-selected"},"Open - Time selected"),(0,r.createElement)(s.A,{demoStyles:"height: 16rem;"},(0,h.NO)(g,"time-selection")))},T=function(){return(0,i.Qr)(k())}}},o={};function i(e){var t=o[e];if(void 0!==t)return t.exports;var n=o[e]={id:e,exports:{}};return r[e](n,n.exports,i),n.exports}i.m=r,i.amdO={},e=[],i.O=function(t,n,r,o){if(!n){var s=1/0;for(c=0;c<e.length;c++){n=e[c][0],r=e[c][1],o=e[c][2];for(var l=!0,a=0;a<n.length;a++)(!1&o\|\|s>=o)&&Object.keys(i.O).every(function(e){return i.O[e](n[a])})?n.splice(a--,1):(l=!1,o<s&&(s=o));if(l){e.splice(c--,1);var u=r();void 0!==u&&(t=u)}}return t}o=o\|\|0;for(var c=e.length;c>0&&e[c-1][2]>o;c--)e[c]=e[c-1];e[c]=[n,r,o]},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},i.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var o=Object.create(null);i.r(o);var s={};t=t\|\|[null,n({}),n([]),n(n)];for(var l=2&r&&e;("object"==typeof l\|\|"function"==typeof l)&&!~t.indexOf(l);l=n(l))Object.getOwnPropertyNames(l).forEach(function(t){s[t]=function(){return e[t]}});return s.default=function(){return e},i.d(o,s),o},i.d=function(e,t){for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.e=function(){return Promise.resolve()},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=2310,function(){var e={2310:0};i.O.j=function(t){return 0===e[t]};var t=function(t,n){var r,o,s=n[0],l=n[1],a=n[2],u=0;if(s.some(function(t){return 0!==e[t]})){for(r in l)i.o(l,r)&&(i.m[r]=l[r]);if(a)var c=a(i)}for(t&&t(n);u<s.length;u++)o=s[u],i.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return i.O(c)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),i.nc=void 0;var s=i.O(void 0,[3540],function(){return i(6186)});s=i.O(s),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/timepicker/docs.mdx.js"]=s}();

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

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,s,n={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},5475:function(e,t,s){s.r(t),s.d(t,{getContents:function(){return x},getElement:function(){return O}});var n=s(1594),a=s.n(n),l=s(5671),r=s(6547),o=s(5619),i=s(8342),c=s(~~7412~~),m=s.n(c),d=s(942),u=s.n(d),f=s(6955),h=function(e){var t=e.containerClassName,s=e.className,n=e.type,l=e.children;return a().createElement("div",{className:u()("slds-notify_container",t)},a().createElement("div",{className:u()("slds-notify slds-notify_toast",s,n&&"slds-theme_"+n),role:"status"},a().createElement("span",{className:"slds-assistive-text"},n),l,a().createElement("div",{className:"slds-notify__close"},a().createElement(f.A,{className:"slds-button_icon-inverse",symbol:"close",assistiveText:"Close",title:"Close"}))))};h.propTypes={containerClassName:m().string,className:m().string,type:m().oneOf(["info","success","warning","error"]),children:m().node},h.defaultProps={type:"info"};var p=h,v=s(538),y=[{id:"default",label:"Base - default",element:a().createElement(p,{type:"info",containerClassName:"slds-is-relative"},a().createElement(v.eX,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"info"}),a().createElement("div",{className:"slds-notify__content"},a().createElement("h2",{className:"slds-text-heading_small"},"26 potential duplicate leads were found."," ",a().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Select Leads to Merge"))))}],g=[{id:"success",label:"Success (Theme Class)",element:a().createElement(p,{type:"success",containerClassName:"slds-is-relative"},a().createElement(v.eX,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"success"}),a().createElement("div",{className:"slds-notify__content"},a().createElement("h2",{className:"slds-text-heading_small "},"Account"," ",a().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"ACME - 100")," ","widgets was created.")))},{id:"warning",label:"Warning (Theme Class)",element:a().createElement(p,{type:"warning",containerClassName:"slds-is-relative"},a().createElement(v.eX,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"warning"}),a().createElement("div",{className:"slds-notify__content"},a().createElement("h2",{className:"slds-text-heading_small "},"Can’t share file “report-q3.pdf” with the"," ",a().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"selected users"),".")))},{id:"error",label:"Error (Theme Class)",element:a().createElement(p,{type:"error",containerClassName:"slds-is-relative"},a().createElement(v.eX,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"error"}),a().createElement("div",{className:"slds-notify__content"},a().createElement("h2",{className:"slds-text-heading_small "},"Can’t save lead “Sally Wong” because"," ",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:a().createElement(p,{type:"error",containerClassName:"slds-is-relative"},a().createElement(v.eX,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"error"}),a().createElement("div",{className:"slds-notify__content"},a().createElement("h2",{className:"slds-text-heading_small"},"You've encountered some errors when trying to save edits to Samuel Smith."),a().createElement("p",null,"Here's some detail of"," ",a().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"what happened"),", being very descriptive and transparent.")))}],E=[{id:"small",label:"Small Column",demoStyles:"width: 25rem",storybookStyles:!0,element:a().createElement("div",{className:"slds-region_narrow"},a().createElement(p,{type:"info",containerClassName:"slds-is-relative"},a().createElement("div",{className:"slds-notify__content"},a().createElement("h2",{className:"slds-text-heading_small"},"26 potential"," ",a().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"duplicate leads")," ","were found."))))}],_=s(806),b=l.XB.code,N=l.XB.h2,S=l.XB.h3,w=l.XB.p,O=function(){return(0,n.createElement)(l.Ay,{},(0,n.createElement)("div",{className:"doc lead"},"Toast serves as a feedback & confirmation mechanism after the user takes an action."),(0,n.createElement)(r.A,{exampleOnly:!0,demoStyles:"height: 4rem;"},(0,_.NO)(y)),N({id:"About-Toast"},"About Toast"),(0,n.createElement)(o.A,{type:"note",header:"SLDS 2"},"To be compatible with the SLDS 2 default theme, Salesforce Cosmos, the toast ",(0,n.createElement)("code",null,"X")," close button is set with ",(0,n.createElement)("code",null,"slds-button__icon_xx-small"),"."),S({id:"Accessibility"},"Accessibility"),w({},"Toast should contain ",b({},'role="alert"')," on the container to signal to assistive technology that they require the user’s attention."),w({},"When the design uses multiple toasts simultaneously, set the role to ",b({},'role="status"'),". Historically, toasts would use the role of ",b({},"alert"),", but because you can invoke multiple toasts, assertive alerts would override previous toasts in the screen reader's speech queue. The role of ",b({},"status")," is a polite live region, which does not clear the queue, reducing the risk of a missed toast message."),w({},"Use a span with ",b({},"slds-assistive-text")," to let the user know what type of notification it is."),N({id:"Base"},"Base"),(0,n.createElement)(r.A,{demoStyles:"height: 4rem;"},(0,_.NO)(y)),N({id:"States"},"States"),S({id:"Success"},"Success"),(0,n.createElement)(r.A,{demoStyles:"height: 4rem;"},(0,_.NO)(g,"success")),S({id:"Warning"},"Warning"),(0,n.createElement)(r.A,{demoStyles:"height: 4rem;"},(0,_.NO)(g,"warning")),S({id:"Error"},"Error"),(0,n.createElement)(r.A,{demoStyles:"height: 4rem;"},(0,_.NO)(g,"error")),S({id:"Error-With-Details"},"Error With Details"),(0,n.createElement)(r.A,{demoStyles:"height: 4rem;"},(0,_.NO)(g,"error-with-details")),N({id:"Examples"},"Examples"),S({id:"Small-Column"},"Small Column"),(0,n.createElement)(r.A,{demoStyles:"height: 4rem;"},(0,_.NO)(E,"small")),N({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,n.createElement)(i.A,{name:"toast",type:"component"}))},x=function(){return(0,l.Qr)(O())}}},a={};function l(e){var t=a[e];if(void 0!==t)return t.exports;var s=a[e]={id:e,exports:{}};return n[e](s,s.exports,l),s.exports}l.m=n,l.amdO={},e=[],l.O=function(t,s,n,a){if(!s){var r=1/0;for(m=0;m<e.length;m++){s=e[m][0],n=e[m][1],a=e[m][2];for(var o=!0,i=0;i<s.length;i++)(!1&a\|\|r>=a)&&Object.keys(l.O).every(function(e){return l.O[e](s[i])})?s.splice(i--,1):(o=!1,a<r&&(r=a));if(o){e.splice(m--,1);var c=n();void 0!==c&&(t=c)}}return t}a=a\|\|0;for(var m=e.length;m>0&&e[m-1][2]>a;m--)e[m]=e[m-1];e[m]=[s,n,a]},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,{a:t}),t},s=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},l.t=function(e,n){if(1&n&&(e=this(e)),8&n)return e;if("object"==typeof e&&e){if(4&n&&e.__esModule)return e;if(16&n&&"function"==typeof e.then)return e}var a=Object.create(null);l.r(a);var r={};t=t\|\|[null,s({}),s([]),s(s)];for(var o=2&n&&e;("object"==typeof o\|\|"function"==typeof o)&&!~t.indexOf(o);o=s(o))Object.getOwnPropertyNames(o).forEach(function(t){r[t]=function(){return e[t]}});return r.default=function(){return e},l.d(a,r),a},l.d=function(e,t){for(var s in t)l.o(t,s)&&!l.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:t[s]})},l.e=function(){return Promise.resolve()},l.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.j=8644,function(){var e={8644:0};l.O.j=function(t){return 0===e[t]};var t=function(t,s){var n,a,r=s[0],o=s[1],i=s[2],c=0;if(r.some(function(t){return 0!==e[t]})){for(n in o)l.o(o,n)&&(l.m[n]=o[n]);if(i)var m=i(l)}for(t&&t(s);c<r.length;c++)a=r[c],l.o(e,a)&&e[a]&&e[a][0](),e[a]=0;return l.O(m)},s=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];s.forEach(t.bind(null,0)),s.push=t.bind(null,s.push.bind(s))}(),l.nc=void 0;var r=l.O(void 0,[3540],function(){return l(5475)});r=l.O(r),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/toast/docs.mdx.js"]=r}();
1	+ var SLDS;!function(){"use strict";var e,t,s,n={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},5475:function(e,t,s){s.r(t),s.d(t,{getContents:function(){return x},getElement:function(){return O}});var n=s(1594),a=s.n(n),l=s(5671),r=s(6547),o=s(5619),i=s(8342),c=s(4187),m=s.n(c),d=s(942),u=s.n(d),f=s(6955),h=function(e){var t=e.containerClassName,s=e.className,n=e.type,l=e.children;return a().createElement("div",{className:u()("slds-notify_container",t)},a().createElement("div",{className:u()("slds-notify slds-notify_toast",s,n&&"slds-theme_"+n),role:"status"},a().createElement("span",{className:"slds-assistive-text"},n),l,a().createElement("div",{className:"slds-notify__close"},a().createElement(f.A,{className:"slds-button_icon-inverse",symbol:"close",assistiveText:"Close",title:"Close"}))))};h.propTypes={containerClassName:m().string,className:m().string,type:m().oneOf(["info","success","warning","error"]),children:m().node},h.defaultProps={type:"info"};var p=h,v=s(538),y=[{id:"default",label:"Base - default",element:a().createElement(p,{type:"info",containerClassName:"slds-is-relative"},a().createElement(v.eX,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"info"}),a().createElement("div",{className:"slds-notify__content"},a().createElement("h2",{className:"slds-text-heading_small"},"26 potential duplicate leads were found."," ",a().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Select Leads to Merge"))))}],g=[{id:"success",label:"Success (Theme Class)",element:a().createElement(p,{type:"success",containerClassName:"slds-is-relative"},a().createElement(v.eX,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"success"}),a().createElement("div",{className:"slds-notify__content"},a().createElement("h2",{className:"slds-text-heading_small "},"Account"," ",a().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"ACME - 100")," ","widgets was created.")))},{id:"warning",label:"Warning (Theme Class)",element:a().createElement(p,{type:"warning",containerClassName:"slds-is-relative"},a().createElement(v.eX,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"warning"}),a().createElement("div",{className:"slds-notify__content"},a().createElement("h2",{className:"slds-text-heading_small "},"Can’t share file “report-q3.pdf” with the"," ",a().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"selected users"),".")))},{id:"error",label:"Error (Theme Class)",element:a().createElement(p,{type:"error",containerClassName:"slds-is-relative"},a().createElement(v.eX,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"error"}),a().createElement("div",{className:"slds-notify__content"},a().createElement("h2",{className:"slds-text-heading_small "},"Can’t save lead “Sally Wong” because"," ",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:a().createElement(p,{type:"error",containerClassName:"slds-is-relative"},a().createElement(v.eX,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"error"}),a().createElement("div",{className:"slds-notify__content"},a().createElement("h2",{className:"slds-text-heading_small"},"You've encountered some errors when trying to save edits to Samuel Smith."),a().createElement("p",null,"Here's some detail of"," ",a().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"what happened"),", being very descriptive and transparent.")))}],E=[{id:"small",label:"Small Column",demoStyles:"width: 25rem",storybookStyles:!0,element:a().createElement("div",{className:"slds-region_narrow"},a().createElement(p,{type:"info",containerClassName:"slds-is-relative"},a().createElement("div",{className:"slds-notify__content"},a().createElement("h2",{className:"slds-text-heading_small"},"26 potential"," ",a().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"duplicate leads")," ","were found."))))}],_=s(806),b=l.XB.code,N=l.XB.h2,S=l.XB.h3,w=l.XB.p,O=function(){return(0,n.createElement)(l.Ay,{},(0,n.createElement)("div",{className:"doc lead"},"Toast serves as a feedback & confirmation mechanism after the user takes an action."),(0,n.createElement)(r.A,{exampleOnly:!0,demoStyles:"height: 4rem;"},(0,_.NO)(y)),N({id:"About-Toast"},"About Toast"),(0,n.createElement)(o.A,{type:"note",header:"SLDS 2"},"To be compatible with the SLDS 2 default theme, Salesforce Cosmos, the toast ",(0,n.createElement)("code",null,"X")," close button is set with ",(0,n.createElement)("code",null,"slds-button__icon_xx-small"),"."),S({id:"Accessibility"},"Accessibility"),w({},"Toast should contain ",b({},'role="alert"')," on the container to signal to assistive technology that they require the user’s attention."),w({},"When the design uses multiple toasts simultaneously, set the role to ",b({},'role="status"'),". Historically, toasts would use the role of ",b({},"alert"),", but because you can invoke multiple toasts, assertive alerts would override previous toasts in the screen reader's speech queue. The role of ",b({},"status")," is a polite live region, which does not clear the queue, reducing the risk of a missed toast message."),w({},"Use a span with ",b({},"slds-assistive-text")," to let the user know what type of notification it is."),N({id:"Base"},"Base"),(0,n.createElement)(r.A,{demoStyles:"height: 4rem;"},(0,_.NO)(y)),N({id:"States"},"States"),S({id:"Success"},"Success"),(0,n.createElement)(r.A,{demoStyles:"height: 4rem;"},(0,_.NO)(g,"success")),S({id:"Warning"},"Warning"),(0,n.createElement)(r.A,{demoStyles:"height: 4rem;"},(0,_.NO)(g,"warning")),S({id:"Error"},"Error"),(0,n.createElement)(r.A,{demoStyles:"height: 4rem;"},(0,_.NO)(g,"error")),S({id:"Error-With-Details"},"Error With Details"),(0,n.createElement)(r.A,{demoStyles:"height: 4rem;"},(0,_.NO)(g,"error-with-details")),N({id:"Examples"},"Examples"),S({id:"Small-Column"},"Small Column"),(0,n.createElement)(r.A,{demoStyles:"height: 4rem;"},(0,_.NO)(E,"small")),N({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,n.createElement)(i.A,{name:"toast",type:"component"}))},x=function(){return(0,l.Qr)(O())}}},a={};function l(e){var t=a[e];if(void 0!==t)return t.exports;var s=a[e]={id:e,exports:{}};return n[e](s,s.exports,l),s.exports}l.m=n,l.amdO={},e=[],l.O=function(t,s,n,a){if(!s){var r=1/0;for(m=0;m<e.length;m++){s=e[m][0],n=e[m][1],a=e[m][2];for(var o=!0,i=0;i<s.length;i++)(!1&a\|\|r>=a)&&Object.keys(l.O).every(function(e){return l.O[e](s[i])})?s.splice(i--,1):(o=!1,a<r&&(r=a));if(o){e.splice(m--,1);var c=n();void 0!==c&&(t=c)}}return t}a=a\|\|0;for(var m=e.length;m>0&&e[m-1][2]>a;m--)e[m]=e[m-1];e[m]=[s,n,a]},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,{a:t}),t},s=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},l.t=function(e,n){if(1&n&&(e=this(e)),8&n)return e;if("object"==typeof e&&e){if(4&n&&e.__esModule)return e;if(16&n&&"function"==typeof e.then)return e}var a=Object.create(null);l.r(a);var r={};t=t\|\|[null,s({}),s([]),s(s)];for(var o=2&n&&e;("object"==typeof o\|\|"function"==typeof o)&&!~t.indexOf(o);o=s(o))Object.getOwnPropertyNames(o).forEach(function(t){r[t]=function(){return e[t]}});return r.default=function(){return e},l.d(a,r),a},l.d=function(e,t){for(var s in t)l.o(t,s)&&!l.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:t[s]})},l.e=function(){return Promise.resolve()},l.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.j=8644,function(){var e={8644:0};l.O.j=function(t){return 0===e[t]};var t=function(t,s){var n,a,r=s[0],o=s[1],i=s[2],c=0;if(r.some(function(t){return 0!==e[t]})){for(n in o)l.o(o,n)&&(l.m[n]=o[n]);if(i)var m=i(l)}for(t&&t(s);c<r.length;c++)a=r[c],l.o(e,a)&&e[a]&&e[a][0](),e[a]=0;return l.O(m)},s=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];s.forEach(t.bind(null,0)),s.push=t.bind(null,s.push.bind(s))}(),l.nc=void 0;var r=l.O(void 0,[3540],function(){return l(5475)});r=l.O(r),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/toast/docs.mdx.js"]=r}();

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

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,l,s={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},6095:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return de},getElement:function(){return re}});var s=l(1594),n=l.n(s),i=l(5671),a=l(6547),o=l(942),r=l.n(o),d=l(7412),c=l.n(d),m=l(806),u=l(6955),h=l(5006),b=l(3589),p=l(885),E=l(538);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},v(e)}function w(){return w=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var s in l)({}).hasOwnProperty.call(l,s)&&(e[s]=l[s])}return e},w.apply(null,arguments)}function g(e,t,l){return(t=function(e){var t=function(e){if("object"!=v(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var l=t.call(e,"string");if("object"!=v(l))return l;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==v(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}var y=n().createContext({isActionableMode:!1});c().string,c().node;var f=function(e){var t=r()("slds-table",{"slds-table_cell-buffer":e.hasCellBuffer,"slds-table_header-hidden":e.hasHiddenHeader,"slds-no-row-hover":e.hasNoRowHover,"slds-no-cell-focus":e.hasNoCellFocus,"slds-table_bordered":e.isBordered,"slds-table_col-bordered":e.isColBordered,"slds-table_edit":e.isEditable,"slds-table_fixed-layout":e.isFixedLayout,"slds-max-medium-table_stacked-horizontal":e.isResponsive,"slds-max-medium-table_stacked":e.isResponsiveStacked,"slds-table_resizable-cols":e.isResizable,"slds-table_striped":e.isStriped,"slds-tree slds-table_tree":"treegrid"===e.type,"slds-table_header-fixed":e.hasFixedHeader});return n().createElement("table",w({"aria-multiselectable":"multiple"===e.selectionType?"true":null,className:t,role:function(){var t=null;switch(e.type){case"advanced":t="grid";break;case"treegrid":t="treegrid"}return t}(),style:e.style},e.ariaLabelledBy&&g({},"aria-labelledby",e.ariaLabelledBy),e.ariaLabel&&g({},"aria-label",e.ariaLabel)),e.children)};f.displayName="Table",f.propTypes={ariaLabel:c().string,ariaLabelledBy:c().string,children:c().node,hasCellBuffer:c().bool,hasHiddenHeader:c().bool,hasNoCellFocus:c().bool,hasNoRowHover:c().bool,isBordered:c().bool,isColBordered:c().bool,isEditable:c().bool,isFixedLayout:c().bool,isResizable:c().bool,isResponsive:c().bool,isResponsiveStacked:c().bool,isStriped:c().bool,selectionType:c().oneOf(["multiple","single"]),style:c().object,type:c().oneOf(["advanced","base","treegrid"]).isRequired,hasFixedHeader:c().bool};var S=function(e){return n().createElement("thead",{className:e.isHidden?"slds-assistive-text":null},e.children)};S.displayName="THead",S.propTypes={children:c().node,isHidden:c().bool};var x=function(e){return n().createElement("tr",{className:"slds-line-height_reset"},e.children)};x.displayName="THeadTr",x.propTypes={children:c().node};var R=function(e){var t,l=(0,s.useContext)(y).isActionableMode,i=r()({"slds-has-button-menu":e.hasMenu,"slds-has-focus":e.hasFocus,"slds-is-resizable":e.isResizable,"slds-text-align_right":e.isRightAligned,"slds-is-sortable":e.isSortable,"slds-is-sorted":"ascending"===e.sortDirection\|\|"descending"===e.sortDirection,"slds-is-sorted_asc":"ascending"===e.sortDirection,"slds-is-sorted_desc":"descending"===e.sortDirection,"slds-cell-wrap":e.hasWrap,"slds-cell_action-mode":l});return n().createElement("th",{"aria-sort":(t=null,e.isSortable&&(t=e.sortDirection\|\|"none"),t),className:i,scope:!e.isDataTable&&"col",role:e.isDataTable&&"cell",style:e.style},e.isDataTable,e.children)};R.displayName="ColumnTh",R.propTypes={"aria-label":c().string,children:c().node,hasFocus:c().bool,hasMenu:c().bool,isResizable:c().bool,isRightAligned:c().bool,isSortable:c().bool,sortDirection:c().oneOf(["ascending","descending","none"]),style:c().object,hasWrap:c().bool,isDataTable:c().bool};var N=function(e){return n().createElement("div",{className:r()("slds-truncate",{"slds-assistive-text":e.isAssistiveText,"slds-cell-fixed":e.isFixedCell}),id:e.id,title:e.columnName},e.columnName)};N.displayName="ColumnHeader",N.propTypes={columnName:c().string.isRequired,id:c().string,isAssistiveText:c().bool,isFixedCell:c().bool},N.defaultProps={columnName:"Column Name",isDataTable:c().bool};var L=function(e){var t=m.Ay.uniqueId("cell-resize-handle-");return n().createElement("div",{className:"slds-resizable"},n().createElement("input",{"aria-label":e.label,className:"slds-resizable__input slds-assistive-text",id:t,max:"1000",min:"20",tabIndex:e.tabIndex,type:"range"}),n().createElement("span",{className:"slds-resizable__handle"},n().createElement("span",{className:"slds-resizable__divider"})))};L.displayName="ResizeControl",L.propTypes={label:c().string.isRequired,tabIndex:c().oneOf(["0","-1"])};var A=function(e){var t=(0,s.useContext)(y).isActionableMode,l=t?"0":"-1",i=function(){return n().createElement("div",{className:"slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate"},e.columnHeaderIcons?function(){var t=e.columnHeaderIcons.filter(function(t){return t.column===e.columnName.toLowerCase()});if(t.length)return t[0].icon}():null,n().createElement("span",{className:"slds-truncate",title:e.columnName},e.columnName),e.isSortable&&n().createElement(E.eX,{assistiveText:!1,className:"slds-icon-text-default slds-is-sortable__icon ",symbol:"arrowdown",title:!1}))};return n().createElement(n().Fragment,null,e.isSortable?n().createElement("a",{className:"slds-th__action slds-text-link_reset",href:"#",role:"button",tabIndex:l,onClick:function(e){return e.preventDefault()}},n().createElement("span",{className:"slds-assistive-text"},"Sort by: "),i()):n().createElement("div",{className:"slds-th__action"},i()),e.sortDirection&&n().createElement("span",{className:"slds-assistive-text","aria-live":"polite","aria-atomic":"true"},"Sorted ",e.sortDirection),e.hasMenu&&n().createElement(u.A,{"aria-haspopup":"true",assistiveText:"Show ".concat(e.columnName," column actions"),className:"slds-th__action-button slds-button_icon-x-small",iconClassName:"slds-button__icon_hint slds-button__icon_small",symbol:"chevrondown",tabIndex:t?"0":"-1",title:"Show ".concat(e.columnName," column actions")}),e.isResizable&&n().createElement(L,{label:e.columnName+" column width"\|\|0,tabIndex:l}))};A.displayName="InteractiveColumnHeader",A.propTypes={columnName:c().string.isRequired,columnHeaderIcons:c().array,hasMenu:c().bool,isResizable:c().bool,isSortable:c().bool,sortDirection:c().oneOf(["ascending","descending"])},A.defaultProps={isResizable:!0,isSortable:!0};var _=function(e){var t=(0,s.useContext)(y).isActionableMode;return n().createElement(n().Fragment,null,n().createElement("div",{className:"slds-th__action slds-th__action_form"},n().createElement(b.Sc,{tabIndex:t?"0":"-1",labelId:"check-select-all-label",label:"Select All",hideLabel:!0,checked:!!e.checked\|\|null,groupId:"column-group-header",isDataTable:!0})))};_.displayName="SelectAllColumnHeader",_.propTypes={checked:c().bool};var I=function(e){var t=e.hasErrorColumn?"2rem":"3.25rem",l=e.mainColumnWidth\|\|null;return n().createElement(S,{isHidden:e.isHidden},n().createElement(x,null,e.hasErrorColumn?n().createElement(R,{style:{width:"3.75rem"}},n().createElement(N,{columnName:"Errors",isAssistiveText:!0})):null,!e.hasNoRowSelection&&n().createElement(R,{isDataTable:!e.hasSingleRowSelect\|\|!e.isHidden,isRightAligned:!e.hasErrorColumn\|\|null,style:{width:t}},e.hasSingleRowSelect\|\|e.isHidden?n().createElement(N,{columnName:"Choose a row to select",id:"column-group-header",isAssistiveText:!0}):n().createElement(_,{checked:e.selectAll})),e.columns.map(function(t,s){return n().createElement(R,{key:s,"aria-label":t,hasFocus:0===s?e.hasFocus:null,hasMenu:e.hasMenus,isResizable:e.isResizable&&!e.isHidden,isSortable:e.isSortable&&!e.isHidden,sortDirection:0===s?e.sortDirection:null,style:{width:0===s&&e.singleColumnWidth?e.singleColumnWidth:l}},n().createElement(A,{columnName:t,columnHeaderIcons:e.columnHeaderIcons,hasMenu:e.hasMenus,isResizable:e.isResizable&&!e.isHidden,isSortable:e.isSortable&&!e.isHidden,sortDirection:0===s?e.sortDirection:null}))}),e.hasRowLevelActions&&n().createElement(R,{style:{width:"3.25rem"}},n().createElement(N,{columnName:"Actions",isAssistiveText:!0}))))};I.displayName="AdvancedDataTableHead",I.propTypes={columnHeaderIcons:c().array,columns:c().array.isRequired,hasErrorColumn:c().bool,hasFocus:c().bool,hasMenus:c().bool,hasNoRowSelection:c().bool,hasRowLevelActions:c().bool,hasSingleRowSelect:c().bool,isHidden:c().bool,isResizable:c().bool,isSortable:c().bool,mainColumnWidth:c().string,selectAll:c().bool,singleColumnWidth:c().string,sortDirection:c().oneOf(["ascending","descending","none"])},I.defaultProps={hasRowLevelActions:!0,isResizable:!0,isSortable:!0};var T=function(e){return n().createElement("tbody",null,e.children)};T.displayName="TBody",T.propTypes={children:c().node};var O=function(e){return n().createElement("tr",{"aria-expanded":e.isExpanded,"aria-level":e.level,"aria-posinset":e.positionWithinLevel,"aria-selected":e.isSelected,"aria-setsize":e.numberOfItemsAtLevel,className:r()("slds-hint-parent",{"slds-align-top":e.isTopAligned,"slds-is-selected":e.isSelected}),tabIndex:e.tabIndex},e.children)};O.displayName="TBodyTr",O.propTypes={children:c().node,isExpanded:c().bool,isSelected:c().bool,isTopAligned:c().bool,level:c().string,positionWithinLevel:c().string,numberOfItemsAtLevel:c().string,tabIndex:c().oneOf(["0","-1"])};var k=function(e){var t=(0,s.useContext)(y).isActionableMode,l=r()({"slds-has-focus":e.hasFocus,"slds-cell-edit":e.isEditable,"slds-is-edited":e.isEdited,"slds-cell-error":e.isErrorCell,"slds-text-align_right":e.isRightAligned,"slds-cell-shrink":e.isShrunken,"slds-has-error":e.hasError,"slds-cell-wrap":e.hasWrap,"slds-cell_action-mode":t});return n().createElement("td",{"aria-readonly":e.isLocked,"aria-selected":e.isEditing,"aria-describedby":function(){if(e.isEdited)return"unsaved-cell-notification"}()\|\|null,className:l\|\|null,"data-label":e["data-label"],role:function(){var t=null;switch(e.type){case"advanced":case"treegrid":t="gridcell"}return t}(),style:e.style,tabIndex:e.tabIndex},e.children)};k.displayName="Td",k.propTypes={children:c().node,"data-label":c().string,hasError:c().bool,hasFocus:c().bool,isEditable:c().bool,isEdited:c().bool,isEditing:c().bool,isErrorCell:c().bool,isLocked:c().bool,isRightAligned:c().bool,isShrunken:c().bool,style:c().object,tabIndex:c().oneOf(["0","-1"]),type:c().oneOf(["advanced","base","treegrid"]).isRequired,hasWrap:c().bool};var H=function(e){var t=(0,s.useContext)(y).isActionableMode,l=r()({"slds-cell-edit":e.isEditable,"slds-has-focus":e.hasFocus,"slds-tree__item":"treegrid"===e.type,"slds-is-hovered":e.isItemHovered,"slds-cell-wrap":e.hasWrap,"slds-cell_action-mode":t});return n().createElement("th",{className:l\|\|null,"data-label":e["data-label"],scope:"row",tabIndex:e.tabIndex},e.children)};H.displayName="RowTh",H.propTypes={children:c().node,"data-label":c().string,hasFocus:c().bool,isEditable:c().bool,tabIndex:c().oneOf(["0","-1"]),type:c().oneOf(["base","advanced","treegrid"]),isItemHovered:c().bool,hasWrap:c().bool};var C=function(e){return n().createElement(n().Fragment,null,e.hasSingleRowSelect?n().createElement(p.sx,{checked:e.checked,groupId:"column-group-header",hideLabel:!0,id:"radio-0".concat(e.index),label:"Select item ".concat(e.index),labelId:"radio-button-label-0".concat(e.index),tabIndex:e.inputTabIndex,isDataTable:!0}):n().createElement(b.Sc,{checked:e.checked,groupId:"column-group-header",hideLabel:!0,id:"checkbox-0".concat(e.index),label:"Select item ".concat(e.index),labelId:"check-button-label-0".concat(e.index),tabIndex:e.inputTabIndex,isDataTable:!0}))};C.displayName="SelectRowCell",C.propTypes={checked:c().bool,hasSingleRowSelect:c().bool,index:c().number.isRequired,inputTabIndex:c().oneOf(["0","-1"])};var D=function(e){var t=e.rowName,l=(0,s.useContext)(y).isActionableMode;return n().createElement(u.A,{assistiveText:"More actions for ".concat(t),"aria-haspopup":"true",className:"slds-button_icon-border-filled slds-button_icon-x-small",iconClassName:"slds-button__icon_hint slds-button__icon_small",symbol:"down",tabIndex:l?"0":"-1",title:"More actions for ".concat(t)})};D.displayName="RowActionsCell",D.propTypes={rowName:c().string.isRequired};var F=function(e){var t=(0,s.useContext)(y).isActionableMode;return n().createElement(n().Fragment,null,n().createElement(u.A,{"aria-hidden":e.hasError?null:"true",assistiveText:"Item ".concat(e.index," has errors"),className:r()("slds-button_icon-error slds-m-horizontal_xxx-small",{"slds-hidden":!e.hasError}),id:"error-0"+e.index,symbol:"error",tabIndex:t?"0":"-1",title:"Item ".concat(e.index," has errors")}),n().createElement("span",{className:"slds-row-number slds-text-body_small slds-text-color_weak"}))};F.displayName="ErrorCell",F.propTypes={hasError:c().bool,index:c().number.isRequired};var W=function(e){var t=e.hasWrap,l=e.cellText,i=e.cellLink,a=(0,s.useContext)(y).isActionableMode;return n().createElement("div",{className:r()(t?"slds-line-clamp":"slds-truncate"),title:l},i?n().createElement("a",{href:"#",tabIndex:a?"0":"-1",onClick:function(e){e.preventDefault()}},l):l)};W.displayName="ReadOnlyCell",W.propTypes={cellLink:c().bool,cellText:c().string.isRequired,hasWrap:c().bool};var B=function(e){var t=(0,s.useContext)(y).isActionableMode;return n().createElement(n().Fragment,null,n().createElement("span",{className:"slds-grid slds-grid_align-spread"},e.cellLink?n().createElement("a",{className:"slds-truncate",href:"#",id:"link-0".concat(e.index),tabIndex:t?"0":"-1",title:e.cellText,onClick:function(e){return e.preventDefault()}},e.cellText):n().createElement("span",{className:"slds-truncate",title:e.cellText},e.cellText),n().createElement(u.A,{assistiveText:e.buttonText,className:"slds-cell-edit__button slds-m-left_x-small",disabled:e.isLocked,iconClassName:r()("slds-button__icon_hint",{"slds-button__icon_edit":!e.isLocked,"slds-button__icon_lock slds-button__icon_small":e.isLocked}),symbol:e.isLocked?"lock":"edit",tabIndex:t?"0":"-1",title:e.buttonText})),e.showEdit&&n().createElement(M,{isRequired:e.isRequired,hasError:e.hasError}),e.isEdited&&n().createElement("span",{id:"unsaved-cell-notification",class:"slds-hide"},"Unsaved"))};B.displayName="EditableCell",B.propTypes={buttonText:c().string.isRequired,cellLink:c().bool,cellText:c().string.isRequired,hasError:(0,m.VY)("showEdit",c().bool),index:c().number,isLocked:c().bool,isRequired:(0,m.VY)("showEdit",c().bool),showEdit:c().bool};var M=function(e){return n().createElement(h.AM,{className:"slds-popover slds-popover_edit",style:{position:"absolute",top:"0",left:"0.0625rem"}},n().createElement("div",{className:r()("slds-form-element slds-grid slds-wrap",{"slds-has-error":e.hasError})},n().createElement("label",{className:"slds-form-element__label slds-form-element__label_edit slds-no-flex",htmlFor:"company-01"},e.isRequired?n().createElement("abbr",{className:"slds-required",title:"required","aria-hidden":"true"},"*"):null,n().createElement("span",{className:"slds-assistive-text"},"Company")),n().createElement("div",{className:"slds-form-element__control slds-grow"},n().createElement("input",{"aria-describedby":e.hasError?"error-message-01":null,className:"slds-input",defaultValue:"Acme Enterprises",id:"company-01",required:e.isRequired,type:"text"})),e.hasError?n().createElement("div",{id:"error-message-01",className:"slds-form-element__help"},"This field is required"):null))};M.displayName="EditPopover",M.propTypes={hasError:c().bool,isRequired:c().bool};var z=function(e){var t=e.ariaLabel,l=e.ariaLabelledBy,s=e.children,i=e.hasHiddenHeader,a=e.isBordered,o=e.isFixedLayout,r=e.isResizable,d=e.selectionType;return n().createElement(f,{ariaLabel:t,ariaLabelledBy:l,hasHiddenHeader:i,isBordered:a,isEditable:!0,isFixedLayout:o,isResizable:r,selectionType:d,type:"treegrid"},s)};z.propTypes={ariaLabel:c().string,ariaLabelledBy:c().string,children:c().node,hasHiddenHeader:c().bool,isBordered:c().bool,isFixedLayout:c().bool,isResizable:c().bool,selectionType:c().string};var q=["Account Name","Employees","Phone Number","Account Owner","Billing City"],J=["Account Name"],j=0,Y=function(e){return n().createElement(O,{isExpanded:e.isExpanded,isSelected:e.isSelected,level:e.level,positionWithinLevel:e.positionWithinLevel,numberOfItemsAtLevel:e.numberOfItemsAtLevel,tabIndex:e.isFocusable?"0":null},!e.hasSingleRowSelection&&n().createElement(k,{isRightAligned:!0,type:"advanced",style:{width:"3.25rem"}},n().createElement(C,{index:j++,checked:e.isSelected})),n().createElement(H,{"data-label":"Account Name",type:"treegrid",isItemHovered:e.isItemHovered},n().createElement(u.A,{"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().createElement(W,{cellLink:!0,cellText:e.name})),n().createElement(k,{"data-label":"Employees",type:"treegrid"},n().createElement(W,{cellText:e.employees})),n().createElement(k,{"data-label":"Phone Number",type:"treegrid"},n().createElement(W,{cellText:e.phone})),n().createElement(k,{"data-label":"Account Owner",type:"treegrid"},n().createElement(W,{cellLink:!0,cellText:e.owner})),n().createElement(k,{"data-label":"Billing City",type:"treegrid"},n().createElement(W,{cellText:e.city})),n().createElement(k,{type:"treegrid",style:{width:"3.25rem"}},n().createElement(D,{rowName:e.name})))};Y.propTypes={city:c().string.isRequired,employees:c().string.isRequired,hasSingleRowSelection:c().bool,isExpanded:c().bool,isFocusable:c().bool,isSelected:c().bool,level:c().string.isRequired,name:c().string.isRequired,numberOfItemsAtLevel:c().string.isRequired,owner:c().string.isRequired,phone:c().string.isRequired,positionWithinLevel:c().string.isRequired};var P=function(e){return n().createElement(O,{isExpanded:e.isExpanded,isSelected:e.isSelected,level:e.level,numberOfItemsAtLevel:e.numberOfItemsAtLevel,positionWithinLevel:e.positionWithinLevel,tabIndex:e.isFocusable?"0":null},!e.hasSingleRowSelection&&n().createElement(k,{isRightAligned:!0,type:"advanced",style:{width:"3.25rem"}},n().createElement(C,{index:j++,checked:e.isSelected})),n().createElement(H,{"data-label":"Account Name",type:"treegrid"},n().createElement(u.A,{"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().createElement(W,{cellLink:!0,cellText:e.name})),n().createElement(k,{type:"treegrid",style:{width:"3.25rem"}},n().createElement(D,{rowName:e.name})))};P.displayName="HeadlessRow",P.propTypes={hasSingleRowSelection:c().bool,isExpanded:c().bool,isFocusable:c().bool,isSelected:c().bool,level:c().string.isRequired,name:c().string.isRequired,numberOfItemsAtLevel:c().string.isRequired,positionWithinLevel:c().string.isRequired};var X=function(e){return n().createElement(T,null,n().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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"}))};X.displayName="DefaultRows",X.propTypes={additionalItem:c().node,hasSelectedRow:c().bool,hasSingleRowSelection:c().bool,isExpanded:c().bool};var U=function(e){return n().createElement(Y,{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"})},V=function(e){return n().createElement(T,null,n().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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}))},Z=function(e){return n().createElement(T,null,n().createElement(P,{hasSingleRowSelection:e.hasSingleRowSelection,isFocusable:!0,isSelected:!!e.hasSingleRowSelection&&null,level:"1",name:"Rewis Inc",numberOfItemsAtLevel:"4",positionWithinLevel:"1"}),n().createElement(P,{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().createElement(P,{hasSingleRowSelection:e.hasSingleRowSelection,isExpanded:!1,isSelected:!!e.hasSingleRowSelection&&null,level:"1",name:"Rohde Enterprises",numberOfItemsAtLevel:"4",positionWithinLevel:"3"}),n().createElement(P,{hasSingleRowSelection:e.hasSingleRowSelection,isSelected:!!e.hasSingleRowSelection&&null,level:"1",name:"Cheese Corp",numberOfItemsAtLevel:"4",positionWithinLevel:"4"}))};Z.displayName="HeadlessRows",Z.propTypes={isExpanded:c().any,hasSelectedRow:c().bool,hasSingleRowSelection:c().bool};var G=[{id:"default",label:"Default",element:n().createElement(z,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",ariaLabel:"Example default tree grid"},n().createElement(I,{columns:q,hasMenus:!0}),n().createElement(X,{isExpanded:!1}))}],K=[{id:"expanded",label:"Expanded",element:n().createElement(z,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",ariaLabel:"Example expanded tree grid"},n().createElement(I,{columns:q,hasMenus:!0}),n().createElement(X,{isExpanded:!0,additionalItem:n().createElement(U,null)}))},{id:"selected-row",label:"Selected row",element:n().createElement(z,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",ariaLabel:"Example tree grid with selected row"},n().createElement(I,{columns:q,hasMenus:!0}),n().createElement(X,{isExpanded:!0,hasSelectedRow:!0,additionalItem:n().createElement(U,null)}))},{id:"deep-nesting",label:"Deeply nested branches",element:n().createElement(z,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",ariaLabel:"Example tree grid with deep nesting"},n().createElement(I,{columns:q,hasMenus:!0}),n().createElement(V,null))}],Q=[{id:"treegrid-headless",label:"Headless",element:n().createElement(z,{isBordered:!0,selectionType:"multiple",hasHiddenHeader:!0,ariaLabel:"Example headless tree grid"},n().createElement(I,{columns:J,hasSingleRowSelect:!0,isHidden:!0}),n().createElement(Z,{isExpanded:!1}))},{id:"treegrid-headless-selected-row",label:"Headless with selected row",element:n().createElement(z,{isBordered:!0,selectionType:"multiple",hasHiddenHeader:!0,ariaLabel:"Example headless tree grid with selected row"},n().createElement(I,{columns:J,hasSingleRowSelect:!0,isHidden:!0}),n().createElement(Z,{isExpanded:!1,hasSelectedRow:!0}))},{id:"treegrid-headless-no-borders",label:"Headless with no borders",element:n().createElement(z,{selectionType:"multiple",hasHiddenHeader:!0,ariaLabel:"Example headless border-less tree grid"},n().createElement(I,{hasSingleRowSelect:!0,columns:J,isHidden:!0}),n().createElement(Z,{isExpanded:!1}))},{id:"treegrid-headless-no-borders-selected-row",label:"Headless with no borders and a selected row",element:n().createElement(z,{selectionType:"multiple",hasHiddenHeader:!0,ariaLabel:"Example headless border-less tree grid with selected row"},n().createElement(I,{hasSingleRowSelect:!0,columns:J,isHidden:!0}),n().createElement(Z,{isExpanded:!1,hasSelectedRow:!0}))},{id:"treegrid-single-select",label:"Single select",element:n().createElement(z,{isBordered:!0,isFixedLayout:!0,isResizable:!0,ariaLabel:"Example single select tree grid"},n().createElement(I,{hasNoRowSelection:!0,columns:q,hasMenus:!0}),n().createElement(X,{isExpanded:!1,hasSingleRowSelection:!0}))},{id:"treegrid-single-select-selected-row",label:"Single select with a selected row",element:n().createElement(z,{isBordered:!0,isFixedLayout:!0,isResizable:!0,ariaLabel:"Example single select tree grid with selected row"},n().createElement(I,{hasNoRowSelection:!0,columns:q,hasMenus:!0}),n().createElement(X,{isExpanded:!1,hasSelectedRow:!0,hasSingleRowSelection:!0}))},{id:"treegrid-single-select-headless",label:"Single select headless",element:n().createElement(z,{isBordered:!0,hasHiddenHeader:!0,ariaLabel:"Example headless single select tree grid"},n().createElement(I,{hasNoRowSelection:!0,columns:J,isHidden:!0}),n().createElement(Z,{isExpanded:!1,hasSingleRowSelection:!0}))},{id:"treegrid-single-select-headless-selected",label:"Single select headless with selected row",element:n().createElement(z,{isBordered:!0,hasHiddenHeader:!0,ariaLabel:"Example single select tree grid with selected row"},n().createElement(I,{hasNoRowSelection:!0,columns:J,isHidden:!0}),n().createElement(Z,{isExpanded:!1,hasSelectedRow:!0,hasSingleRowSelection:!0}))},{id:"treegrid-single-select-headless-no-borders",label:"Single select headless with no borders",element:n().createElement(z,{hasHiddenHeader:!0,ariaLabel:"Example headless border-less single select tree grid"},n().createElement(I,{hasNoRowSelection:!0,columns:J,isHidden:!0}),n().createElement(Z,{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().createElement(z,{hasHiddenHeader:!0,ariaLabel:"Example headless border-less single select tree grid with selected row"},n().createElement(I,{hasNoRowSelection:!0,columns:J,isHidden:!0}),n().createElement(Z,{isExpanded:!1,hasSelectedRow:!0,hasSingleRowSelection:!0}))},{id:"item-disabled",label:"Item Disabled",element:n().createElement(z,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",ariaLabel:"Example tree grid with disabled item"},n().createElement(I,{columns:q,hasMenus:!0}),n().createElement(X,{isExpanded:!1}))},{id:"item-hovered",label:"Item Hovered",element:n().createElement(z,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",ariaLabel:"Example tree grid with hovered item"},n().createElement(I,{columns:q,hasMenus:!0}),n().createElement(T,null,n().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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"})))}],$=i.XB.a,ee=i.XB.code,te=i.XB.h2,le=i.XB.h3,se=i.XB.h4,ne=i.XB.li,ie=i.XB.p,ae=i.XB.strong,oe=i.XB.ul,re=function(){return(0,s.createElement)(i.Ay,{},(0,s.createElement)("div",{className:"doc lead"},"A tree is visualization of a structure hierarchy. A branch can be expanded or collapsed."),(0,s.createElement)(a.A,{exampleOnly:!0,demoStyles:"overflow: hidden;"},(0,m.NO)(G)),te({id:"About-Tree-Grid"},"About Tree Grid"),ie({},"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."),ie({},"The tree grid comes with a very specific keyboard interaction model which ",ae({},"must")," be implemented for the component to be screen reader accessible."),le({id:"Accessibility"},"Accessibility"),se({id:"Markup"},"Markup"),oe({},ne({},ee({},'role="treegrid"')," should be applied to the ",ee({},"table")," element"),ne({},ee({},'aria-readonly="true"')," should be applied to the ",ee({},"table")," element"),ne({},ee({},'aria-level="n"')," where ",ee({},"n")," represents the nesting level of a particular grid row, should be applied to the ",ee({},"tr")," element"),ne({},ee({},'aria-setsize="n"')," where ",ee({},"n")," is the number of items for that specific ",ee({},"aria-level")," should be applied to the ",ee({},"tr")," element"),ne({},ee({},'aria-posinset="n"')," where ",ee({},"n")," represents the position in the ",ee({},"aria-level")," set the row is placed at, should be applied to the ",ee({},"tr")," element"),ne({},ee({},'aria-expanded="false"')," should be placed on rows that are collapsed and have child rows"),ne({},ee({},'aria-expanded="true"')," should be placed on rows that are expanded and have child rows"),ne({},ee({},'tabindex="0"')," should be placed on the first ",ee({},"tr")," in the grid on load, to make the row focusable"),ne({},"Every actionable element in the grid should have ",ee({},'tabindex="-1"')," applied to make them not focusable in the grids navigation mode")),ie({},ae({},"Multi select tree grid:")),oe({},ne({},ee({},'aria-multiselectable="true"')," should be placed on the ",ee({},"table")," element"),ne({},ee({},'aria-selected="false"')," should be set by default on all ",ee({},"tr")," elements that aren't selected"),ne({},ee({},'aria-selected="true"')," should be set only on the ",ee({},"tr")," elements that are selected")),ie({},ae({},"Single Select tree grid:")),oe({},ne({},ee({},'aria-selected="true"')," should be applied to the ",ee({},"tr")," that is selected in the tree grid")),se({id:"Keyboard-Interactions"},"Keyboard Interactions"),oe({},ne({},"Overall keyboard interaction should follow the same keyboard modal as the ",$({href:"/components/data-tables"},"Advanced and Inline Edit Data Table")," with some additions",oe({},ne({},"Navigation mode is the default mode. The grid only has a single focusable element at any time and it is either the ",ee({},"tr")," or the ",ee({},"td")),ne({},"Actionable mode is enabled when the user presses the ",ee({},"Enter")," key, where actionable elements become focusable in the cell"),ne({},"Actionable mode is exited when the user presses the ",ee({},"Escape")," key, and the user is placed back into Navigation Mode on the last cell they were in"))),ne({},"User focus is initially placed on the first row in the tree grid"),ne({},ee({},"Down")," arrow key moves the user down one row and moves ",ee({},'tabindex="0"')," with it"),ne({},ee({},"Up")," arrow key moves the user up one row and moves ",ee({},'tabindex="0"')," with it"),ne({},ee({},"Space")," key when focused on a row should select that row by setting ",ee({},'aria-selected="true')," on the ",ee({},"tr")," element"),ne({},ee({},"Right")," arrow key on a collapsed row, will expand it and update ",ee({},"aria-expanded")),ne({},ee({},"Right")," arrow key on an expanded or end row will move the user to the first cell in the row and move ",ee({},'tabindex="0"')," with it"),ne({},ee({},"Right")," arrow key on a cell will move the user to the next cell in the row and move ",ee({},'tabindex="0"')," with it"),ne({},ee({},"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"),ne({},ee({},"Left")," arrow key on an expanded row will collapse it and update ",ee({},"aria-expanded")),ne({},ee({},"Left")," arrow key on a cell will move the user to the previous cell in the row and moves ",ee({},'tabindex="0"')," with it"),ne({},ee({},"Left")," arrow key on the first cell of a row will move the user back to the row and moves ",ee({},'tabindex="0"')," with it")),te({id:"Base"},"Base"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(G)),le({id:"States"},"States"),se({id:"Expanded"},"Expanded"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(K,"expanded")),se({id:"Selected-row"},"Selected row"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(K,"selected-row")),se({id:"Deeply-nested-branches"},"Deeply nested branches"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(K,"deep-nesting")),te({id:"Examples"},"Examples"),le({id:"Headless"},"Headless"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(Q,"treegrid-headless")),le({id:"Headless-with-selected-row"},"Headless with selected row"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(Q,"treegrid-headless-selected-row")),le({id:"Headless-with-no-borders"},"Headless with no borders"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(Q,"treegrid-headless-no-borders")),le({id:"Headless-with-no-borders-and-a-selected-row"},"Headless with no borders and a selected row"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(Q,"treegrid-headless-no-borders-selected-row")),le({id:"Single-select"},"Single select"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(Q,"treegrid-single-select")),le({id:"Single-select-with-a-selected-row"},"Single select with a selected row"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(Q,"treegrid-single-select-selected-row")),le({id:"Single-select-headless"},"Single select headless"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(Q,"treegrid-single-select-headless")),le({id:"Single-select-headless-with-selected-row"},"Single select headless with selected row"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(Q,"treegrid-single-select-headless-selected")),le({id:"Single-select-headless-with-no-borders"},"Single select headless with no borders"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(Q,"treegrid-single-select-headless-no-borders")),le({id:"Single-select-headless-with-no-borders-and-a-selected-row"},"Single select headless with no borders and a selected row"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(Q,"treegrid-single-select-headless-no-borders-with-selected")),te({id:"Modifiers"},"Modifiers"),le({id:"Interaction"},"Interaction"),se({id:"Item-Disabled"},"Item Disabled"),ie({},"When a branch doesn't have children, apply ",ee({},"slds-is-disabled")," to the corresponding ",ee({},"slds-button_icon")," element."),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(Q,"item-disabled")),se({id:"Item-Hovered"},"Item Hovered"),ie({},"When a tree item is hovered, apply ",ee({},"slds-is-hovered")," to ",ee({},"slds-tree__item")," element`."),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(Q,"item-hovered")))},de=function(){return(0,i.Qr)(re())}}},n={};function i(e){var t=n[e];if(void 0!==t)return t.exports;var l=n[e]={id:e,exports:{}};return s[e](l,l.exports,i),l.exports}i.m=s,i.amdO={},e=[],i.O=function(t,l,s,n){if(!l){var a=1/0;for(c=0;c<e.length;c++){l=e[c][0],s=e[c][1],n=e[c][2];for(var o=!0,r=0;r<l.length;r++)(!1&n\|\|a>=n)&&Object.keys(i.O).every(function(e){return i.O[e](l[r])})?l.splice(r--,1):(o=!1,n<a&&(a=n));if(o){e.splice(c--,1);var d=s();void 0!==d&&(t=d)}}return t}n=n\|\|0;for(var c=e.length;c>0&&e[c-1][2]>n;c--)e[c]=e[c-1];e[c]=[l,s,n]},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,{a:t}),t},l=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},i.t=function(e,s){if(1&s&&(e=this(e)),8&s)return e;if("object"==typeof e&&e){if(4&s&&e.__esModule)return e;if(16&s&&"function"==typeof e.then)return e}var n=Object.create(null);i.r(n);var a={};t=t\|\|[null,l({}),l([]),l(l)];for(var o=2&s&&e;("object"==typeof o\|\|"function"==typeof o)&&!~t.indexOf(o);o=l(o))Object.getOwnPropertyNames(o).forEach(function(t){a[t]=function(){return e[t]}});return a.default=function(){return e},i.d(n,a),n},i.d=function(e,t){for(var l in t)i.o(t,l)&&!i.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},i.e=function(){return Promise.resolve()},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=1844,function(){var e={1844:0};i.O.j=function(t){return 0===e[t]};var t=function(t,l){var s,n,a=l[0],o=l[1],r=l[2],d=0;if(a.some(function(t){return 0!==e[t]})){for(s in o)i.o(o,s)&&(i.m[s]=o[s]);if(r)var c=r(i)}for(t&&t(l);d<a.length;d++)n=a[d],i.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return i.O(c)},l=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),i.nc=void 0;var a=i.O(void 0,[3540],function(){return i(6095)});a=i.O(a),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/tree-grid/docs.mdx.js"]=a}();
1	+ var SLDS;!function(){"use strict";var e,t,l,s={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},6095:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return de},getElement:function(){return re}});var s=l(1594),n=l.n(s),i=l(5671),a=l(6547),o=l(942),r=l.n(o),d=l(4187),c=l.n(d),m=l(806),u=l(6955),h=l(5006),b=l(3589),p=l(885),E=l(538);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},v(e)}function w(){return w=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var s in l)({}).hasOwnProperty.call(l,s)&&(e[s]=l[s])}return e},w.apply(null,arguments)}function g(e,t,l){return(t=function(e){var t=function(e){if("object"!=v(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var l=t.call(e,"string");if("object"!=v(l))return l;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==v(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}var y=n().createContext({isActionableMode:!1});c().string,c().node;var f=function(e){var t=r()("slds-table",{"slds-table_cell-buffer":e.hasCellBuffer,"slds-table_header-hidden":e.hasHiddenHeader,"slds-no-row-hover":e.hasNoRowHover,"slds-no-cell-focus":e.hasNoCellFocus,"slds-table_bordered":e.isBordered,"slds-table_col-bordered":e.isColBordered,"slds-table_edit":e.isEditable,"slds-table_fixed-layout":e.isFixedLayout,"slds-max-medium-table_stacked-horizontal":e.isResponsive,"slds-max-medium-table_stacked":e.isResponsiveStacked,"slds-table_resizable-cols":e.isResizable,"slds-table_striped":e.isStriped,"slds-tree slds-table_tree":"treegrid"===e.type,"slds-table_header-fixed":e.hasFixedHeader});return n().createElement("table",w({"aria-multiselectable":"multiple"===e.selectionType?"true":null,className:t,role:function(){var t=null;switch(e.type){case"advanced":t="grid";break;case"treegrid":t="treegrid"}return t}(),style:e.style},e.ariaLabelledBy&&g({},"aria-labelledby",e.ariaLabelledBy),e.ariaLabel&&g({},"aria-label",e.ariaLabel)),e.children)};f.displayName="Table",f.propTypes={ariaLabel:c().string,ariaLabelledBy:c().string,children:c().node,hasCellBuffer:c().bool,hasHiddenHeader:c().bool,hasNoCellFocus:c().bool,hasNoRowHover:c().bool,isBordered:c().bool,isColBordered:c().bool,isEditable:c().bool,isFixedLayout:c().bool,isResizable:c().bool,isResponsive:c().bool,isResponsiveStacked:c().bool,isStriped:c().bool,selectionType:c().oneOf(["multiple","single"]),style:c().object,type:c().oneOf(["advanced","base","treegrid"]).isRequired,hasFixedHeader:c().bool};var S=function(e){return n().createElement("thead",{className:e.isHidden?"slds-assistive-text":null},e.children)};S.displayName="THead",S.propTypes={children:c().node,isHidden:c().bool};var x=function(e){return n().createElement("tr",{className:"slds-line-height_reset"},e.children)};x.displayName="THeadTr",x.propTypes={children:c().node};var R=function(e){var t,l=(0,s.useContext)(y).isActionableMode,i=r()({"slds-has-button-menu":e.hasMenu,"slds-has-focus":e.hasFocus,"slds-is-resizable":e.isResizable,"slds-text-align_right":e.isRightAligned,"slds-is-sortable":e.isSortable,"slds-is-sorted":"ascending"===e.sortDirection\|\|"descending"===e.sortDirection,"slds-is-sorted_asc":"ascending"===e.sortDirection,"slds-is-sorted_desc":"descending"===e.sortDirection,"slds-cell-wrap":e.hasWrap,"slds-cell_action-mode":l});return n().createElement("th",{"aria-sort":(t=null,e.isSortable&&(t=e.sortDirection\|\|"none"),t),className:i,scope:!e.isDataTable&&"col",role:e.isDataTable&&"cell",style:e.style},e.isDataTable,e.children)};R.displayName="ColumnTh",R.propTypes={"aria-label":c().string,children:c().node,hasFocus:c().bool,hasMenu:c().bool,isResizable:c().bool,isRightAligned:c().bool,isSortable:c().bool,sortDirection:c().oneOf(["ascending","descending","none"]),style:c().object,hasWrap:c().bool,isDataTable:c().bool};var N=function(e){return n().createElement("div",{className:r()("slds-truncate",{"slds-assistive-text":e.isAssistiveText,"slds-cell-fixed":e.isFixedCell}),id:e.id,title:e.columnName},e.columnName)};N.displayName="ColumnHeader",N.propTypes={columnName:c().string.isRequired,id:c().string,isAssistiveText:c().bool,isFixedCell:c().bool},N.defaultProps={columnName:"Column Name",isDataTable:c().bool};var L=function(e){var t=m.Ay.uniqueId("cell-resize-handle-");return n().createElement("div",{className:"slds-resizable"},n().createElement("input",{"aria-label":e.label,className:"slds-resizable__input slds-assistive-text",id:t,max:"1000",min:"20",tabIndex:e.tabIndex,type:"range"}),n().createElement("span",{className:"slds-resizable__handle"},n().createElement("span",{className:"slds-resizable__divider"})))};L.displayName="ResizeControl",L.propTypes={label:c().string.isRequired,tabIndex:c().oneOf(["0","-1"])};var A=function(e){var t=(0,s.useContext)(y).isActionableMode,l=t?"0":"-1",i=function(){return n().createElement("div",{className:"slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate"},e.columnHeaderIcons?function(){var t=e.columnHeaderIcons.filter(function(t){return t.column===e.columnName.toLowerCase()});if(t.length)return t[0].icon}():null,n().createElement("span",{className:"slds-truncate",title:e.columnName},e.columnName),e.isSortable&&n().createElement(E.eX,{assistiveText:!1,className:"slds-icon-text-default slds-is-sortable__icon ",symbol:"arrowdown",title:!1}))};return n().createElement(n().Fragment,null,e.isSortable?n().createElement("a",{className:"slds-th__action slds-text-link_reset",href:"#",role:"button",tabIndex:l,onClick:function(e){return e.preventDefault()}},n().createElement("span",{className:"slds-assistive-text"},"Sort by: "),i()):n().createElement("div",{className:"slds-th__action"},i()),e.sortDirection&&n().createElement("span",{className:"slds-assistive-text","aria-live":"polite","aria-atomic":"true"},"Sorted ",e.sortDirection),e.hasMenu&&n().createElement(u.A,{"aria-haspopup":"true",assistiveText:"Show ".concat(e.columnName," column actions"),className:"slds-th__action-button slds-button_icon-x-small",iconClassName:"slds-button__icon_hint slds-button__icon_small",symbol:"chevrondown",tabIndex:t?"0":"-1",title:"Show ".concat(e.columnName," column actions")}),e.isResizable&&n().createElement(L,{label:e.columnName+" column width"\|\|0,tabIndex:l}))};A.displayName="InteractiveColumnHeader",A.propTypes={columnName:c().string.isRequired,columnHeaderIcons:c().array,hasMenu:c().bool,isResizable:c().bool,isSortable:c().bool,sortDirection:c().oneOf(["ascending","descending"])},A.defaultProps={isResizable:!0,isSortable:!0};var _=function(e){var t=(0,s.useContext)(y).isActionableMode;return n().createElement(n().Fragment,null,n().createElement("div",{className:"slds-th__action slds-th__action_form"},n().createElement(b.Sc,{tabIndex:t?"0":"-1",labelId:"check-select-all-label",label:"Select All",hideLabel:!0,checked:!!e.checked\|\|null,groupId:"column-group-header",isDataTable:!0})))};_.displayName="SelectAllColumnHeader",_.propTypes={checked:c().bool};var I=function(e){var t=e.hasErrorColumn?"2rem":"3.25rem",l=e.mainColumnWidth\|\|null;return n().createElement(S,{isHidden:e.isHidden},n().createElement(x,null,e.hasErrorColumn?n().createElement(R,{style:{width:"3.75rem"}},n().createElement(N,{columnName:"Errors",isAssistiveText:!0})):null,!e.hasNoRowSelection&&n().createElement(R,{isDataTable:!e.hasSingleRowSelect\|\|!e.isHidden,isRightAligned:!e.hasErrorColumn\|\|null,style:{width:t}},e.hasSingleRowSelect\|\|e.isHidden?n().createElement(N,{columnName:"Choose a row to select",id:"column-group-header",isAssistiveText:!0}):n().createElement(_,{checked:e.selectAll})),e.columns.map(function(t,s){return n().createElement(R,{key:s,"aria-label":t,hasFocus:0===s?e.hasFocus:null,hasMenu:e.hasMenus,isResizable:e.isResizable&&!e.isHidden,isSortable:e.isSortable&&!e.isHidden,sortDirection:0===s?e.sortDirection:null,style:{width:0===s&&e.singleColumnWidth?e.singleColumnWidth:l}},n().createElement(A,{columnName:t,columnHeaderIcons:e.columnHeaderIcons,hasMenu:e.hasMenus,isResizable:e.isResizable&&!e.isHidden,isSortable:e.isSortable&&!e.isHidden,sortDirection:0===s?e.sortDirection:null}))}),e.hasRowLevelActions&&n().createElement(R,{style:{width:"3.25rem"}},n().createElement(N,{columnName:"Actions",isAssistiveText:!0}))))};I.displayName="AdvancedDataTableHead",I.propTypes={columnHeaderIcons:c().array,columns:c().array.isRequired,hasErrorColumn:c().bool,hasFocus:c().bool,hasMenus:c().bool,hasNoRowSelection:c().bool,hasRowLevelActions:c().bool,hasSingleRowSelect:c().bool,isHidden:c().bool,isResizable:c().bool,isSortable:c().bool,mainColumnWidth:c().string,selectAll:c().bool,singleColumnWidth:c().string,sortDirection:c().oneOf(["ascending","descending","none"])},I.defaultProps={hasRowLevelActions:!0,isResizable:!0,isSortable:!0};var T=function(e){return n().createElement("tbody",null,e.children)};T.displayName="TBody",T.propTypes={children:c().node};var O=function(e){return n().createElement("tr",{"aria-expanded":e.isExpanded,"aria-level":e.level,"aria-posinset":e.positionWithinLevel,"aria-selected":e.isSelected,"aria-setsize":e.numberOfItemsAtLevel,className:r()("slds-hint-parent",{"slds-align-top":e.isTopAligned,"slds-is-selected":e.isSelected}),tabIndex:e.tabIndex},e.children)};O.displayName="TBodyTr",O.propTypes={children:c().node,isExpanded:c().bool,isSelected:c().bool,isTopAligned:c().bool,level:c().string,positionWithinLevel:c().string,numberOfItemsAtLevel:c().string,tabIndex:c().oneOf(["0","-1"])};var k=function(e){var t=(0,s.useContext)(y).isActionableMode,l=r()({"slds-has-focus":e.hasFocus,"slds-cell-edit":e.isEditable,"slds-is-edited":e.isEdited,"slds-cell-error":e.isErrorCell,"slds-text-align_right":e.isRightAligned,"slds-cell-shrink":e.isShrunken,"slds-has-error":e.hasError,"slds-cell-wrap":e.hasWrap,"slds-cell_action-mode":t});return n().createElement("td",{"aria-readonly":e.isLocked,"aria-selected":e.isEditing,"aria-describedby":function(){if(e.isEdited)return"unsaved-cell-notification"}()\|\|null,className:l\|\|null,"data-label":e["data-label"],role:function(){var t=null;switch(e.type){case"advanced":case"treegrid":t="gridcell"}return t}(),style:e.style,tabIndex:e.tabIndex},e.children)};k.displayName="Td",k.propTypes={children:c().node,"data-label":c().string,hasError:c().bool,hasFocus:c().bool,isEditable:c().bool,isEdited:c().bool,isEditing:c().bool,isErrorCell:c().bool,isLocked:c().bool,isRightAligned:c().bool,isShrunken:c().bool,style:c().object,tabIndex:c().oneOf(["0","-1"]),type:c().oneOf(["advanced","base","treegrid"]).isRequired,hasWrap:c().bool};var H=function(e){var t=(0,s.useContext)(y).isActionableMode,l=r()({"slds-cell-edit":e.isEditable,"slds-has-focus":e.hasFocus,"slds-tree__item":"treegrid"===e.type,"slds-is-hovered":e.isItemHovered,"slds-cell-wrap":e.hasWrap,"slds-cell_action-mode":t});return n().createElement("th",{className:l\|\|null,"data-label":e["data-label"],scope:"row",tabIndex:e.tabIndex},e.children)};H.displayName="RowTh",H.propTypes={children:c().node,"data-label":c().string,hasFocus:c().bool,isEditable:c().bool,tabIndex:c().oneOf(["0","-1"]),type:c().oneOf(["base","advanced","treegrid"]),isItemHovered:c().bool,hasWrap:c().bool};var C=function(e){return n().createElement(n().Fragment,null,e.hasSingleRowSelect?n().createElement(p.sx,{checked:e.checked,groupId:"column-group-header",hideLabel:!0,id:"radio-0".concat(e.index),label:"Select item ".concat(e.index),labelId:"radio-button-label-0".concat(e.index),tabIndex:e.inputTabIndex,isDataTable:!0}):n().createElement(b.Sc,{checked:e.checked,groupId:"column-group-header",hideLabel:!0,id:"checkbox-0".concat(e.index),label:"Select item ".concat(e.index),labelId:"check-button-label-0".concat(e.index),tabIndex:e.inputTabIndex,isDataTable:!0}))};C.displayName="SelectRowCell",C.propTypes={checked:c().bool,hasSingleRowSelect:c().bool,index:c().number.isRequired,inputTabIndex:c().oneOf(["0","-1"])};var D=function(e){var t=e.rowName,l=(0,s.useContext)(y).isActionableMode;return n().createElement(u.A,{assistiveText:"More actions for ".concat(t),"aria-haspopup":"true",className:"slds-button_icon-border-filled slds-button_icon-x-small",iconClassName:"slds-button__icon_hint slds-button__icon_small",symbol:"down",tabIndex:l?"0":"-1",title:"More actions for ".concat(t)})};D.displayName="RowActionsCell",D.propTypes={rowName:c().string.isRequired};var F=function(e){var t=(0,s.useContext)(y).isActionableMode;return n().createElement(n().Fragment,null,n().createElement(u.A,{"aria-hidden":e.hasError?null:"true",assistiveText:"Item ".concat(e.index," has errors"),className:r()("slds-button_icon-error slds-m-horizontal_xxx-small",{"slds-hidden":!e.hasError}),id:"error-0"+e.index,symbol:"error",tabIndex:t?"0":"-1",title:"Item ".concat(e.index," has errors")}),n().createElement("span",{className:"slds-row-number slds-text-body_small slds-text-color_weak"}))};F.displayName="ErrorCell",F.propTypes={hasError:c().bool,index:c().number.isRequired};var W=function(e){var t=e.hasWrap,l=e.cellText,i=e.cellLink,a=(0,s.useContext)(y).isActionableMode;return n().createElement("div",{className:r()(t?"slds-line-clamp":"slds-truncate"),title:l},i?n().createElement("a",{href:"#",tabIndex:a?"0":"-1",onClick:function(e){e.preventDefault()}},l):l)};W.displayName="ReadOnlyCell",W.propTypes={cellLink:c().bool,cellText:c().string.isRequired,hasWrap:c().bool};var B=function(e){var t=(0,s.useContext)(y).isActionableMode;return n().createElement(n().Fragment,null,n().createElement("span",{className:"slds-grid slds-grid_align-spread"},e.cellLink?n().createElement("a",{className:"slds-truncate",href:"#",id:"link-0".concat(e.index),tabIndex:t?"0":"-1",title:e.cellText,onClick:function(e){return e.preventDefault()}},e.cellText):n().createElement("span",{className:"slds-truncate",title:e.cellText},e.cellText),n().createElement(u.A,{assistiveText:e.buttonText,className:"slds-cell-edit__button slds-m-left_x-small",disabled:e.isLocked,iconClassName:r()("slds-button__icon_hint",{"slds-button__icon_edit":!e.isLocked,"slds-button__icon_lock slds-button__icon_small":e.isLocked}),symbol:e.isLocked?"lock":"edit",tabIndex:t?"0":"-1",title:e.buttonText})),e.showEdit&&n().createElement(M,{isRequired:e.isRequired,hasError:e.hasError}),e.isEdited&&n().createElement("span",{id:"unsaved-cell-notification",class:"slds-hide"},"Unsaved"))};B.displayName="EditableCell",B.propTypes={buttonText:c().string.isRequired,cellLink:c().bool,cellText:c().string.isRequired,hasError:(0,m.VY)("showEdit",c().bool),index:c().number,isLocked:c().bool,isRequired:(0,m.VY)("showEdit",c().bool),showEdit:c().bool};var M=function(e){return n().createElement(h.AM,{className:"slds-popover slds-popover_edit",style:{position:"absolute",top:"0",left:"0.0625rem"}},n().createElement("div",{className:r()("slds-form-element slds-grid slds-wrap",{"slds-has-error":e.hasError})},n().createElement("label",{className:"slds-form-element__label slds-form-element__label_edit slds-no-flex",htmlFor:"company-01"},e.isRequired?n().createElement("abbr",{className:"slds-required",title:"required","aria-hidden":"true"},"*"):null,n().createElement("span",{className:"slds-assistive-text"},"Company")),n().createElement("div",{className:"slds-form-element__control slds-grow"},n().createElement("input",{"aria-describedby":e.hasError?"error-message-01":null,className:"slds-input",defaultValue:"Acme Enterprises",id:"company-01",required:e.isRequired,type:"text"})),e.hasError?n().createElement("div",{id:"error-message-01",className:"slds-form-element__help"},"This field is required"):null))};M.displayName="EditPopover",M.propTypes={hasError:c().bool,isRequired:c().bool};var z=function(e){var t=e.ariaLabel,l=e.ariaLabelledBy,s=e.children,i=e.hasHiddenHeader,a=e.isBordered,o=e.isFixedLayout,r=e.isResizable,d=e.selectionType;return n().createElement(f,{ariaLabel:t,ariaLabelledBy:l,hasHiddenHeader:i,isBordered:a,isEditable:!0,isFixedLayout:o,isResizable:r,selectionType:d,type:"treegrid"},s)};z.propTypes={ariaLabel:c().string,ariaLabelledBy:c().string,children:c().node,hasHiddenHeader:c().bool,isBordered:c().bool,isFixedLayout:c().bool,isResizable:c().bool,selectionType:c().string};var q=["Account Name","Employees","Phone Number","Account Owner","Billing City"],J=["Account Name"],j=0,Y=function(e){return n().createElement(O,{isExpanded:e.isExpanded,isSelected:e.isSelected,level:e.level,positionWithinLevel:e.positionWithinLevel,numberOfItemsAtLevel:e.numberOfItemsAtLevel,tabIndex:e.isFocusable?"0":null},!e.hasSingleRowSelection&&n().createElement(k,{isRightAligned:!0,type:"advanced",style:{width:"3.25rem"}},n().createElement(C,{index:j++,checked:e.isSelected})),n().createElement(H,{"data-label":"Account Name",type:"treegrid",isItemHovered:e.isItemHovered},n().createElement(u.A,{"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().createElement(W,{cellLink:!0,cellText:e.name})),n().createElement(k,{"data-label":"Employees",type:"treegrid"},n().createElement(W,{cellText:e.employees})),n().createElement(k,{"data-label":"Phone Number",type:"treegrid"},n().createElement(W,{cellText:e.phone})),n().createElement(k,{"data-label":"Account Owner",type:"treegrid"},n().createElement(W,{cellLink:!0,cellText:e.owner})),n().createElement(k,{"data-label":"Billing City",type:"treegrid"},n().createElement(W,{cellText:e.city})),n().createElement(k,{type:"treegrid",style:{width:"3.25rem"}},n().createElement(D,{rowName:e.name})))};Y.propTypes={city:c().string.isRequired,employees:c().string.isRequired,hasSingleRowSelection:c().bool,isExpanded:c().bool,isFocusable:c().bool,isSelected:c().bool,level:c().string.isRequired,name:c().string.isRequired,numberOfItemsAtLevel:c().string.isRequired,owner:c().string.isRequired,phone:c().string.isRequired,positionWithinLevel:c().string.isRequired};var P=function(e){return n().createElement(O,{isExpanded:e.isExpanded,isSelected:e.isSelected,level:e.level,numberOfItemsAtLevel:e.numberOfItemsAtLevel,positionWithinLevel:e.positionWithinLevel,tabIndex:e.isFocusable?"0":null},!e.hasSingleRowSelection&&n().createElement(k,{isRightAligned:!0,type:"advanced",style:{width:"3.25rem"}},n().createElement(C,{index:j++,checked:e.isSelected})),n().createElement(H,{"data-label":"Account Name",type:"treegrid"},n().createElement(u.A,{"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().createElement(W,{cellLink:!0,cellText:e.name})),n().createElement(k,{type:"treegrid",style:{width:"3.25rem"}},n().createElement(D,{rowName:e.name})))};P.displayName="HeadlessRow",P.propTypes={hasSingleRowSelection:c().bool,isExpanded:c().bool,isFocusable:c().bool,isSelected:c().bool,level:c().string.isRequired,name:c().string.isRequired,numberOfItemsAtLevel:c().string.isRequired,positionWithinLevel:c().string.isRequired};var X=function(e){return n().createElement(T,null,n().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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"}))};X.displayName="DefaultRows",X.propTypes={additionalItem:c().node,hasSelectedRow:c().bool,hasSingleRowSelection:c().bool,isExpanded:c().bool};var U=function(e){return n().createElement(Y,{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"})},V=function(e){return n().createElement(T,null,n().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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}))},Z=function(e){return n().createElement(T,null,n().createElement(P,{hasSingleRowSelection:e.hasSingleRowSelection,isFocusable:!0,isSelected:!!e.hasSingleRowSelection&&null,level:"1",name:"Rewis Inc",numberOfItemsAtLevel:"4",positionWithinLevel:"1"}),n().createElement(P,{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().createElement(P,{hasSingleRowSelection:e.hasSingleRowSelection,isExpanded:!1,isSelected:!!e.hasSingleRowSelection&&null,level:"1",name:"Rohde Enterprises",numberOfItemsAtLevel:"4",positionWithinLevel:"3"}),n().createElement(P,{hasSingleRowSelection:e.hasSingleRowSelection,isSelected:!!e.hasSingleRowSelection&&null,level:"1",name:"Cheese Corp",numberOfItemsAtLevel:"4",positionWithinLevel:"4"}))};Z.displayName="HeadlessRows",Z.propTypes={isExpanded:c().any,hasSelectedRow:c().bool,hasSingleRowSelection:c().bool};var G=[{id:"default",label:"Default",element:n().createElement(z,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",ariaLabel:"Example default tree grid"},n().createElement(I,{columns:q,hasMenus:!0}),n().createElement(X,{isExpanded:!1}))}],K=[{id:"expanded",label:"Expanded",element:n().createElement(z,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",ariaLabel:"Example expanded tree grid"},n().createElement(I,{columns:q,hasMenus:!0}),n().createElement(X,{isExpanded:!0,additionalItem:n().createElement(U,null)}))},{id:"selected-row",label:"Selected row",element:n().createElement(z,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",ariaLabel:"Example tree grid with selected row"},n().createElement(I,{columns:q,hasMenus:!0}),n().createElement(X,{isExpanded:!0,hasSelectedRow:!0,additionalItem:n().createElement(U,null)}))},{id:"deep-nesting",label:"Deeply nested branches",element:n().createElement(z,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",ariaLabel:"Example tree grid with deep nesting"},n().createElement(I,{columns:q,hasMenus:!0}),n().createElement(V,null))}],Q=[{id:"treegrid-headless",label:"Headless",element:n().createElement(z,{isBordered:!0,selectionType:"multiple",hasHiddenHeader:!0,ariaLabel:"Example headless tree grid"},n().createElement(I,{columns:J,hasSingleRowSelect:!0,isHidden:!0}),n().createElement(Z,{isExpanded:!1}))},{id:"treegrid-headless-selected-row",label:"Headless with selected row",element:n().createElement(z,{isBordered:!0,selectionType:"multiple",hasHiddenHeader:!0,ariaLabel:"Example headless tree grid with selected row"},n().createElement(I,{columns:J,hasSingleRowSelect:!0,isHidden:!0}),n().createElement(Z,{isExpanded:!1,hasSelectedRow:!0}))},{id:"treegrid-headless-no-borders",label:"Headless with no borders",element:n().createElement(z,{selectionType:"multiple",hasHiddenHeader:!0,ariaLabel:"Example headless border-less tree grid"},n().createElement(I,{hasSingleRowSelect:!0,columns:J,isHidden:!0}),n().createElement(Z,{isExpanded:!1}))},{id:"treegrid-headless-no-borders-selected-row",label:"Headless with no borders and a selected row",element:n().createElement(z,{selectionType:"multiple",hasHiddenHeader:!0,ariaLabel:"Example headless border-less tree grid with selected row"},n().createElement(I,{hasSingleRowSelect:!0,columns:J,isHidden:!0}),n().createElement(Z,{isExpanded:!1,hasSelectedRow:!0}))},{id:"treegrid-single-select",label:"Single select",element:n().createElement(z,{isBordered:!0,isFixedLayout:!0,isResizable:!0,ariaLabel:"Example single select tree grid"},n().createElement(I,{hasNoRowSelection:!0,columns:q,hasMenus:!0}),n().createElement(X,{isExpanded:!1,hasSingleRowSelection:!0}))},{id:"treegrid-single-select-selected-row",label:"Single select with a selected row",element:n().createElement(z,{isBordered:!0,isFixedLayout:!0,isResizable:!0,ariaLabel:"Example single select tree grid with selected row"},n().createElement(I,{hasNoRowSelection:!0,columns:q,hasMenus:!0}),n().createElement(X,{isExpanded:!1,hasSelectedRow:!0,hasSingleRowSelection:!0}))},{id:"treegrid-single-select-headless",label:"Single select headless",element:n().createElement(z,{isBordered:!0,hasHiddenHeader:!0,ariaLabel:"Example headless single select tree grid"},n().createElement(I,{hasNoRowSelection:!0,columns:J,isHidden:!0}),n().createElement(Z,{isExpanded:!1,hasSingleRowSelection:!0}))},{id:"treegrid-single-select-headless-selected",label:"Single select headless with selected row",element:n().createElement(z,{isBordered:!0,hasHiddenHeader:!0,ariaLabel:"Example single select tree grid with selected row"},n().createElement(I,{hasNoRowSelection:!0,columns:J,isHidden:!0}),n().createElement(Z,{isExpanded:!1,hasSelectedRow:!0,hasSingleRowSelection:!0}))},{id:"treegrid-single-select-headless-no-borders",label:"Single select headless with no borders",element:n().createElement(z,{hasHiddenHeader:!0,ariaLabel:"Example headless border-less single select tree grid"},n().createElement(I,{hasNoRowSelection:!0,columns:J,isHidden:!0}),n().createElement(Z,{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().createElement(z,{hasHiddenHeader:!0,ariaLabel:"Example headless border-less single select tree grid with selected row"},n().createElement(I,{hasNoRowSelection:!0,columns:J,isHidden:!0}),n().createElement(Z,{isExpanded:!1,hasSelectedRow:!0,hasSingleRowSelection:!0}))},{id:"item-disabled",label:"Item Disabled",element:n().createElement(z,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",ariaLabel:"Example tree grid with disabled item"},n().createElement(I,{columns:q,hasMenus:!0}),n().createElement(X,{isExpanded:!1}))},{id:"item-hovered",label:"Item Hovered",element:n().createElement(z,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",ariaLabel:"Example tree grid with hovered item"},n().createElement(I,{columns:q,hasMenus:!0}),n().createElement(T,null,n().createElement(Y,{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().createElement(Y,{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().createElement(Y,{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"})))}],$=i.XB.a,ee=i.XB.code,te=i.XB.h2,le=i.XB.h3,se=i.XB.h4,ne=i.XB.li,ie=i.XB.p,ae=i.XB.strong,oe=i.XB.ul,re=function(){return(0,s.createElement)(i.Ay,{},(0,s.createElement)("div",{className:"doc lead"},"A tree is visualization of a structure hierarchy. A branch can be expanded or collapsed."),(0,s.createElement)(a.A,{exampleOnly:!0,demoStyles:"overflow: hidden;"},(0,m.NO)(G)),te({id:"About-Tree-Grid"},"About Tree Grid"),ie({},"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."),ie({},"The tree grid comes with a very specific keyboard interaction model which ",ae({},"must")," be implemented for the component to be screen reader accessible."),le({id:"Accessibility"},"Accessibility"),se({id:"Markup"},"Markup"),oe({},ne({},ee({},'role="treegrid"')," should be applied to the ",ee({},"table")," element"),ne({},ee({},'aria-readonly="true"')," should be applied to the ",ee({},"table")," element"),ne({},ee({},'aria-level="n"')," where ",ee({},"n")," represents the nesting level of a particular grid row, should be applied to the ",ee({},"tr")," element"),ne({},ee({},'aria-setsize="n"')," where ",ee({},"n")," is the number of items for that specific ",ee({},"aria-level")," should be applied to the ",ee({},"tr")," element"),ne({},ee({},'aria-posinset="n"')," where ",ee({},"n")," represents the position in the ",ee({},"aria-level")," set the row is placed at, should be applied to the ",ee({},"tr")," element"),ne({},ee({},'aria-expanded="false"')," should be placed on rows that are collapsed and have child rows"),ne({},ee({},'aria-expanded="true"')," should be placed on rows that are expanded and have child rows"),ne({},ee({},'tabindex="0"')," should be placed on the first ",ee({},"tr")," in the grid on load, to make the row focusable"),ne({},"Every actionable element in the grid should have ",ee({},'tabindex="-1"')," applied to make them not focusable in the grids navigation mode")),ie({},ae({},"Multi select tree grid:")),oe({},ne({},ee({},'aria-multiselectable="true"')," should be placed on the ",ee({},"table")," element"),ne({},ee({},'aria-selected="false"')," should be set by default on all ",ee({},"tr")," elements that aren't selected"),ne({},ee({},'aria-selected="true"')," should be set only on the ",ee({},"tr")," elements that are selected")),ie({},ae({},"Single Select tree grid:")),oe({},ne({},ee({},'aria-selected="true"')," should be applied to the ",ee({},"tr")," that is selected in the tree grid")),se({id:"Keyboard-Interactions"},"Keyboard Interactions"),oe({},ne({},"Overall keyboard interaction should follow the same keyboard modal as the ",$({href:"/components/data-tables"},"Advanced and Inline Edit Data Table")," with some additions",oe({},ne({},"Navigation mode is the default mode. The grid only has a single focusable element at any time and it is either the ",ee({},"tr")," or the ",ee({},"td")),ne({},"Actionable mode is enabled when the user presses the ",ee({},"Enter")," key, where actionable elements become focusable in the cell"),ne({},"Actionable mode is exited when the user presses the ",ee({},"Escape")," key, and the user is placed back into Navigation Mode on the last cell they were in"))),ne({},"User focus is initially placed on the first row in the tree grid"),ne({},ee({},"Down")," arrow key moves the user down one row and moves ",ee({},'tabindex="0"')," with it"),ne({},ee({},"Up")," arrow key moves the user up one row and moves ",ee({},'tabindex="0"')," with it"),ne({},ee({},"Space")," key when focused on a row should select that row by setting ",ee({},'aria-selected="true')," on the ",ee({},"tr")," element"),ne({},ee({},"Right")," arrow key on a collapsed row, will expand it and update ",ee({},"aria-expanded")),ne({},ee({},"Right")," arrow key on an expanded or end row will move the user to the first cell in the row and move ",ee({},'tabindex="0"')," with it"),ne({},ee({},"Right")," arrow key on a cell will move the user to the next cell in the row and move ",ee({},'tabindex="0"')," with it"),ne({},ee({},"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"),ne({},ee({},"Left")," arrow key on an expanded row will collapse it and update ",ee({},"aria-expanded")),ne({},ee({},"Left")," arrow key on a cell will move the user to the previous cell in the row and moves ",ee({},'tabindex="0"')," with it"),ne({},ee({},"Left")," arrow key on the first cell of a row will move the user back to the row and moves ",ee({},'tabindex="0"')," with it")),te({id:"Base"},"Base"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(G)),le({id:"States"},"States"),se({id:"Expanded"},"Expanded"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(K,"expanded")),se({id:"Selected-row"},"Selected row"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(K,"selected-row")),se({id:"Deeply-nested-branches"},"Deeply nested branches"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(K,"deep-nesting")),te({id:"Examples"},"Examples"),le({id:"Headless"},"Headless"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(Q,"treegrid-headless")),le({id:"Headless-with-selected-row"},"Headless with selected row"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(Q,"treegrid-headless-selected-row")),le({id:"Headless-with-no-borders"},"Headless with no borders"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(Q,"treegrid-headless-no-borders")),le({id:"Headless-with-no-borders-and-a-selected-row"},"Headless with no borders and a selected row"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(Q,"treegrid-headless-no-borders-selected-row")),le({id:"Single-select"},"Single select"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(Q,"treegrid-single-select")),le({id:"Single-select-with-a-selected-row"},"Single select with a selected row"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(Q,"treegrid-single-select-selected-row")),le({id:"Single-select-headless"},"Single select headless"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(Q,"treegrid-single-select-headless")),le({id:"Single-select-headless-with-selected-row"},"Single select headless with selected row"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(Q,"treegrid-single-select-headless-selected")),le({id:"Single-select-headless-with-no-borders"},"Single select headless with no borders"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(Q,"treegrid-single-select-headless-no-borders")),le({id:"Single-select-headless-with-no-borders-and-a-selected-row"},"Single select headless with no borders and a selected row"),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(Q,"treegrid-single-select-headless-no-borders-with-selected")),te({id:"Modifiers"},"Modifiers"),le({id:"Interaction"},"Interaction"),se({id:"Item-Disabled"},"Item Disabled"),ie({},"When a branch doesn't have children, apply ",ee({},"slds-is-disabled")," to the corresponding ",ee({},"slds-button_icon")," element."),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(Q,"item-disabled")),se({id:"Item-Hovered"},"Item Hovered"),ie({},"When a tree item is hovered, apply ",ee({},"slds-is-hovered")," to ",ee({},"slds-tree__item")," element`."),(0,s.createElement)(a.A,{demoStyles:"overflow: hidden;"},(0,m.NO)(Q,"item-hovered")))},de=function(){return(0,i.Qr)(re())}}},n={};function i(e){var t=n[e];if(void 0!==t)return t.exports;var l=n[e]={id:e,exports:{}};return s[e](l,l.exports,i),l.exports}i.m=s,i.amdO={},e=[],i.O=function(t,l,s,n){if(!l){var a=1/0;for(c=0;c<e.length;c++){l=e[c][0],s=e[c][1],n=e[c][2];for(var o=!0,r=0;r<l.length;r++)(!1&n\|\|a>=n)&&Object.keys(i.O).every(function(e){return i.O[e](l[r])})?l.splice(r--,1):(o=!1,n<a&&(a=n));if(o){e.splice(c--,1);var d=s();void 0!==d&&(t=d)}}return t}n=n\|\|0;for(var c=e.length;c>0&&e[c-1][2]>n;c--)e[c]=e[c-1];e[c]=[l,s,n]},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,{a:t}),t},l=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},i.t=function(e,s){if(1&s&&(e=this(e)),8&s)return e;if("object"==typeof e&&e){if(4&s&&e.__esModule)return e;if(16&s&&"function"==typeof e.then)return e}var n=Object.create(null);i.r(n);var a={};t=t\|\|[null,l({}),l([]),l(l)];for(var o=2&s&&e;("object"==typeof o\|\|"function"==typeof o)&&!~t.indexOf(o);o=l(o))Object.getOwnPropertyNames(o).forEach(function(t){a[t]=function(){return e[t]}});return a.default=function(){return e},i.d(n,a),n},i.d=function(e,t){for(var l in t)i.o(t,l)&&!i.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},i.e=function(){return Promise.resolve()},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=1844,function(){var e={1844:0};i.O.j=function(t){return 0===e[t]};var t=function(t,l){var s,n,a=l[0],o=l[1],r=l[2],d=0;if(a.some(function(t){return 0!==e[t]})){for(s in o)i.o(o,s)&&(i.m[s]=o[s]);if(r)var c=r(i)}for(t&&t(l);d<a.length;d++)n=a[d],i.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return i.O(c)},l=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),i.nc=void 0;var a=i.O(void 0,[3540],function(){return i(6095)});a=i.O(a),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/tree-grid/docs.mdx.js"]=a}();

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

	@@ -1 +1 @@
1	- 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},5732:function(e,t,a){a.r(t),a.d(t,{getContents:function(){return Q},getElement:function(){return J}});var n=a(1594),r=a.n(n),l=a(5671),i=a(6547),c=(a(3212),a(5619),a(8342)),o=a(7412),m=a.n(o),s=a(942),d=a.n(s),u=a(6955),h=a(806);function b(e){return b="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},b(e)}function p(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,E(n.key),n)}}function E(e){var t=function(e){if("object"!=b(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var a=t.call(e,"string");if("object"!=b(a))return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==b(t)?t:t+""}function L(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(L=function(){return!!e})()}function f(e){return f=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__\|\|Object.getPrototypeOf(e)},f(e)}function v(e,t){return v=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},v(e,t)}var g=function(e){var t=function(t){return e.termToMark?r().createElement("span",{dangerouslySetInnerHTML:{__html:(a=t,n=e.termToMark,a.replace(new RegExp(n,"gi"),function(e){return"<mark>".concat(e,"</mark>")}))}}):r().createElement(r().Fragment,null,t);var a,n};return r().createElement("div",{className:d()("slds-tree__item",e.className)},r().createElement(u.A,{"aria-hidden":"true",assistiveText:"Expand ".concat(e.itemLabel),className:d()("slds-m-right_x-small",(!e.isBranch\|\|e.isDisabled)&&"slds-hidden"),iconClassName:"slds-button__icon_small",symbol:"chevronright",tabIndex:"-1",title:"Expand ".concat(e.itemLabel)}),r().createElement("span",{className:"slds-has-flexi-truncate"},r().createElement("span",{className:"slds-tree__item-label slds-truncate",title:e.itemLabel},t(e.itemLabel)),e.metaTextLabel&&r().createElement("span",{className:"slds-tree__item-meta slds-truncate",title:e.metaTextLabel},r().createElement("span",{className:"slds-assistive-text"},":"),t(e.metaTextLabel))),e.children)};g.displayName="TreeItem",g.propTypes={children:m().node,isBranch:m().bool,isDisabled:m().bool,itemLabel:m().string,metaTextLabel:m().string,termToMark:m().string},g.defaultProps={itemLabel:"Tree Item"};var T=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t,a){return t=f(t),function(e,t){if(t&&("object"==b(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\|\|[],f(e).constructor):t.apply(e,a))}(this,t,arguments)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&v(e,t)}(t,e),a=t,(n=[{key:"getBranchAriaLabel",value:function(e,t){return t?e+": "+t:e}},{key:"render",value:function(){var e=this.props,t=e.ariaLevel,a=e.tabIndex,n=e.isBranch,l=e.isExpanded,i=e.isSelected,c=e.isDisabled,o=e.itemLabel,m=e.metaTextLabel;return r().createElement("li",{"aria-expanded":n?l\|\|!1:null,"aria-label":n?this.getBranchAriaLabel(o,m):null,"aria-level":t,"aria-selected":i,"aria-disabled":c,role:"treeitem",tabIndex:a},this.props.children)}}])&&p(a.prototype,n),Object.defineProperty(a,"prototype",{writable:!1}),a;var a,n}(n.Component);T.displayName="TreeListItem",T.propTypes={ariaLevel:m().number.isRequired,children:m().node.isRequired,isBranch:(0,h.VY)("itemLabel",m().bool),isExpanded:(0,h.VY)("isBranch",m().bool),isSelected:m().bool,itemLabel:m().string,metaTextLabel:(0,h.VY)("itemLabel",m().string),tabIndex:m().number};var y=function(e){return r().createElement("h4",{className:"slds-tree__group-header",id:e.id},e.children)};y.displayName="TreeHeader",y.propTypes={children:m().node,id:m().string.isRequired};var x=function(e){return r().createElement("ul",{"aria-labelledby":e.headerId,className:"slds-tree",id:e.id,role:"tree"},e.children)};x.displayName="TreeList",x.propTypes={children:m().node,headerId:m().string,id:m().string};var B=function(e){return r().createElement("ul",{role:"group"},e.children)};B.displayName="TreeGroup",B.propTypes={children:m().node};var w=function(e){return r().createElement("div",{className:"slds-tree_container"},e.children)};w.displayName="TreeContainer",w.propTypes={children:m().node};var I=function(){return r().createElement(r().Fragment,null,r().createElement(T,{ariaLevel:1,tabIndex:0},r().createElement(g,null)),r().createElement(T,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)))),r().createElement(T,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)))),r().createElement(T,{ariaLevel:1,itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"},r().createElement(g,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};I.displayName="DefaultTree";var _=function(){return r().createElement(r().Fragment,null,r().createElement(T,{ariaLevel:1,tabIndex:0},r().createElement(g,null)),r().createElement(T,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)))),r().createElement(T,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)))),r().createElement(T,{ariaLevel:1,itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"},r().createElement(g,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};_.displayName="ExpandedTree";var N=function(){return r().createElement(r().Fragment,null,r().createElement(T,{ariaLevel:1},r().createElement(g,null)),r().createElement(T,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2,isSelected:!0,tabIndex:0},r().createElement(g,null)))),r().createElement(T,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)))),r().createElement(T,{ariaLevel:1},r().createElement(g,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};N.displayName="SelectedTree";var O=function(){return r().createElement(r().Fragment,null,r().createElement(T,{ariaLevel:1,tabIndex:0},r().createElement(g,null)),r().createElement(T,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)),r().createElement(T,{ariaLevel:2,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:3},r().createElement(g,null)),r().createElement(T,{ariaLevel:3},r().createElement(g,null)),r().createElement(T,{ariaLevel:3,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:4},r().createElement(g,null)))),r().createElement(T,{ariaLevel:3,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:4},r().createElement(g,null)),r().createElement(T,{ariaLevel:4},r().createElement(g,{itemLabel:"Another Tree Item with Really Really Long Text That Should Truncate"})),r().createElement(T,{ariaLevel:4},r().createElement(g,null)),r().createElement(T,{ariaLevel:4,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:5},r().createElement(g,null)),r().createElement(T,{ariaLevel:5},r().createElement(g,null)),r().createElement(T,{ariaLevel:5},r().createElement(g,null)))),r().createElement(T,{ariaLevel:4},r().createElement(g,null)))),r().createElement(T,{ariaLevel:3},r().createElement(g,null)))))),r().createElement(T,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)))),r().createElement(T,{ariaLevel:1},r().createElement(g,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};O.displayName="DeeplyNestedTree";var S=function(){return r().createElement(r().Fragment,null,r().createElement(T,{ariaLevel:1,tabIndex:0},r().createElement(g,null)),r().createElement(T,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2,itemLabel:"Tree Item",metaTextLabel:"Tree Item Metatext with a Really Really Long Name That Should Truncate"},r().createElement(g,{itemLabel:"Tree Item",metaTextLabel:"Tree Item Metatext with a Really Really Long Name That Should Truncate"})))),r().createElement(T,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch",metaTextLabel:"Tree Branch Metatext"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch",metaTextLabel:"Tree Branch Metatext"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)))),r().createElement(T,{ariaLevel:1},r().createElement(g,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};S.displayName="MetaTextTree";var k=function(){return r().createElement(r().Fragment,null,r().createElement(T,{ariaLevel:1,tabIndex:0},r().createElement(g,{className:"slds-is-hovered"})),r().createElement(T,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)))),r().createElement(T,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)))),r().createElement(T,{ariaLevel:1,itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"},r().createElement(g,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};k.displayName="TreeWithItemHovered";var R=function(){return r().createElement(r().Fragment,null,r().createElement(T,{ariaLevel:1,isDisabled:!0},r().createElement(g,null)),r().createElement(T,{ariaLevel:1,isBranch:!0,isDisabled:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,isDisabled:!0,itemLabel:"Tree Branch",metaTextLabel:"Tree Branch Metatext"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)))),r().createElement(T,{ariaLevel:1,tabIndex:0,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch",metaTextLabel:"Tree Branch Metatext"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)))),r().createElement(T,{ariaLevel:1,itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"},r().createElement(g,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};R.displayName="TreeWithItemDisabled";var A=a(2711),M=a(5526),j=a(538),D=[{id:"default",label:"Default",element:r().createElement(w,null,r().createElement(y,{id:"treeheading"},"Tree Group Header"),r().createElement(x,{headerId:"treeheading"},r().createElement(I,null)))}],F=[{id:"expanded",label:"Expanded",element:r().createElement(w,null,r().createElement(y,{id:"treeheading"},"Tree Group Header"),r().createElement(x,{headerId:"treeheading"},r().createElement(_,null)))},{id:"selected",label:"Item Selected",element:r().createElement(w,null,r().createElement(y,{id:"treeheading"},"Tree Group Header"),r().createElement(x,{headerId:"treeheading"},r().createElement(N,null)))},{id:"deep-nesting",label:"Deeply nested branches",element:r().createElement(w,null,r().createElement(y,{id:"treeheading"},"Tree Group Header"),r().createElement(x,{headerId:"treeheading"},r().createElement(O,null)))},{id:"metatext",label:"Metatext",element:r().createElement(w,null,r().createElement(y,{id:"treeheading"},"Tree Group Header"),r().createElement(x,{headerId:"treeheading"},r().createElement(S,null)))},{id:"item-hovered",label:"Item Hovered",element:r().createElement(w,null,r().createElement(y,{id:"treeheading"},"Tree Group Header"),r().createElement(x,{headerId:"treeheading"},r().createElement(k,null)))},{id:"item-disabled",label:"Item Disabled",element:r().createElement(w,null,r().createElement(y,{id:"treeheading"},"Tree Group Header"),r().createElement(x,{headerId:"treeheading"},r().createElement(R,null)))}],P=[{id:"filterable-tree",label:"Fliterable Tree",element:r().createElement("div",null,r().createElement("div",{className:"slds-m-bottom_small"},r().createElement(A.ZS,{hasHiddenLabel:!0,hasLeftIcon:!0,inputId:"filter-id",labelContent:"Filter navigation items"},r().createElement(j.eX,{className:"slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default",sprite:"utility",symbol:"search"}),r().createElement(M.A,{"aria-controls":"tree-id",id:"filter-id",placeholder:"Quick Find",type:"search"}))),r().createElement(w,null,r().createElement(y,{id:"treeheading"},"Components"),r().createElement(x,{headerId:"treeheading",id:"tree-id"},r().createElement(T,{ariaLevel:1,isBranch:!0,itemLabel:"lightning",tabIndex:0},r().createElement(g,{isBranch:!0,itemLabel:"lightning"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2,itemLabel:"lightning-button"},r().createElement(g,{itemLabel:"lightning-button"})),r().createElement(T,{ariaLevel:2,itemLabel:"lightning-checkbox-button"},r().createElement(g,{itemLabel:"lightning-checkbox-button"})),r().createElement(T,{ariaLevel:2,itemLabel:"lightning-radio-button"},r().createElement(g,{itemLabel:"lightning-radio-button"})),r().createElement(T,{ariaLevel:2,itemLabel:"lightning-toggle",metaTextLabel:"vaiant a checkbox button"},r().createElement(g,{itemLabel:"lightning-toggle",metaTextLabel:"variant a checkbox button"})))),r().createElement(T,{ariaLevel:1,isBranch:!0,itemLabel:"ui"},r().createElement(g,{isBranch:!0,itemLabel:"ui"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2,itemLabel:"ui:button"},r().createElement(g,{itemLabel:"ui:button"})),r().createElement(T,{ariaLevel:2,itemLabel:"ui:checkboxButton"},r().createElement(g,{itemLabel:"ui:checkboxButton"})),r().createElement(T,{ariaLevel:2,itemLabel:"ui:radioButton"},r().createElement(g,{itemLabel:"ui:radioButton"})))),r().createElement(T,{ariaLevel:1,isBranch:!0,itemLabel:"lightningcommunities",metaTextLabel:"Community components"},r().createElement(g,{isBranch:!0,itemLabel:"lightningcommunities",metaTextLabel:"Community components"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)))))))},{id:"filterabled-tree",label:"Flitered Tree",element:r().createElement("div",null,r().createElement("div",{className:"slds-m-bottom_small"},r().createElement(A.ZS,{hasHiddenLabel:!0,hasLeftIcon:!0,inputId:"filter-id",labelContent:"Filter navigation items"},r().createElement(j.eX,{className:"slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default",sprite:"utility",symbol:"search"}),r().createElement(M.A,{"aria-controls":"tree-id",defaultValue:"butto",id:"filter-id",placeholder:"Quick Find",type:"search"}))),r().createElement(w,null,r().createElement(y,{id:"treeheading"},"Components"),r().createElement(x,{headerId:"treeheading",id:"tree-id"},r().createElement(T,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"lightning",tabIndex:0},r().createElement(g,{isBranch:!0,itemLabel:"lightning"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2,itemLabel:"lightning-button"},r().createElement(g,{itemLabel:"lightning-button",termToMark:"butto"})),r().createElement(T,{ariaLevel:2,itemLabel:"lightning-checkbox-button"},r().createElement(g,{itemLabel:"lightning-checkbox-button",termToMark:"butto"})),r().createElement(T,{ariaLevel:2,itemLabel:"lightning-radio-button"},r().createElement(g,{itemLabel:"lightning-radio-button",termToMark:"butto"})),r().createElement(T,{ariaLevel:2,itemLabel:"lightning-toggle",metaTextLabel:"variant a checkbox button"},r().createElement(g,{itemLabel:"lightning-toggle",metaTextLabel:"variant a checkbox button",termToMark:"butto"})))),r().createElement(T,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"ui"},r().createElement(g,{isBranch:!0,itemLabel:"ui"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2,itemLabel:"ui:button"},r().createElement(g,{itemLabel:"ui:button",termToMark:"butto"})),r().createElement(T,{ariaLevel:2,itemLabel:"ui:checkboxButton"},r().createElement(g,{itemLabel:"ui:checkboxButton",termToMark:"butto"})),r().createElement(T,{ariaLevel:2,itemLabel:"ui:radioButton"},r().createElement(g,{itemLabel:"ui:radioButton",termToMark:"butto"})))))))}],H=l.XB.code,C=l.XB.h2,X=l.XB.h3,G=l.XB.h4,W=l.XB.li,q=l.XB.p,Y=l.XB.strong,V=l.XB.ul,J=function(){return(0,n.createElement)(l.Ay,{},(0,n.createElement)("div",{className:"doc lead"},"A tree is visualization of a structure hierarchy. A branch can be expanded or collapsed."),(0,n.createElement)(i.A,{exampleOnly:!0},(0,h.NO)(F,"selected")),C({id:"About-Trees"},"About Trees"),q({},"A tree is composed of two core elements ",H({},".slds-tree")," and ",H({},".slds-tree__item"),". The tree wrapper, the outermost parent ",H({},"ul"),", will receive the class ",H({},".slds-tree"),". This class will be used for scoping a tree, which allows for particular styling based on states in which the tree may enter."),q({},"A tree will need helper classes added and removed to help structure the layout. Each child node list item needs an ",H({},"aria-level")," attribute with its value being the number of levels deep it is nested to indicate the distinct grouping is nested within."),q({},"Whenever the tree has a nested group, the nested ",H({},"ul")," element should receive the ARIA role ",H({},"group"),". The parent ",H({},'li[role="treeitem"]')," requires the ",H({},"aria-expanded")," attribute to be applied. Toggling ",H({},"aria-expanded")," to ",H({},"true")," or ",H({},"false")," will show or hide the child ",H({},"group"),". The parent ",H({},'li[role="treeitem"]')," also requires ",H({},"aria-label")," to be applied and set to the tree items text value, this ensures child groups are announced to screen readers as you interact with that branch."),q({},"Whenever a ",H({},'role="treeitem"')," node is selected, ",H({},'aria-selected="true"')," needs to be applied to display the selected styles."),q({},"In our example, we are using a chevron icon on tree branches to help indicate to the user what action clicking the tree branch will perform, whether opening or closing it. The effect of rotating the icon 90° to indicate open/closed status is achieved by applying the ARIA attribute ",H({},"aria-expanded")," to the ",H({},"treeitem"),". ",H({},'aria-hidden="true"')," and ",H({},'tabindex="-1"')," must be placed on the toggle button."),q({},"Tree items can only contain text values, no actionable elements, apart from our toggle button, can be placed inside a Tree item."),q({},"Trees can only contain a single focusable tree item and ",H({},'tabindex="0"')," must be placed on the ",H({},'li[role="treeitem]')," that takes current focus. Every other actionable and non-actionable element must be made unfocused by adding ",H({},'tabindex="-1"')," or removing ",H({},"tabindex"),", respectively."),q({},"When implementing collapsed rows, we suggest showing the content DOM nodes within each collapsed row only once the row is expanded for performance reasons. You can additionally toggle the hidden row with ",H({},"slds-show")," and ",H({},"slds-hide")," if you intend to keep all of the content in the DOM."),q({},"You can add metatext (see: metatext state) to any tree item, which adds a smaller, second line of text below tree node labels to provide supplemental information (to provide users with added context, aid with identification/disambiguation). To add metatext, include an additional ",H({},"span")," within the treeitem with the class ",H({},"slds-tree__item-meta"),". We've added an additional parent span around the label/title and metatext to ensure the spacing works properly when metatext is included. If adding metatext to a tree item with child nodes (i.e. a branch), be sure to update the ",H({},"aria-label")," to include the metatext. For example: ",H({},'aria-label="Tree Branch Label: Tree Branch Metatext"')),X({id:"Accessibility"},"Accessibility"),G({id:"Markup"},"Markup"),V({},W({},H({},'role="tree"')," is placed on the ",H({},"ul")),W({},H({},'role="tree"')," element also has ",H({},"aria-labelledby")," applied which points to the trees heading element"),W({},H({},'role="treeitem"')," is placed on the tree ",H({},"li")," elements"),W({},H({},"aria-level")," is applied to ",H({},"treeitem")," elements to indicate their nesting depth"),W({},H({},"aria-expanded")," is applied to ",H({},"treeitem")," elements that have child tree nodes. It is set to ",H({},"true")," or ",H({},"false")),W({},H({},"aria-label")," is applied to ",H({},"treeitem")," elements that have child tree nodes. Be sure to add any metatext to the label, if applicable"),W({},H({},'aria-selected="true"')," is applied to ",H({},"treeitem")," elements that are selected"),W({},H({},'aria-disabled="true"')," is applied to ",H({},"treeitem")," elements that are disabled. They do not receive a ",H({},"tabindex"),"."),W({},H({},'tabindex="0"')," is applied to the ",H({},"treeitem")," that is in focus"),W({},H({},'role="group"')," is applied to child tree node containers, ",H({},"ul"))),G({id:"Interactions"},"Interactions"),V({},W({},"Only a single action per tree item"),W({},"Only 1 focused item per Tree"),W({},"Actionable elements in a tree item are mouse only and should not be focusable, they should be presentational and should be hidden from screen readers and keyboard users"),W({},"Focus is placed on the entire ",H({},'li[role="treeitem"]'),". If that item has child items, focus must include those as well.")),G({id:"Keyboard-Navigation"},"Keyboard Navigation"),V({},W({},"Clicking on a tree item creates a selection"),W({},H({},"Up")," and ",H({},"Down")," arrow keys move ",H({},":focus")," ",Y({},"and")," ",H({},"aria-selected"),". Previous selections are cleared"),W({},H({},"Right")," arrow key to expand collapsed node."),W({},H({},"Left")," arrow key to collapse expanded node."),W({},H({},"Left")," arrow key on an end child node, collapses the group and moves ",H({},":focus")," and ",H({},"aria-selected")," to the parent ",H({},"treeitem")),W({},H({},"Enter")," performs the default action on an end tree item (if there is one)."),W({},H({},"Ctrl")," + ",H({},"Up")," and ",H({},"Ctrl")," + ",H({},"Down")," moves focus. Current selection is maintained"),W({},H({},"Ctrl")," + ",H({},"Space")," will add or remove the currently focused tree item to the selection")),X({id:"Filtering"},"Filtering"),q({},"When filtering a tree you should couple the tree with a search input. The search input will control the contents of the tree and as such should the attribute ",H({},"aria-controls")," added to it. The value of the ",H({},"aria-controls")," attribute should be the ID of the tree it controls. The search input should also be of type ",H({},"search"),"."),q({},"Upon typing in the input the tree should start filtering immediately, expanding all nodes that have matching tree items to display, and highlighting the search term in each of the matching items. The highlight is provided by wrapping the term in ",H({},"<mark />")," elements."),C({id:"Base"},"Base"),(0,n.createElement)(i.A,null,(0,h.NO)(D)),X({id:"States"},"States"),G({id:"Expanded-Item"},"Expanded Item"),(0,n.createElement)(i.A,null,(0,h.NO)(F,"expanded")),G({id:"Item-Selected"},"Item Selected"),(0,n.createElement)(i.A,null,(0,h.NO)(F,"selected")),G({id:"Deeply-Nested-Branches"},"Deeply Nested Branches"),(0,n.createElement)(i.A,null,(0,h.NO)(F,"deep-nesting")),G({id:"Item-with-Metatext"},"Item with Metatext"),(0,n.createElement)(i.A,null,(0,h.NO)(F,"metatext")),G({id:"Item-Hovered"},"Item Hovered"),(0,n.createElement)(i.A,null,(0,h.NO)(F,"item-hovered")),G({id:"Items-Disabled"},"Items Disabled"),(0,n.createElement)(i.A,null,(0,h.NO)(F,"item-disabled")),C({id:"Examples"},"Examples"),X({id:"Filterable-Tree"},"Filterable Tree"),(0,n.createElement)(i.A,null,(0,h.NO)(P,"filterable-tree")),X({id:"Filtered-Tree"},"Filtered Tree"),(0,n.createElement)(i.A,null,(0,h.NO)(P,"filterabled-tree")),C({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,n.createElement)(c.A,{name:"trees",type:"component"}))},Q=function(){return(0,l.Qr)(J())}}},r={};function l(e){var t=r[e];if(void 0!==t)return t.exports;var a=r[e]={id:e,exports:{}};return n[e](a,a.exports,l),a.exports}l.m=n,l.amdO={},e=[],l.O=function(t,a,n,r){if(!a){var i=1/0;for(s=0;s<e.length;s++){a=e[s][0],n=e[s][1],r=e[s][2];for(var c=!0,o=0;o<a.length;o++)(!1&r\|\|i>=r)&&Object.keys(l.O).every(function(e){return l.O[e](a[o])})?a.splice(o--,1):(c=!1,r<i&&(i=r));if(c){e.splice(s--,1);var m=n();void 0!==m&&(t=m)}}return t}r=r\|\|0;for(var s=e.length;s>0&&e[s-1][2]>r;s--)e[s]=e[s-1];e[s]=[a,n,r]},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,{a:t}),t},a=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},l.t=function(e,n){if(1&n&&(e=this(e)),8&n)return e;if("object"==typeof e&&e){if(4&n&&e.__esModule)return e;if(16&n&&"function"==typeof e.then)return e}var r=Object.create(null);l.r(r);var i={};t=t\|\|[null,a({}),a([]),a(a)];for(var c=2&n&&e;("object"==typeof c\|\|"function"==typeof c)&&!~t.indexOf(c);c=a(c))Object.getOwnPropertyNames(c).forEach(function(t){i[t]=function(){return e[t]}});return i.default=function(){return e},l.d(r,i),r},l.d=function(e,t){for(var a in t)l.o(t,a)&&!l.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},l.e=function(){return Promise.resolve()},l.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.j=234,function(){var e={234:0};l.O.j=function(t){return 0===e[t]};var t=function(t,a){var n,r,i=a[0],c=a[1],o=a[2],m=0;if(i.some(function(t){return 0!==e[t]})){for(n in c)l.o(c,n)&&(l.m[n]=c[n]);if(o)var s=o(l)}for(t&&t(a);m<i.length;m++)r=i[m],l.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return l.O(s)},a=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];a.forEach(t.bind(null,0)),a.push=t.bind(null,a.push.bind(a))}(),l.nc=void 0;var i=l.O(void 0,[3540],function(){return l(5732)});i=l.O(i),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/trees/docs.mdx.js"]=i}();
1	+ 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},5732:function(e,t,a){a.r(t),a.d(t,{getContents:function(){return Q},getElement:function(){return J}});var n=a(1594),r=a.n(n),l=a(5671),i=a(6547),c=(a(3212),a(5619),a(8342)),o=a(4187),m=a.n(o),s=a(942),d=a.n(s),u=a(6955),h=a(806);function b(e){return b="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},b(e)}function p(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,E(n.key),n)}}function E(e){var t=function(e){if("object"!=b(e)\|\|!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var a=t.call(e,"string");if("object"!=b(a))return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==b(t)?t:t+""}function L(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(L=function(){return!!e})()}function f(e){return f=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__\|\|Object.getPrototypeOf(e)},f(e)}function v(e,t){return v=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},v(e,t)}var g=function(e){var t=function(t){return e.termToMark?r().createElement("span",{dangerouslySetInnerHTML:{__html:(a=t,n=e.termToMark,a.replace(new RegExp(n,"gi"),function(e){return"<mark>".concat(e,"</mark>")}))}}):r().createElement(r().Fragment,null,t);var a,n};return r().createElement("div",{className:d()("slds-tree__item",e.className)},r().createElement(u.A,{"aria-hidden":"true",assistiveText:"Expand ".concat(e.itemLabel),className:d()("slds-m-right_x-small",(!e.isBranch\|\|e.isDisabled)&&"slds-hidden"),iconClassName:"slds-button__icon_small",symbol:"chevronright",tabIndex:"-1",title:"Expand ".concat(e.itemLabel)}),r().createElement("span",{className:"slds-has-flexi-truncate"},r().createElement("span",{className:"slds-tree__item-label slds-truncate",title:e.itemLabel},t(e.itemLabel)),e.metaTextLabel&&r().createElement("span",{className:"slds-tree__item-meta slds-truncate",title:e.metaTextLabel},r().createElement("span",{className:"slds-assistive-text"},":"),t(e.metaTextLabel))),e.children)};g.displayName="TreeItem",g.propTypes={children:m().node,isBranch:m().bool,isDisabled:m().bool,itemLabel:m().string,metaTextLabel:m().string,termToMark:m().string},g.defaultProps={itemLabel:"Tree Item"};var T=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t,a){return t=f(t),function(e,t){if(t&&("object"==b(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\|\|[],f(e).constructor):t.apply(e,a))}(this,t,arguments)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&v(e,t)}(t,e),a=t,(n=[{key:"getBranchAriaLabel",value:function(e,t){return t?e+": "+t:e}},{key:"render",value:function(){var e=this.props,t=e.ariaLevel,a=e.tabIndex,n=e.isBranch,l=e.isExpanded,i=e.isSelected,c=e.isDisabled,o=e.itemLabel,m=e.metaTextLabel;return r().createElement("li",{"aria-expanded":n?l\|\|!1:null,"aria-label":n?this.getBranchAriaLabel(o,m):null,"aria-level":t,"aria-selected":i,"aria-disabled":c,role:"treeitem",tabIndex:a},this.props.children)}}])&&p(a.prototype,n),Object.defineProperty(a,"prototype",{writable:!1}),a;var a,n}(n.Component);T.displayName="TreeListItem",T.propTypes={ariaLevel:m().number.isRequired,children:m().node.isRequired,isBranch:(0,h.VY)("itemLabel",m().bool),isExpanded:(0,h.VY)("isBranch",m().bool),isSelected:m().bool,itemLabel:m().string,metaTextLabel:(0,h.VY)("itemLabel",m().string),tabIndex:m().number};var y=function(e){return r().createElement("h4",{className:"slds-tree__group-header",id:e.id},e.children)};y.displayName="TreeHeader",y.propTypes={children:m().node,id:m().string.isRequired};var x=function(e){return r().createElement("ul",{"aria-labelledby":e.headerId,className:"slds-tree",id:e.id,role:"tree"},e.children)};x.displayName="TreeList",x.propTypes={children:m().node,headerId:m().string,id:m().string};var B=function(e){return r().createElement("ul",{role:"group"},e.children)};B.displayName="TreeGroup",B.propTypes={children:m().node};var w=function(e){return r().createElement("div",{className:"slds-tree_container"},e.children)};w.displayName="TreeContainer",w.propTypes={children:m().node};var I=function(){return r().createElement(r().Fragment,null,r().createElement(T,{ariaLevel:1,tabIndex:0},r().createElement(g,null)),r().createElement(T,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)))),r().createElement(T,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)))),r().createElement(T,{ariaLevel:1,itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"},r().createElement(g,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};I.displayName="DefaultTree";var _=function(){return r().createElement(r().Fragment,null,r().createElement(T,{ariaLevel:1,tabIndex:0},r().createElement(g,null)),r().createElement(T,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)))),r().createElement(T,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)))),r().createElement(T,{ariaLevel:1,itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"},r().createElement(g,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};_.displayName="ExpandedTree";var N=function(){return r().createElement(r().Fragment,null,r().createElement(T,{ariaLevel:1},r().createElement(g,null)),r().createElement(T,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2,isSelected:!0,tabIndex:0},r().createElement(g,null)))),r().createElement(T,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)))),r().createElement(T,{ariaLevel:1},r().createElement(g,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};N.displayName="SelectedTree";var O=function(){return r().createElement(r().Fragment,null,r().createElement(T,{ariaLevel:1,tabIndex:0},r().createElement(g,null)),r().createElement(T,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)),r().createElement(T,{ariaLevel:2,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:3},r().createElement(g,null)),r().createElement(T,{ariaLevel:3},r().createElement(g,null)),r().createElement(T,{ariaLevel:3,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:4},r().createElement(g,null)))),r().createElement(T,{ariaLevel:3,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:4},r().createElement(g,null)),r().createElement(T,{ariaLevel:4},r().createElement(g,{itemLabel:"Another Tree Item with Really Really Long Text That Should Truncate"})),r().createElement(T,{ariaLevel:4},r().createElement(g,null)),r().createElement(T,{ariaLevel:4,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:5},r().createElement(g,null)),r().createElement(T,{ariaLevel:5},r().createElement(g,null)),r().createElement(T,{ariaLevel:5},r().createElement(g,null)))),r().createElement(T,{ariaLevel:4},r().createElement(g,null)))),r().createElement(T,{ariaLevel:3},r().createElement(g,null)))))),r().createElement(T,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)))),r().createElement(T,{ariaLevel:1},r().createElement(g,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};O.displayName="DeeplyNestedTree";var S=function(){return r().createElement(r().Fragment,null,r().createElement(T,{ariaLevel:1,tabIndex:0},r().createElement(g,null)),r().createElement(T,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2,itemLabel:"Tree Item",metaTextLabel:"Tree Item Metatext with a Really Really Long Name That Should Truncate"},r().createElement(g,{itemLabel:"Tree Item",metaTextLabel:"Tree Item Metatext with a Really Really Long Name That Should Truncate"})))),r().createElement(T,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch",metaTextLabel:"Tree Branch Metatext"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch",metaTextLabel:"Tree Branch Metatext"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)))),r().createElement(T,{ariaLevel:1},r().createElement(g,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};S.displayName="MetaTextTree";var k=function(){return r().createElement(r().Fragment,null,r().createElement(T,{ariaLevel:1,tabIndex:0},r().createElement(g,{className:"slds-is-hovered"})),r().createElement(T,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)))),r().createElement(T,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)))),r().createElement(T,{ariaLevel:1,itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"},r().createElement(g,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};k.displayName="TreeWithItemHovered";var R=function(){return r().createElement(r().Fragment,null,r().createElement(T,{ariaLevel:1,isDisabled:!0},r().createElement(g,null)),r().createElement(T,{ariaLevel:1,isBranch:!0,isDisabled:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,isDisabled:!0,itemLabel:"Tree Branch",metaTextLabel:"Tree Branch Metatext"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)))),r().createElement(T,{ariaLevel:1,tabIndex:0,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(g,{isBranch:!0,itemLabel:"Tree Branch",metaTextLabel:"Tree Branch Metatext"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)))),r().createElement(T,{ariaLevel:1,itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"},r().createElement(g,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};R.displayName="TreeWithItemDisabled";var A=a(2711),M=a(5526),j=a(538),D=[{id:"default",label:"Default",element:r().createElement(w,null,r().createElement(y,{id:"treeheading"},"Tree Group Header"),r().createElement(x,{headerId:"treeheading"},r().createElement(I,null)))}],F=[{id:"expanded",label:"Expanded",element:r().createElement(w,null,r().createElement(y,{id:"treeheading"},"Tree Group Header"),r().createElement(x,{headerId:"treeheading"},r().createElement(_,null)))},{id:"selected",label:"Item Selected",element:r().createElement(w,null,r().createElement(y,{id:"treeheading"},"Tree Group Header"),r().createElement(x,{headerId:"treeheading"},r().createElement(N,null)))},{id:"deep-nesting",label:"Deeply nested branches",element:r().createElement(w,null,r().createElement(y,{id:"treeheading"},"Tree Group Header"),r().createElement(x,{headerId:"treeheading"},r().createElement(O,null)))},{id:"metatext",label:"Metatext",element:r().createElement(w,null,r().createElement(y,{id:"treeheading"},"Tree Group Header"),r().createElement(x,{headerId:"treeheading"},r().createElement(S,null)))},{id:"item-hovered",label:"Item Hovered",element:r().createElement(w,null,r().createElement(y,{id:"treeheading"},"Tree Group Header"),r().createElement(x,{headerId:"treeheading"},r().createElement(k,null)))},{id:"item-disabled",label:"Item Disabled",element:r().createElement(w,null,r().createElement(y,{id:"treeheading"},"Tree Group Header"),r().createElement(x,{headerId:"treeheading"},r().createElement(R,null)))}],P=[{id:"filterable-tree",label:"Fliterable Tree",element:r().createElement("div",null,r().createElement("div",{className:"slds-m-bottom_small"},r().createElement(A.ZS,{hasHiddenLabel:!0,hasLeftIcon:!0,inputId:"filter-id",labelContent:"Filter navigation items"},r().createElement(j.eX,{className:"slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default",sprite:"utility",symbol:"search"}),r().createElement(M.A,{"aria-controls":"tree-id",id:"filter-id",placeholder:"Quick Find",type:"search"}))),r().createElement(w,null,r().createElement(y,{id:"treeheading"},"Components"),r().createElement(x,{headerId:"treeheading",id:"tree-id"},r().createElement(T,{ariaLevel:1,isBranch:!0,itemLabel:"lightning",tabIndex:0},r().createElement(g,{isBranch:!0,itemLabel:"lightning"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2,itemLabel:"lightning-button"},r().createElement(g,{itemLabel:"lightning-button"})),r().createElement(T,{ariaLevel:2,itemLabel:"lightning-checkbox-button"},r().createElement(g,{itemLabel:"lightning-checkbox-button"})),r().createElement(T,{ariaLevel:2,itemLabel:"lightning-radio-button"},r().createElement(g,{itemLabel:"lightning-radio-button"})),r().createElement(T,{ariaLevel:2,itemLabel:"lightning-toggle",metaTextLabel:"vaiant a checkbox button"},r().createElement(g,{itemLabel:"lightning-toggle",metaTextLabel:"variant a checkbox button"})))),r().createElement(T,{ariaLevel:1,isBranch:!0,itemLabel:"ui"},r().createElement(g,{isBranch:!0,itemLabel:"ui"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2,itemLabel:"ui:button"},r().createElement(g,{itemLabel:"ui:button"})),r().createElement(T,{ariaLevel:2,itemLabel:"ui:checkboxButton"},r().createElement(g,{itemLabel:"ui:checkboxButton"})),r().createElement(T,{ariaLevel:2,itemLabel:"ui:radioButton"},r().createElement(g,{itemLabel:"ui:radioButton"})))),r().createElement(T,{ariaLevel:1,isBranch:!0,itemLabel:"lightningcommunities",metaTextLabel:"Community components"},r().createElement(g,{isBranch:!0,itemLabel:"lightningcommunities",metaTextLabel:"Community components"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2},r().createElement(g,null)))))))},{id:"filterabled-tree",label:"Flitered Tree",element:r().createElement("div",null,r().createElement("div",{className:"slds-m-bottom_small"},r().createElement(A.ZS,{hasHiddenLabel:!0,hasLeftIcon:!0,inputId:"filter-id",labelContent:"Filter navigation items"},r().createElement(j.eX,{className:"slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default",sprite:"utility",symbol:"search"}),r().createElement(M.A,{"aria-controls":"tree-id",defaultValue:"butto",id:"filter-id",placeholder:"Quick Find",type:"search"}))),r().createElement(w,null,r().createElement(y,{id:"treeheading"},"Components"),r().createElement(x,{headerId:"treeheading",id:"tree-id"},r().createElement(T,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"lightning",tabIndex:0},r().createElement(g,{isBranch:!0,itemLabel:"lightning"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2,itemLabel:"lightning-button"},r().createElement(g,{itemLabel:"lightning-button",termToMark:"butto"})),r().createElement(T,{ariaLevel:2,itemLabel:"lightning-checkbox-button"},r().createElement(g,{itemLabel:"lightning-checkbox-button",termToMark:"butto"})),r().createElement(T,{ariaLevel:2,itemLabel:"lightning-radio-button"},r().createElement(g,{itemLabel:"lightning-radio-button",termToMark:"butto"})),r().createElement(T,{ariaLevel:2,itemLabel:"lightning-toggle",metaTextLabel:"variant a checkbox button"},r().createElement(g,{itemLabel:"lightning-toggle",metaTextLabel:"variant a checkbox button",termToMark:"butto"})))),r().createElement(T,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"ui"},r().createElement(g,{isBranch:!0,itemLabel:"ui"}),r().createElement(B,null,r().createElement(T,{ariaLevel:2,itemLabel:"ui:button"},r().createElement(g,{itemLabel:"ui:button",termToMark:"butto"})),r().createElement(T,{ariaLevel:2,itemLabel:"ui:checkboxButton"},r().createElement(g,{itemLabel:"ui:checkboxButton",termToMark:"butto"})),r().createElement(T,{ariaLevel:2,itemLabel:"ui:radioButton"},r().createElement(g,{itemLabel:"ui:radioButton",termToMark:"butto"})))))))}],H=l.XB.code,C=l.XB.h2,X=l.XB.h3,G=l.XB.h4,W=l.XB.li,q=l.XB.p,Y=l.XB.strong,V=l.XB.ul,J=function(){return(0,n.createElement)(l.Ay,{},(0,n.createElement)("div",{className:"doc lead"},"A tree is visualization of a structure hierarchy. A branch can be expanded or collapsed."),(0,n.createElement)(i.A,{exampleOnly:!0},(0,h.NO)(F,"selected")),C({id:"About-Trees"},"About Trees"),q({},"A tree is composed of two core elements ",H({},".slds-tree")," and ",H({},".slds-tree__item"),". The tree wrapper, the outermost parent ",H({},"ul"),", will receive the class ",H({},".slds-tree"),". This class will be used for scoping a tree, which allows for particular styling based on states in which the tree may enter."),q({},"A tree will need helper classes added and removed to help structure the layout. Each child node list item needs an ",H({},"aria-level")," attribute with its value being the number of levels deep it is nested to indicate the distinct grouping is nested within."),q({},"Whenever the tree has a nested group, the nested ",H({},"ul")," element should receive the ARIA role ",H({},"group"),". The parent ",H({},'li[role="treeitem"]')," requires the ",H({},"aria-expanded")," attribute to be applied. Toggling ",H({},"aria-expanded")," to ",H({},"true")," or ",H({},"false")," will show or hide the child ",H({},"group"),". The parent ",H({},'li[role="treeitem"]')," also requires ",H({},"aria-label")," to be applied and set to the tree items text value, this ensures child groups are announced to screen readers as you interact with that branch."),q({},"Whenever a ",H({},'role="treeitem"')," node is selected, ",H({},'aria-selected="true"')," needs to be applied to display the selected styles."),q({},"In our example, we are using a chevron icon on tree branches to help indicate to the user what action clicking the tree branch will perform, whether opening or closing it. The effect of rotating the icon 90° to indicate open/closed status is achieved by applying the ARIA attribute ",H({},"aria-expanded")," to the ",H({},"treeitem"),". ",H({},'aria-hidden="true"')," and ",H({},'tabindex="-1"')," must be placed on the toggle button."),q({},"Tree items can only contain text values, no actionable elements, apart from our toggle button, can be placed inside a Tree item."),q({},"Trees can only contain a single focusable tree item and ",H({},'tabindex="0"')," must be placed on the ",H({},'li[role="treeitem]')," that takes current focus. Every other actionable and non-actionable element must be made unfocused by adding ",H({},'tabindex="-1"')," or removing ",H({},"tabindex"),", respectively."),q({},"When implementing collapsed rows, we suggest showing the content DOM nodes within each collapsed row only once the row is expanded for performance reasons. You can additionally toggle the hidden row with ",H({},"slds-show")," and ",H({},"slds-hide")," if you intend to keep all of the content in the DOM."),q({},"You can add metatext (see: metatext state) to any tree item, which adds a smaller, second line of text below tree node labels to provide supplemental information (to provide users with added context, aid with identification/disambiguation). To add metatext, include an additional ",H({},"span")," within the treeitem with the class ",H({},"slds-tree__item-meta"),". We've added an additional parent span around the label/title and metatext to ensure the spacing works properly when metatext is included. If adding metatext to a tree item with child nodes (i.e. a branch), be sure to update the ",H({},"aria-label")," to include the metatext. For example: ",H({},'aria-label="Tree Branch Label: Tree Branch Metatext"')),X({id:"Accessibility"},"Accessibility"),G({id:"Markup"},"Markup"),V({},W({},H({},'role="tree"')," is placed on the ",H({},"ul")),W({},H({},'role="tree"')," element also has ",H({},"aria-labelledby")," applied which points to the trees heading element"),W({},H({},'role="treeitem"')," is placed on the tree ",H({},"li")," elements"),W({},H({},"aria-level")," is applied to ",H({},"treeitem")," elements to indicate their nesting depth"),W({},H({},"aria-expanded")," is applied to ",H({},"treeitem")," elements that have child tree nodes. It is set to ",H({},"true")," or ",H({},"false")),W({},H({},"aria-label")," is applied to ",H({},"treeitem")," elements that have child tree nodes. Be sure to add any metatext to the label, if applicable"),W({},H({},'aria-selected="true"')," is applied to ",H({},"treeitem")," elements that are selected"),W({},H({},'aria-disabled="true"')," is applied to ",H({},"treeitem")," elements that are disabled. They do not receive a ",H({},"tabindex"),"."),W({},H({},'tabindex="0"')," is applied to the ",H({},"treeitem")," that is in focus"),W({},H({},'role="group"')," is applied to child tree node containers, ",H({},"ul"))),G({id:"Interactions"},"Interactions"),V({},W({},"Only a single action per tree item"),W({},"Only 1 focused item per Tree"),W({},"Actionable elements in a tree item are mouse only and should not be focusable, they should be presentational and should be hidden from screen readers and keyboard users"),W({},"Focus is placed on the entire ",H({},'li[role="treeitem"]'),". If that item has child items, focus must include those as well.")),G({id:"Keyboard-Navigation"},"Keyboard Navigation"),V({},W({},"Clicking on a tree item creates a selection"),W({},H({},"Up")," and ",H({},"Down")," arrow keys move ",H({},":focus")," ",Y({},"and")," ",H({},"aria-selected"),". Previous selections are cleared"),W({},H({},"Right")," arrow key to expand collapsed node."),W({},H({},"Left")," arrow key to collapse expanded node."),W({},H({},"Left")," arrow key on an end child node, collapses the group and moves ",H({},":focus")," and ",H({},"aria-selected")," to the parent ",H({},"treeitem")),W({},H({},"Enter")," performs the default action on an end tree item (if there is one)."),W({},H({},"Ctrl")," + ",H({},"Up")," and ",H({},"Ctrl")," + ",H({},"Down")," moves focus. Current selection is maintained"),W({},H({},"Ctrl")," + ",H({},"Space")," will add or remove the currently focused tree item to the selection")),X({id:"Filtering"},"Filtering"),q({},"When filtering a tree you should couple the tree with a search input. The search input will control the contents of the tree and as such should the attribute ",H({},"aria-controls")," added to it. The value of the ",H({},"aria-controls")," attribute should be the ID of the tree it controls. The search input should also be of type ",H({},"search"),"."),q({},"Upon typing in the input the tree should start filtering immediately, expanding all nodes that have matching tree items to display, and highlighting the search term in each of the matching items. The highlight is provided by wrapping the term in ",H({},"<mark />")," elements."),C({id:"Base"},"Base"),(0,n.createElement)(i.A,null,(0,h.NO)(D)),X({id:"States"},"States"),G({id:"Expanded-Item"},"Expanded Item"),(0,n.createElement)(i.A,null,(0,h.NO)(F,"expanded")),G({id:"Item-Selected"},"Item Selected"),(0,n.createElement)(i.A,null,(0,h.NO)(F,"selected")),G({id:"Deeply-Nested-Branches"},"Deeply Nested Branches"),(0,n.createElement)(i.A,null,(0,h.NO)(F,"deep-nesting")),G({id:"Item-with-Metatext"},"Item with Metatext"),(0,n.createElement)(i.A,null,(0,h.NO)(F,"metatext")),G({id:"Item-Hovered"},"Item Hovered"),(0,n.createElement)(i.A,null,(0,h.NO)(F,"item-hovered")),G({id:"Items-Disabled"},"Items Disabled"),(0,n.createElement)(i.A,null,(0,h.NO)(F,"item-disabled")),C({id:"Examples"},"Examples"),X({id:"Filterable-Tree"},"Filterable Tree"),(0,n.createElement)(i.A,null,(0,h.NO)(P,"filterable-tree")),X({id:"Filtered-Tree"},"Filtered Tree"),(0,n.createElement)(i.A,null,(0,h.NO)(P,"filterabled-tree")),C({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),(0,n.createElement)(c.A,{name:"trees",type:"component"}))},Q=function(){return(0,l.Qr)(J())}}},r={};function l(e){var t=r[e];if(void 0!==t)return t.exports;var a=r[e]={id:e,exports:{}};return n[e](a,a.exports,l),a.exports}l.m=n,l.amdO={},e=[],l.O=function(t,a,n,r){if(!a){var i=1/0;for(s=0;s<e.length;s++){a=e[s][0],n=e[s][1],r=e[s][2];for(var c=!0,o=0;o<a.length;o++)(!1&r\|\|i>=r)&&Object.keys(l.O).every(function(e){return l.O[e](a[o])})?a.splice(o--,1):(c=!1,r<i&&(i=r));if(c){e.splice(s--,1);var m=n();void 0!==m&&(t=m)}}return t}r=r\|\|0;for(var s=e.length;s>0&&e[s-1][2]>r;s--)e[s]=e[s-1];e[s]=[a,n,r]},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,{a:t}),t},a=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},l.t=function(e,n){if(1&n&&(e=this(e)),8&n)return e;if("object"==typeof e&&e){if(4&n&&e.__esModule)return e;if(16&n&&"function"==typeof e.then)return e}var r=Object.create(null);l.r(r);var i={};t=t\|\|[null,a({}),a([]),a(a)];for(var c=2&n&&e;("object"==typeof c\|\|"function"==typeof c)&&!~t.indexOf(c);c=a(c))Object.getOwnPropertyNames(c).forEach(function(t){i[t]=function(){return e[t]}});return i.default=function(){return e},l.d(r,i),r},l.d=function(e,t){for(var a in t)l.o(t,a)&&!l.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},l.e=function(){return Promise.resolve()},l.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.j=234,function(){var e={234:0};l.O.j=function(t){return 0===e[t]};var t=function(t,a){var n,r,i=a[0],c=a[1],o=a[2],m=0;if(i.some(function(t){return 0!==e[t]})){for(n in c)l.o(c,n)&&(l.m[n]=c[n]);if(o)var s=o(l)}for(t&&t(a);m<i.length;m++)r=i[m],l.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return l.O(s)},a=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];a.forEach(t.bind(null,0)),a.push=t.bind(null,a.push.bind(a))}(),l.nc=void 0;var i=l.O(void 0,[3540],function(){return l(5732)});i=l.O(i),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/trees/docs.mdx.js"]=i}();

package/__internal/chunked/docs/ui/components/vertical-navigation/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,l,a={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},3741:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return D},getElement:function(){return L}});var a=l(1594),n=l.n(a),r=l(5671),i=l(6547),c=l(5619),s=l(806),o=l(7412),d=l(538),m=l(2711),u=l(5526),p=l(8347),E=l(942),h=l.n(E),v=l(9825),f="input-id-01",b="entity-header",y="folder-header",_="search-results",R=function(e){return n().createElement("nav",{className:h()("slds-nav-vertical",{"slds-nav-vertical_compact":e.isCompact,"slds-nav-vertical_shade":e.isShaded}),"aria-label":"Sub page"},e.children)};R.propTypes={className:o.PropTypes.string,children:o.PropTypes.node,isCompact:o.PropTypes.bool,isShaded:o.PropTypes.bool};var g=function(e){return n().createElement("li",{className:h()("slds-nav-vertical__item",{"slds-is-active":e.active},e.className)},n().createElement("a",{href:"#",className:"slds-nav-vertical__action","aria-current":e.active,onClick:function(e){return e.preventDefault()}},e.children))};g.propTypes={active:o.PropTypes.oneOf([!0,void 0,"page","step","location","date","time"]),className:o.PropTypes.string,children:o.PropTypes.node},g.defaultProps={active:void 0};var N=function(e){var t,l=e.children,a=e.className,r=e.collapsed,i=e.expanded,c=e.headerId,s=e.isNavVerticalRadioSet,o=e.listId,d=e.title,m=r\|\|i;return t=s?n().createElement("div",null,l):n().createElement("ul",{"aria-describedby":c},l),n().createElement("div",{className:h()(m?"slds-nav-vertical__overflow":"slds-nav-vertical__section",a)},!m&&!s&&d&&n().createElement("h2",{id:c,className:"slds-nav-vertical__title"},d),m&&n().createElement(v.$n,{className:"slds-button_reset slds-nav-vertical__action slds-nav-vertical__action_overflow","aria-controls":o,"aria-expanded":i?"true":"false"},n().createElement(p.A,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"chevronright"}),n().createElement("span",{className:"slds-nav-vertical__action-text"},r?"Show More":"Show Less",n().createElement("span",{className:"slds-assistive-text"},d))),m?n().createElement("div",{id:o,className:h()({"slds-hide":r,"slds-show":i})},t):t)};N.defaultProps={headerId:"header-id-1"},N.propTypes={children:o.PropTypes.node,className:o.PropTypes.string,collapsed:(0,s.VY)("listId",o.PropTypes.bool),expanded:(0,s.VY)("listId",o.PropTypes.bool),headerId:o.PropTypes.string.isRequired,isNavVerticalRadioSet:o.PropTypes.bool,listId:o.PropTypes.string,title:o.PropTypes.string};var w=function(){return n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement(R,null,n().createElement(N,{headerId:b,title:"Reports"},n().createElement(g,{active:!0},"Recent"),n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Private Reports"),n().createElement(g,null,"Public Reports"),n().createElement(g,null,"All Reports")),n().createElement(N,{headerId:y,title:"Folders"},n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Shared with Me"),n().createElement(g,null,"All Reports"))))},I=n().createElement(w,null),x=[{id:"collapsed",label:"Collapsed",element:n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement(R,null,n().createElement(N,{headerId:b,title:"Reports"},n().createElement(g,{active:!0},"Recent"),n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Private Reports"),n().createElement(g,null,"Public Reports"),n().createElement(g,null,"All Reports")),n().createElement(N,{headerId:y,title:"Folders"},n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Shared with Me")),n().createElement(N,{title:"Folders",collapsed:!0,listId:_,headerId:y},n().createElement(g,null,"Overflow Item One"),n().createElement(g,null,"Overflow Item Two"),n().createElement(g,null,"Overflow Item Three"))))},{id:"expanded",label:"Expanded",element:n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement(R,null,n().createElement(N,{headerId:b,title:"Reports"},n().createElement(g,{active:!0},"Recent"),n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Private Reports"),n().createElement(g,null,"Public Reports"),n().createElement(g,null,"All Reports")),n().createElement(N,{headerId:y,title:"Folders"},n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Shared with Me")),n().createElement(N,{title:"Folders",expanded:!0,listId:_,headerId:y},n().createElement(g,null,"Overflow Item One"),n().createElement(g,null,"Overflow Item Two"),n().createElement(g,null,"Overflow Item Three"))))}],P=[{id:"compact",label:"Compact",element:n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement(R,{isCompact:!0},n().createElement(N,{headerId:b,title:"Reports"},n().createElement(g,{active:!0},"Recent"),n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Private Reports"),n().createElement(g,null,"Public Reports"),n().createElement(g,null,"All Reports")),n().createElement(N,{headerId:y,title:"Folders"},n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Shared with Me"),n().createElement(g,null,"All Reports"))))},{id:"items-with-icons",label:"Items with icon",element:n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement(R,null,n().createElement(N,{headerId:b,title:"Reports"},n().createElement(g,{active:!0},"Recent"),n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Private Reports"),n().createElement(g,null,"Public Reports"),n().createElement(g,null,"All Reports")),n().createElement(N,{headerId:y,title:"Folders"},n().createElement(g,null,n().createElement(d.eX,{symbol:"open_folder",containerClassName:"slds-line-height_reset",className:"slds-icon-text-default slds-icon_x-small slds-m-right_x-small",assistiveText:"Folder",title:"Folder"}),"Created by Me"),n().createElement(g,null,n().createElement(d.eX,{symbol:"open_folder",containerClassName:"slds-line-height_reset",className:"slds-icon-text-default slds-icon_x-small slds-m-right_x-small",assistiveText:"Folder",title:"Folder"}),"Shared with Me"),n().createElement(g,null,"All Reports"))))},{id:"items-with-notifications",label:"Items with notification",element:n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement(R,null,n().createElement(N,{headerId:b,title:"Reports"},n().createElement(g,{active:!0},"Recent",n().createElement("span",{className:"slds-badge slds-col_bump-left"},n().createElement("span",{className:"slds-assistive-text"},":"),"3",n().createElement("span",{className:"slds-assistive-text"},"New Items"))),n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Private Reports"),n().createElement(g,null,"Public Reports"),n().createElement(g,null,"All Reports")),n().createElement(N,{headerId:y,title:"Folders"},n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Shared with Me"),n().createElement(g,null,"All Reports"))))},{id:"shade",label:"Shaded Background",element:n().createElement("div",{className:"demo-only",style:{width:"320px",backgroundColor:"#FAFAFB"}},n().createElement(R,{isShaded:!0},n().createElement(N,{headerId:b,title:"Reports"},n().createElement(g,{active:!0},"Recent"),n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Private Reports"),n().createElement(g,null,"Public Reports"),n().createElement(g,null,"All Reports")),n().createElement(N,{headerId:y,title:"Folders"},n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Shared with Me"),n().createElement(g,null,"All Reports"))))},{id:"quickfind",label:"Quickfind",element:n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement(R,null,n().createElement(m.ZS,{formElementClassName:"slds-p-horizontal_large",labelContent:"Filter navigation items",inputId:f,hasLeftIcon:!0,hasHiddenLabel:!0},n().createElement(d.eX,{className:"slds-input__icon slds-input__icon_right slds-icon-text-default",symbol:"search",title:!1,assistiveText:!1}),n().createElement(u.A,{type:"search",id:f,placeholder:"Quick Find"})),n().createElement(N,{headerId:b,title:"Reports"},n().createElement(g,{active:!0},"Recent"),n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Private Reports"),n().createElement(g,null,"Public Reports"),n().createElement(g,null,"All Reports")),n().createElement(N,{headerId:y,title:"Folders"},n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Shared with Me"))))}],S="entity-header",O=function(e){return n().createElement("fieldset",{className:h()("slds-nav-vertical",{"slds-nav-vertical_shade":e.shaded},{"slds-nav-vertical_compact":e.compact})},n().createElement("legend",{className:"slds-nav-vertical__title"},"Reports"),e.children)},C=function(e){return n().createElement("span",{className:h()("slds-nav-vertical__item",e.className)},n().createElement("input",{defaultChecked:e.checked,type:"radio",id:e.id,value:e.id,name:e.name\|\|"unique-id-example"}),n().createElement("label",{className:"slds-nav-vertical__action",htmlFor:e.id},n().createElement("span",{className:"slds-nav-vertical_radio-faux"},e.children)))},A=function(e){return n().createElement(N,{headerId:S,title:"Reports",isNavVerticalRadioSet:!0},n().createElement(O,null,n().createElement(C,{checked:!0,id:"unique-id-01-recent"},"Recent"),n().createElement(C,{id:"unique-id-01-created-by-me"},"Created by Me"),n().createElement(C,{id:"unique-id-01-private-reports"},"Private Reports"),n().createElement(C,{id:"unique-id-01-public-reports"},"Public Reports"),n().createElement(C,{id:"unique-id-01-all-reports"},"All Reports")))},M=n().createElement(A,null),T=[{id:"compact",label:"Compact",element:n().createElement(N,{headerId:S,title:"Reports",isNavVerticalRadioSet:!0},n().createElement(O,{compact:!0},n().createElement(C,{checked:!0,id:"unique-id-02-recent",name:"unique-id-compact"},"Recent"),n().createElement(C,{id:"unique-id-02-created-by-me",name:"unique-id-compact"},"Created by Me"),n().createElement(C,{id:"unique-id-02-private-reports",name:"unique-id-compact"},"Private Reports"),n().createElement(C,{id:"unique-id-02-public-reports",name:"unique-id-compact"},"Public Reports"),n().createElement(C,{id:"unique-id-02-all-reports",name:"unique-id-compact"},"All Reports")))},{id:"shade",label:"Shaded Background",element:n().createElement("div",{className:"demo-only",style:{backgroundColor:"#FAFAFB"}},n().createElement(N,{headerId:S,title:"Reports",isNavVerticalRadioSet:!0},n().createElement(O,{shaded:!0},n().createElement(C,{checked:!0,id:"unique-id-03-recent",name:"unique-id-shade"},"Recent"),n().createElement(C,{id:"unique-id-03-created-by-me",name:"unique-id-shade"},"Created by Me"),n().createElement(C,{id:"unique-id-03-private-reports",name:"unique-id-shade"},"Private Reports"),n().createElement(C,{id:"unique-id-03-public-reports",name:"unique-id-shade"},"Public Reports"),n().createElement(C,{id:"unique-id-03-all-reports",name:"unique-id-shade"},"All Reports"))))}],k=r.XB.a,q=r.XB.h2,F=r.XB.h3,j=r.XB.h4,B=r.XB.p,L=function(){return(0,a.createElement)(r.Ay,{},(0,a.createElement)("div",{className:"doc lead"},"Navigation represents a list of links that either take the user to another page or parts of the page the user is in."),q({id:"List"},"List"),(0,a.createElement)(i.A,null,(0,s.NO)(I)),(0,a.createElement)(c.A,{type:"a11y",header:"Accessibility Note"},(0,a.createElement)("p",null,"The ",(0,a.createElement)("code",null,"aria-current")," attribute is used when an element within a set (e.g., navigation list items) is styled to indicate the selected or active item. In our use case, the attribute should be placed on the ",(0,a.createElement)("code",null,"slds-nav-vertical__action")," link element. In our example above, we're using the generic ",(0,a.createElement)("code",null,"true")," value, but the attribute will accept a variety of options depending on your use case."),(0,a.createElement)("p",null,"For more information on ",(0,a.createElement)("code",null,"aria-current"),", please visit the ",(0,a.createElement)("a",{href:"https://www.w3.org/TR/wai-aria-1.1/#aria-current"},"W3C specification page"),".")),F({id:"States"},"States"),j({id:"Collapsed"},"Collapsed"),(0,a.createElement)(i.A,null,(0,s.NO)(x,"collapsed")),j({id:"Expanded"},"Expanded"),(0,a.createElement)(i.A,null,(0,s.NO)(x,"expanded")),F({id:"Examples"},"Examples"),j({id:"Compact"},"Compact"),(0,a.createElement)(i.A,null,(0,s.NO)(P,"compact")),j({id:"Items-with-Icons"},"Items with Icons"),(0,a.createElement)(i.A,null,(0,s.NO)(P,"items-with-icons")),j({id:"Items-with-Notifications"},"Items with Notifications"),(0,a.createElement)(i.A,null,(0,s.NO)(P,"items-with-notifications")),j({id:"Shaded-Background"},"Shaded Background"),(0,a.createElement)(i.A,null,(0,s.NO)(P,"shade")),j({id:"Quickfind"},"Quickfind"),(0,a.createElement)(i.A,null,(0,s.NO)(P,"quickfind")),q({id:"Radio-Group"},"Radio Group"),B({},"The radio group variant should be used when your vertical navigation acts as a selection or filter on content, like within a modal. If the vertical navigation takes the user to another page or part of a page, use the standard List version. If your content changes entirely whenever options in the navigation are selected, instead of filtering one master list, then use the ",k({href:"/components/vertical-tabs"},"Vertical Tabs")," component."),(0,a.createElement)(i.A,null,(0,s.NO)(M)),F({id:"Examples-2"},"Examples"),j({id:"Compact-2"},"Compact"),(0,a.createElement)(i.A,null,(0,s.NO)(T,"compact")),j({id:"Shaded-Background-2"},"Shaded Background"),(0,a.createElement)(i.A,null,(0,s.NO)(T,"shade")))},D=function(){return(0,r.Qr)(L())}},5206:function(e){e.exports=ReactDOM}},n={};function r(e){var t=n[e];if(void 0!==t)return t.exports;var l=n[e]={id:e,exports:{}};return a[e](l,l.exports,r),l.exports}r.m=a,r.amdO={},e=[],r.O=function(t,l,a,n){if(!l){var i=1/0;for(d=0;d<e.length;d++){l=e[d][0],a=e[d][1],n=e[d][2];for(var c=!0,s=0;s<l.length;s++)(!1&n\|\|i>=n)&&Object.keys(r.O).every(function(e){return r.O[e](l[s])})?l.splice(s--,1):(c=!1,n<i&&(i=n));if(c){e.splice(d--,1);var o=a();void 0!==o&&(t=o)}}return t}n=n\|\|0;for(var d=e.length;d>0&&e[d-1][2]>n;d--)e[d]=e[d-1];e[d]=[l,a,n]},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},l=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},r.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var n=Object.create(null);r.r(n);var i={};t=t\|\|[null,l({}),l([]),l(l)];for(var c=2&a&&e;("object"==typeof c\|\|"function"==typeof c)&&!~t.indexOf(c);c=l(c))Object.getOwnPropertyNames(c).forEach(function(t){i[t]=function(){return e[t]}});return i.default=function(){return e},r.d(n,i),n},r.d=function(e,t){for(var l in t)r.o(t,l)&&!r.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},r.e=function(){return Promise.resolve()},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.j=1276,function(){var e={1276:0};r.O.j=function(t){return 0===e[t]};var t=function(t,l){var a,n,i=l[0],c=l[1],s=l[2],o=0;if(i.some(function(t){return 0!==e[t]})){for(a in c)r.o(c,a)&&(r.m[a]=c[a]);if(s)var d=s(r)}for(t&&t(l);o<i.length;o++)n=i[o],r.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return r.O(d)},l=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),r.nc=void 0;var i=r.O(void 0,[3540],function(){return r(3741)});i=r.O(i),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/vertical-navigation/docs.mdx.js"]=i}();
1	+ var SLDS;!function(){"use strict";var e,t,l,a={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},3741:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return D},getElement:function(){return L}});var a=l(1594),n=l.n(a),r=l(5671),i=l(6547),c=l(5619),s=l(806),o=l(4187),d=l(538),m=l(2711),u=l(5526),p=l(8347),E=l(942),h=l.n(E),v=l(9825),f="input-id-01",b="entity-header",y="folder-header",_="search-results",R=function(e){return n().createElement("nav",{className:h()("slds-nav-vertical",{"slds-nav-vertical_compact":e.isCompact,"slds-nav-vertical_shade":e.isShaded}),"aria-label":"Sub page"},e.children)};R.propTypes={className:o.PropTypes.string,children:o.PropTypes.node,isCompact:o.PropTypes.bool,isShaded:o.PropTypes.bool};var g=function(e){return n().createElement("li",{className:h()("slds-nav-vertical__item",{"slds-is-active":e.active},e.className)},n().createElement("a",{href:"#",className:"slds-nav-vertical__action","aria-current":e.active,onClick:function(e){return e.preventDefault()}},e.children))};g.propTypes={active:o.PropTypes.oneOf([!0,void 0,"page","step","location","date","time"]),className:o.PropTypes.string,children:o.PropTypes.node},g.defaultProps={active:void 0};var N=function(e){var t,l=e.children,a=e.className,r=e.collapsed,i=e.expanded,c=e.headerId,s=e.isNavVerticalRadioSet,o=e.listId,d=e.title,m=r\|\|i;return t=s?n().createElement("div",null,l):n().createElement("ul",{"aria-describedby":c},l),n().createElement("div",{className:h()(m?"slds-nav-vertical__overflow":"slds-nav-vertical__section",a)},!m&&!s&&d&&n().createElement("h2",{id:c,className:"slds-nav-vertical__title"},d),m&&n().createElement(v.$n,{className:"slds-button_reset slds-nav-vertical__action slds-nav-vertical__action_overflow","aria-controls":o,"aria-expanded":i?"true":"false"},n().createElement(p.A,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"chevronright"}),n().createElement("span",{className:"slds-nav-vertical__action-text"},r?"Show More":"Show Less",n().createElement("span",{className:"slds-assistive-text"},d))),m?n().createElement("div",{id:o,className:h()({"slds-hide":r,"slds-show":i})},t):t)};N.defaultProps={headerId:"header-id-1"},N.propTypes={children:o.PropTypes.node,className:o.PropTypes.string,collapsed:(0,s.VY)("listId",o.PropTypes.bool),expanded:(0,s.VY)("listId",o.PropTypes.bool),headerId:o.PropTypes.string.isRequired,isNavVerticalRadioSet:o.PropTypes.bool,listId:o.PropTypes.string,title:o.PropTypes.string};var w=function(){return n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement(R,null,n().createElement(N,{headerId:b,title:"Reports"},n().createElement(g,{active:!0},"Recent"),n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Private Reports"),n().createElement(g,null,"Public Reports"),n().createElement(g,null,"All Reports")),n().createElement(N,{headerId:y,title:"Folders"},n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Shared with Me"),n().createElement(g,null,"All Reports"))))},I=n().createElement(w,null),x=[{id:"collapsed",label:"Collapsed",element:n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement(R,null,n().createElement(N,{headerId:b,title:"Reports"},n().createElement(g,{active:!0},"Recent"),n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Private Reports"),n().createElement(g,null,"Public Reports"),n().createElement(g,null,"All Reports")),n().createElement(N,{headerId:y,title:"Folders"},n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Shared with Me")),n().createElement(N,{title:"Folders",collapsed:!0,listId:_,headerId:y},n().createElement(g,null,"Overflow Item One"),n().createElement(g,null,"Overflow Item Two"),n().createElement(g,null,"Overflow Item Three"))))},{id:"expanded",label:"Expanded",element:n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement(R,null,n().createElement(N,{headerId:b,title:"Reports"},n().createElement(g,{active:!0},"Recent"),n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Private Reports"),n().createElement(g,null,"Public Reports"),n().createElement(g,null,"All Reports")),n().createElement(N,{headerId:y,title:"Folders"},n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Shared with Me")),n().createElement(N,{title:"Folders",expanded:!0,listId:_,headerId:y},n().createElement(g,null,"Overflow Item One"),n().createElement(g,null,"Overflow Item Two"),n().createElement(g,null,"Overflow Item Three"))))}],P=[{id:"compact",label:"Compact",element:n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement(R,{isCompact:!0},n().createElement(N,{headerId:b,title:"Reports"},n().createElement(g,{active:!0},"Recent"),n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Private Reports"),n().createElement(g,null,"Public Reports"),n().createElement(g,null,"All Reports")),n().createElement(N,{headerId:y,title:"Folders"},n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Shared with Me"),n().createElement(g,null,"All Reports"))))},{id:"items-with-icons",label:"Items with icon",element:n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement(R,null,n().createElement(N,{headerId:b,title:"Reports"},n().createElement(g,{active:!0},"Recent"),n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Private Reports"),n().createElement(g,null,"Public Reports"),n().createElement(g,null,"All Reports")),n().createElement(N,{headerId:y,title:"Folders"},n().createElement(g,null,n().createElement(d.eX,{symbol:"open_folder",containerClassName:"slds-line-height_reset",className:"slds-icon-text-default slds-icon_x-small slds-m-right_x-small",assistiveText:"Folder",title:"Folder"}),"Created by Me"),n().createElement(g,null,n().createElement(d.eX,{symbol:"open_folder",containerClassName:"slds-line-height_reset",className:"slds-icon-text-default slds-icon_x-small slds-m-right_x-small",assistiveText:"Folder",title:"Folder"}),"Shared with Me"),n().createElement(g,null,"All Reports"))))},{id:"items-with-notifications",label:"Items with notification",element:n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement(R,null,n().createElement(N,{headerId:b,title:"Reports"},n().createElement(g,{active:!0},"Recent",n().createElement("span",{className:"slds-badge slds-col_bump-left"},n().createElement("span",{className:"slds-assistive-text"},":"),"3",n().createElement("span",{className:"slds-assistive-text"},"New Items"))),n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Private Reports"),n().createElement(g,null,"Public Reports"),n().createElement(g,null,"All Reports")),n().createElement(N,{headerId:y,title:"Folders"},n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Shared with Me"),n().createElement(g,null,"All Reports"))))},{id:"shade",label:"Shaded Background",element:n().createElement("div",{className:"demo-only",style:{width:"320px",backgroundColor:"#FAFAFB"}},n().createElement(R,{isShaded:!0},n().createElement(N,{headerId:b,title:"Reports"},n().createElement(g,{active:!0},"Recent"),n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Private Reports"),n().createElement(g,null,"Public Reports"),n().createElement(g,null,"All Reports")),n().createElement(N,{headerId:y,title:"Folders"},n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Shared with Me"),n().createElement(g,null,"All Reports"))))},{id:"quickfind",label:"Quickfind",element:n().createElement("div",{className:"demo-only",style:{width:"320px"}},n().createElement(R,null,n().createElement(m.ZS,{formElementClassName:"slds-p-horizontal_large",labelContent:"Filter navigation items",inputId:f,hasLeftIcon:!0,hasHiddenLabel:!0},n().createElement(d.eX,{className:"slds-input__icon slds-input__icon_right slds-icon-text-default",symbol:"search",title:!1,assistiveText:!1}),n().createElement(u.A,{type:"search",id:f,placeholder:"Quick Find"})),n().createElement(N,{headerId:b,title:"Reports"},n().createElement(g,{active:!0},"Recent"),n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Private Reports"),n().createElement(g,null,"Public Reports"),n().createElement(g,null,"All Reports")),n().createElement(N,{headerId:y,title:"Folders"},n().createElement(g,null,"Created by Me"),n().createElement(g,null,"Shared with Me"))))}],S="entity-header",O=function(e){return n().createElement("fieldset",{className:h()("slds-nav-vertical",{"slds-nav-vertical_shade":e.shaded},{"slds-nav-vertical_compact":e.compact})},n().createElement("legend",{className:"slds-nav-vertical__title"},"Reports"),e.children)},C=function(e){return n().createElement("span",{className:h()("slds-nav-vertical__item",e.className)},n().createElement("input",{defaultChecked:e.checked,type:"radio",id:e.id,value:e.id,name:e.name\|\|"unique-id-example"}),n().createElement("label",{className:"slds-nav-vertical__action",htmlFor:e.id},n().createElement("span",{className:"slds-nav-vertical_radio-faux"},e.children)))},A=function(e){return n().createElement(N,{headerId:S,title:"Reports",isNavVerticalRadioSet:!0},n().createElement(O,null,n().createElement(C,{checked:!0,id:"unique-id-01-recent"},"Recent"),n().createElement(C,{id:"unique-id-01-created-by-me"},"Created by Me"),n().createElement(C,{id:"unique-id-01-private-reports"},"Private Reports"),n().createElement(C,{id:"unique-id-01-public-reports"},"Public Reports"),n().createElement(C,{id:"unique-id-01-all-reports"},"All Reports")))},M=n().createElement(A,null),T=[{id:"compact",label:"Compact",element:n().createElement(N,{headerId:S,title:"Reports",isNavVerticalRadioSet:!0},n().createElement(O,{compact:!0},n().createElement(C,{checked:!0,id:"unique-id-02-recent",name:"unique-id-compact"},"Recent"),n().createElement(C,{id:"unique-id-02-created-by-me",name:"unique-id-compact"},"Created by Me"),n().createElement(C,{id:"unique-id-02-private-reports",name:"unique-id-compact"},"Private Reports"),n().createElement(C,{id:"unique-id-02-public-reports",name:"unique-id-compact"},"Public Reports"),n().createElement(C,{id:"unique-id-02-all-reports",name:"unique-id-compact"},"All Reports")))},{id:"shade",label:"Shaded Background",element:n().createElement("div",{className:"demo-only",style:{backgroundColor:"#FAFAFB"}},n().createElement(N,{headerId:S,title:"Reports",isNavVerticalRadioSet:!0},n().createElement(O,{shaded:!0},n().createElement(C,{checked:!0,id:"unique-id-03-recent",name:"unique-id-shade"},"Recent"),n().createElement(C,{id:"unique-id-03-created-by-me",name:"unique-id-shade"},"Created by Me"),n().createElement(C,{id:"unique-id-03-private-reports",name:"unique-id-shade"},"Private Reports"),n().createElement(C,{id:"unique-id-03-public-reports",name:"unique-id-shade"},"Public Reports"),n().createElement(C,{id:"unique-id-03-all-reports",name:"unique-id-shade"},"All Reports"))))}],k=r.XB.a,q=r.XB.h2,F=r.XB.h3,j=r.XB.h4,B=r.XB.p,L=function(){return(0,a.createElement)(r.Ay,{},(0,a.createElement)("div",{className:"doc lead"},"Navigation represents a list of links that either take the user to another page or parts of the page the user is in."),q({id:"List"},"List"),(0,a.createElement)(i.A,null,(0,s.NO)(I)),(0,a.createElement)(c.A,{type:"a11y",header:"Accessibility Note"},(0,a.createElement)("p",null,"The ",(0,a.createElement)("code",null,"aria-current")," attribute is used when an element within a set (e.g., navigation list items) is styled to indicate the selected or active item. In our use case, the attribute should be placed on the ",(0,a.createElement)("code",null,"slds-nav-vertical__action")," link element. In our example above, we're using the generic ",(0,a.createElement)("code",null,"true")," value, but the attribute will accept a variety of options depending on your use case."),(0,a.createElement)("p",null,"For more information on ",(0,a.createElement)("code",null,"aria-current"),", please visit the ",(0,a.createElement)("a",{href:"https://www.w3.org/TR/wai-aria-1.1/#aria-current"},"W3C specification page"),".")),F({id:"States"},"States"),j({id:"Collapsed"},"Collapsed"),(0,a.createElement)(i.A,null,(0,s.NO)(x,"collapsed")),j({id:"Expanded"},"Expanded"),(0,a.createElement)(i.A,null,(0,s.NO)(x,"expanded")),F({id:"Examples"},"Examples"),j({id:"Compact"},"Compact"),(0,a.createElement)(i.A,null,(0,s.NO)(P,"compact")),j({id:"Items-with-Icons"},"Items with Icons"),(0,a.createElement)(i.A,null,(0,s.NO)(P,"items-with-icons")),j({id:"Items-with-Notifications"},"Items with Notifications"),(0,a.createElement)(i.A,null,(0,s.NO)(P,"items-with-notifications")),j({id:"Shaded-Background"},"Shaded Background"),(0,a.createElement)(i.A,null,(0,s.NO)(P,"shade")),j({id:"Quickfind"},"Quickfind"),(0,a.createElement)(i.A,null,(0,s.NO)(P,"quickfind")),q({id:"Radio-Group"},"Radio Group"),B({},"The radio group variant should be used when your vertical navigation acts as a selection or filter on content, like within a modal. If the vertical navigation takes the user to another page or part of a page, use the standard List version. If your content changes entirely whenever options in the navigation are selected, instead of filtering one master list, then use the ",k({href:"/components/vertical-tabs"},"Vertical Tabs")," component."),(0,a.createElement)(i.A,null,(0,s.NO)(M)),F({id:"Examples-2"},"Examples"),j({id:"Compact-2"},"Compact"),(0,a.createElement)(i.A,null,(0,s.NO)(T,"compact")),j({id:"Shaded-Background-2"},"Shaded Background"),(0,a.createElement)(i.A,null,(0,s.NO)(T,"shade")))},D=function(){return(0,r.Qr)(L())}},5206:function(e){e.exports=ReactDOM}},n={};function r(e){var t=n[e];if(void 0!==t)return t.exports;var l=n[e]={id:e,exports:{}};return a[e](l,l.exports,r),l.exports}r.m=a,r.amdO={},e=[],r.O=function(t,l,a,n){if(!l){var i=1/0;for(d=0;d<e.length;d++){l=e[d][0],a=e[d][1],n=e[d][2];for(var c=!0,s=0;s<l.length;s++)(!1&n\|\|i>=n)&&Object.keys(r.O).every(function(e){return r.O[e](l[s])})?l.splice(s--,1):(c=!1,n<i&&(i=n));if(c){e.splice(d--,1);var o=a();void 0!==o&&(t=o)}}return t}n=n\|\|0;for(var d=e.length;d>0&&e[d-1][2]>n;d--)e[d]=e[d-1];e[d]=[l,a,n]},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},l=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},r.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var n=Object.create(null);r.r(n);var i={};t=t\|\|[null,l({}),l([]),l(l)];for(var c=2&a&&e;("object"==typeof c\|\|"function"==typeof c)&&!~t.indexOf(c);c=l(c))Object.getOwnPropertyNames(c).forEach(function(t){i[t]=function(){return e[t]}});return i.default=function(){return e},r.d(n,i),n},r.d=function(e,t){for(var l in t)r.o(t,l)&&!r.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},r.e=function(){return Promise.resolve()},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.j=1276,function(){var e={1276:0};r.O.j=function(t){return 0===e[t]};var t=function(t,l){var a,n,i=l[0],c=l[1],s=l[2],o=0;if(i.some(function(t){return 0!==e[t]})){for(a in c)r.o(c,a)&&(r.m[a]=c[a]);if(s)var d=s(r)}for(t&&t(l);o<i.length;o++)n=i[o],r.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return r.O(d)},l=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),r.nc=void 0;var i=r.O(void 0,[3540],function(){return r(3741)});i=r.O(i),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/vertical-navigation/docs.mdx.js"]=i}();