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/map/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/map/docs.mdx.js"]=function(e){function t(t){for(var o,l,i=t[0],s=t[1],c=t[2],u=0,m=[];u<i.length;u++)l=i[u],Object.prototype.hasOwnProperty.call(r,l)&&r[l]&&m.push(r[l][0]),r[l]=0;for(o in s)Object.prototype.hasOwnProperty.call(s,o)&&(e[o]=s[o]);for(d&&d(t);m.length;)m.shift()();return a.push.apply(a,c\|\|[]),n()}function n(){for(var e,t=0;t<a.length;t++){for(var n=a[t],o=!0,i=1;i<n.length;i++){var s=n[i];0!==r[s]&&(o=!1)}o&&(a.splice(t--,1),e=l(l.s=n[0]))}return e}var o={},r={47:0},a=[];function l(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,l),n.l=!0,n.exports}l.m=e,l.c=o,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 o in e)l.d(n,o,function(t){return e[t]}.bind(null,o));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 i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=i.push.bind(i);i.push=t,i=i.slice();for(var c=0;c<i.length;c++)t(i[c]);var d=s;return a.push([737,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},737:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return k})),n.d(t,"getContents",(function(){return F}));var o=n(0),r=n.n(o),a=n(4),l=n(2),i=n(1),s=n(38),c=n(34),d=n(21),u=n(5),m=n.n(u),p=[{title:"Worldwide Corporate Headquarters",address:"The Landmark @ One Market, San Francisco, CA"},{title:"salesforce.com inc Atlanta",address:"950 East Paces Ferry Road NE, Atlanta, GA"},{title:"salesforce.com inc Bellevue",address:"929 108th Ave NE, Bellevue, WA"},{title:"salesforce.com inc Boston",address:"500 Boylston Street 19th Floor, Boston, MA"},{title:"salesforce.com inc Chicago",address:"111 West Illinois Street, Chicago, IL"},{title:"salesforce.com inc Herndon",address:"2550 Wasser Terrace, Herndon, VA"},{title:"salesforce.com inc Hillsboro",address:"2035 NE Cornelius Pass Road, Hillsboro, OR"},{title:"salesforce.com inc Indy",address:"111 Monument Circle, Indianapolis, IN"},{title:"salesforce.com inc Irvine",address:"300 Spectrum Center Drive, Irvine, CA"}];function f(e){return(f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function b(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function h(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable\|\|!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function y(e,t){return(y=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function E(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,o=g(e);if(t){var r=g(this).constructor;n=Reflect.construct(o,arguments,r)}else n=o.apply(this,arguments);return S(this,n)}}function S(e,t){if(t&&("object"===f(t)\|\|"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function g(e){return(g=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var v=function(e){return r.a.createElement("div",{className:"slds-coordinates"},r.a.createElement("div",{className:"slds-coordinates__header"},r.a.createElement("h2",{className:"slds-coordinates__title"},e.heading)),r.a.createElement("ul",{className:"slds-coordinates__list"},p.map((function(t,n){return r.a.createElement("li",{className:"slds-coordinates__item",key:n},r.a.createElement("span",{className:"slds-assistive-text","aria-live":"polite"},parseInt(e.selection,0)===n?t.title+" is currently selected":null),r.a.createElement(_,{title:t.title,address:t.address,selected:parseInt(e.selection,0)===n}))}))))},_=function(e){return r.a.createElement("button",{className:"slds-coordinates__item-action slds-button_reset slds-media","aria-pressed":e.selected},r.a.createElement("span",{className:"slds-media__figure"},r.a.createElement(c.a,{symbol:"account"})),r.a.createElement("span",{className:"slds-media__body"},r.a.createElement("span",{className:"slds-text-link"},e.title),r.a.createElement("span",null,e.address)))},O=function(){return r.a.createElement(d.d,null,r.a.createElement("button",{className:"slds-button slds-button_brand"},"Open in Google Maps"))},j=function(e){return r.a.createElement("div",{className:"slds-map"},!e.hideMap&&r.a.createElement("iframe",{id:"GoogleMapID",title:"Google Maps iframe",src:"https://sfdc-map.surge.sh/"}))},C=function(e){return r.a.createElement("div",{className:m()("slds-grid",e.multipleCoordinates&&"slds-has-coordinates")},r.a.createElement("div",{className:"slds-map_container"},r.a.createElement(j,{hideMap:e.hideMap})),e.multipleCoordinates&&r.a.createElement(v,{heading:e.heading,selection:e.selection}))},M=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&y(e,t)}(l,e);var t,n,o,a=E(l);function l(){return b(this,l),a.apply(this,arguments)}return t=l,(n=[{key:"render",value:function(){var e=this.props,t=e.heading,n=e.multipleCoordinates,o=e.selection,a=e.hideMap,l=e.footer;return r.a.createElement(d.b,{className:"slds-modal_medium","aria-labelledby":"modal-heading-id-01"},r.a.createElement(d.e,null,r.a.createElement("h1",{id:"modal-heading-id-01",className:"slds-text-heading_medium slds-hyphenate"},t)),r.a.createElement(d.c,{id:"modal-content-id-01"},r.a.createElement(C,{multipleCoordinates:n,heading:t,selection:o,hideMap:a})),l&&r.a.createElement(O,null))}}])&&h(t.prototype,n),o&&h(t,o),Object.defineProperty(t,"prototype",{writable:!1}),l}(o.Component),w=[{id:"default",label:"Default",element:r.a.createElement(C,{heading:"Salesforce locations in United States (9)",multipleCoordinates:!0})}],N=[{id:"multiple-coordinates-item-one-selection",label:"First Coordinate Selected",element:r.a.createElement(C,{heading:"Salesforce locations in United States (9)",multipleCoordinates:!0,selection:"0"})},{id:"multiple-coordinates-item-two-selection",label:"Second Coordinate Selected",element:r.a.createElement(C,{heading:"Salesforce locations in United States (9)",multipleCoordinates:!0,selection:"1"})}],x=[{id:"single-coordinate",label:"In Modal - Single Coordinate - With Footer",element:r.a.createElement(r.a.Fragment,null,r.a.createElement(M,{heading:"Geo Code: 37°48'08.3\"N 122°15'55.2W",footer:!0}),r.a.createElement("div",{className:"slds-backdrop slds-backdrop_open",role:"presentation"}))},{id:"multiple-coordinates",label:"In Modal - Multiple Coordinates",element:r.a.createElement(r.a.Fragment,null,r.a.createElement(M,{heading:"Salesforce locations in United States (9)",multipleCoordinates:!0,footer:!0}),r.a.createElement("div",{className:"slds-backdrop slds-backdrop_open",role:"presentation"}))}],P=a.c.h2,I=a.c.h3,k=function(){return Object(o.createElement)(a.b,{},Object(o.createElement)("div",{className:"lead doc"},"A map component is used to find a location"),P({id:"Base"},"Base"),Object(o.createElement)(l.a,null,Object(i.f)(w)),I({id:"Mobile"},"Mobile"),Object(o.createElement)(s.a,{patternSpecificText:"maps will have increased header text size along with other small adjustments"}),Object(o.createElement)(l.a,{frameOnly:!0,frameTitle:"Example mobile styles for maps"},Object(i.f)(w)),P({id:"States"},"States"),I({id:"First-Coordinate-Selected"},"First Coordinate Selected"),Object(o.createElement)(l.a,null,Object(i.f)(N,"multiple-coordinates-item-one-selection")),I({id:"Second-Coordinate-Selected"},"Second Coordinate Selected"),Object(o.createElement)(l.a,null,Object(i.f)(N,"multiple-coordinates-item-two-selection")),P({id:"Examples"},"Examples"),I({id:"In-Modal-Single-Coordinate-With-Footer"},"In Modal - Single Coordinate With Footer"),Object(o.createElement)(l.a,{isViewport:!0,demoStyles:"height: 660px;"},Object(i.f)(x,"single-coordinate")),I({id:"In-Modal-Multiple-Coordinates-With-Footer"},"In Modal - Multiple Coordinates With Footer"),Object(o.createElement)(l.a,{isViewport:!0,demoStyles:"height: 660px;"},Object(i.f)(x,"multiple-coordinates")))},F=function(){return Object(a.a)(k())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/map/docs.mdx.js"]=function(e){function t(t){for(var o,l,i=t[0],s=t[1],c=t[2],u=0,m=[];u<i.length;u++)l=i[u],Object.prototype.hasOwnProperty.call(r,l)&&r[l]&&m.push(r[l][0]),r[l]=0;for(o in s)Object.prototype.hasOwnProperty.call(s,o)&&(e[o]=s[o]);for(d&&d(t);m.length;)m.shift()();return a.push.apply(a,c\|\|[]),n()}function n(){for(var e,t=0;t<a.length;t++){for(var n=a[t],o=!0,i=1;i<n.length;i++){var s=n[i];0!==r[s]&&(o=!1)}o&&(a.splice(t--,1),e=l(l.s=n[0]))}return e}var o={},r={47:0},a=[];function l(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,l),n.l=!0,n.exports}l.m=e,l.c=o,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 o in e)l.d(n,o,function(t){return e[t]}.bind(null,o));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 i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=i.push.bind(i);i.push=t,i=i.slice();for(var c=0;c<i.length;c++)t(i[c]);var d=s;return a.push([737,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},737:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return k})),n.d(t,"getContents",(function(){return F}));var o=n(0),r=n.n(o),a=n(4),l=n(2),i=n(1),s=n(38),c=n(35),d=n(21),u=n(5),m=n.n(u),p=[{title:"Worldwide Corporate Headquarters",address:"The Landmark @ One Market, San Francisco, CA"},{title:"salesforce.com inc Atlanta",address:"950 East Paces Ferry Road NE, Atlanta, GA"},{title:"salesforce.com inc Bellevue",address:"929 108th Ave NE, Bellevue, WA"},{title:"salesforce.com inc Boston",address:"500 Boylston Street 19th Floor, Boston, MA"},{title:"salesforce.com inc Chicago",address:"111 West Illinois Street, Chicago, IL"},{title:"salesforce.com inc Herndon",address:"2550 Wasser Terrace, Herndon, VA"},{title:"salesforce.com inc Hillsboro",address:"2035 NE Cornelius Pass Road, Hillsboro, OR"},{title:"salesforce.com inc Indy",address:"111 Monument Circle, Indianapolis, IN"},{title:"salesforce.com inc Irvine",address:"300 Spectrum Center Drive, Irvine, CA"}];function f(e){return(f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function b(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function h(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable\|\|!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function y(e,t){return(y=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function E(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,o=g(e);if(t){var r=g(this).constructor;n=Reflect.construct(o,arguments,r)}else n=o.apply(this,arguments);return S(this,n)}}function S(e,t){if(t&&("object"===f(t)\|\|"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function g(e){return(g=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var v=function(e){return r.a.createElement("div",{className:"slds-coordinates"},r.a.createElement("div",{className:"slds-coordinates__header"},r.a.createElement("h2",{className:"slds-coordinates__title"},e.heading)),r.a.createElement("ul",{className:"slds-coordinates__list"},p.map((function(t,n){return r.a.createElement("li",{className:"slds-coordinates__item",key:n},r.a.createElement("span",{className:"slds-assistive-text","aria-live":"polite"},parseInt(e.selection,0)===n?t.title+" is currently selected":null),r.a.createElement(_,{title:t.title,address:t.address,selected:parseInt(e.selection,0)===n}))}))))},_=function(e){return r.a.createElement("button",{className:"slds-coordinates__item-action slds-button_reset slds-media","aria-pressed":e.selected},r.a.createElement("span",{className:"slds-media__figure"},r.a.createElement(c.a,{symbol:"account"})),r.a.createElement("span",{className:"slds-media__body"},r.a.createElement("span",{className:"slds-text-link"},e.title),r.a.createElement("span",null,e.address)))},O=function(){return r.a.createElement(d.d,null,r.a.createElement("button",{className:"slds-button slds-button_brand"},"Open in Google Maps"))},j=function(e){return r.a.createElement("div",{className:"slds-map"},!e.hideMap&&r.a.createElement("iframe",{id:"GoogleMapID",title:"Google Maps iframe",src:"https://sfdc-map.surge.sh/"}))},C=function(e){return r.a.createElement("div",{className:m()("slds-grid",e.multipleCoordinates&&"slds-has-coordinates")},r.a.createElement("div",{className:"slds-map_container"},r.a.createElement(j,{hideMap:e.hideMap})),e.multipleCoordinates&&r.a.createElement(v,{heading:e.heading,selection:e.selection}))},M=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&y(e,t)}(l,e);var t,n,o,a=E(l);function l(){return b(this,l),a.apply(this,arguments)}return t=l,(n=[{key:"render",value:function(){var e=this.props,t=e.heading,n=e.multipleCoordinates,o=e.selection,a=e.hideMap,l=e.footer;return r.a.createElement(d.b,{className:"slds-modal_medium","aria-labelledby":"modal-heading-id-01"},r.a.createElement(d.e,null,r.a.createElement("h1",{id:"modal-heading-id-01",className:"slds-text-heading_medium slds-hyphenate"},t)),r.a.createElement(d.c,{id:"modal-content-id-01"},r.a.createElement(C,{multipleCoordinates:n,heading:t,selection:o,hideMap:a})),l&&r.a.createElement(O,null))}}])&&h(t.prototype,n),o&&h(t,o),Object.defineProperty(t,"prototype",{writable:!1}),l}(o.Component),w=[{id:"default",label:"Default",element:r.a.createElement(C,{heading:"Salesforce locations in United States (9)",multipleCoordinates:!0})}],N=[{id:"multiple-coordinates-item-one-selection",label:"First Coordinate Selected",element:r.a.createElement(C,{heading:"Salesforce locations in United States (9)",multipleCoordinates:!0,selection:"0"})},{id:"multiple-coordinates-item-two-selection",label:"Second Coordinate Selected",element:r.a.createElement(C,{heading:"Salesforce locations in United States (9)",multipleCoordinates:!0,selection:"1"})}],x=[{id:"single-coordinate",label:"In Modal - Single Coordinate - With Footer",element:r.a.createElement(r.a.Fragment,null,r.a.createElement(M,{heading:"Geo Code: 37°48'08.3\"N 122°15'55.2W",footer:!0}),r.a.createElement("div",{className:"slds-backdrop slds-backdrop_open",role:"presentation"}))},{id:"multiple-coordinates",label:"In Modal - Multiple Coordinates",element:r.a.createElement(r.a.Fragment,null,r.a.createElement(M,{heading:"Salesforce locations in United States (9)",multipleCoordinates:!0,footer:!0}),r.a.createElement("div",{className:"slds-backdrop slds-backdrop_open",role:"presentation"}))}],P=a.c.h2,I=a.c.h3,k=function(){return Object(o.createElement)(a.b,{},Object(o.createElement)("div",{className:"lead doc"},"A map component is used to find a location"),P({id:"Base"},"Base"),Object(o.createElement)(l.a,null,Object(i.f)(w)),I({id:"Mobile"},"Mobile"),Object(o.createElement)(s.a,{patternSpecificText:"maps will have increased header text size along with other small adjustments"}),Object(o.createElement)(l.a,{frameOnly:!0,frameTitle:"Example mobile styles for maps"},Object(i.f)(w)),P({id:"States"},"States"),I({id:"First-Coordinate-Selected"},"First Coordinate Selected"),Object(o.createElement)(l.a,null,Object(i.f)(N,"multiple-coordinates-item-one-selection")),I({id:"Second-Coordinate-Selected"},"Second Coordinate Selected"),Object(o.createElement)(l.a,null,Object(i.f)(N,"multiple-coordinates-item-two-selection")),P({id:"Examples"},"Examples"),I({id:"In-Modal-Single-Coordinate-With-Footer"},"In Modal - Single Coordinate With Footer"),Object(o.createElement)(l.a,{isViewport:!0,demoStyles:"height: 660px;"},Object(i.f)(x,"single-coordinate")),I({id:"In-Modal-Multiple-Coordinates-With-Footer"},"In Modal - Multiple Coordinates With Footer"),Object(o.createElement)(l.a,{isViewport:!0,demoStyles:"height: 660px;"},Object(i.f)(x,"multiple-coordinates")))},F=function(){return Object(a.a)(k())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/notifications/docs.mdx.js"]=function(e){function t(t){for(var n,s,l=t[0],c=t[1],r=t[2],m=0,f=[];m<l.length;m++)s=l[m],Object.prototype.hasOwnProperty.call(i,s)&&i[s]&&f.push(i[s][0]),i[s]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(d&&d(t);f.length;)f.shift()();return o.push.apply(o,r\|\|[]),a()}function a(){for(var e,t=0;t<o.length;t++){for(var a=o[t],n=!0,l=1;l<a.length;l++){var c=a[l];0!==i[c]&&(n=!1)}n&&(o.splice(t--,1),e=s(s.s=a[0]))}return e}var n={},i={50:0},o=[];function s(t){if(n[t])return n[t].exports;var a=n[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,s),a.l=!0,a.exports}s.m=e,s.c=n,s.d=function(e,t,a){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(s.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)s.d(a,n,function(t){return e[t]}.bind(null,n));return a},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=l.push.bind(l);l.push=t,l=l.slice();for(var r=0;r<l.length;r++)t(l[r]);var d=c;return o.push([760,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},760:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return _})),a.d(t,"getContents",(function(){return S}));var n=a(0),i=a.n(n),o=a(4),s=a(2),l=(a(28),a(45),a(14),a(1)),c=a(25),r=a.n(c),d=a(7),m=a(34),f=a(5),u=a.n(f),p=function(e){return i.a.createElement("div",{className:"slds-notification-container"},e.children)},h=function(e){var t=r()("dialog-body-id-"),a=r()("noti-");return i.a.createElement("section",{className:"slds-notification",role:"dialog","aria-labelledby":a,"aria-describedby":t},i.a.createElement("div",{className:"slds-notification__body",id:t},i.a.createElement("a",{className:"slds-notification__target slds-media",href:"#",onClick:function(e){return e.preventDefault()}},i.a.createElement(m.a,{containerClassName:"slds-media__figure",className:"slds-icon_small",symbol:e.type,title:e.type}),i.a.createElement("div",{className:"slds-media__body"},i.a.createElement("h2",{className:"slds-text-heading_small slds-m-bottom_xx-small",id:a},i.a.createElement("span",{className:"slds-assistive-text"},"".concat(e.type," notification:")),e.title),i.a.createElement("p",null,e.description))),i.a.createElement(d.b,{className:"slds-button_icon-container slds-notification__close",symbol:"close",assistiveText:"Dismiss ".concat(e.title," notification"),title:"Dismiss ".concat(e.title," notification")})),e.footer&&i.a.createElement("footer",{className:u()("slds-notification__footer",e.footerClassName)},e.footer))},v=[{id:"default",label:"Default",element:i.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"4.5rem"}},i.a.createElement(p,null,i.a.createElement("div",{"aria-live":"assertive","aria-atomic":"true",className:"slds-assistive-text"},"event notification: Tesla - Renewal meeting"),i.a.createElement(h,{type:"event",title:"Tesla - Renewal meeting",description:"Event at 11:00am on Jan 8"})))}],b=[{id:"task-notification",label:"Task Notification",element:i.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"4.5rem"}},i.a.createElement(p,null,i.a.createElement("div",{"aria-live":"assertive","aria-atomic":"true",className:"slds-assistive-text"},"task notification: Call: Jane Johnson"),i.a.createElement(h,{type:"task",title:"Call: Jane Johnson",description:"Task due on Jan 8"})))},{id:"stacked-2",label:"Stacked Notifications",element:i.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"15rem"}},i.a.createElement(p,null,i.a.createElement("div",{"aria-live":"assertive","aria-atomic":"true",className:"slds-assistive-text"},"task notification: Call One: Jane Johnson"),i.a.createElement(h,{type:"task",title:"Call One: Jane Johnson",description:"Task due on Jan 8"}),i.a.createElement(h,{type:"event",title:"Call Two: Tesla - Renewal meeting",description:"Event at 11:00am on Jan 8"})))},{id:"stacked-3",label:"Three Stacked Notifications",element:i.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"15rem"}},i.a.createElement(p,null,i.a.createElement("div",{"aria-live":"assertive","aria-atomic":"true",className:"slds-assistive-text"},"task notification: Call Two: Jane Johnson"),i.a.createElement(h,{type:"task",title:"Call Two: Jane Johnson",description:"Task due on Jan 8"}),i.a.createElement(h,{type:"event",title:"Call Three: Tesla - Renewal meeting",description:"Event at 11:00am on Jan 8"}),i.a.createElement(h,{type:"task",title:"Call Four: Jim Jameson",description:"Task due on Jan 8"})))},{id:"overflow-six",label:"Six Stacked Notifications",element:i.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"17rem"}},i.a.createElement(p,null,i.a.createElement("div",{"aria-live":"assertive","aria-atomic":"true",className:"slds-assistive-text"},"task notification: Call Five: Jane Johnson"),i.a.createElement(h,{type:"task",title:"Call Five: Jane Johnson",description:"Task due on Jan 8"}),i.a.createElement(h,{type:"event",title:"Call Six: Tesla - Renewal meeting",description:"Event at 11:00am on Jan 8"}),i.a.createElement(h,{type:"task",title:"Call Seven: Jim Jameson",description:"Task due on Jan 8"}),i.a.createElement(h,{type:"task",title:"Call Eight: Jane Johnson",description:"Task due on Jan 8"}),i.a.createElement(h,{type:"event",title:"Call Nine: Tesla - Renewal meeting",description:"Event at 11:00am on Jan 8"}),i.a.createElement(h,{type:"task",title:"Call Ten: Jim Jameson",description:"Task due on Jan 8"})))}],y=o.c.code,E=o.c.h2,k=o.c.h3,N=o.c.li,g=o.c.p,J=o.c.ul,_=function(){return Object(n.createElement)(o.b,{},Object(n.createElement)("div",{className:"doc lead"},"Notifications serve as a feedback & confirmation mechanism that comes in at the top right."),Object(n.createElement)(s.a,{exampleOnly:!0},Object(l.f)(b,"stacked-2")),E({id:"About-Notifications"},"About Notifications"),g({},"The body of the notification is a clickable region that will prompt an additional browser tab with that record loaded and dismiss the notification. It is also dismissable by clicking the X icon."),k({id:"Implementation-Notes"},"Implementation Notes"),g({},"The first three notifications that appear on the page should stack on one another. The fourth notification will show slightly beneath the third notification. Any subsequent notifications won't show until earlier notifications are dismissed."),k({id:"Accessibility"},"Accessibility"),g({},"Notifications should contain ",y({},'role="dialog"')," to signal to\nassistive technology that they require the user’s immediate attention."),k({id:"Requirements"},"Requirements"),g({},"This notification will consist of the following:"),J({},N({},"Entity icon with background color"),N({},"Subject field for the reminder"),N({},"The time/date of when the event/task is occurring"),N({},"An ‘X’ icon to dismiss the reminder")),E({id:"Base"},"Base"),Object(n.createElement)(s.a,null,Object(l.f)(v)),E({id:"Examples"},"Examples"),k({id:"Task-Notification"},"Task Notification"),Object(n.createElement)(s.a,null,Object(l.f)(b,"task-notification")),k({id:"Stacked-Notifications"},"Stacked Notifications"),Object(n.createElement)(s.a,null,Object(l.f)(b,"stacked-2")),k({id:"Three-Stacked-Notifications"},"Three Stacked Notifications"),Object(n.createElement)(s.a,null,Object(l.f)(b,"stacked-3")),k({id:"Six-Stacked-Notifications"},"Six Stacked Notifications"),Object(n.createElement)(s.a,null,Object(l.f)(b,"overflow-six")))},S=function(){return Object(o.a)(_())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/notifications/docs.mdx.js"]=function(e){function t(t){for(var n,s,l=t[0],c=t[1],r=t[2],m=0,f=[];m<l.length;m++)s=l[m],Object.prototype.hasOwnProperty.call(i,s)&&i[s]&&f.push(i[s][0]),i[s]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(d&&d(t);f.length;)f.shift()();return o.push.apply(o,r\|\|[]),a()}function a(){for(var e,t=0;t<o.length;t++){for(var a=o[t],n=!0,l=1;l<a.length;l++){var c=a[l];0!==i[c]&&(n=!1)}n&&(o.splice(t--,1),e=s(s.s=a[0]))}return e}var n={},i={50:0},o=[];function s(t){if(n[t])return n[t].exports;var a=n[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,s),a.l=!0,a.exports}s.m=e,s.c=n,s.d=function(e,t,a){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(s.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)s.d(a,n,function(t){return e[t]}.bind(null,n));return a},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=l.push.bind(l);l.push=t,l=l.slice();for(var r=0;r<l.length;r++)t(l[r]);var d=c;return o.push([760,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},760:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return _})),a.d(t,"getContents",(function(){return S}));var n=a(0),i=a.n(n),o=a(4),s=a(2),l=(a(29),a(45),a(14),a(1)),c=a(25),r=a.n(c),d=a(7),m=a(35),f=a(5),u=a.n(f),p=function(e){return i.a.createElement("div",{className:"slds-notification-container"},e.children)},h=function(e){var t=r()("dialog-body-id-"),a=r()("noti-");return i.a.createElement("section",{className:"slds-notification",role:"dialog","aria-labelledby":a,"aria-describedby":t},i.a.createElement("div",{className:"slds-notification__body",id:t},i.a.createElement("a",{className:"slds-notification__target slds-media",href:"#",onClick:function(e){return e.preventDefault()}},i.a.createElement(m.a,{containerClassName:"slds-media__figure",className:"slds-icon_small",symbol:e.type,title:e.type}),i.a.createElement("div",{className:"slds-media__body"},i.a.createElement("h2",{className:"slds-text-heading_small slds-m-bottom_xx-small",id:a},i.a.createElement("span",{className:"slds-assistive-text"},"".concat(e.type," notification:")),e.title),i.a.createElement("p",null,e.description))),i.a.createElement(d.b,{className:"slds-button_icon-container slds-notification__close",symbol:"close",assistiveText:"Dismiss ".concat(e.title," notification"),title:"Dismiss ".concat(e.title," notification")})),e.footer&&i.a.createElement("footer",{className:u()("slds-notification__footer",e.footerClassName)},e.footer))},v=[{id:"default",label:"Default",element:i.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"4.5rem"}},i.a.createElement(p,null,i.a.createElement("div",{"aria-live":"assertive","aria-atomic":"true",className:"slds-assistive-text"},"event notification: Tesla - Renewal meeting"),i.a.createElement(h,{type:"event",title:"Tesla - Renewal meeting",description:"Event at 11:00am on Jan 8"})))}],b=[{id:"task-notification",label:"Task Notification",element:i.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"4.5rem"}},i.a.createElement(p,null,i.a.createElement("div",{"aria-live":"assertive","aria-atomic":"true",className:"slds-assistive-text"},"task notification: Call: Jane Johnson"),i.a.createElement(h,{type:"task",title:"Call: Jane Johnson",description:"Task due on Jan 8"})))},{id:"stacked-2",label:"Stacked Notifications",element:i.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"15rem"}},i.a.createElement(p,null,i.a.createElement("div",{"aria-live":"assertive","aria-atomic":"true",className:"slds-assistive-text"},"task notification: Call One: Jane Johnson"),i.a.createElement(h,{type:"task",title:"Call One: Jane Johnson",description:"Task due on Jan 8"}),i.a.createElement(h,{type:"event",title:"Call Two: Tesla - Renewal meeting",description:"Event at 11:00am on Jan 8"})))},{id:"stacked-3",label:"Three Stacked Notifications",element:i.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"15rem"}},i.a.createElement(p,null,i.a.createElement("div",{"aria-live":"assertive","aria-atomic":"true",className:"slds-assistive-text"},"task notification: Call Two: Jane Johnson"),i.a.createElement(h,{type:"task",title:"Call Two: Jane Johnson",description:"Task due on Jan 8"}),i.a.createElement(h,{type:"event",title:"Call Three: Tesla - Renewal meeting",description:"Event at 11:00am on Jan 8"}),i.a.createElement(h,{type:"task",title:"Call Four: Jim Jameson",description:"Task due on Jan 8"})))},{id:"overflow-six",label:"Six Stacked Notifications",element:i.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"17rem"}},i.a.createElement(p,null,i.a.createElement("div",{"aria-live":"assertive","aria-atomic":"true",className:"slds-assistive-text"},"task notification: Call Five: Jane Johnson"),i.a.createElement(h,{type:"task",title:"Call Five: Jane Johnson",description:"Task due on Jan 8"}),i.a.createElement(h,{type:"event",title:"Call Six: Tesla - Renewal meeting",description:"Event at 11:00am on Jan 8"}),i.a.createElement(h,{type:"task",title:"Call Seven: Jim Jameson",description:"Task due on Jan 8"}),i.a.createElement(h,{type:"task",title:"Call Eight: Jane Johnson",description:"Task due on Jan 8"}),i.a.createElement(h,{type:"event",title:"Call Nine: Tesla - Renewal meeting",description:"Event at 11:00am on Jan 8"}),i.a.createElement(h,{type:"task",title:"Call Ten: Jim Jameson",description:"Task due on Jan 8"})))}],y=o.c.code,E=o.c.h2,k=o.c.h3,N=o.c.li,g=o.c.p,J=o.c.ul,_=function(){return Object(n.createElement)(o.b,{},Object(n.createElement)("div",{className:"doc lead"},"Notifications serve as a feedback & confirmation mechanism that comes in at the top right."),Object(n.createElement)(s.a,{exampleOnly:!0},Object(l.f)(b,"stacked-2")),E({id:"About-Notifications"},"About Notifications"),g({},"The body of the notification is a clickable region that will prompt an additional browser tab with that record loaded and dismiss the notification. It is also dismissable by clicking the X icon."),k({id:"Implementation-Notes"},"Implementation Notes"),g({},"The first three notifications that appear on the page should stack on one another. The fourth notification will show slightly beneath the third notification. Any subsequent notifications won't show until earlier notifications are dismissed."),k({id:"Accessibility"},"Accessibility"),g({},"Notifications should contain ",y({},'role="dialog"')," to signal to\nassistive technology that they require the user’s immediate attention."),k({id:"Requirements"},"Requirements"),g({},"This notification will consist of the following:"),J({},N({},"Entity icon with background color"),N({},"Subject field for the reminder"),N({},"The time/date of when the event/task is occurring"),N({},"An ‘X’ icon to dismiss the reminder")),E({id:"Base"},"Base"),Object(n.createElement)(s.a,null,Object(l.f)(v)),E({id:"Examples"},"Examples"),k({id:"Task-Notification"},"Task Notification"),Object(n.createElement)(s.a,null,Object(l.f)(b,"task-notification")),k({id:"Stacked-Notifications"},"Stacked Notifications"),Object(n.createElement)(s.a,null,Object(l.f)(b,"stacked-2")),k({id:"Three-Stacked-Notifications"},"Three Stacked Notifications"),Object(n.createElement)(s.a,null,Object(l.f)(b,"stacked-3")),k({id:"Six-Stacked-Notifications"},"Six Stacked Notifications"),Object(n.createElement)(s.a,null,Object(l.f)(b,"overflow-six")))},S=function(){return Object(o.a)(_())}}});

package/__internal/chunked/docs/ui/components/page-headers/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/page-headers/docs.mdx.js"]=function(e){function t(t){for(var a,r,i=t[0],c=t[1],o=t[2],d=0,u=[];d<i.length;d++)r=i[d],Object.prototype.hasOwnProperty.call(l,r)&&l[r]&&u.push(l[r][0]),l[r]=0;for(a in c)Object.prototype.hasOwnProperty.call(c,a)&&(e[a]=c[a]);for(m&&m(t);u.length;)u.shift()();return n.push.apply(n,o\|\|[]),s()}function s(){for(var e,t=0;t<n.length;t++){for(var s=n[t],a=!0,i=1;i<s.length;i++){var c=s[i];0!==l[c]&&(a=!1)}a&&(n.splice(t--,1),e=r(r.s=s[0]))}return e}var a={},l={51:0},n=[];function r(t){if(a[t])return a[t].exports;var s=a[t]={i:t,l:!1,exports:{}};return e[t].call(s.exports,s,s.exports,r),s.l=!0,s.exports}r.m=e,r.c=a,r.d=function(e,t,s){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:s})},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 s=Object.create(null);if(r.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)r.d(s,a,function(t){return e[t]}.bind(null,a));return s},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 o=0;o<i.length;o++)t(i[o]);var m=c;return n.push([720,0]),s()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},720:function(e,t,s){"use strict";s.r(t),s.d(t,"getElement",(function(){return le})),s.d(t,"getContents",(function(){return ne}));var a=s(0),l=s.n(a),n=s(4),r=s(2),i=(s(27),s(14)),c=s(1),o=s(3),m=s.n(o),d=s(5),u=s.n(d),p=s(7),h=s(9),b=s(81),E=s(34),f=s(50),y=function(e){return l.a.createElement(E.a,{symbol:e.type,className:"slds-page-header__icon",assistiveText:e.assistiveText,title:e.title})};y.propTypes={assistiveText:m.a.oneOfType([m.a.string,m.a.bool]),title:m.a.oneOfType([m.a.string,m.a.bool]),type:m.a.string.isRequired};var g=function(e){return l.a.createElement("div",{className:u()("slds-page-header",{"slds-page-header_vertical":e.isVertical,"slds-page-header_related-list":e.isRelatedList,"slds-page-header_record-home":e.isRecordHome})},e.children)};g.propTypes={children:m.a.node,isRelatedList:m.a.bool,isVertical:m.a.bool,isRecordHome:m.a.bool,showTooltip:m.a.bool};var v=function(e){return l.a.createElement("div",{className:u()("slds-page-header__row",{"slds-page-header__row_gutters":e.hasGutters})},e.children)};v.propTypes={children:m.a.node,hasGutters:m.a.bool};var _=function(e){return l.a.createElement("div",{className:u()({"slds-page-header__col-actions":"actions"===e.type,"slds-page-header__col-controls":"controls"===e.type,"slds-page-header__col-details":"details"===e.type,"slds-page-header__col-meta":"meta"===e.type,"slds-page-header__col-title":"title"===e.type})},e.children)};_.propTypes={children:m.a.node,type:m.a.string};var T=function(e){return l.a.createElement(b.a,{figureLeft:e.symbol&&l.a.createElement(y,{assistiveText:!e.objectName&&e.symbol,title:!e.objectName&&e.symbol,type:e.symbol})},l.a.createElement("div",{className:"slds-page-header__name"},l.a.createElement("div",{className:"slds-page-header__name-title"},l.a.createElement("h1",null,e.objectName&&!e.metaText?l.a.createElement("span",null,e.objectName):null,l.a.createElement("span",{className:u()("slds-page-header__title",!e.isVertical&&"slds-truncate",e.isVertical&&"slds-hyphenate"),title:e.titleText},e.titleText))),e.hasSwitcher&&l.a.createElement("div",{className:"slds-page-header__name-switcher slds-is-relative"},l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{"aria-haspopup":"true",assistiveText:"Switch list view",className:"slds-button_icon-small",iconClassName:"slds-icon_x-small",symbol:"down",title:"Switch list view"})}),l.a.createElement(f.a,{className:u()("slds-nubbin_bottom-left",!e.showTooltip&&"slds-fall-into-ground"),id:"dropdown-label",style:{position:"absolute",left:"-12px",top:"-48px",width:"190px"}},e.fieldLevelMessage\|\|"Some helpful information."))),e.metaText&&l.a.createElement("p",{className:"slds-page-header__name-meta"},e.metaText))};T.propTypes={symbol:m.a.string,objectName:m.a.string,hasSwitcher:m.a.bool,metaText:m.a.string,titleText:m.a.string.isRequired,isVertical:m.a.bool};var x=function(e){return l.a.createElement("p",{className:"slds-page-header__meta-text"},e.children)};x.propTypes={children:m.a.node};var w=function(e){return l.a.createElement("div",{className:"slds-page-header__controls"},e.children)};w.propTypes={children:m.a.node};var N=function(e){return l.a.createElement("div",{className:"slds-page-header__control"},e.children)};N.propTypes={children:m.a.node};var O=function(e){return l.a.createElement("ul",{className:"slds-page-header__detail-row"},e.children)};O.propTypes={children:m.a.node};var j=function(e){return l.a.createElement("ul",{className:"slds-page-header__detail-list"},e.children)};j.propTypes={children:m.a.node};var C=function(e){return l.a.createElement("li",{className:"slds-page-header__detail-block"},e.children)};C.propTypes={children:m.a.node};var S=function(e){return l.a.createElement("li",{className:"slds-page-header__detail-item"},e.children)};S.propTypes={children:m.a.node};var L=function(e){return l.a.createElement("div",{className:u()("slds-text-title",!e.isVertical&&"slds-truncate"),title:e.title},e.children)};L.propTypes={children:m.a.node,title:m.a.string,isVertical:m.a.bool};var D=function(e){return l.a.createElement("div",{className:e.isVertical?null:"slds-truncate",title:e.title},e.children)};D.propTypes={children:m.a.node,title:m.a.string,isVertical:m.a.bool};var V=function(e){return l.a.createElement(g,null,l.a.createElement(v,null,l.a.createElement(_,{type:"title"},l.a.createElement(T,{titleText:"Rohde Corp - 80,000 Widgets",metaText:"Mark Jaeckal • Unlimited Customer • 11/13/15",symbol:"opportunity"}))))},M=l.a.createElement(V,null),R=s(12),A=s(41),k=s(13),F=function(e){return l.a.createElement(g,null,l.a.createElement(v,null,l.a.createElement(_,{type:"title"},l.a.createElement(T,{symbol:"opportunity",objectName:"Opportunities",titleText:"Recently Viewed",hasSwitcher:!0,showTooltip:e.showTooltip,fieldLevelMessage:e.fieldLevelMessage})),l.a.createElement(_,{type:"actions"},l.a.createElement(w,null,l.a.createElement(N,null,l.a.createElement(A.a,null,l.a.createElement(A.b,null,l.a.createElement(R.a,{isNeutral:!0},"New")),l.a.createElement(A.b,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})}))))))),l.a.createElement(v,null,l.a.createElement(_,{type:"meta"},l.a.createElement(x,null,"10 items • Updated 13 minutes ago")),l.a.createElement(_,{type:"controls"},l.a.createElement(w,null,l.a.createElement(N,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-more",symbol:"settings",hasDropdown:!0,assistiveText:"List View Controls",title:"List View Controls"})})),l.a.createElement(N,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-more",symbol:"table",hasDropdown:!0,assistiveText:"Change view",title:"Change view"})})),l.a.createElement(N,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"edit",assistiveText:"Edit List",title:"Edit List"})),l.a.createElement(N,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"refresh",assistiveText:"Refresh List",title:"Refresh List"})),l.a.createElement(N,null,l.a.createElement(A.a,null,l.a.createElement(A.b,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"chart",assistiveText:"Charts",title:"Charts"})),l.a.createElement(A.b,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"filterList",assistiveText:"Filters",title:"Filters"}))))))))},I=l.a.createElement(F,null),P=[{id:"base-extra-long",label:"Base with extra long name",element:l.a.createElement(g,null,l.a.createElement(v,null,l.a.createElement(_,{type:"title"},l.a.createElement(T,{symbol:"opportunity",objectName:"Opportunities",titleText:"Recently Viewed listssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss",hasSwitcher:!0})),l.a.createElement(_,{type:"actions"},l.a.createElement(w,null,l.a.createElement(N,null,l.a.createElement(A.a,null,l.a.createElement(A.b,null,l.a.createElement(R.a,{isNeutral:!0},"New")),l.a.createElement(A.b,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"}))))))),l.a.createElement(v,null,l.a.createElement(_,{type:"meta"},l.a.createElement(x,null,"10 items • Updated 13 minutes ago")),l.a.createElement(_,{type:"controls"},l.a.createElement(w,null,l.a.createElement(N,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-more",symbol:"settings",hasDropdown:!0,assistiveText:"List View Controls",title:"List View Controls"})})),l.a.createElement(N,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-more",symbol:"table",hasDropdown:!0,assistiveText:"Change view",title:"Change view"})})),l.a.createElement(N,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"edit",assistiveText:"Edit List",title:"Edit List"})),l.a.createElement(N,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"refresh",assistiveText:"Refresh List",title:"Refresh List"})),l.a.createElement(N,null,l.a.createElement(A.a,null,l.a.createElement(A.b,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"chart",assistiveText:"Charts",title:"Charts"})),l.a.createElement(A.b,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"filterList",assistiveText:"Filters",title:"Filters"}))))))))},{id:"base-with-tooltip-open",label:"Base with tooltip open",element:l.a.createElement(F,{showTooltip:!0,fieldLevelMessage:"Change View for the account"})},{id:"card",label:"Inside a card",element:l.a.createElement(k.d,null,l.a.createElement(F,null))},{id:"tab-card",label:"Inside a tabs card",element:l.a.createElement("div",{className:"slds-tabs_card"},l.a.createElement(F,null))}],H=s(127),W=function(e){return l.a.createElement(g,{isRecordHome:!0},l.a.createElement(v,null,l.a.createElement(_,{type:"title"},l.a.createElement(T,{symbol:"opportunity",objectName:"Opportunity",titleText:"Acme - 1,200 Widgets"})),l.a.createElement(_,{type:"actions"},l.a.createElement(w,null,l.a.createElement(N,null,l.a.createElement(H.a,{isNotSelected:!0,isNeutral:!0})),l.a.createElement(N,null,l.a.createElement(A.a,null,l.a.createElement(A.b,null,l.a.createElement(R.a,{isNeutral:!0},"Edit")),l.a.createElement(A.b,null,l.a.createElement(R.a,{isNeutral:!0},"Delete")),l.a.createElement(A.b,null,l.a.createElement(R.a,{isNeutral:!0},"Clone")),l.a.createElement(A.b,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})}))))))),l.a.createElement(v,{hasGutters:!0},l.a.createElement(_,{type:"details"},l.a.createElement(O,null,l.a.createElement(C,null,l.a.createElement(L,{title:"Field 1"},"Field 1"),l.a.createElement(D,{title:"Description that demonstrates truncation with a long text field."},"Description that demonstrates truncation with a long text field.")),l.a.createElement(C,null,l.a.createElement(L,{title:"Field 2 (3)"},"Field 2 (3)",l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon",iconClassName:"slds-button__icon_small",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})})),l.a.createElement(D,{title:"Multiple Values"},"Multiple Values")),l.a.createElement(C,null,l.a.createElement(L,{title:"Field 3"},"Field 3"),l.a.createElement(D,{title:"Hyperlink"},l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Hyperlink"))),l.a.createElement(C,null,l.a.createElement(L,{title:"Field 4"},"Field 4"),l.a.createElement(D,{title:"Description (2-line truncation—must use JS to truncate)."},"Description (2-line truncati..."))))))},B=l.a.createElement(W,null),G=s(49),J=function(e){return l.a.createElement("div",{className:"demo-only",style:{width:"300px"}},l.a.createElement(g,{isVertical:!0},l.a.createElement(T,{symbol:"opportunity",titleText:"Burlington Textile Weaving Plant Generator",isVertical:!0}),l.a.createElement(w,null,l.a.createElement(H.a,{isNeutral:!0,isNotSelected:!0}),l.a.createElement(A.a,null,l.a.createElement(A.b,null,l.a.createElement(R.a,{isNeutral:!0},"Edit")),l.a.createElement(A.b,null,l.a.createElement(R.a,{isNeutral:!0},"Delete")),l.a.createElement(A.b,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})))),l.a.createElement(j,null,l.a.createElement(S,null,l.a.createElement(L,{title:"Field 1"},"Account Name"),l.a.createElement(D,{title:"Burlington Textile Weaving Plant Generator",isVertical:!0},l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Burlington Textile Weaving Plant Generator"))),l.a.createElement(S,null,l.a.createElement(L,{title:"Address (2)"},"Address (2)",l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon",iconClassName:"slds-button__icon_small",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})})),l.a.createElement(D,{title:"Multiple Values",isVertical:!0},l.a.createElement("div",null,"1 Market St"),l.a.createElement("div",null,"San Francisco, CA 94105"))),l.a.createElement(S,null,l.a.createElement(L,{title:"Close Date"},"Close Date"),l.a.createElement(D,{title:"11/1/2018",isVertical:!0},"11/1/2018")),l.a.createElement(S,null,l.a.createElement(L,{title:"Opportunity Owner"},"Opportunity Owner"),l.a.createElement(D,{title:"Hyperlink",isVertical:!0},l.a.createElement("div",{className:"slds-media slds-media_small"},l.a.createElement("div",{className:"slds-media__figure"},l.a.createElement(G.a,{className:"slds-avatar_circle slds-avatar_x-small"},l.a.createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"}))),l.a.createElement("div",{className:"slds-media__body"},l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Jeanette Gomez"))))),l.a.createElement(S,null,l.a.createElement(L,{title:"Amount"},"Amount"),l.a.createElement(D,{title:"$375,000.00",isVertical:!0},"$375,000.00")))))},U=l.a.createElement(J,null),q=s(134),$=q.a.Crumb,z=function(e){return l.a.createElement(g,{isRelatedList:!0},l.a.createElement(v,null,l.a.createElement(_,{type:"title"},l.a.createElement(q.a,{className:"slds-m-bottom_xx-small"},l.a.createElement($,{href:"#",onClick:function(e){return e.preventDefault()}},"Accounts"),l.a.createElement($,{href:"#",onClick:function(e){return e.preventDefault()}},"Company One")),l.a.createElement(T,{titleText:"Contacts (will truncate)"})),l.a.createElement(_,{type:"actions"},l.a.createElement(w,null,l.a.createElement(N,null,l.a.createElement(A.a,null,l.a.createElement(A.b,null,l.a.createElement(R.a,{isNeutral:!0},"Add Contact")),l.a.createElement(A.b,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})}))))))),l.a.createElement(v,null,l.a.createElement(_,{type:"meta"},l.a.createElement(x,null,"10 items • sorted by name")),l.a.createElement(_,{type:"controls"},l.a.createElement(w,null,l.a.createElement(N,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-more",symbol:"table",hasDropdown:!0,assistiveText:"Change view",title:"Change view"})})),l.a.createElement(N,null,l.a.createElement(A.a,null,l.a.createElement(A.b,null,l.a.createElement(p.b,{className:"slds-button_icon-border",symbol:"chart",assistiveText:"Chart",title:"Chart"})),l.a.createElement(A.b,null,l.a.createElement(p.b,{className:"slds-button_icon-border",symbol:"filterList",assistiveText:"Filter List",title:"Filter List"})),l.a.createElement(A.b,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-more",symbol:"sort",hasDropdown:!0,assistiveText:"Sort List",title:"Sort List"})}))))))))},K=l.a.createElement(z,null),Q=n.c.code,X=n.c.h2,Y=n.c.h3,Z=n.c.h4,ee=n.c.li,te=n.c.p,se=n.c.strong,ae=n.c.ul,le=function(){return Object(a.createElement)(n.b,{},Object(a.createElement)("div",{className:"lead doc"},"Page headers are used at the top of several page types and contains the Title of the page."),Object(a.createElement)(r.a,{exampleOnly:!0},Object(c.f)(I)),X({id:"About-Page-header"},"About Page header"),te({},"The Page Header uses the ",Q({},".slds-page-header")," class as a base and is comprised of multiple components including the Title of the page and supporting details. For large form factors, it may include actions."),X({id:"Base"},"Base"),Object(a.createElement)(r.a,null,Object(c.f)(M)),X({id:"Object-Home"},"Object Home"),Object(a.createElement)(r.a,null,Object(c.f)(I)),te({},"The title for the Object Home page header is a filtering component. The ",Q({},".slds-text-focus")," class is placed on the media object that contains the title and down icon to simulate a hover and focus state of a link."),te({},"This component is created entirely of existing components like buttons, button groups, and icons."),Y({id:"Examples"},"Examples"),Z({id:"With-extra-long-name"},"With extra long name"),Object(a.createElement)(r.a,null,Object(c.f)(P,"base-extra-long")),Z({id:"With-tooltip-open"},"With tooltip open"),Object(a.createElement)(r.a,{demoStyles:"margin-top:4px;"},Object(c.f)(P,"base-with-tooltip-open")),Object(a.createElement)(i.a,{type:"note"},Object(a.createElement)("p",null,"For more information about how to handle the Tooltip behavior, please visit the ",Object(a.createElement)("a",{href:"/components/tooltips/#Examples"},"Tooltip Examples"),".")),Z({id:"Inside-a-card"},"Inside a card"),Object(a.createElement)(r.a,null,Object(c.f)(P,"card")),Z({id:"Inside-a-tabs-card"},"Inside a tabs card"),Object(a.createElement)(r.a,null,Object(c.f)(P,"tab-card")),X({id:"Record-Home"},"Record Home"),Object(a.createElement)(r.a,null,Object(c.f)(B)),te({},"Page header record home contains up to four compact layout fields. They're contained in the ",Q({},".slds-page-header__detail-row")," div. That div contains the top and bottom spacing needed for this version of the page header."),te({},"When text is truncated, the full text should be placed in a tooltip on hover (currently shown in the title attribute). One line truncation is created by using the ",Q({},".slds-truncate")," class. Two line truncation must be achieved using JavaScript."),te({},"The page header is located at the top of every record home. It includes the record title and compact layout for a record. Excluding the title, the page header displays 4 compact layout fields. Similar data types can be rolled up and be displayed as a single field."),te({},se({},"Record Title")),ae({},ee({},"Display Record Type icon to the left of the title"),ee({},"Record Type is displayed above the title"),ee({},"When required, follow action is displayed to the right of the record title"),ee({},"Display one line of text, truncate when the length conflicts with the page level actions")),te({},"As shown in Field 3, web addresses and email addresses should be parsed and displayed as hyperlinks linking to the appropriate ",Q({},"mailto:")," or web url. Do not modify the user's input, display as intended."),te({},"When text is truncated, display full field text in browser tooltip on hover."),te({},"Display addresses in two lines. Street address on first line, City, State and Postal Code on line 2. For lengthy addresses, truncate each line individually based on the available width of the area using the ",Q({},".slds-truncate")," class. Display the full address via browser tooltip."),X({id:"Record-Home-Vertical"},"Record Home Vertical"),Object(a.createElement)(r.a,null,Object(c.f)(U)),te({},"Vertical page header record home contains up to seven compact layout fields. They're contained in the ",Q({},".slds-page-header__detail-row")," div.\nThe heading does not truncate. This is typically used in more compact layouts where more vertical space is desired."),X({id:"Related-List"},"Related List"),Object(a.createElement)(r.a,null,Object(c.f)(K)),te({},"The Related List page header is similar to the Object Home page header. It includes a breadcrumb component at the top and the title is truncated."))},ne=function(){return Object(n.a)(le())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/page-headers/docs.mdx.js"]=function(e){function t(t){for(var a,r,i=t[0],c=t[1],o=t[2],d=0,u=[];d<i.length;d++)r=i[d],Object.prototype.hasOwnProperty.call(l,r)&&l[r]&&u.push(l[r][0]),l[r]=0;for(a in c)Object.prototype.hasOwnProperty.call(c,a)&&(e[a]=c[a]);for(m&&m(t);u.length;)u.shift()();return n.push.apply(n,o\|\|[]),s()}function s(){for(var e,t=0;t<n.length;t++){for(var s=n[t],a=!0,i=1;i<s.length;i++){var c=s[i];0!==l[c]&&(a=!1)}a&&(n.splice(t--,1),e=r(r.s=s[0]))}return e}var a={},l={51:0},n=[];function r(t){if(a[t])return a[t].exports;var s=a[t]={i:t,l:!1,exports:{}};return e[t].call(s.exports,s,s.exports,r),s.l=!0,s.exports}r.m=e,r.c=a,r.d=function(e,t,s){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:s})},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 s=Object.create(null);if(r.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)r.d(s,a,function(t){return e[t]}.bind(null,a));return s},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 o=0;o<i.length;o++)t(i[o]);var m=c;return n.push([720,0]),s()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},720:function(e,t,s){"use strict";s.r(t),s.d(t,"getElement",(function(){return le})),s.d(t,"getContents",(function(){return ne}));var a=s(0),l=s.n(a),n=s(4),r=s(2),i=(s(27),s(14)),c=s(1),o=s(3),m=s.n(o),d=s(5),u=s.n(d),p=s(7),h=s(9),b=s(81),E=s(35),f=s(50),y=function(e){return l.a.createElement(E.a,{symbol:e.type,className:"slds-page-header__icon",assistiveText:e.assistiveText,title:e.title})};y.propTypes={assistiveText:m.a.oneOfType([m.a.string,m.a.bool]),title:m.a.oneOfType([m.a.string,m.a.bool]),type:m.a.string.isRequired};var g=function(e){return l.a.createElement("div",{className:u()("slds-page-header",{"slds-page-header_vertical":e.isVertical,"slds-page-header_related-list":e.isRelatedList,"slds-page-header_record-home":e.isRecordHome})},e.children)};g.propTypes={children:m.a.node,isRelatedList:m.a.bool,isVertical:m.a.bool,isRecordHome:m.a.bool,showTooltip:m.a.bool};var v=function(e){return l.a.createElement("div",{className:u()("slds-page-header__row",{"slds-page-header__row_gutters":e.hasGutters})},e.children)};v.propTypes={children:m.a.node,hasGutters:m.a.bool};var _=function(e){return l.a.createElement("div",{className:u()({"slds-page-header__col-actions":"actions"===e.type,"slds-page-header__col-controls":"controls"===e.type,"slds-page-header__col-details":"details"===e.type,"slds-page-header__col-meta":"meta"===e.type,"slds-page-header__col-title":"title"===e.type})},e.children)};_.propTypes={children:m.a.node,type:m.a.string};var T=function(e){return l.a.createElement(b.a,{figureLeft:e.symbol&&l.a.createElement(y,{assistiveText:!e.objectName&&e.symbol,title:!e.objectName&&e.symbol,type:e.symbol})},l.a.createElement("div",{className:"slds-page-header__name"},l.a.createElement("div",{className:"slds-page-header__name-title"},l.a.createElement("h1",null,e.objectName&&!e.metaText?l.a.createElement("span",null,e.objectName):null,l.a.createElement("span",{className:u()("slds-page-header__title",!e.isVertical&&"slds-truncate",e.isVertical&&"slds-hyphenate"),title:e.titleText},e.titleText))),e.hasSwitcher&&l.a.createElement("div",{className:"slds-page-header__name-switcher slds-is-relative"},l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{"aria-haspopup":"true",assistiveText:"Switch list view",className:"slds-button_icon-small",iconClassName:"slds-icon_x-small",symbol:"down",title:"Switch list view"})}),l.a.createElement(f.a,{className:u()("slds-nubbin_bottom-left",!e.showTooltip&&"slds-fall-into-ground"),id:"dropdown-label",style:{position:"absolute",left:"-12px",top:"-48px",width:"190px"}},e.fieldLevelMessage\|\|"Some helpful information."))),e.metaText&&l.a.createElement("p",{className:"slds-page-header__name-meta"},e.metaText))};T.propTypes={symbol:m.a.string,objectName:m.a.string,hasSwitcher:m.a.bool,metaText:m.a.string,titleText:m.a.string.isRequired,isVertical:m.a.bool};var x=function(e){return l.a.createElement("p",{className:"slds-page-header__meta-text"},e.children)};x.propTypes={children:m.a.node};var w=function(e){return l.a.createElement("div",{className:"slds-page-header__controls"},e.children)};w.propTypes={children:m.a.node};var N=function(e){return l.a.createElement("div",{className:"slds-page-header__control"},e.children)};N.propTypes={children:m.a.node};var O=function(e){return l.a.createElement("ul",{className:"slds-page-header__detail-row"},e.children)};O.propTypes={children:m.a.node};var j=function(e){return l.a.createElement("ul",{className:"slds-page-header__detail-list"},e.children)};j.propTypes={children:m.a.node};var C=function(e){return l.a.createElement("li",{className:"slds-page-header__detail-block"},e.children)};C.propTypes={children:m.a.node};var S=function(e){return l.a.createElement("li",{className:"slds-page-header__detail-item"},e.children)};S.propTypes={children:m.a.node};var L=function(e){return l.a.createElement("div",{className:u()("slds-text-title",!e.isVertical&&"slds-truncate"),title:e.title},e.children)};L.propTypes={children:m.a.node,title:m.a.string,isVertical:m.a.bool};var D=function(e){return l.a.createElement("div",{className:e.isVertical?null:"slds-truncate",title:e.title},e.children)};D.propTypes={children:m.a.node,title:m.a.string,isVertical:m.a.bool};var V=function(e){return l.a.createElement(g,null,l.a.createElement(v,null,l.a.createElement(_,{type:"title"},l.a.createElement(T,{titleText:"Rohde Corp - 80,000 Widgets",metaText:"Mark Jaeckal • Unlimited Customer • 11/13/15",symbol:"opportunity"}))))},M=l.a.createElement(V,null),R=s(12),A=s(41),k=s(13),F=function(e){return l.a.createElement(g,null,l.a.createElement(v,null,l.a.createElement(_,{type:"title"},l.a.createElement(T,{symbol:"opportunity",objectName:"Opportunities",titleText:"Recently Viewed",hasSwitcher:!0,showTooltip:e.showTooltip,fieldLevelMessage:e.fieldLevelMessage})),l.a.createElement(_,{type:"actions"},l.a.createElement(w,null,l.a.createElement(N,null,l.a.createElement(A.a,null,l.a.createElement(A.b,null,l.a.createElement(R.a,{isNeutral:!0},"New")),l.a.createElement(A.b,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})}))))))),l.a.createElement(v,null,l.a.createElement(_,{type:"meta"},l.a.createElement(x,null,"10 items • Updated 13 minutes ago")),l.a.createElement(_,{type:"controls"},l.a.createElement(w,null,l.a.createElement(N,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-more",symbol:"settings",hasDropdown:!0,assistiveText:"List View Controls",title:"List View Controls"})})),l.a.createElement(N,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-more",symbol:"table",hasDropdown:!0,assistiveText:"Change view",title:"Change view"})})),l.a.createElement(N,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"edit",assistiveText:"Edit List",title:"Edit List"})),l.a.createElement(N,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"refresh",assistiveText:"Refresh List",title:"Refresh List"})),l.a.createElement(N,null,l.a.createElement(A.a,null,l.a.createElement(A.b,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"chart",assistiveText:"Charts",title:"Charts"})),l.a.createElement(A.b,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"filterList",assistiveText:"Filters",title:"Filters"}))))))))},I=l.a.createElement(F,null),P=[{id:"base-extra-long",label:"Base with extra long name",element:l.a.createElement(g,null,l.a.createElement(v,null,l.a.createElement(_,{type:"title"},l.a.createElement(T,{symbol:"opportunity",objectName:"Opportunities",titleText:"Recently Viewed listssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss",hasSwitcher:!0})),l.a.createElement(_,{type:"actions"},l.a.createElement(w,null,l.a.createElement(N,null,l.a.createElement(A.a,null,l.a.createElement(A.b,null,l.a.createElement(R.a,{isNeutral:!0},"New")),l.a.createElement(A.b,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"}))))))),l.a.createElement(v,null,l.a.createElement(_,{type:"meta"},l.a.createElement(x,null,"10 items • Updated 13 minutes ago")),l.a.createElement(_,{type:"controls"},l.a.createElement(w,null,l.a.createElement(N,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-more",symbol:"settings",hasDropdown:!0,assistiveText:"List View Controls",title:"List View Controls"})})),l.a.createElement(N,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-more",symbol:"table",hasDropdown:!0,assistiveText:"Change view",title:"Change view"})})),l.a.createElement(N,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"edit",assistiveText:"Edit List",title:"Edit List"})),l.a.createElement(N,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"refresh",assistiveText:"Refresh List",title:"Refresh List"})),l.a.createElement(N,null,l.a.createElement(A.a,null,l.a.createElement(A.b,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"chart",assistiveText:"Charts",title:"Charts"})),l.a.createElement(A.b,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"filterList",assistiveText:"Filters",title:"Filters"}))))))))},{id:"base-with-tooltip-open",label:"Base with tooltip open",element:l.a.createElement(F,{showTooltip:!0,fieldLevelMessage:"Change View for the account"})},{id:"card",label:"Inside a card",element:l.a.createElement(k.d,null,l.a.createElement(F,null))},{id:"tab-card",label:"Inside a tabs card",element:l.a.createElement("div",{className:"slds-tabs_card"},l.a.createElement(F,null))}],H=s(127),W=function(e){return l.a.createElement(g,{isRecordHome:!0},l.a.createElement(v,null,l.a.createElement(_,{type:"title"},l.a.createElement(T,{symbol:"opportunity",objectName:"Opportunity",titleText:"Acme - 1,200 Widgets"})),l.a.createElement(_,{type:"actions"},l.a.createElement(w,null,l.a.createElement(N,null,l.a.createElement(H.a,{isNotSelected:!0,isNeutral:!0})),l.a.createElement(N,null,l.a.createElement(A.a,null,l.a.createElement(A.b,null,l.a.createElement(R.a,{isNeutral:!0},"Edit")),l.a.createElement(A.b,null,l.a.createElement(R.a,{isNeutral:!0},"Delete")),l.a.createElement(A.b,null,l.a.createElement(R.a,{isNeutral:!0},"Clone")),l.a.createElement(A.b,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})}))))))),l.a.createElement(v,{hasGutters:!0},l.a.createElement(_,{type:"details"},l.a.createElement(O,null,l.a.createElement(C,null,l.a.createElement(L,{title:"Field 1"},"Field 1"),l.a.createElement(D,{title:"Description that demonstrates truncation with a long text field."},"Description that demonstrates truncation with a long text field.")),l.a.createElement(C,null,l.a.createElement(L,{title:"Field 2 (3)"},"Field 2 (3)",l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon",iconClassName:"slds-button__icon_small",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})})),l.a.createElement(D,{title:"Multiple Values"},"Multiple Values")),l.a.createElement(C,null,l.a.createElement(L,{title:"Field 3"},"Field 3"),l.a.createElement(D,{title:"Hyperlink"},l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Hyperlink"))),l.a.createElement(C,null,l.a.createElement(L,{title:"Field 4"},"Field 4"),l.a.createElement(D,{title:"Description (2-line truncation—must use JS to truncate)."},"Description (2-line truncati..."))))))},B=l.a.createElement(W,null),G=s(49),J=function(e){return l.a.createElement("div",{className:"demo-only",style:{width:"300px"}},l.a.createElement(g,{isVertical:!0},l.a.createElement(T,{symbol:"opportunity",titleText:"Burlington Textile Weaving Plant Generator",isVertical:!0}),l.a.createElement(w,null,l.a.createElement(H.a,{isNeutral:!0,isNotSelected:!0}),l.a.createElement(A.a,null,l.a.createElement(A.b,null,l.a.createElement(R.a,{isNeutral:!0},"Edit")),l.a.createElement(A.b,null,l.a.createElement(R.a,{isNeutral:!0},"Delete")),l.a.createElement(A.b,null,l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})))),l.a.createElement(j,null,l.a.createElement(S,null,l.a.createElement(L,{title:"Field 1"},"Account Name"),l.a.createElement(D,{title:"Burlington Textile Weaving Plant Generator",isVertical:!0},l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Burlington Textile Weaving Plant Generator"))),l.a.createElement(S,null,l.a.createElement(L,{title:"Address (2)"},"Address (2)",l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon",iconClassName:"slds-button__icon_small",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})})),l.a.createElement(D,{title:"Multiple Values",isVertical:!0},l.a.createElement("div",null,"1 Market St"),l.a.createElement("div",null,"San Francisco, CA 94105"))),l.a.createElement(S,null,l.a.createElement(L,{title:"Close Date"},"Close Date"),l.a.createElement(D,{title:"11/1/2018",isVertical:!0},"11/1/2018")),l.a.createElement(S,null,l.a.createElement(L,{title:"Opportunity Owner"},"Opportunity Owner"),l.a.createElement(D,{title:"Hyperlink",isVertical:!0},l.a.createElement("div",{className:"slds-media slds-media_small"},l.a.createElement("div",{className:"slds-media__figure"},l.a.createElement(G.a,{className:"slds-avatar_circle slds-avatar_x-small"},l.a.createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"}))),l.a.createElement("div",{className:"slds-media__body"},l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Jeanette Gomez"))))),l.a.createElement(S,null,l.a.createElement(L,{title:"Amount"},"Amount"),l.a.createElement(D,{title:"$375,000.00",isVertical:!0},"$375,000.00")))))},U=l.a.createElement(J,null),q=s(134),$=q.a.Crumb,z=function(e){return l.a.createElement(g,{isRelatedList:!0},l.a.createElement(v,null,l.a.createElement(_,{type:"title"},l.a.createElement(q.a,{className:"slds-m-bottom_xx-small"},l.a.createElement($,{href:"#",onClick:function(e){return e.preventDefault()}},"Accounts"),l.a.createElement($,{href:"#",onClick:function(e){return e.preventDefault()}},"Company One")),l.a.createElement(T,{titleText:"Contacts (will truncate)"})),l.a.createElement(_,{type:"actions"},l.a.createElement(w,null,l.a.createElement(N,null,l.a.createElement(A.a,null,l.a.createElement(A.b,null,l.a.createElement(R.a,{isNeutral:!0},"Add Contact")),l.a.createElement(A.b,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-border-filled",symbol:"down","aria-haspopup":"true",assistiveText:"More Actions",title:"More Actions"})}))))))),l.a.createElement(v,null,l.a.createElement(_,{type:"meta"},l.a.createElement(x,null,"10 items • sorted by name")),l.a.createElement(_,{type:"controls"},l.a.createElement(w,null,l.a.createElement(N,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-more",symbol:"table",hasDropdown:!0,assistiveText:"Change view",title:"Change view"})})),l.a.createElement(N,null,l.a.createElement(A.a,null,l.a.createElement(A.b,null,l.a.createElement(p.b,{className:"slds-button_icon-border",symbol:"chart",assistiveText:"Chart",title:"Chart"})),l.a.createElement(A.b,null,l.a.createElement(p.b,{className:"slds-button_icon-border",symbol:"filterList",assistiveText:"Filter List",title:"Filter List"})),l.a.createElement(A.b,null,l.a.createElement(h.l,{triggerIcon:l.a.createElement(p.b,{className:"slds-button_icon-more",symbol:"sort",hasDropdown:!0,assistiveText:"Sort List",title:"Sort List"})}))))))))},K=l.a.createElement(z,null),Q=n.c.code,X=n.c.h2,Y=n.c.h3,Z=n.c.h4,ee=n.c.li,te=n.c.p,se=n.c.strong,ae=n.c.ul,le=function(){return Object(a.createElement)(n.b,{},Object(a.createElement)("div",{className:"lead doc"},"Page headers are used at the top of several page types and contains the Title of the page."),Object(a.createElement)(r.a,{exampleOnly:!0},Object(c.f)(I)),X({id:"About-Page-header"},"About Page header"),te({},"The Page Header uses the ",Q({},".slds-page-header")," class as a base and is comprised of multiple components including the Title of the page and supporting details. For large form factors, it may include actions."),X({id:"Base"},"Base"),Object(a.createElement)(r.a,null,Object(c.f)(M)),X({id:"Object-Home"},"Object Home"),Object(a.createElement)(r.a,null,Object(c.f)(I)),te({},"The title for the Object Home page header is a filtering component. The ",Q({},".slds-text-focus")," class is placed on the media object that contains the title and down icon to simulate a hover and focus state of a link."),te({},"This component is created entirely of existing components like buttons, button groups, and icons."),Y({id:"Examples"},"Examples"),Z({id:"With-extra-long-name"},"With extra long name"),Object(a.createElement)(r.a,null,Object(c.f)(P,"base-extra-long")),Z({id:"With-tooltip-open"},"With tooltip open"),Object(a.createElement)(r.a,{demoStyles:"margin-top:4px;"},Object(c.f)(P,"base-with-tooltip-open")),Object(a.createElement)(i.a,{type:"note"},Object(a.createElement)("p",null,"For more information about how to handle the Tooltip behavior, please visit the ",Object(a.createElement)("a",{href:"/components/tooltips/#Examples"},"Tooltip Examples"),".")),Z({id:"Inside-a-card"},"Inside a card"),Object(a.createElement)(r.a,null,Object(c.f)(P,"card")),Z({id:"Inside-a-tabs-card"},"Inside a tabs card"),Object(a.createElement)(r.a,null,Object(c.f)(P,"tab-card")),X({id:"Record-Home"},"Record Home"),Object(a.createElement)(r.a,null,Object(c.f)(B)),te({},"Page header record home contains up to four compact layout fields. They're contained in the ",Q({},".slds-page-header__detail-row")," div. That div contains the top and bottom spacing needed for this version of the page header."),te({},"When text is truncated, the full text should be placed in a tooltip on hover (currently shown in the title attribute). One line truncation is created by using the ",Q({},".slds-truncate")," class. Two line truncation must be achieved using JavaScript."),te({},"The page header is located at the top of every record home. It includes the record title and compact layout for a record. Excluding the title, the page header displays 4 compact layout fields. Similar data types can be rolled up and be displayed as a single field."),te({},se({},"Record Title")),ae({},ee({},"Display Record Type icon to the left of the title"),ee({},"Record Type is displayed above the title"),ee({},"When required, follow action is displayed to the right of the record title"),ee({},"Display one line of text, truncate when the length conflicts with the page level actions")),te({},"As shown in Field 3, web addresses and email addresses should be parsed and displayed as hyperlinks linking to the appropriate ",Q({},"mailto:")," or web url. Do not modify the user's input, display as intended."),te({},"When text is truncated, display full field text in browser tooltip on hover."),te({},"Display addresses in two lines. Street address on first line, City, State and Postal Code on line 2. For lengthy addresses, truncate each line individually based on the available width of the area using the ",Q({},".slds-truncate")," class. Display the full address via browser tooltip."),X({id:"Record-Home-Vertical"},"Record Home Vertical"),Object(a.createElement)(r.a,null,Object(c.f)(U)),te({},"Vertical page header record home contains up to seven compact layout fields. They're contained in the ",Q({},".slds-page-header__detail-row")," div.\nThe heading does not truncate. This is typically used in more compact layouts where more vertical space is desired."),X({id:"Related-List"},"Related List"),Object(a.createElement)(r.a,null,Object(c.f)(K)),te({},"The Related List page header is similar to the Object Home page header. It includes a breadcrumb component at the top and the title is truncated."))},ne=function(){return Object(n.a)(le())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/picklist/docs.mdx.js"]=function(e){function t(t){for(var n,i,a=t[0],c=t[1],d=t[2],p=0,u=[];p<a.length;p++)i=a[p],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&u.push(o[i][0]),o[i]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(r&&r(t);u.length;)u.shift()();return l.push.apply(l,d\|\|[]),s()}function s(){for(var e,t=0;t<l.length;t++){for(var s=l[t],n=!0,a=1;a<s.length;a++){var c=s[a];0!==o[c]&&(n=!1)}n&&(l.splice(t--,1),e=i(i.s=s[0]))}return e}var n={},o={54:0},l=[];function i(t){if(n[t])return n[t].exports;var s=n[t]={i:t,l:!1,exports:{}};return e[t].call(s.exports,s,s.exports,i),s.l=!0,s.exports}i.m=e,i.c=n,i.d=function(e,t,s){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:s})},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 s=Object.create(null);if(i.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(s,n,function(t){return e[t]}.bind(null,n));return s},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 a=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=a.push.bind(a);a.push=t,a=a.slice();for(var d=0;d<a.length;d++)t(a[d]);var r=c;return l.push([736,0]),s()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},736:function(e,t,s){"use strict";s.r(t),s.d(t,"getElement",(function(){return A})),s.d(t,"getContents",(function(){return D}));var n=s(0),o=s.n(n),l=s(4),i=s(2),a=(s(28),s(45),s(14),s(1)),c=s(23),d=s(24),r=s(3),p=s.n(r),u=s(5),m=s.n(u),b=s(10),h=s(7),x=s(8),f=function(e){return o.a.createElement("div",{className:m()("slds-dropdown",e.className),role:"listbox","aria-label":"{{Placeholder for Dropdown Menu Options}}",tabIndex:"0"},e.children)},O=function(e){return o.a.createElement("ul",{id:e.id\|\|"option-list-01",className:m()("slds-dropdown__list",e.className),role:"group"===e.role?"group":"presentation","aria-label":"group"===e.role?e["aria-label"]:null},e.children)},_=function(e){var t=a.d.uniqueId("listbox-option-");return o.a.createElement("li",{className:e.className,role:"presentation"},o.a.createElement("span",{className:m()("presentation"===e.role?"slds-lookup__item_label":e.text?"slds-lookup__item-action slds-lookup__item-action_label":"slds-lookup__item-action slds-media"),role:e.role?e.role:"option",tabIndex:e.tabIndex\|\|"-1",id:t},e.isSelectable?o.a.createElement(b.a,{className:"slds-icon slds-icon_selected slds-icon_x-small slds-icon-text-default slds-m-right_x-small slds-shrink-none",sprite:"utility",symbol:"check"}):null,e.headerText?o.a.createElement("h3",{className:"slds-text-title_caps",role:"presentation"},e.headerText):e.text?o.a.createElement("span",{className:"slds-truncate",title:e.title},e.children):e.children))},y=function(e){var t=e.autocomplete,s=e.dropdown,n=e.placeholder;return o.a.createElement(x.b,null,o.a.createElement(x.d,{labelContent:"Categories",inputId:"text-input-01"}),o.a.createElement(x.c,{className:"slds-input-has-icon slds-input-has-icon_right slds-picklist__input"},o.a.createElement("input",{id:"text-input-01",className:"slds-lookup__search-input slds-input",type:"text",placeholder:n,"aria-owns":"option-list-01",role:"textbox",readOnly:!t,"aria-autocomplete":t?"list":null}),t?null:o.a.createElement(h.b,{className:"slds-input__icon slds-text-color_default",symbol:"down",assistiveText:"Expand category options","aria-expanded":"open"===s?"true":"false",iconClassName:"slds-button__icon",tabIndex:"-1"})))};y.propTypes={autocomplete:p.a.bool,dropdown:p.a.string,placeholder:p.a.string},y.defaultProps={placeholder:"Select an Option…"};var g=s(70),E=s(11),I={option1:{name:"Option A"},option2:{name:"Option B"},option3:{name:"Option ABCDEFGHIJKLMNOPQRSTUVWXYZ"}},S={option1:{name:"Option A",selected:!0},option2:{name:"Option B"},option3:{name:"Option ABCDEFGHIJKLMNOPQRSTUVWXYZ"}},w={option1:{name:"Option A",selected:!0},option2:{name:"Option B",selected:!0},option3:{name:"Option ABCDEFGHIJKLMNOPQRSTUVWXYZ"}},v=[{id:"default",label:"Default",element:o.a.createElement(c.b,{id:a.d.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-1",inputIconPosition:"right",rightInputIcon:o.a.createElement(E.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(d.e,{id:"listbox-id-1",snapshot:I,type:"plain",count:8}),resultsType:"listbox",selectOnly:!0,hasInteractions:!0})}],N=[{id:"focused",label:"Focused",element:o.a.createElement(c.b,{id:a.d.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-2",inputIconPosition:"right",rightInputIcon:o.a.createElement(E.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(d.e,{id:"listbox-id-2",snapshot:I,type:"plain",count:8}),resultsType:"listbox",selectOnly:!0,hasFocus:!0,isOpen:!0})},{id:"open-item-focused",label:"Open - Item Focused",element:o.a.createElement(c.b,{id:a.d.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-3",inputIconPosition:"right",rightInputIcon:o.a.createElement(E.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(d.e,{id:"listbox-id-3",snapshot:{option1:{name:"Option A",focused:!0},option2:{name:"Option B"},option3:{name:"Option ABCDEFGHIJKLMNOPQRSTUVWXYZ"}},type:"plain",count:8}),resultsType:"listbox","aria-activedescendant":"option1",selectOnly:!0,hasFocus:!0,isOpen:!0})},{id:"open-option-selected",label:"Open - Option Selected",element:o.a.createElement(c.b,{id:a.d.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-4",inputIconPosition:"right",value:"Option A",rightInputIcon:o.a.createElement(E.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(d.e,{id:"listbox-id-4",snapshot:S,type:"plain",count:8}),resultsType:"listbox","aria-activedescendant":"option1",selectOnly:!0,hasFocus:!0,isOpen:!0})},{id:"open-options-selected",label:"Open - Options Selected",element:o.a.createElement(c.b,{id:a.d.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-5",selectOnly:!0,value:"2 Options Selected",inputIconPosition:"right",rightInputIcon:o.a.createElement(E.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(d.e,{id:"listbox-id-5",snapshot:w,type:"plain",count:8}),resultsType:"listbox",isOpen:!0,hasFocus:!0})},{id:"closed-option-selected",label:"Closed - Option Selected",element:o.a.createElement(c.b,{id:a.d.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-6",inputIconPosition:"right",value:"Option A",rightInputIcon:o.a.createElement(E.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(d.e,{id:"listbox-id-6",snapshot:S,type:"plain",count:8}),resultsType:"listbox","aria-activedescendant":"option1",selectOnly:!0})},{id:"closed-options-selected",label:"Closed - Options Selected",element:o.a.createElement(c.b,{id:a.d.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-7",selectOnly:!0,value:"2 Options Selected",inputIconPosition:"right",rightInputIcon:o.a.createElement(E.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(d.e,{id:"listbox-id-7",snapshot:w,type:"plain",count:8}),resultsType:"listbox",listboxOfSelections:o.a.createElement(g.a,{snapshot:{option1:{name:"Option A",tabIndex:0},option2:{name:"Option B"}},count:2})})},{id:"group-heading",label:"Group heading label",element:o.a.createElement(c.b,{id:a.d.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-8",selectOnly:!0,inputIconPosition:"right",rightInputIcon:o.a.createElement(E.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(d.c,{id:"listbox-id-8",className:"slds-dropdown slds-dropdown_fluid","aria-label":"{{Placeholder for Dropdown Items}}"},o.a.createElement(d.b,{"aria-label":"Group One",snapshot:{option0:{name:"Recently Viewed",label:!0},option1:{name:"Option A"},option2:{name:"Option B"}},count:3})),resultsType:"listbox",isOpen:!0,hasFocus:!0})},{id:"deprecated-picklist-open",label:"Deprecated Picklist Open",element:o.a.createElement("div",{className:"demo-only",style:{height:"240px"}},o.a.createElement("div",{className:"slds-picklist slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open"},o.a.createElement(y,{dropdown:"open"}),o.a.createElement(f,{className:"slds-dropdown_left slds-dropdown_length-5"},o.a.createElement(O,null,o.a.createElement(_,{isSelectable:!0,text:!0,title:"Option A",tabIndex:"0"},"Option A"),o.a.createElement(_,{isSelectable:!0,text:!0,title:"Option B"},"Option B"),o.a.createElement(_,{isSelectable:!0,text:!0,title:"Option C"},"Option C"),o.a.createElement(_,{isSelectable:!0,text:!0,title:"Option D"},"Option D"),o.a.createElement(_,{isSelectable:!0,text:!0,title:"Option E"},"Option E"),o.a.createElement(_,{isSelectable:!0,text:!0,title:"Option F"},"Option FGHIJKLMNOPQRSTUVWXYZ")))))}],C=l.c.a,T=l.c.code,j=l.c.h2,k=l.c.h3,P=l.c.p,A=function(){return Object(n.createElement)(l.b,{},Object(n.createElement)("div",{className:"doc lead"},"A Picklist provides a user with an select-only component that is functionally similar to an HTML `select` element. It is accompanied with a listbox of pre-defined options. A picklist has both single and multi-selection patterns."),Object(n.createElement)(i.a,{demoStyles:"height: 11rem;",exampleOnly:!0},Object(a.f)(N,"open-option-selected")),j({id:"About-Picklist"},"About Picklist"),P({},"A picklist is a widget that displays a list of selectable options. When an option is selected, it is shown as selected and the value of the read-only input is updated to match it."),P({},'A multi-select picklist is a widget that displays a list of selectable options, where more than one option can be chosen. When more than one option has been selected, the value of the read-only input should update with the total number of selected items, such as "3 options selected". When a picklist with multiple selected options is closed, a listbox of pills is also used to represent those selected options. The listbox of pills is positioned below the read-only input, each pill represents a selected option. This allows a user to easily see and remove selected items.'),P({},"The target HTML element, ",T({},"slds-combobox")," and dropdown need to be wrapped in the class ",T({},".slds-dropdown-trigger dropdown-trigger_click"),"."),j({id:"Accessibility"},"Accessibility"),P({},'A Picklist allows a user to select and set a value from a pre-defined list of options. As such we follow the ARIA Combobox widget pattern to implement it as it\'s the most appropriate concept to achieve this. The variant of Combobox we chose is the "Read-only" version, as a users keyboard input cannot directly affect the value set in the Combobox, but can only select a value from a pre-defined list. It also does not perform a search, or autocomplete function. It most closely resembles the HTML ',T({},"select")," element."),P({},"Implementing a multi-select pattern with a Combobox is not standard, nor is it technically supported by the specification. Therefore great care should be paid to the extra steps we take to try and communicate multi-selection."),P({},"Please refer to the ",C({href:"/components/combobox"},"Combobox")," documentation relating to read-only implementation guidelines."),j({id:"Default"},"Default"),P({},"A Picklist provides a user with an read-only input field that is accompanied with a listbox of pre-defined options. A picklist has a single and multi-selection pattern."),Object(n.createElement)(i.a,{demoStyles:"height: 11rem;"},Object(a.f)(v)),j({id:"States"},"States"),k({id:"Focused"},"Focused"),Object(n.createElement)(i.a,{demoStyles:"height: 11rem;"},Object(a.f)(N,"focused")),k({id:"Open-Item-Focused"},"Open - Item Focused"),Object(n.createElement)(i.a,{demoStyles:"height: 11rem;"},Object(a.f)(N,"open-item-focused")),k({id:"Open-Option-Selected"},"Open - Option Selected"),Object(n.createElement)(i.a,{demoStyles:"height: 11rem;"},Object(a.f)(N,"open-option-selected")),k({id:"Open-Options-Selected"},"Open - Options Selected"),Object(n.createElement)(i.a,{demoStyles:"height: 11rem;"},Object(a.f)(N,"open-options-selected")),k({id:"Closed-Option-Selected"},"Closed - Option Selected"),Object(n.createElement)(i.a,null,Object(a.f)(N,"closed-option-selected")),k({id:"Closed-Options-Selected"},"Closed - Options Selected"),Object(n.createElement)(i.a,null,Object(a.f)(N,"closed-options-selected")),j({id:"Examples"},"Examples"),k({id:"Group-heading-label"},"Group heading label"),Object(n.createElement)(i.a,{demoStyles:"height: 13rem;"},Object(a.f)(N,"group-heading")))},D=function(){return Object(l.a)(A())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/picklist/docs.mdx.js"]=function(e){function t(t){for(var n,i,a=t[0],c=t[1],d=t[2],p=0,u=[];p<a.length;p++)i=a[p],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&u.push(o[i][0]),o[i]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(r&&r(t);u.length;)u.shift()();return l.push.apply(l,d\|\|[]),s()}function s(){for(var e,t=0;t<l.length;t++){for(var s=l[t],n=!0,a=1;a<s.length;a++){var c=s[a];0!==o[c]&&(n=!1)}n&&(l.splice(t--,1),e=i(i.s=s[0]))}return e}var n={},o={54:0},l=[];function i(t){if(n[t])return n[t].exports;var s=n[t]={i:t,l:!1,exports:{}};return e[t].call(s.exports,s,s.exports,i),s.l=!0,s.exports}i.m=e,i.c=n,i.d=function(e,t,s){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:s})},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 s=Object.create(null);if(i.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(s,n,function(t){return e[t]}.bind(null,n));return s},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 a=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=a.push.bind(a);a.push=t,a=a.slice();for(var d=0;d<a.length;d++)t(a[d]);var r=c;return l.push([736,0]),s()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},736:function(e,t,s){"use strict";s.r(t),s.d(t,"getElement",(function(){return A})),s.d(t,"getContents",(function(){return D}));var n=s(0),o=s.n(n),l=s(4),i=s(2),a=(s(29),s(45),s(14),s(1)),c=s(23),d=s(24),r=s(3),p=s.n(r),u=s(5),m=s.n(u),b=s(10),h=s(7),x=s(8),f=function(e){return o.a.createElement("div",{className:m()("slds-dropdown",e.className),role:"listbox","aria-label":"{{Placeholder for Dropdown Menu Options}}",tabIndex:"0"},e.children)},O=function(e){return o.a.createElement("ul",{id:e.id\|\|"option-list-01",className:m()("slds-dropdown__list",e.className),role:"group"===e.role?"group":"presentation","aria-label":"group"===e.role?e["aria-label"]:null},e.children)},_=function(e){var t=a.d.uniqueId("listbox-option-");return o.a.createElement("li",{className:e.className,role:"presentation"},o.a.createElement("span",{className:m()("presentation"===e.role?"slds-lookup__item_label":e.text?"slds-lookup__item-action slds-lookup__item-action_label":"slds-lookup__item-action slds-media"),role:e.role?e.role:"option",tabIndex:e.tabIndex\|\|"-1",id:t},e.isSelectable?o.a.createElement(b.a,{className:"slds-icon slds-icon_selected slds-icon_x-small slds-icon-text-default slds-m-right_x-small slds-shrink-none",sprite:"utility",symbol:"check"}):null,e.headerText?o.a.createElement("h3",{className:"slds-text-title_caps",role:"presentation"},e.headerText):e.text?o.a.createElement("span",{className:"slds-truncate",title:e.title},e.children):e.children))},y=function(e){var t=e.autocomplete,s=e.dropdown,n=e.placeholder;return o.a.createElement(x.b,null,o.a.createElement(x.d,{labelContent:"Categories",inputId:"text-input-01"}),o.a.createElement(x.c,{className:"slds-input-has-icon slds-input-has-icon_right slds-picklist__input"},o.a.createElement("input",{id:"text-input-01",className:"slds-lookup__search-input slds-input",type:"text",placeholder:n,"aria-owns":"option-list-01",role:"textbox",readOnly:!t,"aria-autocomplete":t?"list":null}),t?null:o.a.createElement(h.b,{className:"slds-input__icon slds-text-color_default",symbol:"down",assistiveText:"Expand category options","aria-expanded":"open"===s?"true":"false",iconClassName:"slds-button__icon",tabIndex:"-1"})))};y.propTypes={autocomplete:p.a.bool,dropdown:p.a.string,placeholder:p.a.string},y.defaultProps={placeholder:"Select an Option…"};var g=s(70),E=s(11),I={option1:{name:"Option A"},option2:{name:"Option B"},option3:{name:"Option ABCDEFGHIJKLMNOPQRSTUVWXYZ"}},S={option1:{name:"Option A",selected:!0},option2:{name:"Option B"},option3:{name:"Option ABCDEFGHIJKLMNOPQRSTUVWXYZ"}},w={option1:{name:"Option A",selected:!0},option2:{name:"Option B",selected:!0},option3:{name:"Option ABCDEFGHIJKLMNOPQRSTUVWXYZ"}},v=[{id:"default",label:"Default",element:o.a.createElement(c.b,{id:a.d.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-1",inputIconPosition:"right",rightInputIcon:o.a.createElement(E.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(d.e,{id:"listbox-id-1",snapshot:I,type:"plain",count:8}),resultsType:"listbox",selectOnly:!0,hasInteractions:!0})}],N=[{id:"focused",label:"Focused",element:o.a.createElement(c.b,{id:a.d.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-2",inputIconPosition:"right",rightInputIcon:o.a.createElement(E.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(d.e,{id:"listbox-id-2",snapshot:I,type:"plain",count:8}),resultsType:"listbox",selectOnly:!0,hasFocus:!0,isOpen:!0})},{id:"open-item-focused",label:"Open - Item Focused",element:o.a.createElement(c.b,{id:a.d.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-3",inputIconPosition:"right",rightInputIcon:o.a.createElement(E.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(d.e,{id:"listbox-id-3",snapshot:{option1:{name:"Option A",focused:!0},option2:{name:"Option B"},option3:{name:"Option ABCDEFGHIJKLMNOPQRSTUVWXYZ"}},type:"plain",count:8}),resultsType:"listbox","aria-activedescendant":"option1",selectOnly:!0,hasFocus:!0,isOpen:!0})},{id:"open-option-selected",label:"Open - Option Selected",element:o.a.createElement(c.b,{id:a.d.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-4",inputIconPosition:"right",value:"Option A",rightInputIcon:o.a.createElement(E.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(d.e,{id:"listbox-id-4",snapshot:S,type:"plain",count:8}),resultsType:"listbox","aria-activedescendant":"option1",selectOnly:!0,hasFocus:!0,isOpen:!0})},{id:"open-options-selected",label:"Open - Options Selected",element:o.a.createElement(c.b,{id:a.d.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-5",selectOnly:!0,value:"2 Options Selected",inputIconPosition:"right",rightInputIcon:o.a.createElement(E.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(d.e,{id:"listbox-id-5",snapshot:w,type:"plain",count:8}),resultsType:"listbox",isOpen:!0,hasFocus:!0})},{id:"closed-option-selected",label:"Closed - Option Selected",element:o.a.createElement(c.b,{id:a.d.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-6",inputIconPosition:"right",value:"Option A",rightInputIcon:o.a.createElement(E.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(d.e,{id:"listbox-id-6",snapshot:S,type:"plain",count:8}),resultsType:"listbox","aria-activedescendant":"option1",selectOnly:!0})},{id:"closed-options-selected",label:"Closed - Options Selected",element:o.a.createElement(c.b,{id:a.d.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-7",selectOnly:!0,value:"2 Options Selected",inputIconPosition:"right",rightInputIcon:o.a.createElement(E.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(d.e,{id:"listbox-id-7",snapshot:w,type:"plain",count:8}),resultsType:"listbox",listboxOfSelections:o.a.createElement(g.a,{snapshot:{option1:{name:"Option A",tabIndex:0},option2:{name:"Option B"}},count:2})})},{id:"group-heading",label:"Group heading label",element:o.a.createElement(c.b,{id:a.d.uniqueId("combobox-id-"),containerClassName:"slds-size_small","aria-controls":"listbox-id-8",selectOnly:!0,inputIconPosition:"right",rightInputIcon:o.a.createElement(E.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(d.c,{id:"listbox-id-8",className:"slds-dropdown slds-dropdown_fluid","aria-label":"{{Placeholder for Dropdown Items}}"},o.a.createElement(d.b,{"aria-label":"Group One",snapshot:{option0:{name:"Recently Viewed",label:!0},option1:{name:"Option A"},option2:{name:"Option B"}},count:3})),resultsType:"listbox",isOpen:!0,hasFocus:!0})},{id:"deprecated-picklist-open",label:"Deprecated Picklist Open",element:o.a.createElement("div",{className:"demo-only",style:{height:"240px"}},o.a.createElement("div",{className:"slds-picklist slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open"},o.a.createElement(y,{dropdown:"open"}),o.a.createElement(f,{className:"slds-dropdown_left slds-dropdown_length-5"},o.a.createElement(O,null,o.a.createElement(_,{isSelectable:!0,text:!0,title:"Option A",tabIndex:"0"},"Option A"),o.a.createElement(_,{isSelectable:!0,text:!0,title:"Option B"},"Option B"),o.a.createElement(_,{isSelectable:!0,text:!0,title:"Option C"},"Option C"),o.a.createElement(_,{isSelectable:!0,text:!0,title:"Option D"},"Option D"),o.a.createElement(_,{isSelectable:!0,text:!0,title:"Option E"},"Option E"),o.a.createElement(_,{isSelectable:!0,text:!0,title:"Option F"},"Option FGHIJKLMNOPQRSTUVWXYZ")))))}],C=l.c.a,T=l.c.code,j=l.c.h2,k=l.c.h3,P=l.c.p,A=function(){return Object(n.createElement)(l.b,{},Object(n.createElement)("div",{className:"doc lead"},"A Picklist provides a user with an select-only component that is functionally similar to an HTML `select` element. It is accompanied with a listbox of pre-defined options. A picklist has both single and multi-selection patterns."),Object(n.createElement)(i.a,{demoStyles:"height: 11rem;",exampleOnly:!0},Object(a.f)(N,"open-option-selected")),j({id:"About-Picklist"},"About Picklist"),P({},"A picklist is a widget that displays a list of selectable options. When an option is selected, it is shown as selected and the value of the read-only input is updated to match it."),P({},'A multi-select picklist is a widget that displays a list of selectable options, where more than one option can be chosen. When more than one option has been selected, the value of the read-only input should update with the total number of selected items, such as "3 options selected". When a picklist with multiple selected options is closed, a listbox of pills is also used to represent those selected options. The listbox of pills is positioned below the read-only input, each pill represents a selected option. This allows a user to easily see and remove selected items.'),P({},"The target HTML element, ",T({},"slds-combobox")," and dropdown need to be wrapped in the class ",T({},".slds-dropdown-trigger dropdown-trigger_click"),"."),j({id:"Accessibility"},"Accessibility"),P({},'A Picklist allows a user to select and set a value from a pre-defined list of options. As such we follow the ARIA Combobox widget pattern to implement it as it\'s the most appropriate concept to achieve this. The variant of Combobox we chose is the "Read-only" version, as a users keyboard input cannot directly affect the value set in the Combobox, but can only select a value from a pre-defined list. It also does not perform a search, or autocomplete function. It most closely resembles the HTML ',T({},"select")," element."),P({},"Implementing a multi-select pattern with a Combobox is not standard, nor is it technically supported by the specification. Therefore great care should be paid to the extra steps we take to try and communicate multi-selection."),P({},"Please refer to the ",C({href:"/components/combobox"},"Combobox")," documentation relating to read-only implementation guidelines."),j({id:"Default"},"Default"),P({},"A Picklist provides a user with an read-only input field that is accompanied with a listbox of pre-defined options. A picklist has a single and multi-selection pattern."),Object(n.createElement)(i.a,{demoStyles:"height: 11rem;"},Object(a.f)(v)),j({id:"States"},"States"),k({id:"Focused"},"Focused"),Object(n.createElement)(i.a,{demoStyles:"height: 11rem;"},Object(a.f)(N,"focused")),k({id:"Open-Item-Focused"},"Open - Item Focused"),Object(n.createElement)(i.a,{demoStyles:"height: 11rem;"},Object(a.f)(N,"open-item-focused")),k({id:"Open-Option-Selected"},"Open - Option Selected"),Object(n.createElement)(i.a,{demoStyles:"height: 11rem;"},Object(a.f)(N,"open-option-selected")),k({id:"Open-Options-Selected"},"Open - Options Selected"),Object(n.createElement)(i.a,{demoStyles:"height: 11rem;"},Object(a.f)(N,"open-options-selected")),k({id:"Closed-Option-Selected"},"Closed - Option Selected"),Object(n.createElement)(i.a,null,Object(a.f)(N,"closed-option-selected")),k({id:"Closed-Options-Selected"},"Closed - Options Selected"),Object(n.createElement)(i.a,null,Object(a.f)(N,"closed-options-selected")),j({id:"Examples"},"Examples"),k({id:"Group-heading-label"},"Group heading label"),Object(n.createElement)(i.a,{demoStyles:"height: 13rem;"},Object(a.f)(N,"group-heading")))},D=function(){return Object(l.a)(A())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/pills/docs.mdx.js"]=function(e){function t(t){for(var a,s,r=t[0],o=t[1],c=t[2],p=0,m=[];p<r.length;p++)s=r[p],Object.prototype.hasOwnProperty.call(n,s)&&n[s]&&m.push(n[s][0]),n[s]=0;for(a in o)Object.prototype.hasOwnProperty.call(o,a)&&(e[a]=o[a]);for(d&&d(t);m.length;)m.shift()();return i.push.apply(i,c\|\|[]),l()}function l(){for(var e,t=0;t<i.length;t++){for(var l=i[t],a=!0,r=1;r<l.length;r++){var o=l[r];0!==n[o]&&(a=!1)}a&&(i.splice(t--,1),e=s(s.s=l[0]))}return e}var a={},n={55:0},i=[];function s(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,s),l.l=!0,l.exports}s.m=e,s.c=a,s.d=function(e,t,l){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:l})},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 l=Object.create(null);if(s.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)s.d(l,a,function(t){return e[t]}.bind(null,a));return l},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var d=o;return i.push([745,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},745:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return P})),l.d(t,"getContents",(function(){return N}));var a=l(0),n=l.n(a),i=l(4),s=l(2),r=(l(27),l(14),l(39)),o=l(1),c=l(38),d=l(10),p=l(29),m=n.a.createElement(p.e,null),u=[{id:"error",label:"Error",element:n.a.createElement(p.e,{className:"slds-has-error"},n.a.createElement("span",{className:"slds-pill__icon_container"},n.a.createElement("span",{className:"slds-icon_container",title:"Error"},n.a.createElement(d.a,{className:"slds-icon slds-icon-text-error",sprite:"utility",symbol:"error"}),n.a.createElement("span",{className:"slds-assistive-text"},"Warning"))))},{id:"truncated",label:"Truncated",demoStyles:"width: 220px;",storybookStyles:!0,element:n.a.createElement(p.f,null,n.a.createElement(p.e,{label:"Pill label that is longer than the area that contains it"}))},{id:"pill-truncated-tooltip",label:"Truncated Pill as Tooltip",demoStyles:"width: 220px;",storybookStyles:!0,element:n.a.createElement(p.g,null)},{id:"linked-pill-truncated-tooltip",label:"Truncated Linked Pill as Tooltip",demoStyles:"width: 220px;",storybookStyles:!0,element:n.a.createElement(p.a,null)}],b=[{id:"icon",label:"With icon",element:n.a.createElement(p.e,null,n.a.createElement("span",{className:"slds-pill__icon_container"},n.a.createElement("span",{className:"slds-icon_container slds-icon-standard-account",title:"Account"},n.a.createElement(d.a,{className:"slds-icon",sprite:"standard",symbol:"account"}),n.a.createElement("span",{className:"slds-assistive-text"},"Account"))))},{id:"avatar",label:"With avatar",element:n.a.createElement(p.e,null,n.a.createElement("span",{className:"slds-pill__icon_container"},n.a.createElement("span",{className:"slds-avatar slds-avatar_circle",title:"User avatar"},n.a.createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"}))))},{id:"container",label:"Pill with Container",element:n.a.createElement(p.f,null,n.a.createElement(p.e,null),n.a.createElement(p.e,null),n.a.createElement(p.e,null))},{id:"container-bare",label:"Pill with Bare Container - Deprecated",element:n.a.createElement(p.f,{variant:"container-bare"},n.a.createElement(p.e,null),n.a.createElement(p.e,null),n.a.createElement(p.e,null))}],h=l(49),f=l(34),E=[{id:"default",label:"Default",element:n.a.createElement(p.f,{type:"listbox",id:"listbox-pill-default"},n.a.createElement(p.c,{id:"listbox-pill-default"},n.a.createElement(p.d,null,n.a.createElement(p.b,{tabIndex:"0"})),n.a.createElement(p.d,null,n.a.createElement(p.b,null))))}],x=[{id:"listbox-pill-with-icon",label:"With icon",element:n.a.createElement(p.f,{type:"listbox",id:"listbox-pill-with-icon"},n.a.createElement(p.c,{id:"listbox-pill-with-icon"},n.a.createElement(p.d,null,n.a.createElement(p.b,{tabIndex:"0"},n.a.createElement(f.a,{containerClassName:"slds-pill__icon_container",title:"Account",assistiveText:"Account"}))),n.a.createElement(p.d,null,n.a.createElement(p.b,null,n.a.createElement(f.a,{containerClassName:"slds-pill__icon_container",symbol:"case",title:"Case",assistiveText:"Case"})))))},{id:"listbox-pill-with-avatar",label:"With avatar",element:n.a.createElement(p.f,{type:"listbox",id:"listbox-pill-with-avatar"},n.a.createElement(p.c,{id:"listbox-pill-with-avatar"},n.a.createElement(p.d,null,n.a.createElement(p.b,{tabIndex:"0"},n.a.createElement(h.a,{className:"slds-avatar_x-small slds-pill__icon_container"},n.a.createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"})))),n.a.createElement(p.d,null,n.a.createElement(p.b,null,n.a.createElement(h.a,{className:"slds-avatar_x-small slds-pill__icon_container"},n.a.createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"}))))))},{id:"listbox-pill-bare",label:"Bare",element:n.a.createElement(p.f,{type:"listbox",id:"listbox-pills-bare"},n.a.createElement(p.c,{id:"listbox-pills-bare"},n.a.createElement(p.d,null,n.a.createElement(p.b,{className:"slds-pill_bare",tabIndex:"0"})),n.a.createElement(p.d,null,n.a.createElement(p.b,{className:"slds-pill_bare"}))))},{id:"listbox-pill-group",label:"Grouped",element:n.a.createElement("div",null,n.a.createElement("div",{className:"slds-combobox_container"}),n.a.createElement(p.f,{variant:"listbox-group"},n.a.createElement(p.c,null,n.a.createElement(p.d,null,n.a.createElement(p.b,{tabIndex:"0"})),n.a.createElement(p.d,null,n.a.createElement(p.b,null)))))}],y=i.c.a,v=i.c.code,_=i.c.h2,w=i.c.h3,O=i.c.h4,g=i.c.li,j=i.c.p,k=i.c.strong,S=i.c.ul,P=function(){return Object(a.createElement)(i.b,{},Object(a.createElement)("div",{className:"lead doc"},"A pill represents an object that can be viewed with or without an icon."),Object(a.createElement)(s.a,{exampleOnly:!0},Object(o.f)(b,"icon")),_({id:"About-Pills"},"About Pills"),j({},"To create a pill, apply the ",v({},".slds-pill")," class on a ",v({},"<span>"),"."),j({},"Depending on your context, you will either need a base pill (linked or unlinked), or a pill option inside of a listbox. Note that a linked pill should not be used as a pill option inside of a listbox."),j({},"For linked pills, a modifier class of ",v({},"slds-pill_link")," needs to be added to the existing ",v({},"<span>")," with the class name of ",v({},"slds-pill"),". You need an ",v({},"<a>")," inside of the span with the ",v({},"slds-pill_link")," class. The ",v({},"<a>")," will get the class name of ",v({},"slds-pill__action"),". This will treat the interactions differently from an unlinked pill option inside of a listbox."),j({},"For both linked and unlinked pills, a ",v({},"<span>")," with the class name of ",v({},"slds-pill__label")," should contain the string of text describing the pill object."),j({},"Additionally, a pill can have an icon or image that sits to the left-hand side of the ",v({},".slds-pill__label"),". That icon or image should receive the class ",v({},".slds-pill__icon_container"),"."),j({},'You may also want the functionality to remove the pill as a selection. An "X" icon is normally used and will sit to the right-hand side of the ',v({},".slds-pill__label"),". That icon should receive the class ",v({},".slds-pill__remove"),"."),j({},"A ",v({},".slds-pill_container")," can be used as a visual container for multiple pill(s)."),w({id:"Mobile"},"Mobile"),Object(a.createElement)(c.a,{patternSpecificText:"pills will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(a.createElement)(s.a,{frameOnly:!0,frameTitle:"Example mobile styles for pills"},Object(o.f)(b,"icon")),_({id:"Base"},"Base"),Object(a.createElement)(s.a,null,Object(o.f)(m)),w({id:"Examples"},"Examples"),O({id:"With-Icon"},"With Icon"),Object(a.createElement)(s.a,null,Object(o.f)(b,"icon")),O({id:"With-Avatar"},"With Avatar"),Object(a.createElement)(s.a,null,Object(o.f)(b,"avatar")),O({id:"Pill-with-Container"},"Pill with Container"),Object(a.createElement)(s.a,null,Object(o.f)(b,"container")),w({id:"States"},"States"),O({id:"Error"},"Error"),Object(a.createElement)(s.a,null,Object(o.f)(u,"error")),O({id:"Truncated"},"Truncated"),j({},"The pills component will respect the width of its parent and truncate if necessary."),Object(a.createElement)(s.a,{demoStyles:"width: 220px;"},Object(o.f)(u,"truncated")),j({},"Showing the full text of a truncated pill as a tooltip."),Object(a.createElement)(s.a,{demoStyles:"width: 220px; padding-top:48px;"},Object(o.f)(u,"pill-truncated-tooltip")),_({id:"Listbox-Of-Pill-Options"},"Listbox Of Pill Options"),Object(a.createElement)(s.a,null,Object(o.f)(E)),j({},"A Listbox of Pills is a way to display a list of selected options when performing user input, usually from a multi-select ",y({href:"/components/combobox"},"Combobox"),", ",y({href:"/components/lookups"},"Lookup")," or ",y({href:"/components/picklist"},"Picklist"),"."),j({},"Note that we can use a linked or unlinked pill as a pill item inside of a listbox"),w({id:"Accessibility"},"Accessibility"),j({},k({},"Interaction requirements")),S({},g({},"Only 1 focused Pill per set of Pills"),g({},"The remove button is a focusable element and can be clickable.")),j({},k({},"Keyboard navigation")),S({},g({},"The first ",v({},"pill")," in the list will be take user focus initially, when tabbed to"),g({},v({},"Right")," arrow key will move focus to the next pill in the list"),g({},v({},"Left")," arrow key will move focus to the previous pill in the list"),g({},v({},"Left")," arrow key when on the first ",v({},"pill")," should cycle user focus to the last ",v({},"pill")),g({},v({},"Right")," arrow key when on the last ",v({},"pill")," should cycle user focus to the first ",v({},"pill")),g({},"On removing of the pill, the focus should then be placed on the nearest ",v({},"pill"),S({},g({},"When on the last ",v({},"pill"),", place user focus on the previous ",v({},"pill")),g({},"When on the first ",v({},"pill"),", place user focus on the next ",v({},"pill")),g({},"When on the only ",v({},"pill"),", place user focus on the ",v({},"listbox")," or any ",v({},"input")," element the ",v({},"pill")," might be associated with")))),w({id:"Examples-2"},"Examples"),O({id:"With-Icon-2"},"With Icon"),Object(a.createElement)(s.a,null,Object(o.f)(x,"listbox-pill-with-icon")),O({id:"With-Avatar-2"},"With Avatar"),Object(a.createElement)(s.a,null,Object(o.f)(x,"listbox-pill-with-avatar")),w({id:"Layout"},"Layout"),O({id:"Bare"},"Bare"),Object(a.createElement)(s.a,null,Object(o.f)(x,"listbox-pill-bare")),_({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(a.createElement)(r.a,{name:"pills",type:"component"}))},N=function(){return Object(i.a)(P())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/pills/docs.mdx.js"]=function(e){function t(t){for(var a,s,r=t[0],o=t[1],c=t[2],p=0,m=[];p<r.length;p++)s=r[p],Object.prototype.hasOwnProperty.call(n,s)&&n[s]&&m.push(n[s][0]),n[s]=0;for(a in o)Object.prototype.hasOwnProperty.call(o,a)&&(e[a]=o[a]);for(d&&d(t);m.length;)m.shift()();return i.push.apply(i,c\|\|[]),l()}function l(){for(var e,t=0;t<i.length;t++){for(var l=i[t],a=!0,r=1;r<l.length;r++){var o=l[r];0!==n[o]&&(a=!1)}a&&(i.splice(t--,1),e=s(s.s=l[0]))}return e}var a={},n={55:0},i=[];function s(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,s),l.l=!0,l.exports}s.m=e,s.c=a,s.d=function(e,t,l){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:l})},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 l=Object.create(null);if(s.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)s.d(l,a,function(t){return e[t]}.bind(null,a));return l},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var d=o;return i.push([745,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},745:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return P})),l.d(t,"getContents",(function(){return N}));var a=l(0),n=l.n(a),i=l(4),s=l(2),r=(l(27),l(14),l(39)),o=l(1),c=l(38),d=l(10),p=l(30),m=n.a.createElement(p.e,null),u=[{id:"error",label:"Error",element:n.a.createElement(p.e,{className:"slds-has-error"},n.a.createElement("span",{className:"slds-pill__icon_container"},n.a.createElement("span",{className:"slds-icon_container",title:"Error"},n.a.createElement(d.a,{className:"slds-icon slds-icon-text-error",sprite:"utility",symbol:"error"}),n.a.createElement("span",{className:"slds-assistive-text"},"Warning"))))},{id:"truncated",label:"Truncated",demoStyles:"width: 220px;",storybookStyles:!0,element:n.a.createElement(p.f,null,n.a.createElement(p.e,{label:"Pill label that is longer than the area that contains it"}))},{id:"pill-truncated-tooltip",label:"Truncated Pill as Tooltip",demoStyles:"width: 220px;",storybookStyles:!0,element:n.a.createElement(p.g,null)},{id:"linked-pill-truncated-tooltip",label:"Truncated Linked Pill as Tooltip",demoStyles:"width: 220px;",storybookStyles:!0,element:n.a.createElement(p.a,null)}],b=[{id:"icon",label:"With icon",element:n.a.createElement(p.e,null,n.a.createElement("span",{className:"slds-pill__icon_container"},n.a.createElement("span",{className:"slds-icon_container slds-icon-standard-account",title:"Account"},n.a.createElement(d.a,{className:"slds-icon",sprite:"standard",symbol:"account"}),n.a.createElement("span",{className:"slds-assistive-text"},"Account"))))},{id:"avatar",label:"With avatar",element:n.a.createElement(p.e,null,n.a.createElement("span",{className:"slds-pill__icon_container"},n.a.createElement("span",{className:"slds-avatar slds-avatar_circle",title:"User avatar"},n.a.createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"}))))},{id:"container",label:"Pill with Container",element:n.a.createElement(p.f,null,n.a.createElement(p.e,null),n.a.createElement(p.e,null),n.a.createElement(p.e,null))},{id:"container-bare",label:"Pill with Bare Container - Deprecated",element:n.a.createElement(p.f,{variant:"container-bare"},n.a.createElement(p.e,null),n.a.createElement(p.e,null),n.a.createElement(p.e,null))}],h=l(49),f=l(35),E=[{id:"default",label:"Default",element:n.a.createElement(p.f,{type:"listbox",id:"listbox-pill-default"},n.a.createElement(p.c,{id:"listbox-pill-default"},n.a.createElement(p.d,null,n.a.createElement(p.b,{tabIndex:"0"})),n.a.createElement(p.d,null,n.a.createElement(p.b,null))))}],x=[{id:"listbox-pill-with-icon",label:"With icon",element:n.a.createElement(p.f,{type:"listbox",id:"listbox-pill-with-icon"},n.a.createElement(p.c,{id:"listbox-pill-with-icon"},n.a.createElement(p.d,null,n.a.createElement(p.b,{tabIndex:"0"},n.a.createElement(f.a,{containerClassName:"slds-pill__icon_container",title:"Account",assistiveText:"Account"}))),n.a.createElement(p.d,null,n.a.createElement(p.b,null,n.a.createElement(f.a,{containerClassName:"slds-pill__icon_container",symbol:"case",title:"Case",assistiveText:"Case"})))))},{id:"listbox-pill-with-avatar",label:"With avatar",element:n.a.createElement(p.f,{type:"listbox",id:"listbox-pill-with-avatar"},n.a.createElement(p.c,{id:"listbox-pill-with-avatar"},n.a.createElement(p.d,null,n.a.createElement(p.b,{tabIndex:"0"},n.a.createElement(h.a,{className:"slds-avatar_x-small slds-pill__icon_container"},n.a.createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"})))),n.a.createElement(p.d,null,n.a.createElement(p.b,null,n.a.createElement(h.a,{className:"slds-avatar_x-small slds-pill__icon_container"},n.a.createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"}))))))},{id:"listbox-pill-bare",label:"Bare",element:n.a.createElement(p.f,{type:"listbox",id:"listbox-pills-bare"},n.a.createElement(p.c,{id:"listbox-pills-bare"},n.a.createElement(p.d,null,n.a.createElement(p.b,{className:"slds-pill_bare",tabIndex:"0"})),n.a.createElement(p.d,null,n.a.createElement(p.b,{className:"slds-pill_bare"}))))},{id:"listbox-pill-group",label:"Grouped",element:n.a.createElement("div",null,n.a.createElement("div",{className:"slds-combobox_container"}),n.a.createElement(p.f,{variant:"listbox-group"},n.a.createElement(p.c,null,n.a.createElement(p.d,null,n.a.createElement(p.b,{tabIndex:"0"})),n.a.createElement(p.d,null,n.a.createElement(p.b,null)))))}],y=i.c.a,v=i.c.code,_=i.c.h2,w=i.c.h3,O=i.c.h4,g=i.c.li,j=i.c.p,k=i.c.strong,S=i.c.ul,P=function(){return Object(a.createElement)(i.b,{},Object(a.createElement)("div",{className:"lead doc"},"A pill represents an object that can be viewed with or without an icon."),Object(a.createElement)(s.a,{exampleOnly:!0},Object(o.f)(b,"icon")),_({id:"About-Pills"},"About Pills"),j({},"To create a pill, apply the ",v({},".slds-pill")," class on a ",v({},"<span>"),"."),j({},"Depending on your context, you will either need a base pill (linked or unlinked), or a pill option inside of a listbox. Note that a linked pill should not be used as a pill option inside of a listbox."),j({},"For linked pills, a modifier class of ",v({},"slds-pill_link")," needs to be added to the existing ",v({},"<span>")," with the class name of ",v({},"slds-pill"),". You need an ",v({},"<a>")," inside of the span with the ",v({},"slds-pill_link")," class. The ",v({},"<a>")," will get the class name of ",v({},"slds-pill__action"),". This will treat the interactions differently from an unlinked pill option inside of a listbox."),j({},"For both linked and unlinked pills, a ",v({},"<span>")," with the class name of ",v({},"slds-pill__label")," should contain the string of text describing the pill object."),j({},"Additionally, a pill can have an icon or image that sits to the left-hand side of the ",v({},".slds-pill__label"),". That icon or image should receive the class ",v({},".slds-pill__icon_container"),"."),j({},'You may also want the functionality to remove the pill as a selection. An "X" icon is normally used and will sit to the right-hand side of the ',v({},".slds-pill__label"),". That icon should receive the class ",v({},".slds-pill__remove"),"."),j({},"A ",v({},".slds-pill_container")," can be used as a visual container for multiple pill(s)."),w({id:"Mobile"},"Mobile"),Object(a.createElement)(c.a,{patternSpecificText:"pills will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(a.createElement)(s.a,{frameOnly:!0,frameTitle:"Example mobile styles for pills"},Object(o.f)(b,"icon")),_({id:"Base"},"Base"),Object(a.createElement)(s.a,null,Object(o.f)(m)),w({id:"Examples"},"Examples"),O({id:"With-Icon"},"With Icon"),Object(a.createElement)(s.a,null,Object(o.f)(b,"icon")),O({id:"With-Avatar"},"With Avatar"),Object(a.createElement)(s.a,null,Object(o.f)(b,"avatar")),O({id:"Pill-with-Container"},"Pill with Container"),Object(a.createElement)(s.a,null,Object(o.f)(b,"container")),w({id:"States"},"States"),O({id:"Error"},"Error"),Object(a.createElement)(s.a,null,Object(o.f)(u,"error")),O({id:"Truncated"},"Truncated"),j({},"The pills component will respect the width of its parent and truncate if necessary."),Object(a.createElement)(s.a,{demoStyles:"width: 220px;"},Object(o.f)(u,"truncated")),j({},"Showing the full text of a truncated pill as a tooltip."),Object(a.createElement)(s.a,{demoStyles:"width: 220px; padding-top:48px;"},Object(o.f)(u,"pill-truncated-tooltip")),_({id:"Listbox-Of-Pill-Options"},"Listbox Of Pill Options"),Object(a.createElement)(s.a,null,Object(o.f)(E)),j({},"A Listbox of Pills is a way to display a list of selected options when performing user input, usually from a multi-select ",y({href:"/components/combobox"},"Combobox"),", ",y({href:"/components/lookups"},"Lookup")," or ",y({href:"/components/picklist"},"Picklist"),"."),j({},"Note that we can use a linked or unlinked pill as a pill item inside of a listbox"),w({id:"Accessibility"},"Accessibility"),j({},k({},"Interaction requirements")),S({},g({},"Only 1 focused Pill per set of Pills"),g({},"The remove button is a focusable element and can be clickable.")),j({},k({},"Keyboard navigation")),S({},g({},"The first ",v({},"pill")," in the list will be take user focus initially, when tabbed to"),g({},v({},"Right")," arrow key will move focus to the next pill in the list"),g({},v({},"Left")," arrow key will move focus to the previous pill in the list"),g({},v({},"Left")," arrow key when on the first ",v({},"pill")," should cycle user focus to the last ",v({},"pill")),g({},v({},"Right")," arrow key when on the last ",v({},"pill")," should cycle user focus to the first ",v({},"pill")),g({},"On removing of the pill, the focus should then be placed on the nearest ",v({},"pill"),S({},g({},"When on the last ",v({},"pill"),", place user focus on the previous ",v({},"pill")),g({},"When on the first ",v({},"pill"),", place user focus on the next ",v({},"pill")),g({},"When on the only ",v({},"pill"),", place user focus on the ",v({},"listbox")," or any ",v({},"input")," element the ",v({},"pill")," might be associated with")))),w({id:"Examples-2"},"Examples"),O({id:"With-Icon-2"},"With Icon"),Object(a.createElement)(s.a,null,Object(o.f)(x,"listbox-pill-with-icon")),O({id:"With-Avatar-2"},"With Avatar"),Object(a.createElement)(s.a,null,Object(o.f)(x,"listbox-pill-with-avatar")),w({id:"Layout"},"Layout"),O({id:"Bare"},"Bare"),Object(a.createElement)(s.a,null,Object(o.f)(x,"listbox-pill-bare")),_({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(a.createElement)(r.a,{name:"pills",type:"component"}))},N=function(){return Object(i.a)(P())}}});