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

Salesforce Lightning Design System

var SLDS=SLDS||{};SLDS["__internal/chunked/showcase/ui/components/trees/base/example.jsx.js"]=function(e){function t(t){for(var l,i,m=t[0],u=t[1],d=t[2],s=0,o=[];s<m.length;s++)i=m[s],r[i]&&o.push(r[i][0]),r[i]=0;for(l in u)Object.prototype.hasOwnProperty.call(u,l)&&(e[l]=u[l]);for(c&&c(t);o.length;)o.shift()();return n.push.apply(n,d||[]),a()}function a(){for(var e,t=0;t<n.length;t++){for(var a=n[t],l=!0,m=1;m<a.length;m++){var u=a[m];0!==r[u]&&(l=!1)}l&&(n.splice(t--,1),e=i(i.s=a[0]))}return e}var l={},r={151:0,7:0,8:0,15:0,16:0,22:0,32:0,38:0,42:0,45:0,54:0,58:0,59:0,63:0,64:0,67:0,71:0,75:0,77:0,80:0,84:0,87:0,88:0,93:0,99:0,100:0,104:0,106:0,114:0,117:0,118:0,122:0,124:0,125:0,126:0,127:0,128:0,129:0,133:0,138:0,144:0,152:0,163:0,167:0,170:0,171:0,178:0,181:0,182:0},n=[];function i(t){if(l[t])return l[t].exports;var a=l[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,i),a.l=!0,a.exports}i.m=e,i.c=l,i.d=function(e,t,a){i.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:a})},i.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/assets/scripts/bundle/";var m=this.webpackJsonpSLDS___internal_chunked_showcase=this.webpackJsonpSLDS___internal_chunked_showcase||[],u=m.push.bind(m);m.push=t,m=m.slice();for(var d=0;d<m.length;d++)t(m[d]);var c=u;return n.push([228,0]),a()}({0:function(e,t){e.exports=React},227:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.MetaTextTree=t.DeeplyNestedTree=t.SelectedTree=t.ExpandedTree=t.DefaultTree=void 0;var l=function(e){return e&&e.__esModule?e:{default:e}}(a(0)),r=a(58);(t.DefaultTree=function(){return l.default.createElement(l.default.Fragment,null,l.default.createElement(r.TreeListItem,{ariaLevel:1,tabIndex:0},l.default.createElement(r.TreeItem,null)),l.default.createElement(r.TreeListItem,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},l.default.createElement(r.TreeItem,{isBranch:!0,itemLabel:"Tree Branch"}),l.default.createElement(r.TreeGroup,null,l.default.createElement(r.TreeListItem,{ariaLevel:2},l.default.createElement(r.TreeItem,null)))),l.default.createElement(r.TreeListItem,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},l.default.createElement(r.TreeItem,{isBranch:!0,itemLabel:"Tree Branch"}),l.default.createElement(r.TreeGroup,null,l.default.createElement(r.TreeListItem,{ariaLevel:2},l.default.createElement(r.TreeItem,null)))),l.default.createElement(r.TreeListItem,{ariaLevel:1,itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"},l.default.createElement(r.TreeItem,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))}).displayName="DefaultTree",(t.ExpandedTree=function(){return l.default.createElement(l.default.Fragment,null,l.default.createElement(r.TreeListItem,{ariaLevel:1,tabIndex:0},l.default.createElement(r.TreeItem,null)),l.default.createElement(r.TreeListItem,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},l.default.createElement(r.TreeItem,{isBranch:!0,itemLabel:"Tree Branch"}),l.default.createElement(r.TreeGroup,null,l.default.createElement(r.TreeListItem,{ariaLevel:2},l.default.createElement(r.TreeItem,null)))),l.default.createElement(r.TreeListItem,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},l.default.createElement(r.TreeItem,{isBranch:!0,itemLabel:"Tree Branch"}),l.default.createElement(r.TreeGroup,null,l.default.createElement(r.TreeListItem,{ariaLevel:2},l.default.createElement(r.TreeItem,null)))),l.default.createElement(r.TreeListItem,{ariaLevel:1,itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"},l.default.createElement(r.TreeItem,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))}).displayName="ExpandedTree",(t.SelectedTree=function(){return l.default.createElement(l.default.Fragment,null,l.default.createElement(r.TreeListItem,{ariaLevel:1},l.default.createElement(r.TreeItem,null)),l.default.createElement(r.TreeListItem,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},l.default.createElement(r.TreeItem,{isBranch:!0,itemLabel:"Tree Branch"}),l.default.createElement(r.TreeGroup,null,l.default.createElement(r.TreeListItem,{ariaLevel:2,isSelected:!0,tabIndex:0},l.default.createElement(r.TreeItem,null)))),l.default.createElement(r.TreeListItem,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},l.default.createElement(r.TreeItem,{isBranch:!0,itemLabel:"Tree Branch"}),l.default.createElement(r.TreeGroup,null,l.default.createElement(r.TreeListItem,{ariaLevel:2},l.default.createElement(r.TreeItem,null)))),l.default.createElement(r.TreeListItem,{ariaLevel:1},l.default.createElement(r.TreeItem,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))}).displayName="SelectedTree",(t.DeeplyNestedTree=function(){return l.default.createElement(l.default.Fragment,null,l.default.createElement(r.TreeListItem,{ariaLevel:1,tabIndex:0},l.default.createElement(r.TreeItem,null)),l.default.createElement(r.TreeListItem,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},l.default.createElement(r.TreeItem,{isBranch:!0,itemLabel:"Tree Branch"}),l.default.createElement(r.TreeGroup,null,l.default.createElement(r.TreeListItem,{ariaLevel:2},l.default.createElement(r.TreeItem,null)),l.default.createElement(r.TreeListItem,{ariaLevel:2,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},l.default.createElement(r.TreeItem,{isBranch:!0,itemLabel:"Tree Branch"}),l.default.createElement(r.TreeGroup,null,l.default.createElement(r.TreeListItem,{ariaLevel:3},l.default.createElement(r.TreeItem,null)),l.default.createElement(r.TreeListItem,{ariaLevel:3},l.default.createElement(r.TreeItem,null)),l.default.createElement(r.TreeListItem,{ariaLevel:3,isBranch:!0,itemLabel:"Tree Branch"},l.default.createElement(r.TreeItem,{isBranch:!0,itemLabel:"Tree Branch"}),l.default.createElement(r.TreeGroup,null,l.default.createElement(r.TreeListItem,{ariaLevel:4},l.default.createElement(r.TreeItem,null)))),l.default.createElement(r.TreeListItem,{ariaLevel:3,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},l.default.createElement(r.TreeItem,{isBranch:!0,itemLabel:"Tree Branch"}),l.default.createElement(r.TreeGroup,null,l.default.createElement(r.TreeListItem,{ariaLevel:4},l.default.createElement(r.TreeItem,null)),l.default.createElement(r.TreeListItem,{ariaLevel:4},l.default.createElement(r.TreeItem,{itemLabel:"Another Tree Item with Really Really Long Text That Should Truncate"})),l.default.createElement(r.TreeListItem,{ariaLevel:4},l.default.createElement(r.TreeItem,null)),l.default.createElement(r.TreeListItem,{ariaLevel:4,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},l.default.createElement(r.TreeItem,{isBranch:!0,itemLabel:"Tree Branch"}),l.default.createElement(r.TreeGroup,null,l.default.createElement(r.TreeListItem,{ariaLevel:5},l.default.createElement(r.TreeItem,null)),l.default.createElement(r.TreeListItem,{ariaLevel:5},l.default.createElement(r.TreeItem,null)),l.default.createElement(r.TreeListItem,{ariaLevel:5},l.default.createElement(r.TreeItem,null)))),l.default.createElement(r.TreeListItem,{ariaLevel:4},l.default.createElement(r.TreeItem,null)))),l.default.createElement(r.TreeListItem,{ariaLevel:3},l.default.createElement(r.TreeItem,null)))))),l.default.createElement(r.TreeListItem,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},l.default.createElement(r.TreeItem,{isBranch:!0,itemLabel:"Tree Branch"}),l.default.createElement(r.TreeGroup,null,l.default.createElement(r.TreeListItem,{ariaLevel:2},l.default.createElement(r.TreeItem,null)))),l.default.createElement(r.TreeListItem,{ariaLevel:1},l.default.createElement(r.TreeItem,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))}).displayName="DeeplyNestedTree",(t.MetaTextTree=function(){return l.default.createElement(l.default.Fragment,null,l.default.createElement(r.TreeListItem,{ariaLevel:1,tabIndex:0},l.default.createElement(r.TreeItem,null)),l.default.createElement(r.TreeListItem,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},l.default.createElement(r.TreeItem,{isBranch:!0,itemLabel:"Tree Branch"}),l.default.createElement(r.TreeGroup,null,l.default.createElement(r.TreeListItem,{ariaLevel:2,itemLabel:"Tree Item",metaTextLabel:"Tree Item Metatext with a Really Really Long Name That Should Truncate"},l.default.createElement(r.TreeItem,{itemLabel:"Tree Item",metaTextLabel:"Tree Item Metatext with a Really Really Long Name That Should Truncate"})))),l.default.createElement(r.TreeListItem,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch",metaTextLabel:"Tree Branch Metatext"},l.default.createElement(r.TreeItem,{isBranch:!0,itemLabel:"Tree Branch",metaTextLabel:"Tree Branch Metatext"}),l.default.createElement(r.TreeGroup,null,l.default.createElement(r.TreeListItem,{ariaLevel:2},l.default.createElement(r.TreeItem,null)))),l.default.createElement(r.TreeListItem,{ariaLevel:1},l.default.createElement(r.TreeItem,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))}).displayName="MetaTextTree"},228:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.examples=t.states=void 0;var l=function(e){return e&&e.__esModule?e:{default:e}}(a(0)),r=a(58),n=a(227),i=a(7),m=a(9),u=a(6);t.default=l.default.createElement(r.TreeContainer,null,l.default.createElement(r.TreeHeader,{id:"treeheading"},"Tree Group Header"),l.default.createElement(r.TreeList,{headerId:"treeheading"},l.default.createElement(n.DefaultTree,null)));t.states=[{id:"expanded",label:"Expanded",element:l.default.createElement(r.TreeContainer,null,l.default.createElement(r.TreeHeader,{id:"treeheading"},"Tree Group Header"),l.default.createElement(r.TreeList,{headerId:"treeheading"},l.default.createElement(n.ExpandedTree,null)))},{id:"selected",label:"Item Selected",element:l.default.createElement(r.TreeContainer,null,l.default.createElement(r.TreeHeader,{id:"treeheading"},"Tree Group Header"),l.default.createElement(r.TreeList,{headerId:"treeheading"},l.default.createElement(n.SelectedTree,null)))},{id:"deep-nesting",label:"Deeply nested branches",element:l.default.createElement(r.TreeContainer,null,l.default.createElement(r.TreeHeader,{id:"treeheading"},"Tree Group Header"),l.default.createElement(r.TreeList,{headerId:"treeheading"},l.default.createElement(n.DeeplyNestedTree,null)))},{id:"metatext",label:"Metatext",element:l.default.createElement(r.TreeContainer,null,l.default.createElement(r.TreeHeader,{id:"treeheading"},"Tree Group Header"),l.default.createElement(r.TreeList,{headerId:"treeheading"},l.default.createElement(n.MetaTextTree,null)))}],t.examples=[{id:"filterable-tree",label:"Fliterable Tree",element:l.default.createElement("div",null,l.default.createElement("div",{className:"slds-m-bottom_small"},l.default.createElement(i.FormElement,{hasHiddenLabel:!0,hasLeftIcon:!0,inputId:"filter-id",labelContent:"Filter navigation items"},l.default.createElement(u.UtilityIcon,{className:"slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default",sprite:"utility",symbol:"search"}),l.default.createElement(m.Input,{"aria-controls":"tree-id",id:"filter-id",placeholder:"Quick Find",type:"search"}))),l.default.createElement(r.TreeContainer,null,l.default.createElement(r.TreeHeader,{id:"treeheading"},"Components"),l.default.createElement(r.TreeList,{headerId:"treeheading",id:"tree-id"},l.default.createElement(r.TreeListItem,{ariaLevel:1,isBranch:!0,itemLabel:"lightning",tabIndex:0},l.default.createElement(r.TreeItem,{isBranch:!0,itemLabel:"lightning"}),l.default.createElement(r.TreeGroup,null,l.default.createElement(r.TreeListItem,{ariaLevel:2,itemLabel:"lightning-button"},l.default.createElement(r.TreeItem,{itemLabel:"lightning-button"})),l.default.createElement(r.TreeListItem,{ariaLevel:2,itemLabel:"lightning-checkbox-button"},l.default.createElement(r.TreeItem,{itemLabel:"lightning-checkbox-button"})),l.default.createElement(r.TreeListItem,{ariaLevel:2,itemLabel:"lightning-radio-button"},l.default.createElement(r.TreeItem,{itemLabel:"lightning-radio-button"})),l.default.createElement(r.TreeListItem,{ariaLevel:2,itemLabel:"lightning-toggle",metaTextLabel:"vaiant a checkbox button"},l.default.createElement(r.TreeItem,{itemLabel:"lightning-toggle",metaTextLabel:"variant a checkbox button"})))),l.default.createElement(r.TreeListItem,{ariaLevel:1,isBranch:!0,itemLabel:"ui"},l.default.createElement(r.TreeItem,{isBranch:!0,itemLabel:"ui"}),l.default.createElement(r.TreeGroup,null,l.default.createElement(r.TreeListItem,{ariaLevel:2,itemLabel:"ui:button"},l.default.createElement(r.TreeItem,{itemLabel:"ui:button"})),l.default.createElement(r.TreeListItem,{ariaLevel:2,itemLabel:"ui:checkboxButton"},l.default.createElement(r.TreeItem,{itemLabel:"ui:checkboxButton"})),l.default.createElement(r.TreeListItem,{ariaLevel:2,itemLabel:"ui:radioButton"},l.default.createElement(r.TreeItem,{itemLabel:"ui:radioButton"})))),l.default.createElement(r.TreeListItem,{ariaLevel:1,isBranch:!0,itemLabel:"lightningcommunities",metaTextLabel:"Community components"},l.default.createElement(r.TreeItem,{isBranch:!0,itemLabel:"lightningcommunities",metaTextLabel:"Community components"}),l.default.createElement(r.TreeGroup,null,l.default.createElement(r.TreeListItem,{ariaLevel:2},l.default.createElement(r.TreeItem,null)))))))},{id:"filterabled-tree",label:"Flitered Tree",element:l.default.createElement("div",null,l.default.createElement("div",{className:"slds-m-bottom_small"},l.default.createElement(i.FormElement,{hasHiddenLabel:!0,hasLeftIcon:!0,inputId:"filter-id",labelContent:"Filter navigation items"},l.default.createElement(u.UtilityIcon,{className:"slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default",sprite:"utility",symbol:"search"}),l.default.createElement(m.Input,{"aria-controls":"tree-id",defaultValue:"butto",id:"filter-id",placeholder:"Quick Find",type:"search"}))),l.default.createElement(r.TreeContainer,null,l.default.createElement(r.TreeHeader,{id:"treeheading"},"Components"),l.default.createElement(r.TreeList,{headerId:"treeheading",id:"tree-id"},l.default.createElement(r.TreeListItem,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"lightning",tabIndex:0},l.default.createElement(r.TreeItem,{isBranch:!0,itemLabel:"lightning"}),l.default.createElement(r.TreeGroup,null,l.default.createElement(r.TreeListItem,{ariaLevel:2,itemLabel:"lightning-button"},l.default.createElement(r.TreeItem,{itemLabel:"lightning-button",termToMark:"butto"})),l.default.createElement(r.TreeListItem,{ariaLevel:2,itemLabel:"lightning-checkbox-button"},l.default.createElement(r.TreeItem,{itemLabel:"lightning-checkbox-button",termToMark:"butto"})),l.default.createElement(r.TreeListItem,{ariaLevel:2,itemLabel:"lightning-radio-button"},l.default.createElement(r.TreeItem,{itemLabel:"lightning-radio-button",termToMark:"butto"})),l.default.createElement(r.TreeListItem,{ariaLevel:2,itemLabel:"lightning-toggle",metaTextLabel:"vaiant a checkbox button"},l.default.createElement(r.TreeItem,{itemLabel:"lightning-toggle",metaTextLabel:"variant a checkbox button",termToMark:"butto"})))),l.default.createElement(r.TreeListItem,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"ui"},l.default.createElement(r.TreeItem,{isBranch:!0,itemLabel:"ui"}),l.default.createElement(r.TreeGroup,null,l.default.createElement(r.TreeListItem,{ariaLevel:2,itemLabel:"ui:button"},l.default.createElement(r.TreeItem,{itemLabel:"ui:button",termToMark:"butto"})),l.default.createElement(r.TreeListItem,{ariaLevel:2,itemLabel:"ui:checkboxButton"},l.default.createElement(r.TreeItem,{itemLabel:"ui:checkboxButton",termToMark:"butto"})),l.default.createElement(r.TreeListItem,{ariaLevel:2,itemLabel:"ui:radioButton"},l.default.createElement(r.TreeItem,{itemLabel:"ui:radioButton",termToMark:"butto"})))))))}]},58:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.TreeContainer=t.TreeGroup=t.TreeList=t.TreeHeader=t.TreeListItem=t.TreeItem=void 0;var l=function(){function e(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,l.key,l)}}return function(t,a,l){return a&&e(t.prototype,a),l&&e(t,l),t}}(),r=a(0),n=c(r),i=c(a(3)),m=c(a(1)),u=c(a(2)),d=a(5);function c(e){return e&&e.__esModule?e:{default:e}}var s=t.TreeItem=function(e){var t=function(t){return e.termToMark?n.default.createElement("span",{dangerouslySetInnerHTML:{__html:function(e,t){return e.replace(new RegExp(t,"gi"),function(e){return"<mark>"+e+"</mark>"})}(t,e.termToMark)}}):n.default.createElement(n.default.Fragment,null,t)};return n.default.createElement("div",{className:"slds-tree__item"},n.default.createElement(u.default,{"aria-hidden":"true",assistiveText:"Expand "+e.itemLabel,className:(0,m.default)("slds-m-right_x-small",!e.isBranch&&"slds-is-disabled"),iconClassName:"slds-button__icon_small",symbol:"chevronright",tabIndex:"-1",title:"Expand "+e.itemLabel}),n.default.createElement("span",{className:"slds-has-flexi-truncate"},n.default.createElement("span",{className:"slds-tree__item-label slds-truncate",title:e.itemLabel},t(e.itemLabel)),e.metaTextLabel&&n.default.createElement("span",{className:"slds-tree__item-meta slds-truncate",title:e.metaTextLabel},n.default.createElement("span",{className:"slds-assistive-text"},":"),t(e.metaTextLabel))),e.children)};s.displayName="TreeItem",s.propTypes={children:i.default.node,isBranch:i.default.bool,itemLabel:i.default.string,metaTextLabel:i.default.string,termToMark:i.default.string},s.defaultProps={itemLabel:"Tree Item"};var o=t.TreeListItem=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){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,r.Component),l(t,[{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,r=e.isExpanded,i=e.isSelected,m=e.itemLabel,u=e.metaTextLabel;return n.default.createElement("li",{"aria-expanded":l?r||!1:null,"aria-label":l?this.getBranchAriaLabel(m,u):null,"aria-level":t,"aria-selected":i,role:"treeitem",tabIndex:a},this.props.children)}}]),t}();o.displayName="TreeListItem",o.propTypes={ariaLevel:i.default.number.isRequired,children:i.default.node.isRequired,isBranch:(0,d.IsDependentOn)("itemLabel",i.default.bool),isExpanded:(0,d.IsDependentOn)("isBranch",i.default.bool),isSelected:i.default.bool,itemLabel:i.default.string,metaTextLabel:(0,d.IsDependentOn)("itemLabel",i.default.string),tabIndex:i.default.number};var f=t.TreeHeader=function(e){return n.default.createElement("h4",{className:"slds-tree__group-header",id:e.id},e.children)};f.displayName="TreeHeader",f.propTypes={children:i.default.node,id:i.default.string.isRequired};var T=t.TreeList=function(e){return n.default.createElement("ul",{"aria-labelledby":e.headerId,className:"slds-tree",id:e.id,role:"tree"},e.children)};T.displayName="TreeList",T.propTypes={children:i.default.node,headerId:i.default.string,id:i.default.string};var L=t.TreeGroup=function(e){return n.default.createElement("ul",{role:"group"},e.children)};L.displayName="TreeGroup",L.propTypes={children:i.default.node};var h=t.TreeContainer=function(e){return n.default.createElement("div",{className:"slds-tree_container"},e.children)};h.displayName="TreeContainer",h.propTypes={children:i.default.node}}});