@salesforce-ux/design-system/__internal/chunked/showcase/ui/components/trees/base/example.jsx.js

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t={1315:function(e,t,a){a.r(t),a.d(t,{default:function(){return j},examples:function(){return D},states:function(){return M}});var l=a(1594),r=a.n(l),n=a(4187),i=a.n(n),c=a(942),m=a.n(c),o=a(6955),u=a(806);function s(e){return s="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},s(e)}function d(e,t){for(var a=0;a<t.length;a++){var l=t[a];l.enumerable=l.enumerable||!1,l.configurable=!0,"value"in l&&(l.writable=!0),Object.defineProperty(e,h(l.key),l)}}function h(e){var t=function(e){if("object"!=s(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var a=t.call(e,"string");if("object"!=s(a))return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==s(t)?t:t+""}function b(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(b=function(){return!!e})()}function E(e){return E=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},E(e)}function L(e,t){return L=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},L(e,t)}var v=function(e){var t=function(t){return e.termToMark?r().createElement("span",{dangerouslySetInnerHTML:{__html:(a=t,l=e.termToMark,a.replace(new RegExp(l,"gi"),function(e){return"<mark>".concat(e,"</mark>")}))}}):r().createElement(r().Fragment,null,t);var a,l};return r().createElement("div",{className:m()("slds-tree__item",e.className)},r().createElement(o.A,{"aria-hidden":"true",assistiveText:"Expand ".concat(e.itemLabel),className:m()("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)};v.displayName="TreeItem",v.propTypes={children:i().node,isBranch:i().bool,isDisabled:i().bool,itemLabel:i().string,metaTextLabel:i().string,termToMark:i().string},v.defaultProps={itemLabel:"Tree Item"};var p=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=E(t),function(e,t){if(t&&("object"==s(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,b()?Reflect.construct(t,a||[],E(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&&L(e,t)}(t,e),a=t,(l=[{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,l=e.isBranch,n=e.isExpanded,i=e.isSelected,c=e.isDisabled,m=e.itemLabel,o=e.metaTextLabel;return r().createElement("li",{"aria-expanded":l?n||!1:null,"aria-label":l?this.getBranchAriaLabel(m,o):null,"aria-level":t,"aria-selected":i,"aria-disabled":c,role:"treeitem",tabIndex:a},this.props.children)}}])&&d(a.prototype,l),Object.defineProperty(a,"prototype",{writable:!1}),a;var a,l}(l.Component);p.displayName="TreeListItem",p.propTypes={ariaLevel:i().number.isRequired,children:i().node.isRequired,isBranch:(0,u.VY)("itemLabel",i().bool),isExpanded:(0,u.VY)("isBranch",i().bool),isSelected:i().bool,itemLabel:i().string,metaTextLabel:(0,u.VY)("itemLabel",i().string),tabIndex:i().number};var T=function(e){return r().createElement("h4",{className:"slds-tree__group-header",id:e.id},e.children)};T.displayName="TreeHeader",T.propTypes={children:i().node,id:i().string.isRequired};var f=function(e){return r().createElement("ul",{"aria-labelledby":e.headerId,className:"slds-tree",id:e.id,role:"tree"},e.children)};f.displayName="TreeList",f.propTypes={children:i().node,headerId:i().string,id:i().string};var g=function(e){return r().createElement("ul",{role:"group"},e.children)};g.displayName="TreeGroup",g.propTypes={children:i().node};var y=function(e){return r().createElement("div",{className:"slds-tree_container"},e.children)};y.displayName="TreeContainer",y.propTypes={children:i().node};var B=function(){return r().createElement(r().Fragment,null,r().createElement(p,{ariaLevel:1,tabIndex:0},r().createElement(v,null)),r().createElement(p,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(v,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(g,null,r().createElement(p,{ariaLevel:2},r().createElement(v,null)))),r().createElement(p,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(v,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(g,null,r().createElement(p,{ariaLevel:2},r().createElement(v,null)))),r().createElement(p,{ariaLevel:1,itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"},r().createElement(v,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};B.displayName="DefaultTree";var x=function(){return r().createElement(r().Fragment,null,r().createElement(p,{ariaLevel:1,tabIndex:0},r().createElement(v,null)),r().createElement(p,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},r().createElement(v,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(g,null,r().createElement(p,{ariaLevel:2},r().createElement(v,null)))),r().createElement(p,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(v,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(g,null,r().createElement(p,{ariaLevel:2},r().createElement(v,null)))),r().createElement(p,{ariaLevel:1,itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"},r().createElement(v,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};x.displayName="ExpandedTree";var I=function(){return r().createElement(r().Fragment,null,r().createElement(p,{ariaLevel:1},r().createElement(v,null)),r().createElement(p,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},r().createElement(v,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(g,null,r().createElement(p,{ariaLevel:2,isSelected:!0,tabIndex:0},r().createElement(v,null)))),r().createElement(p,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(v,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(g,null,r().createElement(p,{ariaLevel:2},r().createElement(v,null)))),r().createElement(p,{ariaLevel:1},r().createElement(v,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};I.displayName="SelectedTree";var _=function(){return r().createElement(r().Fragment,null,r().createElement(p,{ariaLevel:1,tabIndex:0},r().createElement(v,null)),r().createElement(p,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},r().createElement(v,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(g,null,r().createElement(p,{ariaLevel:2},r().createElement(v,null)),r().createElement(p,{ariaLevel:2,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},r().createElement(v,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(g,null,r().createElement(p,{ariaLevel:3},r().createElement(v,null)),r().createElement(p,{ariaLevel:3},r().createElement(v,null)),r().createElement(p,{ariaLevel:3,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(v,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(g,null,r().createElement(p,{ariaLevel:4},r().createElement(v,null)))),r().createElement(p,{ariaLevel:3,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},r().createElement(v,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(g,null,r().createElement(p,{ariaLevel:4},r().createElement(v,null)),r().createElement(p,{ariaLevel:4},r().createElement(v,{itemLabel:"Another Tree Item with Really Really Long Text That Should Truncate"})),r().createElement(p,{ariaLevel:4},r().createElement(v,null)),r().createElement(p,{ariaLevel:4,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},r().createElement(v,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(g,null,r().createElement(p,{ariaLevel:5},r().createElement(v,null)),r().createElement(p,{ariaLevel:5},r().createElement(v,null)),r().createElement(p,{ariaLevel:5},r().createElement(v,null)))),r().createElement(p,{ariaLevel:4},r().createElement(v,null)))),r().createElement(p,{ariaLevel:3},r().createElement(v,null)))))),r().createElement(p,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(v,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(g,null,r().createElement(p,{ariaLevel:2},r().createElement(v,null)))),r().createElement(p,{ariaLevel:1},r().createElement(v,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};_.displayName="DeeplyNestedTree";var S=function(){return r().createElement(r().Fragment,null,r().createElement(p,{ariaLevel:1,tabIndex:0},r().createElement(v,null)),r().createElement(p,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},r().createElement(v,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(g,null,r().createElement(p,{ariaLevel:2,itemLabel:"Tree Item",metaTextLabel:"Tree Item Metatext with a Really Really Long Name That Should Truncate"},r().createElement(v,{itemLabel:"Tree Item",metaTextLabel:"Tree Item Metatext with a Really Really Long Name That Should Truncate"})))),r().createElement(p,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch",metaTextLabel:"Tree Branch Metatext"},r().createElement(v,{isBranch:!0,itemLabel:"Tree Branch",metaTextLabel:"Tree Branch Metatext"}),r().createElement(g,null,r().createElement(p,{ariaLevel:2},r().createElement(v,null)))),r().createElement(p,{ariaLevel:1},r().createElement(v,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};S.displayName="MetaTextTree";var N=function(){return r().createElement(r().Fragment,null,r().createElement(p,{ariaLevel:1,tabIndex:0},r().createElement(v,{className:"slds-is-hovered"})),r().createElement(p,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(v,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(g,null,r().createElement(p,{ariaLevel:2},r().createElement(v,null)))),r().createElement(p,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(v,{isBranch:!0,itemLabel:"Tree Branch"}),r().createElement(g,null,r().createElement(p,{ariaLevel:2},r().createElement(v,null)))),r().createElement(p,{ariaLevel:1,itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"},r().createElement(v,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};N.displayName="TreeWithItemHovered";var w=function(){return r().createElement(r().Fragment,null,r().createElement(p,{ariaLevel:1,isDisabled:!0},r().createElement(v,null)),r().createElement(p,{ariaLevel:1,isBranch:!0,isDisabled:!0,itemLabel:"Tree Branch"},r().createElement(v,{isBranch:!0,isDisabled:!0,itemLabel:"Tree Branch",metaTextLabel:"Tree Branch Metatext"}),r().createElement(g,null,r().createElement(p,{ariaLevel:2},r().createElement(v,null)))),r().createElement(p,{ariaLevel:1,tabIndex:0,isBranch:!0,itemLabel:"Tree Branch"},r().createElement(v,{isBranch:!0,itemLabel:"Tree Branch",metaTextLabel:"Tree Branch Metatext"}),r().createElement(g,null,r().createElement(p,{ariaLevel:2},r().createElement(v,null)))),r().createElement(p,{ariaLevel:1,itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"},r().createElement(v,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};w.displayName="TreeWithItemDisabled";var R=a(2711),k=a(5526),O=a(538),j=[{id:"default",label:"Default",element:r().createElement(y,null,r().createElement(T,{id:"treeheading"},"Tree Group Header"),r().createElement(f,{headerId:"treeheading"},r().createElement(B,null)))}],M=[{id:"expanded",label:"Expanded",element:r().createElement(y,null,r().createElement(T,{id:"treeheading"},"Tree Group Header"),r().createElement(f,{headerId:"treeheading"},r().createElement(x,null)))},{id:"selected",label:"Item Selected",element:r().createElement(y,null,r().createElement(T,{id:"treeheading"},"Tree Group Header"),r().createElement(f,{headerId:"treeheading"},r().createElement(I,null)))},{id:"deep-nesting",label:"Deeply nested branches",element:r().createElement(y,null,r().createElement(T,{id:"treeheading"},"Tree Group Header"),r().createElement(f,{headerId:"treeheading"},r().createElement(_,null)))},{id:"metatext",label:"Metatext",element:r().createElement(y,null,r().createElement(T,{id:"treeheading"},"Tree Group Header"),r().createElement(f,{headerId:"treeheading"},r().createElement(S,null)))},{id:"item-hovered",label:"Item Hovered",element:r().createElement(y,null,r().createElement(T,{id:"treeheading"},"Tree Group Header"),r().createElement(f,{headerId:"treeheading"},r().createElement(N,null)))},{id:"item-disabled",label:"Item Disabled",element:r().createElement(y,null,r().createElement(T,{id:"treeheading"},"Tree Group Header"),r().createElement(f,{headerId:"treeheading"},r().createElement(w,null)))}],D=[{id:"filterable-tree",label:"Fliterable Tree",element:r().createElement("div",null,r().createElement("div",{className:"slds-m-bottom_small"},r().createElement(R.ZS,{hasHiddenLabel:!0,hasLeftIcon:!0,inputId:"filter-id",labelContent:"Filter navigation items"},r().createElement(O.UtilityIcon,{className:"slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default",sprite:"utility",symbol:"search"}),r().createElement(k.A,{"aria-controls":"tree-id",id:"filter-id",placeholder:"Quick Find",type:"search"}))),r().createElement(y,null,r().createElement(T,{id:"treeheading"},"Components"),r().createElement(f,{headerId:"treeheading",id:"tree-id"},r().createElement(p,{ariaLevel:1,isBranch:!0,itemLabel:"lightning",tabIndex:0},r().createElement(v,{isBranch:!0,itemLabel:"lightning"}),r().createElement(g,null,r().createElement(p,{ariaLevel:2,itemLabel:"lightning-button"},r().createElement(v,{itemLabel:"lightning-button"})),r().createElement(p,{ariaLevel:2,itemLabel:"lightning-checkbox-button"},r().createElement(v,{itemLabel:"lightning-checkbox-button"})),r().createElement(p,{ariaLevel:2,itemLabel:"lightning-radio-button"},r().createElement(v,{itemLabel:"lightning-radio-button"})),r().createElement(p,{ariaLevel:2,itemLabel:"lightning-toggle",metaTextLabel:"vaiant a checkbox button"},r().createElement(v,{itemLabel:"lightning-toggle",metaTextLabel:"variant a checkbox button"})))),r().createElement(p,{ariaLevel:1,isBranch:!0,itemLabel:"ui"},r().createElement(v,{isBranch:!0,itemLabel:"ui"}),r().createElement(g,null,r().createElement(p,{ariaLevel:2,itemLabel:"ui:button"},r().createElement(v,{itemLabel:"ui:button"})),r().createElement(p,{ariaLevel:2,itemLabel:"ui:checkboxButton"},r().createElement(v,{itemLabel:"ui:checkboxButton"})),r().createElement(p,{ariaLevel:2,itemLabel:"ui:radioButton"},r().createElement(v,{itemLabel:"ui:radioButton"})))),r().createElement(p,{ariaLevel:1,isBranch:!0,itemLabel:"lightningcommunities",metaTextLabel:"Community components"},r().createElement(v,{isBranch:!0,itemLabel:"lightningcommunities",metaTextLabel:"Community components"}),r().createElement(g,null,r().createElement(p,{ariaLevel:2},r().createElement(v,null)))))))},{id:"filterabled-tree",label:"Flitered Tree",element:r().createElement("div",null,r().createElement("div",{className:"slds-m-bottom_small"},r().createElement(R.ZS,{hasHiddenLabel:!0,hasLeftIcon:!0,inputId:"filter-id",labelContent:"Filter navigation items"},r().createElement(O.UtilityIcon,{className:"slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default",sprite:"utility",symbol:"search"}),r().createElement(k.A,{"aria-controls":"tree-id",defaultValue:"butto",id:"filter-id",placeholder:"Quick Find",type:"search"}))),r().createElement(y,null,r().createElement(T,{id:"treeheading"},"Components"),r().createElement(f,{headerId:"treeheading",id:"tree-id"},r().createElement(p,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"lightning",tabIndex:0},r().createElement(v,{isBranch:!0,itemLabel:"lightning"}),r().createElement(g,null,r().createElement(p,{ariaLevel:2,itemLabel:"lightning-button"},r().createElement(v,{itemLabel:"lightning-button",termToMark:"butto"})),r().createElement(p,{ariaLevel:2,itemLabel:"lightning-checkbox-button"},r().createElement(v,{itemLabel:"lightning-checkbox-button",termToMark:"butto"})),r().createElement(p,{ariaLevel:2,itemLabel:"lightning-radio-button"},r().createElement(v,{itemLabel:"lightning-radio-button",termToMark:"butto"})),r().createElement(p,{ariaLevel:2,itemLabel:"lightning-toggle",metaTextLabel:"variant a checkbox button"},r().createElement(v,{itemLabel:"lightning-toggle",metaTextLabel:"variant a checkbox button",termToMark:"butto"})))),r().createElement(p,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"ui"},r().createElement(v,{isBranch:!0,itemLabel:"ui"}),r().createElement(g,null,r().createElement(p,{ariaLevel:2,itemLabel:"ui:button"},r().createElement(v,{itemLabel:"ui:button",termToMark:"butto"})),r().createElement(p,{ariaLevel:2,itemLabel:"ui:checkboxButton"},r().createElement(v,{itemLabel:"ui:checkboxButton",termToMark:"butto"})),r().createElement(p,{ariaLevel:2,itemLabel:"ui:radioButton"},r().createElement(v,{itemLabel:"ui:radioButton",termToMark:"butto"})))))))}]},1594:function(e){e.exports=React}},a={};function l(e){var r=a[e];if(void 0!==r)return r.exports;var n=a[e]={exports:{}};return t[e](n,n.exports,l),n.exports}l.m=t,l.amdO={},e=[],l.O=function(t,a,r,n){if(!a){var i=1/0;for(u=0;u<e.length;u++){a=e[u][0],r=e[u][1],n=e[u][2];for(var c=!0,m=0;m<a.length;m++)(!1&n||i>=n)&&Object.keys(l.O).every(function(e){return l.O[e](a[m])})?a.splice(m--,1):(c=!1,n<i&&(i=n));if(c){e.splice(u--,1);var o=r();void 0!==o&&(t=o)}}return t}n=n||0;for(var u=e.length;u>0&&e[u-1][2]>n;u--)e[u]=e[u-1];e[u]=[a,r,n]},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,{a:t}),t},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.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=6101,function(){var e={518:0,1117:0,1252:0,1578:0,1974:0,2033:0,2274:0,2782:0,3140:0,4268:0,4583:0,4723:0,4924:0,6101:0,6671:0,7217:0,7257:0,7385:0,7508:0,8167:0,8458:0};l.O.j=function(t){return 0===e[t]};var t=function(t,a){var r,n,i=a[0],c=a[1],m=a[2],o=0;if(i.some(function(t){return 0!==e[t]})){for(r in c)l.o(c,r)&&(l.m[r]=c[r]);if(m)var u=m(l)}for(t&&t(a);o<i.length;o++)n=i[o],l.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return l.O(u)},a=self.webpackJsonpSLDS___internal_chunked_showcase=self.webpackJsonpSLDS___internal_chunked_showcase||[];a.forEach(t.bind(null,0)),a.push=t.bind(null,a.push.bind(a))}(),l.nc=void 0;var r=l.O(void 0,[6790],function(){return l(1315)});r=l.O(r),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/showcase/./ui/components/trees/base/example.jsx.js"]=r}();