@salesforce-ux/design-system/__internal/chunked/docs/ui/components/docked-composer/docs.mdx.js

Salesforce Lightning Design System

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(3212),l(5619),l(2937)),r=l(6955),d=l(4760),c=l(1766),m=l(1412),u=l(7412),b=l.n(u),p=l(8347),_=l(5159),E=l(3964),h=l(6185),f=(l(5786),l(538)),N=l(2711),g=l(5526),v=l(942),x=l.n(v),y=l(806);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 O=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"})))},T=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"})))},P=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"})))},V=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(O,null),a().createElement(T,{tabIndexSetting:"-1"}),a().createElement(L,null),a().createElement(j,null),a().createElement(B,null),a().createElement(F,null),a().createElement(P,null)),a().createElement(V,{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())}},1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},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])})?l.splice(r--,1):(i=!1,a<o&&(o=a));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},l=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},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}();