npm - @salesforce-ux/design-system - Versions diffs - 2.25.3 → 2.25.4 - Mend

@salesforce-ux/design-system 2.25.3 → 2.25.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 (754) hide show

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

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

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/docked-utility-bar/docs.mdx.js"]=function(e){function t(t){for(var l,i,o=t[0],c=t[1],r=t[2],d=0,u=[];d<o.length;d++)i=o[d],Object.prototype.hasOwnProperty.call(n,i)&&n[i]&&u.push(n[i][0]),n[i]=0;for(l in c)Object.prototype.hasOwnProperty.call(c,l)&&(e[l]=c[l]);for(m&&m(t);u.length;)u.shift()();return s.push.apply(s,r\|\|[]),a()}function a(){for(var e,t=0;t<s.length;t++){for(var a=s[t],l=!0,o=1;o<a.length;o++){var c=a[o];0!==n[c]&&(l=!1)}l&&(s.splice(t--,1),e=i(i.s=a[0]))}return e}var l={},n={29:0},s=[];function i(t){if(l[t])return l[t].exports;var a=l[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,i),a.l=!0,a.exports}i.m=e,i.c=l,i.d=function(e,t,a){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)i.d(a,l,function(t){return e[t]}.bind(null,l));return a},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=o.push.bind(o);o.push=t,o=o.slice();for(var r=0;r<o.length;r++)t(o[r]);var m=c;return s.push([779,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},779:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return x})),a.d(t,"getContents",(function(){return j}));var l=a(0),n=a.n(l),s=a(4),i=a(2),o=(a(28),a(45),a(14),a(1)),c=a(10),r=a(7),m=a(5),d=a.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 n.a.createElement("div",{className:d()("slds-utility-panel slds-grid slds-grid_vertical",e.className),role:"dialog","aria-labelledby":"panel-heading-01"},n.a.createElement("div",{className:"slds-utility-panel__header slds-grid slds-shrink-none"},n.a.createElement("div",{className:"slds-media slds-media_center"},n.a.createElement("div",{className:"slds-media__figure slds-m-right_x-small"},n.a.createElement("span",{className:"slds-icon_container"},n.a.createElement(c.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"standard",symbol:"call"}))),n.a.createElement("div",{className:"slds-media__body"},n.a.createElement("h2",{id:"panel-heading-01"},e.header\|\|"Header"))),n.a.createElement("div",{className:"slds-col_bump-left slds-shrink-none"},n.a.createElement(r.b,{className:"slds-button_icon",symbol:"minimize_window",assistiveText:"Close Panel",title:"Close Panel"}))),n.a.createElement("div",{className:"slds-utility-panel__body"},e.children))},b=function(e){return n.a.createElement("li",{className:d()("slds-utility-bar__item",{"slds-has-notification":e.notification,"slds-utility-bar__item_pop-out":e.hasPopOut},e.className)},n.a.createElement("button",{className:d()("slds-button slds-utility-bar__action",{"slds-is-active":e.active}),"aria-pressed":!!e.active},e.notification?n.a.createElement("abbr",{className:"slds-indicator_unread",title:"Unread Item","aria-label":"Unread Item"},n.a.createElement("span",{className:"slds-assistive-text"},"●")):null,n.a.createElement(c.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:e.symbol}),n.a.createElement("span",{className:"slds-utility-bar__text"},e.children),e.hasPopOut&&n.a.createElement("span",{className:"slds-assistive-text"},": is popped out in new window")))},y=function(e){return n.a.createElement("footer",{className:"slds-utility-bar_container","aria-label":"Utility Bar"},n.a.createElement("h2",{className:"slds-assistive-text"},"Utility Bar"),n.a.createElement("ul",{className:d()("slds-utility-bar",e.className)},e.children),e.panel)},f=n.a.createElement(p,{className:"slds-is-open",header:"Call"},n.a.createElement("div",{className:"slds-align_absolute-center"},"Utility Panel Body")),h=n.a.createElement(y,{panel:n.a.createElement(p,{header:"Call"},n.a.createElement("div",{className:"slds-align_absolute-center"},"Utility Panel Body"))},n.a.createElement(b,{symbol:"call"},"Call"),n.a.createElement(b,{symbol:"clock"},"History"),n.a.createElement(b,{symbol:"note"},"Notes"),n.a.createElement(b,{symbol:"omni_channel"},n.a.createElement("span",{className:"slds-m-bottom_xxx-small"},"Online"),n.a.createElement("span",null,"Omni-Channel"))),_=[{id:"default",label:"Default",demoStyles:u,element:h},{id:"open",label:"Panel Open",demoStyles:u,element:n.a.createElement(y,{panel:f},n.a.createElement(b,{symbol:"call",active:!0},"Call"),n.a.createElement(b,{symbol:"clock"},"History"),n.a.createElement(b,{symbol:"note"},"Notes"),n.a.createElement(b,{symbol:"omni_channel"},n.a.createElement("span",{className:"slds-m-bottom_xxx-small"},"Online"),n.a.createElement("span",null,"Omni-Channel")))},{id:"notification",label:"Item has notification",demoStyles:u,element:n.a.createElement(y,null,n.a.createElement(b,{symbol:"call"},"Call"),n.a.createElement(b,{symbol:"clock"},"History"),n.a.createElement(b,{symbol:"note"},"Notes"),n.a.createElement(b,{symbol:"omni_channel",notification:!0},n.a.createElement("span",{className:"slds-m-bottom_xxx-small"},"Online"),n.a.createElement("span",null,"Omni-Channel")))},{id:"pop-out",label:"Item has popout",demoStyles:u,element:n.a.createElement(y,null,n.a.createElement(b,{symbol:"call"},"Call"),n.a.createElement(b,{hasPopOut:!0,active:!0,symbol:"clock"},"History"),n.a.createElement(b,{symbol:"note"},"Notes"),n.a.createElement(b,{symbol:"omni_channel"},n.a.createElement("span",{className:"slds-m-bottom_xxx-small"},"Online"),n.a.createElement("span",null,"Omni-Channel")))}],E=s.c.code,O=s.c.h2,v=s.c.h3,N=s.c.p,x=function(){return Object(l.createElement)(s.b,{},Object(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."),Object(l.createElement)(i.a,{isViewport:!0,exampleOnly:!0,demoStyles:Object(o.e)(_,"open")},Object(o.f)(_,"open")),O({id:"About-Docked-Utility-Bar"},"About Docked Utility Bar"),N({},"Fixed bar at the bottom of viewport, that contains items."),O({id:"Base"},"Base"),Object(l.createElement)(i.a,{isViewport:!0,demoStyles:Object(o.e)(_,"default")},Object(o.f)(_,"default")),O({id:"States"},"States"),v({id:"Panel-open"},"Panel open"),Object(l.createElement)(i.a,{isViewport:!0,demoStyles:Object(o.e)(_,"open")},Object(o.f)(_,"open")),v({id:"Item-has-notification"},"Item has notification"),Object(l.createElement)(i.a,{isViewport:!0,demoStyles:Object(o.e)(_,"notification")},Object(o.f)(_,"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 ",E({},".slds-utility-bar__item_pop-out")," on the ",E({},".slds-utility-bar__item"),". This will add a visual indicator to communicate that the panel is opened in a new window."),Object(l.createElement)(i.a,{isViewport:!0,demoStyles:Object(o.e)(_,"pop-out")},Object(o.f)(_,"pop-out")))},j=function(){return Object(s.a)(x())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/docked-utility-bar/docs.mdx.js"]=function(e){function t(t){for(var l,i,o=t[0],c=t[1],r=t[2],d=0,u=[];d<o.length;d++)i=o[d],Object.prototype.hasOwnProperty.call(n,i)&&n[i]&&u.push(n[i][0]),n[i]=0;for(l in c)Object.prototype.hasOwnProperty.call(c,l)&&(e[l]=c[l]);for(m&&m(t);u.length;)u.shift()();return s.push.apply(s,r\|\|[]),a()}function a(){for(var e,t=0;t<s.length;t++){for(var a=s[t],l=!0,o=1;o<a.length;o++){var c=a[o];0!==n[c]&&(l=!1)}l&&(s.splice(t--,1),e=i(i.s=a[0]))}return e}var l={},n={29:0},s=[];function i(t){if(l[t])return l[t].exports;var a=l[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,i),a.l=!0,a.exports}i.m=e,i.c=l,i.d=function(e,t,a){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)i.d(a,l,function(t){return e[t]}.bind(null,l));return a},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=o.push.bind(o);o.push=t,o=o.slice();for(var r=0;r<o.length;r++)t(o[r]);var m=c;return s.push([779,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},779:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return x})),a.d(t,"getContents",(function(){return j}));var l=a(0),n=a.n(l),s=a(4),i=a(2),o=(a(29),a(45),a(14),a(1)),c=a(10),r=a(7),m=a(5),d=a.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 n.a.createElement("div",{className:d()("slds-utility-panel slds-grid slds-grid_vertical",e.className),role:"dialog","aria-labelledby":"panel-heading-01"},n.a.createElement("div",{className:"slds-utility-panel__header slds-grid slds-shrink-none"},n.a.createElement("div",{className:"slds-media slds-media_center"},n.a.createElement("div",{className:"slds-media__figure slds-m-right_x-small"},n.a.createElement("span",{className:"slds-icon_container"},n.a.createElement(c.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"standard",symbol:"call"}))),n.a.createElement("div",{className:"slds-media__body"},n.a.createElement("h2",{id:"panel-heading-01"},e.header\|\|"Header"))),n.a.createElement("div",{className:"slds-col_bump-left slds-shrink-none"},n.a.createElement(r.b,{className:"slds-button_icon",symbol:"minimize_window",assistiveText:"Close Panel",title:"Close Panel"}))),n.a.createElement("div",{className:"slds-utility-panel__body"},e.children))},b=function(e){return n.a.createElement("li",{className:d()("slds-utility-bar__item",{"slds-has-notification":e.notification,"slds-utility-bar__item_pop-out":e.hasPopOut},e.className)},n.a.createElement("button",{className:d()("slds-button slds-utility-bar__action",{"slds-is-active":e.active}),"aria-pressed":!!e.active},e.notification?n.a.createElement("abbr",{className:"slds-indicator_unread",title:"Unread Item","aria-label":"Unread Item"},n.a.createElement("span",{className:"slds-assistive-text"},"●")):null,n.a.createElement(c.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:e.symbol}),n.a.createElement("span",{className:"slds-utility-bar__text"},e.children),e.hasPopOut&&n.a.createElement("span",{className:"slds-assistive-text"},": is popped out in new window")))},y=function(e){return n.a.createElement("footer",{className:"slds-utility-bar_container","aria-label":"Utility Bar"},n.a.createElement("h2",{className:"slds-assistive-text"},"Utility Bar"),n.a.createElement("ul",{className:d()("slds-utility-bar",e.className)},e.children),e.panel)},f=n.a.createElement(p,{className:"slds-is-open",header:"Call"},n.a.createElement("div",{className:"slds-align_absolute-center"},"Utility Panel Body")),h=n.a.createElement(y,{panel:n.a.createElement(p,{header:"Call"},n.a.createElement("div",{className:"slds-align_absolute-center"},"Utility Panel Body"))},n.a.createElement(b,{symbol:"call"},"Call"),n.a.createElement(b,{symbol:"clock"},"History"),n.a.createElement(b,{symbol:"note"},"Notes"),n.a.createElement(b,{symbol:"omni_channel"},n.a.createElement("span",{className:"slds-m-bottom_xxx-small"},"Online"),n.a.createElement("span",null,"Omni-Channel"))),_=[{id:"default",label:"Default",demoStyles:u,element:h},{id:"open",label:"Panel Open",demoStyles:u,element:n.a.createElement(y,{panel:f},n.a.createElement(b,{symbol:"call",active:!0},"Call"),n.a.createElement(b,{symbol:"clock"},"History"),n.a.createElement(b,{symbol:"note"},"Notes"),n.a.createElement(b,{symbol:"omni_channel"},n.a.createElement("span",{className:"slds-m-bottom_xxx-small"},"Online"),n.a.createElement("span",null,"Omni-Channel")))},{id:"notification",label:"Item has notification",demoStyles:u,element:n.a.createElement(y,null,n.a.createElement(b,{symbol:"call"},"Call"),n.a.createElement(b,{symbol:"clock"},"History"),n.a.createElement(b,{symbol:"note"},"Notes"),n.a.createElement(b,{symbol:"omni_channel",notification:!0},n.a.createElement("span",{className:"slds-m-bottom_xxx-small"},"Online"),n.a.createElement("span",null,"Omni-Channel")))},{id:"pop-out",label:"Item has popout",demoStyles:u,element:n.a.createElement(y,null,n.a.createElement(b,{symbol:"call"},"Call"),n.a.createElement(b,{hasPopOut:!0,active:!0,symbol:"clock"},"History"),n.a.createElement(b,{symbol:"note"},"Notes"),n.a.createElement(b,{symbol:"omni_channel"},n.a.createElement("span",{className:"slds-m-bottom_xxx-small"},"Online"),n.a.createElement("span",null,"Omni-Channel")))}],E=s.c.code,O=s.c.h2,v=s.c.h3,N=s.c.p,x=function(){return Object(l.createElement)(s.b,{},Object(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."),Object(l.createElement)(i.a,{isViewport:!0,exampleOnly:!0,demoStyles:Object(o.e)(_,"open")},Object(o.f)(_,"open")),O({id:"About-Docked-Utility-Bar"},"About Docked Utility Bar"),N({},"Fixed bar at the bottom of viewport, that contains items."),O({id:"Base"},"Base"),Object(l.createElement)(i.a,{isViewport:!0,demoStyles:Object(o.e)(_,"default")},Object(o.f)(_,"default")),O({id:"States"},"States"),v({id:"Panel-open"},"Panel open"),Object(l.createElement)(i.a,{isViewport:!0,demoStyles:Object(o.e)(_,"open")},Object(o.f)(_,"open")),v({id:"Item-has-notification"},"Item has notification"),Object(l.createElement)(i.a,{isViewport:!0,demoStyles:Object(o.e)(_,"notification")},Object(o.f)(_,"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 ",E({},".slds-utility-bar__item_pop-out")," on the ",E({},".slds-utility-bar__item"),". This will add a visual indicator to communicate that the panel is opened in a new window."),Object(l.createElement)(i.a,{isViewport:!0,demoStyles:Object(o.e)(_,"pop-out")},Object(o.f)(_,"pop-out")))},j=function(){return Object(s.a)(x())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/drop-zone/docs.mdx.js"]=function(e){function t(t){for(var a,l,c=t[0],s=t[1],i=t[2],m=0,u=[];m<c.length;m++)l=c[m],Object.prototype.hasOwnProperty.call(r,l)&&r[l]&&u.push(r[l][0]),r[l]=0;for(a in s)Object.prototype.hasOwnProperty.call(s,a)&&(e[a]=s[a]);for(d&&d(t);u.length;)u.shift()();return o.push.apply(o,i\|\|[]),n()}function n(){for(var e,t=0;t<o.length;t++){for(var n=o[t],a=!0,c=1;c<n.length;c++){var s=n[c];0!==r[s]&&(a=!1)}a&&(o.splice(t--,1),e=l(l.s=n[0]))}return e}var a={},r={30:0},o=[];function l(t){if(a[t])return a[t].exports;var n=a[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,l),n.l=!0,n.exports}l.m=e,l.c=a,l.d=function(e,t,n){l.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(l.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)l.d(n,a,function(t){return e[t]}.bind(null,a));return n},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=c.push.bind(c);c.push=t,c=c.slice();for(var i=0;i<c.length;i++)t(c[i]);var d=s;return o.push([764,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},764:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return A})),n.d(t,"getContents",(function(){return S}));var a=n(0),r=n.n(a),o=n(4),l=n(2),c=(n(27),n(14),n(15)),s=n(5),i=n.n(s),d=n(11),m=n(81),u=n(7),p=n(59),b=n(13),h=n(3),E=n.n(h),O=function(e){return r.a.createElement("div",{className:"demo-only",style:{paddingTop:"2rem"}},e.children)};O.propTypes={children:E.a.node};var j=function(e){return r.a.createElement("div",{className:"demo-only demo-component",style:{width:"100%",height:"10rem"}},e.children)};j.propTypes={children:E.a.node};var f=function(e){return r.a.createElement("div",{className:i()("slds-drop-zone",{"slds-drop-zone_drag":e.isDragging})},e.children)};f.propTypes={isDragging:E.a.bool,children:E.a.node};var g=function(e){return r.a.createElement("div",{className:"slds-drop-zone_drag__slot"})},v=function(e){return r.a.createElement("div",{className:i()("slds-drop-zone__container",{"slds-is-hovered":e.isHovered}),tabIndex:"-1"},r.a.createElement(_,{isContainer:!0,headerText:"Component Name"}),e.children,e.hasActions&&r.a.createElement("div",{className:"slds-drop-zone__actions"},r.a.createElement(p.a,null,r.a.createElement(u.b,{className:"slds-button_icon-x-small",theme:"brand",symbol:"move",assistiveText:"Move",title:"Move"}),r.a.createElement(u.b,{className:"slds-button_icon-x-small",theme:"brand",symbol:"close",assistiveText:"Close",title:"Close"}))))};v.propTypes={hasActions:E.a.bool,isHovered:E.a.bool,children:E.a.node};var y=function(e){return r.a.createElement(d.a,{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})};y.propTypes={isContainer:E.a.bool};var _=function(e){return r.a.createElement("div",{className:i()("slds-drop-zone__label",{"slds-drop-zone__label_container":e.isContainer})},r.a.createElement(m.a,{figureLeft:r.a.createElement(y,{isContainer:e.isContainer}),flavor:"center"},e.isContainer?r.a.createElement("h2",null,r.a.createElement("button",{className:"slds-drop-zone__label_button slds-button_reset"},r.a.createElement("span",{className:"slds-assistive-text"},"Edit: "),r.a.createElement("span",null,e.headerText))):r.a.createElement("h2",null,e.headerText)))};_.propTypes={isContainer:E.a.bool,headerText:E.a.string};b.d,b.c,b.a,b.b,b.d,b.c,b.a,b.b,b.d,b.c,b.a,b.b,b.d,b.c,b.a,b.b,n(34),n(1);var x=o.c.h2,C=o.c.h3,w=o.c.li,D=o.c.p,T=o.c.strong,N=o.c.ul,A=function(){return Object(a.createElement)(o.b,{},Object(a.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."),Object(a.createElement)(l.a,{exampleOnly:!0},Object(a.createElement)(f,null,Object(a.createElement)(j,null),Object(a.createElement)(v,{hasActions:!0,isHovered:!0},Object(a.createElement)(j,null)))),x({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."),Object(a.createElement)(c.a,{title:"Drop Zone - Base"},Object(a.createElement)(l.a,{toggleCode:!1},Object(a.createElement)(f,null,Object(a.createElement)(j,null)))),x({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."),Object(a.createElement)(c.a,{title:"Drop Zone - Drag Over"},Object(a.createElement)(l.a,null,Object(a.createElement)(O,null,Object(a.createElement)(f,{isDragging:!0},Object(a.createElement)(_,{headerText:"Content"}),Object(a.createElement)(j,null),Object(a.createElement)(g,null),Object(a.createElement)(j,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."),Object(a.createElement)(l.a,{toggleCode:!1},Object(a.createElement)(g,null)),D({},"The position of this element should be controlled by your implementation."),N({},w({},D({},T({},"When there are no components in the drop zone"),": The insertion point should be placed in the center.")),w({},D({},T({},"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."))),x({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."),Object(a.createElement)(c.a,{title:"Drop Zone - Container"},Object(a.createElement)(l.a,null,Object(a.createElement)(f,null,Object(a.createElement)(j,null),Object(a.createElement)(v,{hasActions:!0,isHovered:!0},Object(a.createElement)(j,null))))),x({id:"Example-Cards"},"Example - Cards"),Object(a.createElement)(c.a,{title:"Drop Zone - Cards Example"},Object(a.createElement)(l.a,null,Object(a.createElement)(O,null,Object(a.createElement)(f,null,Object(a.createElement)(v,{hasActions:!0},Object(a.createElement)(b.d,{className:"slds-m-bottom_small"},Object(a.createElement)(b.c,{title:"Accounts",showIcon:!0,symbol:"account"}),Object(a.createElement)(b.a,{hasPadding:!0},"Card Body"),Object(a.createElement)(b.b,{linkTabIndex:"-1"},"View All ",Object(a.createElement)("span",{className:"slds-assistive-text"},"Accounts")))),Object(a.createElement)(v,{hasActions:!0},Object(a.createElement)(b.d,{className:"slds-m-top_small"},Object(a.createElement)(b.c,{title:"Accounts",showIcon:!0,symbol:"account"}),Object(a.createElement)(b.a,{hasPadding:!0},"Card Body"),Object(a.createElement)(b.b,{linkTabIndex:"-1"},"View All ",Object(a.createElement)("span",{className:"slds-assistive-text"},"Accounts")))))))),x({id:"Example-Cards-Insertion"},"Example - Cards Insertion"),Object(a.createElement)(c.a,{title:"Drop Zone - Cards Insert Example"},Object(a.createElement)(l.a,null,Object(a.createElement)(O,null,Object(a.createElement)(f,{isDragging:!0},Object(a.createElement)(_,{headerText:"Content"}),Object(a.createElement)(v,{hasActions:!0},Object(a.createElement)(b.d,{className:"slds-m-bottom_small"},Object(a.createElement)(b.c,{title:"Accounts",showIcon:!0,symbol:"account"}),Object(a.createElement)(b.a,{hasPadding:!0},"Card Body"),Object(a.createElement)(b.b,{linkTabIndex:"-1"},"View All ",Object(a.createElement)("span",{className:"slds-assistive-text"},"Accounts")))),Object(a.createElement)(g,null),Object(a.createElement)(v,{hasActions:!0},Object(a.createElement)(b.d,{className:"slds-m-top_small"},Object(a.createElement)(b.c,{title:"Accounts",showIcon:!0,symbol:"account"}),Object(a.createElement)(b.a,{hasPadding:!0},"Card Body"),Object(a.createElement)(b.b,{linkTabIndex:"-1"},"View All ",Object(a.createElement)("span",{className:"slds-assistive-text"},"Accounts")))))))))},S=function(){return Object(o.a)(A())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/drop-zone/docs.mdx.js"]=function(e){function t(t){for(var a,l,c=t[0],s=t[1],i=t[2],m=0,u=[];m<c.length;m++)l=c[m],Object.prototype.hasOwnProperty.call(r,l)&&r[l]&&u.push(r[l][0]),r[l]=0;for(a in s)Object.prototype.hasOwnProperty.call(s,a)&&(e[a]=s[a]);for(d&&d(t);u.length;)u.shift()();return o.push.apply(o,i\|\|[]),n()}function n(){for(var e,t=0;t<o.length;t++){for(var n=o[t],a=!0,c=1;c<n.length;c++){var s=n[c];0!==r[s]&&(a=!1)}a&&(o.splice(t--,1),e=l(l.s=n[0]))}return e}var a={},r={30:0},o=[];function l(t){if(a[t])return a[t].exports;var n=a[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,l),n.l=!0,n.exports}l.m=e,l.c=a,l.d=function(e,t,n){l.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(l.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)l.d(n,a,function(t){return e[t]}.bind(null,a));return n},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=c.push.bind(c);c.push=t,c=c.slice();for(var i=0;i<c.length;i++)t(c[i]);var d=s;return o.push([764,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},764:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return A})),n.d(t,"getContents",(function(){return S}));var a=n(0),r=n.n(a),o=n(4),l=n(2),c=(n(27),n(14),n(15)),s=n(5),i=n.n(s),d=n(11),m=n(81),u=n(7),p=n(59),b=n(13),h=n(3),E=n.n(h),O=function(e){return r.a.createElement("div",{className:"demo-only",style:{paddingTop:"2rem"}},e.children)};O.propTypes={children:E.a.node};var j=function(e){return r.a.createElement("div",{className:"demo-only demo-component",style:{width:"100%",height:"10rem"}},e.children)};j.propTypes={children:E.a.node};var f=function(e){return r.a.createElement("div",{className:i()("slds-drop-zone",{"slds-drop-zone_drag":e.isDragging})},e.children)};f.propTypes={isDragging:E.a.bool,children:E.a.node};var g=function(e){return r.a.createElement("div",{className:"slds-drop-zone_drag__slot"})},v=function(e){return r.a.createElement("div",{className:i()("slds-drop-zone__container",{"slds-is-hovered":e.isHovered}),tabIndex:"-1"},r.a.createElement(_,{isContainer:!0,headerText:"Component Name"}),e.children,e.hasActions&&r.a.createElement("div",{className:"slds-drop-zone__actions"},r.a.createElement(p.a,null,r.a.createElement(u.b,{className:"slds-button_icon-x-small",theme:"brand",symbol:"move",assistiveText:"Move",title:"Move"}),r.a.createElement(u.b,{className:"slds-button_icon-x-small",theme:"brand",symbol:"close",assistiveText:"Close",title:"Close"}))))};v.propTypes={hasActions:E.a.bool,isHovered:E.a.bool,children:E.a.node};var y=function(e){return r.a.createElement(d.a,{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})};y.propTypes={isContainer:E.a.bool};var _=function(e){return r.a.createElement("div",{className:i()("slds-drop-zone__label",{"slds-drop-zone__label_container":e.isContainer})},r.a.createElement(m.a,{figureLeft:r.a.createElement(y,{isContainer:e.isContainer}),flavor:"center"},e.isContainer?r.a.createElement("h2",null,r.a.createElement("button",{className:"slds-drop-zone__label_button slds-button_reset"},r.a.createElement("span",{className:"slds-assistive-text"},"Edit: "),r.a.createElement("span",null,e.headerText))):r.a.createElement("h2",null,e.headerText)))};_.propTypes={isContainer:E.a.bool,headerText:E.a.string};b.d,b.c,b.a,b.b,b.d,b.c,b.a,b.b,b.d,b.c,b.a,b.b,b.d,b.c,b.a,b.b,n(35),n(1);var x=o.c.h2,C=o.c.h3,w=o.c.li,D=o.c.p,T=o.c.strong,N=o.c.ul,A=function(){return Object(a.createElement)(o.b,{},Object(a.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."),Object(a.createElement)(l.a,{exampleOnly:!0},Object(a.createElement)(f,null,Object(a.createElement)(j,null),Object(a.createElement)(v,{hasActions:!0,isHovered:!0},Object(a.createElement)(j,null)))),x({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."),Object(a.createElement)(c.a,{title:"Drop Zone - Base"},Object(a.createElement)(l.a,{toggleCode:!1},Object(a.createElement)(f,null,Object(a.createElement)(j,null)))),x({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."),Object(a.createElement)(c.a,{title:"Drop Zone - Drag Over"},Object(a.createElement)(l.a,null,Object(a.createElement)(O,null,Object(a.createElement)(f,{isDragging:!0},Object(a.createElement)(_,{headerText:"Content"}),Object(a.createElement)(j,null),Object(a.createElement)(g,null),Object(a.createElement)(j,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."),Object(a.createElement)(l.a,{toggleCode:!1},Object(a.createElement)(g,null)),D({},"The position of this element should be controlled by your implementation."),N({},w({},D({},T({},"When there are no components in the drop zone"),": The insertion point should be placed in the center.")),w({},D({},T({},"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."))),x({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."),Object(a.createElement)(c.a,{title:"Drop Zone - Container"},Object(a.createElement)(l.a,null,Object(a.createElement)(f,null,Object(a.createElement)(j,null),Object(a.createElement)(v,{hasActions:!0,isHovered:!0},Object(a.createElement)(j,null))))),x({id:"Example-Cards"},"Example - Cards"),Object(a.createElement)(c.a,{title:"Drop Zone - Cards Example"},Object(a.createElement)(l.a,null,Object(a.createElement)(O,null,Object(a.createElement)(f,null,Object(a.createElement)(v,{hasActions:!0},Object(a.createElement)(b.d,{className:"slds-m-bottom_small"},Object(a.createElement)(b.c,{title:"Accounts",showIcon:!0,symbol:"account"}),Object(a.createElement)(b.a,{hasPadding:!0},"Card Body"),Object(a.createElement)(b.b,{linkTabIndex:"-1"},"View All ",Object(a.createElement)("span",{className:"slds-assistive-text"},"Accounts")))),Object(a.createElement)(v,{hasActions:!0},Object(a.createElement)(b.d,{className:"slds-m-top_small"},Object(a.createElement)(b.c,{title:"Accounts",showIcon:!0,symbol:"account"}),Object(a.createElement)(b.a,{hasPadding:!0},"Card Body"),Object(a.createElement)(b.b,{linkTabIndex:"-1"},"View All ",Object(a.createElement)("span",{className:"slds-assistive-text"},"Accounts")))))))),x({id:"Example-Cards-Insertion"},"Example - Cards Insertion"),Object(a.createElement)(c.a,{title:"Drop Zone - Cards Insert Example"},Object(a.createElement)(l.a,null,Object(a.createElement)(O,null,Object(a.createElement)(f,{isDragging:!0},Object(a.createElement)(_,{headerText:"Content"}),Object(a.createElement)(v,{hasActions:!0},Object(a.createElement)(b.d,{className:"slds-m-bottom_small"},Object(a.createElement)(b.c,{title:"Accounts",showIcon:!0,symbol:"account"}),Object(a.createElement)(b.a,{hasPadding:!0},"Card Body"),Object(a.createElement)(b.b,{linkTabIndex:"-1"},"View All ",Object(a.createElement)("span",{className:"slds-assistive-text"},"Accounts")))),Object(a.createElement)(g,null),Object(a.createElement)(v,{hasActions:!0},Object(a.createElement)(b.d,{className:"slds-m-top_small"},Object(a.createElement)(b.c,{title:"Accounts",showIcon:!0,symbol:"account"}),Object(a.createElement)(b.a,{hasPadding:!0},"Card Body"),Object(a.createElement)(b.b,{linkTabIndex:"-1"},"View All ",Object(a.createElement)("span",{className:"slds-assistive-text"},"Accounts")))))))))},S=function(){return Object(o.a)(A())}}});

package/__internal/chunked/docs/ui/components/dueling-picklist/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/dueling-picklist/docs.mdx.js"]=function(e){function t(t){for(var i,c,s=t[0],o=t[1],r=t[2],u=0,m=[];u<s.length;u++)c=s[u],Object.prototype.hasOwnProperty.call(a,c)&&a[c]&&m.push(a[c][0]),a[c]=0;for(i in o)Object.prototype.hasOwnProperty.call(o,i)&&(e[i]=o[i]);for(d&&d(t);m.length;)m.shift()();return n.push.apply(n,r\|\|[]),l()}function l(){for(var e,t=0;t<n.length;t++){for(var l=n[t],i=!0,s=1;s<l.length;s++){var o=l[s];0!==a[o]&&(i=!1)}i&&(n.splice(t--,1),e=c(c.s=l[0]))}return e}var i={},a={31:0},n=[];function c(t){if(i[t])return i[t].exports;var l=i[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,c),l.l=!0,l.exports}c.m=e,c.c=i,c.d=function(e,t,l){c.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:l})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(c.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)c.d(l,i,function(t){return e[t]}.bind(null,i));return l},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/assets/scripts/bundle/";var s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=s.push.bind(s);s.push=t,s=s.slice();for(var r=0;r<s.length;r++)t(s[r]);var d=o;return n.push([712,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},712:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return E})),l.d(t,"getContents",(function(){return f}));var i=l(0),a=l(4),n=l(2),c=l(27),s=l(15),o=l(14),r=l(36),d=(l(147),a.c.a),u=a.c.code,m=a.c.em,b=a.c.h2,h=a.c.h3,p=a.c.h4,j=a.c.li,g=a.c.p,O=a.c.ul,E=function(){return Object(i.createElement)(a.b,{},Object(i.createElement)("div",{className:"doc lead"},"A dueling-picklist is used to move options between two lists and is often referred to as a multi-select. Sometimes, the list options can then be re-ordered, depending on the use case."),Object(i.createElement)(n.a,{exampleOnly:!0},Object(i.createElement)(r.j,{dataSet:r.m,noReorder:!0})),b({id:"About-Dueling-Picklist"},"About Dueling-Picklist"),h({id:"Accessibility"},"Accessibility"),g({},"This component is essentially 2 ARIA listboxes side by side, so we follow the ",d({href:"https://www.w3.org/TR/wai-aria-practices/#Listbox"},"ARIA practices guide")," to help implement their interaction in an accessible way. Some additional details, supplementary to the ARIA guide include:"),p({id:"Markup"},"Markup"),O({},j({},u({},'aria-multiselectable="true"')," should be set on each listbox"),j({},u({},"aria-selected")," should be placed on each ",u({},'role="option"'),", and set to ",u({},"false")," by default"),j({},u({},"aria-labelledby")," is used to identify the list to the user and should point to the list label"),j({},u({},"aria-describedby")," is used to provide operation instructions for the Drag and Drop interaction"),j({},u({},"tabindex"),' should be set to "0" when an item is selected and "-1" otherwise')),p({id:"Focus-Management"},"Focus Management"),O({},j({},"Initially, nothing should be selected and the first item in each list should have ",u({},'tabindex="0"')),j({},"When an item is focused, it becomes selected"),j({},"When focus leaves the list, the last selected item remains selected and focusable. When focus returns to the list focus is placed on the last selected item."),j({},"When moving items:",O({},j({},"With the move button: the items are unselected and added to the target list. The focus should remain on the move button."),j({},"With a keyboard shortcut: focus remains on the item, but in the target list. Since the item is focused, it is also selected."),j({},"If there are already selected items in the target list, they stay selected and the new items are added below them.")))),p({id:"Keyboard-Interactions"},"Keyboard Interactions"),O({},j({},"Each list has a single focusable option inside. There is only ever one focusable option per list and it is expected that a user will use their arrow keys, and some modifier keys, to perform all actions."),j({},"Because we support drag and drop re-ordering within a list, we implement the second multi-select keyboard model.",O({},j({},u({},"up")," and ",u({},"down")," arrows move focus ",m({},"and")," selection, with ",u({},'aria-selected="true"'),". Any previously selected items are deselected."),j({},u({},"shift + up")," and ",u({},"shift + down")," move focus and creates addition selections"),j({},u({},"ctrl + down")," or ",u({},"ctrl + up")," moves focus but selection remains where it is"),j({},u({},"ctrl + space")," toggles selection on the focused option, in addition to previous selections"),j({},u({},"ctrl + a")," selects all options in the list"),j({},u({},"cmd/ctrl + right")," and ",u({},"cmd/ctrl + left")," Moves selected items between lists"),j({},u({},"space"),' toggles "Drag and Drop" mode. When in "Drag and Drop" mode:',O({},j({},u({},"up")," and ",u({},"down")," arrows move the selected items ",m({},"within")," the current list")))))),b({id:"Base"},"Base"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Reorder"},Object(i.createElement)(r.j,{dataSet:r.b})),b({id:"Group-Label"},"Group Label"),g({},"A Dueling Picklist should have a group label, similar to using a ",u({},"fieldset")," and ",u({},"legend")," on grouped form controls. To achieve this, wrap the Dueling Picklist in an ",u({},"slds-form-element")," and add a ",u({},"div")," with the same class names that are applied to a ",u({},"legend")," element in a fieldset, ",u({},"slds-form-element__label slds-form-element__legend"),"."),Object(i.createElement)(o.a,{header:"Labeling the group",type:"a11y"},Object(i.createElement)("p",null,"It is important that the ",Object(i.createElement)("code",null,"slds-form-element")," ",Object(i.createElement)("code",null,"<div>")," has the ",Object(i.createElement)("code",null,'role="group"')," attribute applied, along with ",Object(i.createElement)("code",null,"aria-labelledby"),", whose value is the ID of the visible group label.")),Object(i.createElement)(s.a,{title:"Dueling Picklist With Group Label"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.b}))),b({id:"Responsive"},"Responsive"),g({},"To make the dueling picklist responsive or use it within narrow regions, apply the class ",u({},"slds-dueling-picklist__column_responsive")," to the ",u({},"<div>"),"s with class ",u({},"slds-dueling-picklist__column")," that contain options (not the columns that only contain buttons). The dueling picklist will take up all available horizontal space, and any items longer than the available space will truncate with an ellipsis."),Object(i.createElement)(s.a,{title:"Dueling Picklist Responsive"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.a,noReorder:!0,isResponsive:!0}))),Object(i.createElement)(o.a,{header:"Adjusting Height",type:"note"},Object(i.createElement)("p",null,"To adjust the height of the listboxes, set the height using an inline style on _both_ of the ",Object(i.createElement)("code",null,"<div>"),"s with class ",Object(i.createElement)("code",null,"slds-dueling-picklist__column"),". If you are setting it based on a maximum number of items being shown before scrolling, you can set ",Object(i.createElement)("code",null,"height = (2.25rem * numItems) + 1rem"),".")),Object(i.createElement)(c.a,{toggleCode:!1},Object(i.createElement)("div",{className:"slds-dueling-list"},Object(i.createElement)("div",{className:"slds-dueling-list__column"},Object(i.createElement)("span",{className:"slds-form-element__label",id:"label-1"},"Available Languages"),Object(i.createElement)("div",{className:"slds-dueling-list__options",style:{height:"10rem"}},"...")),Object(i.createElement)("div",{className:"slds-dueling-list__column"},"..."),Object(i.createElement)("div",{className:"slds-dueling-list__column"},Object(i.createElement)("span",{className:"slds-form-element__label",id:"label-2"},"Selected Languages"),Object(i.createElement)("div",{className:"slds-dueling-list__options",style:{height:"10rem"}},"...")))),b({id:"Edit-Mode"},"Edit Mode"),g({},"If the user needs to select multiple options for a field, like a list of languages supported, then use a dueling picklist without the re-order arrows on the right."),Object(i.createElement)(o.a,{header:"Helpful Assistive Text",type:"a11y"},Object(i.createElement)("p",null,"The assistive text content in the ",Object(i.createElement)("code",null,"option-drag-label")," ",Object(i.createElement)("code",null,"<div>")," should provide clear instructions on how to drag and drop with a keyboard. See the ",Object(i.createElement)("a",{href:"#Keyboard-Interactions"},"keyboard interactions section")," above for modifier key information.")),Object(i.createElement)(s.a,{title:"Dueling Picklist"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.a,noReorder:!0}))),h({id:"Selected-Item"},"Selected Item"),Object(i.createElement)(o.a,{header:"Aria Selected",type:"a11y"},Object(i.createElement)("p",null,Object(i.createElement)("code",null,"aria-selected")," should be placed on each"," ",Object(i.createElement)("code",null,'role="option"'),", and set to"," ",Object(i.createElement)("code",null,"true")," when the item is selected.")),Object(i.createElement)(s.a,{title:"Dueling Picklist with Item Selected"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.m,noReorder:!0}))),h({id:"Multiple-Selected-Items"},"Multiple Selected Items"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Multiple Items Selected"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.l,noReorder:!0}))),h({id:"Dropped-Items"},"Dropped Items"),Object(i.createElement)(o.a,{type:"a11y",header:"Aria Live"},Object(i.createElement)("p",null,"The ",Object(i.createElement)("code",null,"drag-live-region")," ",Object(i.createElement)("code",null,"<div>")," with ",Object(i.createElement)("code",null,'aria-live="assertive"')," should update as items are moved to provide context about the state and location of the items.")),Object(i.createElement)(c.a,{toggleCode:!1},Object(i.createElement)("div",{className:"slds-dueling-list"},Object(i.createElement)("div",{className:"slds-assistive-text",id:"drag-live-region","aria-live":"assertive"},"Arabic and German: Moved to Selected Languages."))),Object(i.createElement)(s.a,{title:"Dueling Picklist with Items Dropped"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.e,noReorder:!0}))),h({id:"Locked-Items"},"Locked Items"),g({},"If items are not able to be removed or reordered from the selected list, a lock icon appears next to the item name."),Object(i.createElement)(o.a,{type:"a11y",header:"Aria Disabled and Assistive Text"},Object(i.createElement)("p",null,"For each locked item, ",Object(i.createElement)("code",null,'aria-disabled="true"')," must be applied to ",Object(i.createElement)("code",null,".slds-listbox__option")," and assistive text (",Object(i.createElement)("code",null,".slds-assistive-text"),") must be added to"," ",Object(i.createElement)("code",null,".slds-icon_container"),".")),Object(i.createElement)(s.a,{title:"Dueling Picklist with a Locked Item"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.h,noReorder:!0}))),h({id:"With-Reordering"},"With Reordering"),g({},"If the order of the selected options matters, include the vertical arrows to the right. This allows the user to reorder the second listbox of options."),Object(i.createElement)(s.a,{title:"Dueling Picklist with Reorder Active"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.b}))),g({},"The following examples show the process of selecting an item, moving it within a list, and dropping it in a final position."),Object(i.createElement)(o.a,{type:"a11y",header:"Aria Live"},Object(i.createElement)("p",null,"Pay attention to the ",Object(i.createElement)("code",null,"drag-live-region")," ",Object(i.createElement)("code",null,"<div>")," with"," ",Object(i.createElement)("code",null,'aria-live="assertive"'),". This should update as items are moved to provide context about the state and location of the items at all times.")),p({id:"Item-Selected"},"Item Selected"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Reorder Active Item Selected"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.n}))),p({id:"Item-Grabbed"},"Item Grabbed"),g({},"Within a list, users are able to drag and drop an item."),Object(i.createElement)(s.a,{title:"Dueling Picklist with Reorder Active Item Grabbed"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.g}))),p({id:"Item-Moved-Within-a-List"},"Item Moved Within a List"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Reorder Active Item Moved within List"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.i}))),p({id:"Item-Dropped-in-a-List"},"Item Dropped in a List"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Reorder Active Item Dropped"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.f}))),h({id:"Disabled"},"Disabled"),g({},"If the user is not able to interact with the dueling picklist, then it should be marked as disabled."),Object(i.createElement)(o.a,{type:"a11y",header:"Aria Disabled"},Object(i.createElement)("p",null,"In disabled mode, both list boxes"," ",Object(i.createElement)("code",null,"ul[role=listbox]")," should receive"," ",Object(i.createElement)("code",null,'aria-disabled="true"'),", and all directional buttons should receive the ",Object(i.createElement)("code",null,"disabled")," attribute.")),Object(i.createElement)(o.a,{type:"note",header:"Utility Class"},Object(i.createElement)("p",null,"The class ",Object(i.createElement)("code",null,"slds-is-disabled")," should also be applied to the divs with the class"," ",Object(i.createElement)("code",null,"slds-dueling-list_options"),".")),Object(i.createElement)(s.a,{title:"Dueling Picklist Disabled"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.d,disabled:!0}))),h({id:"Required"},"Required"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Required Indicator"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.b,isRequired:!0}))),h({id:"With-Tooltip"},"With Tooltip"),g({},"If some contextual information regarding the dueling picklist is needed, add a tooltip next to the group label."),Object(i.createElement)(s.a,{title:"Dueling Picklist with Tooltip"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.c,null,Object(i.createElement)(r.j,{dataSet:r.b,hasTooltip:!0,showTooltip:!0})))),h({id:"Required-With-Tooltip"},"Required With Tooltip"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Required Indicator and Tooltip"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.c,null,Object(i.createElement)(r.j,{dataSet:r.b,isRequired:!0,hasTooltip:!0,showTooltip:!0})))),b({id:"View-Mode"},"View Mode"),g({},"When the user is done selecting options, or is in view mode of the field, they are presented with a comma separated list."),Object(i.createElement)(s.a,{title:"Dueling Picklist in View Mode"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.k,null))))},f=function(){return Object(a.a)(E())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/dueling-picklist/docs.mdx.js"]=function(e){function t(t){for(var i,c,s=t[0],o=t[1],r=t[2],u=0,m=[];u<s.length;u++)c=s[u],Object.prototype.hasOwnProperty.call(a,c)&&a[c]&&m.push(a[c][0]),a[c]=0;for(i in o)Object.prototype.hasOwnProperty.call(o,i)&&(e[i]=o[i]);for(d&&d(t);m.length;)m.shift()();return n.push.apply(n,r\|\|[]),l()}function l(){for(var e,t=0;t<n.length;t++){for(var l=n[t],i=!0,s=1;s<l.length;s++){var o=l[s];0!==a[o]&&(i=!1)}i&&(n.splice(t--,1),e=c(c.s=l[0]))}return e}var i={},a={31:0},n=[];function c(t){if(i[t])return i[t].exports;var l=i[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,c),l.l=!0,l.exports}c.m=e,c.c=i,c.d=function(e,t,l){c.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:l})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(c.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)c.d(l,i,function(t){return e[t]}.bind(null,i));return l},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/assets/scripts/bundle/";var s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=s.push.bind(s);s.push=t,s=s.slice();for(var r=0;r<s.length;r++)t(s[r]);var d=o;return n.push([712,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},712:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return E})),l.d(t,"getContents",(function(){return f}));var i=l(0),a=l(4),n=l(2),c=l(27),s=l(15),o=l(14),r=l(37),d=(l(147),a.c.a),u=a.c.code,m=a.c.em,b=a.c.h2,h=a.c.h3,p=a.c.h4,j=a.c.li,g=a.c.p,O=a.c.ul,E=function(){return Object(i.createElement)(a.b,{},Object(i.createElement)("div",{className:"doc lead"},"A dueling-picklist is used to move options between two lists and is often referred to as a multi-select. Sometimes, the list options can then be re-ordered, depending on the use case."),Object(i.createElement)(n.a,{exampleOnly:!0},Object(i.createElement)(r.j,{dataSet:r.m,noReorder:!0})),b({id:"About-Dueling-Picklist"},"About Dueling-Picklist"),h({id:"Accessibility"},"Accessibility"),g({},"This component is essentially 2 ARIA listboxes side by side, so we follow the ",d({href:"https://www.w3.org/TR/wai-aria-practices/#Listbox"},"ARIA practices guide")," to help implement their interaction in an accessible way. Some additional details, supplementary to the ARIA guide include:"),p({id:"Markup"},"Markup"),O({},j({},u({},'aria-multiselectable="true"')," should be set on each listbox"),j({},u({},"aria-selected")," should be placed on each ",u({},'role="option"'),", and set to ",u({},"false")," by default"),j({},u({},"aria-labelledby")," is used to identify the list to the user and should point to the list label"),j({},u({},"aria-describedby")," is used to provide operation instructions for the Drag and Drop interaction"),j({},u({},"tabindex"),' should be set to "0" when an item is selected and "-1" otherwise')),p({id:"Focus-Management"},"Focus Management"),O({},j({},"Initially, nothing should be selected and the first item in each list should have ",u({},'tabindex="0"')),j({},"When an item is focused, it becomes selected"),j({},"When focus leaves the list, the last selected item remains selected and focusable. When focus returns to the list focus is placed on the last selected item."),j({},"When moving items:",O({},j({},"With the move button: the items are unselected and added to the target list. The focus should remain on the move button."),j({},"With a keyboard shortcut: focus remains on the item, but in the target list. Since the item is focused, it is also selected."),j({},"If there are already selected items in the target list, they stay selected and the new items are added below them.")))),p({id:"Keyboard-Interactions"},"Keyboard Interactions"),O({},j({},"Each list has a single focusable option inside. There is only ever one focusable option per list and it is expected that a user will use their arrow keys, and some modifier keys, to perform all actions."),j({},"Because we support drag and drop re-ordering within a list, we implement the second multi-select keyboard model.",O({},j({},u({},"up")," and ",u({},"down")," arrows move focus ",m({},"and")," selection, with ",u({},'aria-selected="true"'),". Any previously selected items are deselected."),j({},u({},"shift + up")," and ",u({},"shift + down")," move focus and creates addition selections"),j({},u({},"ctrl + down")," or ",u({},"ctrl + up")," moves focus but selection remains where it is"),j({},u({},"ctrl + space")," toggles selection on the focused option, in addition to previous selections"),j({},u({},"ctrl + a")," selects all options in the list"),j({},u({},"cmd/ctrl + right")," and ",u({},"cmd/ctrl + left")," Moves selected items between lists"),j({},u({},"space"),' toggles "Drag and Drop" mode. When in "Drag and Drop" mode:',O({},j({},u({},"up")," and ",u({},"down")," arrows move the selected items ",m({},"within")," the current list")))))),b({id:"Base"},"Base"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Reorder"},Object(i.createElement)(r.j,{dataSet:r.b})),b({id:"Group-Label"},"Group Label"),g({},"A Dueling Picklist should have a group label, similar to using a ",u({},"fieldset")," and ",u({},"legend")," on grouped form controls. To achieve this, wrap the Dueling Picklist in an ",u({},"slds-form-element")," and add a ",u({},"div")," with the same class names that are applied to a ",u({},"legend")," element in a fieldset, ",u({},"slds-form-element__label slds-form-element__legend"),"."),Object(i.createElement)(o.a,{header:"Labeling the group",type:"a11y"},Object(i.createElement)("p",null,"It is important that the ",Object(i.createElement)("code",null,"slds-form-element")," ",Object(i.createElement)("code",null,"<div>")," has the ",Object(i.createElement)("code",null,'role="group"')," attribute applied, along with ",Object(i.createElement)("code",null,"aria-labelledby"),", whose value is the ID of the visible group label.")),Object(i.createElement)(s.a,{title:"Dueling Picklist With Group Label"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.b}))),b({id:"Responsive"},"Responsive"),g({},"To make the dueling picklist responsive or use it within narrow regions, apply the class ",u({},"slds-dueling-picklist__column_responsive")," to the ",u({},"<div>"),"s with class ",u({},"slds-dueling-picklist__column")," that contain options (not the columns that only contain buttons). The dueling picklist will take up all available horizontal space, and any items longer than the available space will truncate with an ellipsis."),Object(i.createElement)(s.a,{title:"Dueling Picklist Responsive"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.a,noReorder:!0,isResponsive:!0}))),Object(i.createElement)(o.a,{header:"Adjusting Height",type:"note"},Object(i.createElement)("p",null,"To adjust the height of the listboxes, set the height using an inline style on _both_ of the ",Object(i.createElement)("code",null,"<div>"),"s with class ",Object(i.createElement)("code",null,"slds-dueling-picklist__column"),". If you are setting it based on a maximum number of items being shown before scrolling, you can set ",Object(i.createElement)("code",null,"height = (2.25rem * numItems) + 1rem"),".")),Object(i.createElement)(c.a,{toggleCode:!1},Object(i.createElement)("div",{className:"slds-dueling-list"},Object(i.createElement)("div",{className:"slds-dueling-list__column"},Object(i.createElement)("span",{className:"slds-form-element__label",id:"label-1"},"Available Languages"),Object(i.createElement)("div",{className:"slds-dueling-list__options",style:{height:"10rem"}},"...")),Object(i.createElement)("div",{className:"slds-dueling-list__column"},"..."),Object(i.createElement)("div",{className:"slds-dueling-list__column"},Object(i.createElement)("span",{className:"slds-form-element__label",id:"label-2"},"Selected Languages"),Object(i.createElement)("div",{className:"slds-dueling-list__options",style:{height:"10rem"}},"...")))),b({id:"Edit-Mode"},"Edit Mode"),g({},"If the user needs to select multiple options for a field, like a list of languages supported, then use a dueling picklist without the re-order arrows on the right."),Object(i.createElement)(o.a,{header:"Helpful Assistive Text",type:"a11y"},Object(i.createElement)("p",null,"The assistive text content in the ",Object(i.createElement)("code",null,"option-drag-label")," ",Object(i.createElement)("code",null,"<div>")," should provide clear instructions on how to drag and drop with a keyboard. See the ",Object(i.createElement)("a",{href:"#Keyboard-Interactions"},"keyboard interactions section")," above for modifier key information.")),Object(i.createElement)(s.a,{title:"Dueling Picklist"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.a,noReorder:!0}))),h({id:"Selected-Item"},"Selected Item"),Object(i.createElement)(o.a,{header:"Aria Selected",type:"a11y"},Object(i.createElement)("p",null,Object(i.createElement)("code",null,"aria-selected")," should be placed on each"," ",Object(i.createElement)("code",null,'role="option"'),", and set to"," ",Object(i.createElement)("code",null,"true")," when the item is selected.")),Object(i.createElement)(s.a,{title:"Dueling Picklist with Item Selected"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.m,noReorder:!0}))),h({id:"Multiple-Selected-Items"},"Multiple Selected Items"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Multiple Items Selected"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.l,noReorder:!0}))),h({id:"Dropped-Items"},"Dropped Items"),Object(i.createElement)(o.a,{type:"a11y",header:"Aria Live"},Object(i.createElement)("p",null,"The ",Object(i.createElement)("code",null,"drag-live-region")," ",Object(i.createElement)("code",null,"<div>")," with ",Object(i.createElement)("code",null,'aria-live="assertive"')," should update as items are moved to provide context about the state and location of the items.")),Object(i.createElement)(c.a,{toggleCode:!1},Object(i.createElement)("div",{className:"slds-dueling-list"},Object(i.createElement)("div",{className:"slds-assistive-text",id:"drag-live-region","aria-live":"assertive"},"Arabic and German: Moved to Selected Languages."))),Object(i.createElement)(s.a,{title:"Dueling Picklist with Items Dropped"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.e,noReorder:!0}))),h({id:"Locked-Items"},"Locked Items"),g({},"If items are not able to be removed or reordered from the selected list, a lock icon appears next to the item name."),Object(i.createElement)(o.a,{type:"a11y",header:"Aria Disabled and Assistive Text"},Object(i.createElement)("p",null,"For each locked item, ",Object(i.createElement)("code",null,'aria-disabled="true"')," must be applied to ",Object(i.createElement)("code",null,".slds-listbox__option")," and assistive text (",Object(i.createElement)("code",null,".slds-assistive-text"),") must be added to"," ",Object(i.createElement)("code",null,".slds-icon_container"),".")),Object(i.createElement)(s.a,{title:"Dueling Picklist with a Locked Item"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.h,noReorder:!0}))),h({id:"With-Reordering"},"With Reordering"),g({},"If the order of the selected options matters, include the vertical arrows to the right. This allows the user to reorder the second listbox of options."),Object(i.createElement)(s.a,{title:"Dueling Picklist with Reorder Active"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.b}))),g({},"The following examples show the process of selecting an item, moving it within a list, and dropping it in a final position."),Object(i.createElement)(o.a,{type:"a11y",header:"Aria Live"},Object(i.createElement)("p",null,"Pay attention to the ",Object(i.createElement)("code",null,"drag-live-region")," ",Object(i.createElement)("code",null,"<div>")," with"," ",Object(i.createElement)("code",null,'aria-live="assertive"'),". This should update as items are moved to provide context about the state and location of the items at all times.")),p({id:"Item-Selected"},"Item Selected"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Reorder Active Item Selected"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.n}))),p({id:"Item-Grabbed"},"Item Grabbed"),g({},"Within a list, users are able to drag and drop an item."),Object(i.createElement)(s.a,{title:"Dueling Picklist with Reorder Active Item Grabbed"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.g}))),p({id:"Item-Moved-Within-a-List"},"Item Moved Within a List"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Reorder Active Item Moved within List"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.i}))),p({id:"Item-Dropped-in-a-List"},"Item Dropped in a List"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Reorder Active Item Dropped"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.f}))),h({id:"Disabled"},"Disabled"),g({},"If the user is not able to interact with the dueling picklist, then it should be marked as disabled."),Object(i.createElement)(o.a,{type:"a11y",header:"Aria Disabled"},Object(i.createElement)("p",null,"In disabled mode, both list boxes"," ",Object(i.createElement)("code",null,"ul[role=listbox]")," should receive"," ",Object(i.createElement)("code",null,'aria-disabled="true"'),", and all directional buttons should receive the ",Object(i.createElement)("code",null,"disabled")," attribute.")),Object(i.createElement)(o.a,{type:"note",header:"Utility Class"},Object(i.createElement)("p",null,"The class ",Object(i.createElement)("code",null,"slds-is-disabled")," should also be applied to the divs with the class"," ",Object(i.createElement)("code",null,"slds-dueling-list_options"),".")),Object(i.createElement)(s.a,{title:"Dueling Picklist Disabled"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.d,disabled:!0}))),h({id:"Required"},"Required"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Required Indicator"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.j,{dataSet:r.b,isRequired:!0}))),h({id:"With-Tooltip"},"With Tooltip"),g({},"If some contextual information regarding the dueling picklist is needed, add a tooltip next to the group label."),Object(i.createElement)(s.a,{title:"Dueling Picklist with Tooltip"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.c,null,Object(i.createElement)(r.j,{dataSet:r.b,hasTooltip:!0,showTooltip:!0})))),h({id:"Required-With-Tooltip"},"Required With Tooltip"),Object(i.createElement)(s.a,{title:"Dueling Picklist with Required Indicator and Tooltip"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.c,null,Object(i.createElement)(r.j,{dataSet:r.b,isRequired:!0,hasTooltip:!0,showTooltip:!0})))),b({id:"View-Mode"},"View Mode"),g({},"When the user is done selecting options, or is in view mode of the field, they are presented with a comma separated list."),Object(i.createElement)(s.a,{title:"Dueling Picklist in View Mode"},Object(i.createElement)(n.a,null,Object(i.createElement)(r.k,null))))},f=function(){return Object(a.a)(E())}}});

package/__internal/chunked/docs/ui/components/expandable-section/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/expandable-section/docs.mdx.js"]=function(e){function t(t){for(var o,s,c=t[0],r=t[1],l=t[2],d=0,h=[];d<c.length;d++)s=c[d],Object.prototype.hasOwnProperty.call(a,s)&&a[s]&&h.push(a[s][0]),a[s]=0;for(o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);for(u&&u(t);h.length;)h.shift()();return i.push.apply(i,l\|\|[]),n()}function n(){for(var e,t=0;t<i.length;t++){for(var n=i[t],o=!0,c=1;c<n.length;c++){var r=n[c];0!==a[r]&&(o=!1)}o&&(i.splice(t--,1),e=s(s.s=n[0]))}return e}var o={},a={34:0},i=[];function s(t){if(o[t])return o[t].exports;var n=o[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,s),n.l=!0,n.exports}s.m=e,s.c=o,s.d=function(e,t,n){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)s.d(n,o,function(t){return e[t]}.bind(null,o));return n},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=c.push.bind(c);c.push=t,c=c.slice();for(var l=0;l<c.length;l++)t(c[l]);var u=r;return i.push([621,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},621:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return y})),n.d(t,"getContents",(function(){return v}));var o=n(0),a=n(4),i=n(2),s=(n(28),n(45),n(14),n(1)),c=n(83),r=a.c.code,l=a.c.h2,u=a.c.h3,d=a.c.h4,h=a.c.li,b=a.c.p,p=a.c.strong,f=a.c.ul,y=function(){return Object(o.createElement)(a.b,{},Object(o.createElement)("div",{className:"doc lead"},"Toggle visibility of section content"),Object(o.createElement)(i.a,{exampleOnly:!0},Object(s.f)(c.e)),l({id:"About-Expandable-Section"},"About Expandable Section"),b({},"Section Titles are interactive titles that open and close sections, typically on a form."),u({id:"Accessibility"},"Accessibility"),b({},"If the Section Title is interactive, the button needs to be associated with the section so that assistive technology knows what the button opens and closes. The button and section also need ARIA attributes to indicate the open and closed state of the section."),d({id:"Markup"},"Markup"),b({},p({},"Button:")),f({},h({},r({},"aria-controls")," is used to create an association between the button and the section. If the section has an ",r({},'id="content"'),", then the button should have ",r({},'aria-controls="content"'),"."),h({},r({},"aria-expanded")," indicates if the section is open or closed and is read aloud by assistive technology when the button is focused.")),b({},p({},"Section:")),f({},h({},r({},"aria-hidden")," indicates if the section is open or closed, and if set to ",r({},"true"),", assistive technology hides the section.")),d({id:"Keyboard-Interactions"},"Keyboard Interactions"),f({},h({},"The button should behave as a normal button. The user should be able to tab to focus it and press enter/space to activate it.")),d({id:"Updating-Operation-and-State"},"Updating Operation and State"),f({},h({},"When the user interacts with the button to open the section, ",r({},"aria-expanded")," on the button should be ",r({},"true")," and ",r({},"aria-hidden")," on the section should be ",r({},"false"),"."),h({},"When the user interacts with the button to close the section, ",r({},"aria-expanded")," on the button should be ",r({},"false")," and ",r({},"aria-hidden")," on the section should be ",r({},"true"),".")),l({id:"Base"},"Base"),Object(o.createElement)(i.a,null,Object(s.f)(c.e)),l({id:"Examples"},"Examples"),u({id:"Non-collapsible"},"Non-collapsible"),Object(o.createElement)(i.a,null,Object(s.f)(c.f,"non-collapsable")),l({id:"States"},"States"),u({id:"Closed"},"Closed"),Object(o.createElement)(i.a,null,Object(s.f)(c.g,"closed")))},v=function(){return Object(a.a)(y())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/expandable-section/docs.mdx.js"]=function(e){function t(t){for(var o,s,c=t[0],r=t[1],l=t[2],d=0,h=[];d<c.length;d++)s=c[d],Object.prototype.hasOwnProperty.call(a,s)&&a[s]&&h.push(a[s][0]),a[s]=0;for(o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);for(u&&u(t);h.length;)h.shift()();return i.push.apply(i,l\|\|[]),n()}function n(){for(var e,t=0;t<i.length;t++){for(var n=i[t],o=!0,c=1;c<n.length;c++){var r=n[c];0!==a[r]&&(o=!1)}o&&(i.splice(t--,1),e=s(s.s=n[0]))}return e}var o={},a={34:0},i=[];function s(t){if(o[t])return o[t].exports;var n=o[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,s),n.l=!0,n.exports}s.m=e,s.c=o,s.d=function(e,t,n){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)s.d(n,o,function(t){return e[t]}.bind(null,o));return n},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=c.push.bind(c);c.push=t,c=c.slice();for(var l=0;l<c.length;l++)t(c[l]);var u=r;return i.push([621,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},621:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return y})),n.d(t,"getContents",(function(){return v}));var o=n(0),a=n(4),i=n(2),s=(n(29),n(45),n(14),n(1)),c=n(83),r=a.c.code,l=a.c.h2,u=a.c.h3,d=a.c.h4,h=a.c.li,b=a.c.p,p=a.c.strong,f=a.c.ul,y=function(){return Object(o.createElement)(a.b,{},Object(o.createElement)("div",{className:"doc lead"},"Toggle visibility of section content"),Object(o.createElement)(i.a,{exampleOnly:!0},Object(s.f)(c.e)),l({id:"About-Expandable-Section"},"About Expandable Section"),b({},"Section Titles are interactive titles that open and close sections, typically on a form."),u({id:"Accessibility"},"Accessibility"),b({},"If the Section Title is interactive, the button needs to be associated with the section so that assistive technology knows what the button opens and closes. The button and section also need ARIA attributes to indicate the open and closed state of the section."),d({id:"Markup"},"Markup"),b({},p({},"Button:")),f({},h({},r({},"aria-controls")," is used to create an association between the button and the section. If the section has an ",r({},'id="content"'),", then the button should have ",r({},'aria-controls="content"'),"."),h({},r({},"aria-expanded")," indicates if the section is open or closed and is read aloud by assistive technology when the button is focused.")),b({},p({},"Section:")),f({},h({},r({},"aria-hidden")," indicates if the section is open or closed, and if set to ",r({},"true"),", assistive technology hides the section.")),d({id:"Keyboard-Interactions"},"Keyboard Interactions"),f({},h({},"The button should behave as a normal button. The user should be able to tab to focus it and press enter/space to activate it.")),d({id:"Updating-Operation-and-State"},"Updating Operation and State"),f({},h({},"When the user interacts with the button to open the section, ",r({},"aria-expanded")," on the button should be ",r({},"true")," and ",r({},"aria-hidden")," on the section should be ",r({},"false"),"."),h({},"When the user interacts with the button to close the section, ",r({},"aria-expanded")," on the button should be ",r({},"false")," and ",r({},"aria-hidden")," on the section should be ",r({},"true"),".")),l({id:"Base"},"Base"),Object(o.createElement)(i.a,null,Object(s.f)(c.e)),l({id:"Examples"},"Examples"),u({id:"Non-collapsible"},"Non-collapsible"),Object(o.createElement)(i.a,null,Object(s.f)(c.f,"non-collapsable")),l({id:"States"},"States"),u({id:"Closed"},"Closed"),Object(o.createElement)(i.a,null,Object(s.f)(c.g,"closed")))},v=function(){return Object(a.a)(y())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/feeds/docs.mdx.js"]=function(e){function t(t){for(var a,r,i=t[0],c=t[1],m=t[2],o=0,u=[];o<i.length;o++)r=i[o],Object.prototype.hasOwnProperty.call(s,r)&&s[r]&&u.push(s[r][0]),s[r]=0;for(a in c)Object.prototype.hasOwnProperty.call(c,a)&&(e[a]=c[a]);for(d&&d(t);u.length;)u.shift()();return n.push.apply(n,m\|\|[]),l()}function l(){for(var e,t=0;t<n.length;t++){for(var l=n[t],a=!0,i=1;i<l.length;i++){var c=l[i];0!==s[c]&&(a=!1)}a&&(n.splice(t--,1),e=r(r.s=l[0]))}return e}var a={},s={36:0},n=[];function r(t){if(a[t])return a[t].exports;var l=a[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,r),l.l=!0,l.exports}r.m=e,r.c=a,r.d=function(e,t,l){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:l})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(r.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)r.d(l,a,function(t){return e[t]}.bind(null,a));return l},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=i.push.bind(i);i.push=t,i=i.slice();for(var m=0;m<i.length;m++)t(i[m]);var d=c;return n.push([733,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},733:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return z})),l.d(t,"getContents",(function(){return I}));var a=l(0),s=l.n(a),n=l(4),r=l(2),i=(l(28),l(45),l(14),l(1)),c=l(7),m=l(53),d=l(117),o=l(5),u=l.n(o),E=function(e){return s.a.createElement("article",{className:u()("slds-comment slds-media slds-hint-parent",e.className)},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("a",{href:"#",className:"slds-avatar slds-avatar_circle slds-avatar_medium",onClick:function(e){return e.preventDefault()}},s.a.createElement("img",{alt:"Jenna Davis",src:"/assets/images/avatar2.jpg",title:"Jenna Davis avatar"}))),s.a.createElement("div",{className:"slds-media__body"},e.children))},f=function(e){return s.a.createElement("header",{className:"slds-media slds-media_center"},s.a.createElement("div",{className:"slds-grid slds-grid_align-spread slds-has-flexi-truncate"},s.a.createElement("p",{className:"slds-truncate",title:"Jenna Davis"},s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Jenna Davis")),s.a.createElement(c.b,{className:"slds-button_icon-border slds-button_icon-x-small","aria-haspopup":"true",symbol:"down",assistiveText:"More Options",title:"More Options"})))},p=function(e){return s.a.createElement("div",{className:u()("slds-comment__content slds-text-longform",e.className)},e.children)},h=function(e){return s.a.createElement("footer",null,s.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},s.a.createElement("li",{className:"slds-item"},s.a.createElement("button",{className:"slds-button_reset slds-text-color_weak",title:"Like this item","aria-pressed":!!e.liked},e.liked?"Liked":"Like")),e.liked?s.a.createElement("li",{className:"slds-item"},"1 Like"):null,s.a.createElement("li",{className:"slds-item"},"16hr Ago")))},_=l(10),v=function(e){return s.a.createElement("ul",{className:"slds-post__footer-actions-list slds-list_horizontal"},s.a.createElement("li",{className:"slds-col slds-item slds-m-right_medium"},s.a.createElement("button",{title:"Like this item",className:u()("slds-button_reset slds-post__footer-action",e.liked?"slds-is-active":null),"aria-pressed":!!e.liked},s.a.createElement(_.a,{className:"slds-icon slds-icon-text-default slds-icon_x-small slds-align-middle",sprite:"utility",symbol:"like"}),e.liked?"Liked":"Like")),s.a.createElement("li",{className:"slds-col slds-item slds-m-right_medium"},s.a.createElement("button",{title:"Comment on this item",className:"slds-button_reset slds-post__footer-action"},s.a.createElement(_.a,{className:"slds-icon slds-icon-text-default slds-icon_x-small slds-align-middle",sprite:"utility",symbol:"share_post"})," ","Comment")),s.a.createElement("li",{className:"slds-col slds-item slds-m-right_medium"},s.a.createElement("button",{title:"Share this item",className:"slds-button_reset slds-post__footer-action"},s.a.createElement(_.a,{className:"slds-icon slds-icon-text-default slds-icon_x-small slds-align-middle",sprite:"utility",symbol:"share"})," ","Share")))},b=function(e){return s.a.createElement("ul",{className:"slds-post__footer-meta-list slds-list_horizontal slds-has-dividers_right slds-text-title"},e.comments?s.a.createElement("li",{className:"slds-item"},e.comments\|\|"0"," comments"):null,s.a.createElement("li",{className:"slds-item"},"20 shares"),s.a.createElement("li",{className:"slds-item"},"259 views"))},N=function(e){return s.a.createElement("header",{className:"slds-post__header slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("a",{href:"#",className:"slds-avatar slds-avatar_circle slds-avatar_large",onClick:function(e){return e.preventDefault()}},s.a.createElement("img",{alt:"Jason Rodgers",src:"/assets/images/avatar1.jpg",title:"Jason Rodgers avatar"}))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("div",{className:"slds-grid slds-grid_align-spread slds-has-flexi-truncate"},s.a.createElement("p",null,s.a.createElement("a",{href:"#",title:"Jason Rodgers",onClick:function(e){return e.preventDefault()}},"Jason Rogers")," ","—"," ",s.a.createElement("a",{href:"#",title:"Design Systems",onClick:function(e){return e.preventDefault()}},"Design Systems")),s.a.createElement(c.b,{className:"slds-button_icon-border slds-button_icon-x-small","aria-haspopup":"true",symbol:"down",assistiveText:"More Options",title:"More Options"})),s.a.createElement("p",{className:"slds-text-body_small"},s.a.createElement("a",{href:"#",title:"Click for single-item view of this post",className:"slds-text-link_reset",onClick:function(e){return e.preventDefault()}},"5 days Ago"))))},g=function(e){return s.a.createElement("div",{className:u()("slds-post__content slds-text-longform",e.className)},e.children)},y=function(e){return s.a.createElement("footer",{className:u()("slds-post__footer",e.className)},e.children)},k=function(e){return s.a.createElement("article",{className:u()("slds-post",e.className)},e.children)},w=function(e){return s.a.createElement("div",{className:"slds-feed__item-comments"},e.children)},x=function(e){return s.a.createElement("ul",null,i.d.times(e.comments\|\|1,(function(e){return s.a.createElement("li",{key:"comment-".concat(e)},s.a.createElement(E,null,s.a.createElement(f,null),s.a.createElement(p,null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),s.a.createElement(h,null)))})))},D=[{id:"default",label:"Default",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.a.createElement("a",{href:"#",title:"Jenna Davis",onClick:function(e){return e.preventDefault()}},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,null))))))}],O=[{id:"post-with-liker-bar",label:"Like",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.a.createElement("a",{href:"#",title:"Jenna Davis",onClick:function(e){return e.preventDefault()}},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),s.a.createElement(y,null,s.a.createElement(v,{liked:!0}),s.a.createElement(b,{liked:!0}))),s.a.createElement(w,null,s.a.createElement("div",{className:"slds-p-horizontal_medium slds-p-vertical_x-small"},s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"You")," ","liked this post")))))}],j=[{id:"post-attachment-link",label:"Link attachment",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.a.createElement("a",{href:"#",title:"Jenna Davis",onClick:function(e){return e.preventDefault()}},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),s.a.createElement("div",{className:"slds-post__payload"},s.a.createElement(m.a,{articleTitle:"Maui By Air The Best Way Around The Island",articleDescription:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt."})),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,null))))))},{id:"post-attachment-files",label:"Files(s) attachment",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.a.createElement("a",{href:"#",title:"Jenna Davis",onClick:function(e){return e.preventDefault()}},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),s.a.createElement("div",{className:"slds-post__payload"},s.a.createElement("ul",{className:"slds-grid slds-grid_pull-padded"},s.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},s.a.createElement(m.b,{isCard:!0,has16x9Crop:!0,hasTitleCard:!0,symbol:"image",hasImage:!0})),s.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3 slds-medium-show"},s.a.createElement(m.b,{isCard:!0,has16x9Crop:!0,hasTitleCard:!0,symbol:"pdf"})),s.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},s.a.createElement(m.b,{isCard:!0,has16x9Crop:!0,title:"22+",hasImage:!0,hasOverlay:!0})))),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,null))))))},{id:"post-with-comments",label:"With replies",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.a.createElement("a",{href:"#",title:"Jenna Davis",onClick:function(e){return e.preventDefault()}},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,{comments:"2"}))),s.a.createElement(w,null,s.a.createElement(x,{comments:"2"}),s.a.createElement(d.a,null)))))},{id:"post-with-overflow",label:"Replies - Overflow Bar",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Here's the latest demo presentation"," ",s.a.createElement("a",{href:"#",title:"Jenna Davis",onClick:function(e){return e.preventDefault()}},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,{comments:"8"}))),s.a.createElement(w,null,s.a.createElement("div",{className:"slds-p-horizontal_medium slds-p-vertical_x-small slds-grid"},s.a.createElement("button",{className:"slds-button_reset slds-text-link"},"More comments"),s.a.createElement("span",{className:"slds-text-body_small slds-col_bump-left"},"1 of 8")),s.a.createElement(x,null),s.a.createElement(d.a,null)))))},{id:"post-with-publisher-active",label:"Replies - Publisher active",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Here's the latest demo presentation"," ",s.a.createElement("a",{href:"#",title:"Jenna Davis",onClick:function(e){return e.preventDefault()}},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,{comments:"8"}))),s.a.createElement(w,null,s.a.createElement("div",{className:"slds-p-horizontal_medium slds-p-vertical_x-small slds-grid"},s.a.createElement("button",{className:"slds-button_reset slds-text-link"},"More comments"),s.a.createElement("span",{className:"slds-text-body_small slds-col_bump-left"},"1 of 8")),s.a.createElement(x,null),s.a.createElement(d.a,{className:"slds-is-active slds-has-focus"})))))},{id:"questions",label:"Question",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("h3",{className:"slds-text-heading_small"},"Barbecue Party Tips For A Truly Amazing Event?"),s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.a.createElement("a",{href:"#",title:"Jenna Davis",onClick:function(e){return e.preventDefault()}},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,null))))))}],J=[{id:"default",label:"Default",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Jenna Davis"},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,null))),s.a.createElement(w,null,s.a.createElement("div",{className:"slds-p-horizontal_medium slds-p-vertical_x-small slds-grid"},s.a.createElement("button",{className:"slds-button_reset slds-text-link"},"More comments"),s.a.createElement("span",{className:"slds-text-body_small slds-col_bump-left"},"1 of 8")),s.a.createElement("ul",null,s.a.createElement("li",null,s.a.createElement(E,null,s.a.createElement(f,null),s.a.createElement(p,null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),s.a.createElement(h,null)))))),s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Jenna Davis"},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,null))))))}],C=n.c.code,S=n.c.h2,L=n.c.h3,H=n.c.p,z=function(){return Object(a.createElement)(n.b,{},Object(a.createElement)("div",{className:"doc lead"},"A feed consists of a list of recurring elements of similar types. Examples of a feed would be a discussion feed."),Object(a.createElement)(r.a,{exampleOnly:!0},Object(i.f)(O,"post-with-liker-bar")),S({id:"About-Feeds"},"About Feeds"),L({id:"Accessibility"},"Accessibility"),H({},"Most feeds have a media object containing the user's name and avatar image. If both the image and the name link to the same location, add ",C({},'tab-index="-1"')," to the ",C({},"<a>")," element so that assistive technology does not read out duplicate links."),S({id:"Base"},"Base"),Object(a.createElement)(r.a,null,Object(i.f)(J)),S({id:"Post"},"Post"),Object(a.createElement)(r.a,null,Object(i.f)(D)),S({id:"Examples"},"Examples"),L({id:"Link-attachment"},"Link attachment"),Object(a.createElement)(r.a,null,Object(i.f)(j,"post-attachment-link")),L({id:"Files(s)-attachment"},"Files(s) attachment"),Object(a.createElement)(r.a,null,Object(i.f)(j,"post-attachment-files")),L({id:"With-replies"},"With replies"),Object(a.createElement)(r.a,null,Object(i.f)(j,"post-with-comments")),L({id:"Replies-Overflow-Bar"},"Replies - Overflow Bar"),Object(a.createElement)(r.a,null,Object(i.f)(j,"post-with-overflow")),L({id:"Replies-Publisher-active"},"Replies - Publisher active"),Object(a.createElement)(r.a,null,Object(i.f)(j,"post-with-publisher-active")),L({id:"Question"},"Question"),Object(a.createElement)(r.a,null,Object(i.f)(j,"questions")),S({id:"States"},"States"),L({id:"Like"},"Like"),Object(a.createElement)(r.a,null,Object(i.f)(O,"post-with-liker-bar")))},I=function(){return Object(n.a)(z())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/feeds/docs.mdx.js"]=function(e){function t(t){for(var a,r,i=t[0],c=t[1],m=t[2],o=0,u=[];o<i.length;o++)r=i[o],Object.prototype.hasOwnProperty.call(s,r)&&s[r]&&u.push(s[r][0]),s[r]=0;for(a in c)Object.prototype.hasOwnProperty.call(c,a)&&(e[a]=c[a]);for(d&&d(t);u.length;)u.shift()();return n.push.apply(n,m\|\|[]),l()}function l(){for(var e,t=0;t<n.length;t++){for(var l=n[t],a=!0,i=1;i<l.length;i++){var c=l[i];0!==s[c]&&(a=!1)}a&&(n.splice(t--,1),e=r(r.s=l[0]))}return e}var a={},s={36:0},n=[];function r(t){if(a[t])return a[t].exports;var l=a[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,r),l.l=!0,l.exports}r.m=e,r.c=a,r.d=function(e,t,l){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:l})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(r.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)r.d(l,a,function(t){return e[t]}.bind(null,a));return l},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=i.push.bind(i);i.push=t,i=i.slice();for(var m=0;m<i.length;m++)t(i[m]);var d=c;return n.push([733,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},733:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return z})),l.d(t,"getContents",(function(){return I}));var a=l(0),s=l.n(a),n=l(4),r=l(2),i=(l(29),l(45),l(14),l(1)),c=l(7),m=l(53),d=l(117),o=l(5),u=l.n(o),E=function(e){return s.a.createElement("article",{className:u()("slds-comment slds-media slds-hint-parent",e.className)},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("a",{href:"#",className:"slds-avatar slds-avatar_circle slds-avatar_medium",onClick:function(e){return e.preventDefault()}},s.a.createElement("img",{alt:"Jenna Davis",src:"/assets/images/avatar2.jpg",title:"Jenna Davis avatar"}))),s.a.createElement("div",{className:"slds-media__body"},e.children))},f=function(e){return s.a.createElement("header",{className:"slds-media slds-media_center"},s.a.createElement("div",{className:"slds-grid slds-grid_align-spread slds-has-flexi-truncate"},s.a.createElement("p",{className:"slds-truncate",title:"Jenna Davis"},s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Jenna Davis")),s.a.createElement(c.b,{className:"slds-button_icon-border slds-button_icon-x-small","aria-haspopup":"true",symbol:"down",assistiveText:"More Options",title:"More Options"})))},p=function(e){return s.a.createElement("div",{className:u()("slds-comment__content slds-text-longform",e.className)},e.children)},h=function(e){return s.a.createElement("footer",null,s.a.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},s.a.createElement("li",{className:"slds-item"},s.a.createElement("button",{className:"slds-button_reset slds-text-color_weak",title:"Like this item","aria-pressed":!!e.liked},e.liked?"Liked":"Like")),e.liked?s.a.createElement("li",{className:"slds-item"},"1 Like"):null,s.a.createElement("li",{className:"slds-item"},"16hr Ago")))},_=l(10),v=function(e){return s.a.createElement("ul",{className:"slds-post__footer-actions-list slds-list_horizontal"},s.a.createElement("li",{className:"slds-col slds-item slds-m-right_medium"},s.a.createElement("button",{title:"Like this item",className:u()("slds-button_reset slds-post__footer-action",e.liked?"slds-is-active":null),"aria-pressed":!!e.liked},s.a.createElement(_.a,{className:"slds-icon slds-icon-text-default slds-icon_x-small slds-align-middle",sprite:"utility",symbol:"like"}),e.liked?"Liked":"Like")),s.a.createElement("li",{className:"slds-col slds-item slds-m-right_medium"},s.a.createElement("button",{title:"Comment on this item",className:"slds-button_reset slds-post__footer-action"},s.a.createElement(_.a,{className:"slds-icon slds-icon-text-default slds-icon_x-small slds-align-middle",sprite:"utility",symbol:"share_post"})," ","Comment")),s.a.createElement("li",{className:"slds-col slds-item slds-m-right_medium"},s.a.createElement("button",{title:"Share this item",className:"slds-button_reset slds-post__footer-action"},s.a.createElement(_.a,{className:"slds-icon slds-icon-text-default slds-icon_x-small slds-align-middle",sprite:"utility",symbol:"share"})," ","Share")))},b=function(e){return s.a.createElement("ul",{className:"slds-post__footer-meta-list slds-list_horizontal slds-has-dividers_right slds-text-title"},e.comments?s.a.createElement("li",{className:"slds-item"},e.comments\|\|"0"," comments"):null,s.a.createElement("li",{className:"slds-item"},"20 shares"),s.a.createElement("li",{className:"slds-item"},"259 views"))},N=function(e){return s.a.createElement("header",{className:"slds-post__header slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("a",{href:"#",className:"slds-avatar slds-avatar_circle slds-avatar_large",onClick:function(e){return e.preventDefault()}},s.a.createElement("img",{alt:"Jason Rodgers",src:"/assets/images/avatar1.jpg",title:"Jason Rodgers avatar"}))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("div",{className:"slds-grid slds-grid_align-spread slds-has-flexi-truncate"},s.a.createElement("p",null,s.a.createElement("a",{href:"#",title:"Jason Rodgers",onClick:function(e){return e.preventDefault()}},"Jason Rogers")," ","—"," ",s.a.createElement("a",{href:"#",title:"Design Systems",onClick:function(e){return e.preventDefault()}},"Design Systems")),s.a.createElement(c.b,{className:"slds-button_icon-border slds-button_icon-x-small","aria-haspopup":"true",symbol:"down",assistiveText:"More Options",title:"More Options"})),s.a.createElement("p",{className:"slds-text-body_small"},s.a.createElement("a",{href:"#",title:"Click for single-item view of this post",className:"slds-text-link_reset",onClick:function(e){return e.preventDefault()}},"5 days Ago"))))},g=function(e){return s.a.createElement("div",{className:u()("slds-post__content slds-text-longform",e.className)},e.children)},y=function(e){return s.a.createElement("footer",{className:u()("slds-post__footer",e.className)},e.children)},k=function(e){return s.a.createElement("article",{className:u()("slds-post",e.className)},e.children)},w=function(e){return s.a.createElement("div",{className:"slds-feed__item-comments"},e.children)},x=function(e){return s.a.createElement("ul",null,i.d.times(e.comments\|\|1,(function(e){return s.a.createElement("li",{key:"comment-".concat(e)},s.a.createElement(E,null,s.a.createElement(f,null),s.a.createElement(p,null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),s.a.createElement(h,null)))})))},D=[{id:"default",label:"Default",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.a.createElement("a",{href:"#",title:"Jenna Davis",onClick:function(e){return e.preventDefault()}},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,null))))))}],O=[{id:"post-with-liker-bar",label:"Like",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.a.createElement("a",{href:"#",title:"Jenna Davis",onClick:function(e){return e.preventDefault()}},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),s.a.createElement(y,null,s.a.createElement(v,{liked:!0}),s.a.createElement(b,{liked:!0}))),s.a.createElement(w,null,s.a.createElement("div",{className:"slds-p-horizontal_medium slds-p-vertical_x-small"},s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"You")," ","liked this post")))))}],j=[{id:"post-attachment-link",label:"Link attachment",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.a.createElement("a",{href:"#",title:"Jenna Davis",onClick:function(e){return e.preventDefault()}},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),s.a.createElement("div",{className:"slds-post__payload"},s.a.createElement(m.a,{articleTitle:"Maui By Air The Best Way Around The Island",articleDescription:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt."})),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,null))))))},{id:"post-attachment-files",label:"Files(s) attachment",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.a.createElement("a",{href:"#",title:"Jenna Davis",onClick:function(e){return e.preventDefault()}},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),s.a.createElement("div",{className:"slds-post__payload"},s.a.createElement("ul",{className:"slds-grid slds-grid_pull-padded"},s.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},s.a.createElement(m.b,{isCard:!0,has16x9Crop:!0,hasTitleCard:!0,symbol:"image",hasImage:!0})),s.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3 slds-medium-show"},s.a.createElement(m.b,{isCard:!0,has16x9Crop:!0,hasTitleCard:!0,symbol:"pdf"})),s.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},s.a.createElement(m.b,{isCard:!0,has16x9Crop:!0,title:"22+",hasImage:!0,hasOverlay:!0})))),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,null))))))},{id:"post-with-comments",label:"With replies",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.a.createElement("a",{href:"#",title:"Jenna Davis",onClick:function(e){return e.preventDefault()}},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,{comments:"2"}))),s.a.createElement(w,null,s.a.createElement(x,{comments:"2"}),s.a.createElement(d.a,null)))))},{id:"post-with-overflow",label:"Replies - Overflow Bar",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Here's the latest demo presentation"," ",s.a.createElement("a",{href:"#",title:"Jenna Davis",onClick:function(e){return e.preventDefault()}},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,{comments:"8"}))),s.a.createElement(w,null,s.a.createElement("div",{className:"slds-p-horizontal_medium slds-p-vertical_x-small slds-grid"},s.a.createElement("button",{className:"slds-button_reset slds-text-link"},"More comments"),s.a.createElement("span",{className:"slds-text-body_small slds-col_bump-left"},"1 of 8")),s.a.createElement(x,null),s.a.createElement(d.a,null)))))},{id:"post-with-publisher-active",label:"Replies - Publisher active",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Here's the latest demo presentation"," ",s.a.createElement("a",{href:"#",title:"Jenna Davis",onClick:function(e){return e.preventDefault()}},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,{comments:"8"}))),s.a.createElement(w,null,s.a.createElement("div",{className:"slds-p-horizontal_medium slds-p-vertical_x-small slds-grid"},s.a.createElement("button",{className:"slds-button_reset slds-text-link"},"More comments"),s.a.createElement("span",{className:"slds-text-body_small slds-col_bump-left"},"1 of 8")),s.a.createElement(x,null),s.a.createElement(d.a,{className:"slds-is-active slds-has-focus"})))))},{id:"questions",label:"Question",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("h3",{className:"slds-text-heading_small"},"Barbecue Party Tips For A Truly Amazing Event?"),s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.a.createElement("a",{href:"#",title:"Jenna Davis",onClick:function(e){return e.preventDefault()}},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,null))))))}],J=[{id:"default",label:"Default",element:s.a.createElement("div",{className:"slds-feed"},s.a.createElement("ul",{className:"slds-feed__list"},s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Jenna Davis"},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,null))),s.a.createElement(w,null,s.a.createElement("div",{className:"slds-p-horizontal_medium slds-p-vertical_x-small slds-grid"},s.a.createElement("button",{className:"slds-button_reset slds-text-link"},"More comments"),s.a.createElement("span",{className:"slds-text-body_small slds-col_bump-left"},"1 of 8")),s.a.createElement("ul",null,s.a.createElement("li",null,s.a.createElement(E,null,s.a.createElement(f,null),s.a.createElement(p,null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),s.a.createElement(h,null)))))),s.a.createElement("li",{className:"slds-feed__item"},s.a.createElement(k,null,s.a.createElement(N,null),s.a.createElement(g,null,s.a.createElement("p",null,"Hey there! Here's the latest demo presentation"," ",s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Jenna Davis"},"@Jenna Davis"),", let me know if there are any changes. I've updated slides 3-8 and slides 16-18 slides with new product shots.")),s.a.createElement(y,null,s.a.createElement(v,null),s.a.createElement(b,null))))))}],C=n.c.code,S=n.c.h2,L=n.c.h3,H=n.c.p,z=function(){return Object(a.createElement)(n.b,{},Object(a.createElement)("div",{className:"doc lead"},"A feed consists of a list of recurring elements of similar types. Examples of a feed would be a discussion feed."),Object(a.createElement)(r.a,{exampleOnly:!0},Object(i.f)(O,"post-with-liker-bar")),S({id:"About-Feeds"},"About Feeds"),L({id:"Accessibility"},"Accessibility"),H({},"Most feeds have a media object containing the user's name and avatar image. If both the image and the name link to the same location, add ",C({},'tab-index="-1"')," to the ",C({},"<a>")," element so that assistive technology does not read out duplicate links."),S({id:"Base"},"Base"),Object(a.createElement)(r.a,null,Object(i.f)(J)),S({id:"Post"},"Post"),Object(a.createElement)(r.a,null,Object(i.f)(D)),S({id:"Examples"},"Examples"),L({id:"Link-attachment"},"Link attachment"),Object(a.createElement)(r.a,null,Object(i.f)(j,"post-attachment-link")),L({id:"Files(s)-attachment"},"Files(s) attachment"),Object(a.createElement)(r.a,null,Object(i.f)(j,"post-attachment-files")),L({id:"With-replies"},"With replies"),Object(a.createElement)(r.a,null,Object(i.f)(j,"post-with-comments")),L({id:"Replies-Overflow-Bar"},"Replies - Overflow Bar"),Object(a.createElement)(r.a,null,Object(i.f)(j,"post-with-overflow")),L({id:"Replies-Publisher-active"},"Replies - Publisher active"),Object(a.createElement)(r.a,null,Object(i.f)(j,"post-with-publisher-active")),L({id:"Question"},"Question"),Object(a.createElement)(r.a,null,Object(i.f)(j,"questions")),S({id:"States"},"States"),L({id:"Like"},"Like"),Object(a.createElement)(r.a,null,Object(i.f)(O,"post-with-liker-bar")))},I=function(){return Object(n.a)(z())}}});

package/__internal/chunked/docs/ui/components/file-selector/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/file-selector/docs.mdx.js"]=function(e){function t(t){for(var l,o,s=t[0],n=t[1],c=t[2],u=0,m=[];u<s.length;u++)o=s[u],Object.prototype.hasOwnProperty.call(a,o)&&a[o]&&m.push(a[o][0]),a[o]=0;for(l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l]);for(d&&d(t);m.length;)m.shift()();return i.push.apply(i,c\|\|[]),r()}function r(){for(var e,t=0;t<i.length;t++){for(var r=i[t],l=!0,s=1;s<r.length;s++){var n=r[s];0!==a[n]&&(l=!1)}l&&(i.splice(t--,1),e=o(o.s=r[0]))}return e}var l={},a={37:0},i=[];function o(t){if(l[t])return l[t].exports;var r=l[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,o),r.l=!0,r.exports}o.m=e,o.c=l,o.d=function(e,t,r){o.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:r})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)o.d(r,l,function(t){return e[t]}.bind(null,l));return r},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],n=s.push.bind(s);s.push=t,s=s.slice();for(var c=0;c<s.length;c++)t(s[c]);var d=n;return i.push([724,0]),r()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},724:function(e,t,r){"use strict";r.r(t),r.d(t,"getElement",(function(){return N})),r.d(t,"getContents",(function(){return q}));var l=r(0),a=r.n(l),i=r(4),o=r(2),s=(r(28),r(45),r(14),r(1)),n=r(5),c=r.n(n),d=r(25),u=r.n(d),m=r(10),f=function(e){var t=u()("file-selector-primary-label-"),r=u()("file-selector-secondary-label"),l=u()("file-upload-input-"),i=u()("error-");return a.a.createElement("div",{className:c()("slds-form-element",{"slds-has-error":e.error})},a.a.createElement("span",{className:"slds-form-element__label",id:t},"Attachment"),a.a.createElement("div",{className:"slds-form-element__control"},a.a.createElement("div",{className:c()("slds-file-selector",{"slds-file-selector_files":e.files,"slds-file-selector_images":e.images})},a.a.createElement("div",{className:c()("slds-file-selector__dropzone",{"slds-has-drag-over":e.dragover})},a.a.createElement("input",{className:"slds-file-selector__input slds-assistive-text",accept:"image/png",type:"file",id:l,disabled:e.dragoverError,"aria-describedby":e.error?i:null,"aria-labelledby":c()(t,r)}),a.a.createElement("label",{className:"slds-file-selector__body",htmlFor:l,id:r},a.a.createElement("span",{className:"slds-file-selector__button slds-button slds-button_neutral"},a.a.createElement(m.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"upload"}),"Upload ",e.files?"Files":"Image"),a.a.createElement("span",{className:"slds-file-selector__text slds-medium-show"},"or Drop ",e.files?"Files":"Image"))))),e.error&&a.a.createElement("div",{className:"slds-form-element__help",id:i},"File type not supported"))},p=a.a.createElement(f,{files:!0}),g=[{id:"file-selector-files-error",label:"Error",element:a.a.createElement(f,{files:!0,error:!0})},{id:"file-selector-files-dragover",label:"Dragover",element:a.a.createElement(f,{files:!0,dragover:!0})},{id:"file-selector-files-dragover-error",label:"Dragover with error",element:a.a.createElement(f,{files:!0,dragoverError:!0,error:!0})}],b=[{id:"default",label:"Files - Default",demoStyles:"max-width: 320px",storybookStyles:!0,element:a.a.createElement(f,{images:!0})}],v=[{id:"file-selector-images-error",label:"Error",demoStyles:"max-width: 320px",storybookStyles:!0,element:a.a.createElement(f,{images:!0,error:!0})},{id:"file-selector-images-dragover",label:"Dragover",demoStyles:"max-width: 320px",storybookStyles:!0,element:a.a.createElement(f,{images:!0,dragover:!0})},{id:"file-selector-images-dragover-error",label:"Dragover with error",demoStyles:"max-width: 320px",storybookStyles:!0,element:a.a.createElement(f,{images:!0,dragoverError:!0,error:!0})}],h=function(e){return a.a.createElement("div",{className:c()("slds-file-selector slds-file-selector_integrated",e.className)},a.a.createElement("div",{className:c()("slds-file-selector__dropzone slds-file-selector__dropzone_integrated",e.drag?"slds-has-drag":null,e.dragover?"slds-has-drag-over":null),"aria-hidden":"true"},a.a.createElement("input",{className:"slds-file-selector__input slds-assistive-text",accept:"image/png",type:"file",id:"file-upload-input-01",disabled:e.dragoverError,tabIndex:"-1"}),a.a.createElement("label",{className:"slds-file-selector__body slds-file-selector__body_integrated",htmlFor:"file-upload-input-01"},e.dragoverError?a.a.createElement(m.a,{className:"slds-file-selector__body-icon slds-icon slds-icon-text-default",sprite:"utility",symbol:"error"}):a.a.createElement(m.a,{className:"slds-file-selector__body-icon slds-icon slds-icon-text-default",sprite:"utility",symbol:"upload"}),a.a.createElement("span",{className:"slds-file-selector__text slds-file-selector__text_integrated slds-text-heading_medium slds-text-align_center"},e.dragoverError?"Too many files selected. Attach up to 1 file.":"Drop Files"))),e.children)},y=[{id:"default",label:"Integrated File Selector - Default",demoStyles:"width: 320px; height: 320px",storybookStyles:!0,element:a.a.createElement(h,{className:"slds-file-selector_integrated"},"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")}],_=[{id:"integrated-file-selector-drag",label:"Drag",demoStyles:"width: 320px; height: 320px",storybookStyles:!0,element:a.a.createElement(h,{className:"slds-file-selector_integrated",drag:!0},"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")},{id:"integrated-file-selector-dragover",label:"Dragover",demoStyles:"width: 320px; height: 320px",storybookStyles:!0,element:a.a.createElement(h,{className:"slds-file-selector_integrated",drag:!0,dragover:!0},"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")},{id:"integrated-file-selector-dragover-error",label:"Dragover with error",demoStyles:"width: 320px; height: 320px",storybookStyles:!0,element:a.a.createElement(h,{className:"slds-file-selector_integrated",drag:!0,dragoverError:!0,error:!0},"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")}],E=i.c.code,x=i.c.h2,S=i.c.h3,O=i.c.h4,j=i.c.li,D=i.c.p,w=i.c.ul,N=function(){return Object(l.createElement)(i.b,{},Object(l.createElement)("div",{className:"doc lead"},"The File selector component allows the user to select file(s) from a user’s file system. Either natively using an file input or drag and drop."),Object(l.createElement)(o.a,{exampleOnly:!0},Object(s.f)(p)),x({id:"About-File-Selector"},"About File Selector"),S({id:"Accessibility"},"Accessibility"),D({},"When implementing this component, pay special attention to the following:"),O({id:"Markup"},"Markup"),w({},j({},E({},"aria-labelledby")," is placed on the HTML ",E({},"input"),' to form an "Accessible Label" from 2 separate visible text labels, by referencing their ',E({},"id")," attributes")),x({id:"Base"},"Base"),Object(l.createElement)(o.a,null,Object(s.f)(p)),x({id:"States"},"States"),S({id:"Error"},"Error"),Object(l.createElement)(o.a,null,Object(s.f)(g,"file-selector-files-error")),S({id:"Dragover"},"Dragover"),Object(l.createElement)(o.a,null,Object(s.f)(g,"file-selector-files-dragover")),S({id:"Dragover-with-error"},"Dragover with error"),Object(l.createElement)(o.a,null,Object(s.f)(g,"file-selector-files-dragover-error")),x({id:"Image"},"Image"),D({},"Multi Line / Image"),D({},"Use as a dedicated dropzone for image files only. May require a cropping control."),Object(l.createElement)(o.a,null,Object(s.f)(b)),x({id:"States-2"},"States"),S({id:"Error-2"},"Error"),Object(l.createElement)(o.a,null,Object(s.f)(v,"file-selector-images-error")),S({id:"Dragover-2"},"Dragover"),Object(l.createElement)(o.a,null,Object(s.f)(v,"file-selector-images-dragover")),S({id:"Dragover-with-error-2"},"Dragover with error"),Object(l.createElement)(o.a,null,Object(s.f)(v,"file-selector-images-dragover-error")),x({id:"Integrated"},"Integrated"),D({},"Invisible Dropzone (Container)"),D({},"Use when an entire container should be droppable. The container should have a visible boundary, like a modal, composer, or page."),Object(l.createElement)(o.a,null,Object(s.f)(y)),x({id:"States-3"},"States"),S({id:"Drag"},"Drag"),Object(l.createElement)(o.a,null,Object(s.f)(_,"integrated-file-selector-drag")),S({id:"Dragover-3"},"Dragover"),Object(l.createElement)(o.a,null,Object(s.f)(_,"integrated-file-selector-dragover")),S({id:"Dragover-with-error-3"},"Dragover with error"),Object(l.createElement)(o.a,null,Object(s.f)(_,"integrated-file-selector-dragover-error")))},q=function(){return Object(i.a)(N())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/file-selector/docs.mdx.js"]=function(e){function t(t){for(var l,o,s=t[0],n=t[1],c=t[2],u=0,m=[];u<s.length;u++)o=s[u],Object.prototype.hasOwnProperty.call(a,o)&&a[o]&&m.push(a[o][0]),a[o]=0;for(l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l]);for(d&&d(t);m.length;)m.shift()();return i.push.apply(i,c\|\|[]),r()}function r(){for(var e,t=0;t<i.length;t++){for(var r=i[t],l=!0,s=1;s<r.length;s++){var n=r[s];0!==a[n]&&(l=!1)}l&&(i.splice(t--,1),e=o(o.s=r[0]))}return e}var l={},a={37:0},i=[];function o(t){if(l[t])return l[t].exports;var r=l[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,o),r.l=!0,r.exports}o.m=e,o.c=l,o.d=function(e,t,r){o.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:r})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)o.d(r,l,function(t){return e[t]}.bind(null,l));return r},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],n=s.push.bind(s);s.push=t,s=s.slice();for(var c=0;c<s.length;c++)t(s[c]);var d=n;return i.push([724,0]),r()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},724:function(e,t,r){"use strict";r.r(t),r.d(t,"getElement",(function(){return N})),r.d(t,"getContents",(function(){return q}));var l=r(0),a=r.n(l),i=r(4),o=r(2),s=(r(29),r(45),r(14),r(1)),n=r(5),c=r.n(n),d=r(25),u=r.n(d),m=r(10),f=function(e){var t=u()("file-selector-primary-label-"),r=u()("file-selector-secondary-label"),l=u()("file-upload-input-"),i=u()("error-");return a.a.createElement("div",{className:c()("slds-form-element",{"slds-has-error":e.error})},a.a.createElement("span",{className:"slds-form-element__label",id:t},"Attachment"),a.a.createElement("div",{className:"slds-form-element__control"},a.a.createElement("div",{className:c()("slds-file-selector",{"slds-file-selector_files":e.files,"slds-file-selector_images":e.images})},a.a.createElement("div",{className:c()("slds-file-selector__dropzone",{"slds-has-drag-over":e.dragover})},a.a.createElement("input",{className:"slds-file-selector__input slds-assistive-text",accept:"image/png",type:"file",id:l,disabled:e.dragoverError,"aria-describedby":e.error?i:null,"aria-labelledby":c()(t,r)}),a.a.createElement("label",{className:"slds-file-selector__body",htmlFor:l,id:r},a.a.createElement("span",{className:"slds-file-selector__button slds-button slds-button_neutral"},a.a.createElement(m.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"upload"}),"Upload ",e.files?"Files":"Image"),a.a.createElement("span",{className:"slds-file-selector__text slds-medium-show"},"or Drop ",e.files?"Files":"Image"))))),e.error&&a.a.createElement("div",{className:"slds-form-element__help",id:i},"File type not supported"))},p=a.a.createElement(f,{files:!0}),g=[{id:"file-selector-files-error",label:"Error",element:a.a.createElement(f,{files:!0,error:!0})},{id:"file-selector-files-dragover",label:"Dragover",element:a.a.createElement(f,{files:!0,dragover:!0})},{id:"file-selector-files-dragover-error",label:"Dragover with error",element:a.a.createElement(f,{files:!0,dragoverError:!0,error:!0})}],b=[{id:"default",label:"Files - Default",demoStyles:"max-width: 320px",storybookStyles:!0,element:a.a.createElement(f,{images:!0})}],v=[{id:"file-selector-images-error",label:"Error",demoStyles:"max-width: 320px",storybookStyles:!0,element:a.a.createElement(f,{images:!0,error:!0})},{id:"file-selector-images-dragover",label:"Dragover",demoStyles:"max-width: 320px",storybookStyles:!0,element:a.a.createElement(f,{images:!0,dragover:!0})},{id:"file-selector-images-dragover-error",label:"Dragover with error",demoStyles:"max-width: 320px",storybookStyles:!0,element:a.a.createElement(f,{images:!0,dragoverError:!0,error:!0})}],h=function(e){return a.a.createElement("div",{className:c()("slds-file-selector slds-file-selector_integrated",e.className)},a.a.createElement("div",{className:c()("slds-file-selector__dropzone slds-file-selector__dropzone_integrated",e.drag?"slds-has-drag":null,e.dragover?"slds-has-drag-over":null),"aria-hidden":"true"},a.a.createElement("input",{className:"slds-file-selector__input slds-assistive-text",accept:"image/png",type:"file",id:"file-upload-input-01",disabled:e.dragoverError,tabIndex:"-1"}),a.a.createElement("label",{className:"slds-file-selector__body slds-file-selector__body_integrated",htmlFor:"file-upload-input-01"},e.dragoverError?a.a.createElement(m.a,{className:"slds-file-selector__body-icon slds-icon slds-icon-text-default",sprite:"utility",symbol:"error"}):a.a.createElement(m.a,{className:"slds-file-selector__body-icon slds-icon slds-icon-text-default",sprite:"utility",symbol:"upload"}),a.a.createElement("span",{className:"slds-file-selector__text slds-file-selector__text_integrated slds-text-heading_medium slds-text-align_center"},e.dragoverError?"Too many files selected. Attach up to 1 file.":"Drop Files"))),e.children)},y=[{id:"default",label:"Integrated File Selector - Default",demoStyles:"width: 320px; height: 320px",storybookStyles:!0,element:a.a.createElement(h,{className:"slds-file-selector_integrated"},"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")}],_=[{id:"integrated-file-selector-drag",label:"Drag",demoStyles:"width: 320px; height: 320px",storybookStyles:!0,element:a.a.createElement(h,{className:"slds-file-selector_integrated",drag:!0},"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")},{id:"integrated-file-selector-dragover",label:"Dragover",demoStyles:"width: 320px; height: 320px",storybookStyles:!0,element:a.a.createElement(h,{className:"slds-file-selector_integrated",drag:!0,dragover:!0},"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")},{id:"integrated-file-selector-dragover-error",label:"Dragover with error",demoStyles:"width: 320px; height: 320px",storybookStyles:!0,element:a.a.createElement(h,{className:"slds-file-selector_integrated",drag:!0,dragoverError:!0,error:!0},"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")}],E=i.c.code,x=i.c.h2,S=i.c.h3,O=i.c.h4,j=i.c.li,D=i.c.p,w=i.c.ul,N=function(){return Object(l.createElement)(i.b,{},Object(l.createElement)("div",{className:"doc lead"},"The File selector component allows the user to select file(s) from a user’s file system. Either natively using an file input or drag and drop."),Object(l.createElement)(o.a,{exampleOnly:!0},Object(s.f)(p)),x({id:"About-File-Selector"},"About File Selector"),S({id:"Accessibility"},"Accessibility"),D({},"When implementing this component, pay special attention to the following:"),O({id:"Markup"},"Markup"),w({},j({},E({},"aria-labelledby")," is placed on the HTML ",E({},"input"),' to form an "Accessible Label" from 2 separate visible text labels, by referencing their ',E({},"id")," attributes")),x({id:"Base"},"Base"),Object(l.createElement)(o.a,null,Object(s.f)(p)),x({id:"States"},"States"),S({id:"Error"},"Error"),Object(l.createElement)(o.a,null,Object(s.f)(g,"file-selector-files-error")),S({id:"Dragover"},"Dragover"),Object(l.createElement)(o.a,null,Object(s.f)(g,"file-selector-files-dragover")),S({id:"Dragover-with-error"},"Dragover with error"),Object(l.createElement)(o.a,null,Object(s.f)(g,"file-selector-files-dragover-error")),x({id:"Image"},"Image"),D({},"Multi Line / Image"),D({},"Use as a dedicated dropzone for image files only. May require a cropping control."),Object(l.createElement)(o.a,null,Object(s.f)(b)),x({id:"States-2"},"States"),S({id:"Error-2"},"Error"),Object(l.createElement)(o.a,null,Object(s.f)(v,"file-selector-images-error")),S({id:"Dragover-2"},"Dragover"),Object(l.createElement)(o.a,null,Object(s.f)(v,"file-selector-images-dragover")),S({id:"Dragover-with-error-2"},"Dragover with error"),Object(l.createElement)(o.a,null,Object(s.f)(v,"file-selector-images-dragover-error")),x({id:"Integrated"},"Integrated"),D({},"Invisible Dropzone (Container)"),D({},"Use when an entire container should be droppable. The container should have a visible boundary, like a modal, composer, or page."),Object(l.createElement)(o.a,null,Object(s.f)(y)),x({id:"States-3"},"States"),S({id:"Drag"},"Drag"),Object(l.createElement)(o.a,null,Object(s.f)(_,"integrated-file-selector-drag")),S({id:"Dragover-3"},"Dragover"),Object(l.createElement)(o.a,null,Object(s.f)(_,"integrated-file-selector-dragover")),S({id:"Dragover-with-error-3"},"Dragover with error"),Object(l.createElement)(o.a,null,Object(s.f)(_,"integrated-file-selector-dragover-error")))},q=function(){return Object(i.a)(N())}}});