npm - @salesforce-ux/design-system - Versions diffs - 2.17.0 → 2.17.4 - Mend

@salesforce-ux/design-system 2.17.0 → 2.17.4

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

Files changed (967) hide show

package/__internal/chunked/docs/ui/components/data-tables/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- 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,i,o=t[0],c=t[1],d=t[2],m=0,u=[];m<o.length;m++)i=o[m],Object.prototype.hasOwnProperty.call(n,i)&&n[i]&&u.push(n[i][0]),n[i]=0;for(l in c)Object.prototype.hasOwnProperty.call(c,l)&&(e[l]=c[l]);for(s&&s(t);u.length;)u.shift()();return r.push.apply(r,d\|\|[]),a()}function a(){for(var e,t=0;t<r.length;t++){for(var a=r[t],l=!0,o=1;o<a.length;o++){var c=a[o];0!==n[c]&&(l=!1)}l&&(r.splice(t--,1),e=i(i.s=a[0]))}return e}var l={},n={24:0},r=[];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,{enumerable:!0,get:a})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)i.d(a,l,function(t){return e[t]}.bind(null,l));return a},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 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 r.push([658,0]),a()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},658: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),r=a(4),i=a(2),o=(a(25),a(14)),c=a(1),d=a(6),s=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(139),b=a(32),p=a(3),E=a.n(p),h=a(140),y=a(77),f=a(16),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})),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(59),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=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=r.c.a,J=r.c.code,V=r.c.h2,K=r.c.h3,Q=r.c.h4,U=r.c.li,Y=r.c.p,X=r.c.strong,Z=r.c.ul,ee=function(){return Object(l.createElement)(r.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)(i.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)(i.a,null,Object(c.f)(m,"data-table-aria-labelledby")),V({id:"Base"},"Base"),Object(l.createElement)(i.a,null,Object(c.f)(s)),K({id:"Striped-rows"},"Striped rows"),Object(l.createElement)(i.a,null,Object(c.f)(m,"data-table-striped-rows")),K({id:"Columns-dividers"},"Columns dividers"),Object(l.createElement)(i.a,null,Object(c.f)(m,"data-table-vertical-borders")),K({id:"Rows-with-no-hover"},"Rows with no hover"),Object(l.createElement)(i.a,null,Object(c.f)(m,"data-table-no-hover")),K({id:"Single-Column-table"},"Single Column table"),Object(l.createElement)(i.a,null,Object(c.f)(m,"single-column")),K({id:"Headless"},"Headless"),Object(l.createElement)(i.a,null,Object(c.f)(m,"headless")),Q({id:"With-no-borders"},"With no borders"),Object(l.createElement)(i.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)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)(L,"actionable-mode")),K({id:"Single-row-selection"},"Single row selection"),Object(l.createElement)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)(k,"radio-group")),K({id:"Navigation-mode-Cell-focused"},"Navigation mode - Cell focused"),Object(l.createElement)(i.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)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)(L,"row-selected")),Q({id:"All-rows-selected"},"All rows selected"),Object(l.createElement)(i.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)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)(L,"sorted-column-asc")),Q({id:"Sorted-Descending"},"Sorted Descending"),Object(l.createElement)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)(L,"sorted-column-desc")),K({id:"Column-resizing"},"Column resizing"),Object(l.createElement)(i.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)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)(k,"header-menu-button")),K({id:"Column-with-icons"},"Column with icons"),Object(l.createElement)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)(k,"header-icon-menu-button")),K({id:"Cell-with-icons"},"Cell with icons"),Object(l.createElement)(i.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({},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)(i.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)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"checkbox")),Q({id:"2nd-cell-highlighted"},"2nd cell highlighted"),Object(l.createElement)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"with-link")),Q({id:"3rd-cell-highlighted"},"3rd cell highlighted"),Object(l.createElement)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"focused")),K({id:"Cell-Edit"},"Cell Edit"),Object(l.createElement)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"edit")),Q({id:"Required-form-element"},"Required form element"),Object(l.createElement)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"required")),Q({id:"Required-form-element-with-error"},"Required form element with error"),Object(l.createElement)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"error")),Q({id:"Edited-cell-(unsaved)"},"Edited cell (unsaved)"),Object(l.createElement)(i.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)(i.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)(i.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)(i.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)(i.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)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"header-cell-focused")),Q({id:"Header-cell-marked"},"Header cell marked"),Object(l.createElement)(i.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)(i.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)(i.a,{demoStyles:Object(c.e)(m,"cell-content-wrapped")},Object(c.f)(m,"cell-content-wrapped")))},te=function(){return Object(r.a)(ee())}}});
1	+ 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,i,o=t[0],c=t[1],d=t[2],m=0,u=[];m<o.length;m++)i=o[m],Object.prototype.hasOwnProperty.call(n,i)&&n[i]&&u.push(n[i][0]),n[i]=0;for(l in c)Object.prototype.hasOwnProperty.call(c,l)&&(e[l]=c[l]);for(s&&s(t);u.length;)u.shift()();return r.push.apply(r,d\|\|[]),a()}function a(){for(var e,t=0;t<r.length;t++){for(var a=r[t],l=!0,o=1;o<a.length;o++){var c=a[o];0!==n[c]&&(l=!1)}l&&(r.splice(t--,1),e=i(i.s=a[0]))}return e}var l={},n={24:0},r=[];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,{enumerable:!0,get:a})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)i.d(a,l,function(t){return e[t]}.bind(null,l));return a},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 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 r.push([658,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},658: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),r=a(4),i=a(2),o=(a(26),a(14)),c=a(1),d=a(6),s=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(140),b=a(33),p=a(3),E=a.n(p),h=a(141),y=a(78),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})),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(60),D=a(73);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=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=r.c.a,J=r.c.code,V=r.c.h2,K=r.c.h3,Q=r.c.h4,U=r.c.li,Y=r.c.p,X=r.c.strong,Z=r.c.ul,ee=function(){return Object(l.createElement)(r.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)(i.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)(i.a,null,Object(c.f)(m,"data-table-aria-labelledby")),V({id:"Base"},"Base"),Object(l.createElement)(i.a,null,Object(c.f)(s)),K({id:"Striped-rows"},"Striped rows"),Object(l.createElement)(i.a,null,Object(c.f)(m,"data-table-striped-rows")),K({id:"Columns-dividers"},"Columns dividers"),Object(l.createElement)(i.a,null,Object(c.f)(m,"data-table-vertical-borders")),K({id:"Rows-with-no-hover"},"Rows with no hover"),Object(l.createElement)(i.a,null,Object(c.f)(m,"data-table-no-hover")),K({id:"Single-Column-table"},"Single Column table"),Object(l.createElement)(i.a,null,Object(c.f)(m,"single-column")),K({id:"Headless"},"Headless"),Object(l.createElement)(i.a,null,Object(c.f)(m,"headless")),Q({id:"With-no-borders"},"With no borders"),Object(l.createElement)(i.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)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)(L,"actionable-mode")),K({id:"Single-row-selection"},"Single row selection"),Object(l.createElement)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)(k,"radio-group")),K({id:"Navigation-mode-Cell-focused"},"Navigation mode - Cell focused"),Object(l.createElement)(i.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)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)(L,"row-selected")),Q({id:"All-rows-selected"},"All rows selected"),Object(l.createElement)(i.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)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)(L,"sorted-column-asc")),Q({id:"Sorted-Descending"},"Sorted Descending"),Object(l.createElement)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)(L,"sorted-column-desc")),K({id:"Column-resizing"},"Column resizing"),Object(l.createElement)(i.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)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)(k,"header-menu-button")),K({id:"Column-with-icons"},"Column with icons"),Object(l.createElement)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)(k,"header-icon-menu-button")),K({id:"Cell-with-icons"},"Cell with icons"),Object(l.createElement)(i.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({},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)(i.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)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"checkbox")),Q({id:"2nd-cell-highlighted"},"2nd cell highlighted"),Object(l.createElement)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"with-link")),Q({id:"3rd-cell-highlighted"},"3rd cell highlighted"),Object(l.createElement)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"focused")),K({id:"Cell-Edit"},"Cell Edit"),Object(l.createElement)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"edit")),Q({id:"Required-form-element"},"Required form element"),Object(l.createElement)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"required")),Q({id:"Required-form-element-with-error"},"Required form element with error"),Object(l.createElement)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"error")),Q({id:"Edited-cell-(unsaved)"},"Edited cell (unsaved)"),Object(l.createElement)(i.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)(i.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)(i.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)(i.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)(i.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)(i.a,{demoStyles:"overflow: hidden;"},Object(c.f)($,"header-cell-focused")),Q({id:"Header-cell-marked"},"Header cell marked"),Object(l.createElement)(i.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)(i.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)(i.a,{demoStyles:Object(c.e)(m,"cell-content-wrapped")},Object(c.f)(m,"cell-content-wrapped")))},te=function(){return Object(r.a)(ee())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/datepickers/docs.mdx.js"]=function(e){function t(t){for(var n,l,i=t[0],c=t[1],o=t[2],u=0,p=[];u<i.length;u++)l=i[u],Object.prototype.hasOwnProperty.call(d,l)&&d[l]&&p.push(d[l][0]),d[l]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(s&&s(t);p.length;)p.shift()();return r.push.apply(r,o\|\|[]),a()}function a(){for(var e,t=0;t<r.length;t++){for(var a=r[t],n=!0,i=1;i<a.length;i++){var c=a[i];0!==d[c]&&(n=!1)}n&&(r.splice(t--,1),e=l(l.s=a[0]))}return e}var n={},d={25:0},r=[];function l(t){if(n[t])return n[t].exports;var a=n[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,l),a.l=!0,a.exports}l.m=e,l.c=n,l.d=function(e,t,a){l.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(l.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)l.d(a,n,function(t){return e[t]}.bind(null,n));return a},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=i.push.bind(i);i.push=t,i=i.slice();for(var o=0;o<i.length;o++)t(i[o]);var s=c;return r.push([721,0]),a()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},721:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return O})),a.d(t,"getContents",(function(){return j}));var n=a(0),d=a.n(n),r=a(4),l=a(2),i=(a(27),a(41),a(14)),c=a(1),o=a(36),s="height: 25rem;",u=function(e){return d.a.createElement("div",{className:"slds-form slds-form_compound"},d.a.createElement("fieldset",{className:"slds-form-element"},d.a.createElement("legend",{className:"slds-form-element__label slds-form-element__legend"},"Start and End Date"),d.a.createElement("div",{className:"slds-form-element__control"},d.a.createElement("div",{className:"slds-form-element__group"},d.a.createElement("div",{className:"slds-form-element__row"},e.children)))))},p=[{id:"default",label:"Base - Default",demoStyles:s,element:d.a.createElement(u,null,d.a.createElement(o.b,{idPrefix:"rangeDefault_start",labelContent:"Start Date",dateInputId:"".concat("date-input-id-01","-default"),isOpen:!0,todayActive:!0}),d.a.createElement(o.b,{idPrefix:"rangeDefault_end",labelContent:"End Date",dateInputId:"".concat("date-input-id-02","-default")}))}],m=[{id:"start-date",label:"Start date selected",demoStyles:s,element:d.a.createElement(u,null,d.a.createElement(o.b,{idPrefix:"rangeSelected_start",labelContent:"Start Date",dateInputId:"".concat("date-input-id-01","-start_selected"),isOpen:!0,todayActive:!0,dateSelected:"single",dateRange:"week-4",defaultValue:"06/24/2021"}),d.a.createElement(o.b,{idPrefix:"rangeSelected_end",labelContent:"End Date",dateInputId:"".concat("date-input-id-02","-start_selected")}))},{id:"end-date-week",label:"End date selected (Same week)",demoStyles:s,element:d.a.createElement(u,null,d.a.createElement(o.b,{idPrefix:"rangeWeekSame_start",labelContent:"Start Date",dateInputId:"".concat("date-input-id-01","-end_selected"),defaultValue:"06/24/2021"}),d.a.createElement(o.b,{idPrefix:"rangeWeekSame_end",labelContent:"End Date",dateInputId:"".concat("date-input-id-02","-end_selected"),isOpen:!0,todayActive:!0,dateSelected:!0,dateRange:"week-4",defaultValue:"06/27/2020"}))},{id:"end-date-weeks",label:"End date selected (Different week)",demoStyles:s,element:d.a.createElement(u,null,d.a.createElement(o.b,{idPrefix:"rangeWeekDiff_start",labelContent:"Start Date",dateInputId:"".concat("date-input-id-01","-end_selected_diff_week"),defaultValue:"06/24/2021"}),d.a.createElement(o.b,{idPrefix:"rangeWeekDiff_end",labelContent:"End Date",dateInputId:"".concat("date-input-id-02","-end_selected_diff_week"),isOpen:!0,todayActive:!0,dateSelected:!0,dateRange:"week-4-5",dateRangeMulti:!0,defaultValue:"06/30/2020"}))},{id:"today-in-range",label:"Today - In selected range",demoStyles:s,element:d.a.createElement(u,null,d.a.createElement(o.b,{idPrefix:"rangeToday_start",labelContent:"Start Date",dateInputId:"".concat("date-input-id-01","-today_in_range"),defaultValue:"06/24/2021"}),d.a.createElement(o.b,{idPrefix:"rangeToday_end",labelContent:"End Date",dateInputId:"".concat("date-input-id-02","-today_in_range"),isOpen:!0,todayActiveInRange:!0,dateSelected:!0,dateRange:"week-4-5",dateRangeMulti:!0,defaultValue:"06/30/2020"}))},{id:"span-across-month-in-range",label:"Current and adjacent month in selected range",demoStyles:s,element:d.a.createElement(u,null,d.a.createElement(o.b,{idPrefix:"rangeSpanMonth_start",labelContent:"Start Date",dateInputId:"".concat("date-input-id-01","-adjacent_month"),defaultValue:"06/28/2020"}),d.a.createElement(o.b,{idPrefix:"rangeSpanMonth_end",labelContent:"End Date",dateInputId:"".concat("date-input-id-02","-adjacent_month"),isOpen:!0,dateSelected:!0,dateRange:"week-5",defaultValue:"07/04/2020"}))}],b=(o.c,o.b,"".concat("date-input-id-01","-default"),o.b,"".concat("date-input-id-02","-default"),o.c,o.b,"".concat("date-input-id-01","-table-start_selected"),o.b,"".concat("date-input-id-02","-table-start_selected"),o.c,o.b,"".concat("date-input-id-01","-table-end_selected"),o.b,"".concat("date-input-id-02","-table-end_selected"),o.c,o.b,"".concat("date-input-id-01","-table-end_selected_diff_week"),o.b,"".concat("date-input-id-02","-table-end_selected_diff_week"),o.c,o.b,"".concat("date-input-id-01","-table-today_in_range"),o.b,"".concat("date-input-id-02","-table-today_in_range"),o.c,o.b,"".concat("date-input-id-01","-table-adjacent_month"),o.b,"".concat("date-input-id-02","-table-adjacent_month"),r.c.a),f=r.c.code,h=r.c.h2,g=r.c.h3,y=r.c.h4,_=r.c.li,k=r.c.p,S=r.c.strong,w=r.c.ul,O=function(){return Object(n.createElement)(r.b,{},Object(n.createElement)("div",{className:"doc lead"},"A datepicker is a text input to capture a date. You can select a single date, date range or date and time."),Object(n.createElement)(l.a,{exampleOnly:!0,demoStyles:Object(c.e)(o.d)},Object(c.f)(o.d)),h({id:"About-Datepickers"},"About Datepickers"),g({id:"Implementation"},"Implementation"),k({},"The datepicker is a ",b({href:"/components/form-element"},"form element"),", containing a label and text ",b({href:"/components/input"},"input"),", and a dropdown ",b({href:"/components/menus"},"menu"),", containing a grid-based calendar and filters. The form element acts as a trigger for the dropdown."),Object(n.createElement)(i.a,{type:"warning"},Object(n.createElement)("p",null,"Placement of inline form elements inside a data table cell is not supported. Instead, use a button to invoke a popover, which does support form elements.")),k({},"The datepicker has the following markup requirements:"),k({},S({},"Desktop:")),w({},_({},"Add ",f({},".slds-is-open")," to the element with ",f({},".slds-dropdown-trigger")," to invoke the dropdown that contains the datepicker."),_({},"The ",f({},".slds-is-selected")," modifier class is required on the ",f({},"td")," element that has the selected day."),_({},"The ",f({},".slds-is-today")," modifier class is required on the ",f({},"td")," element that is the current day."),_({},"The ",f({},".slds-has-multi-selection")," modifier class is required on the ",f({},"tr")," element that contains multiple days selected in the ",S({},"same")," week."),_({},"The ",f({},".slds-has-multi-row-selection")," modifier class is required on any ",f({},"tr")," element that contains multiple days selected in the ",S({},"multiple")," weeks."),_({},"The ",f({},".slds-is-selected-multi")," modifier class is required on the ",f({},"td")," element that contains a selected day within a range.")),k({},S({},"Mobile:")),w({},_({},"When on mobile, we want to leverage the native date picker by changing the ",f({},"input")," type from ",f({},"text")," to ",f({},"date")),_({},"The ",f({},'input type="date"')," will create an input field allowing a date and time to be easily entered — this includes year, month, day."),_({},"When switching ",f({},'input type="text"')," to ",f({},'input type="date"')," for mobile, we need to remove the ARIA attributes. The native rendering doesn't require these.",w({},_({},"On the element with the class ",f({},"slds-combobox"),", please remove ",f({},'role="combobox"'),", ",f({},"aria-expanded"),", and ",f({},"aria-haspopup"),"."),_({},"On the ",f({},"input")," that we just added ",f({},'type="date"')," to, please remove ",f({},"aria-controls"),", ",f({},"aria-autocomplete"),", and ",f({},'role="textbox"'),".")))),g({id:"Accessibility"},"Accessibility"),y({id:"Markup"},"Markup"),k({},S({},"Dialog:")),w({},_({},"Should act as a focus trap so the user only cycles through the datepicker ",f({},"dialog")," when the datepicker is open")),k({},S({},"Grid:")),w({},_({},"Table must be labelled with ",f({},'role="grid"')," and be appropriately labelled with ",f({},"aria-labelledby")),_({},"Use ",f({},'aria-multiselectable="true"')," to allow for selection of multiple days"),_({},"Should act as a single focus stop")),k({},S({},"Gridcell:")),w({},_({},"All dates should have ",f({},'role="gridcell"')," and ",f({},'aria-selected="false"')," on the ",f({},"gridcell")," by default"),_({},"If a date is selected, ",f({},"aria-selected")," should be set to ",f({},"true")," on the corresponding ",f({},"gridcell")),_({},f({},"aria-current")," is used to indicate which day is today and should be set to ",f({},'aria-current="date"')),_({},f({},"aria-label")," is used to provide the full ",f({},"DD MM YYYY")," text of the date")),k({},S({},"Opening the Datepicker:")),w({},_({},"Mouse user: open the datepicker when a mouse user clicks on the input"),_({},"Keyboard user: only open the datepicker when a keyboard user presses ",f({},"enter")," or ",f({},"space")," on the datepicker button",w({},_({},"Do not open the datepicker when user focus is on the input")))),y({id:"Keyboard-Interactions"},"Keyboard Interactions"),w({},_({},"When the datepicker opens, place user focus on either the currently selected date in the grid or if no date is selected the current day"),_({},f({},"left")," and ",f({},"right")," arrow keys to navigate row"),_({},f({},"up")," and ",f({},"down")," arrow keys to navigate between weeks on the same day"),_({},f({},"home")," and ",f({},"end")," keys to jump to beginning or end of current row"),_({},f({},"pagedown")," and ",f({},"pageup")," to navigate between months"),_({},f({},"alt + pagedown")," and ",f({},"alt + pageup")," to navigate between years"),_({},f({},"enter")," to select date and close datepicker"),_({},f({},"esc")," to close datepicker without choosing a date")),h({id:"Base"},"Base"),Object(n.createElement)(l.a,{demoStyles:Object(c.e)(o.d)},Object(c.f)(o.d)),g({id:"States"},"States"),y({id:"Date-Selected"},"Date Selected"),Object(n.createElement)(l.a,{demoStyles:Object(c.e)(o.e,"datepicker-day-selected")},Object(c.f)(o.e,"datepicker-day-selected")),y({id:"Date-Picker-Has-Error"},"Date Picker Has Error"),Object(n.createElement)(l.a,{demoStyles:Object(c.e)(o.e,"datepicker-with-error")},Object(c.f)(o.e,"datepicker-with-error")),y({id:"Date-Required"},"Date Required"),Object(n.createElement)(l.a,{demoStyles:Object(c.e)(o.e,"datepicker-required")},Object(c.f)(o.e,"datepicker-required")),y({id:"Date-Required-Date-Picker-Has-Error"},"Date Required, Date Picker Has Error"),Object(n.createElement)(l.a,{demoStyles:Object(c.e)(o.e,"datepicker-required-with-error")},Object(c.f)(o.e,"datepicker-required-with-error")),h({id:"Range"},"Range"),Object(n.createElement)(l.a,{demoStyles:Object(c.e)(p)},Object(c.f)(p)),g({id:"States-2"},"States"),y({id:"Start-Date-Selected"},"Start Date Selected"),Object(n.createElement)(l.a,{demoStyles:Object(c.e)(m,"start-date")},Object(c.f)(m,"start-date")),y({id:"End-date-selected-(Same-week)"},"End date selected (Same week)"),Object(n.createElement)(l.a,{demoStyles:Object(c.e)(m,"end-date-week")},Object(c.f)(m,"end-date-week")),y({id:"End-date-selected-(Different-week)"},"End date selected (Different week)"),Object(n.createElement)(l.a,{demoStyles:Object(c.e)(p)},Object(c.f)(p)),y({id:"Today-In-selected-range"},"Today - In selected range"),Object(n.createElement)(l.a,{demoStyles:Object(c.e)(p)},Object(c.f)(p)),y({id:"Current-And-Adjacent-Month-In-Selected-Range"},"Current And Adjacent Month In Selected Range"),Object(n.createElement)(l.a,{demoStyles:Object(c.e)(p)},Object(c.f)(p)))},j=function(){return Object(r.a)(O())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/datepickers/docs.mdx.js"]=function(e){function t(t){for(var n,l,i=t[0],c=t[1],o=t[2],u=0,p=[];u<i.length;u++)l=i[u],Object.prototype.hasOwnProperty.call(d,l)&&d[l]&&p.push(d[l][0]),d[l]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(s&&s(t);p.length;)p.shift()();return r.push.apply(r,o\|\|[]),a()}function a(){for(var e,t=0;t<r.length;t++){for(var a=r[t],n=!0,i=1;i<a.length;i++){var c=a[i];0!==d[c]&&(n=!1)}n&&(r.splice(t--,1),e=l(l.s=a[0]))}return e}var n={},d={25:0},r=[];function l(t){if(n[t])return n[t].exports;var a=n[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,l),a.l=!0,a.exports}l.m=e,l.c=n,l.d=function(e,t,a){l.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(l.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)l.d(a,n,function(t){return e[t]}.bind(null,n));return a},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=i.push.bind(i);i.push=t,i=i.slice();for(var o=0;o<i.length;o++)t(i[o]);var s=c;return r.push([722,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},722:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return O})),a.d(t,"getContents",(function(){return j}));var n=a(0),d=a.n(n),r=a(4),l=a(2),i=(a(28),a(42),a(14)),c=a(1),o=a(37),s="height: 25rem;",u=function(e){return d.a.createElement("div",{className:"slds-form slds-form_compound"},d.a.createElement("fieldset",{className:"slds-form-element"},d.a.createElement("legend",{className:"slds-form-element__label slds-form-element__legend"},"Start and End Date"),d.a.createElement("div",{className:"slds-form-element__control"},d.a.createElement("div",{className:"slds-form-element__group"},d.a.createElement("div",{className:"slds-form-element__row"},e.children)))))},p=[{id:"default",label:"Base - Default",demoStyles:s,element:d.a.createElement(u,null,d.a.createElement(o.b,{idPrefix:"rangeDefault_start",labelContent:"Start Date",dateInputId:"".concat("date-input-id-01","-default"),isOpen:!0,todayActive:!0}),d.a.createElement(o.b,{idPrefix:"rangeDefault_end",labelContent:"End Date",dateInputId:"".concat("date-input-id-02","-default")}))}],m=[{id:"start-date",label:"Start date selected",demoStyles:s,element:d.a.createElement(u,null,d.a.createElement(o.b,{idPrefix:"rangeSelected_start",labelContent:"Start Date",dateInputId:"".concat("date-input-id-01","-start_selected"),isOpen:!0,todayActive:!0,dateSelected:"single",dateRange:"week-4",defaultValue:"06/24/2021"}),d.a.createElement(o.b,{idPrefix:"rangeSelected_end",labelContent:"End Date",dateInputId:"".concat("date-input-id-02","-start_selected")}))},{id:"end-date-week",label:"End date selected (Same week)",demoStyles:s,element:d.a.createElement(u,null,d.a.createElement(o.b,{idPrefix:"rangeWeekSame_start",labelContent:"Start Date",dateInputId:"".concat("date-input-id-01","-end_selected"),defaultValue:"06/24/2021"}),d.a.createElement(o.b,{idPrefix:"rangeWeekSame_end",labelContent:"End Date",dateInputId:"".concat("date-input-id-02","-end_selected"),isOpen:!0,todayActive:!0,dateSelected:!0,dateRange:"week-4",defaultValue:"06/27/2020"}))},{id:"end-date-weeks",label:"End date selected (Different week)",demoStyles:s,element:d.a.createElement(u,null,d.a.createElement(o.b,{idPrefix:"rangeWeekDiff_start",labelContent:"Start Date",dateInputId:"".concat("date-input-id-01","-end_selected_diff_week"),defaultValue:"06/24/2021"}),d.a.createElement(o.b,{idPrefix:"rangeWeekDiff_end",labelContent:"End Date",dateInputId:"".concat("date-input-id-02","-end_selected_diff_week"),isOpen:!0,todayActive:!0,dateSelected:!0,dateRange:"week-4-5",dateRangeMulti:!0,defaultValue:"06/30/2020"}))},{id:"today-in-range",label:"Today - In selected range",demoStyles:s,element:d.a.createElement(u,null,d.a.createElement(o.b,{idPrefix:"rangeToday_start",labelContent:"Start Date",dateInputId:"".concat("date-input-id-01","-today_in_range"),defaultValue:"06/24/2021"}),d.a.createElement(o.b,{idPrefix:"rangeToday_end",labelContent:"End Date",dateInputId:"".concat("date-input-id-02","-today_in_range"),isOpen:!0,todayActiveInRange:!0,dateSelected:!0,dateRange:"week-4-5",dateRangeMulti:!0,defaultValue:"06/30/2020"}))},{id:"span-across-month-in-range",label:"Current and adjacent month in selected range",demoStyles:s,element:d.a.createElement(u,null,d.a.createElement(o.b,{idPrefix:"rangeSpanMonth_start",labelContent:"Start Date",dateInputId:"".concat("date-input-id-01","-adjacent_month"),defaultValue:"06/28/2020"}),d.a.createElement(o.b,{idPrefix:"rangeSpanMonth_end",labelContent:"End Date",dateInputId:"".concat("date-input-id-02","-adjacent_month"),isOpen:!0,dateSelected:!0,dateRange:"week-5",defaultValue:"07/04/2020"}))}],b=(o.c,o.b,"".concat("date-input-id-01","-default"),o.b,"".concat("date-input-id-02","-default"),o.c,o.b,"".concat("date-input-id-01","-table-start_selected"),o.b,"".concat("date-input-id-02","-table-start_selected"),o.c,o.b,"".concat("date-input-id-01","-table-end_selected"),o.b,"".concat("date-input-id-02","-table-end_selected"),o.c,o.b,"".concat("date-input-id-01","-table-end_selected_diff_week"),o.b,"".concat("date-input-id-02","-table-end_selected_diff_week"),o.c,o.b,"".concat("date-input-id-01","-table-today_in_range"),o.b,"".concat("date-input-id-02","-table-today_in_range"),o.c,o.b,"".concat("date-input-id-01","-table-adjacent_month"),o.b,"".concat("date-input-id-02","-table-adjacent_month"),r.c.a),f=r.c.code,h=r.c.h2,g=r.c.h3,y=r.c.h4,_=r.c.li,k=r.c.p,S=r.c.strong,w=r.c.ul,O=function(){return Object(n.createElement)(r.b,{},Object(n.createElement)("div",{className:"doc lead"},"A datepicker is a text input to capture a date. You can select a single date, date range or date and time."),Object(n.createElement)(l.a,{exampleOnly:!0,demoStyles:Object(c.e)(o.d)},Object(c.f)(o.d)),h({id:"About-Datepickers"},"About Datepickers"),g({id:"Implementation"},"Implementation"),k({},"The datepicker is a ",b({href:"/components/form-element"},"form element"),", containing a label and text ",b({href:"/components/input"},"input"),", and a dropdown ",b({href:"/components/menus"},"menu"),", containing a grid-based calendar and filters. The form element acts as a trigger for the dropdown."),Object(n.createElement)(i.a,{type:"warning"},Object(n.createElement)("p",null,"Placement of inline form elements inside a data table cell is not supported. Instead, use a button to invoke a popover, which does support form elements.")),k({},"The datepicker has the following markup requirements:"),k({},S({},"Desktop:")),w({},_({},"Add ",f({},".slds-is-open")," to the element with ",f({},".slds-dropdown-trigger")," to invoke the dropdown that contains the datepicker."),_({},"The ",f({},".slds-is-selected")," modifier class is required on the ",f({},"td")," element that has the selected day."),_({},"The ",f({},".slds-is-today")," modifier class is required on the ",f({},"td")," element that is the current day."),_({},"The ",f({},".slds-has-multi-selection")," modifier class is required on the ",f({},"tr")," element that contains multiple days selected in the ",S({},"same")," week."),_({},"The ",f({},".slds-has-multi-row-selection")," modifier class is required on any ",f({},"tr")," element that contains multiple days selected in the ",S({},"multiple")," weeks."),_({},"The ",f({},".slds-is-selected-multi")," modifier class is required on the ",f({},"td")," element that contains a selected day within a range.")),k({},S({},"Mobile:")),w({},_({},"When on mobile, we want to leverage the native date picker by changing the ",f({},"input")," type from ",f({},"text")," to ",f({},"date")),_({},"The ",f({},'input type="date"')," will create an input field allowing a date and time to be easily entered — this includes year, month, day."),_({},"When switching ",f({},'input type="text"')," to ",f({},'input type="date"')," for mobile, we need to remove the ARIA attributes. The native rendering doesn't require these.",w({},_({},"On the element with the class ",f({},"slds-combobox"),", please remove ",f({},'role="combobox"'),", ",f({},"aria-expanded"),", and ",f({},"aria-haspopup"),"."),_({},"On the ",f({},"input")," that we just added ",f({},'type="date"')," to, please remove ",f({},"aria-controls"),", ",f({},"aria-autocomplete"),", and ",f({},'role="textbox"'),".")))),g({id:"Accessibility"},"Accessibility"),y({id:"Markup"},"Markup"),k({},S({},"Dialog:")),w({},_({},"Should act as a focus trap so the user only cycles through the datepicker ",f({},"dialog")," when the datepicker is open")),k({},S({},"Grid:")),w({},_({},"Table must be labelled with ",f({},'role="grid"')," and be appropriately labelled with ",f({},"aria-labelledby")),_({},"Use ",f({},'aria-multiselectable="true"')," to allow for selection of multiple days"),_({},"Should act as a single focus stop")),k({},S({},"Gridcell:")),w({},_({},"All dates should have ",f({},'role="gridcell"')," and ",f({},'aria-selected="false"')," on the ",f({},"gridcell")," by default"),_({},"If a date is selected, ",f({},"aria-selected")," should be set to ",f({},"true")," on the corresponding ",f({},"gridcell")),_({},f({},"aria-current")," is used to indicate which day is today and should be set to ",f({},'aria-current="date"')),_({},f({},"aria-label")," is used to provide the full ",f({},"DD MM YYYY")," text of the date")),k({},S({},"Opening the Datepicker:")),w({},_({},"Mouse user: open the datepicker when a mouse user clicks on the input"),_({},"Keyboard user: only open the datepicker when a keyboard user presses ",f({},"enter")," or ",f({},"space")," on the datepicker button",w({},_({},"Do not open the datepicker when user focus is on the input")))),y({id:"Keyboard-Interactions"},"Keyboard Interactions"),w({},_({},"When the datepicker opens, place user focus on either the currently selected date in the grid or if no date is selected the current day"),_({},f({},"left")," and ",f({},"right")," arrow keys to navigate row"),_({},f({},"up")," and ",f({},"down")," arrow keys to navigate between weeks on the same day"),_({},f({},"home")," and ",f({},"end")," keys to jump to beginning or end of current row"),_({},f({},"pagedown")," and ",f({},"pageup")," to navigate between months"),_({},f({},"alt + pagedown")," and ",f({},"alt + pageup")," to navigate between years"),_({},f({},"enter")," to select date and close datepicker"),_({},f({},"esc")," to close datepicker without choosing a date")),h({id:"Base"},"Base"),Object(n.createElement)(l.a,{demoStyles:Object(c.e)(o.d)},Object(c.f)(o.d)),g({id:"States"},"States"),y({id:"Date-Selected"},"Date Selected"),Object(n.createElement)(l.a,{demoStyles:Object(c.e)(o.e,"datepicker-day-selected")},Object(c.f)(o.e,"datepicker-day-selected")),y({id:"Date-Picker-Has-Error"},"Date Picker Has Error"),Object(n.createElement)(l.a,{demoStyles:Object(c.e)(o.e,"datepicker-with-error")},Object(c.f)(o.e,"datepicker-with-error")),y({id:"Date-Required"},"Date Required"),Object(n.createElement)(l.a,{demoStyles:Object(c.e)(o.e,"datepicker-required")},Object(c.f)(o.e,"datepicker-required")),y({id:"Date-Required-Date-Picker-Has-Error"},"Date Required, Date Picker Has Error"),Object(n.createElement)(l.a,{demoStyles:Object(c.e)(o.e,"datepicker-required-with-error")},Object(c.f)(o.e,"datepicker-required-with-error")),h({id:"Range"},"Range"),Object(n.createElement)(l.a,{demoStyles:Object(c.e)(p)},Object(c.f)(p)),g({id:"States-2"},"States"),y({id:"Start-Date-Selected"},"Start Date Selected"),Object(n.createElement)(l.a,{demoStyles:Object(c.e)(m,"start-date")},Object(c.f)(m,"start-date")),y({id:"End-date-selected-(Same-week)"},"End date selected (Same week)"),Object(n.createElement)(l.a,{demoStyles:Object(c.e)(m,"end-date-week")},Object(c.f)(m,"end-date-week")),y({id:"End-date-selected-(Different-week)"},"End date selected (Different week)"),Object(n.createElement)(l.a,{demoStyles:Object(c.e)(p)},Object(c.f)(p)),y({id:"Today-In-selected-range"},"Today - In selected range"),Object(n.createElement)(l.a,{demoStyles:Object(c.e)(p)},Object(c.f)(p)),y({id:"Current-And-Adjacent-Month-In-Selected-Range"},"Current And Adjacent Month In Selected Range"),Object(n.createElement)(l.a,{demoStyles:Object(c.e)(p)},Object(c.f)(p)))},j=function(){return Object(r.a)(O())}}});

package/__internal/chunked/docs/ui/components/datetime-picker/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/datetime-picker/docs.mdx.js"]=function(e){function t(t){for(var n,i,l=t[0],s=t[1],d=t[2],u=0,m=[];u<l.length;u++)i=l[u],Object.prototype.hasOwnProperty.call(r,i)&&r[i]&&m.push(r[i][0]),r[i]=0;for(n in s)Object.prototype.hasOwnProperty.call(s,n)&&(e[n]=s[n]);for(c&&c(t);m.length;)m.shift()();return o.push.apply(o,d\|\|[]),a()}function a(){for(var e,t=0;t<o.length;t++){for(var a=o[t],n=!0,l=1;l<a.length;l++){var s=a[l];0!==r[s]&&(n=!1)}n&&(o.splice(t--,1),e=i(i.s=a[0]))}return e}var n={},r={26:0},o=[];function i(t){if(n[t])return n[t].exports;var a=n[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=n,i.d=function(e,t,a){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(a,n,function(t){return e[t]}.bind(null,n));return a},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 l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=l.push.bind(l);l.push=t,l=l.slice();for(var d=0;d<l.length;d++)t(l[d]);var c=s;return o.push([737,0]),a()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},737:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return N})),a.d(t,"getContents",(function(){return P}));var n=a(0),r=a.n(n),o=a(4),i=a(2),l=a(14),s=a(3),d=a.n(s),c=a(5),u=a.n(c),m=a(1),p=a(22),h=a(23),b=a(24),f=a(11),y=a(36),g=a(7),O=a(8),v=a(16);function w(e,t){return function(e){if(Array.isArray(e))return e}(e)\|\|function(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]\|\|e["@@iterator"];if(null==a)return;var n,r,o=[],i=!0,l=!1;try{for(a=a.call(e);!(i=(n=a.next()).done)&&(o.push(n.value),!t\|\|o.length!==t);i=!0);}catch(e){l=!0,r=e}finally{try{i\|\|null==a.return\|\|a.return()}finally{if(l)throw r}}return o}(e,t)\|\|function(e,t){if(!e)return;if("string"==typeof e)return _(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);"Object"===a&&e.constructor&&(a=e.constructor.name);if("Map"===a\|\|"Set"===a)return Array.from(e);if("Arguments"===a\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(a))return _(e,t)}(e,t)\|\|function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var a=0,n=new Array(t);a<t;a++)n[a]=e[a];return n}var x=function(e){var t=e.dropdown,a=e.dropdownIsOpen,o=e.hasFocus,i=e.hasError,l=e.isOpen,s=e.isRequired,d=e.isDisabled,c=e.listboxData,b=e.dateDefaultValue,y=e.showRequiredIndicator,_=Object(n.useRef)(),x=w(Object(n.useState)(""),2),S=x[0],E=x[1],j=w(Object(n.useState)(""),2),D=j[0],k=j[1],q=w(Object(n.useState)(m.d.uniqueId("example-unique-id-")),1)[0],I=w(Object(n.useState)(m.d.uniqueId("example-unique-id-")),1)[0],T=w(Object(n.useState)(m.d.uniqueId("example-unique-id-")),1)[0];Object(n.useEffect)((function(){_.current&&("id"in _.current&&_.current.id&&E(_.current.id),"ariaChecked"in _.current&&_.current.ariaChecked&&k(_.current.textContent))}),[]);var R={"slds-is-open":a};return r.a.createElement("div",{className:"slds-form"},r.a.createElement("fieldset",{className:u()("slds-form-element slds-form-element_compound",{"slds-has-error":i})},r.a.createElement("legend",{className:"slds-form-element__label slds-form-element__legend"},s&&r.a.createElement("abbr",{className:"slds-required",title:"required"},"*"," "),"Date and Time"),r.a.createElement("div",{className:"slds-form-element__control"},r.a.createElement("div",{className:"slds-form-element__group"},r.a.createElement("div",{className:"slds-form-element__row"},r.a.createElement(O.b,{formElementClassName:u()("slds-dropdown-trigger slds-dropdown-trigger_click",R),labelContent:"Date",inputId:q,hasRightIcon:!0,dropdown:t,hasError:i,isRequired:s,showRequiredIndicator:y},r.a.createElement(v.a,{id:q,placeholder:"Select a date…",defaultValue:b,"aria-describedby":i&&q+"-error",required:s,disabled:d}),r.a.createElement(g.b,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date",disabled:d})),r.a.createElement(p.b,{id:I,"aria-controls":T,"aria-activedescendant":S,autocomplete:!0,label:"Time",placeholder:"Select a time…",inputIconPosition:"right",hasError:i,isDisabled:d,rightInputIcon:r.a.createElement(f.a,{symbol:"clock",className:u()("slds-icon slds-icon_x-small slds-icon-text-default",{"slds-icon-text-error":i,"slds-is-disabled":d}),containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:r.a.createElement(h.e,{className:"slds-dropdown_fluid slds-dropdown_left",id:T,snapshot:c,type:"plain",count:6,focusedRef:_}),resultsType:"listbox",hasInteractions:!0,hasFocus:o,isOpen:l,value:D})))),i&&r.a.createElement("div",{className:"slds-form-element__help",id:q+"-error"},"Complete this field.")))};x.propTypes={dropdown:d.a.node,dropdownIsOpen:d.a.bool,hasFocus:d.a.bool,isOpen:d.a.bool,isRequired:d.a.bool,hasError:d.a.bool,listboxIsOpen:d.a.bool,listboxData:d.a.object.isRequired,dateDefaultValue:d.a.string,showRequiredIndicator:d.a.bool,isDisabled:d.a.bool},x.defaultProps={dropdown:r.a.createElement(y.a,{todayActive:!0}),dropdownIsOpen:!0,showRequiredIndicator:!1,isDisabled:!1};var S=r.a.createElement(x,{listboxData:b.x}),E=(b.x,[{id:"date-selection",label:"Date selected",element:r.a.createElement(x,{dropdown:r.a.createElement(y.a,{todayActive:!0,dateSelected:"single",dateRange:"week-4"}),dateDefaultValue:"06/24/2021",listboxData:b.x})},{id:"time-selection",label:"Time selected",demoStyles:"height: 20rem;",storybookStyles:!0,element:r.a.createElement(x,{dropdown:r.a.createElement(y.a,{todayActive:!0,dateSelected:"single",dateRange:"week-4",value:"8:00am"}),dropdownIsOpen:!1,dateDefaultValue:"06/24/2021",isOpen:!0,hasFocus:!0,listboxData:b.z})},{id:"required",label:"Date and Time - required",demoStyles:"height: 20rem;",element:r.a.createElement(x,{dropdownIsOpen:!1,isRequired:!0,listboxData:b.x})},{id:"error",label:"Date and Time - error",demoStyles:"height: 20rem;",element:r.a.createElement(x,{dropdownIsOpen:!1,hasError:!0,listboxData:b.x})},{id:"required-error",label:"Date and Time - required and has error",demoStyles:"height: 20rem;",element:r.a.createElement(x,{dropdownIsOpen:!1,isRequired:!0,hasError:!0,listboxData:b.x})},{id:"disabled",label:"Date and Time - disabled",demoStyles:"height: 10rem;",storybookStyles:!0,element:r.a.createElement(x,{dropdownIsOpen:!1,listboxData:b.x,isDisabled:!0})}]),j=o.c.a,D=o.c.code,k=o.c.h2,q=o.c.h3,I=o.c.li,T=o.c.p,R=o.c.strong,A=o.c.ul,N=function(){return Object(n.createElement)(o.b,{},Object(n.createElement)("div",{className:"doc lead"},"A datetime picker is used to select a day and a time."),Object(n.createElement)(i.a,{exampleOnly:!0,demoStyles:"height: 28rem;"},Object(m.f)(S)),k({id:"About-datetime-picker"},"About datetime picker"),q({id:"Implementation"},"Implementation"),T({},"The datetime is two ",j({href:"/components/form-element"},"form elements"),", each containing a label and text ",j({href:"/components/input"},"input"),", and a dropdown ",j({href:"/components/menus"},"menu"),", containing a grid-based calendar and filters. The date form element acts as a trigger for the dropdown."),Object(n.createElement)(l.a,{type:"warning"},Object(n.createElement)("p",null,"Placement of inline form elements inside a data table cell is not supported. Instead, use a button to invoke a popover, which does support form elements.")),T({},"The datetime picker has the following markup requirements:"),T({},R({},"All")),A({},I({},"Follow all accessibility requirements mentioned in the ",j({href:"/components/datepickers"},"Datepicker")," and ",j({href:"/components/timepicker"},"Timepicker")," blueprints.")),T({},R({},"Desktop")),A({},I({},"Add ",D({},".slds-is-open")," to the element with ",D({},".slds-dropdown-trigger")," to invoke the dropdown that contains the datepicker and the list of time options."),I({},"On the timepicker, the ",D({},".slds-has-focus")," modifier class is required on the ",D({},".slds-listbox__option")," element that has focus."),I({},"On the timepicker, the ",D({},".slds-is-selected")," modifier class is required on the ",D({},".slds-listbox__option")," element that has been selected."),I({},"On the datepicker, the ",D({},".slds-is-selected")," modifier class is required on the ",D({},"td")," element that has the selected day."),I({},"On the datepicker, the ",D({},".slds-is-today")," modifier class is required on the ",D({},"td")," element that is the current day.")),T({},R({},"Mobile")),A({},I({},"When on mobile, we want to leverage the native datetime picker by changing the ",D({},"input")," type from ",D({},"text")," to ",D({},"datetime-local")),I({},"The ",D({},'input type="datetime-local"')," will create an input field allowing a date and time to be easily entered — this includes year, month, day, hours, and minutes."),I({},"When switching ",D({},'input type="text"')," to ",D({},'input type="datetime-local"')," for mobile, we need to remove the ARIA attributes. The native rendering doesn't require these.",A({},I({},"On the element with the class ",D({},"slds-combobox"),", please remove ",D({},'role="combobox"'),", ",D({},"aria-expanded"),", and ",D({},"aria-haspopup"),"."),I({},"On the ",D({},"input")," that we just added ",D({},'type="datetime-local"')," to, please remove ",D({},"aria-controls"),", ",D({},"aria-autocomplete"),", and ",D({},'role="textbox"'),".")))),k({id:"Base"},"Base"),Object(n.createElement)(i.a,{demoStyles:"height: 28rem;"},Object(m.f)(S)),k({id:"States"},"States"),q({id:"Date-selection"},"Date selection"),Object(n.createElement)(i.a,{demoStyles:"height: 28rem;"},Object(m.f)(E,"date-selection")),q({id:"Time-selection"},"Time selection"),Object(n.createElement)(i.a,{demoStyles:"height: 28rem;"},Object(m.f)(E,"time-selection")))},P=function(){return Object(o.a)(N())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/datetime-picker/docs.mdx.js"]=function(e){function t(t){for(var n,i,l=t[0],s=t[1],d=t[2],u=0,m=[];u<l.length;u++)i=l[u],Object.prototype.hasOwnProperty.call(r,i)&&r[i]&&m.push(r[i][0]),r[i]=0;for(n in s)Object.prototype.hasOwnProperty.call(s,n)&&(e[n]=s[n]);for(c&&c(t);m.length;)m.shift()();return o.push.apply(o,d\|\|[]),a()}function a(){for(var e,t=0;t<o.length;t++){for(var a=o[t],n=!0,l=1;l<a.length;l++){var s=a[l];0!==r[s]&&(n=!1)}n&&(o.splice(t--,1),e=i(i.s=a[0]))}return e}var n={},r={26:0},o=[];function i(t){if(n[t])return n[t].exports;var a=n[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=n,i.d=function(e,t,a){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(a,n,function(t){return e[t]}.bind(null,n));return a},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 l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=l.push.bind(l);l.push=t,l=l.slice();for(var d=0;d<l.length;d++)t(l[d]);var c=s;return o.push([738,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},738:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return N})),a.d(t,"getContents",(function(){return P}));var n=a(0),r=a.n(n),o=a(4),i=a(2),l=a(14),s=a(3),d=a.n(s),c=a(5),u=a.n(c),m=a(1),p=a(23),h=a(24),b=a(25),f=a(11),y=a(37),g=a(7),O=a(8),v=a(17);function w(e,t){return function(e){if(Array.isArray(e))return e}(e)\|\|function(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]\|\|e["@@iterator"];if(null==a)return;var n,r,o=[],i=!0,l=!1;try{for(a=a.call(e);!(i=(n=a.next()).done)&&(o.push(n.value),!t\|\|o.length!==t);i=!0);}catch(e){l=!0,r=e}finally{try{i\|\|null==a.return\|\|a.return()}finally{if(l)throw r}}return o}(e,t)\|\|function(e,t){if(!e)return;if("string"==typeof e)return _(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);"Object"===a&&e.constructor&&(a=e.constructor.name);if("Map"===a\|\|"Set"===a)return Array.from(e);if("Arguments"===a\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(a))return _(e,t)}(e,t)\|\|function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var a=0,n=new Array(t);a<t;a++)n[a]=e[a];return n}var x=function(e){var t=e.dropdown,a=e.dropdownIsOpen,o=e.hasFocus,i=e.hasError,l=e.isOpen,s=e.isRequired,d=e.isDisabled,c=e.listboxData,b=e.dateDefaultValue,y=e.showRequiredIndicator,_=Object(n.useRef)(),x=w(Object(n.useState)(""),2),S=x[0],E=x[1],j=w(Object(n.useState)(""),2),D=j[0],k=j[1],q=w(Object(n.useState)(m.d.uniqueId("example-unique-id-")),1)[0],I=w(Object(n.useState)(m.d.uniqueId("example-unique-id-")),1)[0],T=w(Object(n.useState)(m.d.uniqueId("example-unique-id-")),1)[0];Object(n.useEffect)((function(){_.current&&("id"in _.current&&_.current.id&&E(_.current.id),"ariaChecked"in _.current&&_.current.ariaChecked&&k(_.current.textContent))}),[]);var R={"slds-is-open":a};return r.a.createElement("div",{className:"slds-form"},r.a.createElement("fieldset",{className:u()("slds-form-element slds-form-element_compound",{"slds-has-error":i})},r.a.createElement("legend",{className:"slds-form-element__label slds-form-element__legend"},s&&r.a.createElement("abbr",{className:"slds-required",title:"required"},"*"," "),"Date and Time"),r.a.createElement("div",{className:"slds-form-element__control"},r.a.createElement("div",{className:"slds-form-element__group"},r.a.createElement("div",{className:"slds-form-element__row"},r.a.createElement(O.b,{formElementClassName:u()("slds-dropdown-trigger slds-dropdown-trigger_click",R),labelContent:"Date",inputId:q,hasRightIcon:!0,dropdown:t,hasError:i,isRequired:s,showRequiredIndicator:y},r.a.createElement(v.a,{id:q,placeholder:"Select a date…",defaultValue:b,"aria-describedby":i&&q+"-error",required:s,disabled:d}),r.a.createElement(g.b,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date",disabled:d})),r.a.createElement(p.b,{id:I,"aria-controls":T,"aria-activedescendant":S,autocomplete:!0,label:"Time",placeholder:"Select a time…",inputIconPosition:"right",hasError:i,isDisabled:d,rightInputIcon:r.a.createElement(f.a,{symbol:"clock",className:u()("slds-icon slds-icon_x-small slds-icon-text-default",{"slds-icon-text-error":i,"slds-is-disabled":d}),containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:r.a.createElement(h.e,{className:"slds-dropdown_fluid slds-dropdown_left",id:T,snapshot:c,type:"plain",count:6,focusedRef:_}),resultsType:"listbox",hasInteractions:!0,hasFocus:o,isOpen:l,value:D})))),i&&r.a.createElement("div",{className:"slds-form-element__help",id:q+"-error"},"Complete this field.")))};x.propTypes={dropdown:d.a.node,dropdownIsOpen:d.a.bool,hasFocus:d.a.bool,isOpen:d.a.bool,isRequired:d.a.bool,hasError:d.a.bool,listboxIsOpen:d.a.bool,listboxData:d.a.object.isRequired,dateDefaultValue:d.a.string,showRequiredIndicator:d.a.bool,isDisabled:d.a.bool},x.defaultProps={dropdown:r.a.createElement(y.a,{todayActive:!0}),dropdownIsOpen:!0,showRequiredIndicator:!1,isDisabled:!1};var S=r.a.createElement(x,{listboxData:b.x}),E=(b.x,[{id:"date-selection",label:"Date selected",element:r.a.createElement(x,{dropdown:r.a.createElement(y.a,{todayActive:!0,dateSelected:"single",dateRange:"week-4"}),dateDefaultValue:"06/24/2021",listboxData:b.x})},{id:"time-selection",label:"Time selected",demoStyles:"height: 20rem;",storybookStyles:!0,element:r.a.createElement(x,{dropdown:r.a.createElement(y.a,{todayActive:!0,dateSelected:"single",dateRange:"week-4",value:"8:00am"}),dropdownIsOpen:!1,dateDefaultValue:"06/24/2021",isOpen:!0,hasFocus:!0,listboxData:b.z})},{id:"required",label:"Date and Time - required",demoStyles:"height: 20rem;",element:r.a.createElement(x,{dropdownIsOpen:!1,isRequired:!0,listboxData:b.x})},{id:"error",label:"Date and Time - error",demoStyles:"height: 20rem;",element:r.a.createElement(x,{dropdownIsOpen:!1,hasError:!0,listboxData:b.x})},{id:"required-error",label:"Date and Time - required and has error",demoStyles:"height: 20rem;",element:r.a.createElement(x,{dropdownIsOpen:!1,isRequired:!0,hasError:!0,listboxData:b.x})},{id:"disabled",label:"Date and Time - disabled",demoStyles:"height: 10rem;",storybookStyles:!0,element:r.a.createElement(x,{dropdownIsOpen:!1,listboxData:b.x,isDisabled:!0})}]),j=o.c.a,D=o.c.code,k=o.c.h2,q=o.c.h3,I=o.c.li,T=o.c.p,R=o.c.strong,A=o.c.ul,N=function(){return Object(n.createElement)(o.b,{},Object(n.createElement)("div",{className:"doc lead"},"A datetime picker is used to select a day and a time."),Object(n.createElement)(i.a,{exampleOnly:!0,demoStyles:"height: 28rem;"},Object(m.f)(S)),k({id:"About-datetime-picker"},"About datetime picker"),q({id:"Implementation"},"Implementation"),T({},"The datetime is two ",j({href:"/components/form-element"},"form elements"),", each containing a label and text ",j({href:"/components/input"},"input"),", and a dropdown ",j({href:"/components/menus"},"menu"),", containing a grid-based calendar and filters. The date form element acts as a trigger for the dropdown."),Object(n.createElement)(l.a,{type:"warning"},Object(n.createElement)("p",null,"Placement of inline form elements inside a data table cell is not supported. Instead, use a button to invoke a popover, which does support form elements.")),T({},"The datetime picker has the following markup requirements:"),T({},R({},"All")),A({},I({},"Follow all accessibility requirements mentioned in the ",j({href:"/components/datepickers"},"Datepicker")," and ",j({href:"/components/timepicker"},"Timepicker")," blueprints.")),T({},R({},"Desktop")),A({},I({},"Add ",D({},".slds-is-open")," to the element with ",D({},".slds-dropdown-trigger")," to invoke the dropdown that contains the datepicker and the list of time options."),I({},"On the timepicker, the ",D({},".slds-has-focus")," modifier class is required on the ",D({},".slds-listbox__option")," element that has focus."),I({},"On the timepicker, the ",D({},".slds-is-selected")," modifier class is required on the ",D({},".slds-listbox__option")," element that has been selected."),I({},"On the datepicker, the ",D({},".slds-is-selected")," modifier class is required on the ",D({},"td")," element that has the selected day."),I({},"On the datepicker, the ",D({},".slds-is-today")," modifier class is required on the ",D({},"td")," element that is the current day.")),T({},R({},"Mobile")),A({},I({},"When on mobile, we want to leverage the native datetime picker by changing the ",D({},"input")," type from ",D({},"text")," to ",D({},"datetime-local")),I({},"The ",D({},'input type="datetime-local"')," will create an input field allowing a date and time to be easily entered — this includes year, month, day, hours, and minutes."),I({},"When switching ",D({},'input type="text"')," to ",D({},'input type="datetime-local"')," for mobile, we need to remove the ARIA attributes. The native rendering doesn't require these.",A({},I({},"On the element with the class ",D({},"slds-combobox"),", please remove ",D({},'role="combobox"'),", ",D({},"aria-expanded"),", and ",D({},"aria-haspopup"),"."),I({},"On the ",D({},"input")," that we just added ",D({},'type="datetime-local"')," to, please remove ",D({},"aria-controls"),", ",D({},"aria-autocomplete"),", and ",D({},'role="textbox"'),".")))),k({id:"Base"},"Base"),Object(n.createElement)(i.a,{demoStyles:"height: 28rem;"},Object(m.f)(S)),k({id:"States"},"States"),q({id:"Date-selection"},"Date selection"),Object(n.createElement)(i.a,{demoStyles:"height: 28rem;"},Object(m.f)(E,"date-selection")),q({id:"Time-selection"},"Time selection"),Object(n.createElement)(i.a,{demoStyles:"height: 28rem;"},Object(m.f)(E,"time-selection")))},P=function(){return Object(o.a)(N())}}});

package/__internal/chunked/docs/ui/components/docked-composer/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/docked-composer/docs.mdx.js"]=function(e){function a(a){for(var t,o,i=a[0],d=a[1],c=a[2],r=0,p=[];r<i.length;r++)o=i[r],Object.prototype.hasOwnProperty.call(l,o)&&l[o]&&p.push(l[o][0]),l[o]=0;for(t in d)Object.prototype.hasOwnProperty.call(d,t)&&(e[t]=d[t]);for(m&&m(a);p.length;)p.shift()();return n.push.apply(n,c\|\|[]),s()}function s(){for(var e,a=0;a<n.length;a++){for(var s=n[a],t=!0,i=1;i<s.length;i++){var d=s[i];0!==l[d]&&(t=!1)}t&&(n.splice(a--,1),e=o(o.s=s[0]))}return e}var t={},l={27:0},n=[];function o(a){if(t[a])return t[a].exports;var s=t[a]={i:a,l:!1,exports:{}};return e[a].call(s.exports,s,s.exports,o),s.l=!0,s.exports}o.m=e,o.c=t,o.d=function(e,a,s){o.o(e,a)\|\|Object.defineProperty(e,a,{enumerable:!0,get:s})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,a){if(1&a&&(e=o(e)),8&a)return e;if(4&a&&"object"==typeof e&&e&&e.__esModule)return e;var s=Object.create(null);if(o.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&a&&"string"!=typeof e)for(var t in e)o.d(s,t,function(a){return e[a]}.bind(null,t));return s},o.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(a,"a",a),a},o.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},o.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],d=i.push.bind(i);i.push=a,i=i.slice();for(var c=0;c<i.length;c++)a(i[c]);var m=d;return n.push([727,0]),s()}({0:function(e,a){e.exports=React},19:function(e,a){e.exports=ReactDOM},20:function(e,a){e.exports=JSBeautify},727:function(e,a,s){"use strict";s.r(a),s.d(a,"getElement",(function(){return T})),s.d(a,"getContents",(function(){return A}));var t=s(0),l=s.n(t),n=s(4),o=s(2),i=(s(25),s(14),s(46)),d=s(7),c=s(9),m=s(21),r=s(18),p=s(8),u=s(16),b=s(64),h=s(28),E=s(10),_=s(5),N=s.n(_),g=s(1),f=[{entity:"email",title:"Agenda for next week"},{entity:"call",title:"Lei Chan"},{entity:"task",title:"August 14 Meeting Notes"}],v=function(e){return l.a.createElement("div",{className:"slds-col_bump-left slds-text-align_right"},l.a.createElement("button",{className:"slds-button slds-button_brand"},"Action"))},x=function(e){return l.a.createElement("div",{className:"slds-col_bump-left slds-grid slds-grid_vertical-align-center"},l.a.createElement("div",{className:"slds-grid slds-m-right_small",role:"toolbar"},l.a.createElement("ul",{className:"slds-grid","aria-label":"Insert content"},l.a.createElement("li",null,l.a.createElement(d.b,{className:"slds-button_icon-small",symbol:"link",assistiveText:"Attach File",title:"Attach File"})),l.a.createElement("li",null,l.a.createElement(d.b,{className:"slds-button_icon-small",symbol:"insert_template",assistiveText:"Insert Template",title:"Insert Template",tabIndex:"-1"})),l.a.createElement("li",null,l.a.createElement(d.b,{className:"slds-button_icon-small",symbol:"insert_tag_field",assistiveText:"Insert HTML",title:"Insert HTML",tabIndex:"-1"}))),l.a.createElement(d.b,{className:"slds-button_icon-small",symbol:"preview",assistiveText:"Preview",title:"Preview",tabIndex:"-1"})),l.a.createElement("button",{className:"slds-button slds-button_brand"},"Send"))},y=function(e){return l.a.createElement("section",{className:N()("slds-docked-composer slds-grid slds-grid_vertical",e.className,e.dialogClosed?"slds-is-closed":null),role:e.nestedDialog?null:"dialog","aria-labelledby":e.nestedDialog?null:"dialog-heading-id-1","aria-describedby":e.nestedDialog?null:"dialog-content-id-1"},l.a.createElement("header",{className:"slds-docked-composer__header slds-grid slds-shrink-none","aria-live":"assertive"},l.a.createElement("div",{className:"slds-media slds-media_center slds-no-space"},l.a.createElement("div",{className:"slds-media__figure slds-m-right_x-small"},l.a.createElement("span",{className:"slds-icon_container"},l.a.createElement(E.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"standard",symbol:e.headerSymbol\|\|"call"}))),l.a.createElement("div",{className:"slds-media__body"},e.dialogClosed?l.a.createElement("span",{className:"slds-assistive-text"},"Minimized"):null,l.a.createElement("h2",{className:"slds-truncate",id:"dialog-heading-id-1",title:e.header\|\|"Header"},e.header\|\|"Header"))),l.a.createElement("div",{className:"slds-col_bump-left slds-shrink-none"},l.a.createElement(d.b,{className:"slds-button_icon",symbol:"minimize_window",assistiveText:"Minimize Composer Panel",title:"Minimize window"}),l.a.createElement(d.b,{className:"slds-button_icon",symbol:"expand_alt",assistiveText:"Expand Composer Panel",title:"Expand Composer"}),l.a.createElement(d.b,{className:"slds-button_icon",symbol:"close",assistiveText:"Close Composer Panel",title:"Close"}))),l.a.createElement("div",{className:N()("slds-docked-composer__body",e.bodyClassName),id:"dialog-content-id-1"},e.children),e.footer?l.a.createElement("footer",{className:N()("slds-docked-composer__footer slds-shrink-none",e.footerClassName)},e.footer):null)},w=function(e){return l.a.createElement("div",{className:"slds-docked-composer slds-docked-composer_overflow"},l.a.createElement("button",{className:"slds-button slds-button_icon slds-docked-composer_overflow__button","aria-haspopup":"true"},l.a.createElement(E.a,{className:"slds-button__icon",sprite:"utility",symbol:"standard_objects"}),l.a.createElement("span",{className:"slds-text-body_small slds-m-left_xx-small"},"3"," ",l.a.createElement("span",{className:"slds-assistive-text"},"other docked composer panels"))),l.a.createElement(c.f,{className:"slds-dropdown_left slds-dropdown_bottom slds-dropdown_medium slds-nubbin_bottom-left"},l.a.createElement(c.h,{className:"slds-dropdown_length-with-icon-7"},g.d.times(f.length,(function(e){return l.a.createElement(c.g,{key:e,title:f[e].title},l.a.createElement("span",{className:"slds-icon_container slds-icon-standard-"+f[e].entity+" slds-m-right_x-small"},l.a.createElement(E.a,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:f[e].entity}),l.a.createElement("span",{className:"slds-assistive-text"},f[e].entity)),f[e].title)})))))},C=function(e){return l.a.createElement(b.c,{listboxClassName:"slds-dropdown slds-dropdown_fluid",vertical:!0,id:e.id},l.a.createElement(b.d,null,l.a.createElement(b.b,{id:e.listboxOptionId,entityTitle:"Acme",entityMeta:!0})))},k=l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",footer:l.a.createElement(v,null)},l.a.createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",l.a.createElement("br",null)," This area consumes the feature"))),j=[{id:"single-composer-open",label:"Open",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",footer:l.a.createElement(v,null)},l.a.createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",l.a.createElement("br",null)," This area consumes the feature")))},{id:"single-composer-focused",label:"Focused",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open slds-has-focus",footer:l.a.createElement(v,null)},l.a.createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",l.a.createElement("br",null)," This area consumes the feature")))},{id:"single-composer-closed",label:"Closed",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{dialogClosed:!0,footer:l.a.createElement(v,null)},l.a.createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",l.a.createElement("br",null)," This area consumes the feature")))},{id:"single-composer-closed-focused",label:"Closed Focused",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-has-focus",dialogClosed:!0,footer:l.a.createElement(v,null)},l.a.createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",l.a.createElement("br",null)," This area consumes the feature")))},{id:"single-composer-popout",label:"Popout",element:l.a.createElement(m.a,null,l.a.createElement(m.b,{className:"slds-docked-composer-modal","aria-labelledby":"dialog-heading-id-1","aria-describedby":"dialog-content-id-1",closeButton:!1},l.a.createElement(m.c,{id:"modal-content-id"},l.a.createElement(y,{footer:l.a.createElement(v,null),nestedDialog:!0},l.a.createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",l.a.createElement("br",null)," This area consumes the feature")))))},{id:"multiple-composer-overflow",label:"With Overflow Menu",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(w,null),l.a.createElement(y,{className:"slds-is-open",footer:l.a.createElement(v,null)},l.a.createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",l.a.createElement("br",null)," This area consumes the feature")))}],S=[{id:"task",label:"Log a Task",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",bodyClassName:"slds-docked-composer__body_form",header:"New Task",headerSymbol:"task",footer:l.a.createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Save")},l.a.createElement("fieldset",{className:"slds-form-element slds-form_compound"},l.a.createElement("legend",{className:"slds-assistive-text"},"Log new task"),l.a.createElement("div",{className:"slds-form-element__control"},l.a.createElement("div",{className:"slds-form-element__group"},l.a.createElement("div",{className:"slds-form-element__row"},l.a.createElement("div",{className:"slds-form-element slds-size_1-of-1"},l.a.createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-01"},"Subject"),l.a.createElement("div",{className:"slds-form-element__control"},l.a.createElement("input",{className:"slds-input",type:"text",id:"text-input-01"})))),l.a.createElement("div",{className:"slds-form-element__row"},l.a.createElement("div",{className:"slds-form-element slds-size_1-of-2"},l.a.createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-02"},"Assigned To"),l.a.createElement("div",{className:"slds-form-element__control"},l.a.createElement("input",{className:"slds-input",type:"text",id:"text-input-02"}))),l.a.createElement("div",{className:"slds-form-element slds-size_1-of-2"},l.a.createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-03"},"Due Dates"),l.a.createElement("div",{className:"slds-form-element__control"},l.a.createElement("input",{className:"slds-input",type:"text",id:"text-input-03"})))),l.a.createElement("div",{className:"slds-form-element__row"},l.a.createElement(b.a,{formClassName:"slds-size_1-of-2",autocomplete:!0,label:"Name",placeholder:"Search Leads",inputIcon:"right",inputIconRightSymbol:"search",objectSwitcher:!0,objectSwitcherInline:!0,"aria-controls":"listbox-id-01",listbox:l.a.createElement(C,{id:"listbox-id-01",listboxOptionId:"listbox-option-id-1"})}),l.a.createElement(b.a,{formClassName:"slds-size_1-of-2",autocomplete:!0,label:"Name",placeholder:"Search Accounts",inputIcon:"right",inputIconRightSymbol:"search",objectSwitcher:!0,objectSwitcherInline:!0,"aria-controls":"listbox-id-02",listbox:l.a.createElement(C,{id:"listbox-id-02",listboxOptionId:"listbox-option-id-2"})})))))))},{id:"voice-composer-queued",label:"Voice - Queued",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Connecting...",footer:l.a.createElement("button",{className:"slds-button slds-button_destructive slds-size_1-of-1"},"End Call")},l.a.createElement("div",{className:"slds-text-align_center slds-align-middle"},l.a.createElement("span",{className:"slds-avatar slds-avatar_large"},l.a.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),l.a.createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),l.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},l.a.createElement("li",{className:"slds-item"},"VP of Sales"),l.a.createElement("li",{className:"slds-item "},"Acme Corporation")),l.a.createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Connecting..."))))},{id:"voice-composer-ringing",label:"Voice - Ringing",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Dialing...",footer:l.a.createElement("button",{className:"slds-button slds-button_destructive slds-size_1-of-1"},"End Call")},l.a.createElement("div",{className:"slds-text-align_center slds-align-middle"},l.a.createElement("span",{className:"slds-avatar slds-avatar_large"},l.a.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),l.a.createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),l.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},l.a.createElement("li",{className:"slds-item"},"VP of Sales"),l.a.createElement("li",{className:"slds-item "},"Acme Corporation")),l.a.createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Dialing..."))))},{id:"voice-composer-connected",label:"Voice - Connected",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",header:"Lei Chan - Call in Progress",footer:l.a.createElement("button",{className:"slds-button slds-button_destructive slds-col_bump-left"},"End Call")},l.a.createElement("div",{className:"slds-docked-composer__lead"},l.a.createElement("div",{className:"slds-media"},l.a.createElement("div",{className:"slds-media__figure"},l.a.createElement("span",{className:"slds-avatar slds-avatar_medium"},l.a.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"}))),l.a.createElement("div",{className:"slds-media__body"},l.a.createElement("p",{className:"slds-text-heading_medium"},"Lei Chan"),l.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},l.a.createElement("li",{className:"slds-item"},"VP of Sales"),l.a.createElement("li",{className:"slds-item "},"Acme Corporation")))),l.a.createElement("p",{className:"slds-col_bump-left slds-text-heading_large"},"5:37")),l.a.createElement("div",{className:"slds-docked-composer__toolbar"},l.a.createElement(d.b,{className:"slds-button_icon-border-filled slds-button_icon-small",symbol:"unmuted",assistiveText:"Mute Yourself",title:"Mute Yourself","aria-pressed":"false"})),l.a.createElement("label",{className:"slds-assistive-text",htmlFor:"composer-text-input-1"},"Take notes"),l.a.createElement("textarea",{id:"composer-text-input-1",className:"slds-docked-composer__input slds-input_bare slds-text-longform slds-grow",placeholder:"Jot down notes here..."})))},{id:"voice-composer-cancelled",label:"Voice - Cancelled",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Cancelling..."},l.a.createElement("div",{className:"slds-text-align_center slds-align-middle"},l.a.createElement("span",{className:"slds-avatar slds-avatar_large"},l.a.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),l.a.createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),l.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},l.a.createElement("li",{className:"slds-item"},"VP of Sales"),l.a.createElement("li",{className:"slds-item "},"Acme Corporation")),l.a.createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Cancelling..."))))},{id:"voice-composer-busy",label:"Voice - Busy",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Busy",footer:[l.a.createElement("button",{className:"slds-button slds-button_neutral slds-size_1-of-2",key:g.d.uniqueId("follow-up-")},"Follow-Up Later"),l.a.createElement("button",{className:"slds-button slds-button_brand slds-size_1-of-2",key:g.d.uniqueId("call-again-")},"Call Again")]},l.a.createElement("div",{className:"slds-text-align_center slds-align-middle"},l.a.createElement("span",{className:"slds-avatar slds-avatar_large"},l.a.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),l.a.createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),l.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},l.a.createElement("li",{className:"slds-item"},"VP of Sales"),l.a.createElement("li",{className:"slds-item "},"Acme Corporation")),l.a.createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Busy"))))},{id:"voice-composer-failed",label:"Voice - Call Failed",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Call Failed",footer:[l.a.createElement("button",{className:"slds-button slds-button_neutral slds-size_1-of-2",key:g.d.uniqueId("follow-up-")},"Edit Phone Number"),l.a.createElement("button",{className:"slds-button slds-button_brand slds-size_1-of-2",key:g.d.uniqueId("call-again-")},"Call Again")]},l.a.createElement("div",{className:"slds-text-align_center slds-align-middle"},l.a.createElement("span",{className:"slds-avatar slds-avatar_large"},l.a.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),l.a.createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),l.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},l.a.createElement("li",{className:"slds-item"},"VP of Sales"),l.a.createElement("li",{className:"slds-item "},"Acme Corporation")),l.a.createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Call Failed"))))},{id:"voice-composer-no-answer",label:"Voice - No Answer",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - No Answer",footer:[l.a.createElement("button",{className:"slds-button slds-button_neutral slds-size_1-of-2",key:g.d.uniqueId("follow-up-")},"Follow-Up Later"),l.a.createElement("button",{className:"slds-button slds-button_brand slds-size_1-of-2",key:g.d.uniqueId("call-again-")},"Call Again")]},l.a.createElement("div",{className:"slds-text-align_center slds-align-middle"},l.a.createElement("span",{className:"slds-avatar slds-avatar_large"},l.a.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),l.a.createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),l.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},l.a.createElement("li",{className:"slds-item"},"VP of Sales"),l.a.createElement("li",{className:"slds-item "},"Acme Corporation")),l.a.createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"No Answer"))))},{id:"voice-composer-call-finished",label:"Voice - Call Finished",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",header:"Lei Chan - Call Finished",footer:l.a.createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Finish Notes")},l.a.createElement("div",{className:"slds-docked-composer__lead"},l.a.createElement("div",{className:"slds-media"},l.a.createElement("div",{className:"slds-media__figure"},l.a.createElement("span",{className:"slds-avatar slds-avatar_medium"},l.a.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"}))),l.a.createElement("div",{className:"slds-media__body"},l.a.createElement("p",{className:"slds-text-heading_medium"},"Lei Chan"),l.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},l.a.createElement("li",{className:"slds-item"},"VP of Sales"),l.a.createElement("li",{className:"slds-item "},"Acme Corporation"))))),l.a.createElement("div",{className:"slds-docked-composer__toolbar"},l.a.createElement(d.b,{className:"slds-button_icon-border-filled slds-button_icon-small",symbol:"unmuted",assistiveText:"Mute Yourself",title:"Mute Yourself","aria-pressed":"false"})),l.a.createElement("label",{className:"slds-assistive-text",htmlFor:"composer-text-input-1"},"Take notes"),l.a.createElement("textarea",{id:"composer-text-input-1",className:"slds-docked-composer__input slds-input_bare slds-text-longform slds-grow",placeholder:"Jot down notes here..."})))},{id:"voice-composer-call-incoming",label:"Voice - Call Incoming",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center slds-size_1-of-1",header:"Lei Chan - Incoming Call...",footer:l.a.createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Finish Notes")},l.a.createElement("div",{className:"slds-text-align_center slds-align-middle"},l.a.createElement("span",{className:"slds-avatar slds-avatar_large"},l.a.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),l.a.createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),l.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},l.a.createElement("li",{className:"slds-item"},"VP of Sales"),l.a.createElement("li",{className:"slds-item "},"Acme Corporation")),l.a.createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"(416) 555-1234")),l.a.createElement("div",{className:"slds-p-horizontal_x-small slds-text-align_left slds-size_1-of-1"},l.a.createElement("h3",{className:"slds-m-bottom_x-small"},"Recent Activity"),l.a.createElement("ul",{className:"slds-has-dividers_around-space"},l.a.createElement("li",{className:"slds-item slds-theme_shade slds-grid"},l.a.createElement("span",{className:"slds-icon_container slds-icon-standard-task slds-m-right_x-small"},l.a.createElement(E.a,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"task"}),l.a.createElement("span",{className:"slds-assistive-text"},"Task")),"Discussed New Pricing Models",l.a.createElement("span",{className:"slds-col_bump-left"},"Yesterday")),l.a.createElement("li",{className:"slds-item slds-theme_shade slds-grid"},l.a.createElement("span",{className:"slds-icon_container slds-icon-standard-email slds-m-right_x-small"},l.a.createElement(E.a,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"email"}),l.a.createElement("span",{className:"slds-assistive-text"},"Email")),"Re: Updated Proposals",l.a.createElement("span",{className:"slds-col_bump-left"},"4 Hours Ago")),l.a.createElement("li",{className:"slds-item slds-theme_shade slds-grid"},l.a.createElement("span",{className:"slds-icon_container slds-icon-standard-note slds-m-right_x-small"},l.a.createElement(E.a,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"note"}),l.a.createElement("span",{className:"slds-assistive-text"},"Note")),"Discuss Slides for Nov EBC",l.a.createElement("span",{className:"slds-col_bump-left"},"2 Days Ago"))))))},{id:"voice-composer-call-logged",label:"Voice - Log a Call",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",bodyClassName:"slds-docked-composer__body_form",header:"Lei Chan",footer:l.a.createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Save")},l.a.createElement("fieldset",{className:"slds-form-element slds-form_compound"},l.a.createElement("legend",{className:"slds-assistive-text"},"Log a call"),l.a.createElement("div",{className:"slds-form-element__control"},l.a.createElement("div",{className:"slds-form-element__group"},l.a.createElement("div",{className:"slds-form-element__row"},l.a.createElement("div",{className:"slds-form-element slds-size_1-of-1"},l.a.createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-01"},"Subject"),l.a.createElement("div",{className:"slds-form-element__control"},l.a.createElement("input",{className:"slds-input",type:"text",id:"text-input-01"})))),l.a.createElement("div",{className:"slds-form-element__row"},l.a.createElement("div",{className:"slds-form-element slds-size_1-of-1"},l.a.createElement("label",{className:"slds-form-element__label",htmlFor:"textarea-input-01"},"Comments"),l.a.createElement("div",{className:"slds-form-element__control"},l.a.createElement("textarea",{className:"slds-textarea",id:"textarea-input-01"})))),l.a.createElement("div",{className:"slds-form-element__row"},l.a.createElement(b.a,{formClassName:"slds-size_1-of-2",autocomplete:!0,label:"Name",placeholder:"Search Leads",inputIcon:"right",inputIconRightSymbol:"search",objectSwitcher:!0,objectSwitcherInline:!0,"aria-controls":"listbox-id-01",listbox:l.a.createElement(C,{id:"listbox-id-01",listboxOptionId:"listbox-option-id-1"})}),l.a.createElement(b.a,{formClassName:"slds-size_1-of-2",autocomplete:!0,label:"Name",placeholder:"Search Accounts",inputIcon:"right",inputIconRightSymbol:"search",objectSwitcher:!0,objectSwitcherInline:!0,"aria-controls":"listbox-id-02",listbox:l.a.createElement(C,{id:"listbox-id-02",listboxOptionId:"listbox-option-id-2"})})))))))},{id:"email",label:"Email Composer",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",header:"New Email",headerSymbol:"email",footer:l.a.createElement(x,null)},l.a.createElement("div",{className:"slds-email-composer"},l.a.createElement(b.a,{id:"recipients-to",formClassName:"slds-email-composer__combobox",selectedOptionsInline:!0,label:"To",placeholder:" ",autocomplete:!0,"aria-controls":"listbox-id-01",listbox:l.a.createElement(C,{id:"listbox-id-01",listboxOptionId:"listbox-option-id-1"})},l.a.createElement(h.b,null,l.a.createElement(h.c,null,l.a.createElement(h.a,{label:"jrogers@cloudhub.com",tabIndex:"0"},l.a.createElement(i.a,{className:"slds-avatar_x-small slds-pill__icon_container"},l.a.createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"})))))),l.a.createElement(b.a,{id:"recipients-bcc",formClassName:"slds-email-composer__combobox",selectedOptionsInline:!0,label:"Bcc",placeholder:" ",autocomplete:!0,"aria-controls":"listbox-id-02",listbox:l.a.createElement(C,{id:"listbox-id-02",listboxOptionId:"listbox-option-id-2"})}),l.a.createElement(b.a,{id:"recipients-cc",formClassName:"slds-email-composer__combobox",selectedOptionsInline:!0,label:"Cc",placeholder:" ",autocomplete:!0,"aria-controls":"listbox-id-03",listbox:l.a.createElement(C,{id:"listbox-id-03",listboxOptionId:"listbox-option-id-3"})}),l.a.createElement(p.b,{labelContent:"Enter subject",hasHiddenLabel:!0,inputId:"input-subject-01"},l.a.createElement(u.a,{id:"input-subject-01",className:"slds-input_bare",placeholder:"Enter Subject"})),l.a.createElement(r.a,null,l.a.createElement(r.l,null,l.a.createElement(r.f,null),l.a.createElement(r.g,{tabIndexSetting:"-1"}),l.a.createElement(r.e,null),l.a.createElement(r.d,null),l.a.createElement(r.b,null),l.a.createElement(r.i,null),l.a.createElement(r.c,null)),l.a.createElement(r.k,{placeholder:"Compose Email..."})))))}],O=n.c.code,L=n.c.h2,I=n.c.h3,V=n.c.h4,P=n.c.h5,z=n.c.p,T=function(){return Object(t.createElement)(n.b,{},Object(t.createElement)("div",{className:"doc lead"},"Docked Composer is a persistent utility bar that allows a user to continually use the app to complete tasks or gather information while expanding/collapsing a composer window."),Object(t.createElement)(o.a,{exampleOnly:!0,isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"voice-composer-connected")),L({id:"About-Docked-Composer"},"About Docked Composer"),I({id:"Implementation"},"Implementation"),z({},"The docked composer relies heavily on utility classes to piece together the layout so please pay close attention to the markup and classes."),z({},"The overflow menu for docked composer, ",O({},".slds-docked-composer_overflow"),", displays when the number of docked composers exceeds the width of the viewport. The overflow pill displays with a number indicator for all hidden docked composers. A user can invoke a popover with all available docked composers and replace the furthest left docked composer with the one being selected."),z({},'When a user clicks on the "pop out" icon in the ',O({},".slds-docked-composer__header"),", a modal displays and contains the task that was currently in the docked composer."),L({id:"Base"},"Base"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(k)),I({id:"States"},"States"),V({id:"OpenFocused"},"Open/Focused"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(j,"single-composer-focused")),V({id:"Closed"},"Closed"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(j,"single-composer-closed")),V({id:"ClosedFocused"},"Closed/Focused"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(j,"single-composer-closed-focused")),V({id:"Popped-out"},"Popped out"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(j,"single-composer-popout")),V({id:"With-overflow-menu"},"With overflow menu"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(j,"multiple-composer-overflow")),I({id:"Examples"},"Examples"),V({id:"Log-a-task"},"Log a task"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"task")),V({id:"Email-Composer"},"Email Composer"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"email")),V({id:"Voice"},"Voice"),P({id:"Queued"},"Queued"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"voice-composer-queued")),P({id:"Ringing"},"Ringing"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"voice-composer-ringing")),P({id:"Connected"},"Connected"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"voice-composer-connected")),P({id:"Cancelled"},"Cancelled"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"voice-composer-cancelled")),P({id:"Busy"},"Busy"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"voice-composer-busy")),P({id:"Call-Failed"},"Call Failed"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"voice-composer-failed")),P({id:"No-Answer"},"No Answer"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"voice-composer-no-answer")),P({id:"Call-Finished"},"Call Finished"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"voice-composer-call-finished")),P({id:"Call-Incoming"},"Call Incoming"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"voice-composer-call-incoming")),P({id:"Call-Logged"},"Call Logged"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"voice-composer-call-logged")))},A=function(){return Object(n.a)(T())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/docked-composer/docs.mdx.js"]=function(e){function a(a){for(var t,o,i=a[0],d=a[1],c=a[2],r=0,p=[];r<i.length;r++)o=i[r],Object.prototype.hasOwnProperty.call(l,o)&&l[o]&&p.push(l[o][0]),l[o]=0;for(t in d)Object.prototype.hasOwnProperty.call(d,t)&&(e[t]=d[t]);for(m&&m(a);p.length;)p.shift()();return n.push.apply(n,c\|\|[]),s()}function s(){for(var e,a=0;a<n.length;a++){for(var s=n[a],t=!0,i=1;i<s.length;i++){var d=s[i];0!==l[d]&&(t=!1)}t&&(n.splice(a--,1),e=o(o.s=s[0]))}return e}var t={},l={27:0},n=[];function o(a){if(t[a])return t[a].exports;var s=t[a]={i:a,l:!1,exports:{}};return e[a].call(s.exports,s,s.exports,o),s.l=!0,s.exports}o.m=e,o.c=t,o.d=function(e,a,s){o.o(e,a)\|\|Object.defineProperty(e,a,{enumerable:!0,get:s})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,a){if(1&a&&(e=o(e)),8&a)return e;if(4&a&&"object"==typeof e&&e&&e.__esModule)return e;var s=Object.create(null);if(o.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&a&&"string"!=typeof e)for(var t in e)o.d(s,t,function(a){return e[a]}.bind(null,t));return s},o.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(a,"a",a),a},o.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},o.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],d=i.push.bind(i);i.push=a,i=i.slice();for(var c=0;c<i.length;c++)a(i[c]);var m=d;return n.push([728,0]),s()}({0:function(e,a){e.exports=React},20:function(e,a){e.exports=ReactDOM},21:function(e,a){e.exports=JSBeautify},728:function(e,a,s){"use strict";s.r(a),s.d(a,"getElement",(function(){return T})),s.d(a,"getContents",(function(){return A}));var t=s(0),l=s.n(t),n=s(4),o=s(2),i=(s(26),s(14),s(47)),d=s(7),c=s(9),m=s(22),r=s(19),p=s(8),u=s(17),b=s(65),h=s(29),E=s(10),_=s(5),N=s.n(_),g=s(1),f=[{entity:"email",title:"Agenda for next week"},{entity:"call",title:"Lei Chan"},{entity:"task",title:"August 14 Meeting Notes"}],v=function(e){return l.a.createElement("div",{className:"slds-col_bump-left slds-text-align_right"},l.a.createElement("button",{className:"slds-button slds-button_brand"},"Action"))},x=function(e){return l.a.createElement("div",{className:"slds-col_bump-left slds-grid slds-grid_vertical-align-center"},l.a.createElement("div",{className:"slds-grid slds-m-right_small",role:"toolbar"},l.a.createElement("ul",{className:"slds-grid","aria-label":"Insert content"},l.a.createElement("li",null,l.a.createElement(d.b,{className:"slds-button_icon-small",symbol:"link",assistiveText:"Attach File",title:"Attach File"})),l.a.createElement("li",null,l.a.createElement(d.b,{className:"slds-button_icon-small",symbol:"insert_template",assistiveText:"Insert Template",title:"Insert Template",tabIndex:"-1"})),l.a.createElement("li",null,l.a.createElement(d.b,{className:"slds-button_icon-small",symbol:"insert_tag_field",assistiveText:"Insert HTML",title:"Insert HTML",tabIndex:"-1"}))),l.a.createElement(d.b,{className:"slds-button_icon-small",symbol:"preview",assistiveText:"Preview",title:"Preview",tabIndex:"-1"})),l.a.createElement("button",{className:"slds-button slds-button_brand"},"Send"))},y=function(e){return l.a.createElement("section",{className:N()("slds-docked-composer slds-grid slds-grid_vertical",e.className,e.dialogClosed?"slds-is-closed":null),role:e.nestedDialog?null:"dialog","aria-labelledby":e.nestedDialog?null:"dialog-heading-id-1","aria-describedby":e.nestedDialog?null:"dialog-content-id-1"},l.a.createElement("header",{className:"slds-docked-composer__header slds-grid slds-shrink-none","aria-live":"assertive"},l.a.createElement("div",{className:"slds-media slds-media_center slds-no-space"},l.a.createElement("div",{className:"slds-media__figure slds-m-right_x-small"},l.a.createElement("span",{className:"slds-icon_container"},l.a.createElement(E.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"standard",symbol:e.headerSymbol\|\|"call"}))),l.a.createElement("div",{className:"slds-media__body"},e.dialogClosed?l.a.createElement("span",{className:"slds-assistive-text"},"Minimized"):null,l.a.createElement("h2",{className:"slds-truncate",id:"dialog-heading-id-1",title:e.header\|\|"Header"},e.header\|\|"Header"))),l.a.createElement("div",{className:"slds-col_bump-left slds-shrink-none"},l.a.createElement(d.b,{className:"slds-button_icon",symbol:"minimize_window",assistiveText:"Minimize Composer Panel",title:"Minimize window"}),l.a.createElement(d.b,{className:"slds-button_icon",symbol:"expand_alt",assistiveText:"Expand Composer Panel",title:"Expand Composer"}),l.a.createElement(d.b,{className:"slds-button_icon",symbol:"close",assistiveText:"Close Composer Panel",title:"Close"}))),l.a.createElement("div",{className:N()("slds-docked-composer__body",e.bodyClassName),id:"dialog-content-id-1"},e.children),e.footer?l.a.createElement("footer",{className:N()("slds-docked-composer__footer slds-shrink-none",e.footerClassName)},e.footer):null)},w=function(e){return l.a.createElement("div",{className:"slds-docked-composer slds-docked-composer_overflow"},l.a.createElement("button",{className:"slds-button slds-button_icon slds-docked-composer_overflow__button","aria-haspopup":"true"},l.a.createElement(E.a,{className:"slds-button__icon",sprite:"utility",symbol:"standard_objects"}),l.a.createElement("span",{className:"slds-text-body_small slds-m-left_xx-small"},"3"," ",l.a.createElement("span",{className:"slds-assistive-text"},"other docked composer panels"))),l.a.createElement(c.f,{className:"slds-dropdown_left slds-dropdown_bottom slds-dropdown_medium slds-nubbin_bottom-left"},l.a.createElement(c.h,{className:"slds-dropdown_length-with-icon-7"},g.d.times(f.length,(function(e){return l.a.createElement(c.g,{key:e,title:f[e].title},l.a.createElement("span",{className:"slds-icon_container slds-icon-standard-"+f[e].entity+" slds-m-right_x-small"},l.a.createElement(E.a,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:f[e].entity}),l.a.createElement("span",{className:"slds-assistive-text"},f[e].entity)),f[e].title)})))))},C=function(e){return l.a.createElement(b.c,{listboxClassName:"slds-dropdown slds-dropdown_fluid",vertical:!0,id:e.id},l.a.createElement(b.d,null,l.a.createElement(b.b,{id:e.listboxOptionId,entityTitle:"Acme",entityMeta:!0})))},k=l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",footer:l.a.createElement(v,null)},l.a.createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",l.a.createElement("br",null)," This area consumes the feature"))),j=[{id:"single-composer-open",label:"Open",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",footer:l.a.createElement(v,null)},l.a.createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",l.a.createElement("br",null)," This area consumes the feature")))},{id:"single-composer-focused",label:"Focused",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open slds-has-focus",footer:l.a.createElement(v,null)},l.a.createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",l.a.createElement("br",null)," This area consumes the feature")))},{id:"single-composer-closed",label:"Closed",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{dialogClosed:!0,footer:l.a.createElement(v,null)},l.a.createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",l.a.createElement("br",null)," This area consumes the feature")))},{id:"single-composer-closed-focused",label:"Closed Focused",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-has-focus",dialogClosed:!0,footer:l.a.createElement(v,null)},l.a.createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",l.a.createElement("br",null)," This area consumes the feature")))},{id:"single-composer-popout",label:"Popout",element:l.a.createElement(m.a,null,l.a.createElement(m.b,{className:"slds-docked-composer-modal","aria-labelledby":"dialog-heading-id-1","aria-describedby":"dialog-content-id-1",closeButton:!1},l.a.createElement(m.c,{id:"modal-content-id"},l.a.createElement(y,{footer:l.a.createElement(v,null),nestedDialog:!0},l.a.createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",l.a.createElement("br",null)," This area consumes the feature")))))},{id:"multiple-composer-overflow",label:"With Overflow Menu",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(w,null),l.a.createElement(y,{className:"slds-is-open",footer:l.a.createElement(v,null)},l.a.createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",l.a.createElement("br",null)," This area consumes the feature")))}],S=[{id:"task",label:"Log a Task",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",bodyClassName:"slds-docked-composer__body_form",header:"New Task",headerSymbol:"task",footer:l.a.createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Save")},l.a.createElement("fieldset",{className:"slds-form-element slds-form_compound"},l.a.createElement("legend",{className:"slds-assistive-text"},"Log new task"),l.a.createElement("div",{className:"slds-form-element__control"},l.a.createElement("div",{className:"slds-form-element__group"},l.a.createElement("div",{className:"slds-form-element__row"},l.a.createElement("div",{className:"slds-form-element slds-size_1-of-1"},l.a.createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-01"},"Subject"),l.a.createElement("div",{className:"slds-form-element__control"},l.a.createElement("input",{className:"slds-input",type:"text",id:"text-input-01"})))),l.a.createElement("div",{className:"slds-form-element__row"},l.a.createElement("div",{className:"slds-form-element slds-size_1-of-2"},l.a.createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-02"},"Assigned To"),l.a.createElement("div",{className:"slds-form-element__control"},l.a.createElement("input",{className:"slds-input",type:"text",id:"text-input-02"}))),l.a.createElement("div",{className:"slds-form-element slds-size_1-of-2"},l.a.createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-03"},"Due Dates"),l.a.createElement("div",{className:"slds-form-element__control"},l.a.createElement("input",{className:"slds-input",type:"text",id:"text-input-03"})))),l.a.createElement("div",{className:"slds-form-element__row"},l.a.createElement(b.a,{formClassName:"slds-size_1-of-2",autocomplete:!0,label:"Name",placeholder:"Search Leads",inputIcon:"right",inputIconRightSymbol:"search",objectSwitcher:!0,objectSwitcherInline:!0,"aria-controls":"listbox-id-01",listbox:l.a.createElement(C,{id:"listbox-id-01",listboxOptionId:"listbox-option-id-1"})}),l.a.createElement(b.a,{formClassName:"slds-size_1-of-2",autocomplete:!0,label:"Name",placeholder:"Search Accounts",inputIcon:"right",inputIconRightSymbol:"search",objectSwitcher:!0,objectSwitcherInline:!0,"aria-controls":"listbox-id-02",listbox:l.a.createElement(C,{id:"listbox-id-02",listboxOptionId:"listbox-option-id-2"})})))))))},{id:"voice-composer-queued",label:"Voice - Queued",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Connecting...",footer:l.a.createElement("button",{className:"slds-button slds-button_destructive slds-size_1-of-1"},"End Call")},l.a.createElement("div",{className:"slds-text-align_center slds-align-middle"},l.a.createElement("span",{className:"slds-avatar slds-avatar_large"},l.a.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),l.a.createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),l.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},l.a.createElement("li",{className:"slds-item"},"VP of Sales"),l.a.createElement("li",{className:"slds-item "},"Acme Corporation")),l.a.createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Connecting..."))))},{id:"voice-composer-ringing",label:"Voice - Ringing",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Dialing...",footer:l.a.createElement("button",{className:"slds-button slds-button_destructive slds-size_1-of-1"},"End Call")},l.a.createElement("div",{className:"slds-text-align_center slds-align-middle"},l.a.createElement("span",{className:"slds-avatar slds-avatar_large"},l.a.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),l.a.createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),l.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},l.a.createElement("li",{className:"slds-item"},"VP of Sales"),l.a.createElement("li",{className:"slds-item "},"Acme Corporation")),l.a.createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Dialing..."))))},{id:"voice-composer-connected",label:"Voice - Connected",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",header:"Lei Chan - Call in Progress",footer:l.a.createElement("button",{className:"slds-button slds-button_destructive slds-col_bump-left"},"End Call")},l.a.createElement("div",{className:"slds-docked-composer__lead"},l.a.createElement("div",{className:"slds-media"},l.a.createElement("div",{className:"slds-media__figure"},l.a.createElement("span",{className:"slds-avatar slds-avatar_medium"},l.a.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"}))),l.a.createElement("div",{className:"slds-media__body"},l.a.createElement("p",{className:"slds-text-heading_medium"},"Lei Chan"),l.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},l.a.createElement("li",{className:"slds-item"},"VP of Sales"),l.a.createElement("li",{className:"slds-item "},"Acme Corporation")))),l.a.createElement("p",{className:"slds-col_bump-left slds-text-heading_large"},"5:37")),l.a.createElement("div",{className:"slds-docked-composer__toolbar"},l.a.createElement(d.b,{className:"slds-button_icon-border-filled slds-button_icon-small",symbol:"unmuted",assistiveText:"Mute Yourself",title:"Mute Yourself","aria-pressed":"false"})),l.a.createElement("label",{className:"slds-assistive-text",htmlFor:"composer-text-input-1"},"Take notes"),l.a.createElement("textarea",{id:"composer-text-input-1",className:"slds-docked-composer__input slds-input_bare slds-text-longform slds-grow",placeholder:"Jot down notes here..."})))},{id:"voice-composer-cancelled",label:"Voice - Cancelled",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Cancelling..."},l.a.createElement("div",{className:"slds-text-align_center slds-align-middle"},l.a.createElement("span",{className:"slds-avatar slds-avatar_large"},l.a.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),l.a.createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),l.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},l.a.createElement("li",{className:"slds-item"},"VP of Sales"),l.a.createElement("li",{className:"slds-item "},"Acme Corporation")),l.a.createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Cancelling..."))))},{id:"voice-composer-busy",label:"Voice - Busy",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Busy",footer:[l.a.createElement("button",{className:"slds-button slds-button_neutral slds-size_1-of-2",key:g.d.uniqueId("follow-up-")},"Follow-Up Later"),l.a.createElement("button",{className:"slds-button slds-button_brand slds-size_1-of-2",key:g.d.uniqueId("call-again-")},"Call Again")]},l.a.createElement("div",{className:"slds-text-align_center slds-align-middle"},l.a.createElement("span",{className:"slds-avatar slds-avatar_large"},l.a.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),l.a.createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),l.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},l.a.createElement("li",{className:"slds-item"},"VP of Sales"),l.a.createElement("li",{className:"slds-item "},"Acme Corporation")),l.a.createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Busy"))))},{id:"voice-composer-failed",label:"Voice - Call Failed",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Call Failed",footer:[l.a.createElement("button",{className:"slds-button slds-button_neutral slds-size_1-of-2",key:g.d.uniqueId("follow-up-")},"Edit Phone Number"),l.a.createElement("button",{className:"slds-button slds-button_brand slds-size_1-of-2",key:g.d.uniqueId("call-again-")},"Call Again")]},l.a.createElement("div",{className:"slds-text-align_center slds-align-middle"},l.a.createElement("span",{className:"slds-avatar slds-avatar_large"},l.a.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),l.a.createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),l.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},l.a.createElement("li",{className:"slds-item"},"VP of Sales"),l.a.createElement("li",{className:"slds-item "},"Acme Corporation")),l.a.createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Call Failed"))))},{id:"voice-composer-no-answer",label:"Voice - No Answer",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - No Answer",footer:[l.a.createElement("button",{className:"slds-button slds-button_neutral slds-size_1-of-2",key:g.d.uniqueId("follow-up-")},"Follow-Up Later"),l.a.createElement("button",{className:"slds-button slds-button_brand slds-size_1-of-2",key:g.d.uniqueId("call-again-")},"Call Again")]},l.a.createElement("div",{className:"slds-text-align_center slds-align-middle"},l.a.createElement("span",{className:"slds-avatar slds-avatar_large"},l.a.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),l.a.createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),l.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},l.a.createElement("li",{className:"slds-item"},"VP of Sales"),l.a.createElement("li",{className:"slds-item "},"Acme Corporation")),l.a.createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"No Answer"))))},{id:"voice-composer-call-finished",label:"Voice - Call Finished",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",header:"Lei Chan - Call Finished",footer:l.a.createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Finish Notes")},l.a.createElement("div",{className:"slds-docked-composer__lead"},l.a.createElement("div",{className:"slds-media"},l.a.createElement("div",{className:"slds-media__figure"},l.a.createElement("span",{className:"slds-avatar slds-avatar_medium"},l.a.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"}))),l.a.createElement("div",{className:"slds-media__body"},l.a.createElement("p",{className:"slds-text-heading_medium"},"Lei Chan"),l.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},l.a.createElement("li",{className:"slds-item"},"VP of Sales"),l.a.createElement("li",{className:"slds-item "},"Acme Corporation"))))),l.a.createElement("div",{className:"slds-docked-composer__toolbar"},l.a.createElement(d.b,{className:"slds-button_icon-border-filled slds-button_icon-small",symbol:"unmuted",assistiveText:"Mute Yourself",title:"Mute Yourself","aria-pressed":"false"})),l.a.createElement("label",{className:"slds-assistive-text",htmlFor:"composer-text-input-1"},"Take notes"),l.a.createElement("textarea",{id:"composer-text-input-1",className:"slds-docked-composer__input slds-input_bare slds-text-longform slds-grow",placeholder:"Jot down notes here..."})))},{id:"voice-composer-call-incoming",label:"Voice - Call Incoming",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center slds-size_1-of-1",header:"Lei Chan - Incoming Call...",footer:l.a.createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Finish Notes")},l.a.createElement("div",{className:"slds-text-align_center slds-align-middle"},l.a.createElement("span",{className:"slds-avatar slds-avatar_large"},l.a.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),l.a.createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),l.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},l.a.createElement("li",{className:"slds-item"},"VP of Sales"),l.a.createElement("li",{className:"slds-item "},"Acme Corporation")),l.a.createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"(416) 555-1234")),l.a.createElement("div",{className:"slds-p-horizontal_x-small slds-text-align_left slds-size_1-of-1"},l.a.createElement("h3",{className:"slds-m-bottom_x-small"},"Recent Activity"),l.a.createElement("ul",{className:"slds-has-dividers_around-space"},l.a.createElement("li",{className:"slds-item slds-theme_shade slds-grid"},l.a.createElement("span",{className:"slds-icon_container slds-icon-standard-task slds-m-right_x-small"},l.a.createElement(E.a,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"task"}),l.a.createElement("span",{className:"slds-assistive-text"},"Task")),"Discussed New Pricing Models",l.a.createElement("span",{className:"slds-col_bump-left"},"Yesterday")),l.a.createElement("li",{className:"slds-item slds-theme_shade slds-grid"},l.a.createElement("span",{className:"slds-icon_container slds-icon-standard-email slds-m-right_x-small"},l.a.createElement(E.a,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"email"}),l.a.createElement("span",{className:"slds-assistive-text"},"Email")),"Re: Updated Proposals",l.a.createElement("span",{className:"slds-col_bump-left"},"4 Hours Ago")),l.a.createElement("li",{className:"slds-item slds-theme_shade slds-grid"},l.a.createElement("span",{className:"slds-icon_container slds-icon-standard-note slds-m-right_x-small"},l.a.createElement(E.a,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"note"}),l.a.createElement("span",{className:"slds-assistive-text"},"Note")),"Discuss Slides for Nov EBC",l.a.createElement("span",{className:"slds-col_bump-left"},"2 Days Ago"))))))},{id:"voice-composer-call-logged",label:"Voice - Log a Call",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",bodyClassName:"slds-docked-composer__body_form",header:"Lei Chan",footer:l.a.createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Save")},l.a.createElement("fieldset",{className:"slds-form-element slds-form_compound"},l.a.createElement("legend",{className:"slds-assistive-text"},"Log a call"),l.a.createElement("div",{className:"slds-form-element__control"},l.a.createElement("div",{className:"slds-form-element__group"},l.a.createElement("div",{className:"slds-form-element__row"},l.a.createElement("div",{className:"slds-form-element slds-size_1-of-1"},l.a.createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-01"},"Subject"),l.a.createElement("div",{className:"slds-form-element__control"},l.a.createElement("input",{className:"slds-input",type:"text",id:"text-input-01"})))),l.a.createElement("div",{className:"slds-form-element__row"},l.a.createElement("div",{className:"slds-form-element slds-size_1-of-1"},l.a.createElement("label",{className:"slds-form-element__label",htmlFor:"textarea-input-01"},"Comments"),l.a.createElement("div",{className:"slds-form-element__control"},l.a.createElement("textarea",{className:"slds-textarea",id:"textarea-input-01"})))),l.a.createElement("div",{className:"slds-form-element__row"},l.a.createElement(b.a,{formClassName:"slds-size_1-of-2",autocomplete:!0,label:"Name",placeholder:"Search Leads",inputIcon:"right",inputIconRightSymbol:"search",objectSwitcher:!0,objectSwitcherInline:!0,"aria-controls":"listbox-id-01",listbox:l.a.createElement(C,{id:"listbox-id-01",listboxOptionId:"listbox-option-id-1"})}),l.a.createElement(b.a,{formClassName:"slds-size_1-of-2",autocomplete:!0,label:"Name",placeholder:"Search Accounts",inputIcon:"right",inputIconRightSymbol:"search",objectSwitcher:!0,objectSwitcherInline:!0,"aria-controls":"listbox-id-02",listbox:l.a.createElement(C,{id:"listbox-id-02",listboxOptionId:"listbox-option-id-2"})})))))))},{id:"email",label:"Email Composer",element:l.a.createElement("div",{className:"slds-docked_container"},l.a.createElement(y,{className:"slds-is-open",header:"New Email",headerSymbol:"email",footer:l.a.createElement(x,null)},l.a.createElement("div",{className:"slds-email-composer"},l.a.createElement(b.a,{id:"recipients-to",formClassName:"slds-email-composer__combobox",selectedOptionsInline:!0,label:"To",placeholder:" ",autocomplete:!0,"aria-controls":"listbox-id-01",listbox:l.a.createElement(C,{id:"listbox-id-01",listboxOptionId:"listbox-option-id-1"})},l.a.createElement(h.b,null,l.a.createElement(h.c,null,l.a.createElement(h.a,{label:"jrogers@cloudhub.com",tabIndex:"0"},l.a.createElement(i.a,{className:"slds-avatar_x-small slds-pill__icon_container"},l.a.createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"})))))),l.a.createElement(b.a,{id:"recipients-bcc",formClassName:"slds-email-composer__combobox",selectedOptionsInline:!0,label:"Bcc",placeholder:" ",autocomplete:!0,"aria-controls":"listbox-id-02",listbox:l.a.createElement(C,{id:"listbox-id-02",listboxOptionId:"listbox-option-id-2"})}),l.a.createElement(b.a,{id:"recipients-cc",formClassName:"slds-email-composer__combobox",selectedOptionsInline:!0,label:"Cc",placeholder:" ",autocomplete:!0,"aria-controls":"listbox-id-03",listbox:l.a.createElement(C,{id:"listbox-id-03",listboxOptionId:"listbox-option-id-3"})}),l.a.createElement(p.b,{labelContent:"Enter subject",hasHiddenLabel:!0,inputId:"input-subject-01"},l.a.createElement(u.a,{id:"input-subject-01",className:"slds-input_bare",placeholder:"Enter Subject"})),l.a.createElement(r.a,null,l.a.createElement(r.l,null,l.a.createElement(r.f,null),l.a.createElement(r.g,{tabIndexSetting:"-1"}),l.a.createElement(r.e,null),l.a.createElement(r.d,null),l.a.createElement(r.b,null),l.a.createElement(r.i,null),l.a.createElement(r.c,null)),l.a.createElement(r.k,{placeholder:"Compose Email..."})))))}],O=n.c.code,L=n.c.h2,I=n.c.h3,V=n.c.h4,P=n.c.h5,z=n.c.p,T=function(){return Object(t.createElement)(n.b,{},Object(t.createElement)("div",{className:"doc lead"},"Docked Composer is a persistent utility bar that allows a user to continually use the app to complete tasks or gather information while expanding/collapsing a composer window."),Object(t.createElement)(o.a,{exampleOnly:!0,isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"voice-composer-connected")),L({id:"About-Docked-Composer"},"About Docked Composer"),I({id:"Implementation"},"Implementation"),z({},"The docked composer relies heavily on utility classes to piece together the layout so please pay close attention to the markup and classes."),z({},"The overflow menu for docked composer, ",O({},".slds-docked-composer_overflow"),", displays when the number of docked composers exceeds the width of the viewport. The overflow pill displays with a number indicator for all hidden docked composers. A user can invoke a popover with all available docked composers and replace the furthest left docked composer with the one being selected."),z({},'When a user clicks on the "pop out" icon in the ',O({},".slds-docked-composer__header"),", a modal displays and contains the task that was currently in the docked composer."),L({id:"Base"},"Base"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(k)),I({id:"States"},"States"),V({id:"OpenFocused"},"Open/Focused"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(j,"single-composer-focused")),V({id:"Closed"},"Closed"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(j,"single-composer-closed")),V({id:"ClosedFocused"},"Closed/Focused"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(j,"single-composer-closed-focused")),V({id:"Popped-out"},"Popped out"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(j,"single-composer-popout")),V({id:"With-overflow-menu"},"With overflow menu"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(j,"multiple-composer-overflow")),I({id:"Examples"},"Examples"),V({id:"Log-a-task"},"Log a task"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"task")),V({id:"Email-Composer"},"Email Composer"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"email")),V({id:"Voice"},"Voice"),P({id:"Queued"},"Queued"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"voice-composer-queued")),P({id:"Ringing"},"Ringing"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"voice-composer-ringing")),P({id:"Connected"},"Connected"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"voice-composer-connected")),P({id:"Cancelled"},"Cancelled"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"voice-composer-cancelled")),P({id:"Busy"},"Busy"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"voice-composer-busy")),P({id:"Call-Failed"},"Call Failed"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"voice-composer-failed")),P({id:"No-Answer"},"No Answer"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"voice-composer-no-answer")),P({id:"Call-Finished"},"Call Finished"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"voice-composer-call-finished")),P({id:"Call-Incoming"},"Call Incoming"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"voice-composer-call-incoming")),P({id:"Call-Logged"},"Call Logged"),Object(t.createElement)(o.a,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},Object(g.f)(S,"voice-composer-call-logged")))},A=function(){return Object(n.a)(T())}}});