@salesforce-ux/design-system 2.25.0 → 2.25.2

package/__internal/chunked/docs/ui/components/builder-header/docs.mdx.js

@@ -1 +1 @@
-var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/builder-header/docs.mdx.js"]=function(e){function t(t){for(var r,s,l=t[0],i=t[1],c=t[2],d=0,m=[];d<l.length;d++)s=l[d],Object.prototype.hasOwnProperty.call(n,s)&&n[s]&&m.push(n[s][0]),n[s]=0;for(r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r]);for(u&&u(t);m.length;)m.shift()();return o.push.apply(o,c||[]),a()}function a(){for(var e,t=0;t<o.length;t++){for(var a=o[t],r=!0,l=1;l<a.length;l++){var i=a[l];0!==n[i]&&(r=!1)}r&&(o.splice(t--,1),e=s(s.s=a[0]))}return e}var r={},n={10:0},o=[];function s(t){if(r[t])return r[t].exports;var a=r[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,s),a.l=!0,a.exports}s.m=e,s.c=r,s.d=function(e,t,a){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(s.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)s.d(a,r,function(t){return e[t]}.bind(null,r));return a},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],i=l.push.bind(l);l.push=t,l=l.slice();for(var c=0;c<l.length;c++)t(l[c]);var u=i;return o.push([728,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},728:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return fe})),a.d(t,"getContents",(function(){return ye}));var r=a(0),n=a.n(r),o=a(4),s=a(2),l=a(14),i=a(1),c=a(3),u=a.n(c),d=a(25),m=a.n(d),p=a(10),b=a(7),h=a(20),f=a.n(h),y=a(63),v=a(77),E=a(102);function g(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}return a}function w(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function _(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 r,n,o=[],s=!0,l=!1;try{for(a=a.call(e);!(s=(r=a.next()).done)&&(o.push(r.value),!t||o.length!==t);s=!0);}catch(e){l=!0,n=e}finally{try{s||null==a.return||a.return()}finally{if(l)throw n}}return o}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return O(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 O(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 O(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,r=new Array(t);a<t;a++)r[a]=e[a];return r}var S=function(){return n.a.createElement("p",null,"The flow has 1 error that must be fixed before you can save."," ",n.a.createElement(E.a,{title:"Learn More"},"Learn more."))},j=function(e){var t=e.activeError,a=e.assistiveText,o=e.children,s=e.isWarning,l=e.isError,i=e.parentCallback,c=e.parentCallbackData,u=e.size,d=e.title,p=e.type,b=Object(r.useRef)(),h=Object(r.useRef)(),E=_(Object(r.useState)(),2),O=E[0],j=E[1],T=_(Object(r.useState)(!1),2),x=T[0],N=T[1],D=_(Object(r.useState)(!1),2),k=D[0],C=D[1],P=function(){b.current.focus(),N(!0)},W=function(){b.current.focus(),N(!1),C(!1),i(c)};Object(r.useEffect)((function(){function e(e){var t=A.get(e.keyCode);return t&&t(e)}return document.addEventListener("keydown",e),function(){return document.removeEventListener("keydown",e)}}));var A=new Map([[27,function(){x&&W()}],[9,function(e){if(x){C(!0);var t=h.current.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'),a=t[0],r=t[t.length-1];if(!e.shiftKey&&document.activeElement!==a)return a.focus(),e.preventDefault();e.shiftKey&&document.activeElement!==r&&(r.focus(),e.preventDefault())}}]]);Object(r.useEffect)((function(){var e=b.current,t=function(){j({right:"".concat(document.body.clientWidth-e.getBoundingClientRect().x-1.5*e.offsetWidth+6,"px"),top:"".concat(e.getBoundingClientRect().y+e.offsetHeight+window.scrollY+15,"px")})};return t(),window.addEventListener("resize",t),function(){return document.removeEventListener("resize",t)}}),[]),Object(r.useEffect)((function(){t&&P()}),[t]);var B=function(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?g(Object(a),!0).forEach((function(t){w(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):g(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}({position:"absolute"},O),I=m()("example-unique-id-");return n.a.createElement(n.a.Fragment,null,r.Children.only(o)&&n.a.cloneElement(o,{size:u,feedback:p,symbol:p,assistiveText:a,title:d,onClick:function(){x?W():P()},onBlur:function(){k||(N(!1),i(c))},innerRef:b}),x&&f.a.createPortal(n.a.createElement(y.a,{isWarning:s,isError:l,headingId:I,style:B,onClose:W,header:n.a.createElement(v.b,{headingId:I,title:"Review ".concat(p),symbol:p}),closeButton:!0,iconDefault:"warning"===p,inverse:"error"===p,innerRef:h,nubbinPosition:"top right"},n.a.createElement(S,null)),document.body))},T=Object(i.c)(!1,(function(e,t,a){if(!e.isError&&e[t])return new Error("activeError must be used with an error popover")})),x=Object(i.c)(!0,(function(e,t,a){var r=["Button","ButtonIcon"];n.a.Children.forEach(e[t],(function(e){if(!r.includes(e.type.name))throw new Error("".concat(a," child should be one of the type: ").concat(r.join(", ")))}))}));j.propTypes={activeError:T,assistiveText:u.a.string,children:x,isWarning:u.a.bool,isError:u.a.bool,parentCallback:u.a.func,parentCallbackData:u.a.node,size:u.a.string,type:u.a.string};var N=j,D=a(11),k=a(50),C=a(9);function P(e){return(P="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function W(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function A(e,t){for(var a=0;a<t.length;a++){var r=t[a];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function B(e,t,a){return t&&A(e.prototype,t),a&&A(e,a),Object.defineProperty(e,"prototype",{writable:!1}),e}function I(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&M(e,t)}function M(e,t){return(M=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function R(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var a,r=V(e);if(t){var n=V(this).constructor;a=Reflect.construct(r,arguments,n)}else a=r.apply(this,arguments);return L(this,a)}}function L(e,t){if(t&&("object"===P(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function V(e){return(V=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function H(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 r,n,o=[],s=!0,l=!1;try{for(a=a.call(e);!(s=(r=a.next()).done)&&(o.push(r.value),!t||o.length!==t);s=!0);}catch(e){l=!0,n=e}finally{try{s||null==a.return||a.return()}finally{if(l)throw n}}return o}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return z(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 z(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 z(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,r=new Array(t);a<t;a++)r[a]=e[a];return r}var U=function(){return n.a.createElement("div",{className:"slds-builder-header__item"},n.a.createElement("div",{className:"slds-builder-header__item-label slds-media slds-media_center"},n.a.createElement("div",{className:"slds-media__figure"},n.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:"builder",assistiveText:!1,title:!1})),n.a.createElement("div",{className:"slds-media__body"},"App Name")))},J=function(){return n.a.createElement(C.f,{className:"slds-dropdown_right slds-dropdown_actions"},n.a.createElement(C.h,{ariaLabel:"Show More"},n.a.createElement("li",{className:"slds-dropdown__header slds-truncate",role:"presentation",tabIndex:"0"},"Menu Header"),n.a.createElement(C.g,null,"Menu Item One"),n.a.createElement(C.g,null,"Menu Item Two"),n.a.createElement(C.g,null,"Menu Item Three")))},q=function(e){return n.a.createElement("nav",{className:"slds-builder-header__item slds-builder-header__nav"},n.a.createElement("ul",{className:"slds-builder-header__nav-list"},e.showDropDown&&n.a.createElement(F,{symbol:"page",showDropDown:e.showDropDown,openDropDown:e.openDropDown})))},F=function(e){var t=e.openDropDown,a=e.symbol;return n.a.createElement("li",{className:"slds-builder-header__nav-item slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open"},n.a.createElement("button",{className:"slds-button slds-builder-header__item-action slds-media slds-media_center","aria-haspopup":"true","aria-expanded":t,title:"Click to open menu"},n.a.createElement("span",{className:"slds-media__figure"},n.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:a,assistiveText:!1,title:!1})),n.a.createElement("span",{className:"slds-media__body"},n.a.createElement("span",{className:"slds-truncate",title:"Dropdown"},"Dropdown"),n.a.createElement(D.a,{containerClassName:"slds-current-color slds-m-left_small",className:"slds-icon_x-small",symbol:"chevrondown",assistiveText:!1,title:!1}))),t&&n.a.createElement(J,null))};F.propTypes={openDropDown:u.a.bool,symbol:u.a.string},F.defaultProps={openDropDown:!1};var K=function(e){var t=e.label;return n.a.createElement("div",{className:"slds-builder-header__item slds-has-flexi-truncate"},n.a.createElement("h1",{className:"slds-builder-header__item-label"},n.a.createElement("span",{className:"slds-truncate",title:t},t)))};K.propTypes={label:u.a.string},K.defaultProps={label:"Page Type"};var $=function(e){var t=e.hasBackTooltip,a=H(Object(r.useState)(t),2),o=a[0],s=a[1],l=H(Object(r.useState)(!1),2),i=l[0],c=l[1],u=H(Object(r.useState)(!1),2),d=u[0],p=u[1],b=m()("example-unique-id-");return n.a.createElement("div",{className:"slds-builder-header__item"},n.a.createElement("a",{href:"#",className:"slds-builder-header__item-action",onClick:function(e){return e.preventDefault()},onFocus:function(){c(!0),s(!0)},onBlur:function(){c(!1),d||s(null)},onMouseEnter:function(){p(!0),s(!0)},onMouseLeave:function(){p(!1),i||s(null)},"aria-describedby":o&&b,title:"Back"},n.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:"back",assistiveText:"Back",title:!1})),o&&n.a.createElement(k.a,{nubbinPosition:"top left",id:b,style:{position:"absolute",top:"100%",marginTop:"15px"}},"Back"))};$.propTypes={hasBackTooltip:u.a.bool};var Y=function(e){return n.a.createElement("div",{className:"slds-builder-header__utilities-item"},n.a.createElement("a",{href:"#",className:"slds-builder-header__item-action slds-media slds-media_center",onClick:function(e){return e.preventDefault()}},n.a.createElement("div",{className:"slds-media__figure"},n.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:"help",assistiveText:!1,title:!1})),n.a.createElement("div",{className:"slds-media__body"},"Help")))},G=function(e){var t=e.symbol;return n.a.createElement("div",{className:"slds-builder-header__utilities-item"},n.a.createElement("a",{href:"#",className:"slds-builder-header__item-action slds-media slds-media_center",onClick:function(e){return e.preventDefault()}},n.a.createElement("span",{className:"slds-media__figure"},n.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:t,assistiveText:!1,title:!1})),n.a.createElement("span",{className:"slds-media__body"},n.a.createElement("span",{className:"slds-truncate",title:"Link"},"Settings"))))};G.propTypes={symbol:u.a.string};var Q=function(e){return n.a.createElement("div",{className:"slds-builder-toolbar__item-group","aria-label":"Canvas Actions"},n.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"settings",assistiveText:"Canvas Settings",title:"Canvas Settings"}),n.a.createElement("div",{className:"slds-button-group"},n.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"undo",assistiveText:"Undo",title:"Undo",tabIndex:"0"}),n.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"redo",assistiveText:"Redo",title:"Redo",tabIndex:"-1"})))},X=function(e){return n.a.createElement("div",{className:"slds-builder-toolbar__item-group","aria-label":"Edit actions"},n.a.createElement("div",{className:"slds-button-group"},n.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"cut",assistiveText:"Cut",title:"Cut",tabIndex:"-1"}),n.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"copy",assistiveText:"Copy",title:"Copy",tabIndex:"-1"}),n.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"paste",assistiveText:"Paste",title:"Paste",tabIndex:"-1"})),n.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"toggle_panel_left",assistiveText:"Toggle Panel",title:"Toggle Panel"}))},Z=function(e){var t=e.hasStatusTooltip,a=H(Object(r.useState)(t),2),o=a[0],s=a[1],l=H(Object(r.useState)(!1),2),i=l[0],c=l[1],u=H(Object(r.useState)(!1),2),d=u[0],p=u[1],b=m()("example-unique-id-");return n.a.createElement(n.a.Fragment,null,o&&n.a.createElement(k.a,{nubbinPosition:"top left",id:b,style:{position:"absolute",top:"100%",marginTop:"15px"}},"Version saved by Johnny Appleseed Today 9:00 AM"),n.a.createElement("button",{className:"slds-button slds-p-horizontal_small","aria-describedby":o&&b,"aria-live":"polite",onFocus:function(){c(!0),s(!0)},onBlur:function(){c(!1),d||s(null)},onMouseEnter:function(){p(!0),s(!0)},onMouseLeave:function(){p(!1),i||s(null)}},"Inactive - Modified 1 day ago"))};Z.propTypes={hasStatusTooltip:u.a.bool};var ee=function(e){var t=e.hasStatus,a=e.hasStatusTooltip,o=e.hasWarning,s=e.hasError,l=[];o&&l.push("warning"),s&&l.push("error");var i=H(Object(r.useState)(!1),2),c=i[0],u=i[1],d=function(){s&&u(!0)},m=function(e){u(e)};return n.a.createElement("div",{className:"slds-builder-toolbar__actions","aria-label":"Document actions"},t&&n.a.createElement(Z,{hasStatusTooltip:a}),Array.isArray(l)&&l.length>0&&l.map((function(e,t){var a="warning"===e,r="error"===e;return n.a.createElement(N,{size:"medium",type:e,assistiveText:e,title:e,key:e+t,isWarning:a,isError:r,activeError:c&&r,parentCallback:m,parentCallbackData:!1},n.a.createElement(b.b,null))})),n.a.createElement("button",{className:"slds-button slds-button_neutral",disabled:c,onClick:d},n.a.createElement(p.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"right"})," ","Run"),n.a.createElement("button",{className:"slds-button slds-button_neutral",disabled:c,onClick:d},"Save As"),n.a.createElement("button",{className:"slds-button slds-button_brand",disabled:c,onClick:d},"Save"))};ee.propTypes={hasStatus:u.a.bool,hasStatusTooltip:u.a.bool,hasWarning:u.a.bool,hasError:u.a.bool};var te=function(e){I(a,e);var t=R(a);function a(){return W(this,a),t.apply(this,arguments)}return B(a,[{key:"render",value:function(){var e=this.props,t=e.hasStatus,a=e.hasStatusTooltip,r=e.hasWarning,o=e.hasError;return n.a.createElement("div",{className:"slds-builder-toolbar",role:"toolbar"},n.a.createElement(Q,null),n.a.createElement(X,null),n.a.createElement(ee,{hasStatus:t,hasStatusTooltip:a,hasWarning:r,hasError:o}))}}]),a}(r.Component);te.propTypes={hasStatus:u.a.bool,hasStatusTooltip:u.a.bool,hasWarning:u.a.bool,hasError:u.a.bool};var ae=function(e){I(a,e);var t=R(a);function a(){return W(this,a),t.apply(this,arguments)}return B(a,[{key:"render",value:function(){var e=this.props,t=e.showToolbar,a=e.docName,r=e.showDropDown,o=e.openDropDown,s=e.hasBackTooltip,l=e.hasStatus,i=e.hasStatusTooltip,c=e.hasWarning,u=e.hasError;return n.a.createElement("div",{className:"slds-builder-header_container"},n.a.createElement("header",{className:"slds-builder-header"},n.a.createElement($,{hasBackTooltip:s}),n.a.createElement(U,null),n.a.createElement(q,{showDropDown:r,openDropDown:o}),n.a.createElement(K,{label:a}),n.a.createElement("div",{className:"slds-builder-header__item slds-builder-header__utilities"},n.a.createElement(G,{symbol:"settings"}),n.a.createElement(Y,null))),t&&n.a.createElement(te,{hasStatus:l,hasStatusTooltip:i,hasWarning:c,hasError:u}))}}]),a}(r.Component);ae.propTypes={showToolbar:u.a.bool,docName:u.a.string,showDropDown:u.a.bool,openDropDown:u.a.bool,hasBackTooltip:u.a.bool,hasStatus:u.a.bool,hasStatusTooltip:u.a.bool,hasWarning:u.a.bool,hasError:u.a.bool},ae.defaultProps={showDropDown:!0};var re=ae,ne="height: 220px; position: relative;",oe=n.a.createElement(re,{showDropDown:!0}),se=[{id:"menu-open",label:"Menu open",isOpen:!0,element:n.a.createElement(re,{showDropDown:!0,openDropDown:!0})},{id:"with-truncation",label:"With Truncation",element:n.a.createElement(re,{docName:"Page Type with a very very long name that will truncate when the container is not wide enough to contain this content completely"})},{id:"has-tooltip",label:'Has "Back" Tooltip',element:n.a.createElement(re,{hasBackTooltip:!0})}],le=n.a.createElement(re,{showToolbar:!0}),ie=[{id:"menu-open-with-toolbar",label:"Menu open with toolbar",isOpen:!0,element:n.a.createElement(re,{openDropDown:!0,showToolbar:!0})},{id:"has-status-text",label:"Has Status Text",element:n.a.createElement(re,{hasStatus:!0,showToolbar:!0})},{id:"has-status-text-with-tooltip",label:"Has Status Text with Tooltip",element:n.a.createElement(re,{hasStatus:!0,hasStatusTooltip:!0,showToolbar:!0})},{id:"has-status-text-with-warning",label:"Has Status Text with Warning",element:n.a.createElement(re,{hasStatus:!0,hasWarning:!0,showToolbar:!0})},{id:"has-status-text-with-error",label:"Has Status Text with error",element:n.a.createElement(re,{hasStatus:!0,hasError:!0,showToolbar:!0})},{id:"has-status-text-with-warning-and-error",label:"Has Status Text with warning and error",element:n.a.createElement(re,{hasStatus:!0,hasWarning:!0,hasError:!0,showToolbar:!0})}],ce=o.c.a,ue=o.c.h2,de=o.c.h3,me=o.c.h4,pe=o.c.li,be=o.c.p,he=o.c.ul,fe=function(){return Object(r.createElement)(o.b,{},Object(r.createElement)("div",{className:"doc lead"},"Every builder needs a builder header, which contains basic navigation elements. It also shows the builder type and content name."),Object(r.createElement)(s.a,{exampleOnly:!0,isViewport:!0,demoStyles:ne},Object(i.f)(le)),ue({id:"About-Builder-Header"},"About Builder Header"),be({},"To learn more about the Builder pattern in general, check out our ",ce({href:"/guidelines/builder/overview/"},"guidelines"),", which includes a section about how to use the ",ce({href:"/guidelines/builder/header/"},"Builder Header"),"."),ue({id:"Base"},"Base"),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(oe)),ue({id:"With-open-dropdown-menu"},"With open dropdown menu"),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(se,"menu-open")),ue({id:"With-tooltip"},"With tooltip"),be({},'Use hover text to show where the builder has launched from. If the builder launches from only one location, hover text should read "Back."'),Object(r.createElement)(l.a,{type:"a11y",header:"Accessibility Note"},Object(r.createElement)("p",null,"The back action's ",Object(r.createElement)("code",null,"aria-describedby")," attribute must share the same value as the tooltip's ",Object(r.createElement)("code",null,"ID"),".")),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(se,"has-tooltip")),ue({id:"Variations"},"Variations"),de({id:"With-a-Truncated-Name"},"With a Truncated Name"),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(se,"with-truncation")),de({id:"With-a-Toolbar"},"With a Toolbar"),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(le)),de({id:"With-Status-text"},"With Status text"),be({},"Use status text and alerts with action buttons to reinforce status notifications, warnings, and errors."),be({},"A status text can include:"),he({},pe({},'A file (version) state, such as active, inactive, draft (e.g. "Inactive - Modified a few seconds ago")'),pe({},"Action, plus Last Modified Time, represented with ",ce({href:"https://developer.salesforce.com/docs/component-library/bundle/lightning:relativeDateTime/example"},"relativeDateTime"),'. (e.g. "Saved 1 day ago")')),be({},"When the user hovers or focuses status text, use a tooltip to communicate additional details (e.g., Version 2 saved by Johnny Appleseed Today 9:00 AM)."),Object(r.createElement)(l.a,{type:"a11y",header:"Accessibility Note"},Object(r.createElement)("p",null,"The status text's ",Object(r.createElement)("code",null,"aria-describedby")," attribute must share the same value as the tooltip's ",Object(r.createElement)("code",null,"ID"),".")),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(ie,"has-status-text")),de({id:"With-Alert"},"With Alert"),be({},"If the canvas or a canvas element generates a warning or error, an alert icon appears in the toolbar. Clicking or accessing by keyboard a popover's trigger element opens the popover."),Object(r.createElement)(l.a,{type:"a11y",header:"Accessibility Note"},Object(r.createElement)("p",null,"When a popover is invoked, keyboard focus is moved into the popover and remains trapped until it is closed by the ",Object(r.createElement)("strong",null,"close button")," or"," ",Object(r.createElement)("strong",null,"escape")," key. After the popover is closed, focus is returned to the original triggering element.")),me({id:"Warning"},"Warning"),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(ie,"has-status-text-with-warning")),me({id:"Error"},"Error"),be({},"When a user attempts to perform an action (e.g. save) and errors are present, an error popover is invoked and actions are disabled."),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(ie,"has-status-text-with-error")),me({id:"Warning-and-Error"},"Warning and Error"),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(ie,"has-status-text-with-warning-and-error")))},ye=function(){return Object(o.a)(fe())}}});
+var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/builder-header/docs.mdx.js"]=function(e){function t(t){for(var r,s,l=t[0],i=t[1],c=t[2],d=0,m=[];d<l.length;d++)s=l[d],Object.prototype.hasOwnProperty.call(n,s)&&n[s]&&m.push(n[s][0]),n[s]=0;for(r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r]);for(u&&u(t);m.length;)m.shift()();return o.push.apply(o,c||[]),a()}function a(){for(var e,t=0;t<o.length;t++){for(var a=o[t],r=!0,l=1;l<a.length;l++){var i=a[l];0!==n[i]&&(r=!1)}r&&(o.splice(t--,1),e=s(s.s=a[0]))}return e}var r={},n={10:0},o=[];function s(t){if(r[t])return r[t].exports;var a=r[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,s),a.l=!0,a.exports}s.m=e,s.c=r,s.d=function(e,t,a){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(s.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)s.d(a,r,function(t){return e[t]}.bind(null,r));return a},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],i=l.push.bind(l);l.push=t,l=l.slice();for(var c=0;c<l.length;c++)t(l[c]);var u=i;return o.push([728,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},728:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return fe})),a.d(t,"getContents",(function(){return ye}));var r=a(0),n=a.n(r),o=a(4),s=a(2),l=a(14),i=a(1),c=a(3),u=a.n(c),d=a(25),m=a.n(d),p=a(10),b=a(7),h=a(20),f=a.n(h),y=a(61),v=a(72),E=a(102);function g(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}return a}function w(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function _(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 r,n,o=[],s=!0,l=!1;try{for(a=a.call(e);!(s=(r=a.next()).done)&&(o.push(r.value),!t||o.length!==t);s=!0);}catch(e){l=!0,n=e}finally{try{s||null==a.return||a.return()}finally{if(l)throw n}}return o}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return O(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 O(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 O(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,r=new Array(t);a<t;a++)r[a]=e[a];return r}var S=function(){return n.a.createElement("p",null,"The flow has 1 error that must be fixed before you can save."," ",n.a.createElement(E.a,{title:"Learn More"},"Learn more."))},j=function(e){var t=e.activeError,a=e.assistiveText,o=e.children,s=e.isWarning,l=e.isError,i=e.parentCallback,c=e.parentCallbackData,u=e.size,d=e.title,p=e.type,b=Object(r.useRef)(),h=Object(r.useRef)(),E=_(Object(r.useState)(),2),O=E[0],j=E[1],T=_(Object(r.useState)(!1),2),x=T[0],N=T[1],D=_(Object(r.useState)(!1),2),k=D[0],C=D[1],P=function(){b.current.focus(),N(!0)},W=function(){b.current.focus(),N(!1),C(!1),i(c)};Object(r.useEffect)((function(){function e(e){var t=A.get(e.keyCode);return t&&t(e)}return document.addEventListener("keydown",e),function(){return document.removeEventListener("keydown",e)}}));var A=new Map([[27,function(){x&&W()}],[9,function(e){if(x){C(!0);var t=h.current.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'),a=t[0],r=t[t.length-1];if(!e.shiftKey&&document.activeElement!==a)return a.focus(),e.preventDefault();e.shiftKey&&document.activeElement!==r&&(r.focus(),e.preventDefault())}}]]);Object(r.useEffect)((function(){var e=b.current,t=function(){j({right:"".concat(document.body.clientWidth-e.getBoundingClientRect().x-1.5*e.offsetWidth+6,"px"),top:"".concat(e.getBoundingClientRect().y+e.offsetHeight+window.scrollY+15,"px")})};return t(),window.addEventListener("resize",t),function(){return document.removeEventListener("resize",t)}}),[]),Object(r.useEffect)((function(){t&&P()}),[t]);var B=function(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?g(Object(a),!0).forEach((function(t){w(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):g(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}({position:"absolute"},O),I=m()("example-unique-id-");return n.a.createElement(n.a.Fragment,null,r.Children.only(o)&&n.a.cloneElement(o,{size:u,feedback:p,symbol:p,assistiveText:a,title:d,onClick:function(){x?W():P()},onBlur:function(){k||(N(!1),i(c))},innerRef:b}),x&&f.a.createPortal(n.a.createElement(y.a,{isWarning:s,isError:l,headingId:I,style:B,onClose:W,header:n.a.createElement(v.b,{headingId:I,title:"Review ".concat(p),symbol:p}),closeButton:!0,iconDefault:"warning"===p,inverse:"error"===p,innerRef:h,nubbinPosition:"top right"},n.a.createElement(S,null)),document.body))},T=Object(i.c)(!1,(function(e,t,a){if(!e.isError&&e[t])return new Error("activeError must be used with an error popover")})),x=Object(i.c)(!0,(function(e,t,a){var r=["Button","ButtonIcon"];n.a.Children.forEach(e[t],(function(e){if(!r.includes(e.type.name))throw new Error("".concat(a," child should be one of the type: ").concat(r.join(", ")))}))}));j.propTypes={activeError:T,assistiveText:u.a.string,children:x,isWarning:u.a.bool,isError:u.a.bool,parentCallback:u.a.func,parentCallbackData:u.a.node,size:u.a.string,type:u.a.string};var N=j,D=a(11),k=a(50),C=a(9);function P(e){return(P="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function W(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function A(e,t){for(var a=0;a<t.length;a++){var r=t[a];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function B(e,t,a){return t&&A(e.prototype,t),a&&A(e,a),Object.defineProperty(e,"prototype",{writable:!1}),e}function I(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&M(e,t)}function M(e,t){return(M=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function R(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var a,r=V(e);if(t){var n=V(this).constructor;a=Reflect.construct(r,arguments,n)}else a=r.apply(this,arguments);return L(this,a)}}function L(e,t){if(t&&("object"===P(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function V(e){return(V=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function H(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 r,n,o=[],s=!0,l=!1;try{for(a=a.call(e);!(s=(r=a.next()).done)&&(o.push(r.value),!t||o.length!==t);s=!0);}catch(e){l=!0,n=e}finally{try{s||null==a.return||a.return()}finally{if(l)throw n}}return o}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return z(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 z(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 z(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,r=new Array(t);a<t;a++)r[a]=e[a];return r}var U=function(){return n.a.createElement("div",{className:"slds-builder-header__item"},n.a.createElement("div",{className:"slds-builder-header__item-label slds-media slds-media_center"},n.a.createElement("div",{className:"slds-media__figure"},n.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:"builder",assistiveText:!1,title:!1})),n.a.createElement("div",{className:"slds-media__body"},"App Name")))},J=function(){return n.a.createElement(C.f,{className:"slds-dropdown_right slds-dropdown_actions"},n.a.createElement(C.h,{ariaLabel:"Show More"},n.a.createElement("li",{className:"slds-dropdown__header slds-truncate",role:"presentation",tabIndex:"0"},"Menu Header"),n.a.createElement(C.g,null,"Menu Item One"),n.a.createElement(C.g,null,"Menu Item Two"),n.a.createElement(C.g,null,"Menu Item Three")))},q=function(e){return n.a.createElement("nav",{className:"slds-builder-header__item slds-builder-header__nav"},n.a.createElement("ul",{className:"slds-builder-header__nav-list"},e.showDropDown&&n.a.createElement(F,{symbol:"page",showDropDown:e.showDropDown,openDropDown:e.openDropDown})))},F=function(e){var t=e.openDropDown,a=e.symbol;return n.a.createElement("li",{className:"slds-builder-header__nav-item slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open"},n.a.createElement("button",{className:"slds-button slds-builder-header__item-action slds-media slds-media_center","aria-haspopup":"true","aria-expanded":t,title:"Click to open menu"},n.a.createElement("span",{className:"slds-media__figure"},n.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:a,assistiveText:!1,title:!1})),n.a.createElement("span",{className:"slds-media__body"},n.a.createElement("span",{className:"slds-truncate",title:"Dropdown"},"Dropdown"),n.a.createElement(D.a,{containerClassName:"slds-current-color slds-m-left_small",className:"slds-icon_x-small",symbol:"chevrondown",assistiveText:!1,title:!1}))),t&&n.a.createElement(J,null))};F.propTypes={openDropDown:u.a.bool,symbol:u.a.string},F.defaultProps={openDropDown:!1};var K=function(e){var t=e.label;return n.a.createElement("div",{className:"slds-builder-header__item slds-has-flexi-truncate"},n.a.createElement("h1",{className:"slds-builder-header__item-label"},n.a.createElement("span",{className:"slds-truncate",title:t},t)))};K.propTypes={label:u.a.string},K.defaultProps={label:"Page Type"};var $=function(e){var t=e.hasBackTooltip,a=H(Object(r.useState)(t),2),o=a[0],s=a[1],l=H(Object(r.useState)(!1),2),i=l[0],c=l[1],u=H(Object(r.useState)(!1),2),d=u[0],p=u[1],b=m()("example-unique-id-");return n.a.createElement("div",{className:"slds-builder-header__item"},n.a.createElement("a",{href:"#",className:"slds-builder-header__item-action",onClick:function(e){return e.preventDefault()},onFocus:function(){c(!0),s(!0)},onBlur:function(){c(!1),d||s(null)},onMouseEnter:function(){p(!0),s(!0)},onMouseLeave:function(){p(!1),i||s(null)},"aria-describedby":o&&b,title:"Back"},n.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:"back",assistiveText:"Back",title:!1})),o&&n.a.createElement(k.a,{nubbinPosition:"top left",id:b,style:{position:"absolute",top:"100%",marginTop:"15px"}},"Back"))};$.propTypes={hasBackTooltip:u.a.bool};var Y=function(e){return n.a.createElement("div",{className:"slds-builder-header__utilities-item"},n.a.createElement("a",{href:"#",className:"slds-builder-header__item-action slds-media slds-media_center",onClick:function(e){return e.preventDefault()}},n.a.createElement("div",{className:"slds-media__figure"},n.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:"help",assistiveText:!1,title:!1})),n.a.createElement("div",{className:"slds-media__body"},"Help")))},G=function(e){var t=e.symbol;return n.a.createElement("div",{className:"slds-builder-header__utilities-item"},n.a.createElement("a",{href:"#",className:"slds-builder-header__item-action slds-media slds-media_center",onClick:function(e){return e.preventDefault()}},n.a.createElement("span",{className:"slds-media__figure"},n.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:t,assistiveText:!1,title:!1})),n.a.createElement("span",{className:"slds-media__body"},n.a.createElement("span",{className:"slds-truncate",title:"Link"},"Settings"))))};G.propTypes={symbol:u.a.string};var Q=function(e){return n.a.createElement("div",{className:"slds-builder-toolbar__item-group","aria-label":"Canvas Actions"},n.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"settings",assistiveText:"Canvas Settings",title:"Canvas Settings"}),n.a.createElement("div",{className:"slds-button-group"},n.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"undo",assistiveText:"Undo",title:"Undo",tabIndex:"0"}),n.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"redo",assistiveText:"Redo",title:"Redo",tabIndex:"-1"})))},X=function(e){return n.a.createElement("div",{className:"slds-builder-toolbar__item-group","aria-label":"Edit actions"},n.a.createElement("div",{className:"slds-button-group"},n.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"cut",assistiveText:"Cut",title:"Cut",tabIndex:"-1"}),n.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"copy",assistiveText:"Copy",title:"Copy",tabIndex:"-1"}),n.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"paste",assistiveText:"Paste",title:"Paste",tabIndex:"-1"})),n.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"toggle_panel_left",assistiveText:"Toggle Panel",title:"Toggle Panel"}))},Z=function(e){var t=e.hasStatusTooltip,a=H(Object(r.useState)(t),2),o=a[0],s=a[1],l=H(Object(r.useState)(!1),2),i=l[0],c=l[1],u=H(Object(r.useState)(!1),2),d=u[0],p=u[1],b=m()("example-unique-id-");return n.a.createElement(n.a.Fragment,null,o&&n.a.createElement(k.a,{nubbinPosition:"top left",id:b,style:{position:"absolute",top:"100%",marginTop:"15px"}},"Version saved by Johnny Appleseed Today 9:00 AM"),n.a.createElement("button",{className:"slds-button slds-p-horizontal_small","aria-describedby":o&&b,"aria-live":"polite",onFocus:function(){c(!0),s(!0)},onBlur:function(){c(!1),d||s(null)},onMouseEnter:function(){p(!0),s(!0)},onMouseLeave:function(){p(!1),i||s(null)}},"Inactive - Modified 1 day ago"))};Z.propTypes={hasStatusTooltip:u.a.bool};var ee=function(e){var t=e.hasStatus,a=e.hasStatusTooltip,o=e.hasWarning,s=e.hasError,l=[];o&&l.push("warning"),s&&l.push("error");var i=H(Object(r.useState)(!1),2),c=i[0],u=i[1],d=function(){s&&u(!0)},m=function(e){u(e)};return n.a.createElement("div",{className:"slds-builder-toolbar__actions","aria-label":"Document actions"},t&&n.a.createElement(Z,{hasStatusTooltip:a}),Array.isArray(l)&&l.length>0&&l.map((function(e,t){var a="warning"===e,r="error"===e;return n.a.createElement(N,{size:"medium",type:e,assistiveText:e,title:e,key:e+t,isWarning:a,isError:r,activeError:c&&r,parentCallback:m,parentCallbackData:!1},n.a.createElement(b.b,null))})),n.a.createElement("button",{className:"slds-button slds-button_neutral",disabled:c,onClick:d},n.a.createElement(p.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"right"})," ","Run"),n.a.createElement("button",{className:"slds-button slds-button_neutral",disabled:c,onClick:d},"Save As"),n.a.createElement("button",{className:"slds-button slds-button_brand",disabled:c,onClick:d},"Save"))};ee.propTypes={hasStatus:u.a.bool,hasStatusTooltip:u.a.bool,hasWarning:u.a.bool,hasError:u.a.bool};var te=function(e){I(a,e);var t=R(a);function a(){return W(this,a),t.apply(this,arguments)}return B(a,[{key:"render",value:function(){var e=this.props,t=e.hasStatus,a=e.hasStatusTooltip,r=e.hasWarning,o=e.hasError;return n.a.createElement("div",{className:"slds-builder-toolbar",role:"toolbar"},n.a.createElement(Q,null),n.a.createElement(X,null),n.a.createElement(ee,{hasStatus:t,hasStatusTooltip:a,hasWarning:r,hasError:o}))}}]),a}(r.Component);te.propTypes={hasStatus:u.a.bool,hasStatusTooltip:u.a.bool,hasWarning:u.a.bool,hasError:u.a.bool};var ae=function(e){I(a,e);var t=R(a);function a(){return W(this,a),t.apply(this,arguments)}return B(a,[{key:"render",value:function(){var e=this.props,t=e.showToolbar,a=e.docName,r=e.showDropDown,o=e.openDropDown,s=e.hasBackTooltip,l=e.hasStatus,i=e.hasStatusTooltip,c=e.hasWarning,u=e.hasError;return n.a.createElement("div",{className:"slds-builder-header_container"},n.a.createElement("header",{className:"slds-builder-header"},n.a.createElement($,{hasBackTooltip:s}),n.a.createElement(U,null),n.a.createElement(q,{showDropDown:r,openDropDown:o}),n.a.createElement(K,{label:a}),n.a.createElement("div",{className:"slds-builder-header__item slds-builder-header__utilities"},n.a.createElement(G,{symbol:"settings"}),n.a.createElement(Y,null))),t&&n.a.createElement(te,{hasStatus:l,hasStatusTooltip:i,hasWarning:c,hasError:u}))}}]),a}(r.Component);ae.propTypes={showToolbar:u.a.bool,docName:u.a.string,showDropDown:u.a.bool,openDropDown:u.a.bool,hasBackTooltip:u.a.bool,hasStatus:u.a.bool,hasStatusTooltip:u.a.bool,hasWarning:u.a.bool,hasError:u.a.bool},ae.defaultProps={showDropDown:!0};var re=ae,ne="height: 220px; position: relative;",oe=n.a.createElement(re,{showDropDown:!0}),se=[{id:"menu-open",label:"Menu open",isOpen:!0,element:n.a.createElement(re,{showDropDown:!0,openDropDown:!0})},{id:"with-truncation",label:"With Truncation",element:n.a.createElement(re,{docName:"Page Type with a very very long name that will truncate when the container is not wide enough to contain this content completely"})},{id:"has-tooltip",label:'Has "Back" Tooltip',element:n.a.createElement(re,{hasBackTooltip:!0})}],le=n.a.createElement(re,{showToolbar:!0}),ie=[{id:"menu-open-with-toolbar",label:"Menu open with toolbar",isOpen:!0,element:n.a.createElement(re,{openDropDown:!0,showToolbar:!0})},{id:"has-status-text",label:"Has Status Text",element:n.a.createElement(re,{hasStatus:!0,showToolbar:!0})},{id:"has-status-text-with-tooltip",label:"Has Status Text with Tooltip",element:n.a.createElement(re,{hasStatus:!0,hasStatusTooltip:!0,showToolbar:!0})},{id:"has-status-text-with-warning",label:"Has Status Text with Warning",element:n.a.createElement(re,{hasStatus:!0,hasWarning:!0,showToolbar:!0})},{id:"has-status-text-with-error",label:"Has Status Text with error",element:n.a.createElement(re,{hasStatus:!0,hasError:!0,showToolbar:!0})},{id:"has-status-text-with-warning-and-error",label:"Has Status Text with warning and error",element:n.a.createElement(re,{hasStatus:!0,hasWarning:!0,hasError:!0,showToolbar:!0})}],ce=o.c.a,ue=o.c.h2,de=o.c.h3,me=o.c.h4,pe=o.c.li,be=o.c.p,he=o.c.ul,fe=function(){return Object(r.createElement)(o.b,{},Object(r.createElement)("div",{className:"doc lead"},"Every builder needs a builder header, which contains basic navigation elements. It also shows the builder type and content name."),Object(r.createElement)(s.a,{exampleOnly:!0,isViewport:!0,demoStyles:ne},Object(i.f)(le)),ue({id:"About-Builder-Header"},"About Builder Header"),be({},"To learn more about the Builder pattern in general, check out our ",ce({href:"/guidelines/builder/overview/"},"guidelines"),", which includes a section about how to use the ",ce({href:"/guidelines/builder/header/"},"Builder Header"),"."),ue({id:"Base"},"Base"),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(oe)),ue({id:"With-open-dropdown-menu"},"With open dropdown menu"),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(se,"menu-open")),ue({id:"With-tooltip"},"With tooltip"),be({},'Use hover text to show where the builder has launched from. If the builder launches from only one location, hover text should read "Back."'),Object(r.createElement)(l.a,{type:"a11y",header:"Accessibility Note"},Object(r.createElement)("p",null,"The back action's ",Object(r.createElement)("code",null,"aria-describedby")," attribute must share the same value as the tooltip's ",Object(r.createElement)("code",null,"ID"),".")),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(se,"has-tooltip")),ue({id:"Variations"},"Variations"),de({id:"With-a-Truncated-Name"},"With a Truncated Name"),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(se,"with-truncation")),de({id:"With-a-Toolbar"},"With a Toolbar"),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(le)),de({id:"With-Status-text"},"With Status text"),be({},"Use status text and alerts with action buttons to reinforce status notifications, warnings, and errors."),be({},"A status text can include:"),he({},pe({},'A file (version) state, such as active, inactive, draft (e.g. "Inactive - Modified a few seconds ago")'),pe({},"Action, plus Last Modified Time, represented with ",ce({href:"https://developer.salesforce.com/docs/component-library/bundle/lightning:relativeDateTime/example"},"relativeDateTime"),'. (e.g. "Saved 1 day ago")')),be({},"When the user hovers or focuses status text, use a tooltip to communicate additional details (e.g., Version 2 saved by Johnny Appleseed Today 9:00 AM)."),Object(r.createElement)(l.a,{type:"a11y",header:"Accessibility Note"},Object(r.createElement)("p",null,"The status text's ",Object(r.createElement)("code",null,"aria-describedby")," attribute must share the same value as the tooltip's ",Object(r.createElement)("code",null,"ID"),".")),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(ie,"has-status-text")),de({id:"With-Alert"},"With Alert"),be({},"If the canvas or a canvas element generates a warning or error, an alert icon appears in the toolbar. Clicking or accessing by keyboard a popover's trigger element opens the popover."),Object(r.createElement)(l.a,{type:"a11y",header:"Accessibility Note"},Object(r.createElement)("p",null,"When a popover is invoked, keyboard focus is moved into the popover and remains trapped until it is closed by the ",Object(r.createElement)("strong",null,"close button")," or"," ",Object(r.createElement)("strong",null,"escape")," key. After the popover is closed, focus is returned to the original triggering element.")),me({id:"Warning"},"Warning"),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(ie,"has-status-text-with-warning")),me({id:"Error"},"Error"),be({},"When a user attempts to perform an action (e.g. save) and errors are present, an error popover is invoked and actions are disabled."),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(ie,"has-status-text-with-error")),me({id:"Warning-and-Error"},"Warning and Error"),Object(r.createElement)(s.a,{isViewport:!0,demoStyles:ne},Object(i.f)(ie,"has-status-text-with-warning-and-error")))},ye=function(){return Object(o.a)(fe())}}});

package/__internal/chunked/docs/ui/components/button-icons/docs.mdx.js

@@ -1 +1 @@
-var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/button-icons/docs.mdx.js"]=function(e){function t(t){for(var a,o,r=t[0],i=t[1],c=t[2],b=0,m=[];b<r.length;b++)o=r[b],Object.prototype.hasOwnProperty.call(l,o)&&l[o]&&m.push(l[o][0]),l[o]=0;for(a in i)Object.prototype.hasOwnProperty.call(i,a)&&(e[a]=i[a]);for(d&&d(t);m.length;)m.shift()();return s.push.apply(s,c||[]),n()}function n(){for(var e,t=0;t<s.length;t++){for(var n=s[t],a=!0,r=1;r<n.length;r++){var i=n[r];0!==l[i]&&(a=!1)}a&&(s.splice(t--,1),e=o(o.s=n[0]))}return e}var a={},l={12:0},s=[];function o(t){if(a[t])return a[t].exports;var n=a[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.m=e,o.c=a,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},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,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)o.d(n,a,function(t){return e[t]}.bind(null,a));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],i=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var d=i;return s.push([719,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},719:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return V})),n.d(t,"getContents",(function(){return Y}));var a=n(0),l=n.n(a),s=n(4),o=n(2),r=n(27),i=n(14),c=n(15),d=n(28),b=n(45),m=n(7),u=n(12),h=n(10),O=[{id:"default",label:"Base – default",element:l.a.createElement(m.b,{assistiveText:"Settings",title:"Settings"})}],p=[{id:"error",label:"Base - Error",element:l.a.createElement(m.b,{feedback:"error",symbol:"error",title:"Error",assistiveText:"Error"})},{id:"warning",label:"Base - Warning",element:l.a.createElement(m.b,{feedback:"warning",symbol:"warning",title:"Warning",assistiveText:"Warning"})},{id:"bare-disabled",label:"Base - Disabled",element:l.a.createElement(m.b,{assistiveText:"Settings",disabled:!0,title:"Settings"})}],j=[{id:"hint-hover",label:"Base - Hint on hover",element:l.a.createElement(m.a,null,l.a.createElement(m.b,{assistiveText:"Settings",iconClassName:"slds-button__icon_hint",title:"Settings"}))},{id:"button-icon-lbc-mismatch",label:"Button Icon - LBC Mismatch",element:l.a.createElement(u.a,{className:"slds-button_icon slds-button_icon-border"},l.a.createElement("span",{className:"slds-assistive-text"},"Error"),l.a.createElement(h.a,{sprite:"utility",symbol:"clock",className:"slds-button__icon slds-icon-text-error"}))}],E="background-color: #f4f6f9; padding: 0.5rem;",f=[{id:"default",label:"Bordered Filled – default",demoStyles:E,storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"Search",symbol:"search",theme:"neutral",title:"Search"})}],v=[{id:"disabled",label:"Bordered Filled - Disabled",demoStyles:E,storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"Search",disabled:!0,symbol:"search",theme:"neutral",title:"Search"})}],g=[{id:"with-dropdown",label:"Bordered Filled - With dropdown",demoStyles:E,storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"More options",hasDropdown:!0,theme:"neutral",title:"More Options"})},{id:"hint-hover",label:"Bordered Filled - Hint on hover",demoStyles:E,storybookStyles:!0,element:l.a.createElement(m.a,null,l.a.createElement(m.b,{assistiveText:"More options",iconClassName:"slds-button__icon_hint",theme:"neutral",title:"More Options"}))}],y="background-color: #16325C; padding: 0.5rem;",S=[{id:"default",label:"Bordered Inverse – default",demoStyles:y,storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"Search",size:"medium",symbol:"search",theme:"inverse",title:"Search"})}],_=[{id:"disabled",label:"Bordered Inverse – Disabled",demoStyles:y,storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"Search",disabled:!0,size:"medium",symbol:"search",theme:"inverse",title:"Search"})}],x=[{id:"with-dropdown",label:"Bordered Inverse – With dropdown",demoStyles:y,storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"More options",hasDropdown:!0,theme:"neutral",title:"More Options"})},{id:"hint-hover",label:"Bordered Inverse – Hint on hover",demoStyles:y,storybookStyles:!0,element:l.a.createElement(m.a,null,l.a.createElement(m.b,{assistiveText:"More options",iconClassName:"slds-button__icon_inverse-hint",size:"medium",theme:"inverse",title:"More Options"}))}],w=[{id:"default",label:"Bordered Transparent - default",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"transparent",symbol:"search"})}],T=[{id:"disabled",label:"Bordered Transparent - Disabled",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"transparent",symbol:"search",disabled:!0})}],M=[{id:"hint-hover",label:"Bordered Transparent - Hint on hover",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:l.a.createElement("div",{className:"slds-hint-parent"},l.a.createElement(m.b,{theme:"transparent",iconClassName:"slds-button__icon_hint",assistiveText:"More options",title:"More Options"}))}],k=[{id:"default",label:"Brand – default",element:l.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"brand",symbol:"search"})}],B=[{id:"disabled",label:"Brand – Disabled",element:l.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"brand",symbol:"search",disabled:!0})}],C=[{id:"default",label:"Inverse – default",demoStyles:"background-color: #16325C; padding: 0.5rem;",storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"inverse",symbol:"search"})}],N=[{id:"disabled",label:"Inverse - Disabled",demoStyles:"background-color: #16325C; padding: 0.5rem;",storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"inverse",symbol:"search",disabled:!0})}],I=[{id:"with-dropdown",label:"Inverse - With dropdown",demoStyles:"background-color: #16325C; padding: 0.5rem;",storybookStyles:!0,element:l.a.createElement(m.b,{hasDropdown:!0,theme:"transparent",className:"slds-button_icon-inverse",assistiveText:"More options",title:"More Options"})},{id:"hint-hover",label:"Inverse - Hint on hover",demoStyles:"background-color: #16325C; padding: 0.5rem;",storybookStyles:!0,element:l.a.createElement("div",{className:"slds-hint-parent"},l.a.createElement(m.b,{theme:"inverse",iconClassName:"slds-button__icon_inverse-hint",assistiveText:"More options",title:"More Options"}))}],D=n(135),z=[{id:"default",label:"Transparent - default",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"Search",title:"Search",size:"medium",symbol:"search"})}],W=[{id:"disabled",label:"Transparent - Disabled",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"Search",title:"Search",size:"medium",symbol:"search",disabled:!0})}],F=[{id:"with-dropdown",label:"Transparent - With dropdown",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:l.a.createElement(m.b,{assistiveText:"More options",title:"More Options",hasDropdown:!0,theme:"transparent"})},{id:"hint-hover",label:"Transparent - Hint on hover",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:l.a.createElement("div",{className:"slds-hint-parent"},l.a.createElement(m.b,{assistiveText:"More options",title:"More Options",size:"medium",iconClassName:"slds-button__icon_hint"}))}],H=n(1),A=n(38),L=s.c.a,P=s.c.code,J=s.c.h2,q=s.c.h3,R=s.c.h4,U=s.c.p,V=function(){return Object(a.createElement)(s.b,{},Object(a.createElement)("div",{className:"lead doc"},"Button icons provide the user with visual iconography that is typically used to invoke an event or action."),Object(a.createElement)(o.a,{exampleOnly:!0},Object(a.createElement)(l.a.Fragment,null,Object(a.createElement)(m.b,{iconClassName:"slds-button__icon_large",assistiveText:"More options",title:"More Options"}),Object(a.createElement)(m.b,{iconClassName:"slds-button__icon_small",assistiveText:"More options",title:"More Options"}),Object(a.createElement)(m.b,{iconClassName:"slds-button__icon_x-small",assistiveText:"More options",title:"More Options"}))),J({id:"About-Button-Icons"},"About Button Icons"),U({},"Button icons are button elements that represent their behavior with an ",L({href:"/components/icons"},"icon")," instead of text. The button itself should have the classes ",P({},"slds-button")," and ",P({},"slds-button_icon"),", while the svg icon has ",P({},"slds-button__icon")," on it. Size modifiers can be added, the default sizing represents a medium variant."),U({},"Some styling variations require the button to receive additional 'container' classes that remove the button styling and/or add borders. See below for more detail."),q({id:"Accessibility"},"Accessibility"),U({},"If an icon button doesn’t include a label, use a ",P({},"title")," attribute to show on hover for sighted users, and a span with class ",P({},"slds-assistive-text")," to describe the button's action for screen readers."),U({},"When using assistive text, the icon element itself should have ",P({},"aria-hidden")," set to ",P({},"true"),"."),q({id:"Mobile"},"Mobile"),Object(a.createElement)(A.a,{patternSpecificText:"buttons will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(a.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for button icons"},Object(a.createElement)(l.a.Fragment,null,Object(a.createElement)(m.b,{iconClassName:"slds-button__icon_large",assistiveText:"More Options",title:"More Options"}),Object(a.createElement)(m.b,{iconClassName:"slds-button__icon_small",assistiveText:"More Options",title:"More Options"}),Object(a.createElement)(m.b,{iconClassName:"slds-button__icon_x-small",assistiveText:"More Options",title:"More Options"}))),J({id:"Base"},"Base"),Object(a.createElement)(o.a,{toggleCode:!1},Object(H.f)(O)),J({id:"Variations"},"Variations"),q({id:"Brand"},"Brand"),Object(a.createElement)(o.a,{toggleCode:!1},Object(H.f)(k)),q({id:"Inverse"},"Inverse"),Object(a.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(C)},Object(H.f)(C)),q({id:"Icon-Containers"},"Icon Containers"),U({},"Icon containers remove button styling from the button, leaving a bare icon."),U({},"For a bare icon with transparent container, add ",P({},"slds-button_icon-container")," to the ",P({},"<button>"),". To add a border, use the ",P({},"slds-button_icon-border")," class instead."),U({},"For a neutral themed button icon, with border and a filled background, use the ",P({},"slds-button_icon-border-filled")," class to the ",P({},"slds-button")," class."),U({},"Use the inverse button on dark backgrounds by adding the ",P({},"slds-button_inverse")," class to the ",P({},"slds-button")," class."),Object(a.createElement)(b.a,null,Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bare - transparent container"),Object(a.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(z)},Object(H.f)(z))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bordered - filled container"),Object(a.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(f)},Object(H.f)(f))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bordered - transparent container"),Object(a.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(w)},Object(H.f)(w))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bordered inverse - transparent container"),Object(a.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(S)},Object(H.f)(S)))),q({id:"Stateful"},"Stateful"),U({},"The stateful button requires the ",P({},"slds-button_icon-border")," class in addition to the ",P({},"slds-button")," class.\nThe stateful inverse button works just like the stateful button. It requires the ",P({},"slds-button_icon-border-inverse")," class in addition to the ",P({},"slds-button")," class."),Object(a.createElement)(o.a,{toggleCode:!1},Object(H.f)(D.b)),Object(a.createElement)(i.a,{type:"a11y",header:"Accessibility Note"},Object(a.createElement)("p",null,"For accessibility, implement the ",Object(a.createElement)("a",{href:"http://w3c.github.io/aria-practices/#button"},"ARIA Toggle Button")," concept."),Object(a.createElement)("ul",{className:"slds-list_dotted"},Object(a.createElement)("li",null,"Similar to a mute button, the button represents a pressed or unpressed state."),Object(a.createElement)("li",null,"Button text doesn't change per state"),Object(a.createElement)("li",null,Object(a.createElement)("code",null,"aria-pressed")," is set to ",Object(a.createElement)("code",null,"true")," or ",Object(a.createElement)("code",null,"false"),", depending on its state"))),R({id:"Selected"},"Selected"),U({},"Stateful icons can be toggled on and off and will retain their state. JavaScript is used to add the ",P({},"slds-is-selected")," class to the button when activated."),Object(a.createElement)(o.a,null,Object(H.f)(D.c,"button-icon-stateful-selected")),R({id:"Disabled"},"Disabled"),U({},"You can disable a stateful button icon by applying the ",P({},"disabled")," attribute to the ",P({},".slds-button_icon"),". This will apply our disabled UI to the button icon, and freeze the button icon either in its selected or unselected state."),Object(a.createElement)(o.a,null,Object(a.createElement)(a.Fragment,null,Object(H.f)(D.c,"button-icon-stateful-disabled"),Object(H.f)(D.c,"button-icon-stateful-selected-disabled"))),J({id:"Sizes"},"Sizes"),q({id:"Bare-Icon"},"Bare Icon"),U({},"The bare variant can be displayed in three other sizes—",P({},"large"),", ",P({},"small"),", ",P({},"x-small"),"—by adding a sizing class on the ",P({},"<svg>")," icon itself."),Object(a.createElement)(r.a,{toggleCode:!1},Object(a.createElement)("button",null,Object(a.createElement)("svg",{className:"... slds-button__icon_{size}"},"..."),"...")),Object(a.createElement)(c.a,{title:"Sizes"},Object(a.createElement)(o.a,null,Object(a.createElement)(a.Fragment,null,Object(a.createElement)(m.b,{iconClassName:"slds-button__icon_large",assistiveText:"More options",title:"More Options"}),Object(a.createElement)(m.b,{iconClassName:"slds-button__icon_small",assistiveText:"More options",title:"More Options"}),Object(a.createElement)(m.b,{iconClassName:"slds-button__icon_x-small",assistiveText:"More options",title:"More Options"})))),q({id:"Icon-Container"},"Icon Container"),U({},"Contained variants can be displayed in four other sizes—",P({},"large"),", ",P({},"small"),", ",P({},"x-small"),", ",P({},"xx-small"),"—by adding a sizing class on the ",P({},"<button>"),"."),Object(a.createElement)(r.a,{toggleCode:!1},Object(a.createElement)("button",{className:"... slds-button_icon-{size}"},"...")),Object(a.createElement)(c.a,{title:"Sizes"},Object(a.createElement)(o.a,null,Object(a.createElement)(a.Fragment,null,Object(a.createElement)(m.b,{className:"slds-button_icon-border slds-button_icon-large",assistiveText:"More options",title:"More Options"}),Object(a.createElement)(m.b,{className:"slds-button_icon-border slds-button_icon-small",assistiveText:"More options",title:"More Options"}),Object(a.createElement)(m.b,{className:"slds-button_icon-border slds-button_icon-x-small",assistiveText:"More options",title:"More Options"}),Object(a.createElement)(m.b,{className:"slds-button_icon-border slds-button_icon-xx-small",assistiveText:"More options",title:"More Options"})))),J({id:"States"},"States"),q({id:"Disabled-2"},"Disabled"),U({},"Use a disabled attribute when a button can’t be clicked."),U({},"To create a disabled button, append the ",P({},"disabled")," attribute to the ",P({},"<button>"),"."),Object(a.createElement)(r.a,{toggleCode:!1},Object(a.createElement)("button",{className:"slds-button slds-button_icon ...",disabled:!0},"...")),Object(a.createElement)(b.a,null,Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Base"),Object(a.createElement)(o.a,null,Object(H.f)(p,"bare-disabled"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Brand"),Object(a.createElement)(o.a,null,Object(H.f)(B,"disabled"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Transparent container"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(W,"disabled")},Object(H.f)(W,"disabled"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Inverse"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(N,"disabled")},Object(H.f)(N,"disabled"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bordered filled container"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(v,"disabled")},Object(H.f)(v,"disabled"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bordered transparent"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(T,"disabled")},Object(H.f)(T,"disabled"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bordered inverse"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(_,"disabled")},Object(H.f)(_,"disabled")))),q({id:"Error"},"Error"),U({},"Error button icons are typically used in conjunction with an ",L({href:"../popovers/#Error"},"error popover"),"."),Object(a.createElement)(o.a,{toggleCode:!1},Object(H.f)(p,"error")),q({id:"Warning"},"Warning"),U({},"Warning button icons are typically used in conjunction with a ",L({href:"../popovers/#Warning"},"warning popover"),"."),Object(a.createElement)(o.a,{toggleCode:!1},Object(H.f)(p,"warning")),J({id:"Examples"},"Examples"),q({id:"Hint-on-hover"},"Hint on hover"),U({},"A parent class, ",P({},"slds-hint-parent"),", must be put on any wrapper, and ",P({},"slds-button__icon_hint")," must be added to the button's ",P({},"<svg>")," so that the child reacts when the parent is hovered."),Object(a.createElement)(r.a,{toggleCode:!1},Object(a.createElement)(m.a,null,Object(a.createElement)("button",{className:"slds-button slds-button_icon"},Object(a.createElement)("svg",{className:"slds-button__icon slds-button__icon_hint"},"..."),"..."))),Object(a.createElement)(b.a,null,Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Base"),Object(a.createElement)(o.a,null,Object(H.f)(j,"hint-hover"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Transparent container"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(F,"hint-hover")},Object(H.f)(F,"hint-hover"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bordered filled container"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(g,"hint-hover")},Object(H.f)(g,"hint-hover"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bordered transparent"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(M,"hint-hover")},Object(H.f)(M,"hint-hover")))),R({id:"Inverse-2"},"Inverse"),U({},"In the case of inverse, use the ",P({},"slds-button__icon_inverse-hint")," class on the button's ",P({},"<svg>")," instead."),Object(a.createElement)(r.a,{toggleCode:!1},Object(a.createElement)(m.a,null,Object(a.createElement)("button",{className:"slds-button slds-button_icon"},Object(a.createElement)("svg",{className:"slds-button__icon slds-button__icon_inverse-hint"},"..."),"..."))),Object(a.createElement)(b.a,null,Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Inverse"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(I,"hint-hover")},Object(H.f)(I,"hint-hover"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bordered inverse"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(x,"hint-hover")},Object(H.f)(x,"hint-hover")))),q({id:"With-a-Dropdown"},"With a Dropdown"),U({},"If the button opens a menu, add ",P({},"slds-button_icon-more")," class to the ",P({},"<button>")," and a ",P({},"down")," icon within the button to indicate the behavior."),Object(a.createElement)(r.a,{toggleCode:!1},Object(a.createElement)("button",{className:"slds-button slds-button_icon slds-button_icon-container-more"},"...",Object(a.createElement)("svg",{className:"slds-button__icon slds-button__icon_x-small"},Object(a.createElement)("use",{xlinkHref:"/assets/icons/utility-sprite/svg/symbols.svg#down"})),"...")),Object(a.createElement)(b.a,null,Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Transparent container"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(F,"with-dropdown")},Object(H.f)(F,"with-dropdown"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Inverse"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(I,"with-dropdown")},Object(H.f)(I,"with-dropdown"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bordered filled container"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(g,"with-dropdown")},Object(H.f)(g,"with-dropdown"))),Object(a.createElement)(d.a,null,Object(a.createElement)("strong",null,"Bordered inverse"),Object(a.createElement)(o.a,{demoStyles:Object(H.e)(x,"with-dropdown")},Object(H.f)(x,"with-dropdown")))))},Y=function(){return Object(s.a)(V())}}});
+var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/button-icons/docs.mdx.js"]=function(e){function t(t){for(var l,o,r=t[0],i=t[1],c=t[2],b=0,m=[];b<r.length;b++)o=r[b],Object.prototype.hasOwnProperty.call(a,o)&&a[o]&&m.push(a[o][0]),a[o]=0;for(l in i)Object.prototype.hasOwnProperty.call(i,l)&&(e[l]=i[l]);for(d&&d(t);m.length;)m.shift()();return s.push.apply(s,c||[]),n()}function n(){for(var e,t=0;t<s.length;t++){for(var n=s[t],l=!0,r=1;r<n.length;r++){var i=n[r];0!==a[i]&&(l=!1)}l&&(s.splice(t--,1),e=o(o.s=n[0]))}return e}var l={},a={12:0},s=[];function o(t){if(l[t])return l[t].exports;var n=l[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.m=e,o.c=l,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},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,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)o.d(n,l,function(t){return e[t]}.bind(null,l));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],i=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var d=i;return s.push([719,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},719:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return V})),n.d(t,"getContents",(function(){return X}));var l=n(0),a=n.n(l),s=n(4),o=n(2),r=n(27),i=n(14),c=n(15),d=n(28),b=n(45),m=n(7),u=n(12),h=n(10),O=[{id:"default",label:"Base – default",element:a.a.createElement(m.b,{assistiveText:"Settings",title:"Settings"})}],p=[{id:"error",label:"Base - Error",element:a.a.createElement(m.b,{feedback:"error",symbol:"error",title:"Error",assistiveText:"Error"})},{id:"warning",label:"Base - Warning",element:a.a.createElement(m.b,{feedback:"warning",symbol:"warning",title:"Warning",assistiveText:"Warning"})},{id:"bare-disabled",label:"Base - Disabled",element:a.a.createElement(m.b,{assistiveText:"Settings",disabled:!0,title:"Settings"})}],j=[{id:"hint-hover",label:"Base - Hint on hover",element:a.a.createElement(m.a,null,a.a.createElement(m.b,{assistiveText:"Settings",iconClassName:"slds-button__icon_hint",title:"Settings"}))},{id:"button-icon-lbc-mismatch",label:"Button Icon - LBC Mismatch",element:a.a.createElement(u.a,{className:"slds-button_icon slds-button_icon-border"},a.a.createElement("span",{className:"slds-assistive-text"},"Error"),a.a.createElement(h.a,{sprite:"utility",symbol:"clock",className:"slds-button__icon slds-icon-text-error"}))}],E="background-color: #f4f6f9; padding: 0.5rem;",f=[{id:"default",label:"Bordered Filled – default",demoStyles:E,storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",symbol:"search",theme:"neutral",title:"Search"})}],v=[{id:"disabled",label:"Bordered Filled - Disabled",demoStyles:E,storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",disabled:!0,symbol:"search",theme:"neutral",title:"Search"})}],g=[{id:"with-dropdown",label:"Bordered Filled - With dropdown",demoStyles:E,storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"More options",hasDropdown:!0,theme:"neutral",title:"More Options"})},{id:"hint-hover",label:"Bordered Filled - Hint on hover",demoStyles:E,storybookStyles:!0,element:a.a.createElement(m.a,null,a.a.createElement(m.b,{assistiveText:"More options",iconClassName:"slds-button__icon_hint",theme:"neutral",title:"More Options"}))}],y="background-color: #16325C; padding: 0.5rem;",S=[{id:"default",label:"Bordered Inverse – default",demoStyles:y,storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",size:"medium",symbol:"search",theme:"inverse",title:"Search"})}],_=[{id:"disabled",label:"Bordered Inverse – Disabled",demoStyles:y,storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",disabled:!0,size:"medium",symbol:"search",theme:"inverse",title:"Search"})}],x=[{id:"with-dropdown",label:"Bordered Inverse – With dropdown",demoStyles:y,storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"More options",hasDropdown:!0,theme:"neutral",title:"More Options"})},{id:"hint-hover",label:"Bordered Inverse – Hint on hover",demoStyles:y,storybookStyles:!0,element:a.a.createElement(m.a,null,a.a.createElement(m.b,{assistiveText:"More options",iconClassName:"slds-button__icon_inverse-hint",size:"medium",theme:"inverse",title:"More Options"}))}],w=[{id:"default",label:"Bordered Transparent - default",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"transparent",symbol:"search"})}],T=[{id:"disabled",label:"Bordered Transparent - Disabled",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"transparent",symbol:"search",disabled:!0})}],M=[{id:"hint-hover",label:"Bordered Transparent - Hint on hover",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement("div",{className:"slds-hint-parent"},a.a.createElement(m.b,{theme:"transparent",iconClassName:"slds-button__icon_hint",assistiveText:"More options",title:"More Options"}))}],k=[{id:"default",label:"Brand – default",element:a.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"brand",symbol:"search"})}],B=[{id:"disabled",label:"Brand – Disabled",element:a.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"brand",symbol:"search",disabled:!0})}],C=[{id:"default",label:"Inverse – default",demoStyles:"background-color: #16325C; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"inverse",symbol:"search"})}],N=[{id:"disabled",label:"Inverse - Disabled",demoStyles:"background-color: #16325C; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"inverse",symbol:"search",disabled:!0})}],I=[{id:"with-dropdown",label:"Inverse - With dropdown",demoStyles:"background-color: #16325C; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement(m.b,{hasDropdown:!0,theme:"transparent",className:"slds-button_icon-inverse",assistiveText:"More options",title:"More Options"})},{id:"hint-hover",label:"Inverse - Hint on hover",demoStyles:"background-color: #16325C; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement("div",{className:"slds-hint-parent"},a.a.createElement(m.b,{theme:"inverse",iconClassName:"slds-button__icon_inverse-hint",assistiveText:"More options",title:"More Options"}))}],D=n(135),z=[{id:"default",label:"Transparent - default",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",title:"Search",size:"medium",symbol:"search"})}],W=[{id:"disabled",label:"Transparent - Disabled",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",title:"Search",size:"medium",symbol:"search",disabled:!0})}],F=[{id:"with-dropdown",label:"Transparent - With dropdown",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"More options",title:"More Options",hasDropdown:!0,theme:"transparent"})},{id:"hint-hover",label:"Transparent - Hint on hover",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement("div",{className:"slds-hint-parent"},a.a.createElement(m.b,{assistiveText:"More options",title:"More Options",size:"medium",iconClassName:"slds-button__icon_hint"}))}],H=n(1),A=n(38),L=s.c.a,P=s.c.code,J=s.c.h2,q=s.c.h3,R=s.c.h4,U=s.c.p,V=function(){return Object(l.createElement)(s.b,{},Object(l.createElement)("div",{className:"lead doc"},"Button icons provide the user with visual iconography that is typically used to invoke an event or action."),Object(l.createElement)(o.a,{exampleOnly:!0},Object(l.createElement)(a.a.Fragment,null,Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_large",assistiveText:"More options",title:"More Options"}),Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_small",assistiveText:"More options",title:"More Options"}),Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_x-small",assistiveText:"More options",title:"More Options"}))),J({id:"About-Button-Icons"},"About Button Icons"),U({},"Button icons are button elements that represent their behavior with an ",L({href:"/components/icons"},"icon")," instead of text. The button itself should have the classes ",P({},"slds-button")," and ",P({},"slds-button_icon"),", while the svg icon has ",P({},"slds-button__icon")," on it. Size modifiers can be added, the default sizing represents a medium variant."),U({},"Some styling variations require the button to receive additional 'container' classes that remove the button styling and/or add borders. See below for more detail."),q({id:"Accessibility"},"Accessibility"),U({},"If an icon button doesn’t include a label, use a ",P({},"title")," attribute to show on hover for sighted users, and a span with class ",P({},"slds-assistive-text")," to describe the button's action for screen readers."),U({},"When using assistive text, the icon element itself should have ",P({},"aria-hidden")," set to ",P({},"true"),"."),Object(l.createElement)(i.a,{type:"a11y",header:"Note"},Object(l.createElement)("p",null,"To display the modals blueprint close (X) button correctly, don’t use the ",Object(l.createElement)("code",null,"slds-button_icon-inverse")," class for your close button markup. The ",Object(l.createElement)("code",null,"slds-button_icon-inverse")," is no longer used in the modal blueprint.")),q({id:"Mobile"},"Mobile"),Object(l.createElement)(A.a,{patternSpecificText:"buttons will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(l.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for button icons"},Object(l.createElement)(a.a.Fragment,null,Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_large",assistiveText:"More Options",title:"More Options"}),Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_small",assistiveText:"More Options",title:"More Options"}),Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_x-small",assistiveText:"More Options",title:"More Options"}))),J({id:"Base"},"Base"),Object(l.createElement)(o.a,{toggleCode:!1},Object(H.f)(O)),J({id:"Variations"},"Variations"),q({id:"Brand"},"Brand"),Object(l.createElement)(o.a,{toggleCode:!1},Object(H.f)(k)),q({id:"Inverse"},"Inverse"),Object(l.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(C)},Object(H.f)(C)),q({id:"Icon-Containers"},"Icon Containers"),U({},"Icon containers remove button styling from the button, leaving a bare icon."),U({},"For a bare icon with transparent container, add ",P({},"slds-button_icon-container")," to the ",P({},"<button>"),". To add a border, use the ",P({},"slds-button_icon-border")," class instead."),U({},"For a neutral themed button icon, with border and a filled background, use the ",P({},"slds-button_icon-border-filled")," class to the ",P({},"slds-button")," class."),U({},"Use the inverse button on dark backgrounds by adding the ",P({},"slds-button_inverse")," class to the ",P({},"slds-button")," class."),Object(l.createElement)(b.a,null,Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bare - transparent container"),Object(l.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(z)},Object(H.f)(z))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered - filled container"),Object(l.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(f)},Object(H.f)(f))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered - transparent container"),Object(l.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(w)},Object(H.f)(w))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered inverse - transparent container"),Object(l.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(S)},Object(H.f)(S)))),q({id:"Stateful"},"Stateful"),U({},"The stateful button requires the ",P({},"slds-button_icon-border")," class in addition to the ",P({},"slds-button")," class.\nThe stateful inverse button works just like the stateful button. It requires the ",P({},"slds-button_icon-border-inverse")," class in addition to the ",P({},"slds-button")," class."),Object(l.createElement)(o.a,{toggleCode:!1},Object(H.f)(D.b)),Object(l.createElement)(i.a,{type:"a11y",header:"Accessibility Note"},Object(l.createElement)("p",null,"For accessibility, implement the ",Object(l.createElement)("a",{href:"http://w3c.github.io/aria-practices/#button"},"ARIA Toggle Button")," concept."),Object(l.createElement)("ul",{className:"slds-list_dotted"},Object(l.createElement)("li",null,"Similar to a mute button, the button represents a pressed or unpressed state."),Object(l.createElement)("li",null,"Button text doesn't change per state"),Object(l.createElement)("li",null,Object(l.createElement)("code",null,"aria-pressed")," is set to ",Object(l.createElement)("code",null,"true")," or ",Object(l.createElement)("code",null,"false"),", depending on its state"))),R({id:"Selected"},"Selected"),U({},"Stateful icons can be toggled on and off and will retain their state. JavaScript is used to add the ",P({},"slds-is-selected")," class to the button when activated."),Object(l.createElement)(o.a,null,Object(H.f)(D.c,"button-icon-stateful-selected")),R({id:"Disabled"},"Disabled"),U({},"You can disable a stateful button icon by applying the ",P({},"disabled")," attribute to the ",P({},".slds-button_icon"),". This will apply our disabled UI to the button icon, and freeze the button icon either in its selected or unselected state."),Object(l.createElement)(o.a,null,Object(l.createElement)(l.Fragment,null,Object(H.f)(D.c,"button-icon-stateful-disabled"),Object(H.f)(D.c,"button-icon-stateful-selected-disabled"))),J({id:"Sizes"},"Sizes"),q({id:"Bare-Icon"},"Bare Icon"),U({},"The bare variant can be displayed in three other sizes—",P({},"large"),", ",P({},"small"),", ",P({},"x-small"),"—by adding a sizing class on the ",P({},"<svg>")," icon itself."),Object(l.createElement)(r.a,{toggleCode:!1},Object(l.createElement)("button",null,Object(l.createElement)("svg",{className:"... slds-button__icon_{size}"},"..."),"...")),Object(l.createElement)(c.a,{title:"Sizes"},Object(l.createElement)(o.a,null,Object(l.createElement)(l.Fragment,null,Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_large",assistiveText:"More options",title:"More Options"}),Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_small",assistiveText:"More options",title:"More Options"}),Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_x-small",assistiveText:"More options",title:"More Options"})))),q({id:"Icon-Container"},"Icon Container"),U({},"Contained variants can be displayed in four other sizes—",P({},"large"),", ",P({},"small"),", ",P({},"x-small"),", ",P({},"xx-small"),"—by adding a sizing class on the ",P({},"<button>"),"."),Object(l.createElement)(r.a,{toggleCode:!1},Object(l.createElement)("button",{className:"... slds-button_icon-{size}"},"...")),Object(l.createElement)(c.a,{title:"Sizes"},Object(l.createElement)(o.a,null,Object(l.createElement)(l.Fragment,null,Object(l.createElement)(m.b,{className:"slds-button_icon-border slds-button_icon-large",assistiveText:"More options",title:"More Options"}),Object(l.createElement)(m.b,{className:"slds-button_icon-border slds-button_icon-small",assistiveText:"More options",title:"More Options"}),Object(l.createElement)(m.b,{className:"slds-button_icon-border slds-button_icon-x-small",assistiveText:"More options",title:"More Options"}),Object(l.createElement)(m.b,{className:"slds-button_icon-border slds-button_icon-xx-small",assistiveText:"More options",title:"More Options"})))),J({id:"States"},"States"),q({id:"Disabled-2"},"Disabled"),U({},"Use a disabled attribute when a button can’t be clicked."),U({},"To create a disabled button, append the ",P({},"disabled")," attribute to the ",P({},"<button>"),"."),Object(l.createElement)(r.a,{toggleCode:!1},Object(l.createElement)("button",{className:"slds-button slds-button_icon ...",disabled:!0},"...")),Object(l.createElement)(b.a,null,Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Base"),Object(l.createElement)(o.a,null,Object(H.f)(p,"bare-disabled"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Brand"),Object(l.createElement)(o.a,null,Object(H.f)(B,"disabled"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Transparent container"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(W,"disabled")},Object(H.f)(W,"disabled"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Inverse"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(N,"disabled")},Object(H.f)(N,"disabled"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered filled container"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(v,"disabled")},Object(H.f)(v,"disabled"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered transparent"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(T,"disabled")},Object(H.f)(T,"disabled"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered inverse"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(_,"disabled")},Object(H.f)(_,"disabled")))),q({id:"Error"},"Error"),U({},"Error button icons are typically used in conjunction with an ",L({href:"../popovers/#Error"},"error popover"),"."),Object(l.createElement)(o.a,{toggleCode:!1},Object(H.f)(p,"error")),q({id:"Warning"},"Warning"),U({},"Warning button icons are typically used in conjunction with a ",L({href:"../popovers/#Warning"},"warning popover"),"."),Object(l.createElement)(o.a,{toggleCode:!1},Object(H.f)(p,"warning")),J({id:"Examples"},"Examples"),q({id:"Hint-on-hover"},"Hint on hover"),U({},"A parent class, ",P({},"slds-hint-parent"),", must be put on any wrapper, and ",P({},"slds-button__icon_hint")," must be added to the button's ",P({},"<svg>")," so that the child reacts when the parent is hovered."),Object(l.createElement)(r.a,{toggleCode:!1},Object(l.createElement)(m.a,null,Object(l.createElement)("button",{className:"slds-button slds-button_icon"},Object(l.createElement)("svg",{className:"slds-button__icon slds-button__icon_hint"},"..."),"..."))),Object(l.createElement)(b.a,null,Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Base"),Object(l.createElement)(o.a,null,Object(H.f)(j,"hint-hover"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Transparent container"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(F,"hint-hover")},Object(H.f)(F,"hint-hover"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered filled container"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(g,"hint-hover")},Object(H.f)(g,"hint-hover"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered transparent"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(M,"hint-hover")},Object(H.f)(M,"hint-hover")))),R({id:"Inverse-2"},"Inverse"),U({},"In the case of inverse, use the ",P({},"slds-button__icon_inverse-hint")," class on the button's ",P({},"<svg>")," instead."),Object(l.createElement)(r.a,{toggleCode:!1},Object(l.createElement)(m.a,null,Object(l.createElement)("button",{className:"slds-button slds-button_icon"},Object(l.createElement)("svg",{className:"slds-button__icon slds-button__icon_inverse-hint"},"..."),"..."))),Object(l.createElement)(b.a,null,Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Inverse"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(I,"hint-hover")},Object(H.f)(I,"hint-hover"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered inverse"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(x,"hint-hover")},Object(H.f)(x,"hint-hover")))),q({id:"With-a-Dropdown"},"With a Dropdown"),U({},"If the button opens a menu, add ",P({},"slds-button_icon-more")," class to the ",P({},"<button>")," and a ",P({},"down")," icon within the button to indicate the behavior."),Object(l.createElement)(r.a,{toggleCode:!1},Object(l.createElement)("button",{className:"slds-button slds-button_icon slds-button_icon-container-more"},"...",Object(l.createElement)("svg",{className:"slds-button__icon slds-button__icon_x-small"},Object(l.createElement)("use",{xlinkHref:"/assets/icons/utility-sprite/svg/symbols.svg#down"})),"...")),Object(l.createElement)(b.a,null,Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Transparent container"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(F,"with-dropdown")},Object(H.f)(F,"with-dropdown"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Inverse"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(I,"with-dropdown")},Object(H.f)(I,"with-dropdown"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered filled container"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(g,"with-dropdown")},Object(H.f)(g,"with-dropdown"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered inverse"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(x,"with-dropdown")},Object(H.f)(x,"with-dropdown")))))},X=function(){return Object(s.a)(V())}}});

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

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

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

@@ -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 r,i,l=t[0],s=t[1],d=t[2],m=0,u=[];m<l.length;m++)i=l[m],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&u.push(o[i][0]),o[i]=0;for(r in s)Object.prototype.hasOwnProperty.call(s,r)&&(e[r]=s[r]);for(c&&c(t);u.length;)u.shift()();return n.push.apply(n,d||[]),a()}function a(){for(var e,t=0;t<n.length;t++){for(var a=n[t],r=!0,l=1;l<a.length;l++){var s=a[l];0!==o[s]&&(r=!1)}r&&(n.splice(t--,1),e=i(i.s=a[0]))}return e}var r={},o={26:0},n=[];function i(t){if(r[t])return r[t].exports;var a=r[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=r,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 r in e)i.d(a,r,function(t){return e[t]}.bind(null,r));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 n.push([801,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},801:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return M})),a.d(t,"getContents",(function(){return N}));var r=a(0),o=a.n(r),n=a(4),i=a(2),l=a(14),s=a(3),d=a.n(s),c=a(5),m=a.n(c),u=a(1),p=a(23),h=a(24),f=a(26),b=a(11),y=a(37),g=a(7),w=a(8),v=a(17);function O(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 r,o,n=[],i=!0,l=!1;try{for(a=a.call(e);!(i=(r=a.next()).done)&&(n.push(r.value),!t||n.length!==t);i=!0);}catch(e){l=!0,o=e}finally{try{i||null==a.return||a.return()}finally{if(l)throw o}}return n}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return x(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 x(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 x(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,r=new Array(t);a<t;a++)r[a]=e[a];return r}var S=function(e){var t=e.dropdown,a=e.dropdownIsOpen,n=e.hasFocus,i=e.hasError,l=e.isOpen,s=e.isRequired,d=e.isDisabled,c=e.listboxData,f=e.dateDefaultValue,y=e.showRequiredIndicator,x=e.hasTooltip,S=e.showTooltip,_=e.fieldLevelDateMessage,D=e.fieldLevelTimeMessage,E=e.format,k=Object(r.useRef)(),j=O(Object(r.useState)(""),2),T=j[0],q=j[1],I=O(Object(r.useState)(""),2),R=I[0],A=I[1],M=O(Object(r.useState)(u.d.uniqueId("example-unique-id-")),1)[0],N=O(Object(r.useState)(u.d.uniqueId("example-unique-id-")),1)[0],L=O(Object(r.useState)(u.d.uniqueId("example-unique-id-")),1)[0];Object(r.useEffect)((function(){k.current&&("id"in k.current&&k.current.id&&q(k.current.id),"ariaChecked"in k.current&&k.current.ariaChecked&&A(k.current.textContent))}),[]);var P={"slds-is-open":a};return o.a.createElement("div",{className:"slds-form"},o.a.createElement("fieldset",{className:m()("slds-form-element slds-form-element_compound",{"slds-has-error":i,"slds-datetimepicker_has-tooltip":S})},o.a.createElement("legend",{className:"slds-form-element__label slds-form-element__legend"},s&&o.a.createElement("abbr",{className:"slds-required",title:"required"},"*"," "),"Date and Time"),o.a.createElement("div",{className:"slds-form-element__control"},o.a.createElement("div",{className:"slds-form-element__group"},o.a.createElement("div",{className:"slds-form-element__row"},o.a.createElement(w.b,{formElementClassName:m()("slds-dropdown-trigger slds-dropdown-trigger_click",P),labelContent:"Date",inputId:M,hasRightIcon:!0,dropdown:t,hasError:i,isRequired:s,showRequiredIndicator:y,hasTooltip:!(!x||!_)&&x,showTooltip:!(!S||!_)&&S,fieldLevelMessage:_,inlineMessage:!i&&E},o.a.createElement(v.a,{id:M,placeholder:"Select a date…",defaultValue:f,"aria-describedby":i&&M+"-error",required:s,disabled:d}),o.a.createElement(g.b,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date",disabled:d})),o.a.createElement(p.b,{id:N,"aria-controls":L,"aria-activedescendant":T,autocomplete:!0,label:"Time",placeholder:"Select a time…",inputIconPosition:"right",hasError:i,isDisabled:d,hasTooltip:x&&D?x:null,showTooltip:S&&D?S:null,fieldLevelMessage:D,isOpen:l,rightInputIcon:o.a.createElement(b.a,{symbol:"clock",className:m()("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:o.a.createElement(h.e,{className:"slds-dropdown_fluid slds-dropdown_left",id:L,snapshot:c,type:"plain",count:6,focusedRef:k}),resultsType:"listbox",hasInteractions:!0,hasFocus:n,value:R})))),i&&o.a.createElement("div",{className:"slds-form-element__help",id:M+"-error"},"Complete this field.")))};S.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,format:d.a.string},S.defaultProps={dropdown:o.a.createElement(y.a,{todayActive:!0}),dropdownIsOpen:!0,showRequiredIndicator:!1,isDisabled:!1};var _=o.a.createElement(S,{listboxData:f.x}),D=(f.x,[{id:"default-dropdown-closed",label:"Base - dropdown closed",demoStyles:"height: 6rem;",element:o.a.createElement(S,{dropdown:null,listboxData:f.x,format:"mm/dd/yyyy"})},{id:"date-selection",label:"Date selected",element:o.a.createElement(S,{dropdown:o.a.createElement(y.a,{todayActive:!0,dateSelected:"single",dateRange:"week-4"}),dateDefaultValue:"06/24/2021",listboxData:f.x,format:"mm/dd/yyyy"})},{id:"time-selection",label:"Time selected",demoStyles:"height: 20rem;",storybookStyles:!0,element:o.a.createElement(S,{dropdown:o.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:f.z,format:"mm/dd/yyyy"})},{id:"required",label:"Date and Time - required",demoStyles:"height: 20rem;",element:o.a.createElement(S,{dropdownIsOpen:!1,isRequired:!0,listboxData:f.x,format:"mm/dd/yyyy"})},{id:"error",label:"Date and Time - error",demoStyles:"height: 20rem;",element:o.a.createElement(S,{dropdownIsOpen:!1,hasError:!0,listboxData:f.x})},{id:"required-error",label:"Date and Time - required and has error",demoStyles:"height: 20rem;",element:o.a.createElement(S,{dropdownIsOpen:!1,isRequired:!0,hasError:!0,listboxData:f.x})},{id:"datetimepicker-with-tooltip-for-datepicker",label:"Datetime Picker With Tooptip for datepicker",demoStyles:"height: 20rem;",element:o.a.createElement(S,{dropdownIsOpen:!0,listboxData:f.x,isRequired:!0,dateDefaultValue:"Jan 1 2023",hasTooltip:!0,showTooltip:!0,fieldLevelDateMessage:"Format: mmm d yyyy | ex: Jan 1 2023",format:"mm/dd/yyyy"})},{id:"datetimepicker-with-tooltip-for-timepicker",label:"Datetime Picker With Tooptip for timepicker",demoStyles:"height: 20rem;",element:o.a.createElement(S,{dropdown:o.a.createElement(y.a,{todayActive:!0,dateSelected:"single",dateRange:"week-4",value:"8:00 am"}),dropdownIsOpen:!1,dateDefaultValue:"Jan 1 2023",isOpen:!0,hasFocus:!0,hasTooltip:!0,showTooltip:!0,listboxData:f.z,fieldLevelTimeMessage:"Format: hh:mm a | ex: 12:00 AM",format:"mm/dd/yyyy"})},{id:"disabled",label:"Date and Time - disabled",demoStyles:"height: 10rem;",storybookStyles:!0,element:o.a.createElement(S,{dropdownIsOpen:!1,listboxData:f.x,isDisabled:!0,format:"mm/dd/yyyy"})}]),E=n.c.a,k=n.c.code,j=n.c.h2,T=n.c.h3,q=n.c.li,I=n.c.p,R=n.c.strong,A=n.c.ul,M=function(){return Object(r.createElement)(n.b,{},Object(r.createElement)("div",{className:"doc lead"},"A datetime picker is used to select a day and a time."),Object(r.createElement)(i.a,{exampleOnly:!0,demoStyles:"height: 28rem;"},Object(u.f)(_)),j({id:"About-datetime-picker"},"About datetime picker"),T({id:"Implementation"},"Implementation"),I({},"The datetime is two ",E({href:"/components/form-element"},"form elements"),", each containing a label and text ",E({href:"/components/input"},"input"),", and a dropdown ",E({href:"/components/menus"},"menu"),", containing a grid-based calendar and filters. The date form element acts as a trigger for the dropdown."),Object(r.createElement)(l.a,{type:"warning"},Object(r.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.")),I({},"The datetime picker has the following markup requirements:"),I({},R({},"All")),A({},q({},"Follow all accessibility requirements mentioned in the ",E({href:"/components/datepickers"},"Datepicker")," and ",E({href:"/components/timepicker"},"Timepicker")," blueprints.")),I({},R({},"Desktop")),A({},q({},"Add ",k({},".slds-is-open")," to the element with ",k({},".slds-dropdown-trigger")," to invoke the dropdown that contains the datepicker and the list of time options."),q({},"On the timepicker, the ",k({},".slds-has-focus")," modifier class is required on the ",k({},".slds-listbox__option")," element that has focus."),q({},"On the timepicker, the ",k({},".slds-is-selected")," modifier class is required on the ",k({},".slds-listbox__option")," element that has been selected."),q({},"On the datepicker, the ",k({},".slds-is-selected")," modifier class is required on the ",k({},"td")," element that has the selected day."),q({},"On the datepicker, the ",k({},".slds-is-today")," modifier class is required on the ",k({},"td")," element that is the current day.")),I({},R({},"Mobile")),A({},q({},"When on mobile, we want to leverage the native datetime picker by changing the ",k({},"input")," type from ",k({},"text")," to ",k({},"datetime-local")),q({},"The ",k({},'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."),q({},"When switching ",k({},'input type="text"')," to ",k({},'input type="datetime-local"')," for mobile, we need to remove the ARIA attributes. The native rendering doesn't require these.",A({},q({},"On the element with the class ",k({},"slds-combobox"),", please remove ",k({},'role="combobox"'),", ",k({},"aria-expanded"),", and ",k({},"aria-haspopup"),"."),q({},"On the ",k({},"input")," that we just added ",k({},'type="datetime-local"')," to, please remove ",k({},"aria-controls"),", ",k({},"aria-autocomplete"),", and ",k({},'role="textbox"'),".")))),j({id:"Base"},"Base"),Object(r.createElement)(i.a,{demoStyles:"height: 28rem;"},Object(u.f)(_)),T({id:"Dropdown-Closed"},"Dropdown Closed"),Object(r.createElement)(i.a,{demoStyles:"height: 6rem;"},Object(u.f)(D,"default-dropdown-closed")),j({id:"States"},"States"),I({},"Adding ",k({},"slds-datetimepicker_has-tooltip")," to the element with ",k({},"slds-form-element_compound")," aligns the legend properly when there is an info tooltip."),T({id:"Date-selection"},"Date selection"),Object(r.createElement)(i.a,{demoStyles:"height: 28rem;"},Object(u.f)(D,"date-selection")),T({id:"Time-selection"},"Time selection"),Object(r.createElement)(i.a,{demoStyles:"height: 28rem;"},Object(u.f)(D,"time-selection")))},N=function(){return Object(n.a)(M())}}});
+var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/datetime-picker/docs.mdx.js"]=function(e){function t(t){for(var o,i,l=t[0],s=t[1],d=t[2],m=0,u=[];m<l.length;m++)i=l[m],Object.prototype.hasOwnProperty.call(n,i)&&n[i]&&u.push(n[i][0]),n[i]=0;for(o in s)Object.prototype.hasOwnProperty.call(s,o)&&(e[o]=s[o]);for(c&&c(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],o=!0,l=1;l<a.length;l++){var s=a[l];0!==n[s]&&(o=!1)}o&&(r.splice(t--,1),e=i(i.s=a[0]))}return e}var o={},n={26:0},r=[];function i(t){if(o[t])return o[t].exports;var a=o[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=o,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 o in e)i.d(a,o,function(t){return e[t]}.bind(null,o));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 r.push([801,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},801:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return M})),a.d(t,"getContents",(function(){return N}));var o=a(0),n=a.n(o),r=a(4),i=a(2),l=a(14),s=a(3),d=a.n(s),c=a(5),m=a.n(c),u=a(1),p=a(23),h=a(24),f=a(26),b=a(11),y=a(37),g=a(7),w=a(8),v=a(17);function O(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 o,n,r=[],i=!0,l=!1;try{for(a=a.call(e);!(i=(o=a.next()).done)&&(r.push(o.value),!t||r.length!==t);i=!0);}catch(e){l=!0,n=e}finally{try{i||null==a.return||a.return()}finally{if(l)throw n}}return r}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return x(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 x(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 x(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,o=new Array(t);a<t;a++)o[a]=e[a];return o}var S=function(e){var t=e.dropdown,a=e.dropdownIsOpen,r=e.hasFocus,i=e.hasError,l=e.isOpen,s=e.isRequired,d=e.isDisabled,c=e.listboxData,f=e.dateDefaultValue,y=e.showRequiredIndicator,x=e.hasTooltip,S=e.showTooltip,_=e.fieldLevelDateMessage,E=e.fieldLevelTimeMessage,D=e.format,k=Object(o.useRef)(),j=O(Object(o.useState)(""),2),T=j[0],I=j[1],q=O(Object(o.useState)(""),2),R=q[0],A=q[1],M=O(Object(o.useState)(u.d.uniqueId("example-unique-id-")),1)[0],N=O(Object(o.useState)(u.d.uniqueId("example-unique-id-")),1)[0],L=O(Object(o.useState)(u.d.uniqueId("example-unique-id-")),1)[0];Object(o.useEffect)((function(){k.current&&("id"in k.current&&k.current.id&&I(k.current.id),"ariaChecked"in k.current&&k.current.ariaChecked&&A(k.current.textContent))}),[]);var C={"slds-is-open":a};return n.a.createElement("div",{className:"slds-form"},n.a.createElement("fieldset",{className:m()("slds-form-element slds-form-element_compound",{"slds-has-error":i,"slds-datetimepicker_has-tooltip":S})},n.a.createElement("legend",{className:"slds-form-element__label slds-form-element__legend"},s&&n.a.createElement("abbr",{className:"slds-required",title:"required"},"*"," "),"Date and Time"),n.a.createElement("div",{className:"slds-form-element__control"},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(w.b,{formElementClassName:m()("slds-dropdown-trigger slds-dropdown-trigger_click",C),labelContent:"Date",inputId:M,hasRightIcon:!0,dropdown:t,hasError:i,isRequired:s,showRequiredIndicator:y,hasTooltip:!(!x||!_)&&x,showTooltip:!(!S||!_)&&S,fieldLevelMessage:_,inlineMessage:!i&&D},n.a.createElement(v.a,{id:M,placeholder:"Select a date…",defaultValue:f,"aria-describedby":i&&M+"-error",required:s,disabled:d}),n.a.createElement(g.b,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date",disabled:d})),n.a.createElement(p.b,{id:N,"aria-controls":L,"aria-activedescendant":T,autocomplete:!0,label:"Time",placeholder:"Select a time…",inputIconPosition:"right",hasError:i,isDisabled:d,hasTooltip:x&&E?x:null,showTooltip:S&&E?S:null,fieldLevelMessage:E,isOpen:l,rightInputIcon:n.a.createElement(b.a,{symbol:"clock",className:m()("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:n.a.createElement(h.e,{className:"slds-dropdown_fluid slds-dropdown_left",id:L,snapshot:c,type:"plain",count:6,focusedRef:k}),resultsType:"listbox",hasInteractions:!0,hasFocus:r,value:R})))),i&&n.a.createElement("div",{className:"slds-form-element__help",id:M+"-error"},"Complete this field.")))};S.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,format:d.a.string},S.defaultProps={dropdown:n.a.createElement(y.a,{todayActive:!0}),dropdownIsOpen:!0,showRequiredIndicator:!1,isDisabled:!1};var _=n.a.createElement(S,{listboxData:f.x}),E=(f.x,[{id:"default-dropdown-closed",label:"Base - dropdown closed",demoStyles:"height: 6rem;",element:n.a.createElement(S,{dropdown:null,listboxData:f.x,format:"mm/dd/yyyy"})},{id:"date-selection",label:"Date selected",element:n.a.createElement(S,{dropdown:n.a.createElement(y.a,{todayActive:!0,dateSelected:"single",dateRange:"week-4"}),dateDefaultValue:"06/24/2021",listboxData:f.x,format:"mm/dd/yyyy"})},{id:"time-selection",label:"Time selected",demoStyles:"height: 20rem;",storybookStyles:!0,element:n.a.createElement(S,{dropdown:n.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:f.z,format:"mm/dd/yyyy"})},{id:"required",label:"Date and Time - required",demoStyles:"height: 20rem;",element:n.a.createElement(S,{dropdownIsOpen:!1,isRequired:!0,listboxData:f.x,format:"mm/dd/yyyy"})},{id:"error",label:"Date and Time - error",demoStyles:"height: 20rem;",element:n.a.createElement(S,{dropdownIsOpen:!1,hasError:!0,listboxData:f.x})},{id:"required-error",label:"Date and Time - required and has error",demoStyles:"height: 20rem;",element:n.a.createElement(S,{dropdownIsOpen:!1,isRequired:!0,hasError:!0,listboxData:f.x})},{id:"datetimepicker-with-tooltip-for-datepicker",label:"Datetime Picker With Tooptip for datepicker",demoStyles:"height: 20rem;",element:n.a.createElement(S,{dropdownIsOpen:!0,listboxData:f.x,isRequired:!0,dateDefaultValue:"Jan 1 2023",hasTooltip:!0,showTooltip:!0,fieldLevelDateMessage:"Format: mmm d yyyy | ex: Jan 1 2023",format:"mm/dd/yyyy"})},{id:"datetimepicker-with-tooltip-for-timepicker",label:"Datetime Picker With Tooptip for timepicker",demoStyles:"height: 20rem;",element:n.a.createElement(S,{dropdown:n.a.createElement(y.a,{todayActive:!0,dateSelected:"single",dateRange:"week-4",value:"8:00 am"}),dropdownIsOpen:!1,dateDefaultValue:"Jan 1 2023",isOpen:!0,hasFocus:!0,hasTooltip:!0,showTooltip:!0,listboxData:f.z,fieldLevelTimeMessage:"Format: hh:mm a | ex: 12:00 AM",format:"mm/dd/yyyy"})},{id:"disabled",label:"Date and Time - disabled",demoStyles:"height: 10rem;",storybookStyles:!0,element:n.a.createElement(S,{dropdownIsOpen:!1,listboxData:f.x,isDisabled:!0,format:"mm/dd/yyyy"})},{id:"mobile",label:"Mobile",element:n.a.createElement(w.b,{labelContent:"Date",inputId:"date-input-id-mobile"},n.a.createElement(v.a,{id:"date-input-id-mobile",type:"datetime-local"}))}]),D=r.c.a,k=r.c.code,j=r.c.h2,T=r.c.h3,I=r.c.li,q=r.c.p,R=r.c.strong,A=r.c.ul,M=function(){return Object(o.createElement)(r.b,{},Object(o.createElement)("div",{className:"doc lead"},"A datetime picker is used to select a day and a time."),Object(o.createElement)(i.a,{exampleOnly:!0,demoStyles:"height: 28rem;"},Object(u.f)(_)),j({id:"About-datetime-picker"},"About datetime picker"),T({id:"Implementation"},"Implementation"),q({},"The datetime is two ",D({href:"/components/form-element"},"form elements"),", each containing a label and text ",D({href:"/components/input"},"input"),", and a dropdown ",D({href:"/components/menus"},"menu"),", containing a grid-based calendar and filters. The date form element acts as a trigger for the dropdown."),Object(o.createElement)(l.a,{type:"warning"},Object(o.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.")),q({},"The datetime picker has the following markup requirements:"),q({},R({},"All")),A({},I({},"Follow all accessibility requirements mentioned in the ",D({href:"/components/datepickers"},"Datepicker")," and ",D({href:"/components/timepicker"},"Timepicker")," blueprints.")),q({},R({},"Desktop")),A({},I({},"Add ",k({},".slds-is-open")," to the element with ",k({},".slds-dropdown-trigger")," to invoke the dropdown that contains the datepicker and the list of time options."),I({},"On the timepicker, the ",k({},".slds-has-focus")," modifier class is required on the ",k({},".slds-listbox__option")," element that has focus."),I({},"On the timepicker, the ",k({},".slds-is-selected")," modifier class is required on the ",k({},".slds-listbox__option")," element that has been selected."),I({},"On the datepicker, the ",k({},".slds-is-selected")," modifier class is required on the ",k({},"td")," element that has the selected day."),I({},"On the datepicker, the ",k({},".slds-is-today")," modifier class is required on the ",k({},"td")," element that is the current day.")),q({},R({},"Mobile")),A({},I({},"When on mobile, we want to leverage the native datetime picker by changing the ",k({},"input")," type from ",k({},"text")," to ",k({},"datetime-local")),I({},"The ",k({},'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 ",k({},'input type="text"')," to ",k({},'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 ",k({},"slds-combobox"),", please remove ",k({},'role="combobox"'),", ",k({},"aria-expanded"),", and ",k({},"aria-haspopup"),"."),I({},"On the ",k({},"input")," that we just added ",k({},'type="datetime-local"')," to, please remove ",k({},"aria-controls"),", ",k({},"aria-autocomplete"),", and ",k({},'role="textbox"'),".")))),j({id:"Base"},"Base"),Object(o.createElement)(i.a,{demoStyles:"height: 28rem;"},Object(u.f)(_)),T({id:"Dropdown-Closed"},"Dropdown Closed"),Object(o.createElement)(i.a,{demoStyles:"height: 6rem;"},Object(u.f)(E,"default-dropdown-closed")),j({id:"States"},"States"),q({},"Adding ",k({},"slds-datetimepicker_has-tooltip")," to the element with ",k({},"slds-form-element_compound")," aligns the legend properly when there is an info tooltip."),T({id:"Date-selection"},"Date selection"),Object(o.createElement)(i.a,{demoStyles:"height: 28rem;"},Object(u.f)(E,"date-selection")),T({id:"Time-selection"},"Time selection"),Object(o.createElement)(i.a,{demoStyles:"height: 28rem;"},Object(u.f)(E,"time-selection")),T({id:"Mobile"},"Mobile"),q({},"Mobile example should be viewed in mobile devices for accurate visual representation. It should be noted that due to native device styling, the width of the input will not expand 100% on iOS devices. Learn more about mobile datetime picker in the ",D({href:"/components/datetime-picker/#Implementation"},"mobile implementation")," section above."),Object(o.createElement)(i.a,{demoStyles:"height: 5rem;"},Object(u.f)(E,"mobile")))},N=function(){return Object(r.a)(M())}}});