@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1 lines • 46.7 kB
JavaScript
var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/data-tables/docs.mdx.js"]=function(e){function t(t){for(var l,r,o=t[0],c=t[1],d=t[2],m=0,u=[];m<o.length;m++)r=o[m],Object.prototype.hasOwnProperty.call(n,r)&&n[r]&&u.push(n[r][0]),n[r]=0;for(l in c)Object.prototype.hasOwnProperty.call(c,l)&&(e[l]=c[l]);for(s&&s(t);u.length;)u.shift()();return i.push.apply(i,d||[]),a()}function a(){for(var e,t=0;t<i.length;t++){for(var a=i[t],l=!0,o=1;o<a.length;o++){var c=a[o];0!==n[c]&&(l=!1)}l&&(i.splice(t--,1),e=r(r.s=a[0]))}return e}var l={},n={24:0},i=[];function r(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,r),a.l=!0,a.exports}r.m=e,r.c=l,r.d=function(e,t,a){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(r.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)r.d(a,l,function(t){return e[t]}.bind(null,l));return a},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],c=o.push.bind(o);o.push=t,o=o.slice();for(var d=0;d<o.length;d++)t(o[d]);var s=c;return i.push([723,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},723:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return ee})),a.d(t,"getContents",(function(){return te}));var l=a(0),n=a.n(l),i=a(4),r=a(2),o=(a(27),a(14)),c=a(1),d=a(6),s=[{id:"default",label:"Default",element:n.a.createElement(d.s,{isBordered:!0,hasCellBuffer:!0,type:"base",ariaLabel:"Example default base table of Opportunities"},n.a.createElement(d.q,null,n.a.createElement(d.g,null)),n.a.createElement(d.o,null,n.a.createElement(d.l,{title:"Cloudhub"}),n.a.createElement(d.l,{title:"Cloudhub + Anypoint Connectors"})))}],m=[{id:"data-table-striped-rows",label:"With striped rows",element:n.a.createElement(d.s,{isBordered:!0,isStriped:!0,hasCellBuffer:!0,type:"base",ariaLabel:"Example table of Opportunities with striped rows"},n.a.createElement(d.q,null,n.a.createElement(d.g,null)),n.a.createElement(d.o,null,n.a.createElement(d.l,{title:"Cloudhub"}),n.a.createElement(d.l,{title:"Cloudhub + Anypoint Connectors"}),n.a.createElement(d.l,{title:"Cloudhub"})))},{id:"data-table-no-hover",label:"With no row hovers",element:n.a.createElement(d.s,{isBordered:!0,hasCellBuffer:!0,hasNoRowHover:!0,type:"base",ariaLabel:"Example table of Opportunities with no row hovers"},n.a.createElement(d.q,null,n.a.createElement(d.g,null)),n.a.createElement(d.o,null,n.a.createElement(d.l,{title:"Cloudhub"}),n.a.createElement(d.l,{title:"Cloudhub + Anypoint Connectors"})))},{id:"data-table-vertical-borders",label:"With vertical borders",element:n.a.createElement(d.s,{isBordered:!0,isColBordered:!0,hasCellBuffer:!0,type:"base",ariaLabel:"Example table of Opportunities with vertical borders"},n.a.createElement(d.q,null,n.a.createElement(d.g,null)),n.a.createElement(d.o,null,n.a.createElement(d.l,{title:"Cloudhub"}),n.a.createElement(d.l,{title:"Cloudhub + Anypoint Connectors"})))},{id:"single-column",label:"Single Column",element:n.a.createElement(d.s,{isBordered:!0,hasCellBuffer:!0,type:"base",ariaLabel:"Example table of Opportunities with a single column"},n.a.createElement(d.q,null,n.a.createElement(d.r,null,n.a.createElement(d.c,null,n.a.createElement(d.b,{columnName:"Opportunity Name"})))),n.a.createElement(d.o,null,n.a.createElement(d.p,null,n.a.createElement(d.t,{"data-label":"Opportunity Name",type:"base"},n.a.createElement(d.j,{cellLink:!0,cellText:"Cloudhub"}))),n.a.createElement(d.p,null,n.a.createElement(d.t,{"data-label":"Opportunity Name",type:"base"},n.a.createElement(d.j,{cellLink:!0,cellText:"Cloudhub + Anypoint Connectors"})))))},{id:"no-borders",label:"No borders",element:n.a.createElement(d.s,{isStriped:!0,hasCellBuffer:!0,type:"base",ariaLabel:"Example table of Opportunities with no borders"},n.a.createElement(d.q,null,n.a.createElement(d.g,null)),n.a.createElement(d.o,null,n.a.createElement(d.l,{title:"Cloudhub"}),n.a.createElement(d.l,{title:"Cloudhub + Anypoint Connectors"}),n.a.createElement(d.l,{title:"Cloudhub"})))},{id:"headless",label:"Headless",element:n.a.createElement(d.s,{hasHiddenHeader:!0,isBordered:!0,hasCellBuffer:!0,type:"base",ariaLabel:"Example headless table of Opportunities"},n.a.createElement(d.q,{isHidden:!0},n.a.createElement(d.g,null)),n.a.createElement(d.o,null,n.a.createElement(d.l,{title:"Cloudhub"}),n.a.createElement(d.l,{title:"Cloudhub + Anypoint Connectors"}),n.a.createElement(d.l,{title:"Cloudhub"})))},{id:"headless-no-borders",label:"Headless with no borders",element:n.a.createElement(d.s,{hasHiddenHeader:!0,hasCellBuffer:!0,type:"base",ariaLabel:" Example headless table of Opportunities with no borders "},n.a.createElement(d.q,{isHidden:!0},n.a.createElement(d.g,null)),n.a.createElement(d.o,null,n.a.createElement(d.l,{title:"Cloudhub"}),n.a.createElement(d.l,{title:"Cloudhub + Anypoint Connectors"}),n.a.createElement(d.l,{title:"Cloudhub"})))},{id:"cell-content-truncated",label:"Cell content truncated",demoStyles:"max-width: 600px;",storybookStyles:!0,element:n.a.createElement(d.s,{isBordered:!0,isStriped:!0,hasCellBuffer:!0,isFixedLayout:!0,type:"base",ariaLabel:" Example headless table of Opportunities with cell content truncated "},n.a.createElement(d.q,null,n.a.createElement(d.r,null,n.a.createElement(d.c,null,n.a.createElement(d.b,{columnName:"Typical Column Header"})),n.a.createElement(d.c,null,n.a.createElement(d.b,{columnName:"Truncated, no wrap"})),n.a.createElement(d.c,null,n.a.createElement(d.b,{columnName:"Typical Column Header"})))),n.a.createElement(d.o,null,n.a.createElement(d.p,null,n.a.createElement(d.m,{"data-label":"Typical Column Header"},n.a.createElement(d.j,{cellText:"Typical cell content"})),n.a.createElement(d.t,{"data-label":"Truncated, no wrap",type:"base",hasWrap:!0},n.a.createElement(d.j,{cellText:d.u})),n.a.createElement(d.t,{"data-label":"Typical Column Header",type:"base"},n.a.createElement(d.j,{cellText:"Typical cell content"})))))},{id:"cell-content-wrapped",label:"Cell content wrapped",demoStyles:"max-width: 600px;",storybookStyles:!0,element:n.a.createElement(d.s,{isBordered:!0,isStriped:!0,hasCellBuffer:!0,isFixedLayout:!0,type:"base",ariaLabel:" Example headless table of Opportunities with cell content wrapped "},n.a.createElement(d.q,null,n.a.createElement(d.r,null,n.a.createElement(d.c,null,n.a.createElement(d.b,{columnName:"Typical Column Header"})),n.a.createElement(d.c,null,n.a.createElement(d.b,{columnName:"Wrapped, line clamped"})),n.a.createElement(d.c,null,n.a.createElement(d.b,{columnName:"Typical Column Header"})))),n.a.createElement(d.o,null,n.a.createElement(d.p,null,n.a.createElement(d.m,{"data-label":"Typical Column Header"},n.a.createElement(d.j,{cellText:"Typical cell content"})),n.a.createElement(d.t,{"data-label":"Wrapped, line clamped",type:"base",hasWrap:!0},n.a.createElement(d.j,{cellText:d.u,hasWrap:!0})),n.a.createElement(d.t,{"data-label":"Typical Column Header",type:"base"},n.a.createElement(d.j,{cellText:"Typical cell content"})))))},{id:"data-table-aria-labelledby",label:"Using aria-labelledby instead of aria-label",element:n.a.createElement(n.a.Fragment,null,n.a.createElement("h2",{id:"element-with-table-label",className:"slds-text-heading_medium slds-m-bottom_xx-small"},"Example data table of Opportunities"),n.a.createElement("h3",{id:"other-element-with-table-label",className:"slds-text-title slds-m-bottom_small"},"Using ",n.a.createElement("code",null,"aria-labelledby"),", instead of aria-label"),n.a.createElement(d.s,{isBordered:!0,hasCellBuffer:!0,type:"base",ariaLabelledBy:"element-with-table-label other-element-with-table-label"},n.a.createElement(d.q,null,n.a.createElement(d.g,null)),n.a.createElement(d.o,null,n.a.createElement(d.l,{title:"Cloudhub"}),n.a.createElement(d.l,{title:"Cloudhub + Anypoint Connectors"}))))}],u=a(150),b=a(35),p=a(3),E=a.n(p),h=a(151),y=a(81),f=a(17),v=a(8),g=function(e){var t=Object(l.useContext)(d.d).isActionableMode;return n.a.createElement(d.p,{isSelected:e.isSelected},n.a.createElement(d.t,{isRightAligned:!0,type:"advanced"},n.a.createElement(d.n,{checked:e.isSelected,hasSingleRowSelect:e.hasSingleRowSelect,index:e.index,inputTabIndex:t?"0":"-1"})),n.a.createElement(d.m,{hasFocus:!t&&1===e.index&&e.hasFocus,tabIndex:t||1!==e.index?null:"0"},n.a.createElement(d.j,{cellLink:!0,cellText:e.recordName})),n.a.createElement(d.t,{type:"advanced"},n.a.createElement(d.j,{cellText:e.accountName})),n.a.createElement(d.t,{type:"advanced"},n.a.createElement(d.j,{cellText:e.closeDate})),n.a.createElement(d.t,{type:"advanced"},n.a.createElement(d.j,{cellText:e.stage})),n.a.createElement(d.t,{type:"advanced"},n.a.createElement(d.j,{cellText:e.confidence})),e.hasScores&&e.amountScore&&e.amountScoreLabel?n.a.createElement(d.t,{type:"advanced"},n.a.createElement("div",{className:"slds-grid slds-grid_vertical-align-center"},n.a.createElement("div",{className:"slds-truncate",title:e.amount},e.amount),n.a.createElement("div",{className:"slds-icon_container slds-m-left_x-small slds-m-right_xx-small"},n.a.createElement(h.a,{"data-slds-state":e.amountScore})),n.a.createElement("div",{className:"slds-truncate",title:e.amountScoreLabel},e.amountScoreLabel))):n.a.createElement(d.t,{type:"advanced"},n.a.createElement(d.j,{cellText:e.amount})),n.a.createElement(d.t,{type:"advanced"},n.a.createElement(d.j,{cellLink:!0,cellText:e.contact})),e.hasRowActions&&n.a.createElement(d.t,{type:"advanced"},n.a.createElement(d.k,{rowName:e.recordName})))};g.displayName="AdvancedDataTableTr",g.propTypes={accountName:E.a.string.isRequired,amount:E.a.string.isRequired,amountScore:Object(c.b)("amountScoreLabel",E.a.string),amountScoreLabel:Object(c.b)("amountScore",E.a.string),closeDate:E.a.string.isRequired,confidence:E.a.string.isRequired,contact:E.a.string.isRequired,hasFocus:E.a.bool,hasRowActions:E.a.bool,hasScores:E.a.bool,index:E.a.number.isRequired,hasSingleRowSelect:E.a.bool,recordName:E.a.string.isRequired,isSelected:E.a.bool,stage:E.a.string.isRequired},g.defaultProps={hasRowActions:!0};var w=function(e){return n.a.createElement("div",{className:"slds-size_xx-small"},n.a.createElement("img",{alt:e.productName,src:e.productImgSrc,title:e.productName}))};w.displayName="ProductImage",w.propTypes={productImgSrc:E.a.string.isRequired,productName:E.a.string.isRequired};var x=function(e){return n.a.createElement(n.a.Fragment,null,n.a.createElement("p",null,n.a.createElement("s",null,e.priceOriginal)),n.a.createElement("p",null,e.priceDiscount))};x.displayName="ProductPriceCell",x.propTypes={priceDiscount:E.a.string.isRequired,priceOriginal:E.a.string.isRequired};var C=function(e){return n.a.createElement(y.a,{figureLeft:n.a.createElement(w,{productImgSrc:e.productImgSrc,productName:e.productName})},n.a.createElement(d.j,{cellLink:!0,cellText:e.productName}),n.a.createElement("ul",null,e.productProperties.map((function(e,t){return n.a.createElement("li",{className:"slds-truncate",key:t,title:"".concat(e.label,": ").concat(e.value)},e.label,": ",n.a.createElement("strong",null,e.value))}))),n.a.createElement("p",{className:"slds-text-color_success"},e.labelInventory))};C.displayName="ProductItemDetailsCell",C.propTypes={labelInventory:E.a.string.isRequired,productImgSrc:E.a.string.isRequired,productName:E.a.string.isRequired,productProperties:E.a.array.isRequired};var S=function(e){var t=Object(l.useContext)(d.d).isActionableMode;return n.a.createElement(v.b,{inputId:e.inputId,labelClassName:"slds-assistive-text",labelContent:e.labelText},n.a.createElement(f.a,{className:"slds-size_xxx-small slds-text-align_center slds-p-horizontal_x-small",defaultValue:e.quantity,id:e.inputId,placeholder:" ",tabIndex:t?null:"-1"}))};S.displayName="ProductQuantityCell",S.propTypes={labelText:E.a.string.isRequired,inputId:E.a.string.isRequired,quantity:E.a.string};var O=function(e){return n.a.createElement(d.p,{isTopAligned:!0},n.a.createElement(d.m,null,n.a.createElement(C,{labelInventory:e.labelInventory,productImgSrc:e.productImgSrc,productName:e.productName,productProperties:e.productProperties})),n.a.createElement(d.t,{type:"advanced"},n.a.createElement(S,{inputId:"product-quantity-text-input-id-".concat(e.index),labelText:"".concat(e.productName," quantity"),quantity:e.quantity})),n.a.createElement(d.t,{type:"advanced"},n.a.createElement(d.j,{cellText:e.dateAdded})),n.a.createElement(d.t,{type:"advanced"},n.a.createElement(x,{priceDiscount:e.priceDiscount,priceOriginal:e.priceOriginal})),n.a.createElement(d.t,{type:"advanced"},n.a.createElement(d.k,{rowName:e.productName})))};function N(){return(N=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var l in a)Object.prototype.hasOwnProperty.call(a,l)&&(e[l]=a[l])}return e}).apply(this,arguments)}O.displayName="ProductDataTableTr",O.propTypes={dateAdded:E.a.string.isRequired,index:E.a.number.isRequired,labelInventory:E.a.string.isRequired,priceDiscount:E.a.string.isRequired,priceOriginal:E.a.string.isRequired,productImgSrc:E.a.string.isRequired,productName:E.a.string.isRequired,productProperties:E.a.array.isRequired,quantity:E.a.string};var j=["Name","Account Name","Close Date","Stage","Confidence","Amount","Contact"],T=[{recordName:"Acme - 1,200 Widgets",accountName:"Acme",closeDate:"4/10/15",stage:"Value Proposition",confidence:"30%",amount:"$25,000,000",contact:"jrogers@acme.com",amountScore:"positive",amountScoreLabel:"High"},{recordName:"Acme - 200 Widgets",accountName:"Acme",closeDate:"1/31/15",stage:"Prospecting",confidence:"60%",amount:"$5,000,000",contact:"bob@acme.com"},{recordName:"salesforce.com - 1,000 Widgets",accountName:"salesforce.com",closeDate:"1/31/15 3:45PM",stage:"Id. Decision Makers",confidence:"70%",amount:"$25,000",contact:"nathan@salesforce.com",amountScore:"negative",amountScoreLabel:"Low"}],R=[].concat(T).reverse(),A=[{column:"account name",icon:n.a.createElement(b.a,{assistiveText:"Account",className:"slds-icon_x-small",containerClassName:"slds-m-right_xx-small",symbol:"account",title:"Account"})},{column:"confidence",icon:n.a.createElement("div",{className:"slds-icon_container slds-m-right_xx-small"},n.a.createElement(u.a,{assistiveText:"Einstein calculated",className:"slds-is-paused",title:"Einstein calculated"}))}],L=(d.s,d.a,d.o,T.map((function(e,t){return n.a.createElement(g,N({isSelected:!1,key:t,index:t+1},e))})),[{id:"cell-focused",label:"Cell Focused",element:n.a.createElement(d.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced table of Opportunities with cell focused"},n.a.createElement(d.a,{columns:j}),n.a.createElement(d.o,null,T.map((function(e,t){return n.a.createElement(g,N({isSelected:!1,key:t,index:t+1},e,{hasFocus:!0}))}))))},{id:"actionable-mode",label:"Actionable Mode",element:n.a.createElement(d.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced table of Opportunities in actionable mode"},n.a.createElement(d.d.Provider,{value:{isActionableMode:!0}},n.a.createElement(d.a,{columns:j}),n.a.createElement(d.o,null,T.map((function(e,t){return n.a.createElement(g,N({index:t+1,isSelected:!1,key:t},e))})))))},{id:"row-selected",label:"Row Selected (Actionable mode)",element:n.a.createElement(d.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced table of Opportunities in actionable mode with row selected"},n.a.createElement(d.d.Provider,{value:{isActionableMode:!0}},n.a.createElement(d.a,{columns:j}),n.a.createElement(d.o,null,T.map((function(e,t){return n.a.createElement(g,N({index:t+1,isSelected:1===t,key:t},e))})))))},{id:"all-row-selected",label:"All Rows Selected (Actionable mode)",element:n.a.createElement(d.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced table of Opportunities in actionable mode with all rows selected"},n.a.createElement(d.d.Provider,{value:{isActionableMode:!0}},n.a.createElement(d.a,{columns:j,selectAll:!0}),n.a.createElement(d.o,null,T.map((function(e,t){return n.a.createElement(g,N({index:t+1,isSelected:!0,key:t},e))})))))},{id:"sorted-column-asc",label:"Sorted Ascending (Actionable mode)",element:n.a.createElement(d.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced table of Opportunities in actionable mode with ascending column sorting"},n.a.createElement(d.d.Provider,{value:{isActionableMode:!0}},n.a.createElement(d.a,{columns:j,sortDirection:"ascending"}),n.a.createElement(d.o,null,T.map((function(e,t){return n.a.createElement(g,N({index:t+1,isSelected:!1,key:t},e))})))))},{id:"sorted-column-desc",label:"Sorted Descending (Actionable mode)",element:n.a.createElement(d.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced table of Opportunities in actionable mode with descending column sorting"},n.a.createElement(d.d.Provider,{value:{isActionableMode:!0}},n.a.createElement(d.a,{columns:j,sortDirection:"descending"}),n.a.createElement(d.o,null,R.map((function(e,t){return n.a.createElement(g,N({index:t+1,isSelected:!1,key:t},e))})))))},{id:"resized-column",label:"Column Resized (Actionable mode)",element:n.a.createElement(d.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced table of Opportunities in actionable mode with resized column"},n.a.createElement(d.d.Provider,{value:{isActionableMode:!0}},n.a.createElement(d.a,{columns:j,singleColumnWidth:"300px"}),n.a.createElement(d.o,null,T.map((function(e,t){return n.a.createElement(g,N({index:t+1,isSelected:!1,key:t},e))})))))}]),k=[{id:"header-icon-menu-button",label:"Header Icon and Menu Button",element:n.a.createElement(d.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced table of Opportunities with header icon and menu button"},n.a.createElement(d.a,{columnHeaderIcons:A,columns:j,hasMenus:!0}),n.a.createElement(d.o,null,T.map((function(e,t){return n.a.createElement(g,N({isSelected:!1,key:t,index:t+1},e))}))))},{id:"header-menu-button",label:"Header Menu Button",element:n.a.createElement(d.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced table of Opportunities with header menu button"},n.a.createElement(d.a,{columns:j,hasMenus:!0}),n.a.createElement(d.o,null,T.map((function(e,t){return n.a.createElement(g,N({isSelected:!1,key:t,index:t+1},e))}))))},{id:"cell-icon",label:"Cell Icon",element:n.a.createElement(d.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced table of Opportunities with cell icon"},n.a.createElement(d.a,{columns:j}),n.a.createElement(d.o,null,T.map((function(e,t){return n.a.createElement(g,N({isSelected:!1,key:t,index:t+1},e,{hasScores:!0}))}))))},{id:"product-listing",label:"Product Listing",element:n.a.createElement(d.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced table as product listing"},n.a.createElement(d.d.Provider,{value:{isActionableMode:!0}},n.a.createElement(d.a,{columns:["Product","Quantity","Date Added","Price"],hasNoRowSelection:!0}),n.a.createElement(d.o,null,[{productImgSrc:"/assets/images/product1.jpg",productName:"Baseball Cap",productProperties:[{label:"Size",value:"7 3/4"},{label:"Color",value:"Blue"},{label:"Item No.",value:"1007100"}],labelInventory:"In Stock",quantity:"1",dateAdded:"4/10/17",priceOriginal:"$23.00",priceDiscount:"$20.00"},{productImgSrc:"/assets/images/product2.jpg",productName:"Construction Hat",productProperties:[{label:"Size",value:"One size fits most"},{label:"Color",value:"Yellow"},{label:"Item No.",value:"2800100"}],labelInventory:"In Stock",quantity:"1",dateAdded:"4/10/17",priceOriginal:"$52.00",priceDiscount:"$40.00"},{productImgSrc:"/assets/images/product3.jpg",productName:"Campaign Hat",productProperties:[{label:"Size",value:"Small"},{label:"Color",value:"Tan"},{label:"Item No.",value:"2000100"}],labelInventory:"In Stock",quantity:"1",dateAdded:"4/10/17",priceOriginal:"$79.00",priceDiscount:"$59.00"}].map((function(e,t){return n.a.createElement(O,N({isSelected:!1,key:t,index:t+1},e))})))))},{id:"radio-group",label:"Radio Group",element:n.a.createElement(d.s,{isBordered:!0,isFixedLayout:!0,isResizable:!0,type:"advanced",ariaLabel:"Example advanced table as radio group"},n.a.createElement(d.a,{columns:j,hasSingleRowSelect:!0}),n.a.createElement(d.o,null,T.map((function(e,t){return n.a.createElement(g,N({hasSingleRowSelect:!0,index:t+1,key:t},e))}))))},{id:"data-table-no-borders",label:"No borders",element:n.a.createElement(d.s,{isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced table with no borders"},n.a.createElement(d.a,{columns:j}),n.a.createElement(d.o,null,T.map((function(e,t){return n.a.createElement(g,N({isSelected:!1,key:t,index:t+1},e))}))))},{id:"data-table-headless",label:"Headless",element:n.a.createElement(d.s,{hasHiddenHeader:!0,isBordered:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced headless table"},n.a.createElement(d.a,{isHidden:!0,columns:j}),n.a.createElement(d.o,null,T.map((function(e,t){return n.a.createElement(g,N({isSelected:!1,key:t,index:t+1},e))}))))},{id:"data-table-headless-no-borders",label:"Headless with no borders",element:n.a.createElement(d.s,{hasHiddenHeader:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example advanced headless border-less table"},n.a.createElement(d.a,{isHidden:!0,columns:j}),n.a.createElement(d.o,null,T.map((function(e,t){return n.a.createElement(g,N({isSelected:!1,key:t,index:t+1},e))}))))}];function q(){return(q=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var l in a)Object.prototype.hasOwnProperty.call(a,l)&&(e[l]=a[l])}return e}).apply(this,arguments)}var B=function(e){return n.a.createElement("div",q({className:"demo-only"},e),e.children)};B.propTypes={children:E.a.node};var I=function(e){var t=Object(l.useContext)(d.d).isActionableMode;return n.a.createElement(d.p,{isSelected:e.isSelected},n.a.createElement(d.t,{hasFocus:"error"===e.focusedCell,isEditable:!0,isErrorCell:!0,type:"advanced"},n.a.createElement(d.f,{hasError:e.showRowError,index:e.index})),n.a.createElement(d.t,{hasFocus:"selectRow"===e.focusedCell,isEditable:!0,tabIndex:t||"selectRow"!==e.focusableCell?null:"0",type:"advanced"},n.a.createElement(d.n,{checked:e.isSelected,index:e.index,inputTabIndex:t?"0":"-1"})),n.a.createElement(d.m,{hasFocus:"recordName"===e.focusedCell,isEditable:!0,tabIndex:t||"recordName"!==e.focusableCell?null:"0"},n.a.createElement(d.e,{buttonText:"Edit Name of "+e.recordName,cellLink:!0,cellText:e.recordName,index:e.index})),n.a.createElement(d.t,{hasError:e.showCellError,hasFocus:"accountName"===e.focusedCell,isEditable:!0,isEdited:e.showEditedCell,isEditing:e.showEdit,isLocked:e.isLocked,tabIndex:t||"accountName"!==e.focusableCell?null:"0",type:"advanced"},n.a.createElement(d.e,{buttonText:"Edit Account Name of "+e.recordName,cellText:e.accountName,hasError:e.showEditError,index:e.index,isLocked:e.isLocked,isRequired:e.showEditRequired,showEdit:e.showEdit,isEdited:e.showEditedCell})),n.a.createElement(d.t,{isEditable:!0,type:"advanced"},n.a.createElement(d.e,{buttonText:"Edit Close Date of "+e.recordName,cellText:e.closeDate,index:e.index})),n.a.createElement(d.t,{isEditable:!0,type:"advanced"},n.a.createElement(d.e,{buttonText:"Edit Stage of "+e.recordName,cellText:e.stage,index:e.index})),n.a.createElement(d.t,{isEditable:!0,isLocked:!0,type:"advanced"},n.a.createElement(d.e,{buttonText:"Edit Confidence of "+e.recordName,cellText:e.confidence,index:e.index,isLocked:!0})),n.a.createElement(d.t,{isEditable:!0,type:"advanced"},n.a.createElement(d.e,{buttonText:"Edit Amount of "+e.recordName,cellText:e.amount,index:e.index})),n.a.createElement(d.t,{isEditable:!0,type:"advanced"},n.a.createElement(d.e,{buttonText:"Edit Contact of "+e.recordName,cellText:e.contact,index:e.index})),n.a.createElement(d.t,{isEditable:!0,type:"advanced"},n.a.createElement(d.k,{isEditable:!0,rowName:e.recordName})))};I.displayName="InlineEditTr",I.propTypes={accountName:E.a.string.isRequired,amount:E.a.string.isRequired,closeDate:E.a.string.isRequired,confidence:E.a.string.isRequired,contact:E.a.string.isRequired,focusableCell:E.a.string,focusedCell:E.a.string,index:E.a.number.isRequired,isLocked:E.a.bool,recordName:E.a.string.isRequired,isSelected:E.a.bool,showCellError:Object(c.b)("showRowError",E.a.bool),showEdit:E.a.bool,showEditError:E.a.bool,showEditRequired:E.a.bool,showEditedCell:E.a.bool,showRowError:E.a.bool,stage:E.a.string.isRequired};var P=a(51),D=a(72);function F(){return(F=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var l in a)Object.prototype.hasOwnProperty.call(a,l)&&(e[l]=a[l])}return e}).apply(this,arguments)}var H=c.d.uniqueId("dialog-heading-id-"),z=["Name","Account Name","Close Date","Stage","Confidence","Amount","Contact"],M=[{recordName:"Acme - 1,200 Widgets",accountName:"Acme",closeDate:"4/10/15",stage:"Value Proposition",confidence:"30%",amount:"$25,000,000",contact:"jrogers@acme.com"},{recordName:"Acme - 200 Widgets",accountName:"Acme",closeDate:"1/31/15",stage:"Prospecting",confidence:"60%",amount:"$5,000,000",contact:"bob@acme.com"},{recordName:"salesforce.com - 1,000 Widgets",accountName:"salesforce.com",closeDate:"1/31/15 3:45PM",stage:"Id. Decision Makers",confidence:"70%",amount:"$25,000",contact:"nathan@salesforce.com"}],_=function(){return n.a.createElement(d.h,null,n.a.createElement(d.s,{isBordered:!0,isEditable:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",style:{width:"66.75rem"},type:"advanced",ariaLabel:"Example inline edit table"},n.a.createElement(d.d.Provider,{value:{isActionableMode:!0}},n.a.createElement(d.a,{columns:z,hasErrorColumn:!0,mainColumnWidth:"8.75rem"}),n.a.createElement(d.o,null,M.map((function(e,t){return n.a.createElement(I,F({focusedCell:0===t?"recordName":null,index:t+1,isSelected:!1,key:t},e))}))))))},W=[{id:"default",label:"Default",element:n.a.createElement(d.h,null,n.a.createElement(d.s,{hasNoCellFocus:!0,isBordered:!0,isEditable:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",style:{width:"66.75rem"},type:"advanced",ariaLabel:"Example default inline edit table with cell focused"},n.a.createElement(d.a,{columns:z,hasErrorColumn:!0,mainColumnWidth:"8.75rem"}),n.a.createElement(d.o,null,M.map((function(e,t){return n.a.createElement(I,F({focusableCell:"recordName",index:t+1,isSelected:!1,key:t},e))})))))}],$=[{id:"with-link",label:"Cell focused - Link (Actionable mode)",element:n.a.createElement(_,null),script:"\n document.getElementById('link-01').focus()\n "},{id:"checkbox",label:"Cell focused - Checkbox (Actionable mode)",element:n.a.createElement(d.h,null,n.a.createElement(d.s,{isBordered:!0,isEditable:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",style:{width:"66.75rem"},type:"advanced",ariaLabel:"Example inline edit table in actionable mode with checkbox cell focused"},n.a.createElement(d.d.Provider,{value:{isActionableMode:!0}},n.a.createElement(d.a,{columns:z,hasErrorColumn:!0,mainColumnWidth:"8.75rem"}),n.a.createElement(d.o,null,M.map((function(e,t){return n.a.createElement(I,F({focusedCell:0===t?"selectRow":null,index:t+1,isSelected:!1,key:t},e))})))))),script:"\n document.getElementById('checkbox-01').focus()\n "},{id:"focused",label:"Cell focused (Navigation mode)",element:n.a.createElement(d.h,null,n.a.createElement(d.s,{isBordered:!0,isEditable:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",style:{width:"66.75rem"},type:"advanced",ariaLabel:"Example inline edit table in navigation mode with cell focused"},n.a.createElement(d.a,{columns:z,hasErrorColumn:!0,mainColumnWidth:"8.75rem"}),n.a.createElement(d.o,null,M.map((function(e,t){return n.a.createElement(I,F({focusableCell:0===t?"accountName":null,focusedCell:0===t?"accountName":null,index:t+1,isSelected:!1,key:t},e))})))))},{id:"edit",label:"Cell edit (Actionable mode)",element:n.a.createElement(d.h,null,n.a.createElement(d.s,{isBordered:!0,isEditable:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",style:{width:"66.75rem"},type:"advanced",ariaLabel:"Example inline edit table in actionable mode with cell edit"},n.a.createElement(d.d.Provider,{value:{isActionableMode:!0}},n.a.createElement(d.a,{columns:z,hasErrorColumn:!0,mainColumnWidth:"8.75rem"}),n.a.createElement(d.o,null,M.map((function(e,t){return n.a.createElement(I,F({index:t+1,isSelected:!1,key:t,showEdit:0===t},e))})))))),script:"\n document.getElementById('company-01').focus()\n document.getElementById('company-01').select()\n "},{id:"required",label:"Cell edit — Required (Actionable mode)",element:n.a.createElement(d.h,null,n.a.createElement(d.s,{isBordered:!0,isEditable:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",style:{width:"66.75rem"},type:"advanced",ariaLabel:"Example inline edit table in actionable mode with required cell edit"},n.a.createElement(d.d.Provider,{value:{isActionableMode:!0}},n.a.createElement(d.a,{columns:z,hasErrorColumn:!0,mainColumnWidth:"8.75rem"}),n.a.createElement(d.o,null,M.map((function(e,t){return n.a.createElement(I,F({index:t+1,isSelected:!1,key:t,showEdit:0===t,showEditRequired:!0},e))})))))),script:"\n document.getElementById('company-01').focus()\n document.getElementById('company-01').select()\n "},{id:"error",label:"Cell edit — Error (Actionable mode)",element:n.a.createElement(d.h,null,n.a.createElement(d.s,{isBordered:!0,isEditable:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",style:{width:"66.75rem"},type:"advanced",ariaLabel:"Example inline edit table in actionable mode with cell error"},n.a.createElement(d.d.Provider,{value:{isActionableMode:!0}},n.a.createElement(d.a,{columns:z,hasErrorColumn:!0,mainColumnWidth:"8.75rem"}),n.a.createElement(d.o,null,M.map((function(e,t){return n.a.createElement(I,F({index:t+1,isSelected:!1,key:t,showEdit:0===t,showEditError:!0,showEditRequired:!0},e))})))))),script:"\n document.getElementById('company-01').focus()\n document.getElementById('company-01').select()\n "},{id:"edited",label:"Cell edited (Actionable mode)",element:n.a.createElement(d.h,null,n.a.createElement(d.s,{isBordered:!0,isEditable:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",style:{width:"66.75rem"},type:"advanced",ariaLabel:"Example inline edit table in actionable mode with cell edited"},n.a.createElement(d.d.Provider,{value:{isActionableMode:!0}},n.a.createElement(d.a,{columns:z,hasErrorColumn:!0,mainColumnWidth:"8.75rem"}),n.a.createElement(d.o,null,M.map((function(e,t){return n.a.createElement(I,F({index:t+1,isSelected:!1,key:t,showEditedCell:0===t},e))}))))))},{id:"row-selected-with-edited-cell",label:"Row Selected with an Edited Cell",element:n.a.createElement(d.h,null,n.a.createElement(d.s,{isBordered:!0,isEditable:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",style:{width:"66.75rem"},type:"advanced",ariaLabel:"Example inline edit table in actionable mode with cell edited in selected row"},n.a.createElement(d.d.Provider,{value:{isActionableMode:!0}},n.a.createElement(d.a,{columns:z,hasErrorColumn:!0,mainColumnWidth:"8.75rem"}),n.a.createElement(d.o,null,M.map((function(e,t){return n.a.createElement(I,F({className:0===t?"slds-is-selected":null,index:t+1,isSelected:0===t,key:t,showEditedCell:0===t},e))}))))))},{id:"row-error",label:"Error - Row level on save (Actionable mode)",element:n.a.createElement(d.h,null,n.a.createElement(d.s,{isBordered:!0,isEditable:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",style:{width:"66.75rem"},type:"advanced",ariaLabel:"Example inline edit table in actionable mode with cell error on save"},n.a.createElement(d.d.Provider,{value:{isActionableMode:!0}},n.a.createElement(d.a,{columns:z,hasErrorColumn:!0,mainColumnWidth:"8.75rem"}),n.a.createElement(d.o,null,M.map((function(e,t){return n.a.createElement(I,F({focusedCell:0===t?"accountName":null,index:t+1,isSelected:!1,key:t,showCellError:0===t,showRowError:0===t},e))})))))),script:"\n document.getElementById('button-01').focus()\n "},{id:"row-error-and-selected",label:"Error - Row level on save (Actionable mode) with entire row selected",element:n.a.createElement(d.h,null,n.a.createElement(d.s,{isBordered:!0,isEditable:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",style:{width:"66.75rem"},type:"advanced",ariaLabel:"Example inline edit table in actionable mode with cell error on save in selected row"},n.a.createElement(d.d.Provider,{value:{isActionableMode:!0}},n.a.createElement(d.a,{columns:z,hasErrorColumn:!0,mainColumnWidth:"8.75rem"}),n.a.createElement(d.o,null,M.map((function(e,t){return n.a.createElement(I,F({className:0===t?"slds-is-selected":null,index:t+1,isSelected:0===t,key:t,showCellError:0===t,showRowError:0===t},e))}))))))},{id:"row-error-focused",label:"Error indicator - Focused (Actionable mode)",element:n.a.createElement(B,{style:{marginTop:"100px",marginLeft:"10px"}},n.a.createElement(d.h,null,n.a.createElement(d.s,{isBordered:!0,isEditable:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",style:{width:"66.75rem"},type:"advanced",ariaLabel:"Example inline edit table in actionable mode with error indicator focused"},n.a.createElement(d.d.Provider,{value:{isActionableMode:!0}},n.a.createElement(d.a,{columns:z,hasErrorColumn:!0,mainColumnWidth:"8.75rem"}),n.a.createElement(d.o,null,M.map((function(e,t){return n.a.createElement(I,F({focusedCell:0===t?"error":null,index:t+1,isSelected:!1,key:t,showCellError:0===t,showRowError:0===t},e))}))))),n.a.createElement(P.a,{className:"slds-popover_error slds-nubbin_bottom-left",closeButton:!0,header:n.a.createElement(D.b,{headingId:H,symbol:"error",title:"Resolve error"}),headingId:H,inverse:!0,style:{position:"absolute",top:"-56px"}},n.a.createElement("p",null,"Company encountered an error")))),script:"\n document.getElementById('error-01').focus()\n "},{id:"header-cell-focused",label:"Header cell focused (Navigation mode)",element:n.a.createElement(d.h,null,n.a.createElement(d.s,{isBordered:!0,isEditable:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",style:{width:"66.75rem"},type:"advanced",ariaLabel:"Example inline edit table in navigation mode with header cell focused"},n.a.createElement(d.a,{columns:z,hasErrorColumn:!0,hasFocus:!0,mainColumnWidth:"8.75rem"}),n.a.createElement(d.o,null,M.map((function(e,t){return n.a.createElement(I,{accountName:M[t].accountName,amount:M[t].amount,closeDate:M[t].closeDate,confidence:M[t].confidence,contact:M[t].contact,index:t+1,isSelected:!1,key:t,recordName:M[t].recordName,stage:M[t].stage})})))))},{id:"header-cell-marked",label:"Header cell marked (Navigation mode)",element:n.a.createElement(d.h,null,n.a.createElement(d.s,{hasNoCellFocus:!0,isBordered:!0,isEditable:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",style:{width:"66.75rem"},type:"advanced",ariaLabel:"Example inline edit table in navigation mode with header cell marked"},n.a.createElement(d.a,{columns:z,hasErrorColumn:!0,hasFocus:!0,mainColumnWidth:"8.75rem"}),n.a.createElement(d.o,null,M.map((function(e,t){return n.a.createElement(I,{accountName:M[t].accountName,amount:M[t].amount,closeDate:M[t].closeDate,confidence:M[t].confidence,contact:M[t].contact,index:t+1,isSelected:!1,key:t,recordName:M[t].recordName,stage:M[t].stage})})))))}],G=i.c.a,J=i.c.code,V=i.c.h2,K=i.c.h3,Q=i.c.h4,U=i.c.li,Y=i.c.p,X=i.c.strong,Z=i.c.ul,ee=function(){return Object(l.createElement)(i.b,{},Object(l.createElement)("div",{className:"doc lead"},"Data tables are an enhanced version of an HTML table and are used to display tabular data."),Object(l.createElement)(r.a,{exampleOnly:!0,demoStyles:"overflow: hidden;"},Object(c.f)(L,"actionable-mode")),V({id:"About-Data-Tables"},"About Data Tables"),Y({},"To initialize a data table, apply the ",J({},"slds-table")," class to the ",J({},"table")," element. This class creates a ",J({},"table")," with formatted cells and allows you to use data table utilities."),K({id:"Accessibility"},"Accessibility"),Q({id:"Headers"},"Headers"),Y({},"To create an accessible table, the top row of column headers (",J({},"th"),") are placed in a ",J({},"thead"),". Each one receives the ",J({},'scope="col"')," attribute. The first non-actionable (meaning that doesn't contain a checkbox or menu) column in each row should be marked as a th with a ",J({},'scope="row"')," attribute."),Q({id:"Labeling"},"Labeling"),Y({},"To give additional context, like a caption or description, to a table for screen readers, the attributes ",J({},"aria-labelledby")," or ",J({},"aria-label")," can be used on the ",J({},"table")," element."),Y({},"For ",J({},"aria-label"),", set the description as the attribute value. Alternatively, if another element, or elements, can serve this purpose for the table, then set the value of ",J({},"aria-labelledby")," with the ",J({},"id")," of the element[s]."),Y({},"This example shows ",J({},"aria-labelledby")," set with the ",J({},"id"),"s of two separate elements to make up the label."),Object(l.createElement)(r.a,null,Object(c.f)(m,"data-table-aria-labelledby")),V({id:"Base"},"Base"),Object(l.createElement)(r.a,null,Object(c.f)(s)),K({id:"Striped-rows"},"Striped rows"),Object(l.createElement)(r.a,null,Object(c.f)(m,"data-table-striped-rows")),K({id:"Columns-dividers"},"Columns dividers"),Object(l.createElement)(r.a,null,Object(c.f)(m,"data-table-vertical-borders")),K({id:"Rows-with-no-hover"},"Rows with no hover"),Object(l.createElement)(r.a,null,Object(c.f)(m,"data-table-no-hover")),K({id:"Single-Column-table"},"Single Column table"),Object(l.createElement)(r.a,null,Object(c.f)(m,"single-column")),K({id:"Headless"},"Headless"),Object(l.createElement)(r.a,null,Object(c.f)(m,"headless")),Q({id:"With-no-borders"},"With no borders"),Object(l.createElement)(r.a,null,Object(c.f)(m,"headless-no-borders")),V({id:"Actionable-mode-Column-sorting-and-row-selection(s)"},"Actionable mode - Column sorting and row selection(s)"),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)(L,"actionable-mode")),K({id:"Single-row-selection"},"Single row selection"),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)(k,"radio-group")),K({id:"Navigation-mode-Cell-focused"},"Navigation mode - Cell focused"),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)(L,"cell-focused")),K({id:"Row-Selection"},"Row Selection"),Q({id:"Single-row-selected"},"Single row selected"),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)(L,"row-selected")),Q({id:"All-rows-selected"},"All rows selected"),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)(L,"all-row-selected")),K({id:"Column-sorting"},"Column sorting"),Object(l.createElement)(o.a,{type:"a11y",header:"Accessibility Note"},Object(l.createElement)("p",null,'The assistive text for the sort action contains `aria-live="polite"` so screen reader doesn\'t disrupt itself from announcing what the user is interacting with.')),Q({id:"Sorted-Ascending"},"Sorted Ascending"),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)(L,"sorted-column-asc")),Q({id:"Sorted-Descending"},"Sorted Descending"),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)(L,"sorted-column-desc")),K({id:"Column-resizing"},"Column resizing"),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)(L,"resized-column")),K({id:"Column-headers-with-overflow-actions-button-menu"},"Column headers with overflow actions button menu"),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)(k,"header-menu-button")),K({id:"Column-with-icons"},"Column with icons"),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)(k,"header-icon-menu-button")),K({id:"Cell-with-icons"},"Cell with icons"),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)(k,"cell-icon")),V({id:"Inline-Edit"},"Inline Edit"),K({id:"Accessibility-2"},"Accessibility"),Y({},"The Advanced Data Table and Inline Edit Data Table are based on the semantics, roles and interaction model of the ARIA Grid. In SLDS we overlay the ",G({href:"http://w3c.github.io/aria/practices/aria-practices.html#grid"},"ARIA Grid")," on top of native HTML table semantics."),Y({},"The role of Grid comes with 2 distinct modes, Navigation mode and Actionable mode. Both come with very specific keyboard interaction modals. Navigation mode is the default mode of the Grid."),Y({},"Bold text for edited cell examples provide secondary indicators for text, along with yellow backgrounds, to indicate content is edited but unsaved."),Y({},X({},"Navigation Mode")),Z({},U({},"Tabbing into the grid focuses the first data cell in the table."),U({},"The second tab key press takes the user focus out of the grid onto the next focusable element on the page."),U({},"Once the user has tabbed out of the grid, tabbing back into the grid will return focus to the last cell the user was focused on."),U({},"Navigation in the grid is accomplished via the arrow keys."),U({},"No actionable items in cell contents are focusable."),U({},"Pressing the Enter key on a chosen grid cell, places the entire Grid into Actionable mode.")),Y({},X({},"Actionable Mode")),Z({},U({},"Once in Actionable mode, all focusable items in the entire grid can be tabbed to."),U({},"Arrow navigation still takes the user cell to cell in any direction, but focuses on the first actionable item in the cell, if there is one."),U({},"Pressing the Escape key exits Actionable mode, placing the user back into Navigation mode, keeping the users cursor on the same cell they were focused in."),U({},"When interacting with a component in a cell, such as a Menu, that also uses the Escape key as an exit action, pressing Escape will take the user back to the triggering element in the current cell. A subsequent press of Escape will return the user to Navigation mode.")),Y({},"For the purposes of these docs, the Default state of Inline Edit is representative of Navigation mode, all other states are assumed to be in Actionable Mode."),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)(W)),K({id:"Keyboard-navigation"},"Keyboard navigation"),Q({id:"1st-cell-highlighted-(checkbox)"},"1st cell highlighted (checkbox)"),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"checkbox")),Q({id:"2nd-cell-highlighted"},"2nd cell highlighted"),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"with-link")),Q({id:"3rd-cell-highlighted"},"3rd cell highlighted"),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"focused")),K({id:"Cell-Edit"},"Cell Edit"),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"edit")),Q({id:"Required-form-element"},"Required form element"),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"required")),Q({id:"Required-form-element-with-error"},"Required form element with error"),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"error")),Q({id:"Edited-cell-(unsaved)"},"Edited cell (unsaved)"),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"edited")),Q({id:"Edited-cell-with-row-selected-(unsaved)"},"Edited cell with row selected (unsaved)"),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"row-selected-with-edited-cell")),Q({id:"Edited-cell-with-row-level-error-(unsaved)"},"Edited cell with row level error (unsaved)"),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"row-error")),Q({id:"Edited-cell-with-focused-row-level-error-(unsaved)"},"Edited cell with focused row level error (unsaved)"),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"row-error-focused")),Q({id:"Edited-cell-with-row-selected-and-row-level-error-(unsaved)"},"Edited cell with row selected and row level error (unsaved)"),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"row-error-and-selected")),K({id:"Header-navigation"},"Header navigation"),Q({id:"Header-cell-focused"},"Header cell focused"),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"header-cell-focused")),Q({id:"Header-cell-marked"},"Header cell marked"),Object(l.createElement)(r.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"header-cell-marked")),K({id:"Cell-Content"},"Cell Content"),Y({},"As a default method, wrap any table cell content in a ",J({},"<div>"),"."),Q({id:"Truncated"},"Truncated"),Y({},"Add the ",J({},"slds-truncate")," class to truncate any content that might overflow the tables cell area."),Object(l.createElement)(r.a,{demoStyles:Object(c.e)(m,"cell-content-truncated")},Object(c.f)(m,"cell-content-truncated")),Q({id:"Wrapped"},"Wrapped"),Y({},"In those cases where long cell content is anticipated, use the ",J({},"slds-cell-wrap")," class on the cell ",J({},"<td>")," to have the text wrap within the cell’s width."),Y({},"Also, use the ",J({},"slds-line-clamp")," class on the content-wrapping ",J({},"<div>")," to clamp, or truncate, the cell content after a certain amount of lines. Other ",G({href:"/utilities/line-clamp"},"line clamping classes")," can be used in place for various line clamping limits. The clamping limit can also be changed by reassigning a value to the ",J({},"line-clamp")," token."),Object(l.createElement)(r.a,{demoStyles:Object(c.e)(m,"cell-content-wrapped")},Object(c.f)(m,"cell-content-wrapped")))},te=function(){return Object(i.a)(ee())}}});