npm - @salesforce-ux/design-system - Versions diffs - 2.266.0-beta.3 → 2.266.0-beta.4 - Mend

@salesforce-ux/design-system 2.266.0-beta.3 → 2.266.0-beta.4

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

Files changed (975) hide show

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

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,a,l={1668:function(e,t,a){a.r(t),a.d(t,{getContents:function(){return X},getElement:function(){return W}});var l=a(1594),i=a.n(l),n=a(5671),s=a(6547),r=a(5619),d=a(9741),o=a(4187),c=a.n(o),m=a(1369),u=a.n(m),p=a(6482),h=a(5159),f=a(6185),b=a(3964),g=a(538),E=a(6955),y=a(188),w=a(2711),v=a(5526),k="Format: ".concat("12/31/2024"),x=function(e){return i().createElement("div",{"aria-hidden":"false","aria-label":"Date picker: June",className:u()("slds-datepicker",e.className),role:"dialog"},e.children,i().createElement("button",{className:"slds-button slds-align_absolute-center slds-text-link"},"Today"))},S=function(e){return i().createElement("div",{className:"slds-datepicker__filter slds-grid"},i().createElement("div",{className:"slds-datepicker__filter_month slds-grid slds-grid_align-spread slds-grow"},i().createElement("div",{className:"slds-align-middle"},i().createElement(E.A,{assistiveText:"Previous Month",className:"slds-button_icon-container",symbol:"left",title:"Previous Month"})),i().createElement("h2",{"aria-atomic":"false","aria-live":"polite",className:"slds-align-middle",id:"".concat(e.idPrefix,"-month")},"June"),i().createElement("div",{className:"slds-align-middle"},i().createElement(E.A,{assistiveText:"Next Month",className:"slds-button_icon-container",symbol:"right",title:"Next Month"}))),i().createElement("div",{className:"slds-shrink-none"},i().createElement("label",{className:"slds-assistive-text",htmlFor:"".concat(e.idPrefix,"_select")},"Pick a Year"),i().createElement(y.l6,{id:"".concat(e.idPrefix,"_select")},i().createElement("option",null,"2021"),i().createElement("option",null,"2022"),i().createElement("option",null,"2023"))))},_=function(e){return i().createElement("tr",{id:"".concat(e.idPrefix,"-weekdays")},i().createElement("th",{id:"".concat(e.idPrefix,"-Sunday"),scope:"col"},i().createElement("abbr",{title:"Sunday"},"Sun")),i().createElement("th",{id:"".concat(e.idPrefix,"-Monday"),scope:"col"},i().createElement("abbr",{title:"Monday"},"Mon")),i().createElement("th",{id:"".concat(e.idPrefix,"-Tuesday"),scope:"col"},i().createElement("abbr",{title:"Tuesday"},"Tue")),i().createElement("th",{id:"".concat(e.idPrefix,"-Wednesday"),scope:"col"},i().createElement("abbr",{title:"Wednesday"},"Wed")),i().createElement("th",{id:"".concat(e.idPrefix,"-Thursday"),scope:"col"},i().createElement("abbr",{title:"Thursday"},"Thu")),i().createElement("th",{id:"".concat(e.idPrefix,"-Friday"),scope:"col"},i().createElement("abbr",{title:"Friday"},"Fri")),i().createElement("th",{id:"".concat(e.idPrefix,"-Saturday"),scope:"col"},i().createElement("abbr",{title:"Saturday"},"Sat")))},R=function(e){return i().createElement("tr",e,e.children)},D=function(e){return i().createElement("td",{"aria-disabled":e["aria-disabled"],"aria-selected":e["aria-selected"],"aria-current":e["aria-current"],className:u()(e.className,{"slds-day_adjacent-month":e.isAdjacentMonth}),role:"gridcell",tabIndex:e.tabIndex,"aria-label":e["aria-label"]},i().createElement("span",{className:"slds-day"},e.children))},N=function(e){return i().createElement(x,{className:"slds-dropdown slds-dropdown_left"},i().createElement(S,{idPrefix:e.idPrefix}),i().createElement("table",{"aria-multiselectable":"true",className:"slds-datepicker__month",role:"grid"},i().createElement("thead",null,i().createElement(_,{idPrefix:e.idPrefix})),i().createElement("tbody",null,i().createElement(R,null,i().createElement(D,{"aria-selected":"false",isAdjacentMonth:!0,"aria-label":"31 May 2020"},"31"),i().createElement(D,{"aria-selected":"false",tabIndex:"0","aria-label":"1 June 2020"},"1"),i().createElement(D,{"aria-selected":"false","aria-label":"2 June 2020"},"2"),i().createElement(D,{"aria-selected":"false","aria-label":"3 June 2020"},"3"),i().createElement(D,{"aria-selected":"false","aria-label":"4 June 2020"},"4"),i().createElement(D,{"aria-selected":"false","aria-label":"5 June 2020"},"5"),i().createElement(D,{"aria-selected":"false","aria-label":"6 June 2020"},"6")),i().createElement(R,null,i().createElement(D,{"aria-selected":"false","aria-label":"7 June 2020"},"7"),i().createElement(D,{"aria-selected":"false","aria-label":"8 June 2020"},"8"),i().createElement(D,{"aria-selected":"false","aria-label":"9 June 2020"},"9"),i().createElement(D,{"aria-selected":"false","aria-label":"10 June 2020"},"10"),i().createElement(D,{"aria-selected":"false","aria-label":"11 June 2020"},"11"),i().createElement(D,{"aria-selected":"false","aria-label":"12 June 2020"},"12"),i().createElement(D,{"aria-selected":"false","aria-label":"13 June 2020"},"13")),i().createElement(R,null,i().createElement(D,{"aria-selected":"false","aria-label":"14 June 2020"},"14"),i().createElement(D,{"aria-selected":"false","aria-label":"15 June 2020"},"15"),i().createElement(D,{"aria-selected":"false","aria-label":"16 June 2020"},"16"),i().createElement(D,{"aria-selected":"false","aria-label":"17 June 2020"},"17"),i().createElement(D,{"aria-selected":"false","aria-current":e.todayActive?"date":null,className:e.todayActive?"slds-is-today":null,"aria-label":"18 June 2020"},"18"),i().createElement(D,{"aria-selected":"false","aria-label":"19 June 2020"},"19"),i().createElement(D,{"aria-selected":"false","aria-label":"20 June 2020"},"20")),i().createElement(R,{className:u()({"slds-has-multi-selection":"week-4"===e.dateRange,"slds-has-multi-row-selection":e.dateRangeMulti})},i().createElement(D,{"aria-selected":"false","aria-label":"21 June 2020"},"21"),i().createElement(D,{"aria-selected":"false","aria-label":"22 June 2020"},"22"),i().createElement(D,{"aria-selected":"false","aria-label":"23 June 2020"},"23"),i().createElement(D,{"aria-selected":!e.dateSelected\|\|"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:u()({"slds-is-selected":"single"===e.dateSelected&&("week-4"===e.dateRange\|\|"week-4-5"===e.dateRange),"slds-is-selected slds-is-selected-multi":"single"!==e.dateSelected&&("week-4"===e.dateRange\|\|"week-4-5"===e.dateRange)}),"aria-label":"24 June 2020"},"24"),i().createElement(D,{"aria-selected":"single"===e.dateSelected\|\|"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:u()({"slds-is-selected slds-is-selected-multi":"single"!==e.dateSelected&&("week-4"===e.dateRange\|\|"week-4-5"===e.dateRange),"slds-is-today":e.todayActiveInRange}),"aria-label":"25 June 2020","aria-current":e.todayActiveInRange?"date":null},"25"),i().createElement(D,{"aria-selected":"single"===e.dateSelected\|\|"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:"single"===e.dateSelected\|\|"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?null:"slds-is-selected slds-is-selected-multi","aria-label":"26 June 2020"},"26"),i().createElement(D,{"aria-selected":"single"===e.dateSelected\|\|"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:"single"===e.dateSelected\|\|"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?null:"slds-is-selected slds-is-selected-multi","aria-label":"27 June 2020"},"27")),i().createElement(R,{className:u()({"slds-has-multi-selection":"week-5"===e.dateRange,"slds-has-multi-row-selection":e.dateRangeMulti})},i().createElement(D,{"aria-selected":!e.dateSelected\|\|"week-5"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:u()({"slds-is-selected":"single"===e.dateSelected&&"week-5"===e.dateRange,"slds-is-selected slds-is-selected-multi":"single"!==e.dateSelected&&("week-5"===e.dateRange\|\|"week-4-5"===e.dateRange)}),"aria-label":"28 June 2020"},"28"),i().createElement(D,{"aria-selected":"single"===e.dateSelected\|\|"week-5"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:"single"===e.dateSelected\|\|"week-5"!==e.dateRange&&"week-4-5"!==e.dateRange?null:"slds-is-selected slds-is-selected-multi","aria-label":"29 June 2020"},"29"),i().createElement(D,{"aria-selected":"single"===e.dateSelected\|\|"week-5"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:"single"===e.dateSelected\|\|"week-5"!==e.dateRange&&"week-4-5"!==e.dateRange?null:"slds-is-selected slds-is-selected-multi","aria-label":"30 June 2020"},"30"),i().createElement(D,{"aria-selected":"single"!==e.dateSelected&&"week-5"===e.dateRange?"true":"false",className:u()("single"!==e.dateSelected&&"week-5"===e.dateRange?"slds-is-selected slds-is-selected-multi":null),isAdjacentMonth:!0,"aria-label":"1 July 2020"},"1"),i().createElement(D,{"aria-selected":"single"!==e.dateSelected&&"week-5"===e.dateRange?"true":"false",className:u()("single"!==e.dateSelected&&"week-5"===e.dateRange?"slds-is-selected slds-is-selected-multi":null),isAdjacentMonth:!0,"aria-label":"2 July 2020"},"2"),i().createElement(D,{"aria-selected":"single"!==e.dateSelected&&"week-5"===e.dateRange?"true":"false",className:u()("single"!==e.dateSelected&&"week-5"===e.dateRange?"slds-is-selected slds-is-selected-multi":null),isAdjacentMonth:!0,"aria-label":"3 July 2020"},"3"),i().createElement(D,{"aria-selected":"single"!==e.dateSelected&&"week-5"===e.dateRange?"true":"false",className:u()("single"!==e.dateSelected&&"week-5"===e.dateRange?"slds-is-selected slds-is-selected-multi":null),isAdjacentMonth:!0,"aria-label":"4 July 2020"},"4")))))};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){var l,i,n,s,r=[],d=!0,o=!1;try{if(n=(a=a.call(e)).next,0===t){if(Object(a)!==a)return;d=!1}else for(;!(d=(l=n.call(a)).done)&&(r.push(l.value),r.length!==t);d=!0);}catch(e){o=!0,i=e}finally{try{if(!d&&null!=a.return&&(s=a.return(),Object(s)!==s))return}finally{if(o)throw i}}return r}}(e,t)\|\|function(e,t){if(e){if("string"==typeof e)return A(e,t);var a={}.toString.call(e).slice(8,-1);return"Object"===a&&e.constructor&&(a=e.constructor.name),"Map"===a\|\|"Set"===a?Array.from(e):"Arguments"===a\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(a)?A(e,t):void 0}}(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 A(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var a=0,l=Array(t);a<t;a++)l[a]=e[a];return l}var T=function(e){var t=e.dateFormat,a=e.dropdown,n=e.dropdownIsOpen,s=e.hasFocus,r=e.hasError,d=e.isOpen,o=e.isRequired,c=e.isDisabled,m=e.listboxData,b=e.dateDefaultValue,y=e.showRequiredIndicator,k=e.hasTooltip,x=e.showTooltip,S=e.fieldLevelDateMessage,_=e.fieldLevelTimeMessage,R=e.showDateFormat,D=(0,l.useRef)(),N=O((0,l.useState)(""),2),A=N[0],T=N[1],J=O((0,l.useState)(""),2),I=J[0],M=J[1],q=O((0,l.useState)(p.Ay.uniqueId("example-unique-id-")),1)[0],P=O((0,l.useState)(p.Ay.uniqueId("example-unique-id-")),1)[0],j=O((0,l.useState)(p.Ay.uniqueId("example-unique-id-")),1)[0];(0,l.useEffect)(function(){D.current&&("id"in D.current&&D.current.id&&T(D.current.id),"ariaChecked"in D.current&&D.current.ariaChecked&&M(D.current.textContent))},[]);var F={"slds-is-open":n};return i().createElement("div",{className:"slds-form"},i().createElement("fieldset",{className:u()("slds-form-element slds-form-element_compound",{"slds-has-error":r,"slds-datetimepicker_has-tooltip":x})},i().createElement("legend",{className:"slds-form-element__label slds-form-element__legend"},o&&i().createElement("abbr",{className:"slds-required",title:"required","aria-hidden":"true"},""," "),"Date and Time"),i().createElement("div",{className:"slds-form-element__control"},i().createElement("div",{className:"slds-form-element__group"},i().createElement("div",{className:"slds-form-element__row"},i().createElement(w.ZS,{formElementClassName:u()("slds-dropdown-trigger slds-dropdown-trigger_click",F),labelContent:"Date",inputId:q,hasRightIcon:!0,dropdown:a,hasError:r,isRequired:o,showRequiredIndicator:y,hasTooltip:!(!k\|\|!S)&&k,showTooltip:!(!x\|\|!S)&&x,fieldLevelMessage:S,inlineMessage:!r&&t,hasHiddenInlineMessage:!R},i().createElement(v.A,{id:q,placeholder:"Select a date…",defaultValue:b,"aria-describedby":r&&q+"-error",required:o,disabled:c}),i().createElement(E.A,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date",disabled:c})),i().createElement(h.Ay,{id:P,"aria-controls":j,"aria-activedescendant":A,autocomplete:!0,label:"Time",placeholder:"Select a time…",inputIconPosition:"right",hasError:r,isDisabled:c,hasTooltip:k&&_?k:null,showTooltip:x&&_?x:null,fieldLevelMessage:_,isOpen:d,rightInputIcon:i().createElement(g.eX,{symbol:"clock",className:u()("slds-icon slds-icon_x-small slds-icon-text-default",{"slds-icon-text-error":r,"slds-is-disabled":c}),containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:i().createElement(f.Ay,{className:"slds-dropdown_fluid slds-dropdown_left",id:j,snapshot:m,type:"plain",count:6,focusedRef:D}),resultsType:"listbox",hasInteractions:!0,hasFocus:s,value:I})))),r&&i().createElement("div",{className:"slds-form-element__help",id:q+"-error"},"Complete this field.")))};T.propTypes={dropdown:c().node,dropdownIsOpen:c().bool,hasFocus:c().bool,isOpen:c().bool,isRequired:c().bool,hasError:c().bool,listboxIsOpen:c().bool,listboxData:c().object.isRequired,dateDefaultValue:c().string,showRequiredIndicator:c().bool,isDisabled:c().bool,format:c().string},T.defaultProps={dropdown:i().createElement(N,{todayActive:!0}),dropdownIsOpen:!0,showRequiredIndicator:!1,isDisabled:!1};var J=i().createElement(T,{dateFormat:k,listboxData:b.eE}),I=[{id:"date-example-text-visible",label:"Date and Time - date example text visible",demoStyles:"height: 6rem;",element:i().createElement(T,{dropdown:null,listboxData:b.eE,dateFormat:k,showDateFormat:!0})},{id:"date-selection",label:"Date selected",element:i().createElement(T,{dropdown:i().createElement(N,{todayActive:!0,dateSelected:"single",dateRange:"week-4"}),dateDefaultValue:"06/24/2021",listboxData:b.eE,dateFormat:k})},{id:"time-selection",label:"Time selected",demoStyles:"height: 20rem;",storybookStyles:!0,element:i().createElement(T,{dropdown:i().createElement(N,{todayActive:!0,dateSelected:"single",dateRange:"week-4",value:"8:00am"}),dropdownIsOpen:!1,dateDefaultValue:"06/24/2021",isOpen:!0,hasFocus:!0,listboxData:b.F_,dateFormat:k})},{id:"required",label:"Date and Time - required",demoStyles:"height: 20rem;",element:i().createElement(T,{dropdownIsOpen:!1,isRequired:!0,listboxData:b.eE,dateFormat:k})},{id:"error",label:"Date and Time - error",demoStyles:"height: 20rem;",element:i().createElement(T,{dropdownIsOpen:!1,hasError:!0,listboxData:b.eE})},{id:"required-error",label:"Date and Time - required and has error",demoStyles:"height: 20rem;",element:i().createElement(T,{dropdownIsOpen:!1,isRequired:!0,hasError:!0,listboxData:b.eE})},{id:"datetimepicker-with-tooltip-for-datepicker",label:"Datetime Picker With Tooptip for datepicker",demoStyles:"height: 20rem;",element:i().createElement(T,{dropdownIsOpen:!0,listboxData:b.eE,isRequired:!0,dateDefaultValue:"Jan 1 2023",hasTooltip:!0,showTooltip:!0,fieldLevelDateMessage:"Format: mmm d yyyy \| ex: Jan 1 2023",dateFormat:k})},{id:"datetimepicker-with-tooltip-for-timepicker",label:"Datetime Picker With Tooptip for timepicker",demoStyles:"height: 20rem;",element:i().createElement(T,{dropdown:i().createElement(N,{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:b.F_,fieldLevelTimeMessage:"Format: hh:mm a \| ex: 12:00 AM",dateFormat:k})},{id:"disabled",label:"Date and Time - disabled",demoStyles:"height: 10rem;",storybookStyles:!0,element:i().createElement(T,{dropdownIsOpen:!1,listboxData:b.eE,isDisabled:!0,dateFormat:k})},{id:"mobile",label:"Mobile",element:i().createElement(w.ZS,{labelContent:"Date",inputId:"date-input-id-mobile"},i().createElement(v.A,{id:"date-input-id-mobile",type:"datetime-local"}))}],M=n.XB.a,q=n.XB.code,P=n.XB.h2,j=n.XB.h3,F=n.XB.h4,L=n.XB.li,B=n.XB.p,C=n.XB.strong,V=n.XB.ul,W=function(){return(0,l.createElement)(n.Ay,{},(0,l.createElement)("div",{className:"doc lead"},"A datetime picker is used to select a day and a time."),(0,l.createElement)(s.A,{exampleOnly:!0,demoStyles:"height: 28rem;"},(0,p.NO)(J)),P({id:"About-datetime-picker"},"About datetime picker"),j({id:"Implementation"},"Implementation"),B({},"The datetime is two ",M({href:"/components/form-element"},"form elements"),", each containing a label and text ",M({href:"/components/input"},"input"),", and a dropdown ",M({href:"/components/menus"},"menu"),", containing a grid-based calendar and filters. The date form element acts as a trigger for the dropdown."),(0,l.createElement)(r.A,{type:"warning"},(0,l.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.")),B({},"The datetime picker has the following markup requirements:"),B({},C({},"All")),V({},L({},"Follow all accessibility requirements mentioned in the ",M({href:"/components/datepickers"},"Datepicker")," and ",M({href:"/components/timepicker"},"Timepicker")," blueprints.")),B({},C({},"Desktop")),V({},L({},"Add ",q({},".slds-is-open")," to the element with ",q({},".slds-dropdown-trigger")," to invoke the dropdown that contains the datepicker and the list of time options."),L({},"On the timepicker, the ",q({},".slds-has-focus")," modifier class is required on the ",q({},".slds-listbox__option")," element that has focus."),L({},"On the timepicker, the ",q({},".slds-is-selected")," modifier class is required on the ",q({},".slds-listbox__option")," element that has been selected."),L({},"On the datepicker, the ",q({},".slds-is-selected")," modifier class is required on the ",q({},"td")," element that has the selected day."),L({},"On the datepicker, the ",q({},".slds-is-today")," modifier class is required on the ",q({},"td")," element that is the current day.")),B({},C({},"Mobile")),V({},L({},"When on mobile, we want to leverage the native datetime picker by changing the ",q({},"input")," type from ",q({},"text")," to ",q({},"datetime-local")),L({},"The ",q({},'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."),L({},"When switching ",q({},'input type="text"')," to ",q({},'input type="datetime-local"')," for mobile, we need to remove the ARIA attributes. The native rendering doesn't require these.",V({},L({},"On the element with the class ",q({},"slds-combobox"),", please remove ",q({},'role="combobox"'),", ",q({},"aria-expanded"),", and ",q({},"aria-haspopup"),"."),L({},"On the ",q({},"input")," that we just added ",q({},'type="datetime-local"')," to, please remove ",q({},"aria-controls"),", ",q({},"aria-autocomplete"),", and ",q({},'role="textbox"'),".")))),j({id:"Accessibility"},"Accessibility"),B({},"To display the datetime picker with maximum accessibility, the datetime field should be empty to start. When a user clicks, text input is activated, and the full date or time selector displays."),F({id:"Markup"},"Markup"),B({},C({},"Dialog:")),V({},L({},"A Date Format Visible variation displays a message about the expected date format. When the date field receives focus, a message appears under the field to show the expected date format. When focus is removed from the date field, the message is hidden and available as assistive text."),L({},"All datepicker fields marked as required with an must have an accompanying legend. Example:\n",(0,l.createElement)(d.A,null))),P({id:"Base"},"Base"),(0,l.createElement)(s.A,{demoStyles:"height: 28rem;"},(0,p.NO)(J)),P({id:"States"},"States"),B({},"Adding ",q({},"slds-datetimepicker_has-tooltip")," to the element with ",q({},"slds-form-element_compound")," aligns the legend properly when there is an info tooltip."),j({id:"Date-selection"},"Date selection"),(0,l.createElement)(s.A,{demoStyles:"height: 28rem;"},(0,p.NO)(I,"date-selection")),j({id:"Time-selection"},"Time selection"),(0,l.createElement)(s.A,{demoStyles:"height: 28rem;"},(0,p.NO)(I,"time-selection")),j({id:"Date-Example-Text-Visible"},"Date Example Text Visible"),(0,l.createElement)(s.A,{demoStyles:"height: 6rem;"},(0,p.NO)(I,"date-example-text-visible")),j({id:"Mobile"},"Mobile"),B({},"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 ",M({href:"/components/datetime-picker/#Implementation"},"mobile implementation")," section above."),(0,l.createElement)(s.A,{demoStyles:"height: 5rem;"},(0,p.NO)(I,"mobile")))},X=function(){return(0,n.Qr)(W())}},1981:function(e){e.exports=JSBeautify},1594:function(e){e.exports=React},5206:function(e){e.exports=ReactDOM}},i={};function n(e){var t=i[e];if(void 0!==t)return t.exports;var a=i[e]={id:e,exports:{}};return l[e](a,a.exports,n),a.exports}n.m=l,n.amdO={},e=[],n.O=function(t,a,l,i){if(!a){var s=1/0;for(c=0;c<e.length;c++){a=e[c][0],l=e[c][1],i=e[c][2];for(var r=!0,d=0;d<a.length;d++)1&i&&!(s>=i)\|\|!Object.keys(n.O).every(function(e){return n.O[e](a[d])})?(r=!1,i<s&&(s=i)):a.splice(d--,1);if(r){e.splice(c--,1);var o=l();void 0!==o&&(t=o)}}return t}i=i\|\|0;for(var c=e.length;c>0&&e[c-1][2]>i;c--)e[c]=e[c-1];e[c]=[a,l,i]},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.cw=function(e){var t;return function(){if(e){var a=e;e=0,t={exports:{}},a.call(t.exports,t,t.exports)}return t.exports}},a=Object.getPrototypeOf,n.t=function(e,l){if(1&l&&(e=this(e)),8&l)return e;if("object"==typeof e&&e){if(4&l&&e.__esModule)return e;if(16&l&&"function"==typeof e.then)return e}var i=Object.create(null);n.r(i);var s={};t=t\|\|[null,a({}),a([]),a(a)];for(var r=2&l&&e;("object"==typeof r\|\|"function"==typeof r)&&!~t.indexOf(r);r=a(r))Object.getOwnPropertyNames(r).forEach(function(t){s[t]=function(){return e[t]}});return s.default=function(){return e},n.d(i,s),i},n.d=function(e,t){for(var a in t)n.o(t,a)&&!n.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},n.e=function(){return Promise.resolve()},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.j=7691,function(){var e={7691:0};n.O.j=function(t){return 0===e[t]};var t=function(t,a){var l,i,s=a[0],r=a[1],d=a[2],o=0;if(s.some(function(t){return 0!==e[t]})){for(l in r)n.o(r,l)&&(n.m[l]=r[l]);if(d)var c=d(n)}for(t&&t(a);o<s.length;o++)i=s[o],n.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return n.O(c)},a=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];a.forEach(t.bind(null,0)),a.push=t.bind(null,a.push.bind(a))}(),n.nc=void 0;var s=n.O(void 0,[3540],function(){return n(1668)});s=n.O(s),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/datetime-picker/docs.mdx.js"]=s}();
1	+ var SLDS;!function(){"use strict";var e,t,a,l={1668:function(e,t,a){a.r(t),a.d(t,{getContents:function(){return X},getElement:function(){return W}});var l=a(1594),i=a.n(l),n=a(5671),s=a(6547),r=a(5619),d=a(9741),o=a(4187),c=a.n(o),m=a(1369),u=a.n(m),p=a(6482),h=a(5159),f=a(6185),b=a(3964),g=a(538),E=a(6955),y=a(188),w=a(2711),v=a(5526),k="Format: ".concat("12/31/2024"),x=function(e){return i().createElement("div",{"aria-hidden":"false","aria-label":"Date picker: June",className:u()("slds-datepicker",e.className),role:"dialog"},e.children,i().createElement("button",{className:"slds-button slds-align_absolute-center slds-text-link"},"Today"))},S=function(e){return i().createElement("div",{className:"slds-datepicker__filter slds-grid"},i().createElement("div",{className:"slds-datepicker__filter_month slds-grid slds-grid_align-spread slds-grow"},i().createElement("div",{className:"slds-align-middle"},i().createElement(E.A,{assistiveText:"Previous Month",className:"slds-button_icon-container",symbol:"left",title:"Previous Month"})),i().createElement("h2",{"aria-atomic":"false","aria-live":"polite",className:"slds-align-middle",id:"".concat(e.idPrefix,"-month")},"June"),i().createElement("div",{className:"slds-align-middle"},i().createElement(E.A,{assistiveText:"Next Month",className:"slds-button_icon-container",symbol:"right",title:"Next Month"}))),i().createElement("div",{className:"slds-shrink-none"},i().createElement("label",{className:"slds-assistive-text",htmlFor:"".concat(e.idPrefix,"_select")},"Pick a Year"),i().createElement(y.l6,{id:"".concat(e.idPrefix,"_select")},i().createElement("option",null,"2021"),i().createElement("option",null,"2022"),i().createElement("option",null,"2023"))))},_=function(e){return i().createElement("tr",{id:"".concat(e.idPrefix,"-weekdays")},i().createElement("th",{id:"".concat(e.idPrefix,"-Sunday"),scope:"col"},i().createElement("abbr",{title:"Sunday"},"Sun")),i().createElement("th",{id:"".concat(e.idPrefix,"-Monday"),scope:"col"},i().createElement("abbr",{title:"Monday"},"Mon")),i().createElement("th",{id:"".concat(e.idPrefix,"-Tuesday"),scope:"col"},i().createElement("abbr",{title:"Tuesday"},"Tue")),i().createElement("th",{id:"".concat(e.idPrefix,"-Wednesday"),scope:"col"},i().createElement("abbr",{title:"Wednesday"},"Wed")),i().createElement("th",{id:"".concat(e.idPrefix,"-Thursday"),scope:"col"},i().createElement("abbr",{title:"Thursday"},"Thu")),i().createElement("th",{id:"".concat(e.idPrefix,"-Friday"),scope:"col"},i().createElement("abbr",{title:"Friday"},"Fri")),i().createElement("th",{id:"".concat(e.idPrefix,"-Saturday"),scope:"col"},i().createElement("abbr",{title:"Saturday"},"Sat")))},R=function(e){return i().createElement("tr",e,e.children)},D=function(e){return i().createElement("td",{"aria-disabled":e["aria-disabled"],"aria-selected":e["aria-selected"],"aria-current":e["aria-current"],className:u()(e.className,{"slds-day_adjacent-month":e.isAdjacentMonth}),role:"gridcell",tabIndex:e.tabIndex,"aria-label":e["aria-label"]},i().createElement("span",{className:"slds-day"},e.children))},N=function(e){return i().createElement(x,{className:"slds-dropdown slds-dropdown_left"},i().createElement(S,{idPrefix:e.idPrefix}),i().createElement("table",{"aria-multiselectable":"true",className:"slds-datepicker__month",role:"grid"},i().createElement("thead",null,i().createElement(_,{idPrefix:e.idPrefix})),i().createElement("tbody",null,i().createElement(R,null,i().createElement(D,{"aria-selected":"false",isAdjacentMonth:!0,"aria-label":"31 May 2020"},"31"),i().createElement(D,{"aria-selected":"false",tabIndex:"0","aria-label":"1 June 2020"},"1"),i().createElement(D,{"aria-selected":"false","aria-label":"2 June 2020"},"2"),i().createElement(D,{"aria-selected":"false","aria-label":"3 June 2020"},"3"),i().createElement(D,{"aria-selected":"false","aria-label":"4 June 2020"},"4"),i().createElement(D,{"aria-selected":"false","aria-label":"5 June 2020"},"5"),i().createElement(D,{"aria-selected":"false","aria-label":"6 June 2020"},"6")),i().createElement(R,null,i().createElement(D,{"aria-selected":"false","aria-label":"7 June 2020"},"7"),i().createElement(D,{"aria-selected":"false","aria-label":"8 June 2020"},"8"),i().createElement(D,{"aria-selected":"false","aria-label":"9 June 2020"},"9"),i().createElement(D,{"aria-selected":"false","aria-label":"10 June 2020"},"10"),i().createElement(D,{"aria-selected":"false","aria-label":"11 June 2020"},"11"),i().createElement(D,{"aria-selected":"false","aria-label":"12 June 2020"},"12"),i().createElement(D,{"aria-selected":"false","aria-label":"13 June 2020"},"13")),i().createElement(R,null,i().createElement(D,{"aria-selected":"false","aria-label":"14 June 2020"},"14"),i().createElement(D,{"aria-selected":"false","aria-label":"15 June 2020"},"15"),i().createElement(D,{"aria-selected":"false","aria-label":"16 June 2020"},"16"),i().createElement(D,{"aria-selected":"false","aria-label":"17 June 2020"},"17"),i().createElement(D,{"aria-selected":"false","aria-current":e.todayActive?"date":null,className:e.todayActive?"slds-is-today":null,"aria-label":"18 June 2020"},"18"),i().createElement(D,{"aria-selected":"false","aria-label":"19 June 2020"},"19"),i().createElement(D,{"aria-selected":"false","aria-label":"20 June 2020"},"20")),i().createElement(R,{className:u()({"slds-has-multi-selection":"week-4"===e.dateRange,"slds-has-multi-row-selection":e.dateRangeMulti})},i().createElement(D,{"aria-selected":"false","aria-label":"21 June 2020"},"21"),i().createElement(D,{"aria-selected":"false","aria-label":"22 June 2020"},"22"),i().createElement(D,{"aria-selected":"false","aria-label":"23 June 2020"},"23"),i().createElement(D,{"aria-selected":!e.dateSelected\|\|"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:u()({"slds-is-selected":"single"===e.dateSelected&&("week-4"===e.dateRange\|\|"week-4-5"===e.dateRange),"slds-is-selected slds-is-selected-multi":"single"!==e.dateSelected&&("week-4"===e.dateRange\|\|"week-4-5"===e.dateRange)}),"aria-label":"24 June 2020"},"24"),i().createElement(D,{"aria-selected":"single"===e.dateSelected\|\|"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:u()({"slds-is-selected slds-is-selected-multi":"single"!==e.dateSelected&&("week-4"===e.dateRange\|\|"week-4-5"===e.dateRange),"slds-is-today":e.todayActiveInRange}),"aria-label":"25 June 2020","aria-current":e.todayActiveInRange?"date":null},"25"),i().createElement(D,{"aria-selected":"single"===e.dateSelected\|\|"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:"single"===e.dateSelected\|\|"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?null:"slds-is-selected slds-is-selected-multi","aria-label":"26 June 2020"},"26"),i().createElement(D,{"aria-selected":"single"===e.dateSelected\|\|"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:"single"===e.dateSelected\|\|"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?null:"slds-is-selected slds-is-selected-multi","aria-label":"27 June 2020"},"27")),i().createElement(R,{className:u()({"slds-has-multi-selection":"week-5"===e.dateRange,"slds-has-multi-row-selection":e.dateRangeMulti})},i().createElement(D,{"aria-selected":!e.dateSelected\|\|"week-5"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:u()({"slds-is-selected":"single"===e.dateSelected&&"week-5"===e.dateRange,"slds-is-selected slds-is-selected-multi":"single"!==e.dateSelected&&("week-5"===e.dateRange\|\|"week-4-5"===e.dateRange)}),"aria-label":"28 June 2020"},"28"),i().createElement(D,{"aria-selected":"single"===e.dateSelected\|\|"week-5"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:"single"===e.dateSelected\|\|"week-5"!==e.dateRange&&"week-4-5"!==e.dateRange?null:"slds-is-selected slds-is-selected-multi","aria-label":"29 June 2020"},"29"),i().createElement(D,{"aria-selected":"single"===e.dateSelected\|\|"week-5"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:"single"===e.dateSelected\|\|"week-5"!==e.dateRange&&"week-4-5"!==e.dateRange?null:"slds-is-selected slds-is-selected-multi","aria-label":"30 June 2020"},"30"),i().createElement(D,{"aria-selected":"single"!==e.dateSelected&&"week-5"===e.dateRange?"true":"false",className:u()("single"!==e.dateSelected&&"week-5"===e.dateRange?"slds-is-selected slds-is-selected-multi":null),isAdjacentMonth:!0,"aria-label":"1 July 2020"},"1"),i().createElement(D,{"aria-selected":"single"!==e.dateSelected&&"week-5"===e.dateRange?"true":"false",className:u()("single"!==e.dateSelected&&"week-5"===e.dateRange?"slds-is-selected slds-is-selected-multi":null),isAdjacentMonth:!0,"aria-label":"2 July 2020"},"2"),i().createElement(D,{"aria-selected":"single"!==e.dateSelected&&"week-5"===e.dateRange?"true":"false",className:u()("single"!==e.dateSelected&&"week-5"===e.dateRange?"slds-is-selected slds-is-selected-multi":null),isAdjacentMonth:!0,"aria-label":"3 July 2020"},"3"),i().createElement(D,{"aria-selected":"single"!==e.dateSelected&&"week-5"===e.dateRange?"true":"false",className:u()("single"!==e.dateSelected&&"week-5"===e.dateRange?"slds-is-selected slds-is-selected-multi":null),isAdjacentMonth:!0,"aria-label":"4 July 2020"},"4")))))};function A(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){var l,i,n,s,r=[],d=!0,o=!1;try{if(n=(a=a.call(e)).next,0===t){if(Object(a)!==a)return;d=!1}else for(;!(d=(l=n.call(a)).done)&&(r.push(l.value),r.length!==t);d=!0);}catch(e){o=!0,i=e}finally{try{if(!d&&null!=a.return&&(s=a.return(),Object(s)!==s))return}finally{if(o)throw i}}return r}}(e,t)\|\|function(e,t){if(e){if("string"==typeof e)return O(e,t);var a={}.toString.call(e).slice(8,-1);return"Object"===a&&e.constructor&&(a=e.constructor.name),"Map"===a\|\|"Set"===a?Array.from(e):"Arguments"===a\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(a)?O(e,t):void 0}}(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,l=Array(t);a<t;a++)l[a]=e[a];return l}var T=function(e){var t=e.dateFormat,a=e.dropdown,n=e.dropdownIsOpen,s=e.hasFocus,r=e.hasError,d=e.isOpen,o=e.isRequired,c=e.isDisabled,m=e.listboxData,b=e.dateDefaultValue,y=e.showRequiredIndicator,k=e.hasTooltip,x=e.showTooltip,S=e.fieldLevelDateMessage,_=e.fieldLevelTimeMessage,R=e.showDateFormat,D=(0,l.useRef)(),N=A((0,l.useState)(""),2),O=N[0],T=N[1],J=A((0,l.useState)(""),2),I=J[0],M=J[1],q=A((0,l.useState)(p.Ay.uniqueId("example-unique-id-")),1)[0],P=A((0,l.useState)(p.Ay.uniqueId("example-unique-id-")),1)[0],j=A((0,l.useState)(p.Ay.uniqueId("example-unique-id-")),1)[0];(0,l.useEffect)(function(){D.current&&("id"in D.current&&D.current.id&&T(D.current.id),"ariaChecked"in D.current&&D.current.ariaChecked&&M(D.current.textContent))},[]);var F={"slds-is-open":n};return i().createElement("div",{className:"slds-form"},i().createElement("fieldset",{className:u()("slds-form-element slds-form-element_compound",{"slds-has-error":r,"slds-datetimepicker_has-tooltip":x})},i().createElement("legend",{className:"slds-form-element__label slds-form-element__legend"},o&&i().createElement("abbr",{className:"slds-required",title:"required","aria-hidden":"true"},""," "),"Date and Time"),i().createElement("div",{className:"slds-form-element__control"},i().createElement("div",{className:"slds-form-element__group"},i().createElement("div",{className:"slds-form-element__row"},i().createElement(w.ZS,{formElementClassName:u()("slds-dropdown-trigger slds-dropdown-trigger_click",F),labelContent:"Date",inputId:q,hasRightIcon:!0,dropdown:a,hasError:r,isRequired:o,showRequiredIndicator:y,hasTooltip:!(!k\|\|!S)&&k,showTooltip:!(!x\|\|!S)&&x,fieldLevelMessage:S,inlineMessage:!r&&t,hasHiddenInlineMessage:!R},i().createElement(v.A,{id:q,placeholder:"Select a date…",defaultValue:b,"aria-describedby":r&&q+"-error",required:o,disabled:c}),i().createElement(E.A,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date",disabled:c})),i().createElement(h.Ay,{id:P,"aria-controls":j,"aria-activedescendant":O,autocomplete:!0,label:"Time",placeholder:"Select a time…",inputIconPosition:"right",hasError:r,isDisabled:c,hasTooltip:k&&_?k:null,showTooltip:x&&_?x:null,fieldLevelMessage:_,isOpen:d,rightInputIcon:i().createElement(g.eX,{symbol:"clock",className:u()("slds-icon slds-icon_x-small slds-icon-text-default",{"slds-icon-text-error":r,"slds-is-disabled":c}),containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:i().createElement(f.Ay,{className:"slds-dropdown_fluid slds-dropdown_left",id:j,snapshot:m,type:"plain",count:6,focusedRef:D}),resultsType:"listbox",hasInteractions:!0,hasFocus:s,value:I})))),r&&i().createElement("div",{className:"slds-form-element__help",id:q+"-error"},"Complete this field.")))};T.propTypes={dropdown:c().node,dropdownIsOpen:c().bool,hasFocus:c().bool,isOpen:c().bool,isRequired:c().bool,hasError:c().bool,listboxIsOpen:c().bool,listboxData:c().object.isRequired,dateDefaultValue:c().string,showRequiredIndicator:c().bool,isDisabled:c().bool,format:c().string},T.defaultProps={dropdown:i().createElement(N,{todayActive:!0}),dropdownIsOpen:!0,showRequiredIndicator:!1,isDisabled:!1};var J=i().createElement(T,{dateFormat:k,listboxData:b.eE}),I=[{id:"date-example-text-visible",label:"Date and Time - date example text visible",demoStyles:"height: 6rem;",element:i().createElement(T,{dropdown:null,listboxData:b.eE,dateFormat:k,showDateFormat:!0})},{id:"date-selection",label:"Date selected",element:i().createElement(T,{dropdown:i().createElement(N,{todayActive:!0,dateSelected:"single",dateRange:"week-4"}),dateDefaultValue:"06/24/2021",listboxData:b.eE,dateFormat:k})},{id:"time-selection",label:"Time selected",demoStyles:"height: 20rem;",storybookStyles:!0,element:i().createElement(T,{dropdown:i().createElement(N,{todayActive:!0,dateSelected:"single",dateRange:"week-4",value:"8:00am"}),dropdownIsOpen:!1,dateDefaultValue:"06/24/2021",isOpen:!0,hasFocus:!0,listboxData:b.F_,dateFormat:k})},{id:"required",label:"Date and Time - required",demoStyles:"height: 20rem;",element:i().createElement(T,{dropdownIsOpen:!1,isRequired:!0,listboxData:b.eE,dateFormat:k})},{id:"error",label:"Date and Time - error",demoStyles:"height: 20rem;",element:i().createElement(T,{dropdownIsOpen:!1,hasError:!0,listboxData:b.eE})},{id:"required-error",label:"Date and Time - required and has error",demoStyles:"height: 20rem;",element:i().createElement(T,{dropdownIsOpen:!1,isRequired:!0,hasError:!0,listboxData:b.eE})},{id:"datetimepicker-with-tooltip-for-datepicker",label:"Datetime Picker With Tooptip for datepicker",demoStyles:"height: 20rem;",element:i().createElement(T,{dropdownIsOpen:!0,listboxData:b.eE,isRequired:!0,dateDefaultValue:"Jan 1 2023",hasTooltip:!0,showTooltip:!0,fieldLevelDateMessage:"Format: mmm d yyyy \| ex: Jan 1 2023",dateFormat:k})},{id:"datetimepicker-with-tooltip-for-timepicker",label:"Datetime Picker With Tooptip for timepicker",demoStyles:"height: 20rem;",element:i().createElement(T,{dropdown:i().createElement(N,{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:b.F_,fieldLevelTimeMessage:"Format: hh:mm a \| ex: 12:00 AM",dateFormat:k})},{id:"disabled",label:"Date and Time - disabled",demoStyles:"height: 10rem;",storybookStyles:!0,element:i().createElement(T,{dropdownIsOpen:!1,listboxData:b.eE,isDisabled:!0,dateFormat:k})},{id:"mobile",label:"Mobile",element:i().createElement(w.ZS,{labelContent:"Date",inputId:"date-input-id-mobile"},i().createElement(v.A,{id:"date-input-id-mobile",type:"datetime-local"}))}],M=n.XB.a,q=n.XB.code,P=n.XB.h2,j=n.XB.h3,F=n.XB.h4,L=n.XB.li,B=n.XB.p,C=n.XB.strong,V=n.XB.ul,W=function(){return(0,l.createElement)(n.Ay,{},(0,l.createElement)("div",{className:"doc lead"},"A datetime picker is used to select a day and a time."),(0,l.createElement)(s.A,{exampleOnly:!0,demoStyles:"height: 28rem;"},(0,p.NO)(J)),P({id:"About-datetime-picker"},"About datetime picker"),j({id:"Implementation"},"Implementation"),B({},"The datetime is two ",M({href:"/components/form-element"},"form elements"),", each containing a label and text ",M({href:"/components/input"},"input"),", and a dropdown ",M({href:"/components/menus"},"menu"),", containing a grid-based calendar and filters. The date form element acts as a trigger for the dropdown."),(0,l.createElement)(r.A,{type:"warning"},(0,l.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.")),B({},"The datetime picker has the following markup requirements:"),B({},C({},"All")),V({},L({},"Follow all accessibility requirements mentioned in the ",M({href:"/components/datepickers"},"Datepicker")," and ",M({href:"/components/timepicker"},"Timepicker")," blueprints.")),B({},C({},"Desktop")),V({},L({},"Add ",q({},".slds-is-open")," to the element with ",q({},".slds-dropdown-trigger")," to invoke the dropdown that contains the datepicker and the list of time options."),L({},"On the timepicker, the ",q({},".slds-has-focus")," modifier class is required on the ",q({},".slds-listbox__option")," element that has focus."),L({},"On the timepicker, the ",q({},".slds-is-selected")," modifier class is required on the ",q({},".slds-listbox__option")," element that has been selected."),L({},"On the datepicker, the ",q({},".slds-is-selected")," modifier class is required on the ",q({},"td")," element that has the selected day."),L({},"On the datepicker, the ",q({},".slds-is-today")," modifier class is required on the ",q({},"td")," element that is the current day.")),B({},C({},"Mobile")),V({},L({},"When on mobile, we want to leverage the native datetime picker by changing the ",q({},"input")," type from ",q({},"text")," to ",q({},"datetime-local")),L({},"The ",q({},'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."),L({},"When switching ",q({},'input type="text"')," to ",q({},'input type="datetime-local"')," for mobile, we need to remove the ARIA attributes. The native rendering doesn't require these.",V({},L({},"On the element with the class ",q({},"slds-combobox"),", please remove ",q({},'role="combobox"'),", ",q({},"aria-expanded"),", and ",q({},"aria-haspopup"),"."),L({},"On the ",q({},"input")," that we just added ",q({},'type="datetime-local"')," to, please remove ",q({},"aria-controls"),", ",q({},"aria-autocomplete"),", and ",q({},'role="textbox"'),".")))),j({id:"Accessibility"},"Accessibility"),B({},"To display the datetime picker with maximum accessibility, the datetime field should be empty to start. When a user clicks, text input is activated, and the full date or time selector displays."),F({id:"Markup"},"Markup"),B({},C({},"Dialog:")),V({},L({},"A Date Format Visible variation displays a message about the expected date format. When the date field receives focus, a message appears under the field to show the expected date format. When focus is removed from the date field, the message is hidden and available as assistive text."),L({},"All datepicker fields marked as required with an must have an accompanying legend. Example:\n",(0,l.createElement)(d.A,null))),P({id:"Base"},"Base"),(0,l.createElement)(s.A,{demoStyles:"height: 28rem;"},(0,p.NO)(J)),P({id:"States"},"States"),B({},"Adding ",q({},"slds-datetimepicker_has-tooltip")," to the element with ",q({},"slds-form-element_compound")," aligns the legend properly when there is an info tooltip."),j({id:"Date-selection"},"Date selection"),(0,l.createElement)(s.A,{demoStyles:"height: 28rem;"},(0,p.NO)(I,"date-selection")),j({id:"Time-selection"},"Time selection"),(0,l.createElement)(s.A,{demoStyles:"height: 28rem;"},(0,p.NO)(I,"time-selection")),j({id:"Date-Example-Text-Visible"},"Date Example Text Visible"),(0,l.createElement)(s.A,{demoStyles:"height: 6rem;"},(0,p.NO)(I,"date-example-text-visible")),j({id:"Mobile"},"Mobile"),B({},"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 ",M({href:"/components/datetime-picker/#Implementation"},"mobile implementation")," section above."),(0,l.createElement)(s.A,{demoStyles:"height: 5rem;"},(0,p.NO)(I,"mobile")))},X=function(){return(0,n.Qr)(W())}},1981:function(e){e.exports=JSBeautify},1594:function(e){e.exports=React},5206:function(e){e.exports=ReactDOM}},i={};function n(e){var t=i[e];if(void 0!==t)return t.exports;var a=i[e]={id:e,exports:{}};return l[e](a,a.exports,n),a.exports}n.m=l,n.amdO={},e=[],n.O=function(t,a,l){if(!a){for(var i=0;i<e.length;i++){a=e[i][0],l=e[i][1];for(var s=!0,r=0;r<a.length;r++)n.O.j(a[r])?a.splice(r--,1):s=!1;if(s){e.splice(i--,1);var d=l();void 0!==d&&(t=d)}}return t}e.push([a,l])},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.cw=function(e){var t;return function(){if(e){var a=e;e=0,t={exports:{}},a.call(t.exports,t,t.exports)}return t.exports}},a=Object.getPrototypeOf,n.t=function(e,l){if(1&l&&(e=this(e)),8&l)return e;if("object"==typeof e&&e){if(4&l&&e.__esModule)return e;if(16&l&&"function"==typeof e.then)return e}var i=Object.create(null);n.r(i);var s={};t=t\|\|[null,a({}),a([]),a(a)];for(var r=2&l&&e;("object"==typeof r\|\|"function"==typeof r)&&!~t.indexOf(r);r=a(r))Object.getOwnPropertyNames(r).forEach(function(t){s[t]=function(){return e[t]}});return s.default=function(){return e},n.d(i,s),i},n.d=function(e,t){for(var a in t)n.o(t,a)&&!n.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},n.e=function(){return Promise.resolve()},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.j=7691,function(){var e={7691:0};n.O.j=function(t){return 0===e[t]};var t=function(t,a){var l,i,s=a[0],r=a[1],d=a[2],o=0;if(s.some(function(t){return 0!==e[t]})){for(l in r)n.o(r,l)&&(n.m[l]=r[l]);if(d)var c=d(n)}for(t&&t(a);o<s.length;o++)i=s[o],n.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return n.O(c)},a=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];a.forEach(t.bind(null,0)),a.push=t.bind(null,a.push.bind(a))}(),n.nc=void 0;var s=n.O(void 0,[3540],function(){return n(1668)});s=n.O(s),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/datetime-picker/docs.mdx.js"]=s}();

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

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,l,s={652:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return ae},getElement:function(){return se}});var s=l(1594),a=l.n(s),n=l(5671),o=l(6547),i=(l(7675),l(5619),l(2937)),r=l(6955),d=l(4760),c=l(1766),m=l(1412),u=l(4187),b=l.n(u),p=l(8347),_=l(5159),E=l(3964),h=l(6185),f=(l(9533),l(538)),N=l(2711),g=l(5526),v=l(1369),x=l.n(v),y=l(6482);function w(e,t){return function(e){if(Array.isArray(e))return e}(e)\|\|function(e,t){var l=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]\|\|e["@@iterator"];if(null!=l){var s,a,n,o,i=[],r=!0,d=!1;try{if(n=(l=l.call(e)).next,0===t){if(Object(l)!==l)return;r=!1}else for(;!(r=(s=n.call(l)).done)&&(i.push(s.value),i.length!==t);r=!0);}catch(e){d=!0,a=e}finally{try{if(!r&&null!=l.return&&(o=l.return(),Object(o)!==o))return}finally{if(d)throw a}}return i}}(e,t)\|\|function(e,t){if(e){if("string"==typeof e)return C(e,t);var l={}.toString.call(e).slice(8,-1);return"Object"===l&&e.constructor&&(l=e.constructor.name),"Map"===l\|\|"Set"===l?Array.from(e):"Arguments"===l\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(l)?C(e,t):void 0}}(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 C(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var l=0,s=Array(t);l<t;l++)s[l]=e[l];return s}var A=function(e){return a().createElement(N.ZS,{labelId:e.labelId,labelContent:e.label,inlineMessage:e.inlineMessage,hasError:e.hasError,errorId:e.errorId,hasFauxLabel:!0},a().createElement("div",{className:x()("slds-rich-text-editor slds-grid slds-grid_vertical slds-nowrap",e.isToolbarOnly&&"slds-rich-text-editor_toolbar-only",e.className),"aria-label":e.disabledLabel},e.children))};A.propTypes={children:b().node.isRequired,errorId:b().string,hasError:b().bool,inlineMessage:b().string,labelContent:b().string,labelId:b().string};var k=function(e){return a().createElement("div",{role:"toolbar","aria-label":e.disabledLabel,className:x()("slds-rich-text-editor__toolbar slds-shrink-none",e.isToolbarOnly&&"slds-rich-text-editor__toolbar_detached",e.className)},e.children)},I=function(e){var t=e.listboxData,l=e.id;return a().createElement(h.Ay,{id:l,snapshot:t,type:"plain",count:3,hideIcons:!0,className:"slds-dropdown_fluid slds-dropdown_left"})};I.propTypes={listboxData:b().object.isRequired,id:b().string};var S=function(e){var t=e.listboxData,l=e.id;return a().createElement(h.Ay,{id:l,snapshot:t,type:"plain",count:6,hideIcons:!0,className:"slds-dropdown_fluid slds-dropdown_left"})};S.propTypes={listboxData:b().object.isRequired,id:b().string};var T=function(e){var t=w((0,s.useState)(y.Ay.uniqueId("example-unique-id-")),1)[0],l=w((0,s.useState)(y.Ay.uniqueId("example-unique-id-")),1)[0],n=w((0,s.useState)(y.Ay.uniqueId("example-unique-id-")),1)[0],o=w((0,s.useState)(y.Ay.uniqueId("example-unique-id-")),1)[0];return a().createElement("div",{className:"slds-grid slds-rich-text-editor__spacing-wrapper",role:"group","aria-label":"Format font family & size"},a().createElement("div",{className:"slds-rich-text-editor__select"},a().createElement(_.Ay,{id:t,"aria-controls":l,label:"Choose a Font",hideLabel:!0,inputContainerClassName:"slds-rich-text-editor__select_x-small",inputIconPosition:"right",rightInputIcon:a().createElement(f.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:a().createElement(I,{listboxData:E.kz,id:l}),resultsType:"listbox",hasInteractions:!0,selectOnly:!0,value:"Font"})),a().createElement("div",{className:"slds-rich-text-editor__select"},a().createElement(_.Ay,{id:n,"aria-controls":o,label:"Choose a Font Size",hideLabel:!0,inputContainerClassName:"slds-rich-text-editor__select_xx-small",inputIconPosition:"right",rightInputIcon:a().createElement(f.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:a().createElement(S,{listboxData:E.TU,id:o}),resultsType:"listbox",hasInteractions:!0,selectOnly:!0,value:"Size",tabIndex:"-1"})))},O=function(e){return a().createElement(m.GW,{"aria-label":"Format text"},a().createElement("li",null,a().createElement(r.A,{className:"slds-button_icon-border-filled",symbol:"bold",tabIndex:e.tabIndexSetting,"aria-describedby":e.hasTooltip?"bold":null,disabled:e.disabledButtons,assistiveText:"Bold"})),a().createElement("li",null,a().createElement(r.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"italic",disabled:e.disabledButtons,assistiveText:"Italic"})),a().createElement("li",null,a().createElement(r.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"underline",disabled:e.disabledButtons,assistiveText:"Underline"})),a().createElement("li",null,a().createElement(r.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"strikethrough",disabled:e.disabledButtons,assistiveText:"Strike Through"})))},L=function(e){return a().createElement(m.GW,{"aria-label":"Format background & text color"},a().createElement("li",null,a().createElement("button",{tabIndex:"-1",disabled:e.disabledButtons,className:"slds-button slds-button_icon slds-button_icon-more slds-button_icon-more-filled","aria-haspopup":"true"},a().createElement(p.A,{className:"slds-button__icon",sprite:"utility",symbol:"text_background_color"}),a().createElement(p.A,{className:"slds-button__icon slds-button__icon_x-small",sprite:"utility",symbol:"down"}),a().createElement("span",{className:"slds-assistive-text"},"Background Color"))),a().createElement("li",null,a().createElement("button",{tabIndex:"-1",disabled:e.disabledButtons,className:"slds-button slds-button_icon slds-button_icon-more slds-button_icon-more-filled","aria-haspopup":"true"},a().createElement(p.A,{className:"slds-button__icon",sprite:"utility",symbol:"text_color"}),a().createElement(p.A,{className:"slds-button__icon slds-button__icon_x-small",sprite:"utility",symbol:"down"}),a().createElement("span",{className:"slds-assistive-text"},"Text Color"))))},j=function(e){return a().createElement(m.GW,{"aria-label":"Format body"},a().createElement("li",null,a().createElement(r.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextbulletedlist",disabled:e.disabledButtons,assistiveText:"Bulleted List"})),a().createElement("li",null,a().createElement(r.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextnumberedlist",disabled:e.disabledButtons,assistiveText:"Numbered List"})),a().createElement("li",null,a().createElement(r.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextindent",disabled:e.disabledButtons,assistiveText:"Indent"})),a().createElement("li",null,a().createElement(r.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextoutdent",disabled:e.disabledButtons,assistiveText:"Outdent"})))},B=function(e){return a().createElement(m.GW,{"aria-label":"Align text"},a().createElement("li",null,a().createElement(r.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"left_align_text",disabled:e.disabledButtons,assistiveText:"Left Align Text"})),a().createElement("li",null,a().createElement(r.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"center_align_text",disabled:e.disabledButtons,assistiveText:"Center Align Text"})),a().createElement("li",null,a().createElement(r.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"right_align_text",disabled:e.disabledButtons,assistiveText:"Right Align Text"})))},F=function(e){return a().createElement(m.GW,{role:e.overflow?"presentation":null,"aria-label":e.overflow?null:"Insert content"},a().createElement("li",{role:e.overflow?"presentation":null},a().createElement(r.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"emoji",disabled:e.disabledButtons,assistiveText:"Add Emoji"})),a().createElement("li",{role:e.overflow?"presentation":null},a().createElement(r.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"image",disabled:e.disabledButtons,assistiveText:"Add Image"})),a().createElement("li",{role:e.overflow?"presentation":null},a().createElement(r.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"link",disabled:e.disabledButtons,assistiveText:"Add Link"})))},V=function(e){return a().createElement(m.GW,{role:e.overflow?"presentation":null,"aria-label":e.overflow?null:"Remove Formatting"},a().createElement("li",{role:e.overflow?"presentation":null},a().createElement(r.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"remove_formatting",disabled:e.disabledButtons,assistiveText:"Remove Formatting"})))},P=function(e){return a().createElement("div",{className:x()(e.text?"slds-rich-text-editor__output":"slds-rich-text-editor__textarea","slds-grid")},e.text?a().createElement("div",{"aria-describedby":e["aria-describedby"],"aria-label":e.labelId?null:"Compose text","aria-labelledby":e.labelId,contentEditable:e.disabled?null:"true",suppressContentEditableWarning:!0,className:"slds-rich-text-area__content slds-grow"},e.text):a().createElement("div",{"aria-describedby":e["aria-describedby"],"aria-label":e.labelId?null:e.label\|\|"Compose text","aria-labelledby":e.labelId,contentEditable:e.disabled?null:"true",suppressContentEditableWarning:!0,className:"slds-rich-text-area__content slds-text-color_weak slds-grow"},e.placeholder))},z=l(7705),D=l(3106),M="dialog-heading-id-1",q="dialog-content-id-1",R=[{entity:"email",title:"Agenda for next week"},{entity:"call",title:"Lei Chan"},{entity:"task",title:"August 14 Meeting Notes"}],H=function(e){return a().createElement("div",{className:"slds-col_bump-left slds-text-align_right"},a().createElement("button",{className:"slds-button slds-button_brand"},"Action"))},W=function(e){return a().createElement("div",{className:"slds-col_bump-left slds-grid slds-grid_vertical-align-center"},a().createElement("div",{className:"slds-grid slds-m-right_small",role:"toolbar"},a().createElement("ul",{className:"slds-grid","aria-label":"Insert content"},a().createElement("li",null,a().createElement(r.A,{className:"slds-button_icon-small",symbol:"link",assistiveText:"Attach File",title:"Attach File"})),a().createElement("li",null,a().createElement(r.A,{className:"slds-button_icon-small",symbol:"insert_template",assistiveText:"Insert Template",title:"Insert Template",tabIndex:"-1"})),a().createElement("li",null,a().createElement(r.A,{className:"slds-button_icon-small",symbol:"insert_tag_field",assistiveText:"Insert HTML",title:"Insert HTML",tabIndex:"-1"}))),a().createElement(r.A,{className:"slds-button_icon-small",symbol:"preview",assistiveText:"Preview",title:"Preview",tabIndex:"-1"})),a().createElement("button",{className:"slds-button slds-button_brand"},"Send"))},X=function(e){return a().createElement("section",{className:x()("slds-docked-composer slds-grid slds-grid_vertical",e.className,e.dialogClosed?"slds-is-closed":null),role:e.nestedDialog?null:"dialog","aria-labelledby":e.nestedDialog?null:M,"aria-describedby":e.nestedDialog?null:q},a().createElement("header",{className:"slds-docked-composer__header slds-grid slds-shrink-none","aria-live":"assertive"},a().createElement("div",{className:"slds-media slds-media_center slds-no-space"},a().createElement("div",{className:"slds-media__figure slds-m-right_x-small"},a().createElement("span",{className:"slds-icon_container"},a().createElement(p.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"standard",symbol:e.headerSymbol\|\|"call"}))),a().createElement("div",{className:"slds-media__body"},e.dialogClosed?a().createElement("span",{className:"slds-assistive-text"},"Minimized"):null,a().createElement("h2",{className:"slds-truncate",id:M,title:e.header\|\|"Header"},e.header\|\|"Header"))),a().createElement("div",{className:"slds-col_bump-left slds-shrink-none"},a().createElement(r.A,{className:"slds-button_icon",symbol:"minimize_window",assistiveText:"Minimize Composer Panel",title:"Minimize window"}),a().createElement(r.A,{className:"slds-button_icon",symbol:"expand_alt",assistiveText:"Expand Composer Panel",title:"Expand Composer"}),a().createElement(r.A,{className:"slds-button_icon",symbol:"close",assistiveText:"Close Composer Panel",title:"Close"}))),a().createElement("div",{className:x()("slds-docked-composer__body",e.bodyClassName),id:q},e.children),e.footer?a().createElement("footer",{className:x()("slds-docked-composer__footer slds-shrink-none",e.footerClassName)},e.footer):null)},U=function(e){return a().createElement("div",{className:"slds-docked-composer slds-docked-composer_overflow"},a().createElement("button",{className:"slds-button slds-button_icon slds-docked-composer_overflow__button","aria-haspopup":"true"},a().createElement(p.A,{className:"slds-button__icon",sprite:"utility",symbol:"standard_objects"}),a().createElement("span",{className:"slds-text-body_small slds-m-left_xx-small"},"3 ",a().createElement("span",{className:"slds-assistive-text"},"other docked composer panels"))),a().createElement(d.W1,{className:"slds-dropdown_left slds-dropdown_bottom slds-dropdown_medium slds-nubbin_bottom-left"},a().createElement(d.cO,{className:"slds-dropdown_length-with-icon-7"},y.Ay.times(R.length,function(e){return a().createElement(d.Dr,{key:e,title:R[e].title},a().createElement("span",{className:"slds-icon_container slds-icon-standard-"+R[e].entity+" slds-m-right_x-small"},a().createElement(p.A,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:R[e].entity}),a().createElement("span",{className:"slds-assistive-text"},R[e].entity)),R[e].title)}))))},G=function(e){return a().createElement(z.NC,{listboxClassName:"slds-dropdown slds-dropdown_fluid",vertical:!0,id:e.id},a().createElement(z.Oh,null,a().createElement(z.q9,{id:e.listboxOptionId,entityTitle:"Acme",entityMeta:!0})))},J=[{id:"default",label:"Default",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",footer:a().createElement(H,null)},a().createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a().createElement("br",null)," This area consumes the feature")))}],Y=[{id:"single-composer-open",label:"Open",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",footer:a().createElement(H,null)},a().createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a().createElement("br",null)," This area consumes the feature")))},{id:"single-composer-focused",label:"Focused",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open slds-has-focus",footer:a().createElement(H,null)},a().createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a().createElement("br",null)," This area consumes the feature")))},{id:"single-composer-closed",label:"Closed",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{dialogClosed:!0,footer:a().createElement(H,null)},a().createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a().createElement("br",null)," This area consumes the feature")))},{id:"single-composer-closed-focused",label:"Closed Focused",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-has-focus",dialogClosed:!0,footer:a().createElement(H,null)},a().createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a().createElement("br",null)," This area consumes the feature")))},{id:"single-composer-popout",label:"Popout",element:a().createElement(c.zs,null,a().createElement(c.aF,{className:"slds-docked-composer-modal","aria-labelledby":M,"aria-describedby":q,closeButton:!1},a().createElement(c.$m,{id:"modal-content-id"},a().createElement(X,{footer:a().createElement(H,null),nestedDialog:!0},a().createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a().createElement("br",null)," This area consumes the feature")))))},{id:"multiple-composer-overflow",label:"With Overflow Menu",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(U,null),a().createElement(X,{className:"slds-is-open",footer:a().createElement(H,null)},a().createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a().createElement("br",null)," This area consumes the feature")))}],Q=[{id:"task",label:"Log a Task",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",bodyClassName:"slds-docked-composer__body_form",header:"New Task",headerSymbol:"task",footer:a().createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Save")},a().createElement("fieldset",{className:"slds-form-element slds-form_compound"},a().createElement("legend",{className:"slds-assistive-text"},"Log new task"),a().createElement("div",{className:"slds-form-element__control"},a().createElement("div",{className:"slds-form-element__group"},a().createElement("div",{className:"slds-form-element__row"},a().createElement("div",{className:"slds-form-element slds-size_1-of-1"},a().createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-01"},"Subject"),a().createElement("div",{className:"slds-form-element__control"},a().createElement("input",{className:"slds-input",type:"text",id:"text-input-01"})))),a().createElement("div",{className:"slds-form-element__row"},a().createElement("div",{className:"slds-form-element slds-size_1-of-2"},a().createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-02"},"Assigned To"),a().createElement("div",{className:"slds-form-element__control"},a().createElement("input",{className:"slds-input",type:"text",id:"text-input-02"}))),a().createElement("div",{className:"slds-form-element slds-size_1-of-2"},a().createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-03"},"Due Dates"),a().createElement("div",{className:"slds-form-element__control"},a().createElement("input",{className:"slds-input",type:"text",id:"text-input-03"})))),a().createElement("div",{className:"slds-form-element__row"},a().createElement(z.H_,{formClassName:"slds-size_1-of-2",autocomplete:!0,label:"Name",placeholder:"Search Leads",inputIcon:"right",inputIconRightSymbol:"search",objectSwitcher:!0,objectSwitcherInline:!0,"aria-controls":"listbox-id-01",listbox:a().createElement(G,{id:"listbox-id-01",listboxOptionId:"listbox-option-id-1"})}),a().createElement(z.H_,{formClassName:"slds-size_1-of-2",autocomplete:!0,label:"Name",placeholder:"Search Accounts",inputIcon:"right",inputIconRightSymbol:"search",objectSwitcher:!0,objectSwitcherInline:!0,"aria-controls":"listbox-id-02",listbox:a().createElement(G,{id:"listbox-id-02",listboxOptionId:"listbox-option-id-2"})})))))))},{id:"voice-composer-queued",label:"Voice - Queued",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Connecting...",footer:a().createElement("button",{className:"slds-button slds-button_destructive slds-size_1-of-1"},"End Call")},a().createElement("div",{className:"slds-text-align_center slds-align-middle"},a().createElement("span",{className:"slds-avatar slds-avatar_large"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a().createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation")),a().createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Connecting..."))))},{id:"voice-composer-ringing",label:"Voice - Ringing",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Dialing...",footer:a().createElement("button",{className:"slds-button slds-button_destructive slds-size_1-of-1"},"End Call")},a().createElement("div",{className:"slds-text-align_center slds-align-middle"},a().createElement("span",{className:"slds-avatar slds-avatar_large"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a().createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation")),a().createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Dialing..."))))},{id:"voice-composer-connected",label:"Voice - Connected",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",header:"Lei Chan - Call in Progress",footer:a().createElement("button",{className:"slds-button slds-button_destructive slds-col_bump-left"},"End Call")},a().createElement("div",{className:"slds-docked-composer__lead"},a().createElement("div",{className:"slds-media"},a().createElement("div",{className:"slds-media__figure"},a().createElement("span",{className:"slds-avatar slds-avatar_medium"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"}))),a().createElement("div",{className:"slds-media__body"},a().createElement("p",{className:"slds-text-heading_medium"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation")))),a().createElement("p",{className:"slds-col_bump-left slds-text-heading_large"},"5:37")),a().createElement("div",{className:"slds-docked-composer__toolbar"},a().createElement(r.A,{className:"slds-button_icon-border-filled slds-button_icon-small",symbol:"unmuted",assistiveText:"Mute Yourself",title:"Mute Yourself","aria-pressed":"false"})),a().createElement("label",{className:"slds-assistive-text",htmlFor:"composer-text-input-1"},"Take notes"),a().createElement("textarea",{id:"composer-text-input-1",className:"slds-docked-composer__input slds-input_bare slds-text-longform slds-grow",placeholder:"Jot down notes here..."})))},{id:"voice-composer-cancelled",label:"Voice - Cancelled",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Cancelling..."},a().createElement("div",{className:"slds-text-align_center slds-align-middle"},a().createElement("span",{className:"slds-avatar slds-avatar_large"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a().createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation")),a().createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Cancelling..."))))},{id:"voice-composer-busy",label:"Voice - Busy",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Busy",footer:[a().createElement("button",{className:"slds-button slds-button_neutral slds-size_1-of-2",key:y.Ay.uniqueId("follow-up-")},"Follow-Up Later"),a().createElement("button",{className:"slds-button slds-button_brand slds-size_1-of-2",key:y.Ay.uniqueId("call-again-")},"Call Again")]},a().createElement("div",{className:"slds-text-align_center slds-align-middle"},a().createElement("span",{className:"slds-avatar slds-avatar_large"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a().createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation")),a().createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Busy"))))},{id:"voice-composer-failed",label:"Voice - Call Failed",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Call Failed",footer:[a().createElement("button",{className:"slds-button slds-button_neutral slds-size_1-of-2",key:y.Ay.uniqueId("follow-up-")},"Edit Phone Number"),a().createElement("button",{className:"slds-button slds-button_brand slds-size_1-of-2",key:y.Ay.uniqueId("call-again-")},"Call Again")]},a().createElement("div",{className:"slds-text-align_center slds-align-middle"},a().createElement("span",{className:"slds-avatar slds-avatar_large"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a().createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation")),a().createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Call Failed"))))},{id:"voice-composer-no-answer",label:"Voice - No Answer",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - No Answer",footer:[a().createElement("button",{className:"slds-button slds-button_neutral slds-size_1-of-2",key:y.Ay.uniqueId("follow-up-")},"Follow-Up Later"),a().createElement("button",{className:"slds-button slds-button_brand slds-size_1-of-2",key:y.Ay.uniqueId("call-again-")},"Call Again")]},a().createElement("div",{className:"slds-text-align_center slds-align-middle"},a().createElement("span",{className:"slds-avatar slds-avatar_large"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a().createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation")),a().createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"No Answer"))))},{id:"voice-composer-call-finished",label:"Voice - Call Finished",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",header:"Lei Chan - Call Finished",footer:a().createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Finish Notes")},a().createElement("div",{className:"slds-docked-composer__lead"},a().createElement("div",{className:"slds-media"},a().createElement("div",{className:"slds-media__figure"},a().createElement("span",{className:"slds-avatar slds-avatar_medium"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"}))),a().createElement("div",{className:"slds-media__body"},a().createElement("p",{className:"slds-text-heading_medium"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation"))))),a().createElement("div",{className:"slds-docked-composer__toolbar"},a().createElement(r.A,{className:"slds-button_icon-border-filled slds-button_icon-small",symbol:"unmuted",assistiveText:"Mute Yourself",title:"Mute Yourself","aria-pressed":"false"})),a().createElement("label",{className:"slds-assistive-text",htmlFor:"composer-text-input-1"},"Take notes"),a().createElement("textarea",{id:"composer-text-input-1",className:"slds-docked-composer__input slds-input_bare slds-text-longform slds-grow",placeholder:"Jot down notes here..."})))},{id:"voice-composer-call-incoming",label:"Voice - Call Incoming",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center slds-size_1-of-1",header:"Lei Chan - Incoming Call...",footer:a().createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Finish Notes")},a().createElement("div",{className:"slds-text-align_center slds-align-middle"},a().createElement("span",{className:"slds-avatar slds-avatar_large"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a().createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation")),a().createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"(416) 555-1234")),a().createElement("div",{className:"slds-p-horizontal_x-small slds-text-align_left slds-size_1-of-1"},a().createElement("h3",{className:"slds-m-bottom_x-small"},"Recent Activity"),a().createElement("ul",{className:"slds-has-dividers_around-space"},a().createElement("li",{className:"slds-item slds-theme_shade slds-grid"},a().createElement("span",{className:"slds-icon_container slds-icon-standard-task slds-m-right_x-small"},a().createElement(p.A,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"task"}),a().createElement("span",{className:"slds-assistive-text"},"Task")),"Discussed New Pricing Models",a().createElement("span",{className:"slds-col_bump-left"},"Yesterday")),a().createElement("li",{className:"slds-item slds-theme_shade slds-grid"},a().createElement("span",{className:"slds-icon_container slds-icon-standard-email slds-m-right_x-small"},a().createElement(p.A,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"email"}),a().createElement("span",{className:"slds-assistive-text"},"Email")),"Re: Updated Proposals",a().createElement("span",{className:"slds-col_bump-left"},"4 Hours Ago")),a().createElement("li",{className:"slds-item slds-theme_shade slds-grid"},a().createElement("span",{className:"slds-icon_container slds-icon-standard-note slds-m-right_x-small"},a().createElement(p.A,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"note"}),a().createElement("span",{className:"slds-assistive-text"},"Note")),"Discuss Slides for Nov EBC",a().createElement("span",{className:"slds-col_bump-left"},"2 Days Ago"))))))},{id:"voice-composer-call-logged",label:"Voice - Log a Call",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",bodyClassName:"slds-docked-composer__body_form",header:"Lei Chan",footer:a().createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Save")},a().createElement("fieldset",{className:"slds-form-element slds-form_compound"},a().createElement("legend",{className:"slds-assistive-text"},"Log a call"),a().createElement("div",{className:"slds-form-element__control"},a().createElement("div",{className:"slds-form-element__group"},a().createElement("div",{className:"slds-form-element__row"},a().createElement("div",{className:"slds-form-element slds-size_1-of-1"},a().createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-01"},"Subject"),a().createElement("div",{className:"slds-form-element__control"},a().createElement("input",{className:"slds-input",type:"text",id:"text-input-01"})))),a().createElement("div",{className:"slds-form-element__row"},a().createElement("div",{className:"slds-form-element slds-size_1-of-1"},a().createElement("label",{className:"slds-form-element__label",htmlFor:"textarea-input-01"},"Comments"),a().createElement("div",{className:"slds-form-element__control"},a().createElement("textarea",{className:"slds-textarea",id:"textarea-input-01"})))),a().createElement("div",{className:"slds-form-element__row"},a().createElement(z.H_,{formClassName:"slds-size_1-of-2",autocomplete:!0,label:"Name",placeholder:"Search Leads",inputIcon:"right",inputIconRightSymbol:"search",objectSwitcher:!0,objectSwitcherInline:!0,"aria-controls":"listbox-id-01",listbox:a().createElement(G,{id:"listbox-id-01",listboxOptionId:"listbox-option-id-1"})}),a().createElement(z.H_,{formClassName:"slds-size_1-of-2",autocomplete:!0,label:"Name",placeholder:"Search Accounts",inputIcon:"right",inputIconRightSymbol:"search",objectSwitcher:!0,objectSwitcherInline:!0,"aria-controls":"listbox-id-02",listbox:a().createElement(G,{id:"listbox-id-02",listboxOptionId:"listbox-option-id-2"})})))))))},{id:"email",label:"Email Composer",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",header:"New Email",headerSymbol:"email",footer:a().createElement(W,null)},a().createElement("div",{className:"slds-email-composer"},a().createElement(z.H_,{id:"recipients-to",formClassName:"slds-email-composer__combobox",selectedOptionsInline:!0,label:"To",placeholder:" ",autocomplete:!0,"aria-controls":"listbox-id-01",listbox:a().createElement(G,{id:"listbox-id-01",listboxOptionId:"listbox-option-id-1"})},a().createElement(D.IK,null,a().createElement(D.j9,null,a().createElement(D.$P,{label:"jrogers@cloudhub.com",tabIndex:"0"},a().createElement(i.eu,{className:"slds-avatar_x-small slds-pill__icon_container"},a().createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"})))))),a().createElement(z.H_,{id:"recipients-bcc",formClassName:"slds-email-composer__combobox",selectedOptionsInline:!0,label:"Bcc",placeholder:" ",autocomplete:!0,"aria-controls":"listbox-id-02",listbox:a().createElement(G,{id:"listbox-id-02",listboxOptionId:"listbox-option-id-2"})}),a().createElement(z.H_,{id:"recipients-cc",formClassName:"slds-email-composer__combobox",selectedOptionsInline:!0,label:"Cc",placeholder:" ",autocomplete:!0,"aria-controls":"listbox-id-03",listbox:a().createElement(G,{id:"listbox-id-03",listboxOptionId:"listbox-option-id-3"})}),a().createElement(N.ZS,{labelContent:"Enter subject",hasHiddenLabel:!0,inputId:"input-subject-01"},a().createElement(g.A,{id:"input-subject-01",className:"slds-input_bare",placeholder:"Enter Subject"})),a().createElement(A,null,a().createElement(k,null,a().createElement(T,null),a().createElement(O,{tabIndexSetting:"-1"}),a().createElement(L,null),a().createElement(j,null),a().createElement(B,null),a().createElement(F,null),a().createElement(V,null)),a().createElement(P,{placeholder:"Compose Email..."})))))}],$=n.XB.code,Z=n.XB.h2,K=n.XB.h3,ee=n.XB.h4,te=n.XB.h5,le=n.XB.p,se=function(){return(0,s.createElement)(n.Ay,{},(0,s.createElement)("div",{className:"doc lead"},"Docked Composer is a persistent utility bar that allows a user to continually use the app to complete tasks or gather information while expanding/collapsing a composer window."),(0,s.createElement)(o.A,{exampleOnly:!0,isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"voice-composer-connected")),Z({id:"About-Docked-Composer"},"About Docked Composer"),K({id:"Implementation"},"Implementation"),le({},"The docked composer relies heavily on utility classes to piece together the layout so please pay close attention to the markup and classes."),le({},"The overflow menu for docked composer, ",$({},".slds-docked-composer_overflow"),", displays when the number of docked composers exceeds the width of the viewport. The overflow pill displays with a number indicator for all hidden docked composers. A user can invoke a popover with all available docked composers and replace the furthest left docked composer with the one being selected."),le({},'When a user clicks on the "pop out" icon in the ',$({},".slds-docked-composer__header"),", a modal displays and contains the task that was currently in the docked composer."),Z({id:"Base"},"Base"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(J)),K({id:"States"},"States"),ee({id:"OpenFocused"},"Open/Focused"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Y,"single-composer-focused")),ee({id:"Closed"},"Closed"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Y,"single-composer-closed")),ee({id:"ClosedFocused"},"Closed/Focused"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Y,"single-composer-closed-focused")),ee({id:"Popped-out"},"Popped out"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Y,"single-composer-popout")),ee({id:"With-overflow-menu"},"With overflow menu"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Y,"multiple-composer-overflow")),K({id:"Examples"},"Examples"),ee({id:"Log-a-task"},"Log a task"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"task")),ee({id:"Email-Composer"},"Email Composer"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"email")),ee({id:"Voice"},"Voice"),te({id:"Queued"},"Queued"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"voice-composer-queued")),te({id:"Ringing"},"Ringing"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"voice-composer-ringing")),te({id:"Connected"},"Connected"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"voice-composer-connected")),te({id:"Cancelled"},"Cancelled"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"voice-composer-cancelled")),te({id:"Busy"},"Busy"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"voice-composer-busy")),te({id:"Call-Failed"},"Call Failed"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"voice-composer-failed")),te({id:"No-Answer"},"No Answer"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"voice-composer-no-answer")),te({id:"Call-Finished"},"Call Finished"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"voice-composer-call-finished")),te({id:"Call-Incoming"},"Call Incoming"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"voice-composer-call-incoming")),te({id:"Call-Logged"},"Call Logged"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"voice-composer-call-logged")))},ae=function(){return(0,n.Qr)(se())}},1981:function(e){e.exports=JSBeautify},1594:function(e){e.exports=React},5206:function(e){e.exports=ReactDOM}},a={};function n(e){var t=a[e];if(void 0!==t)return t.exports;var l=a[e]={id:e,exports:{}};return s[e](l,l.exports,n),l.exports}n.m=s,n.amdO={},e=[],n.O=function(t,l,s,a){if(!l){var o=1/0;for(c=0;c<e.length;c++){l=e[c][0],s=e[c][1],a=e[c][2];for(var i=!0,r=0;r<l.length;r++)1&a&&!(o>=a)\|\|!Object.keys(n.O).every(function(e){return n.O[e](l[r])})?(i=!1,a<o&&(o=a)):l.splice(r--,1);if(i){e.splice(c--,1);var d=s();void 0!==d&&(t=d)}}return t}a=a\|\|0;for(var c=e.length;c>0&&e[c-1][2]>a;c--)e[c]=e[c-1];e[c]=[l,s,a]},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.cw=function(e){var t;return function(){if(e){var l=e;e=0,t={exports:{}},l.call(t.exports,t,t.exports)}return t.exports}},l=Object.getPrototypeOf,n.t=function(e,s){if(1&s&&(e=this(e)),8&s)return e;if("object"==typeof e&&e){if(4&s&&e.__esModule)return e;if(16&s&&"function"==typeof e.then)return e}var a=Object.create(null);n.r(a);var o={};t=t\|\|[null,l({}),l([]),l(l)];for(var i=2&s&&e;("object"==typeof i\|\|"function"==typeof i)&&!~t.indexOf(i);i=l(i))Object.getOwnPropertyNames(i).forEach(function(t){o[t]=function(){return e[t]}});return o.default=function(){return e},n.d(a,o),a},n.d=function(e,t){for(var l in t)n.o(t,l)&&!n.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},n.e=function(){return Promise.resolve()},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.j=3308,function(){var e={3308:0};n.O.j=function(t){return 0===e[t]};var t=function(t,l){var s,a,o=l[0],i=l[1],r=l[2],d=0;if(o.some(function(t){return 0!==e[t]})){for(s in i)n.o(i,s)&&(n.m[s]=i[s]);if(r)var c=r(n)}for(t&&t(l);d<o.length;d++)a=o[d],n.o(e,a)&&e[a]&&e[a][0](),e[a]=0;return n.O(c)},l=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),n.nc=void 0;var o=n.O(void 0,[3540],function(){return n(652)});o=n.O(o),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/docked-composer/docs.mdx.js"]=o}();
1	+ var SLDS;!function(){"use strict";var e,t,l,s={652:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return ae},getElement:function(){return se}});var s=l(1594),a=l.n(s),n=l(5671),o=l(6547),i=(l(7675),l(5619),l(2937)),r=l(6955),d=l(4760),c=l(1766),m=l(1412),u=l(4187),b=l.n(u),p=l(8347),_=l(5159),E=l(3964),h=l(6185),f=(l(9533),l(538)),N=l(2711),g=l(5526),v=l(1369),x=l.n(v),y=l(6482);function w(e,t){return function(e){if(Array.isArray(e))return e}(e)\|\|function(e,t){var l=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]\|\|e["@@iterator"];if(null!=l){var s,a,n,o,i=[],r=!0,d=!1;try{if(n=(l=l.call(e)).next,0===t){if(Object(l)!==l)return;r=!1}else for(;!(r=(s=n.call(l)).done)&&(i.push(s.value),i.length!==t);r=!0);}catch(e){d=!0,a=e}finally{try{if(!r&&null!=l.return&&(o=l.return(),Object(o)!==o))return}finally{if(d)throw a}}return i}}(e,t)\|\|function(e,t){if(e){if("string"==typeof e)return C(e,t);var l={}.toString.call(e).slice(8,-1);return"Object"===l&&e.constructor&&(l=e.constructor.name),"Map"===l\|\|"Set"===l?Array.from(e):"Arguments"===l\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(l)?C(e,t):void 0}}(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 C(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var l=0,s=Array(t);l<t;l++)s[l]=e[l];return s}var A=function(e){return a().createElement(N.ZS,{labelId:e.labelId,labelContent:e.label,inlineMessage:e.inlineMessage,hasError:e.hasError,errorId:e.errorId,hasFauxLabel:!0},a().createElement("div",{className:x()("slds-rich-text-editor slds-grid slds-grid_vertical slds-nowrap",e.isToolbarOnly&&"slds-rich-text-editor_toolbar-only",e.className),"aria-label":e.disabledLabel},e.children))};A.propTypes={children:b().node.isRequired,errorId:b().string,hasError:b().bool,inlineMessage:b().string,labelContent:b().string,labelId:b().string};var k=function(e){return a().createElement("div",{role:"toolbar","aria-label":e.disabledLabel,className:x()("slds-rich-text-editor__toolbar slds-shrink-none",e.isToolbarOnly&&"slds-rich-text-editor__toolbar_detached",e.className)},e.children)},I=function(e){var t=e.listboxData,l=e.id;return a().createElement(h.Ay,{id:l,snapshot:t,type:"plain",count:3,hideIcons:!0,className:"slds-dropdown_fluid slds-dropdown_left"})};I.propTypes={listboxData:b().object.isRequired,id:b().string};var S=function(e){var t=e.listboxData,l=e.id;return a().createElement(h.Ay,{id:l,snapshot:t,type:"plain",count:6,hideIcons:!0,className:"slds-dropdown_fluid slds-dropdown_left"})};S.propTypes={listboxData:b().object.isRequired,id:b().string};var T=function(e){var t=w((0,s.useState)(y.Ay.uniqueId("example-unique-id-")),1)[0],l=w((0,s.useState)(y.Ay.uniqueId("example-unique-id-")),1)[0],n=w((0,s.useState)(y.Ay.uniqueId("example-unique-id-")),1)[0],o=w((0,s.useState)(y.Ay.uniqueId("example-unique-id-")),1)[0];return a().createElement("div",{className:"slds-grid slds-rich-text-editor__spacing-wrapper",role:"group","aria-label":"Format font family & size"},a().createElement("div",{className:"slds-rich-text-editor__select"},a().createElement(_.Ay,{id:t,"aria-controls":l,label:"Choose a Font",hideLabel:!0,inputContainerClassName:"slds-rich-text-editor__select_x-small",inputIconPosition:"right",rightInputIcon:a().createElement(f.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:a().createElement(I,{listboxData:E.kz,id:l}),resultsType:"listbox",hasInteractions:!0,selectOnly:!0,value:"Font"})),a().createElement("div",{className:"slds-rich-text-editor__select"},a().createElement(_.Ay,{id:n,"aria-controls":o,label:"Choose a Font Size",hideLabel:!0,inputContainerClassName:"slds-rich-text-editor__select_xx-small",inputIconPosition:"right",rightInputIcon:a().createElement(f.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:a().createElement(S,{listboxData:E.TU,id:o}),resultsType:"listbox",hasInteractions:!0,selectOnly:!0,value:"Size",tabIndex:"-1"})))},O=function(e){return a().createElement(m.GW,{"aria-label":"Format text"},a().createElement("li",null,a().createElement(r.A,{className:"slds-button_icon-border-filled",symbol:"bold",tabIndex:e.tabIndexSetting,"aria-describedby":e.hasTooltip?"bold":null,disabled:e.disabledButtons,assistiveText:"Bold"})),a().createElement("li",null,a().createElement(r.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"italic",disabled:e.disabledButtons,assistiveText:"Italic"})),a().createElement("li",null,a().createElement(r.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"underline",disabled:e.disabledButtons,assistiveText:"Underline"})),a().createElement("li",null,a().createElement(r.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"strikethrough",disabled:e.disabledButtons,assistiveText:"Strike Through"})))},L=function(e){return a().createElement(m.GW,{"aria-label":"Format background & text color"},a().createElement("li",null,a().createElement("button",{tabIndex:"-1",disabled:e.disabledButtons,className:"slds-button slds-button_icon slds-button_icon-more slds-button_icon-more-filled","aria-haspopup":"true"},a().createElement(p.A,{className:"slds-button__icon",sprite:"utility",symbol:"text_background_color"}),a().createElement(p.A,{className:"slds-button__icon slds-button__icon_x-small",sprite:"utility",symbol:"down"}),a().createElement("span",{className:"slds-assistive-text"},"Background Color"))),a().createElement("li",null,a().createElement("button",{tabIndex:"-1",disabled:e.disabledButtons,className:"slds-button slds-button_icon slds-button_icon-more slds-button_icon-more-filled","aria-haspopup":"true"},a().createElement(p.A,{className:"slds-button__icon",sprite:"utility",symbol:"text_color"}),a().createElement(p.A,{className:"slds-button__icon slds-button__icon_x-small",sprite:"utility",symbol:"down"}),a().createElement("span",{className:"slds-assistive-text"},"Text Color"))))},j=function(e){return a().createElement(m.GW,{"aria-label":"Format body"},a().createElement("li",null,a().createElement(r.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextbulletedlist",disabled:e.disabledButtons,assistiveText:"Bulleted List"})),a().createElement("li",null,a().createElement(r.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextnumberedlist",disabled:e.disabledButtons,assistiveText:"Numbered List"})),a().createElement("li",null,a().createElement(r.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextindent",disabled:e.disabledButtons,assistiveText:"Indent"})),a().createElement("li",null,a().createElement(r.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextoutdent",disabled:e.disabledButtons,assistiveText:"Outdent"})))},B=function(e){return a().createElement(m.GW,{"aria-label":"Align text"},a().createElement("li",null,a().createElement(r.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"left_align_text",disabled:e.disabledButtons,assistiveText:"Left Align Text"})),a().createElement("li",null,a().createElement(r.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"center_align_text",disabled:e.disabledButtons,assistiveText:"Center Align Text"})),a().createElement("li",null,a().createElement(r.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"right_align_text",disabled:e.disabledButtons,assistiveText:"Right Align Text"})))},F=function(e){return a().createElement(m.GW,{role:e.overflow?"presentation":null,"aria-label":e.overflow?null:"Insert content"},a().createElement("li",{role:e.overflow?"presentation":null},a().createElement(r.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"emoji",disabled:e.disabledButtons,assistiveText:"Add Emoji"})),a().createElement("li",{role:e.overflow?"presentation":null},a().createElement(r.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"image",disabled:e.disabledButtons,assistiveText:"Add Image"})),a().createElement("li",{role:e.overflow?"presentation":null},a().createElement(r.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"link",disabled:e.disabledButtons,assistiveText:"Add Link"})))},V=function(e){return a().createElement(m.GW,{role:e.overflow?"presentation":null,"aria-label":e.overflow?null:"Remove Formatting"},a().createElement("li",{role:e.overflow?"presentation":null},a().createElement(r.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"remove_formatting",disabled:e.disabledButtons,assistiveText:"Remove Formatting"})))},P=function(e){return a().createElement("div",{className:x()(e.text?"slds-rich-text-editor__output":"slds-rich-text-editor__textarea","slds-grid")},e.text?a().createElement("div",{"aria-describedby":e["aria-describedby"],"aria-label":e.labelId?null:"Compose text","aria-labelledby":e.labelId,contentEditable:e.disabled?null:"true",suppressContentEditableWarning:!0,className:"slds-rich-text-area__content slds-grow"},e.text):a().createElement("div",{"aria-describedby":e["aria-describedby"],"aria-label":e.labelId?null:e.label\|\|"Compose text","aria-labelledby":e.labelId,contentEditable:e.disabled?null:"true",suppressContentEditableWarning:!0,className:"slds-rich-text-area__content slds-text-color_weak slds-grow"},e.placeholder))},z=l(7705),D=l(3106),M="dialog-heading-id-1",q="dialog-content-id-1",R=[{entity:"email",title:"Agenda for next week"},{entity:"call",title:"Lei Chan"},{entity:"task",title:"August 14 Meeting Notes"}],H=function(e){return a().createElement("div",{className:"slds-col_bump-left slds-text-align_right"},a().createElement("button",{className:"slds-button slds-button_brand"},"Action"))},W=function(e){return a().createElement("div",{className:"slds-col_bump-left slds-grid slds-grid_vertical-align-center"},a().createElement("div",{className:"slds-grid slds-m-right_small",role:"toolbar"},a().createElement("ul",{className:"slds-grid","aria-label":"Insert content"},a().createElement("li",null,a().createElement(r.A,{className:"slds-button_icon-small",symbol:"link",assistiveText:"Attach File",title:"Attach File"})),a().createElement("li",null,a().createElement(r.A,{className:"slds-button_icon-small",symbol:"insert_template",assistiveText:"Insert Template",title:"Insert Template",tabIndex:"-1"})),a().createElement("li",null,a().createElement(r.A,{className:"slds-button_icon-small",symbol:"insert_tag_field",assistiveText:"Insert HTML",title:"Insert HTML",tabIndex:"-1"}))),a().createElement(r.A,{className:"slds-button_icon-small",symbol:"preview",assistiveText:"Preview",title:"Preview",tabIndex:"-1"})),a().createElement("button",{className:"slds-button slds-button_brand"},"Send"))},X=function(e){return a().createElement("section",{className:x()("slds-docked-composer slds-grid slds-grid_vertical",e.className,e.dialogClosed?"slds-is-closed":null),role:e.nestedDialog?null:"dialog","aria-labelledby":e.nestedDialog?null:M,"aria-describedby":e.nestedDialog?null:q},a().createElement("header",{className:"slds-docked-composer__header slds-grid slds-shrink-none","aria-live":"assertive"},a().createElement("div",{className:"slds-media slds-media_center slds-no-space"},a().createElement("div",{className:"slds-media__figure slds-m-right_x-small"},a().createElement("span",{className:"slds-icon_container"},a().createElement(p.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"standard",symbol:e.headerSymbol\|\|"call"}))),a().createElement("div",{className:"slds-media__body"},e.dialogClosed?a().createElement("span",{className:"slds-assistive-text"},"Minimized"):null,a().createElement("h2",{className:"slds-truncate",id:M,title:e.header\|\|"Header"},e.header\|\|"Header"))),a().createElement("div",{className:"slds-col_bump-left slds-shrink-none"},a().createElement(r.A,{className:"slds-button_icon",symbol:"minimize_window",assistiveText:"Minimize Composer Panel",title:"Minimize window"}),a().createElement(r.A,{className:"slds-button_icon",symbol:"expand_alt",assistiveText:"Expand Composer Panel",title:"Expand Composer"}),a().createElement(r.A,{className:"slds-button_icon",symbol:"close",assistiveText:"Close Composer Panel",title:"Close"}))),a().createElement("div",{className:x()("slds-docked-composer__body",e.bodyClassName),id:q},e.children),e.footer?a().createElement("footer",{className:x()("slds-docked-composer__footer slds-shrink-none",e.footerClassName)},e.footer):null)},U=function(e){return a().createElement("div",{className:"slds-docked-composer slds-docked-composer_overflow"},a().createElement("button",{className:"slds-button slds-button_icon slds-docked-composer_overflow__button","aria-haspopup":"true"},a().createElement(p.A,{className:"slds-button__icon",sprite:"utility",symbol:"standard_objects"}),a().createElement("span",{className:"slds-text-body_small slds-m-left_xx-small"},"3 ",a().createElement("span",{className:"slds-assistive-text"},"other docked composer panels"))),a().createElement(d.W1,{className:"slds-dropdown_left slds-dropdown_bottom slds-dropdown_medium slds-nubbin_bottom-left"},a().createElement(d.cO,{className:"slds-dropdown_length-with-icon-7"},y.Ay.times(R.length,function(e){return a().createElement(d.Dr,{key:e,title:R[e].title},a().createElement("span",{className:"slds-icon_container slds-icon-standard-"+R[e].entity+" slds-m-right_x-small"},a().createElement(p.A,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:R[e].entity}),a().createElement("span",{className:"slds-assistive-text"},R[e].entity)),R[e].title)}))))},G=function(e){return a().createElement(z.NC,{listboxClassName:"slds-dropdown slds-dropdown_fluid",vertical:!0,id:e.id},a().createElement(z.Oh,null,a().createElement(z.q9,{id:e.listboxOptionId,entityTitle:"Acme",entityMeta:!0})))},J=[{id:"default",label:"Default",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",footer:a().createElement(H,null)},a().createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a().createElement("br",null)," This area consumes the feature")))}],Y=[{id:"single-composer-open",label:"Open",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",footer:a().createElement(H,null)},a().createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a().createElement("br",null)," This area consumes the feature")))},{id:"single-composer-focused",label:"Focused",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open slds-has-focus",footer:a().createElement(H,null)},a().createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a().createElement("br",null)," This area consumes the feature")))},{id:"single-composer-closed",label:"Closed",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{dialogClosed:!0,footer:a().createElement(H,null)},a().createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a().createElement("br",null)," This area consumes the feature")))},{id:"single-composer-closed-focused",label:"Closed Focused",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-has-focus",dialogClosed:!0,footer:a().createElement(H,null)},a().createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a().createElement("br",null)," This area consumes the feature")))},{id:"single-composer-popout",label:"Popout",element:a().createElement(c.zs,null,a().createElement(c.aF,{className:"slds-docked-composer-modal","aria-labelledby":M,"aria-describedby":q,closeButton:!1},a().createElement(c.$m,{id:"modal-content-id"},a().createElement(X,{footer:a().createElement(H,null),nestedDialog:!0},a().createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a().createElement("br",null)," This area consumes the feature")))))},{id:"multiple-composer-overflow",label:"With Overflow Menu",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(U,null),a().createElement(X,{className:"slds-is-open",footer:a().createElement(H,null)},a().createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a().createElement("br",null)," This area consumes the feature")))}],Q=[{id:"task",label:"Log a Task",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",bodyClassName:"slds-docked-composer__body_form",header:"New Task",headerSymbol:"task",footer:a().createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Save")},a().createElement("fieldset",{className:"slds-form-element slds-form_compound"},a().createElement("legend",{className:"slds-assistive-text"},"Log new task"),a().createElement("div",{className:"slds-form-element__control"},a().createElement("div",{className:"slds-form-element__group"},a().createElement("div",{className:"slds-form-element__row"},a().createElement("div",{className:"slds-form-element slds-size_1-of-1"},a().createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-01"},"Subject"),a().createElement("div",{className:"slds-form-element__control"},a().createElement("input",{className:"slds-input",type:"text",id:"text-input-01"})))),a().createElement("div",{className:"slds-form-element__row"},a().createElement("div",{className:"slds-form-element slds-size_1-of-2"},a().createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-02"},"Assigned To"),a().createElement("div",{className:"slds-form-element__control"},a().createElement("input",{className:"slds-input",type:"text",id:"text-input-02"}))),a().createElement("div",{className:"slds-form-element slds-size_1-of-2"},a().createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-03"},"Due Dates"),a().createElement("div",{className:"slds-form-element__control"},a().createElement("input",{className:"slds-input",type:"text",id:"text-input-03"})))),a().createElement("div",{className:"slds-form-element__row"},a().createElement(z.H_,{formClassName:"slds-size_1-of-2",autocomplete:!0,label:"Name",placeholder:"Search Leads",inputIcon:"right",inputIconRightSymbol:"search",objectSwitcher:!0,objectSwitcherInline:!0,"aria-controls":"listbox-id-01",listbox:a().createElement(G,{id:"listbox-id-01",listboxOptionId:"listbox-option-id-1"})}),a().createElement(z.H_,{formClassName:"slds-size_1-of-2",autocomplete:!0,label:"Name",placeholder:"Search Accounts",inputIcon:"right",inputIconRightSymbol:"search",objectSwitcher:!0,objectSwitcherInline:!0,"aria-controls":"listbox-id-02",listbox:a().createElement(G,{id:"listbox-id-02",listboxOptionId:"listbox-option-id-2"})})))))))},{id:"voice-composer-queued",label:"Voice - Queued",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Connecting...",footer:a().createElement("button",{className:"slds-button slds-button_destructive slds-size_1-of-1"},"End Call")},a().createElement("div",{className:"slds-text-align_center slds-align-middle"},a().createElement("span",{className:"slds-avatar slds-avatar_large"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a().createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation")),a().createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Connecting..."))))},{id:"voice-composer-ringing",label:"Voice - Ringing",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Dialing...",footer:a().createElement("button",{className:"slds-button slds-button_destructive slds-size_1-of-1"},"End Call")},a().createElement("div",{className:"slds-text-align_center slds-align-middle"},a().createElement("span",{className:"slds-avatar slds-avatar_large"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a().createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation")),a().createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Dialing..."))))},{id:"voice-composer-connected",label:"Voice - Connected",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",header:"Lei Chan - Call in Progress",footer:a().createElement("button",{className:"slds-button slds-button_destructive slds-col_bump-left"},"End Call")},a().createElement("div",{className:"slds-docked-composer__lead"},a().createElement("div",{className:"slds-media"},a().createElement("div",{className:"slds-media__figure"},a().createElement("span",{className:"slds-avatar slds-avatar_medium"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"}))),a().createElement("div",{className:"slds-media__body"},a().createElement("p",{className:"slds-text-heading_medium"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation")))),a().createElement("p",{className:"slds-col_bump-left slds-text-heading_large"},"5:37")),a().createElement("div",{className:"slds-docked-composer__toolbar"},a().createElement(r.A,{className:"slds-button_icon-border-filled slds-button_icon-small",symbol:"unmuted",assistiveText:"Mute Yourself",title:"Mute Yourself","aria-pressed":"false"})),a().createElement("label",{className:"slds-assistive-text",htmlFor:"composer-text-input-1"},"Take notes"),a().createElement("textarea",{id:"composer-text-input-1",className:"slds-docked-composer__input slds-input_bare slds-text-longform slds-grow",placeholder:"Jot down notes here..."})))},{id:"voice-composer-cancelled",label:"Voice - Cancelled",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Cancelling..."},a().createElement("div",{className:"slds-text-align_center slds-align-middle"},a().createElement("span",{className:"slds-avatar slds-avatar_large"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a().createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation")),a().createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Cancelling..."))))},{id:"voice-composer-busy",label:"Voice - Busy",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Busy",footer:[a().createElement("button",{className:"slds-button slds-button_neutral slds-size_1-of-2",key:y.Ay.uniqueId("follow-up-")},"Follow-Up Later"),a().createElement("button",{className:"slds-button slds-button_brand slds-size_1-of-2",key:y.Ay.uniqueId("call-again-")},"Call Again")]},a().createElement("div",{className:"slds-text-align_center slds-align-middle"},a().createElement("span",{className:"slds-avatar slds-avatar_large"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a().createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation")),a().createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Busy"))))},{id:"voice-composer-failed",label:"Voice - Call Failed",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Call Failed",footer:[a().createElement("button",{className:"slds-button slds-button_neutral slds-size_1-of-2",key:y.Ay.uniqueId("follow-up-")},"Edit Phone Number"),a().createElement("button",{className:"slds-button slds-button_brand slds-size_1-of-2",key:y.Ay.uniqueId("call-again-")},"Call Again")]},a().createElement("div",{className:"slds-text-align_center slds-align-middle"},a().createElement("span",{className:"slds-avatar slds-avatar_large"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a().createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation")),a().createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Call Failed"))))},{id:"voice-composer-no-answer",label:"Voice - No Answer",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - No Answer",footer:[a().createElement("button",{className:"slds-button slds-button_neutral slds-size_1-of-2",key:y.Ay.uniqueId("follow-up-")},"Follow-Up Later"),a().createElement("button",{className:"slds-button slds-button_brand slds-size_1-of-2",key:y.Ay.uniqueId("call-again-")},"Call Again")]},a().createElement("div",{className:"slds-text-align_center slds-align-middle"},a().createElement("span",{className:"slds-avatar slds-avatar_large"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a().createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation")),a().createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"No Answer"))))},{id:"voice-composer-call-finished",label:"Voice - Call Finished",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",header:"Lei Chan - Call Finished",footer:a().createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Finish Notes")},a().createElement("div",{className:"slds-docked-composer__lead"},a().createElement("div",{className:"slds-media"},a().createElement("div",{className:"slds-media__figure"},a().createElement("span",{className:"slds-avatar slds-avatar_medium"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"}))),a().createElement("div",{className:"slds-media__body"},a().createElement("p",{className:"slds-text-heading_medium"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation"))))),a().createElement("div",{className:"slds-docked-composer__toolbar"},a().createElement(r.A,{className:"slds-button_icon-border-filled slds-button_icon-small",symbol:"unmuted",assistiveText:"Mute Yourself",title:"Mute Yourself","aria-pressed":"false"})),a().createElement("label",{className:"slds-assistive-text",htmlFor:"composer-text-input-1"},"Take notes"),a().createElement("textarea",{id:"composer-text-input-1",className:"slds-docked-composer__input slds-input_bare slds-text-longform slds-grow",placeholder:"Jot down notes here..."})))},{id:"voice-composer-call-incoming",label:"Voice - Call Incoming",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center slds-size_1-of-1",header:"Lei Chan - Incoming Call...",footer:a().createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Finish Notes")},a().createElement("div",{className:"slds-text-align_center slds-align-middle"},a().createElement("span",{className:"slds-avatar slds-avatar_large"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a().createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation")),a().createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"(416) 555-1234")),a().createElement("div",{className:"slds-p-horizontal_x-small slds-text-align_left slds-size_1-of-1"},a().createElement("h3",{className:"slds-m-bottom_x-small"},"Recent Activity"),a().createElement("ul",{className:"slds-has-dividers_around-space"},a().createElement("li",{className:"slds-item slds-theme_shade slds-grid"},a().createElement("span",{className:"slds-icon_container slds-icon-standard-task slds-m-right_x-small"},a().createElement(p.A,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"task"}),a().createElement("span",{className:"slds-assistive-text"},"Task")),"Discussed New Pricing Models",a().createElement("span",{className:"slds-col_bump-left"},"Yesterday")),a().createElement("li",{className:"slds-item slds-theme_shade slds-grid"},a().createElement("span",{className:"slds-icon_container slds-icon-standard-email slds-m-right_x-small"},a().createElement(p.A,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"email"}),a().createElement("span",{className:"slds-assistive-text"},"Email")),"Re: Updated Proposals",a().createElement("span",{className:"slds-col_bump-left"},"4 Hours Ago")),a().createElement("li",{className:"slds-item slds-theme_shade slds-grid"},a().createElement("span",{className:"slds-icon_container slds-icon-standard-note slds-m-right_x-small"},a().createElement(p.A,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"note"}),a().createElement("span",{className:"slds-assistive-text"},"Note")),"Discuss Slides for Nov EBC",a().createElement("span",{className:"slds-col_bump-left"},"2 Days Ago"))))))},{id:"voice-composer-call-logged",label:"Voice - Log a Call",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",bodyClassName:"slds-docked-composer__body_form",header:"Lei Chan",footer:a().createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Save")},a().createElement("fieldset",{className:"slds-form-element slds-form_compound"},a().createElement("legend",{className:"slds-assistive-text"},"Log a call"),a().createElement("div",{className:"slds-form-element__control"},a().createElement("div",{className:"slds-form-element__group"},a().createElement("div",{className:"slds-form-element__row"},a().createElement("div",{className:"slds-form-element slds-size_1-of-1"},a().createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-01"},"Subject"),a().createElement("div",{className:"slds-form-element__control"},a().createElement("input",{className:"slds-input",type:"text",id:"text-input-01"})))),a().createElement("div",{className:"slds-form-element__row"},a().createElement("div",{className:"slds-form-element slds-size_1-of-1"},a().createElement("label",{className:"slds-form-element__label",htmlFor:"textarea-input-01"},"Comments"),a().createElement("div",{className:"slds-form-element__control"},a().createElement("textarea",{className:"slds-textarea",id:"textarea-input-01"})))),a().createElement("div",{className:"slds-form-element__row"},a().createElement(z.H_,{formClassName:"slds-size_1-of-2",autocomplete:!0,label:"Name",placeholder:"Search Leads",inputIcon:"right",inputIconRightSymbol:"search",objectSwitcher:!0,objectSwitcherInline:!0,"aria-controls":"listbox-id-01",listbox:a().createElement(G,{id:"listbox-id-01",listboxOptionId:"listbox-option-id-1"})}),a().createElement(z.H_,{formClassName:"slds-size_1-of-2",autocomplete:!0,label:"Name",placeholder:"Search Accounts",inputIcon:"right",inputIconRightSymbol:"search",objectSwitcher:!0,objectSwitcherInline:!0,"aria-controls":"listbox-id-02",listbox:a().createElement(G,{id:"listbox-id-02",listboxOptionId:"listbox-option-id-2"})})))))))},{id:"email",label:"Email Composer",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(X,{className:"slds-is-open",header:"New Email",headerSymbol:"email",footer:a().createElement(W,null)},a().createElement("div",{className:"slds-email-composer"},a().createElement(z.H_,{id:"recipients-to",formClassName:"slds-email-composer__combobox",selectedOptionsInline:!0,label:"To",placeholder:" ",autocomplete:!0,"aria-controls":"listbox-id-01",listbox:a().createElement(G,{id:"listbox-id-01",listboxOptionId:"listbox-option-id-1"})},a().createElement(D.IK,null,a().createElement(D.j9,null,a().createElement(D.$P,{label:"jrogers@cloudhub.com",tabIndex:"0"},a().createElement(i.eu,{className:"slds-avatar_x-small slds-pill__icon_container"},a().createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"})))))),a().createElement(z.H_,{id:"recipients-bcc",formClassName:"slds-email-composer__combobox",selectedOptionsInline:!0,label:"Bcc",placeholder:" ",autocomplete:!0,"aria-controls":"listbox-id-02",listbox:a().createElement(G,{id:"listbox-id-02",listboxOptionId:"listbox-option-id-2"})}),a().createElement(z.H_,{id:"recipients-cc",formClassName:"slds-email-composer__combobox",selectedOptionsInline:!0,label:"Cc",placeholder:" ",autocomplete:!0,"aria-controls":"listbox-id-03",listbox:a().createElement(G,{id:"listbox-id-03",listboxOptionId:"listbox-option-id-3"})}),a().createElement(N.ZS,{labelContent:"Enter subject",hasHiddenLabel:!0,inputId:"input-subject-01"},a().createElement(g.A,{id:"input-subject-01",className:"slds-input_bare",placeholder:"Enter Subject"})),a().createElement(A,null,a().createElement(k,null,a().createElement(T,null),a().createElement(O,{tabIndexSetting:"-1"}),a().createElement(L,null),a().createElement(j,null),a().createElement(B,null),a().createElement(F,null),a().createElement(V,null)),a().createElement(P,{placeholder:"Compose Email..."})))))}],$=n.XB.code,Z=n.XB.h2,K=n.XB.h3,ee=n.XB.h4,te=n.XB.h5,le=n.XB.p,se=function(){return(0,s.createElement)(n.Ay,{},(0,s.createElement)("div",{className:"doc lead"},"Docked Composer is a persistent utility bar that allows a user to continually use the app to complete tasks or gather information while expanding/collapsing a composer window."),(0,s.createElement)(o.A,{exampleOnly:!0,isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"voice-composer-connected")),Z({id:"About-Docked-Composer"},"About Docked Composer"),K({id:"Implementation"},"Implementation"),le({},"The docked composer relies heavily on utility classes to piece together the layout so please pay close attention to the markup and classes."),le({},"The overflow menu for docked composer, ",$({},".slds-docked-composer_overflow"),", displays when the number of docked composers exceeds the width of the viewport. The overflow pill displays with a number indicator for all hidden docked composers. A user can invoke a popover with all available docked composers and replace the furthest left docked composer with the one being selected."),le({},'When a user clicks on the "pop out" icon in the ',$({},".slds-docked-composer__header"),", a modal displays and contains the task that was currently in the docked composer."),Z({id:"Base"},"Base"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(J)),K({id:"States"},"States"),ee({id:"OpenFocused"},"Open/Focused"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Y,"single-composer-focused")),ee({id:"Closed"},"Closed"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Y,"single-composer-closed")),ee({id:"ClosedFocused"},"Closed/Focused"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Y,"single-composer-closed-focused")),ee({id:"Popped-out"},"Popped out"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Y,"single-composer-popout")),ee({id:"With-overflow-menu"},"With overflow menu"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Y,"multiple-composer-overflow")),K({id:"Examples"},"Examples"),ee({id:"Log-a-task"},"Log a task"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"task")),ee({id:"Email-Composer"},"Email Composer"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"email")),ee({id:"Voice"},"Voice"),te({id:"Queued"},"Queued"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"voice-composer-queued")),te({id:"Ringing"},"Ringing"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"voice-composer-ringing")),te({id:"Connected"},"Connected"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"voice-composer-connected")),te({id:"Cancelled"},"Cancelled"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"voice-composer-cancelled")),te({id:"Busy"},"Busy"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"voice-composer-busy")),te({id:"Call-Failed"},"Call Failed"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"voice-composer-failed")),te({id:"No-Answer"},"No Answer"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"voice-composer-no-answer")),te({id:"Call-Finished"},"Call Finished"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"voice-composer-call-finished")),te({id:"Call-Incoming"},"Call Incoming"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"voice-composer-call-incoming")),te({id:"Call-Logged"},"Call Logged"),(0,s.createElement)(o.A,{isViewport:!0,demoStyles:"height: 500px; min-width: 615px; overflow: hidden;"},(0,y.NO)(Q,"voice-composer-call-logged")))},ae=function(){return(0,n.Qr)(se())}},1981:function(e){e.exports=JSBeautify},1594:function(e){e.exports=React},5206:function(e){e.exports=ReactDOM}},a={};function n(e){var t=a[e];if(void 0!==t)return t.exports;var l=a[e]={id:e,exports:{}};return s[e](l,l.exports,n),l.exports}n.m=s,n.amdO={},e=[],n.O=function(t,l,s){if(!l){for(var a=0;a<e.length;a++){l=e[a][0],s=e[a][1];for(var o=!0,i=0;i<l.length;i++)n.O.j(l[i])?l.splice(i--,1):o=!1;if(o){e.splice(a--,1);var r=s();void 0!==r&&(t=r)}}return t}e.push([l,s])},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.cw=function(e){var t;return function(){if(e){var l=e;e=0,t={exports:{}},l.call(t.exports,t,t.exports)}return t.exports}},l=Object.getPrototypeOf,n.t=function(e,s){if(1&s&&(e=this(e)),8&s)return e;if("object"==typeof e&&e){if(4&s&&e.__esModule)return e;if(16&s&&"function"==typeof e.then)return e}var a=Object.create(null);n.r(a);var o={};t=t\|\|[null,l({}),l([]),l(l)];for(var i=2&s&&e;("object"==typeof i\|\|"function"==typeof i)&&!~t.indexOf(i);i=l(i))Object.getOwnPropertyNames(i).forEach(function(t){o[t]=function(){return e[t]}});return o.default=function(){return e},n.d(a,o),a},n.d=function(e,t){for(var l in t)n.o(t,l)&&!n.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},n.e=function(){return Promise.resolve()},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.j=3308,function(){var e={3308:0};n.O.j=function(t){return 0===e[t]};var t=function(t,l){var s,a,o=l[0],i=l[1],r=l[2],d=0;if(o.some(function(t){return 0!==e[t]})){for(s in i)n.o(i,s)&&(n.m[s]=i[s]);if(r)var c=r(n)}for(t&&t(l);d<o.length;d++)a=o[d],n.o(e,a)&&e[a]&&e[a][0](),e[a]=0;return n.O(c)},l=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),n.nc=void 0;var o=n.O(void 0,[3540],function(){return n(652)});o=n.O(o),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/docked-composer/docs.mdx.js"]=o}();

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

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,o,r={4628:function(e,t,o){o.r(t),o.d(t,{getContents:function(){return y},getElement:function(){return v}});var r=o(1594),n=o.n(r),i=o(5671),s=o(6547),l=(o(7675),o(5619),o(6482)),a=o(6955),c=o(3062),u=o(9249),d=l.Ay.uniqueId("dialog-heading-id-"),f=[{id:"default",label:"Default",element:n().createElement("div",{className:"slds-docked-form-footer"},n().createElement("button",{type:"button",className:"slds-button slds-button_neutral"},"Cancel"),n().createElement("button",{type:"button",className:"slds-button slds-button_brand"},"Save"))}],m=[{id:"docked-form-footer-with-error",label:"With error(s)",element:n().createElement("div",{className:"slds-docked-form-footer"},n().createElement(a.A,{assistiveText:"Resolve error",className:"slds-button_icon slds-button_icon-error",iconClassName:"slds-button__icon_large",symbol:"error",title:"Resolve error"}),n().createElement("button",{type:"button",className:"slds-button slds-button_neutral"},"Cancel"),n().createElement("button",{type:"button",className:"slds-button slds-button_brand"},"Save"))},{id:"docked-form-footer-with-popover",label:"With error popover",element:n().createElement("div",{className:"slds-docked-form-footer"},n().createElement(a.A,{assistiveText:"Resolve error",className:"slds-button_icon slds-button_icon-error",iconClassName:"slds-button__icon_large",symbol:"error",title:"Resolve error"}),n().createElement("button",{type:"button",className:"slds-button slds-button_neutral"},"Cancel"),n().createElement("button",{type:"button",className:"slds-button slds-button_brand"},"Save"),n().createElement(c.AM,{className:"slds-popover_error slds-nubbin_bottom-left",headingId:d,header:n().createElement(u.R5,{headingId:d,title:"Resolve error",symbol:"error"}),closeButton:!0,inverse:!0,style:{position:"absolute",bottom:"56px",left:"50%",marginLeft:"62px",transform:"translateX(-50%)"}},n().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Learn More"},"Learn More"))))}],p=i.XB.h2,b=i.XB.h3,h=i.XB.p,v=function(){return(0,r.createElement)(i.Ay,{},(0,r.createElement)("div",{className:"lead doc"},"Docked form footer is used to dock form actions to the bottom of the viewport"),(0,r.createElement)(s.A,{exampleOnly:!0,isViewport:!0,demoStyles:"height: 180px;"},(0,l.NO)(f)),p({id:"About-Docked-Form-footer"},"About Docked Form footer"),h({},"The popover should be positioned with JavaScript."),h({},"When errors are found within a form, the user will be notified with a popover with the page-level errors listed out."),b({id:"Accessibility"},"Accessibility"),h({},'Please provide a contextually specific title for the dialog with the aria-label attribute. e.g. "Acme Global edit form errors".'),p({id:"Base"},"Base"),(0,r.createElement)(s.A,{isViewport:!0,demoStyles:"height: 180px;"},(0,l.NO)(f)),b({id:"With-Error(s)"},"With Error(s)"),(0,r.createElement)(s.A,{isViewport:!0,demoStyles:"height: 180px;"},(0,l.NO)(m,"docked-form-footer-with-error")),b({id:"With-Error-Popover"},"With Error Popover"),(0,r.createElement)(s.A,{isViewport:!0,demoStyles:"height: 180px;"},(0,l.NO)(m,"docked-form-footer-with-popover")))},y=function(){return(0,i.Qr)(v())}},1981:function(e){e.exports=JSBeautify},1594:function(e){e.exports=React},5206:function(e){e.exports=ReactDOM}},n={};function i(e){var t=n[e];if(void 0!==t)return t.exports;var o=n[e]={id:e,exports:{}};return r[e](o,o.exports,i),o.exports}i.m=r,i.amdO={},e=[],i.O=function(t,o,r,n){if(!o){var s=1/0;~~for(u=0;u~~<e.length;u++){o=e[u][0],r=e[u][1]~~,n=e[u][2]~~;for(var l=!0,a=0;a<o.length;a++)~~1&n&&!(s>=n)\|\|!Object.keys(~~i.O).~~every~~(~~function(e){return i.O[e](~~o[a])})?~~(l=!1,n<s&&(s=n)):~~o.splice(a--,1);if(l){e.splice(u--,1);var c=r();void 0!==c&&(t=c)}}return t}~~n=n\|\|0;for(var u=~~e.~~length;u>0&&e~~[~~u-1][2]>n;u--)e[u]=e[u-1];e[u]=[~~o,r,n]},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,{a:t}),t},i.cw=function(e){var t;return function(){if(e){var o=e;e=0,t={exports:{}},o.call(t.exports,t,t.exports)}return t.exports}},o=Object.getPrototypeOf,i.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var n=Object.create(null);i.r(n);var s={};t=t\|\|[null,o({}),o([]),o(o)];for(var l=2&r&&e;("object"==typeof l\|\|"function"==typeof l)&&!~t.indexOf(l);l=o(l))Object.getOwnPropertyNames(l).forEach(function(t){s[t]=function(){return e[t]}});return s.default=function(){return e},i.d(n,s),n},i.d=function(e,t){for(var o in t)i.o(t,o)&&!i.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},i.e=function(){return Promise.resolve()},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=2308,function(){var e={2308:0};i.O.j=function(t){return 0===e[t]};var t=function(t,o){var r,n,s=o[0],l=o[1],a=o[2],c=0;if(s.some(function(t){return 0!==e[t]})){for(r in l)i.o(l,r)&&(i.m[r]=l[r]);if(a)var u=a(i)}for(t&&t(o);c<s.length;c++)n=s[c],i.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return i.O(u)},o=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];o.forEach(t.bind(null,0)),o.push=t.bind(null,o.push.bind(o))}(),i.nc=void 0;var s=i.O(void 0,[3540],function(){return i(4628)});s=i.O(s),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/docked-form-footer/docs.mdx.js"]=s}();
1	+ var SLDS;!function(){"use strict";var e,t,o,r={4628:function(e,t,o){o.r(t),o.d(t,{getContents:function(){return y},getElement:function(){return v}});var r=o(1594),n=o.n(r),i=o(5671),s=o(6547),l=(o(7675),o(5619),o(6482)),a=o(6955),c=o(3062),u=o(9249),d=l.Ay.uniqueId("dialog-heading-id-"),f=[{id:"default",label:"Default",element:n().createElement("div",{className:"slds-docked-form-footer"},n().createElement("button",{type:"button",className:"slds-button slds-button_neutral"},"Cancel"),n().createElement("button",{type:"button",className:"slds-button slds-button_brand"},"Save"))}],m=[{id:"docked-form-footer-with-error",label:"With error(s)",element:n().createElement("div",{className:"slds-docked-form-footer"},n().createElement(a.A,{assistiveText:"Resolve error",className:"slds-button_icon slds-button_icon-error",iconClassName:"slds-button__icon_large",symbol:"error",title:"Resolve error"}),n().createElement("button",{type:"button",className:"slds-button slds-button_neutral"},"Cancel"),n().createElement("button",{type:"button",className:"slds-button slds-button_brand"},"Save"))},{id:"docked-form-footer-with-popover",label:"With error popover",element:n().createElement("div",{className:"slds-docked-form-footer"},n().createElement(a.A,{assistiveText:"Resolve error",className:"slds-button_icon slds-button_icon-error",iconClassName:"slds-button__icon_large",symbol:"error",title:"Resolve error"}),n().createElement("button",{type:"button",className:"slds-button slds-button_neutral"},"Cancel"),n().createElement("button",{type:"button",className:"slds-button slds-button_brand"},"Save"),n().createElement(c.AM,{className:"slds-popover_error slds-nubbin_bottom-left",headingId:d,header:n().createElement(u.R5,{headingId:d,title:"Resolve error",symbol:"error"}),closeButton:!0,inverse:!0,style:{position:"absolute",bottom:"56px",left:"50%",marginLeft:"62px",transform:"translateX(-50%)"}},n().createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",n().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Learn More"},"Learn More"))))}],p=i.XB.h2,b=i.XB.h3,h=i.XB.p,v=function(){return(0,r.createElement)(i.Ay,{},(0,r.createElement)("div",{className:"lead doc"},"Docked form footer is used to dock form actions to the bottom of the viewport"),(0,r.createElement)(s.A,{exampleOnly:!0,isViewport:!0,demoStyles:"height: 180px;"},(0,l.NO)(f)),p({id:"About-Docked-Form-footer"},"About Docked Form footer"),h({},"The popover should be positioned with JavaScript."),h({},"When errors are found within a form, the user will be notified with a popover with the page-level errors listed out."),b({id:"Accessibility"},"Accessibility"),h({},'Please provide a contextually specific title for the dialog with the aria-label attribute. e.g. "Acme Global edit form errors".'),p({id:"Base"},"Base"),(0,r.createElement)(s.A,{isViewport:!0,demoStyles:"height: 180px;"},(0,l.NO)(f)),b({id:"With-Error(s)"},"With Error(s)"),(0,r.createElement)(s.A,{isViewport:!0,demoStyles:"height: 180px;"},(0,l.NO)(m,"docked-form-footer-with-error")),b({id:"With-Error-Popover"},"With Error Popover"),(0,r.createElement)(s.A,{isViewport:!0,demoStyles:"height: 180px;"},(0,l.NO)(m,"docked-form-footer-with-popover")))},y=function(){return(0,i.Qr)(v())}},1981:function(e){e.exports=JSBeautify},1594:function(e){e.exports=React},5206:function(e){e.exports=ReactDOM}},n={};function i(e){var t=n[e];if(void 0!==t)return t.exports;var o=n[e]={id:e,exports:{}};return r[e](o,o.exports,i),o.exports}i.m=r,i.amdO={},e=[],i.O=function(t,o,r){if(!o){for(var n=0;n<e.length;n++){o=e[n][0],r=e[n][1];for(var s=!0,l=0;l<o.length;l++)i.O.j(o[l])?o.splice(l--,1):s=!1;if(s){e.splice(n--,1);var a=r();void 0!==a&&(t=a)}}return t}e.push([o,r])},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,{a:t}),t},i.cw=function(e){var t;return function(){if(e){var o=e;e=0,t={exports:{}},o.call(t.exports,t,t.exports)}return t.exports}},o=Object.getPrototypeOf,i.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var n=Object.create(null);i.r(n);var s={};t=t\|\|[null,o({}),o([]),o(o)];for(var l=2&r&&e;("object"==typeof l\|\|"function"==typeof l)&&!~t.indexOf(l);l=o(l))Object.getOwnPropertyNames(l).forEach(function(t){s[t]=function(){return e[t]}});return s.default=function(){return e},i.d(n,s),n},i.d=function(e,t){for(var o in t)i.o(t,o)&&!i.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},i.e=function(){return Promise.resolve()},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=2308,function(){var e={2308:0};i.O.j=function(t){return 0===e[t]};var t=function(t,o){var r,n,s=o[0],l=o[1],a=o[2],c=0;if(s.some(function(t){return 0!==e[t]})){for(r in l)i.o(l,r)&&(i.m[r]=l[r]);if(a)var u=a(i)}for(t&&t(o);c<s.length;c++)n=s[c],i.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return i.O(u)},o=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];o.forEach(t.bind(null,0)),o.push=t.bind(null,o.push.bind(o))}(),i.nc=void 0;var s=i.O(void 0,[3540],function(){return i(4628)});s=i.O(s),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/docked-form-footer/docs.mdx.js"]=s}();

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

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,n,l={6026:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return x},getElement:function(){return O}});var l=n(1594),a=n.n(l),s=n(5671),i=n(6547),o=(n(2436),n(9582),n(5619),n(6482)),r=n(8347),c=n(6955),m=n(1369),d=n.n(m),u="\n height: 540px;\n overflow: hidden;\n padding-top: 50px;\n\n .slds-utility-bar_container {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n }\n\n .slds-utility-bar,\n .slds-utility-panel {\n position: absolute;\n }\n",p=function(e){return a().createElement("div",{className:d()("slds-utility-panel slds-grid slds-grid_vertical",e.className),role:"dialog","aria-labelledby":"panel-heading-01"},a().createElement("div",{className:"slds-utility-panel__header slds-grid slds-shrink-none"},a().createElement("div",{className:"slds-media slds-media_center"},a().createElement("div",{className:"slds-media__figure slds-m-right_x-small"},a().createElement("span",{className:"slds-icon_container"},a().createElement(r.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"standard",symbol:"call"}))),a().createElement("div",{className:"slds-media__body"},a().createElement("h2",{id:"panel-heading-01"},e.header\|\|"Header"))),a().createElement("div",{className:"slds-col_bump-left slds-shrink-none"},a().createElement(c.A,{className:"slds-button_icon",symbol:"minimize_window",assistiveText:"Close Panel",title:"Close Panel"}))),a().createElement("div",{className:"slds-utility-panel__body"},e.children))},f=function(e){return a().createElement("li",{className:d()("slds-utility-bar__item",{"slds-has-notification":e.notification,"slds-utility-bar__item_pop-out":e.hasPopOut},e.className)},a().createElement("button",{className:d()("slds-button slds-utility-bar__action",{"slds-is-active":e.active}),"aria-pressed":!!e.active},e.notification?a().createElement("abbr",{className:"slds-indicator_unread",title:"Unread Item","aria-label":"Unread Item"},a().createElement("span",{className:"slds-assistive-text"},"●")):null,a().createElement(r.A,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:e.symbol}),a().createElement("span",{className:"slds-utility-bar__text"},e.children),e.hasPopOut&&a().createElement("span",{className:"slds-assistive-text"},": is popped out in new window")))},b=function(e){return a().createElement("footer",{className:"slds-utility-bar_container","aria-label":"Utility Bar"},a().createElement("h2",{className:"slds-assistive-text"},"Utility Bar"),a().createElement("ul",{className:d()("slds-utility-bar",e.className)},e.children),e.panel)},y=a().createElement(p,{className:"slds-is-open",header:"Call"},a().createElement("div",{className:"slds-align_absolute-center"},"Utility Panel Body")),h=[{id:"default",label:"Default",demoStyles:u,element:a().createElement(b,{panel:a().createElement(p,{header:"Call"},a().createElement("div",{className:"slds-align_absolute-center"},"Utility Panel Body"))},a().createElement(f,{symbol:"call"},"Call"),a().createElement(f,{symbol:"clock"},"History"),a().createElement(f,{symbol:"note"},"Notes"),a().createElement(f,{symbol:"omni_channel"},a().createElement("span",{className:"slds-m-bottom_xxx-small"},"Online"),a().createElement("span",null,"Omni-Channel")))},{id:"open",label:"Panel Open",demoStyles:u,element:a().createElement(b,{panel:y},a().createElement(f,{symbol:"call",active:!0},"Call"),a().createElement(f,{symbol:"clock"},"History"),a().createElement(f,{symbol:"note"},"Notes"),a().createElement(f,{symbol:"omni_channel"},a().createElement("span",{className:"slds-m-bottom_xxx-small"},"Online"),a().createElement("span",null,"Omni-Channel")))},{id:"notification",label:"Item has notification",demoStyles:u,element:a().createElement(b,null,a().createElement(f,{symbol:"call"},"Call"),a().createElement(f,{symbol:"clock"},"History"),a().createElement(f,{symbol:"note"},"Notes"),a().createElement(f,{symbol:"omni_channel",notification:!0},a().createElement("span",{className:"slds-m-bottom_xxx-small"},"Online"),a().createElement("span",null,"Omni-Channel")))},{id:"pop-out",label:"Item has popout",demoStyles:u,element:a().createElement(b,null,a().createElement(f,{symbol:"call"},"Call"),a().createElement(f,{hasPopOut:!0,active:!0,symbol:"clock"},"History"),a().createElement(f,{symbol:"note"},"Notes"),a().createElement(f,{symbol:"omni_channel"},a().createElement("span",{className:"slds-m-bottom_xxx-small"},"Online"),a().createElement("span",null,"Omni-Channel")))}],_=s.XB.code,E=s.XB.h2,v=s.XB.h3,N=s.XB.p,O=function(){return(0,l.createElement)(s.Ay,{},(0,l.createElement)("div",{className:"doc lead"},"Docked utility bar is a persistent bar that allows a user to continually use the app to complete tasks while expanding/collapsing utility panels."),(0,l.createElement)(i.A,{isViewport:!0,exampleOnly:!0,demoStyles:(0,o.GP)(h,"open")},(0,o.NO)(h,"open")),E({id:"About-Docked-Utility-Bar"},"About Docked Utility Bar"),N({},"Fixed bar at the bottom of viewport, that contains items."),E({id:"Base"},"Base"),(0,l.createElement)(i.A,{isViewport:!0,demoStyles:(0,o.GP)(h,"default")},(0,o.NO)(h,"default")),E({id:"States"},"States"),v({id:"Panel-open"},"Panel open"),(0,l.createElement)(i.A,{isViewport:!0,demoStyles:(0,o.GP)(h,"open")},(0,o.NO)(h,"open")),v({id:"Item-has-notification"},"Item has notification"),(0,l.createElement)(i.A,{isViewport:!0,demoStyles:(0,o.GP)(h,"notification")},(0,o.NO)(h,"notification")),v({id:"Item-has-popout"},"Item has popout"),N({},"If the utility bar item is active and its panel is popped open in a new window, use ",_({},".slds-utility-bar__item_pop-out")," on the ",_({},".slds-utility-bar__item"),". This will add a visual indicator to communicate that the panel is opened in a new window."),(0,l.createElement)(i.A,{isViewport:!0,demoStyles:(0,o.GP)(h,"pop-out")},(0,o.NO)(h,"pop-out")))},x=function(){return(0,s.Qr)(O())}},1981:function(e){e.exports=JSBeautify},1594:function(e){e.exports=React},5206:function(e){e.exports=ReactDOM}},a={};function s(e){var t=a[e];if(void 0!==t)return t.exports;var n=a[e]={id:e,exports:{}};return l[e](n,n.exports,s),n.exports}s.m=l,s.amdO={},e=[],s.O=function(t,n,l,a){if(!n){var i=1/0;~~for(m=0;m~~<e.length;m++){n=e[m][0],l=e[m][1]~~,a=e[m][2]~~;for(var o=!0,r=0;r<n.length;r++)~~1&a&&!(i>=a)\|\|!Object.keys(~~s.O).~~every~~(~~function(e){return s.O[e](~~n[r])})?~~(o=!1,a<i&&(i=a)):~~n.splice(r--,1);if(o){e.splice(m--,1);var c=l();void 0!==c&&(t=c)}}return t}~~a=a\|\|0;for(var m=~~e.~~length;m>0&&e~~[~~m-1][2]>a;m--)e[m]=e[m-1];e[m]=[~~n,l,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.cw=function(e){var t;return function(){if(e){var n=e;e=0,t={exports:{}},n.call(t.exports,t,t.exports)}return t.exports}},n=Object.getPrototypeOf,s.t=function(e,l){if(1&l&&(e=this(e)),8&l)return e;if("object"==typeof e&&e){if(4&l&&e.__esModule)return e;if(16&l&&"function"==typeof e.then)return e}var a=Object.create(null);s.r(a);var i={};t=t\|\|[null,n({}),n([]),n(n)];for(var o=2&l&&e;("object"==typeof o\|\|"function"==typeof o)&&!~t.indexOf(o);o=n(o))Object.getOwnPropertyNames(o).forEach(function(t){i[t]=function(){return e[t]}});return i.default=function(){return e},s.d(a,i),a},s.d=function(e,t){for(var n in t)s.o(t,n)&&!s.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},s.e=function(){return Promise.resolve()},s.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.j=2518,function(){var e={2518:0};s.O.j=function(t){return 0===e[t]};var t=function(t,n){var l,a,i=n[0],o=n[1],r=n[2],c=0;if(i.some(function(t){return 0!==e[t]})){for(l in o)s.o(o,l)&&(s.m[l]=o[l]);if(r)var m=r(s)}for(t&&t(n);c<i.length;c++)a=i[c],s.o(e,a)&&e[a]&&e[a][0](),e[a]=0;return s.O(m)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),s.nc=void 0;var i=s.O(void 0,[3540],function(){return s(6026)});i=s.O(i),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/docked-utility-bar/docs.mdx.js"]=i}();
1	+ var SLDS;!function(){"use strict";var e,t,n,l={6026:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return O},getElement:function(){return x}});var l=n(1594),a=n.n(l),s=n(5671),i=n(6547),o=(n(2436),n(9582),n(5619),n(6482)),r=n(8347),c=n(6955),m=n(1369),d=n.n(m),u="\n height: 540px;\n overflow: hidden;\n padding-top: 50px;\n\n .slds-utility-bar_container {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n }\n\n .slds-utility-bar,\n .slds-utility-panel {\n position: absolute;\n }\n",p=function(e){return a().createElement("div",{className:d()("slds-utility-panel slds-grid slds-grid_vertical",e.className),role:"dialog","aria-labelledby":"panel-heading-01"},a().createElement("div",{className:"slds-utility-panel__header slds-grid slds-shrink-none"},a().createElement("div",{className:"slds-media slds-media_center"},a().createElement("div",{className:"slds-media__figure slds-m-right_x-small"},a().createElement("span",{className:"slds-icon_container"},a().createElement(r.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"standard",symbol:"call"}))),a().createElement("div",{className:"slds-media__body"},a().createElement("h2",{id:"panel-heading-01"},e.header\|\|"Header"))),a().createElement("div",{className:"slds-col_bump-left slds-shrink-none"},a().createElement(c.A,{className:"slds-button_icon",symbol:"minimize_window",assistiveText:"Close Panel",title:"Close Panel"}))),a().createElement("div",{className:"slds-utility-panel__body"},e.children))},f=function(e){return a().createElement("li",{className:d()("slds-utility-bar__item",{"slds-has-notification":e.notification,"slds-utility-bar__item_pop-out":e.hasPopOut},e.className)},a().createElement("button",{className:d()("slds-button slds-utility-bar__action",{"slds-is-active":e.active}),"aria-pressed":!!e.active},e.notification?a().createElement("abbr",{className:"slds-indicator_unread",title:"Unread Item","aria-label":"Unread Item"},a().createElement("span",{className:"slds-assistive-text"},"●")):null,a().createElement(r.A,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:e.symbol}),a().createElement("span",{className:"slds-utility-bar__text"},e.children),e.hasPopOut&&a().createElement("span",{className:"slds-assistive-text"},": is popped out in new window")))},b=function(e){return a().createElement("footer",{className:"slds-utility-bar_container","aria-label":"Utility Bar"},a().createElement("h2",{className:"slds-assistive-text"},"Utility Bar"),a().createElement("ul",{className:d()("slds-utility-bar",e.className)},e.children),e.panel)},y=a().createElement(p,{className:"slds-is-open",header:"Call"},a().createElement("div",{className:"slds-align_absolute-center"},"Utility Panel Body")),h=[{id:"default",label:"Default",demoStyles:u,element:a().createElement(b,{panel:a().createElement(p,{header:"Call"},a().createElement("div",{className:"slds-align_absolute-center"},"Utility Panel Body"))},a().createElement(f,{symbol:"call"},"Call"),a().createElement(f,{symbol:"clock"},"History"),a().createElement(f,{symbol:"note"},"Notes"),a().createElement(f,{symbol:"omni_channel"},a().createElement("span",{className:"slds-m-bottom_xxx-small"},"Online"),a().createElement("span",null,"Omni-Channel")))},{id:"open",label:"Panel Open",demoStyles:u,element:a().createElement(b,{panel:y},a().createElement(f,{symbol:"call",active:!0},"Call"),a().createElement(f,{symbol:"clock"},"History"),a().createElement(f,{symbol:"note"},"Notes"),a().createElement(f,{symbol:"omni_channel"},a().createElement("span",{className:"slds-m-bottom_xxx-small"},"Online"),a().createElement("span",null,"Omni-Channel")))},{id:"notification",label:"Item has notification",demoStyles:u,element:a().createElement(b,null,a().createElement(f,{symbol:"call"},"Call"),a().createElement(f,{symbol:"clock"},"History"),a().createElement(f,{symbol:"note"},"Notes"),a().createElement(f,{symbol:"omni_channel",notification:!0},a().createElement("span",{className:"slds-m-bottom_xxx-small"},"Online"),a().createElement("span",null,"Omni-Channel")))},{id:"pop-out",label:"Item has popout",demoStyles:u,element:a().createElement(b,null,a().createElement(f,{symbol:"call"},"Call"),a().createElement(f,{hasPopOut:!0,active:!0,symbol:"clock"},"History"),a().createElement(f,{symbol:"note"},"Notes"),a().createElement(f,{symbol:"omni_channel"},a().createElement("span",{className:"slds-m-bottom_xxx-small"},"Online"),a().createElement("span",null,"Omni-Channel")))}],_=s.XB.code,E=s.XB.h2,v=s.XB.h3,N=s.XB.p,x=function(){return(0,l.createElement)(s.Ay,{},(0,l.createElement)("div",{className:"doc lead"},"Docked utility bar is a persistent bar that allows a user to continually use the app to complete tasks while expanding/collapsing utility panels."),(0,l.createElement)(i.A,{isViewport:!0,exampleOnly:!0,demoStyles:(0,o.GP)(h,"open")},(0,o.NO)(h,"open")),E({id:"About-Docked-Utility-Bar"},"About Docked Utility Bar"),N({},"Fixed bar at the bottom of viewport, that contains items."),E({id:"Base"},"Base"),(0,l.createElement)(i.A,{isViewport:!0,demoStyles:(0,o.GP)(h,"default")},(0,o.NO)(h,"default")),E({id:"States"},"States"),v({id:"Panel-open"},"Panel open"),(0,l.createElement)(i.A,{isViewport:!0,demoStyles:(0,o.GP)(h,"open")},(0,o.NO)(h,"open")),v({id:"Item-has-notification"},"Item has notification"),(0,l.createElement)(i.A,{isViewport:!0,demoStyles:(0,o.GP)(h,"notification")},(0,o.NO)(h,"notification")),v({id:"Item-has-popout"},"Item has popout"),N({},"If the utility bar item is active and its panel is popped open in a new window, use ",_({},".slds-utility-bar__item_pop-out")," on the ",_({},".slds-utility-bar__item"),". This will add a visual indicator to communicate that the panel is opened in a new window."),(0,l.createElement)(i.A,{isViewport:!0,demoStyles:(0,o.GP)(h,"pop-out")},(0,o.NO)(h,"pop-out")))},O=function(){return(0,s.Qr)(x())}},1981:function(e){e.exports=JSBeautify},1594:function(e){e.exports=React},5206:function(e){e.exports=ReactDOM}},a={};function s(e){var t=a[e];if(void 0!==t)return t.exports;var n=a[e]={id:e,exports:{}};return l[e](n,n.exports,s),n.exports}s.m=l,s.amdO={},e=[],s.O=function(t,n,l){if(!n){for(var a=0;a<e.length;a++){n=e[a][0],l=e[a][1];for(var i=!0,o=0;o<n.length;o++)s.O.j(n[o])?n.splice(o--,1):i=!1;if(i){e.splice(a--,1);var r=l();void 0!==r&&(t=r)}}return t}e.push([n,l])},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,{a:t}),t},s.cw=function(e){var t;return function(){if(e){var n=e;e=0,t={exports:{}},n.call(t.exports,t,t.exports)}return t.exports}},n=Object.getPrototypeOf,s.t=function(e,l){if(1&l&&(e=this(e)),8&l)return e;if("object"==typeof e&&e){if(4&l&&e.__esModule)return e;if(16&l&&"function"==typeof e.then)return e}var a=Object.create(null);s.r(a);var i={};t=t\|\|[null,n({}),n([]),n(n)];for(var o=2&l&&e;("object"==typeof o\|\|"function"==typeof o)&&!~t.indexOf(o);o=n(o))Object.getOwnPropertyNames(o).forEach(function(t){i[t]=function(){return e[t]}});return i.default=function(){return e},s.d(a,i),a},s.d=function(e,t){for(var n in t)s.o(t,n)&&!s.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},s.e=function(){return Promise.resolve()},s.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.j=2518,function(){var e={2518:0};s.O.j=function(t){return 0===e[t]};var t=function(t,n){var l,a,i=n[0],o=n[1],r=n[2],c=0;if(i.some(function(t){return 0!==e[t]})){for(l in o)s.o(o,l)&&(s.m[l]=o[l]);if(r)var m=r(s)}for(t&&t(n);c<i.length;c++)a=i[c],s.o(e,a)&&e[a]&&e[a][0](),e[a]=0;return s.O(m)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),s.nc=void 0;var i=s.O(void 0,[3540],function(){return s(6026)});i=s.O(i),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/docked-utility-bar/docs.mdx.js"]=i}();

package/__internal/chunked/docs/ui/components/drop-zone/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS;!function(){"use strict";var e,t,n,r={4635:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return B},getElement:function(){return S}});var r=n(1594),o=n.n(r),a=n(5671),l=n(6547),s=(n(7675),n(5619),n(1374)),c=n(1369),i=n.n(c),d=n(538),m=n(7852),u=n(6955),p=n(9623),h=n(3011),f=n(4187),E=n.n(f),b=function(e){return o().createElement("div",{className:"demo-only",style:{paddingTop:"2rem"}},e.children)};b.propTypes={children:E().node};var v=function(e){return o().createElement("div",{className:"demo-only demo-component",style:{width:"100%",height:"10rem"}},e.children)};v.propTypes={children:E().node};var g=function(e){return o().createElement("div",{className:i()("slds-drop-zone",{"slds-drop-zone_drag":e.isDragging})},e.children)};g.propTypes={isDragging:E().bool,children:E().node};var y=function(e){return o().createElement("div",{className:"slds-drop-zone_drag__slot"})},x=function(e){return o().createElement("div",{className:i()("slds-drop-zone__container",{"slds-is-hovered":e.isHovered}),tabIndex:"-1"},o().createElement(A,{isContainer:!0,headerText:"Component Name"}),e.children,e.hasActions&&o().createElement("div",{className:"slds-drop-zone__actions"},o().createElement(p.e2,null,o().createElement(u.A,{className:"slds-button_icon-x-small",theme:"brand",symbol:"move",assistiveText:"Move",title:"Move"}),o().createElement(u.A,{className:"slds-button_icon-x-small",theme:"brand",symbol:"close",assistiveText:"Close",title:"Close"}))))};x.propTypes={hasActions:E().bool,isHovered:E().bool,children:E().node};var _=function(e){return o().createElement(d.eX,{symbol:e.isContainer?"connected_apps":"builder",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-current-color",title:!1,assistiveText:!1})};_.propTypes={isContainer:E().bool};var A=function(e){return o().createElement("div",{className:i()("slds-drop-zone__label",{"slds-drop-zone__label_container":e.isContainer})},o().createElement(m.A,{figureLeft:o().createElement(_,{isContainer:e.isContainer}),flavor:"center"},e.isContainer?o().createElement("h2",null,o().createElement("button",{className:"slds-drop-zone__label_button slds-button_reset"},o().createElement("span",{className:"slds-assistive-text"},"Edit: "),o().createElement("span",null,e.headerText))):o().createElement("h2",null,e.headerText)))};A.propTypes={isContainer:E().bool,headerText:E().string},n(8522),n(6482);var w=a.XB.h2,C=a.XB.h3,T=a.XB.li,D=a.XB.p,O=a.XB.strong,N=a.XB.ul,S=function(){return(0,r.createElement)(a.Ay,{},(0,r.createElement)("div",{className:"lead doc"},"Screen building elements that surround areas where components can be placed. Drop Zones visually indicate to users where they may drag and drop components onto a page."),(0,r.createElement)(l.A,{exampleOnly:!0},(0,r.createElement)(g,null,(0,r.createElement)(v,null),(0,r.createElement)(x,{hasActions:!0,isHovered:!0},(0,r.createElement)(v,null)))),w({id:"Base-Drop-Zone"},"Base Drop Zone"),D({},"A Base Drop Zone outlines areas within a page where users may drag and drop a component. These create a template to guide users within a screen building experience."),(0,r.createElement)(s.A,{title:"Drop Zone - Base"},(0,r.createElement)(l.A,{toggleCode:!1},(0,r.createElement)(g,null,(0,r.createElement)(v,null)))),w({id:"Drag-Over-Drop-Zone"},"Drag Over Drop Zone"),D({},"When dragging a component, use the drag over drop zone to indicate to the user where the component will be placed when dropped."),(0,r.createElement)(s.A,{title:"Drop Zone - Drag Over"},(0,r.createElement)(l.A,null,(0,r.createElement)(b,null,(0,r.createElement)(g,{isDragging:!0},(0,r.createElement)(A,{headerText:"Content"}),(0,r.createElement)(v,null),(0,r.createElement)(y,null),(0,r.createElement)(v,null))))),C({id:"Insertion-Point"},"Insertion Point"),D({},"An insertion point is used to further communicate to the user the exact slot the component is being placed."),(0,r.createElement)(l.A,{toggleCode:!1},(0,r.createElement)(y,null)),D({},"The position of this element should be controlled by your implementation."),N({},T({},D({},O({},"When there are no components in the drop zone"),": The insertion point should be placed in the center.")),T({},D({},O({},"When there are components in the drop zone"),": The insertion point should be placed before or after components, to indicate where a new component will be placed relative to the ones already in the the drop zone."))),w({id:"Drop-Zone-Container"},"Drop Zone Container"),D({},"Use a drop zone container to highlight components within a drop zone. This provides a label for the component, as well as Button Icons to perform actions, such as moving the component and deleting the component from the screen."),(0,r.createElement)(s.A,{title:"Drop Zone - Container"},(0,r.createElement)(l.A,null,(0,r.createElement)(g,null,(0,r.createElement)(v,null),(0,r.createElement)(x,{hasActions:!0,isHovered:!0},(0,r.createElement)(v,null))))),w({id:"Example-Cards"},"Example - Cards"),(0,r.createElement)(s.A,{title:"Drop Zone - Cards Example"},(0,r.createElement)(l.A,null,(0,r.createElement)(b,null,(0,r.createElement)(g,null,(0,r.createElement)(x,{hasActions:!0},(0,r.createElement)(h.Ay,{className:"slds-m-bottom_small"},(0,r.createElement)(h.aR,{title:"Accounts",showIcon:!0,symbol:"account"}),(0,r.createElement)(h.bw,{hasPadding:!0},"Card Body"),(0,r.createElement)(h.wL,{linkTabIndex:"-1"},"View All ",(0,r.createElement)("span",{className:"slds-assistive-text"},"Accounts")))),(0,r.createElement)(x,{hasActions:!0},(0,r.createElement)(h.Ay,{className:"slds-m-top_small"},(0,r.createElement)(h.aR,{title:"Accounts",showIcon:!0,symbol:"account"}),(0,r.createElement)(h.bw,{hasPadding:!0},"Card Body"),(0,r.createElement)(h.wL,{linkTabIndex:"-1"},"View All ",(0,r.createElement)("span",{className:"slds-assistive-text"},"Accounts")))))))),w({id:"Example-Cards-Insertion"},"Example - Cards Insertion"),(0,r.createElement)(s.A,{title:"Drop Zone - Cards Insert Example"},(0,r.createElement)(l.A,null,(0,r.createElement)(b,null,(0,r.createElement)(g,{isDragging:!0},(0,r.createElement)(A,{headerText:"Content"}),(0,r.createElement)(x,{hasActions:!0},(0,r.createElement)(h.Ay,{className:"slds-m-bottom_small"},(0,r.createElement)(h.aR,{title:"Accounts",showIcon:!0,symbol:"account"}),(0,r.createElement)(h.bw,{hasPadding:!0},"Card Body"),(0,r.createElement)(h.wL,{linkTabIndex:"-1"},"View All ",(0,r.createElement)("span",{className:"slds-assistive-text"},"Accounts")))),(0,r.createElement)(y,null),(0,r.createElement)(x,{hasActions:!0},(0,r.createElement)(h.Ay,{className:"slds-m-top_small"},(0,r.createElement)(h.aR,{title:"Accounts",showIcon:!0,symbol:"account"}),(0,r.createElement)(h.bw,{hasPadding:!0},"Card Body"),(0,r.createElement)(h.wL,{linkTabIndex:"-1"},"View All ",(0,r.createElement)("span",{className:"slds-assistive-text"},"Accounts")))))))))},B=function(){return(0,a.Qr)(S())}},1981:function(e){e.exports=JSBeautify},1594:function(e){e.exports=React},5206:function(e){e.exports=ReactDOM}},o={};function a(e){var t=o[e];if(void 0!==t)return t.exports;var n=o[e]={id:e,exports:{}};return r[e](n,n.exports,a),n.exports}a.m=r,a.amdO={},e=[],a.O=function(t,n,r,o){if(!n){var l=1/0;~~for(d=0;d~~<e.length;d++){n=e[d][0],r=e[d][1]~~,o=e[d][2]~~;for(var s=!0,c=0;c<n.length;c++)~~1&o&&!(l>=o)\|\|!Object.keys(~~a.O).~~every~~(~~function(e){return a.O[e](~~n[c])})?~~(s=!1,o<l&&(l=o)):~~n.splice(c--,1);if(s){e.splice(d--,1);var i=r();void 0!==i&&(t=i)}}return t}~~o=o\|\|0;for(var d=~~e.~~length;d>0&&e~~[~~d-1][2]>o;d--)e[d]=e[d-1];e[d]=[~~n,r,o]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},a.cw=function(e){var t;return function(){if(e){var n=e;e=0,t={exports:{}},n.call(t.exports,t,t.exports)}return t.exports}},n=Object.getPrototypeOf,a.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var o=Object.create(null);a.r(o);var l={};t=t\|\|[null,n({}),n([]),n(n)];for(var s=2&r&&e;("object"==typeof s\|\|"function"==typeof s)&&!~t.indexOf(s);s=n(s))Object.getOwnPropertyNames(s).forEach(function(t){l[t]=function(){return e[t]}});return l.default=function(){return e},a.d(o,l),o},a.d=function(e,t){for(var n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},a.e=function(){return Promise.resolve()},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.j=4935,function(){var e={4935:0};a.O.j=function(t){return 0===e[t]};var t=function(t,n){var r,o,l=n[0],s=n[1],c=n[2],i=0;if(l.some(function(t){return 0!==e[t]})){for(r in s)a.o(s,r)&&(a.m[r]=s[r]);if(c)var d=c(a)}for(t&&t(n);i<l.length;i++)o=l[i],a.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return a.O(d)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),a.nc=void 0;var l=a.O(void 0,[3540],function(){return a(4635)});l=a.O(l),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/drop-zone/docs.mdx.js"]=l}();
1	+ var SLDS;!function(){"use strict";var e,t,n,r={4635:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return B},getElement:function(){return S}});var r=n(1594),o=n.n(r),a=n(5671),l=n(6547),s=(n(7675),n(5619),n(1374)),c=n(1369),i=n.n(c),d=n(538),m=n(7852),u=n(6955),p=n(9623),h=n(3011),E=n(4187),f=n.n(E),b=function(e){return o().createElement("div",{className:"demo-only",style:{paddingTop:"2rem"}},e.children)};b.propTypes={children:f().node};var v=function(e){return o().createElement("div",{className:"demo-only demo-component",style:{width:"100%",height:"10rem"}},e.children)};v.propTypes={children:f().node};var g=function(e){return o().createElement("div",{className:i()("slds-drop-zone",{"slds-drop-zone_drag":e.isDragging})},e.children)};g.propTypes={isDragging:f().bool,children:f().node};var y=function(e){return o().createElement("div",{className:"slds-drop-zone_drag__slot"})},x=function(e){return o().createElement("div",{className:i()("slds-drop-zone__container",{"slds-is-hovered":e.isHovered}),tabIndex:"-1"},o().createElement(A,{isContainer:!0,headerText:"Component Name"}),e.children,e.hasActions&&o().createElement("div",{className:"slds-drop-zone__actions"},o().createElement(p.e2,null,o().createElement(u.A,{className:"slds-button_icon-x-small",theme:"brand",symbol:"move",assistiveText:"Move",title:"Move"}),o().createElement(u.A,{className:"slds-button_icon-x-small",theme:"brand",symbol:"close",assistiveText:"Close",title:"Close"}))))};x.propTypes={hasActions:f().bool,isHovered:f().bool,children:f().node};var _=function(e){return o().createElement(d.eX,{symbol:e.isContainer?"connected_apps":"builder",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-current-color",title:!1,assistiveText:!1})};_.propTypes={isContainer:f().bool};var A=function(e){return o().createElement("div",{className:i()("slds-drop-zone__label",{"slds-drop-zone__label_container":e.isContainer})},o().createElement(m.A,{figureLeft:o().createElement(_,{isContainer:e.isContainer}),flavor:"center"},e.isContainer?o().createElement("h2",null,o().createElement("button",{className:"slds-drop-zone__label_button slds-button_reset"},o().createElement("span",{className:"slds-assistive-text"},"Edit: "),o().createElement("span",null,e.headerText))):o().createElement("h2",null,e.headerText)))};A.propTypes={isContainer:f().bool,headerText:f().string},n(8522),n(6482);var w=a.XB.h2,C=a.XB.h3,T=a.XB.li,D=a.XB.p,N=a.XB.strong,O=a.XB.ul,S=function(){return(0,r.createElement)(a.Ay,{},(0,r.createElement)("div",{className:"lead doc"},"Screen building elements that surround areas where components can be placed. Drop Zones visually indicate to users where they may drag and drop components onto a page."),(0,r.createElement)(l.A,{exampleOnly:!0},(0,r.createElement)(g,null,(0,r.createElement)(v,null),(0,r.createElement)(x,{hasActions:!0,isHovered:!0},(0,r.createElement)(v,null)))),w({id:"Base-Drop-Zone"},"Base Drop Zone"),D({},"A Base Drop Zone outlines areas within a page where users may drag and drop a component. These create a template to guide users within a screen building experience."),(0,r.createElement)(s.A,{title:"Drop Zone - Base"},(0,r.createElement)(l.A,{toggleCode:!1},(0,r.createElement)(g,null,(0,r.createElement)(v,null)))),w({id:"Drag-Over-Drop-Zone"},"Drag Over Drop Zone"),D({},"When dragging a component, use the drag over drop zone to indicate to the user where the component will be placed when dropped."),(0,r.createElement)(s.A,{title:"Drop Zone - Drag Over"},(0,r.createElement)(l.A,null,(0,r.createElement)(b,null,(0,r.createElement)(g,{isDragging:!0},(0,r.createElement)(A,{headerText:"Content"}),(0,r.createElement)(v,null),(0,r.createElement)(y,null),(0,r.createElement)(v,null))))),C({id:"Insertion-Point"},"Insertion Point"),D({},"An insertion point is used to further communicate to the user the exact slot the component is being placed."),(0,r.createElement)(l.A,{toggleCode:!1},(0,r.createElement)(y,null)),D({},"The position of this element should be controlled by your implementation."),O({},T({},D({},N({},"When there are no components in the drop zone"),": The insertion point should be placed in the center.")),T({},D({},N({},"When there are components in the drop zone"),": The insertion point should be placed before or after components, to indicate where a new component will be placed relative to the ones already in the the drop zone."))),w({id:"Drop-Zone-Container"},"Drop Zone Container"),D({},"Use a drop zone container to highlight components within a drop zone. This provides a label for the component, as well as Button Icons to perform actions, such as moving the component and deleting the component from the screen."),(0,r.createElement)(s.A,{title:"Drop Zone - Container"},(0,r.createElement)(l.A,null,(0,r.createElement)(g,null,(0,r.createElement)(v,null),(0,r.createElement)(x,{hasActions:!0,isHovered:!0},(0,r.createElement)(v,null))))),w({id:"Example-Cards"},"Example - Cards"),(0,r.createElement)(s.A,{title:"Drop Zone - Cards Example"},(0,r.createElement)(l.A,null,(0,r.createElement)(b,null,(0,r.createElement)(g,null,(0,r.createElement)(x,{hasActions:!0},(0,r.createElement)(h.Ay,{className:"slds-m-bottom_small"},(0,r.createElement)(h.aR,{title:"Accounts",showIcon:!0,symbol:"account"}),(0,r.createElement)(h.bw,{hasPadding:!0},"Card Body"),(0,r.createElement)(h.wL,{linkTabIndex:"-1"},"View All ",(0,r.createElement)("span",{className:"slds-assistive-text"},"Accounts")))),(0,r.createElement)(x,{hasActions:!0},(0,r.createElement)(h.Ay,{className:"slds-m-top_small"},(0,r.createElement)(h.aR,{title:"Accounts",showIcon:!0,symbol:"account"}),(0,r.createElement)(h.bw,{hasPadding:!0},"Card Body"),(0,r.createElement)(h.wL,{linkTabIndex:"-1"},"View All ",(0,r.createElement)("span",{className:"slds-assistive-text"},"Accounts")))))))),w({id:"Example-Cards-Insertion"},"Example - Cards Insertion"),(0,r.createElement)(s.A,{title:"Drop Zone - Cards Insert Example"},(0,r.createElement)(l.A,null,(0,r.createElement)(b,null,(0,r.createElement)(g,{isDragging:!0},(0,r.createElement)(A,{headerText:"Content"}),(0,r.createElement)(x,{hasActions:!0},(0,r.createElement)(h.Ay,{className:"slds-m-bottom_small"},(0,r.createElement)(h.aR,{title:"Accounts",showIcon:!0,symbol:"account"}),(0,r.createElement)(h.bw,{hasPadding:!0},"Card Body"),(0,r.createElement)(h.wL,{linkTabIndex:"-1"},"View All ",(0,r.createElement)("span",{className:"slds-assistive-text"},"Accounts")))),(0,r.createElement)(y,null),(0,r.createElement)(x,{hasActions:!0},(0,r.createElement)(h.Ay,{className:"slds-m-top_small"},(0,r.createElement)(h.aR,{title:"Accounts",showIcon:!0,symbol:"account"}),(0,r.createElement)(h.bw,{hasPadding:!0},"Card Body"),(0,r.createElement)(h.wL,{linkTabIndex:"-1"},"View All ",(0,r.createElement)("span",{className:"slds-assistive-text"},"Accounts")))))))))},B=function(){return(0,a.Qr)(S())}},1981:function(e){e.exports=JSBeautify},1594:function(e){e.exports=React},5206:function(e){e.exports=ReactDOM}},o={};function a(e){var t=o[e];if(void 0!==t)return t.exports;var n=o[e]={id:e,exports:{}};return r[e](n,n.exports,a),n.exports}a.m=r,a.amdO={},e=[],a.O=function(t,n,r){if(!n){for(var o=0;o<e.length;o++){n=e[o][0],r=e[o][1];for(var l=!0,s=0;s<n.length;s++)a.O.j(n[s])?n.splice(s--,1):l=!1;if(l){e.splice(o--,1);var c=r();void 0!==c&&(t=c)}}return t}e.push([n,r])},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},a.cw=function(e){var t;return function(){if(e){var n=e;e=0,t={exports:{}},n.call(t.exports,t,t.exports)}return t.exports}},n=Object.getPrototypeOf,a.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var o=Object.create(null);a.r(o);var l={};t=t\|\|[null,n({}),n([]),n(n)];for(var s=2&r&&e;("object"==typeof s\|\|"function"==typeof s)&&!~t.indexOf(s);s=n(s))Object.getOwnPropertyNames(s).forEach(function(t){l[t]=function(){return e[t]}});return l.default=function(){return e},a.d(o,l),o},a.d=function(e,t){for(var n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},a.e=function(){return Promise.resolve()},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this\|\|new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.j=4935,function(){var e={4935:0};a.O.j=function(t){return 0===e[t]};var t=function(t,n){var r,o,l=n[0],s=n[1],c=n[2],i=0;if(l.some(function(t){return 0!==e[t]})){for(r in s)a.o(s,r)&&(a.m[r]=s[r]);if(c)var d=c(a)}for(t&&t(n);i<l.length;i++)o=l[i],a.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return a.O(d)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs\|\|[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),a.nc=void 0;var l=a.O(void 0,[3540],function(){return a(4635)});l=a.O(l),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/drop-zone/docs.mdx.js"]=l}();