@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1 lines • 40.9 kB
JavaScript
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}();