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

@salesforce-ux/design-system 2.25.2 → 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/global-header/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/global-header/docs.mdx.js"]=function(e){function t(t){for(var a,s,r=t[0],l=t[1],c=t[2],d=0,m=[];d<r.length;d++)s=r[d],Object.prototype.hasOwnProperty.call(n,s)&&n[s]&&m.push(n[s][0]),n[s]=0;for(a in l)Object.prototype.hasOwnProperty.call(l,a)&&(e[a]=l[a]);for(u&&u(t);m.length;)m.shift()();return i.push.apply(i,c\|\|[]),o()}function o(){for(var e,t=0;t<i.length;t++){for(var o=i[t],a=!0,r=1;r<o.length;r++){var l=o[r];0!==n[l]&&(a=!1)}a&&(i.splice(t--,1),e=s(s.s=o[0]))}return e}var a={},n={40:0},i=[];function s(t){if(a[t])return a[t].exports;var o=a[t]={i:t,l:!1,exports:{}};return e[t].call(o.exports,o,o.exports,s),o.l=!0,o.exports}s.m=e,s.c=a,s.d=function(e,t,o){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:o})},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 o=Object.create(null);if(s.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)s.d(o,a,function(t){return e[t]}.bind(null,a));return o},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\|\|[],l=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var u=l;return i.push([718,0]),o()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},718:function(e,t,o){"use strict";o.r(t),o.d(t,"getElement",(function(){return Ce})),o.d(t,"getContents",(function(){return ke}));var a=o(0),n=o.n(a),i=o(4),s=o(2),r=o(27),l=o(15),c=o(14),u=o(5),d=o.n(u),m=o(3),b=o.n(m),f=o(7),p=o(49),h=o(40),y={item1:{username:"Val Handerly",avatar:"/assets/images/avatar2.jpg",title:"mentioned you",message:"@jrogers Could I please have a review on my presentation deck",timestamp:"10 hours ago",unread:!0},item2:{username:"Jon Rogers",avatar:"/assets/images/avatar3.jpg",title:"commented on your post",message:"I totally agree with your sentiment",timestamp:"13 hours ago",unread:!0},item3:{username:"Rebecca Stone",avatar:"/assets/images/avatar2.jpg",title:"mentioned you",message:"@jrogers Here's the conversation I mentioned to you",timestamp:"1 day ago",unread:!1}};function g(e){return(g="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 v(e,t){for(var o=0;o<t.length;o++){var a=t[o];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function _(e,t){return(_=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 o,a=j(e);if(t){var n=j(this).constructor;o=Reflect.construct(a,arguments,n)}else o=a.apply(this,arguments);return w(this,o)}}function w(e,t){if(t&&("object"===g(t)\|\|"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return O(e)}function O(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function j(e){return(j=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var x=function(e){return n.a.createElement("li",{className:d()("slds-global-header__notification",e.unread&&"slds-global-header__notification_unread",e.className),key:e.index},n.a.createElement("div",{className:"slds-media slds-has-flexi-truncate slds-p-around_x-small"},n.a.createElement("div",{className:"slds-media__figure"},n.a.createElement(p.a,{className:"slds-avatar_small"},n.a.createElement("img",{alt:e.username,src:e.avatar,title:"".concat(e.username," avatar")}))),n.a.createElement("div",{className:"slds-media__body"},n.a.createElement("div",{className:"slds-grid slds-grid_align-spread"},n.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},className:"slds-text-link_reset slds-has-flexi-truncate"},n.a.createElement("h3",{className:"slds-truncate",title:"".concat(e.username," ").concat(e.title)},n.a.createElement("strong",null,"".concat(e.username," ").concat(e.title))),n.a.createElement("p",{className:"slds-truncate",title:e.message},e.message),n.a.createElement("p",{className:"slds-m-top_x-small slds-text-color_weak"},e.timestamp,e.unread&&n.a.createElement("abbr",{className:"slds-text-link slds-m-horizontal_xxx-small",title:"unread"},"●")))))))},N=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&&_(e,t)}(s,e);var t,o,a,i=E(s);function s(){var e;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s),(e=i.call(this)).renderNotificationItems=e.renderNotificationItems.bind(O(e)),e}return t=s,(o=[{key:"renderNotificationItems",value:function(e){var t=y[e];return n.a.createElement(x,{key:e,index:e,avatar:t.avatar,username:t.username,title:t.title,message:t.message,timestamp:t.timestamp,unread:t.unread})}},{key:"render",value:function(){return n.a.createElement(h.a,{className:"slds-popover_large slds-nubbin_top-right",bodyClassName:"slds-p-around_none",headerTitle:"Notifications",closeButton:!0,style:{position:"absolute",top:"calc(100% + 12px)",right:"-12px"}},n.a.createElement("ul",null,Object.keys(y).map(this.renderNotificationItems)))}}])&&v(t.prototype,o),a&&v(t,a),Object.defineProperty(t,"prototype",{writable:!1}),s}(a.Component),S=o(116);function T(e){return(T="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 P(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function C(e,t){for(var o=0;o<t.length;o++){var a=t[o];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function k(e,t){return(k=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function I(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 o,a=R(e);if(t){var n=R(this).constructor;o=Reflect.construct(a,arguments,n)}else o=a.apply(this,arguments);return F(this,o)}}function F(e,t){if(t&&("object"===T(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 R(e){return(R=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var D=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&&k(e,t)}(s,e);var t,o,a,i=I(s);function s(){return P(this,s),i.apply(this,arguments)}return t=s,(o=[{key:"render",value:function(){return n.a.createElement(h.a,{className:"slds-nubbin_top slds-dynamic-menu",bodyClassName:"slds-p-horizontal_none",title:"My Favorites",footer:n.a.createElement(S.a,null),style:{position:"absolute",left:"-8rem",top:"36px"}},n.a.createElement(S.b,{length:this.props.numberOfFavorites}))}}])&&C(t.prototype,o),a&&C(t,a),Object.defineProperty(t,"prototype",{writable:!1}),s}(a.Component),A=o(9),M=o(34);function L(e){return(L="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 q(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function B(e,t){for(var o=0;o<t.length;o++){var a=t[o];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function V(e,t){return(V=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function H(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 o,a=W(e);if(t){var n=W(this).constructor;o=Reflect.construct(a,arguments,n)}else o=a.apply(this,arguments);return G(this,o)}}function G(e,t){if(t&&("object"===L(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 W(e){return(W=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var U=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&&V(e,t)}(s,e);var t,o,a,i=H(s);function s(){return q(this,s),i.apply(this,arguments)}return t=s,(o=[{key:"render",value:function(){return n.a.createElement(A.f,{className:"slds-dropdown_right slds-nubbin_top-right",style:{right:"-1rem"}},n.a.createElement(A.h,null,n.a.createElement(A.g,{iconLeft:n.a.createElement(M.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_small",symbol:"event"}),tabIndex:"0"},"New Event"),n.a.createElement(A.g,{iconLeft:n.a.createElement(M.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_small",symbol:"note"}),tabIndex:"0"},"New Note"),n.a.createElement(A.g,{iconLeft:n.a.createElement(M.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_small",symbol:"email"}),tabIndex:"0"},"New Email")))}}])&&B(t.prototype,o),a&&B(t,a),Object.defineProperty(t,"prototype",{writable:!1}),s}(a.Component);function J(e){return(J="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 z(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function Y(e,t){for(var o=0;o<t.length;o++){var a=t[o];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function K(e,t){return(K=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function Q(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 o,a=X(e);if(t){var n=X(this).constructor;o=Reflect.construct(a,arguments,n)}else o=a.apply(this,arguments);return $(this,o)}}function $(e,t){if(t&&("object"===J(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 X(e){return(X=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var Z=function(e){return n.a.createElement("div",{className:"slds-global-actions__favorites slds-dropdown-trigger slds-dropdown-trigger_click"},n.a.createElement("div",{className:"slds-button-group"},n.a.createElement(f.b,{className:d()("slds-global-actions__favorites-action slds-button_icon slds-button_icon-border slds-button_icon-small",{"slds-is-disabled":e.favoritesDisabled,"slds-is-selected":e.favoritesClicked}),disabled:e.favoritesDisabled,"aria-pressed":e.favoritesClicked?"true":"false",symbol:"favorite",title:"Toggle Favorites",assistiveText:"Toggle Favorite",onClick:function(){return e.toggleFavorite()}}),n.a.createElement(f.b,{className:d()("slds-global-actions__favorites-more slds-button_icon slds-button_icon-border slds-button_icon-small"),iconClassName:"slds-button__icon_small",symbol:"down",title:"View Favorites",assistiveText:"View Favorites"})),e.showFavoritesPopup&&n.a.createElement(D,{numberOfFavorites:2}))};Z.propTypes={favoritesDisabled:b.a.bool,favoritesClicked:b.a.bool,showFavoritesPopup:b.a.bool};var ee=function(e){return n.a.createElement("div",{className:d()("slds-dropdown-trigger slds-dropdown-trigger_click",e.showTaskMenu&&"slds-is-open")},n.a.createElement(f.b,{className:"slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-actions__task slds-global-actions__item-action","aria-haspopup":"true",symbol:"add",title:"Global Actions",assistiveText:"Global Actions"}),e.showTaskMenu&&n.a.createElement(U,null))};ee.propTypes={showTaskMenu:b.a.bool};var te=function(){return n.a.createElement("div",{className:"slds-dropdown-trigger slds-dropdown-trigger_click"},n.a.createElement(f.b,{className:"slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-actions__help slds-global-actions__item-action",iconClassName:"slds-global-header__icon","aria-haspopup":"true",symbol:"question",title:"Help and Training",assistiveText:"Help and Training"}))},oe=function(){return n.a.createElement("div",{className:"slds-dropdown-trigger slds-dropdown-trigger_click"},n.a.createElement(f.b,{className:"slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-actions__setup slds-global-actions__item-action",iconClassName:"slds-global-header__icon","aria-haspopup":"true",symbol:"setup",title:"Setup",assistiveText:"Setup"}))},ae=function(e){var t=e.notificationCount?"".concat(e.notificationCount," new notifications"):"no new notifications";return n.a.createElement("div",{className:d()("slds-dropdown-trigger slds-dropdown-trigger_click",e.showNotificationPopup&&"slds-is-open")},n.a.createElement(f.b,{className:d()("slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-actions__notifications slds-global-actions__item-action",{"slds-incoming-notification":e.showNotification&&e.notificationCount}),iconClassName:"slds-global-header__icon",symbol:"notification",title:t,assistiveText:t,"aria-live":"assertive","aria-atomic":"true"}),n.a.createElement("span",{"aria-hidden":"true",className:d()("slds-notification-badge",e.notificationCount&&"slds-incoming-notification",e.showNotification&&"slds-show-notification")},e.notificationCount),e.showNotificationPopup&&n.a.createElement(N,null))};ae.propTypes={notificationCount:b.a.oneOfType([b.a.string,b.a.number]),showNotificationPopup:b.a.bool};var ne=function(){return n.a.createElement("div",{className:"slds-dropdown-trigger slds-dropdown-trigger_click"},n.a.createElement("button",{className:"slds-button slds-global-actions__avatar slds-global-actions__item-action",title:"person name","aria-haspopup":"true"},n.a.createElement("span",{className:"slds-avatar slds-avatar_circle slds-avatar_medium"},n.a.createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"}))))},ie=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&&K(e,t)}(s,e);var t,o,a,i=Q(s);function s(){return z(this,s),i.apply(this,arguments)}return t=s,(o=[{key:"render",value:function(){var e=this.props,t=e.toggleFavorite,o=e.favoritesClicked,a=e.favoritesDisabled,i=e.showFavoritesPopup,s=e.showNotification,r=e.notificationCount,l=e.showNotificationPopup,c=e.showTaskMenu;return n.a.createElement("ul",{className:"slds-global-actions"},n.a.createElement("li",{className:"slds-global-actions__item"},n.a.createElement(Z,{toggleFavorite:t,favoritesClicked:o,favoritesDisabled:a,showFavoritesPopup:i})),n.a.createElement("li",{className:"slds-global-actions__item"},n.a.createElement(ee,{showTaskMenu:c})),n.a.createElement("li",{className:"slds-global-actions__item"},n.a.createElement(te,null)),n.a.createElement("li",{className:"slds-global-actions__item"},n.a.createElement(oe,null)),n.a.createElement("li",{className:"slds-global-actions__item"},n.a.createElement(ae,{showNotification:s,notificationCount:r,showNotificationPopup:l})),n.a.createElement("li",{className:"slds-global-actions__item"},n.a.createElement(ne,null)))}}])&&Y(t.prototype,o),a&&Y(t,a),Object.defineProperty(t,"prototype",{writable:!1}),s}(n.a.Component);ie.propTypes={favoritesClicked:b.a.bool,favoritesDisabled:b.a.bool,showFavoritesPopup:b.a.bool,showNotification:b.a.bool,notificationCount:b.a.oneOfType([b.a.string,b.a.number]),showNotificationPopup:b.a.bool,showTaskMenu:b.a.bool};var se=ie;function re(e){return(re="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 le(e,t){for(var o=0;o<t.length;o++){var a=t[o];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function ce(e,t){return(ce=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function ue(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 o,a=be(e);if(t){var n=be(this).constructor;o=Reflect.construct(a,arguments,n)}else o=a.apply(this,arguments);return de(this,o)}}function de(e,t){if(t&&("object"===re(t)\|\|"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return me(e)}function me(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function be(e){return(be=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var fe=function(){return n.a.createElement(n.a.Fragment,null,n.a.createElement("a",{href:"#",className:"slds-assistive-text slds-assistive-text_focus",onClick:function(e){return e.preventDefault()}},"Skip to Navigation"),n.a.createElement("a",{href:"#",className:"slds-assistive-text slds-assistive-text_focus",onClick:function(e){return e.preventDefault()}},"Skip to Main Content"))},pe=function(){return n.a.createElement("div",{className:"slds-global-header__logo"},n.a.createElement("span",{className:"slds-assistive-text"},"Salesforce"))},he=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&&ce(e,t)}(s,e);var t,o,a,i=ue(s);function s(){var e;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s),(e=i.call(this)).toggleFavorite=e.toggleFavorite.bind(me(e)),e.showNotification=e.showNotification.bind(me(e)),e.showIncomingNotification=e.showIncomingNotification.bind(me(e)),e.state={favoritesClicked:!1,showNotification:!1,notificationCount:0},e}return t=s,(o=[{key:"toggleFavorite",value:function(){this.setState({favoritesClicked:!this.state.favoritesClicked})}},{key:"showNotification",value:function(){this.setState({showNotification:!this.state.showNotification,notificationCount:1})}},{key:"showIncomingNotification",value:function(){this.setState({notificationCount:++this.state.notificationCount})}},{key:"render",value:function(){var e=this;return n.a.createElement("header",{className:d()("slds-global-header_container",this.props.className)},n.a.createElement(fe,null),n.a.createElement("div",{className:"slds-global-header slds-grid slds-grid_align-spread"},n.a.createElement("div",{className:"slds-global-header__item"},n.a.createElement(pe,null)),!this.props.playground&&n.a.createElement("div",{className:"slds-global-header__item slds-global-header__item_search"},this.props.globalSearch),n.a.createElement("div",{className:"slds-global-header__item"},n.a.createElement(se,{toggleFavorite:this.toggleFavorite,favoritesClicked:this.state.favoritesClicked,favoritesDisabled:this.props.favoritesDisabled,showFavoritesPopup:this.props.showFavoritesPopup,showNotification:this.state.showNotification,notificationCount:this.state.notificationCount,showNotificationPopup:this.props.showNotificationPopup,showTaskMenu:this.props.showTaskMenu}))),this.props.playground&&n.a.createElement("div",{className:"slds-button-group slds-m-around_medium"},n.a.createElement("button",{className:"slds-button slds-button_neutral",onClick:function(){return e.showNotification()}},"Toggle Notification"),n.a.createElement("button",{className:"slds-button slds-button_neutral",onClick:function(){return e.showIncomingNotification()}},"Increase count")))}}])&&le(t.prototype,o),a&&le(t,a),Object.defineProperty(t,"prototype",{writable:!1}),s}(a.Component),ye=o(23),ge=o(57),ve=o(24),_e=o(11),Ee={option0:{name:"Recent Items",label:!0},option1:{name:"Salesforce - 1,000 Licenses",entityMeta:!0,entityType:"Opportunity",entityField:"Propecting"},option2:{name:"Art Vandelay",entityMeta:!0,entityType:"Contact",entityField:"avandelay@vandelay.com"},option3:{name:"Vandelay Industries",entityMeta:!0,entityType:"Account",entityField:"San Francisco"},option4:{name:"Salesforce UK 2016 Events",entityMeta:!0,entityType:"Event",entityField:"$20,000"},option5:{name:"H.E. Pennypacker",entityMeta:!0,entityType:"Lead",entityField:"Nursing"}},we={option1:{term:"Salesforce",beforeTerm:"",afterTerm:".com",entityMeta:!0,entityType:"Account",entityLocation:"San Francisco, CA"},option2:{term:"Salesforce",beforeTerm:"",afterTerm:".org",entityMeta:!0,entityType:"Account",entityLocation:"New York, NY"},option3:{term:"Salesforce",beforeTerm:"",afterTerm:"HQ",entityMeta:!0,entityType:"Account",entityLocation:"San Francisco, CA"}},Oe=o(1),je=i.c.a,xe=i.c.code,Ne=i.c.h2,Se=i.c.h3,Te=i.c.h4,Pe=i.c.p,Ce=function(){return Object(a.createElement)(i.b,{},Object(a.createElement)("div",{className:"lead doc"},"The global header is the anchor for the Salesforce platform and spans all other parts of the UI. The functionality in the header is applicable across all contexts in the Salesforce ecosystem (internal or 3rd party)."),Object(a.createElement)(s.a,{isViewport:!0,exampleOnly:!0,demoStyles:"position: relative; height: 20.25rem;"},Object(a.createElement)(he,{globalSearch:Object(a.createElement)(ye.a,{id:Oe.d.uniqueId("combobox-id-"),"aria-controls":"search-listbox-id-1",comboboxID:"primary-search-combobox-id-1",autocomplete:!0,inputContainerClassName:"slds-global-search__form-element",label:"Search Salesforce",hideLabel:!0,placeholder:"Search Salesforce",results:Object(a.createElement)(ve.e,{id:"search-listbox-id-1","aria-label":"Recent Items",snapshot:Ee,type:"entity",count:6}),resultsType:"listbox",addon:Object(a.createElement)(ge.b,{id:Oe.d.uniqueId("objectswitcher-combobox-id-"),value:"Accounts",addonPosition:"start",hasInteractions:!0,comboboxAriaControls:"primary-search-combobox-id-1",listboxId:Oe.d.uniqueId("objectswitcher-listbox-id-")}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"left",leftInputIcon:Object(a.createElement)(_e.a,{symbol:"search",className:"slds-icon slds-icon_xx-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_left",title:!1,assistiveText:!1}),hasInteractions:!0})})),Ne({id:"About-Global-Header"},"About Global Header"),Se({id:"Structure"},"Structure"),Pe({},"The global header is made up of 3 distinct sections, the logo, the global search, and the global actions. Each section is wrapped in a ",xe({},"<div>")," with the class name ",xe({},"slds-global-header__item"),". The search region gets the modifier class ",xe({},"slds-global-header__item_search"),". This class provides particular styling to handle the search box."),Object(a.createElement)(l.a,{title:"global header layout"},Object(a.createElement)(r.a,null,Object(a.createElement)("header",{className:"slds-global-header_container"},Object(a.createElement)("div",{className:"slds-global-header"},Object(a.createElement)("div",{className:"slds-global-header__item"},"..."),Object(a.createElement)("div",{className:"slds-global-header__item slds-global-header__item_search"},"..."),Object(a.createElement)("div",{className:"slds-global-header__item"},"..."))))),Pe({},"In most scenarios, you will want to fix the global header to the top of the viewport. To achieve this, wrap the global header component in a ",xe({},"<div>")," with the class name ",xe({},"slds-global-header_container"),"."),Object(a.createElement)(l.a,{title:"global header container"},Object(a.createElement)(r.a,{toggleCode:!1},Object(a.createElement)("header",{className:"slds-global-header_container"},Object(a.createElement)("div",{className:"slds-global-header"},"...")))),Se({id:"Accessibility"},"Accessibility"),Pe({},"For screen reading users, we need to provide a way to navigate over the global header and directly to content regions. For this scenario, we provide two links above the global header that provides navigation to landmarks within the app. These links are visually hidden by default but become visible when focused."),Object(a.createElement)(l.a,{title:"global header jump links"},Object(a.createElement)(r.a,null,Object(a.createElement)("header",{className:"slds-global-header_container"},Object(a.createElement)("a",{href:"#",onClick:function(e){return e.preventDefault()},className:"slds-assistive-text slds-assistive-text_focus"},"Skip to Navigation"),Object(a.createElement)("a",{href:"#",onClick:function(e){return e.preventDefault()},className:"slds-assistive-text slds-assistive-text_focus"},"Skip to Main Content"),Object(a.createElement)("div",{className:"slds-global-header"},"...")))),Ne({id:"Base"},"Base"),Object(a.createElement)(l.a,{title:"base global header"},Object(a.createElement)(s.a,{isViewport:!0,demoStyles:"position: relative; height: 21.25rem;"},Object(a.createElement)(he,{globalSearch:Object(a.createElement)(ye.a,{id:Oe.d.uniqueId("combobox-id-"),"aria-controls":"search-listbox-id-1",comboboxID:"primary-search-combobox-id-1",autocomplete:!0,inputContainerClassName:"slds-global-search__form-element",label:"Search Salesforce",hideLabel:!0,placeholder:"Search Salesforce",results:Object(a.createElement)(ve.e,{id:"search-listbox-id-1","aria-label":"Recent Items",snapshot:Ee,type:"entity",count:6}),resultsType:"listbox",addon:Object(a.createElement)(ge.b,{id:Oe.d.uniqueId("objectswitcher-combobox-id-"),value:"Accounts",addonPosition:"start",hasInteractions:!0,comboboxAriaControls:"primary-search-combobox-id-1",listboxId:Oe.d.uniqueId("objectswitcher-listbox-id-")}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"left",leftInputIcon:Object(a.createElement)(_e.a,{symbol:"search",className:"slds-icon slds-icon_xx-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_left",title:!1,assistiveText:!1}),hasInteractions:!0})}))),Ne({id:"Logo"},"Logo"),Pe({},"The logo region is a ",xe({},"<div>")," with the class name ",xe({},"slds-global-header__logo")," wrapped around a span with assistive text for the logo. This inner span has the class name ",xe({},"slds-assistive-text")," and is required to meet accessibility guidelines. The logo is applied as a background image to the div with CSS. This allows us to constrain the dimensions of the logo by a max-height of 40px and a max-width of 200px."),Object(a.createElement)(s.a,{isViewport:!0,toggleCode:!1,demoStyles:"padding: 0.5rem 0; min-height: 3.5rem;"},Object(a.createElement)("div",{className:"slds-global-header__item"},Object(a.createElement)(pe,null))),Ne({id:"Global-Search"},"Global Search"),Pe({},"The global search component is used for application wide search. The form element is implemented as a ",je({href:"/components/combobox"},"Combobox"),", please refer to the accessibility guidelines on the Combobox component page for implementation guidance."),Se({id:"Default"},"Default"),Object(a.createElement)(l.a,{title:"Global Header Search Default State"},Object(a.createElement)(s.a,{isViewport:!0,demoStyles:"position: relative; height: 5.5rem;"},Object(a.createElement)(he,{globalSearch:Object(a.createElement)(ye.a,{id:Oe.d.uniqueId("combobox-id-"),"aria-controls":"search-listbox-id-2",comboboxID:"primary-search-combobox-id-2",autocomplete:!0,inputContainerClassName:"slds-global-search__form-element",label:"Search Salesforce",hideLabel:!0,placeholder:"Search Salesforce",results:Object(a.createElement)(ve.e,{id:"search-listbox-id-2","aria-label":"Recent Items",snapshot:Ee,type:"entity",count:6}),resultsType:"listbox",addon:Object(a.createElement)(ge.b,{id:Oe.d.uniqueId("objectswitcher-combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-search-combobox-id-2",listboxId:Oe.d.uniqueId("objectswitcher-listbox-id-")}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"left",leftInputIcon:Object(a.createElement)(_e.a,{symbol:"search",className:"slds-icon slds-icon_xx-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_left",title:!1,assistiveText:!1})})}))),Se({id:"Focused-and-expanded"},"Focused and expanded"),Object(a.createElement)(l.a,{title:"Global Header Search Expanded State"},Object(a.createElement)(s.a,{isViewport:!0,demoStyles:"position: relative; height: 21rem;"},Object(a.createElement)(he,{globalSearch:Object(a.createElement)(ye.a,{id:Oe.d.uniqueId("combobox-id-"),"aria-controls":"search-listbox-id-3",comboboxID:"primary-search-combobox-id-3",autocomplete:!0,inputContainerClassName:"slds-global-search__form-element",label:"Search Salesforce",hideLabel:!0,placeholder:"Search Salesforce",results:Object(a.createElement)(ve.e,{id:"search-listbox-id-3","aria-label":"Recent Items",snapshot:Ee,type:"entity",count:6}),resultsType:"listbox",addon:Object(a.createElement)(ge.b,{id:Oe.d.uniqueId("objectswitcher-combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-search-combobox-id-3",listboxId:Oe.d.uniqueId("objectswitcher-listbox-id-")}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"left",leftInputIcon:Object(a.createElement)(_e.a,{symbol:"search",className:"slds-icon slds-icon_xx-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_left",title:!1,assistiveText:!1}),hasFocus:!0,isOpen:!0})}))),Se({id:"Active-and-typing"},"Active and typing"),Object(a.createElement)(l.a,{title:"Global Header Search Active State"},Object(a.createElement)(s.a,{isViewport:!0,demoStyles:"position: relative; height: 21rem;"},Object(a.createElement)(he,{globalSearch:Object(a.createElement)(ye.a,{id:Oe.d.uniqueId("combobox-id-"),"aria-controls":"search-listbox-id-4",comboboxID:"primary-search-combobox-id-4",autocomplete:!0,inputContainerClassName:"slds-global-search__form-element",label:"Search Salesforce",hideLabel:!0,placeholder:"Search Salesforce",value:"salesforce",results:Object(a.createElement)(ve.e,{id:"search-listbox-id-4",term:"salesforce",snapshot:we,type:"entity",count:6}),resultsType:"listbox","aria-activedescendant":"option0",addon:Object(a.createElement)(ge.b,{id:Oe.d.uniqueId("objectswitcher-combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-search-combobox-id-4",listboxId:Oe.d.uniqueId("objectswitcher-listbox-id-")}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"left",leftInputIcon:Object(a.createElement)(_e.a,{symbol:"search",className:"slds-icon slds-icon_xx-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_left",title:!1,assistiveText:!1}),hasFocus:!0,isOpen:!0})}))),Ne({id:"Global-Actions-Bar"},"Global Actions Bar"),Pe({},"The global actions bar holds application wide task actions that will persist with the user through their experience."),Pe({},"The global actions bar is located in the right region of the global header."),Object(a.createElement)(s.a,{isViewport:!0,exampleOnly:!0,demoStyles:"position: relative; height: 3.125rem;"},Object(a.createElement)(he,null)),Se({id:"Favorites"},"Favorites"),Pe({},'The favorites action is used to "favorite" a commonly used page within a user\'s experience. When a user "favorites" a page by pressing the favorites action, the button icon changes color with a small animation to confirm your selection.'),Te({id:"Not-pressed"},"Not pressed"),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(Z,null)))),Te({id:"Pressed"},"Pressed"),Pe({},"When pressed, apply the class ",xe({},"slds-is-selected")," to the ",xe({},"slds-global-actions__favorites-action")," button element."),Object(a.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(a.createElement)("p",null,"When the favorites action is pressed, we need to toggle the"," ",Object(a.createElement)("code",null,"aria-pressed")," attribute to"," ",Object(a.createElement)("code",null,"true"),". This will inform a screen reader that the button has been pressed.")),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(Z,{favoritesClicked:!0})))),Te({id:"Disabled"},"Disabled"),Pe({},"If the favorites action needs to become disabled, apply the ",xe({},"disabled")," attribute and the class ",xe({},"slds-is-disabled")," to the button with ",xe({},'class="slds-global-actions_favorites-action"'),"."),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(Z,{favoritesDisabled:!0})))),Te({id:"Favorites-popover"},"Favorites popover"),Pe({},"The favorites popover is invoked when a user clicks on the dropdown arrow action icon inside of the favorites button group. The favorites popover is implemented as a ",je({href:"/components/dynamic-menu/"},"Popover - Dynamic Menu Variant")," component, please refer to the accessibility guidelines on the Popover component page for implementation guidance."),Object(a.createElement)(s.a,{demoStyles:" display: flex; justify-content: flex-end; align-items: flex-start; height: 16rem; min-width: 400px; "},Object(a.createElement)(se,{showFavoritesPopup:!0})),Se({id:"Task"},"Task"),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(ee,null)))),Te({id:"Task-menu"},"Task menu"),Pe({},"When the global task action is invoked, a menu inside of a dropdown becomes visible. Please refer to the accessibility section of the ",je({href:"/components/menus"},"Menus component")," for implementation guidelines."),Object(a.createElement)(s.a,{demoStyles:" display: flex; justify-content: flex-end; align-items: flex-start; height: 16rem; min-width: 400px; "},Object(a.createElement)(se,{showTaskMenu:!0})),Se({id:"Help"},"Help"),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(te,null)))),Se({id:"Setup"},"Setup"),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(oe,null)))),Se({id:"Notifications"},"Notifications"),Pe({},"Notifications are a way to notify a user about a global change within the application. This is commonly used to communicate a Chatter mention/reply or a status update on an opportunity pipeline."),Object(a.createElement)(s.a,{isViewport:!0,exampleOnly:!0,demoStyles:"position: relative; height: 7.5rem;"},Object(a.createElement)(he,{playground:!0})),Te({id:"No-notifications"},"No notifications"),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(ae,null)))),Te({id:"New-notifications"},"New notifications"),Pe({},"When a notification is coming through, we want to apply the ",xe({},"slds-incoming-notification")," class to both the ",xe({},"slds-global-actions__notifications")," button, as well as the ",xe({},"slds-notification-badge"),". This will initiate the animation that there is a new incoming notification. A notification badge will also need to receive the ",xe({},"slds-show-notification")," class, this ensures the badge becomes visible for the incoming animation to work. The ",xe({},"slds-show-notification")," class should also be applied if a user has unread notifications upon their return to their application."),Object(a.createElement)(c.a,{type:"a11y",header:"Accessibility Note"},Object(a.createElement)("p",null,"The notification badge is hidden from screen readers by add the attribute"," ",Object(a.createElement)("code",null,'aria-hidden="true"'),' so the badge doesn\'t have to be inside the button itself. Since the badge count is hidden, we need to add the count number to the button text via some hidden assistive text. The assistive text string should be updated with number of new notifications, such as "3 new notification". If there are no notifications, the assistive text should read "No notifications". The button element also requires'," ",Object(a.createElement)("code",null,'aria-live="assertive"')," to announce any count updates.")),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(ae,{showNotification:!0,notificationCount:"1"})))),Te({id:"Notification-Popover"},"Notification Popover"),Pe({},"The notification popover is invoked when a user clicks on the notification action icon. The notification popover is implemented as a ",je({href:"/components/popovers"},"Popover component"),", please refer to the accessibility guidelines on the Popover component page for implementation guidance."),Object(a.createElement)(s.a,{exampleOnly:!0,demoStyles:" display: flex; justify-content: flex-end; align-items: flex-start; height: 25rem; min-width: 400px; "},Object(a.createElement)(se,{showNotification:!0,notificationCount:"3",showNotificationPopup:!0})),Object(a.createElement)(r.a,null,Object(a.createElement)(N,null)),Te({id:"Unread-notifications"},"Unread notifications"),Pe({},"When a notification item is unread, add the class ",xe({},"slds-global-header__notification_unread")," to the ",xe({},"slds-global-header__notification")," list item. This will provide the unread styles. In addition to adding the class name, please add a dot indicator, ",xe({},'<abbr class="slds-text-link slds-m-horizontal_xxx-small" title="unread">●</abbr>'),", to provide visual affordance that the item is unread."))},ke=function(){return Object(i.a)(Ce())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/global-header/docs.mdx.js"]=function(e){function t(t){for(var a,s,r=t[0],l=t[1],c=t[2],d=0,m=[];d<r.length;d++)s=r[d],Object.prototype.hasOwnProperty.call(n,s)&&n[s]&&m.push(n[s][0]),n[s]=0;for(a in l)Object.prototype.hasOwnProperty.call(l,a)&&(e[a]=l[a]);for(u&&u(t);m.length;)m.shift()();return i.push.apply(i,c\|\|[]),o()}function o(){for(var e,t=0;t<i.length;t++){for(var o=i[t],a=!0,r=1;r<o.length;r++){var l=o[r];0!==n[l]&&(a=!1)}a&&(i.splice(t--,1),e=s(s.s=o[0]))}return e}var a={},n={40:0},i=[];function s(t){if(a[t])return a[t].exports;var o=a[t]={i:t,l:!1,exports:{}};return e[t].call(o.exports,o,o.exports,s),o.l=!0,o.exports}s.m=e,s.c=a,s.d=function(e,t,o){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:o})},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 o=Object.create(null);if(s.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)s.d(o,a,function(t){return e[t]}.bind(null,a));return o},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\|\|[],l=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var u=l;return i.push([718,0]),o()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},718:function(e,t,o){"use strict";o.r(t),o.d(t,"getElement",(function(){return Ce})),o.d(t,"getContents",(function(){return ke}));var a=o(0),n=o.n(a),i=o(4),s=o(2),r=o(27),l=o(15),c=o(14),u=o(5),d=o.n(u),m=o(3),b=o.n(m),f=o(7),p=o(49),h=o(40),y={item1:{username:"Val Handerly",avatar:"/assets/images/avatar2.jpg",title:"mentioned you",message:"@jrogers Could I please have a review on my presentation deck",timestamp:"10 hours ago",unread:!0},item2:{username:"Jon Rogers",avatar:"/assets/images/avatar3.jpg",title:"commented on your post",message:"I totally agree with your sentiment",timestamp:"13 hours ago",unread:!0},item3:{username:"Rebecca Stone",avatar:"/assets/images/avatar2.jpg",title:"mentioned you",message:"@jrogers Here's the conversation I mentioned to you",timestamp:"1 day ago",unread:!1}};function g(e){return(g="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 v(e,t){for(var o=0;o<t.length;o++){var a=t[o];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function _(e,t){return(_=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 o,a=j(e);if(t){var n=j(this).constructor;o=Reflect.construct(a,arguments,n)}else o=a.apply(this,arguments);return w(this,o)}}function w(e,t){if(t&&("object"===g(t)\|\|"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return O(e)}function O(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function j(e){return(j=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var x=function(e){return n.a.createElement("li",{className:d()("slds-global-header__notification",e.unread&&"slds-global-header__notification_unread",e.className),key:e.index},n.a.createElement("div",{className:"slds-media slds-has-flexi-truncate slds-p-around_x-small"},n.a.createElement("div",{className:"slds-media__figure"},n.a.createElement(p.a,{className:"slds-avatar_small"},n.a.createElement("img",{alt:e.username,src:e.avatar,title:"".concat(e.username," avatar")}))),n.a.createElement("div",{className:"slds-media__body"},n.a.createElement("div",{className:"slds-grid slds-grid_align-spread"},n.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},className:"slds-text-link_reset slds-has-flexi-truncate"},n.a.createElement("h3",{className:"slds-truncate",title:"".concat(e.username," ").concat(e.title)},n.a.createElement("strong",null,"".concat(e.username," ").concat(e.title))),n.a.createElement("p",{className:"slds-truncate",title:e.message},e.message),n.a.createElement("p",{className:"slds-m-top_x-small slds-text-color_weak"},e.timestamp,e.unread&&n.a.createElement("abbr",{className:"slds-text-link slds-m-horizontal_xxx-small",title:"unread"},"●")))))))},N=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&&_(e,t)}(s,e);var t,o,a,i=E(s);function s(){var e;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s),(e=i.call(this)).renderNotificationItems=e.renderNotificationItems.bind(O(e)),e}return t=s,(o=[{key:"renderNotificationItems",value:function(e){var t=y[e];return n.a.createElement(x,{key:e,index:e,avatar:t.avatar,username:t.username,title:t.title,message:t.message,timestamp:t.timestamp,unread:t.unread})}},{key:"render",value:function(){return n.a.createElement(h.a,{className:"slds-popover_large slds-nubbin_top-right",bodyClassName:"slds-p-around_none",headerTitle:"Notifications",closeButton:!0,style:{position:"absolute",top:"calc(100% + 12px)",right:"-12px"}},n.a.createElement("ul",null,Object.keys(y).map(this.renderNotificationItems)))}}])&&v(t.prototype,o),a&&v(t,a),Object.defineProperty(t,"prototype",{writable:!1}),s}(a.Component),S=o(116);function T(e){return(T="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 P(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function C(e,t){for(var o=0;o<t.length;o++){var a=t[o];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function k(e,t){return(k=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function I(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 o,a=R(e);if(t){var n=R(this).constructor;o=Reflect.construct(a,arguments,n)}else o=a.apply(this,arguments);return F(this,o)}}function F(e,t){if(t&&("object"===T(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 R(e){return(R=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var D=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&&k(e,t)}(s,e);var t,o,a,i=I(s);function s(){return P(this,s),i.apply(this,arguments)}return t=s,(o=[{key:"render",value:function(){return n.a.createElement(h.a,{className:"slds-nubbin_top slds-dynamic-menu",bodyClassName:"slds-p-horizontal_none",title:"My Favorites",footer:n.a.createElement(S.a,null),style:{position:"absolute",left:"-8rem",top:"36px"}},n.a.createElement(S.b,{length:this.props.numberOfFavorites}))}}])&&C(t.prototype,o),a&&C(t,a),Object.defineProperty(t,"prototype",{writable:!1}),s}(a.Component),A=o(9),M=o(35);function L(e){return(L="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 q(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function B(e,t){for(var o=0;o<t.length;o++){var a=t[o];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function V(e,t){return(V=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function H(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 o,a=W(e);if(t){var n=W(this).constructor;o=Reflect.construct(a,arguments,n)}else o=a.apply(this,arguments);return G(this,o)}}function G(e,t){if(t&&("object"===L(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 W(e){return(W=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var U=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&&V(e,t)}(s,e);var t,o,a,i=H(s);function s(){return q(this,s),i.apply(this,arguments)}return t=s,(o=[{key:"render",value:function(){return n.a.createElement(A.f,{className:"slds-dropdown_right slds-nubbin_top-right",style:{right:"-1rem"}},n.a.createElement(A.h,null,n.a.createElement(A.g,{iconLeft:n.a.createElement(M.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_small",symbol:"event"}),tabIndex:"0"},"New Event"),n.a.createElement(A.g,{iconLeft:n.a.createElement(M.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_small",symbol:"note"}),tabIndex:"0"},"New Note"),n.a.createElement(A.g,{iconLeft:n.a.createElement(M.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_small",symbol:"email"}),tabIndex:"0"},"New Email")))}}])&&B(t.prototype,o),a&&B(t,a),Object.defineProperty(t,"prototype",{writable:!1}),s}(a.Component);function J(e){return(J="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 z(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function Y(e,t){for(var o=0;o<t.length;o++){var a=t[o];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function K(e,t){return(K=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function Q(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 o,a=X(e);if(t){var n=X(this).constructor;o=Reflect.construct(a,arguments,n)}else o=a.apply(this,arguments);return $(this,o)}}function $(e,t){if(t&&("object"===J(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 X(e){return(X=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var Z=function(e){return n.a.createElement("div",{className:"slds-global-actions__favorites slds-dropdown-trigger slds-dropdown-trigger_click"},n.a.createElement("div",{className:"slds-button-group"},n.a.createElement(f.b,{className:d()("slds-global-actions__favorites-action slds-button_icon slds-button_icon-border slds-button_icon-small",{"slds-is-disabled":e.favoritesDisabled,"slds-is-selected":e.favoritesClicked}),disabled:e.favoritesDisabled,"aria-pressed":e.favoritesClicked?"true":"false",symbol:"favorite",title:"Toggle Favorites",assistiveText:"Toggle Favorite",onClick:function(){return e.toggleFavorite()}}),n.a.createElement(f.b,{className:d()("slds-global-actions__favorites-more slds-button_icon slds-button_icon-border slds-button_icon-small"),iconClassName:"slds-button__icon_small",symbol:"down",title:"View Favorites",assistiveText:"View Favorites"})),e.showFavoritesPopup&&n.a.createElement(D,{numberOfFavorites:2}))};Z.propTypes={favoritesDisabled:b.a.bool,favoritesClicked:b.a.bool,showFavoritesPopup:b.a.bool};var ee=function(e){return n.a.createElement("div",{className:d()("slds-dropdown-trigger slds-dropdown-trigger_click",e.showTaskMenu&&"slds-is-open")},n.a.createElement(f.b,{className:"slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-actions__task slds-global-actions__item-action","aria-haspopup":"true",symbol:"add",title:"Global Actions",assistiveText:"Global Actions"}),e.showTaskMenu&&n.a.createElement(U,null))};ee.propTypes={showTaskMenu:b.a.bool};var te=function(){return n.a.createElement("div",{className:"slds-dropdown-trigger slds-dropdown-trigger_click"},n.a.createElement(f.b,{className:"slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-actions__help slds-global-actions__item-action",iconClassName:"slds-global-header__icon","aria-haspopup":"true",symbol:"question",title:"Help and Training",assistiveText:"Help and Training"}))},oe=function(){return n.a.createElement("div",{className:"slds-dropdown-trigger slds-dropdown-trigger_click"},n.a.createElement(f.b,{className:"slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-actions__setup slds-global-actions__item-action",iconClassName:"slds-global-header__icon","aria-haspopup":"true",symbol:"setup",title:"Setup",assistiveText:"Setup"}))},ae=function(e){var t=e.notificationCount?"".concat(e.notificationCount," new notifications"):"no new notifications";return n.a.createElement("div",{className:d()("slds-dropdown-trigger slds-dropdown-trigger_click",e.showNotificationPopup&&"slds-is-open")},n.a.createElement(f.b,{className:d()("slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-actions__notifications slds-global-actions__item-action",{"slds-incoming-notification":e.showNotification&&e.notificationCount}),iconClassName:"slds-global-header__icon",symbol:"notification",title:t,assistiveText:t,"aria-live":"assertive","aria-atomic":"true"}),n.a.createElement("span",{"aria-hidden":"true",className:d()("slds-notification-badge",e.notificationCount&&"slds-incoming-notification",e.showNotification&&"slds-show-notification")},e.notificationCount),e.showNotificationPopup&&n.a.createElement(N,null))};ae.propTypes={notificationCount:b.a.oneOfType([b.a.string,b.a.number]),showNotificationPopup:b.a.bool};var ne=function(){return n.a.createElement("div",{className:"slds-dropdown-trigger slds-dropdown-trigger_click"},n.a.createElement("button",{className:"slds-button slds-global-actions__avatar slds-global-actions__item-action",title:"person name","aria-haspopup":"true"},n.a.createElement("span",{className:"slds-avatar slds-avatar_circle slds-avatar_medium"},n.a.createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"}))))},ie=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&&K(e,t)}(s,e);var t,o,a,i=Q(s);function s(){return z(this,s),i.apply(this,arguments)}return t=s,(o=[{key:"render",value:function(){var e=this.props,t=e.toggleFavorite,o=e.favoritesClicked,a=e.favoritesDisabled,i=e.showFavoritesPopup,s=e.showNotification,r=e.notificationCount,l=e.showNotificationPopup,c=e.showTaskMenu;return n.a.createElement("ul",{className:"slds-global-actions"},n.a.createElement("li",{className:"slds-global-actions__item"},n.a.createElement(Z,{toggleFavorite:t,favoritesClicked:o,favoritesDisabled:a,showFavoritesPopup:i})),n.a.createElement("li",{className:"slds-global-actions__item"},n.a.createElement(ee,{showTaskMenu:c})),n.a.createElement("li",{className:"slds-global-actions__item"},n.a.createElement(te,null)),n.a.createElement("li",{className:"slds-global-actions__item"},n.a.createElement(oe,null)),n.a.createElement("li",{className:"slds-global-actions__item"},n.a.createElement(ae,{showNotification:s,notificationCount:r,showNotificationPopup:l})),n.a.createElement("li",{className:"slds-global-actions__item"},n.a.createElement(ne,null)))}}])&&Y(t.prototype,o),a&&Y(t,a),Object.defineProperty(t,"prototype",{writable:!1}),s}(n.a.Component);ie.propTypes={favoritesClicked:b.a.bool,favoritesDisabled:b.a.bool,showFavoritesPopup:b.a.bool,showNotification:b.a.bool,notificationCount:b.a.oneOfType([b.a.string,b.a.number]),showNotificationPopup:b.a.bool,showTaskMenu:b.a.bool};var se=ie;function re(e){return(re="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 le(e,t){for(var o=0;o<t.length;o++){var a=t[o];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function ce(e,t){return(ce=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function ue(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 o,a=be(e);if(t){var n=be(this).constructor;o=Reflect.construct(a,arguments,n)}else o=a.apply(this,arguments);return de(this,o)}}function de(e,t){if(t&&("object"===re(t)\|\|"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return me(e)}function me(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function be(e){return(be=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var fe=function(){return n.a.createElement(n.a.Fragment,null,n.a.createElement("a",{href:"#",className:"slds-assistive-text slds-assistive-text_focus",onClick:function(e){return e.preventDefault()}},"Skip to Navigation"),n.a.createElement("a",{href:"#",className:"slds-assistive-text slds-assistive-text_focus",onClick:function(e){return e.preventDefault()}},"Skip to Main Content"))},pe=function(){return n.a.createElement("div",{className:"slds-global-header__logo"},n.a.createElement("span",{className:"slds-assistive-text"},"Salesforce"))},he=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&&ce(e,t)}(s,e);var t,o,a,i=ue(s);function s(){var e;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s),(e=i.call(this)).toggleFavorite=e.toggleFavorite.bind(me(e)),e.showNotification=e.showNotification.bind(me(e)),e.showIncomingNotification=e.showIncomingNotification.bind(me(e)),e.state={favoritesClicked:!1,showNotification:!1,notificationCount:0},e}return t=s,(o=[{key:"toggleFavorite",value:function(){this.setState({favoritesClicked:!this.state.favoritesClicked})}},{key:"showNotification",value:function(){this.setState({showNotification:!this.state.showNotification,notificationCount:1})}},{key:"showIncomingNotification",value:function(){this.setState({notificationCount:++this.state.notificationCount})}},{key:"render",value:function(){var e=this;return n.a.createElement("header",{className:d()("slds-global-header_container",this.props.className)},n.a.createElement(fe,null),n.a.createElement("div",{className:"slds-global-header slds-grid slds-grid_align-spread"},n.a.createElement("div",{className:"slds-global-header__item"},n.a.createElement(pe,null)),!this.props.playground&&n.a.createElement("div",{className:"slds-global-header__item slds-global-header__item_search"},this.props.globalSearch),n.a.createElement("div",{className:"slds-global-header__item"},n.a.createElement(se,{toggleFavorite:this.toggleFavorite,favoritesClicked:this.state.favoritesClicked,favoritesDisabled:this.props.favoritesDisabled,showFavoritesPopup:this.props.showFavoritesPopup,showNotification:this.state.showNotification,notificationCount:this.state.notificationCount,showNotificationPopup:this.props.showNotificationPopup,showTaskMenu:this.props.showTaskMenu}))),this.props.playground&&n.a.createElement("div",{className:"slds-button-group slds-m-around_medium"},n.a.createElement("button",{className:"slds-button slds-button_neutral",onClick:function(){return e.showNotification()}},"Toggle Notification"),n.a.createElement("button",{className:"slds-button slds-button_neutral",onClick:function(){return e.showIncomingNotification()}},"Increase count")))}}])&&le(t.prototype,o),a&&le(t,a),Object.defineProperty(t,"prototype",{writable:!1}),s}(a.Component),ye=o(23),ge=o(57),ve=o(24),_e=o(11),Ee={option0:{name:"Recent Items",label:!0},option1:{name:"Salesforce - 1,000 Licenses",entityMeta:!0,entityType:"Opportunity",entityField:"Propecting"},option2:{name:"Art Vandelay",entityMeta:!0,entityType:"Contact",entityField:"avandelay@vandelay.com"},option3:{name:"Vandelay Industries",entityMeta:!0,entityType:"Account",entityField:"San Francisco"},option4:{name:"Salesforce UK 2016 Events",entityMeta:!0,entityType:"Event",entityField:"$20,000"},option5:{name:"H.E. Pennypacker",entityMeta:!0,entityType:"Lead",entityField:"Nursing"}},we={option1:{term:"Salesforce",beforeTerm:"",afterTerm:".com",entityMeta:!0,entityType:"Account",entityLocation:"San Francisco, CA"},option2:{term:"Salesforce",beforeTerm:"",afterTerm:".org",entityMeta:!0,entityType:"Account",entityLocation:"New York, NY"},option3:{term:"Salesforce",beforeTerm:"",afterTerm:"HQ",entityMeta:!0,entityType:"Account",entityLocation:"San Francisco, CA"}},Oe=o(1),je=i.c.a,xe=i.c.code,Ne=i.c.h2,Se=i.c.h3,Te=i.c.h4,Pe=i.c.p,Ce=function(){return Object(a.createElement)(i.b,{},Object(a.createElement)("div",{className:"lead doc"},"The global header is the anchor for the Salesforce platform and spans all other parts of the UI. The functionality in the header is applicable across all contexts in the Salesforce ecosystem (internal or 3rd party)."),Object(a.createElement)(s.a,{isViewport:!0,exampleOnly:!0,demoStyles:"position: relative; height: 20.25rem;"},Object(a.createElement)(he,{globalSearch:Object(a.createElement)(ye.a,{id:Oe.d.uniqueId("combobox-id-"),"aria-controls":"search-listbox-id-1",comboboxID:"primary-search-combobox-id-1",autocomplete:!0,inputContainerClassName:"slds-global-search__form-element",label:"Search Salesforce",hideLabel:!0,placeholder:"Search Salesforce",results:Object(a.createElement)(ve.e,{id:"search-listbox-id-1","aria-label":"Recent Items",snapshot:Ee,type:"entity",count:6}),resultsType:"listbox",addon:Object(a.createElement)(ge.b,{id:Oe.d.uniqueId("objectswitcher-combobox-id-"),value:"Accounts",addonPosition:"start",hasInteractions:!0,comboboxAriaControls:"primary-search-combobox-id-1",listboxId:Oe.d.uniqueId("objectswitcher-listbox-id-")}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"left",leftInputIcon:Object(a.createElement)(_e.a,{symbol:"search",className:"slds-icon slds-icon_xx-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_left",title:!1,assistiveText:!1}),hasInteractions:!0})})),Ne({id:"About-Global-Header"},"About Global Header"),Se({id:"Structure"},"Structure"),Pe({},"The global header is made up of 3 distinct sections, the logo, the global search, and the global actions. Each section is wrapped in a ",xe({},"<div>")," with the class name ",xe({},"slds-global-header__item"),". The search region gets the modifier class ",xe({},"slds-global-header__item_search"),". This class provides particular styling to handle the search box."),Object(a.createElement)(l.a,{title:"global header layout"},Object(a.createElement)(r.a,null,Object(a.createElement)("header",{className:"slds-global-header_container"},Object(a.createElement)("div",{className:"slds-global-header"},Object(a.createElement)("div",{className:"slds-global-header__item"},"..."),Object(a.createElement)("div",{className:"slds-global-header__item slds-global-header__item_search"},"..."),Object(a.createElement)("div",{className:"slds-global-header__item"},"..."))))),Pe({},"In most scenarios, you will want to fix the global header to the top of the viewport. To achieve this, wrap the global header component in a ",xe({},"<div>")," with the class name ",xe({},"slds-global-header_container"),"."),Object(a.createElement)(l.a,{title:"global header container"},Object(a.createElement)(r.a,{toggleCode:!1},Object(a.createElement)("header",{className:"slds-global-header_container"},Object(a.createElement)("div",{className:"slds-global-header"},"...")))),Se({id:"Accessibility"},"Accessibility"),Pe({},"For screen reading users, we need to provide a way to navigate over the global header and directly to content regions. For this scenario, we provide two links above the global header that provides navigation to landmarks within the app. These links are visually hidden by default but become visible when focused."),Object(a.createElement)(l.a,{title:"global header jump links"},Object(a.createElement)(r.a,null,Object(a.createElement)("header",{className:"slds-global-header_container"},Object(a.createElement)("a",{href:"#",onClick:function(e){return e.preventDefault()},className:"slds-assistive-text slds-assistive-text_focus"},"Skip to Navigation"),Object(a.createElement)("a",{href:"#",onClick:function(e){return e.preventDefault()},className:"slds-assistive-text slds-assistive-text_focus"},"Skip to Main Content"),Object(a.createElement)("div",{className:"slds-global-header"},"...")))),Ne({id:"Base"},"Base"),Object(a.createElement)(l.a,{title:"base global header"},Object(a.createElement)(s.a,{isViewport:!0,demoStyles:"position: relative; height: 21.25rem;"},Object(a.createElement)(he,{globalSearch:Object(a.createElement)(ye.a,{id:Oe.d.uniqueId("combobox-id-"),"aria-controls":"search-listbox-id-1",comboboxID:"primary-search-combobox-id-1",autocomplete:!0,inputContainerClassName:"slds-global-search__form-element",label:"Search Salesforce",hideLabel:!0,placeholder:"Search Salesforce",results:Object(a.createElement)(ve.e,{id:"search-listbox-id-1","aria-label":"Recent Items",snapshot:Ee,type:"entity",count:6}),resultsType:"listbox",addon:Object(a.createElement)(ge.b,{id:Oe.d.uniqueId("objectswitcher-combobox-id-"),value:"Accounts",addonPosition:"start",hasInteractions:!0,comboboxAriaControls:"primary-search-combobox-id-1",listboxId:Oe.d.uniqueId("objectswitcher-listbox-id-")}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"left",leftInputIcon:Object(a.createElement)(_e.a,{symbol:"search",className:"slds-icon slds-icon_xx-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_left",title:!1,assistiveText:!1}),hasInteractions:!0})}))),Ne({id:"Logo"},"Logo"),Pe({},"The logo region is a ",xe({},"<div>")," with the class name ",xe({},"slds-global-header__logo")," wrapped around a span with assistive text for the logo. This inner span has the class name ",xe({},"slds-assistive-text")," and is required to meet accessibility guidelines. The logo is applied as a background image to the div with CSS. This allows us to constrain the dimensions of the logo by a max-height of 40px and a max-width of 200px."),Object(a.createElement)(s.a,{isViewport:!0,toggleCode:!1,demoStyles:"padding: 0.5rem 0; min-height: 3.5rem;"},Object(a.createElement)("div",{className:"slds-global-header__item"},Object(a.createElement)(pe,null))),Ne({id:"Global-Search"},"Global Search"),Pe({},"The global search component is used for application wide search. The form element is implemented as a ",je({href:"/components/combobox"},"Combobox"),", please refer to the accessibility guidelines on the Combobox component page for implementation guidance."),Se({id:"Default"},"Default"),Object(a.createElement)(l.a,{title:"Global Header Search Default State"},Object(a.createElement)(s.a,{isViewport:!0,demoStyles:"position: relative; height: 5.5rem;"},Object(a.createElement)(he,{globalSearch:Object(a.createElement)(ye.a,{id:Oe.d.uniqueId("combobox-id-"),"aria-controls":"search-listbox-id-2",comboboxID:"primary-search-combobox-id-2",autocomplete:!0,inputContainerClassName:"slds-global-search__form-element",label:"Search Salesforce",hideLabel:!0,placeholder:"Search Salesforce",results:Object(a.createElement)(ve.e,{id:"search-listbox-id-2","aria-label":"Recent Items",snapshot:Ee,type:"entity",count:6}),resultsType:"listbox",addon:Object(a.createElement)(ge.b,{id:Oe.d.uniqueId("objectswitcher-combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-search-combobox-id-2",listboxId:Oe.d.uniqueId("objectswitcher-listbox-id-")}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"left",leftInputIcon:Object(a.createElement)(_e.a,{symbol:"search",className:"slds-icon slds-icon_xx-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_left",title:!1,assistiveText:!1})})}))),Se({id:"Focused-and-expanded"},"Focused and expanded"),Object(a.createElement)(l.a,{title:"Global Header Search Expanded State"},Object(a.createElement)(s.a,{isViewport:!0,demoStyles:"position: relative; height: 21rem;"},Object(a.createElement)(he,{globalSearch:Object(a.createElement)(ye.a,{id:Oe.d.uniqueId("combobox-id-"),"aria-controls":"search-listbox-id-3",comboboxID:"primary-search-combobox-id-3",autocomplete:!0,inputContainerClassName:"slds-global-search__form-element",label:"Search Salesforce",hideLabel:!0,placeholder:"Search Salesforce",results:Object(a.createElement)(ve.e,{id:"search-listbox-id-3","aria-label":"Recent Items",snapshot:Ee,type:"entity",count:6}),resultsType:"listbox",addon:Object(a.createElement)(ge.b,{id:Oe.d.uniqueId("objectswitcher-combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-search-combobox-id-3",listboxId:Oe.d.uniqueId("objectswitcher-listbox-id-")}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"left",leftInputIcon:Object(a.createElement)(_e.a,{symbol:"search",className:"slds-icon slds-icon_xx-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_left",title:!1,assistiveText:!1}),hasFocus:!0,isOpen:!0})}))),Se({id:"Active-and-typing"},"Active and typing"),Object(a.createElement)(l.a,{title:"Global Header Search Active State"},Object(a.createElement)(s.a,{isViewport:!0,demoStyles:"position: relative; height: 21rem;"},Object(a.createElement)(he,{globalSearch:Object(a.createElement)(ye.a,{id:Oe.d.uniqueId("combobox-id-"),"aria-controls":"search-listbox-id-4",comboboxID:"primary-search-combobox-id-4",autocomplete:!0,inputContainerClassName:"slds-global-search__form-element",label:"Search Salesforce",hideLabel:!0,placeholder:"Search Salesforce",value:"salesforce",results:Object(a.createElement)(ve.e,{id:"search-listbox-id-4",term:"salesforce",snapshot:we,type:"entity",count:6}),resultsType:"listbox","aria-activedescendant":"option0",addon:Object(a.createElement)(ge.b,{id:Oe.d.uniqueId("objectswitcher-combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-search-combobox-id-4",listboxId:Oe.d.uniqueId("objectswitcher-listbox-id-")}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"left",leftInputIcon:Object(a.createElement)(_e.a,{symbol:"search",className:"slds-icon slds-icon_xx-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_left",title:!1,assistiveText:!1}),hasFocus:!0,isOpen:!0})}))),Ne({id:"Global-Actions-Bar"},"Global Actions Bar"),Pe({},"The global actions bar holds application wide task actions that will persist with the user through their experience."),Pe({},"The global actions bar is located in the right region of the global header."),Object(a.createElement)(s.a,{isViewport:!0,exampleOnly:!0,demoStyles:"position: relative; height: 3.125rem;"},Object(a.createElement)(he,null)),Se({id:"Favorites"},"Favorites"),Pe({},'The favorites action is used to "favorite" a commonly used page within a user\'s experience. When a user "favorites" a page by pressing the favorites action, the button icon changes color with a small animation to confirm your selection.'),Te({id:"Not-pressed"},"Not pressed"),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(Z,null)))),Te({id:"Pressed"},"Pressed"),Pe({},"When pressed, apply the class ",xe({},"slds-is-selected")," to the ",xe({},"slds-global-actions__favorites-action")," button element."),Object(a.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(a.createElement)("p",null,"When the favorites action is pressed, we need to toggle the"," ",Object(a.createElement)("code",null,"aria-pressed")," attribute to"," ",Object(a.createElement)("code",null,"true"),". This will inform a screen reader that the button has been pressed.")),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(Z,{favoritesClicked:!0})))),Te({id:"Disabled"},"Disabled"),Pe({},"If the favorites action needs to become disabled, apply the ",xe({},"disabled")," attribute and the class ",xe({},"slds-is-disabled")," to the button with ",xe({},'class="slds-global-actions_favorites-action"'),"."),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(Z,{favoritesDisabled:!0})))),Te({id:"Favorites-popover"},"Favorites popover"),Pe({},"The favorites popover is invoked when a user clicks on the dropdown arrow action icon inside of the favorites button group. The favorites popover is implemented as a ",je({href:"/components/dynamic-menu/"},"Popover - Dynamic Menu Variant")," component, please refer to the accessibility guidelines on the Popover component page for implementation guidance."),Object(a.createElement)(s.a,{demoStyles:" display: flex; justify-content: flex-end; align-items: flex-start; height: 16rem; min-width: 400px; "},Object(a.createElement)(se,{showFavoritesPopup:!0})),Se({id:"Task"},"Task"),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(ee,null)))),Te({id:"Task-menu"},"Task menu"),Pe({},"When the global task action is invoked, a menu inside of a dropdown becomes visible. Please refer to the accessibility section of the ",je({href:"/components/menus"},"Menus component")," for implementation guidelines."),Object(a.createElement)(s.a,{demoStyles:" display: flex; justify-content: flex-end; align-items: flex-start; height: 16rem; min-width: 400px; "},Object(a.createElement)(se,{showTaskMenu:!0})),Se({id:"Help"},"Help"),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(te,null)))),Se({id:"Setup"},"Setup"),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(oe,null)))),Se({id:"Notifications"},"Notifications"),Pe({},"Notifications are a way to notify a user about a global change within the application. This is commonly used to communicate a Chatter mention/reply or a status update on an opportunity pipeline."),Object(a.createElement)(s.a,{isViewport:!0,exampleOnly:!0,demoStyles:"position: relative; height: 7.5rem;"},Object(a.createElement)(he,{playground:!0})),Te({id:"No-notifications"},"No notifications"),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(ae,null)))),Te({id:"New-notifications"},"New notifications"),Pe({},"When a notification is coming through, we want to apply the ",xe({},"slds-incoming-notification")," class to both the ",xe({},"slds-global-actions__notifications")," button, as well as the ",xe({},"slds-notification-badge"),". This will initiate the animation that there is a new incoming notification. A notification badge will also need to receive the ",xe({},"slds-show-notification")," class, this ensures the badge becomes visible for the incoming animation to work. The ",xe({},"slds-show-notification")," class should also be applied if a user has unread notifications upon their return to their application."),Object(a.createElement)(c.a,{type:"a11y",header:"Accessibility Note"},Object(a.createElement)("p",null,"The notification badge is hidden from screen readers by add the attribute"," ",Object(a.createElement)("code",null,'aria-hidden="true"'),' so the badge doesn\'t have to be inside the button itself. Since the badge count is hidden, we need to add the count number to the button text via some hidden assistive text. The assistive text string should be updated with number of new notifications, such as "3 new notification". If there are no notifications, the assistive text should read "No notifications". The button element also requires'," ",Object(a.createElement)("code",null,'aria-live="assertive"')," to announce any count updates.")),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(ae,{showNotification:!0,notificationCount:"1"})))),Te({id:"Notification-Popover"},"Notification Popover"),Pe({},"The notification popover is invoked when a user clicks on the notification action icon. The notification popover is implemented as a ",je({href:"/components/popovers"},"Popover component"),", please refer to the accessibility guidelines on the Popover component page for implementation guidance."),Object(a.createElement)(s.a,{exampleOnly:!0,demoStyles:" display: flex; justify-content: flex-end; align-items: flex-start; height: 25rem; min-width: 400px; "},Object(a.createElement)(se,{showNotification:!0,notificationCount:"3",showNotificationPopup:!0})),Object(a.createElement)(r.a,null,Object(a.createElement)(N,null)),Te({id:"Unread-notifications"},"Unread notifications"),Pe({},"When a notification item is unread, add the class ",xe({},"slds-global-header__notification_unread")," to the ",xe({},"slds-global-header__notification")," list item. This will provide the unread styles. In addition to adding the class name, please add a dot indicator, ",xe({},'<abbr class="slds-text-link slds-m-horizontal_xxx-small" title="unread">●</abbr>'),", to provide visual affordance that the item is unread."))},ke=function(){return Object(i.a)(Ce())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/icons/docs.mdx.js"]=function(e){function t(t){for(var o,s,c=t[0],l=t[1],r=t[2],h=0,u=[];h<c.length;h++)s=c[h],Object.prototype.hasOwnProperty.call(i,s)&&i[s]&&u.push(i[s][0]),i[s]=0;for(o in l)Object.prototype.hasOwnProperty.call(l,o)&&(e[o]=l[o]);for(d&&d(t);u.length;)u.shift()();return a.push.apply(a,r\|\|[]),n()}function n(){for(var e,t=0;t<a.length;t++){for(var n=a[t],o=!0,c=1;c<n.length;c++){var l=n[c];0!==i[l]&&(o=!1)}o&&(a.splice(t--,1),e=s(s.s=n[0]))}return e}var o={},i={42:0},a=[];function s(t){if(o[t])return o[t].exports;var n=o[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,s),n.l=!0,n.exports}s.m=e,s.c=o,s.d=function(e,t,n){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)s.d(n,o,function(t){return e[t]}.bind(null,o));return n},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],l=c.push.bind(c);c.push=t,c=c.slice();for(var r=0;r<c.length;r++)t(c[r]);var d=l;return a.push([790,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},790:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return _})),n.d(t,"getContents",(function(){return T}));var o=n(0),i=n.n(o),a=n(4),s=n(2),c=n(27),l=(n(14),n(39)),r=n(11),d=n(149),h=n(10),u=n(5),f=n.n(u),p=function(e){var t=e.symbol\|\|"custom5";return i.a.createElement("span",{className:f()("slds-icon_container slds-icon-custom-"+t),title:e.title\|\|"Description of icon when needed"},i.a.createElement(h.a,{className:f()("slds-icon",e.className),sprite:"custom",symbol:t}),i.a.createElement("span",{className:"slds-assistive-text"},e.assistiveText\|\|"Description of icon when needed"))},m=n(147),b=n(34),g=n(1),y=a.c.a,v=a.c.code,O=a.c.em,j=a.c.h2,S=a.c.h3,x=a.c.li,E=a.c.p,w=a.c.ul,_=function(){return Object(o.createElement)(a.b,{},Object(o.createElement)("div",{className:"doc lead"},"Icons provide visual context and enhance usability. Read more in the"," ",Object(o.createElement)("a",{href:"/guidelines/iconography",title:"Iconography Guidelines"},"Iconography design guideline")," ","and for a full list of icons available, visit the"," ",Object(o.createElement)("a",{href:"/icons",title:"Icons"},"Icons page"),"."),Object(o.createElement)(s.a,{exampleOnly:!0},Object(g.f)(r.b,"default")),j({id:"About-Icons"},"About Icons"),E({},"Five separate SVG sprites are used to create icons — ",y({href:"/icons/#action"},"action"),", ",y({href:"/icons/#custom"},"custom"),", ",y({href:"/icons/#doctype"},"doctype"),", ",y({href:"/icons/#standard"},"standard ")," and ",y({href:"/icons/#utility"},"utility"),". Link to the icon SVG sprite by targeting the icon’s hash/ID value in the use href attribute. (You can find the values on the ",y({href:"/icons/"},"icon page"),".)"),j({id:"Accessibility"},"Accessibility"),E({},"Icons require a containing element for two reasons:"),w({},x({},"If assistive text is required, the containing element should contain both the icon and a ",v({},"<span>")," with hidden assistive text describing the icon using the ",v({},"slds-assistive-text")," class."),x({},"If the icon is used without a visible, descriptive label, a ",v({},"title")," attribute is needed on the containing element. The ",v({},"title")," should describe the icon.")),E({},"If an icon has a visible label that describes what the icon represents, no title or hidden assistive text is required."),E({},"The containing element must have the ",v({},"slds-icon_container")," class."),j({id:"Default"},"Default"),Object(o.createElement)(s.a,null,Object(g.f)(r.b,"default")),S({id:"Structure-and-Implementation"},"Structure and Implementation"),E({},"An icon must have a containing element with the class ",v({},"slds-icon_container")," for ",y({href:"#Accessibility"},"accessibility support"),". Inside the container, a ",v({},"<svg>")," with the class ",v({},"slds-icon")," contains the reference to your icon and a ",v({},"<span>")," with the class ",v({},"slds-assistive-text")," contains your hidden assistive text that describes the icon. Be sure to read the ",y({href:"#Accessibility"},"accessibility section")," to know when to use assistive text, the ",v({},"title")," attribute, or when neither is needed."),E({},"When placing the icon code into your page, customize the path in the ",v({},"use")," attribute of the ",v({},"svg")," to the proper path and icon name for your specific icon. For example, the ",O({},"case")," icon in the ",O({},"standard")," sprite would have a path like this:"),Object(o.createElement)(c.a,{toggleCode:!1},Object(o.createElement)("svg",{"aria-hidden":"true",className:"slds-icon",title:"when needed"},Object(o.createElement)("use",{xlinkHref:"/assets/icons/standard-sprite/svg/symbols.svg#case"}))),E({},"If an icon has more than one word in the name, it should be included in the ",v({},"use")," attribute with the underscore separator as shown on the icon page. For example: log_a_call."),E({},"You must require SLDS in your application for SVG sprites to work. If you’re using Visualforce, see ",Object(o.createElement)("a",{href:"/platforms/visualforce"},"the Visualforce tutorial"),". If you’re using ",Object(o.createElement)("a",{href:"/platforms/lightning"}," Lightning components, see this documentation"),"."),w({},x({},"You can access the SVG sprites by downloading the entire ",y({href:"/resources/downloads"},"CSS Framework or just the icons"),". To include a sprite in your application, the recommended method is to place it into the page as the first element inside the ",v({},"body")," element. Alternatively, you can leave the sprite in the assets/icons directory and link to it from your page. To render a sprite icon, add the tiny ",y({href:"https://github.com/jonathantneal/svg4everybody"},"SVG for Everybody")," script for Internet Explorer."),x({},"When placed into the ",v({},"body"),", the SVG sprite takes up space in the page. Use either ",v({},"display:none")," or ",v({},"position:absolute")," and set both the width and height to zero.")),j({id:"Types"},"Types"),E({},"All available SVG sprites fall into one of these five main categories: action, custom, doctype, standard, and utility."),S({id:"Action"},"Action"),E({},"To view all available action icons, see ",y({href:"/icons/#action"},"action icons"),"."),Object(o.createElement)(s.a,null,Object(o.createElement)(d.a,null)),S({id:"Custom"},"Custom"),E({},"Custom icons have a rounded square shape and use a class on the container for the background color."),E({},"To view all available custom icons, see ",y({href:"/icons/#custom"},"custom icons"),"."),Object(o.createElement)(s.a,null,Object(o.createElement)(p,null)),S({id:"Doctype"},"Doctype"),E({},"To view all available doctype icons, see ",y({href:"/icons/#doctype"},"doctype icons"),"."),Object(o.createElement)(s.a,null,Object(o.createElement)(m.a,null)),S({id:"Standard"},"Standard"),E({},"Standard icons have a rounded square shape and use a class on the container for the background color."),E({},"To view all available standard icons, see ",y({href:"/icons/#standard"},"standard icons"),"."),Object(o.createElement)(s.a,null,Object(o.createElement)(b.a,null)),j({id:"Color"},"Color"),S({id:"Default-2"},"Default"),E({},"To change the fill of an icon to the default text color, add the ",v({},"slds-icon-text-default")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.b,"default")),S({id:"Current-Color"},"Current Color"),E({},"To change the fill of an icon to match the current color of its parent, add the ",v({},"slds-current-color")," class to the icon's container. This class utilizes the CSS ",v({},"currentColor")," value."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"currentColor")),S({id:"Success"},"Success"),E({},"To change the fill of an icon to the success text color, add the ",v({},"slds-icon-text-success")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"text-success")),S({id:"Warning"},"Warning"),E({},"To change the fill of an icon to the warning text color, add the ",v({},"slds-icon-text-warning")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"text-warning")),S({id:"Error"},"Error"),E({},"To change the fill of an icon to the error text color, add the ",v({},"slds-icon-text-error")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"text-error")),S({id:"Light"},"Light"),E({},"To change the fill of an icon to the light text color, add the ",v({},"slds-icon-text-light")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"light")),j({id:"Size"},"Size"),E({},"Size modifiers can be added to the ",v({},"slds-icon")," element on all types of icons."),S({id:"XX-Small"},"XX-Small"),E({},"To change the size of an icon to xx-small, add the ",v({},"slds-icon_xx-small")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"size-xxsmall")),S({id:"X-Small"},"X-Small"),E({},"To change the size of an icon to x-small, add the ",v({},"slds-icon_x-small")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"size-xsmall")),S({id:"Small"},"Small"),E({},"To change the size of an icon to small, add the ",v({},"slds-icon_small")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"size-small")),S({id:"Large"},"Large"),E({},"To change the size of an icon to large, add the ",v({},"slds-icon_large")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"size-large")),j({id:"Right-to-Left-Support"},"Right-to-Left Support"),E({},"To horizontally flip an icon to support bidirectionality (reading from right to left), use the ",v({},"slds-icon_flip")," class with the ",v({},"slds-icon_container")," class, and setting the ",v({},"dir")," attribute on any parent container, most often the parent component or on ",v({},"html")," itself."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"rtl-flipped")),j({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(o.createElement)(l.a,{name:"icons",type:"component"}))},T=function(){return Object(a.a)(_())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/icons/docs.mdx.js"]=function(e){function t(t){for(var o,s,c=t[0],l=t[1],r=t[2],h=0,u=[];h<c.length;h++)s=c[h],Object.prototype.hasOwnProperty.call(i,s)&&i[s]&&u.push(i[s][0]),i[s]=0;for(o in l)Object.prototype.hasOwnProperty.call(l,o)&&(e[o]=l[o]);for(d&&d(t);u.length;)u.shift()();return a.push.apply(a,r\|\|[]),n()}function n(){for(var e,t=0;t<a.length;t++){for(var n=a[t],o=!0,c=1;c<n.length;c++){var l=n[c];0!==i[l]&&(o=!1)}o&&(a.splice(t--,1),e=s(s.s=n[0]))}return e}var o={},i={42:0},a=[];function s(t){if(o[t])return o[t].exports;var n=o[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,s),n.l=!0,n.exports}s.m=e,s.c=o,s.d=function(e,t,n){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)s.d(n,o,function(t){return e[t]}.bind(null,o));return n},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],l=c.push.bind(c);c.push=t,c=c.slice();for(var r=0;r<c.length;r++)t(c[r]);var d=l;return a.push([790,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},790:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return _})),n.d(t,"getContents",(function(){return T}));var o=n(0),i=n.n(o),a=n(4),s=n(2),c=n(27),l=(n(14),n(39)),r=n(11),d=n(149),h=n(10),u=n(5),f=n.n(u),p=function(e){var t=e.symbol\|\|"custom5";return i.a.createElement("span",{className:f()("slds-icon_container slds-icon-custom-"+t),title:e.title\|\|"Description of icon when needed"},i.a.createElement(h.a,{className:f()("slds-icon",e.className),sprite:"custom",symbol:t}),i.a.createElement("span",{className:"slds-assistive-text"},e.assistiveText\|\|"Description of icon when needed"))},m=n(147),b=n(35),g=n(1),y=a.c.a,v=a.c.code,O=a.c.em,j=a.c.h2,S=a.c.h3,x=a.c.li,E=a.c.p,w=a.c.ul,_=function(){return Object(o.createElement)(a.b,{},Object(o.createElement)("div",{className:"doc lead"},"Icons provide visual context and enhance usability. Read more in the"," ",Object(o.createElement)("a",{href:"/guidelines/iconography",title:"Iconography Guidelines"},"Iconography design guideline")," ","and for a full list of icons available, visit the"," ",Object(o.createElement)("a",{href:"/icons",title:"Icons"},"Icons page"),"."),Object(o.createElement)(s.a,{exampleOnly:!0},Object(g.f)(r.b,"default")),j({id:"About-Icons"},"About Icons"),E({},"Five separate SVG sprites are used to create icons — ",y({href:"/icons/#action"},"action"),", ",y({href:"/icons/#custom"},"custom"),", ",y({href:"/icons/#doctype"},"doctype"),", ",y({href:"/icons/#standard"},"standard ")," and ",y({href:"/icons/#utility"},"utility"),". Link to the icon SVG sprite by targeting the icon’s hash/ID value in the use href attribute. (You can find the values on the ",y({href:"/icons/"},"icon page"),".)"),j({id:"Accessibility"},"Accessibility"),E({},"Icons require a containing element for two reasons:"),w({},x({},"If assistive text is required, the containing element should contain both the icon and a ",v({},"<span>")," with hidden assistive text describing the icon using the ",v({},"slds-assistive-text")," class."),x({},"If the icon is used without a visible, descriptive label, a ",v({},"title")," attribute is needed on the containing element. The ",v({},"title")," should describe the icon.")),E({},"If an icon has a visible label that describes what the icon represents, no title or hidden assistive text is required."),E({},"The containing element must have the ",v({},"slds-icon_container")," class."),j({id:"Default"},"Default"),Object(o.createElement)(s.a,null,Object(g.f)(r.b,"default")),S({id:"Structure-and-Implementation"},"Structure and Implementation"),E({},"An icon must have a containing element with the class ",v({},"slds-icon_container")," for ",y({href:"#Accessibility"},"accessibility support"),". Inside the container, a ",v({},"<svg>")," with the class ",v({},"slds-icon")," contains the reference to your icon and a ",v({},"<span>")," with the class ",v({},"slds-assistive-text")," contains your hidden assistive text that describes the icon. Be sure to read the ",y({href:"#Accessibility"},"accessibility section")," to know when to use assistive text, the ",v({},"title")," attribute, or when neither is needed."),E({},"When placing the icon code into your page, customize the path in the ",v({},"use")," attribute of the ",v({},"svg")," to the proper path and icon name for your specific icon. For example, the ",O({},"case")," icon in the ",O({},"standard")," sprite would have a path like this:"),Object(o.createElement)(c.a,{toggleCode:!1},Object(o.createElement)("svg",{"aria-hidden":"true",className:"slds-icon",title:"when needed"},Object(o.createElement)("use",{xlinkHref:"/assets/icons/standard-sprite/svg/symbols.svg#case"}))),E({},"If an icon has more than one word in the name, it should be included in the ",v({},"use")," attribute with the underscore separator as shown on the icon page. For example: log_a_call."),E({},"You must require SLDS in your application for SVG sprites to work. If you’re using Visualforce, see ",Object(o.createElement)("a",{href:"/platforms/visualforce"},"the Visualforce tutorial"),". If you’re using ",Object(o.createElement)("a",{href:"/platforms/lightning"}," Lightning components, see this documentation"),"."),w({},x({},"You can access the SVG sprites by downloading the entire ",y({href:"/resources/downloads"},"CSS Framework or just the icons"),". To include a sprite in your application, the recommended method is to place it into the page as the first element inside the ",v({},"body")," element. Alternatively, you can leave the sprite in the assets/icons directory and link to it from your page. To render a sprite icon, add the tiny ",y({href:"https://github.com/jonathantneal/svg4everybody"},"SVG for Everybody")," script for Internet Explorer."),x({},"When placed into the ",v({},"body"),", the SVG sprite takes up space in the page. Use either ",v({},"display:none")," or ",v({},"position:absolute")," and set both the width and height to zero.")),j({id:"Types"},"Types"),E({},"All available SVG sprites fall into one of these five main categories: action, custom, doctype, standard, and utility."),S({id:"Action"},"Action"),E({},"To view all available action icons, see ",y({href:"/icons/#action"},"action icons"),"."),Object(o.createElement)(s.a,null,Object(o.createElement)(d.a,null)),S({id:"Custom"},"Custom"),E({},"Custom icons have a rounded square shape and use a class on the container for the background color."),E({},"To view all available custom icons, see ",y({href:"/icons/#custom"},"custom icons"),"."),Object(o.createElement)(s.a,null,Object(o.createElement)(p,null)),S({id:"Doctype"},"Doctype"),E({},"To view all available doctype icons, see ",y({href:"/icons/#doctype"},"doctype icons"),"."),Object(o.createElement)(s.a,null,Object(o.createElement)(m.a,null)),S({id:"Standard"},"Standard"),E({},"Standard icons have a rounded square shape and use a class on the container for the background color."),E({},"To view all available standard icons, see ",y({href:"/icons/#standard"},"standard icons"),"."),Object(o.createElement)(s.a,null,Object(o.createElement)(b.a,null)),j({id:"Color"},"Color"),S({id:"Default-2"},"Default"),E({},"To change the fill of an icon to the default text color, add the ",v({},"slds-icon-text-default")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.b,"default")),S({id:"Current-Color"},"Current Color"),E({},"To change the fill of an icon to match the current color of its parent, add the ",v({},"slds-current-color")," class to the icon's container. This class utilizes the CSS ",v({},"currentColor")," value."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"currentColor")),S({id:"Success"},"Success"),E({},"To change the fill of an icon to the success text color, add the ",v({},"slds-icon-text-success")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"text-success")),S({id:"Warning"},"Warning"),E({},"To change the fill of an icon to the warning text color, add the ",v({},"slds-icon-text-warning")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"text-warning")),S({id:"Error"},"Error"),E({},"To change the fill of an icon to the error text color, add the ",v({},"slds-icon-text-error")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"text-error")),S({id:"Light"},"Light"),E({},"To change the fill of an icon to the light text color, add the ",v({},"slds-icon-text-light")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"light")),j({id:"Size"},"Size"),E({},"Size modifiers can be added to the ",v({},"slds-icon")," element on all types of icons."),S({id:"XX-Small"},"XX-Small"),E({},"To change the size of an icon to xx-small, add the ",v({},"slds-icon_xx-small")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"size-xxsmall")),S({id:"X-Small"},"X-Small"),E({},"To change the size of an icon to x-small, add the ",v({},"slds-icon_x-small")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"size-xsmall")),S({id:"Small"},"Small"),E({},"To change the size of an icon to small, add the ",v({},"slds-icon_small")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"size-small")),S({id:"Large"},"Large"),E({},"To change the size of an icon to large, add the ",v({},"slds-icon_large")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"size-large")),j({id:"Right-to-Left-Support"},"Right-to-Left Support"),E({},"To horizontally flip an icon to support bidirectionality (reading from right to left), use the ",v({},"slds-icon_flip")," class with the ",v({},"slds-icon_container")," class, and setting the ",v({},"dir")," attribute on any parent container, most often the parent component or on ",v({},"html")," itself."),Object(o.createElement)(s.a,null,Object(g.f)(r.c,"rtl-flipped")),j({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(o.createElement)(l.a,{name:"icons",type:"component"}))},T=function(){return Object(a.a)(_())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/illustration/docs.mdx.js"]=function(e){function t(t){for(var a,o,r=t[0],i=t[1],s=t[2],u=0,d=[];u<r.length;u++)o=r[u],Object.prototype.hasOwnProperty.call(l,o)&&l[o]&&d.push(l[o][0]),l[o]=0;for(a in i)Object.prototype.hasOwnProperty.call(i,a)&&(e[a]=i[a]);for(m&&m(t);d.length;)d.shift()();return c.push.apply(c,s\|\|[]),n()}function n(){for(var e,t=0;t<c.length;t++){for(var n=c[t],a=!0,r=1;r<n.length;r++){var i=n[r];0!==l[i]&&(a=!1)}a&&(c.splice(t--,1),e=o(o.s=n[0]))}return e}var a={},l={43:0},c=[];function o(t){if(a[t])return a[t].exports;var n=a[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.m=e,o.c=a,o.d=function(e,t,n){o.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)o.d(n,a,function(t){return e[t]}.bind(null,a));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=r.push.bind(r);r.push=t,r=r.slice();for(var s=0;s<r.length;s++)t(r[s]);var m=i;return c.push([625,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},625:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return y})),n.d(t,"getContents",(function(){return L}));var a=n(0),l=n(4),c=n(2),o=n(27),r=(n(15),n(14)),i=n(65),s=n(153),m=n(136),u=n(95),d=n(84),b=n(32),O=l.c.code,h=l.c.h2,j=l.c.h3,E=l.c.li,p=l.c.p,g=l.c.strong,f=l.c.ul,y=function(){return Object(a.createElement)(l.b,{},Object(a.createElement)("div",{className:"doc lead"},"An illustration is an image and inline text that work in tandem to communicate a state in a more friendly way."),Object(a.createElement)(c.a,{exampleOnly:!0},Object(a.createElement)(b.a,null,Object(a.createElement)(m.b,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"About-Illustration"},"About Illustration"),p({},"Illustrations should be used within other components, such as cards, to express the state of the component. An illustration image must be accompanied with heading text inline."),j({id:"Accessibility"},"Accessibility"),p({},"Each SVG tag requires an ",O({},'aria-hidden="true"')," attribute."),Object(a.createElement)(o.a,{toggleCode:!1},Object(a.createElement)("svg",{viewBox:"0 0 483 218","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg"},"...")),h({id:"Base"},"Base"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"Using-Empty-States"},"Using Empty States"),p({},"Empty states are used when an element doesn’t have content to display to the user. An empty state is an opportunity to engage and delight users. The empty state should tell users what it’s for and why they’re seeing it. Effective empty states also tell users what they can do next. Illustrations should show data or system state (empty for instance), but not user input validation messaging."),p({},"Empty states have many causes, such as:"),f({},E({},"There’s ",g({},"no data")," the user can see."),E({},"A feature hasn’t been ",g({},"configured yet"),"."),E({},"There’s been an ",g({},"error"),"."),E({},"Empty area of the screen intentionally ",g({},"left blank"),".")),p({},"Use empty states to:"),f({},E({},"Prevent the application from feeling lifeless and empty."),E({},"Help users onboard an application and/or motivate them to interact with the application."),E({},"Warn the user when data is unavailable (because of a system error or otherwise).")),h({id:"With-Message-Body"},"With Message Body"),p({},"Illustrations can include message body text below the heading to further communicate the state of the component. However, illustrations cannot have a message body without heading text."),Object(a.createElement)(r.a,{type:"note",header:"Design Note"},Object(a.createElement)("p",null,"To ensure the readability of your text, we recommend limiting each line to 66 characters.")),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor",message:"Lorem ipsum dolor sit amet, consectetur"}))),h({id:"Large-Illustrations"},"Large Illustrations"),p({},"The base illustration component is typically used within smaller components and has a ",O({},"max-width")," of ",O({},"300px")," and a ",O({},"max-height")," of ",O({},"200px"),". However, there are some cases where it can be used in a larger context."),p({},"For these situations, utilize the modifier ",O({},".slds-illustration_large"),". This will increase the ",O({},"max-width")," of the image to ",O({},"600px")," and the ",O({},"max-height")," to ",O({},"400px"),"."),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,{large:!0},Object(a.createElement)(i.a,null),Object(a.createElement)("h3",{className:"slds-illustration__header slds-text-heading_medium"},"Lorem ipsum dolor"),Object(a.createElement)("p",{className:"slds-text-body_regular"},"Lorem ipsum dolor sit amet, consectetur"))),h({id:"Informational"},"Informational"),p({},"Common Scenarios:"),f({},E({},"Setup needed"),E({},"Maintenance")),j({id:"Going-Camping"},"Going Camping"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(s.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Maintenance"},"Maintenance"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(s.b,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"No-Data"},"No Data"),p({},"Common Scenarios:"),f({},E({},"No data/information"),E({},"No history/feeds")),j({id:"Desert"},"Desert"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(m.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Open-Road"},"Open Road"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(m.b,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"Error"},"Error"),p({},"Common Scenarios:"),f({},E({},"No access to a page"),E({},"No connection"),E({},"Page not available in Lightning"),E({},"Page not available"),E({},"Walkthrough not available")),j({id:"No-Access"},"No Access"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(u.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"No-Connection"},"No Connection"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(u.b,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Not-Available-In-Lightning"},"Not Available In Lightning"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(u.c,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Page-Not-Available"},"Page Not Available"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(u.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Walkthrough-Not-Available"},"Walkthrough Not Available"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(u.e,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"Custom"},"Custom"),j({id:"Fishing-Deals"},"Fishing Deals"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Lake-Mountain"},"Lake Mountain"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.b,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"No-Events"},"No Events"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.c,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"No-Task"},"No Task"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Setup"},"Setup"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.e,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"Miscellaneous"},"Miscellaneous"),j({id:"Gone-Fishing"},"Gone Fishing"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(d.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"No-Access-2"},"No Access 2"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(d.b,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"No-Content"},"No Content"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(d.c,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"No-Preview"},"No Preview"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(d.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Preview"},"Preview"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(d.e,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Research"},"Research"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(d.f,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"With-Call-to-Action"},"With Call to Action"),p({},"A call to action may be used to help users move from an empty state to a situation where the page, component, or element is now useful to them."),p({},"In most cases, one call to action will be enough. When using one call to action, place the call to action below the message text."),j({id:"One-Call-to-Action-Link"},"One Call to Action - Link"),Object(a.createElement)(c.a,{demoStyles:"width: 400px;"},Object(a.createElement)(b.b,{link:!0},Object(a.createElement)(b.a,null,Object(a.createElement)(i.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor",message:"Lorem ipsum dolor sit amet, consectetur"})))),j({id:"One-Call-to-Action-Button"},"One Call to Action - Button"),Object(a.createElement)(c.a,{demoStyles:"width: 400px;"},Object(a.createElement)(b.b,{button:"slds-button"},Object(a.createElement)(b.a,null,Object(a.createElement)(i.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor",message:"Lorem ipsum dolor sit amet, consectetur"})))),j({id:"One-Call-to-Action-Button-Brand"},"One Call to Action - Button Brand"),Object(a.createElement)(c.a,{demoStyles:"width: 400px;"},Object(a.createElement)(b.b,{button:"slds-button slds-button_brand"},Object(a.createElement)(b.a,null,Object(a.createElement)(i.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor",message:"Lorem ipsum dolor sit amet, consectetur"})))),j({id:"Two-Calls-to-Action"},"Two Calls to Action"),Object(a.createElement)(c.a,{demoStyles:"width: 400px;"},Object(a.createElement)(b.b,{link:!0},Object(a.createElement)(b.a,null,Object(a.createElement)(i.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor",message:"Lorem ipsum dolor sit amet, consectetur",secondaryCTA:"Learn More"})))),h({id:"Text-Only"},"Text Only"),p({},"In certain use cases, it may be appropriate to just use text to communicate states."),j({id:"Heading-and-Message"},"Heading and Message"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor",message:"Lorem ipsum dolor sit amet, consectetur"}))),j({id:"Heading-Only"},"Heading Only"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Message-Only"},"Message Only"),p({},"When an image is not present, a message only variant may be used."),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(b.c,{message:"Lorem ipsum dolor sit amet, consectetur"}))))},L=function(){return Object(l.a)(y())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/illustration/docs.mdx.js"]=function(e){function t(t){for(var a,o,r=t[0],i=t[1],s=t[2],u=0,d=[];u<r.length;u++)o=r[u],Object.prototype.hasOwnProperty.call(l,o)&&l[o]&&d.push(l[o][0]),l[o]=0;for(a in i)Object.prototype.hasOwnProperty.call(i,a)&&(e[a]=i[a]);for(m&&m(t);d.length;)d.shift()();return c.push.apply(c,s\|\|[]),n()}function n(){for(var e,t=0;t<c.length;t++){for(var n=c[t],a=!0,r=1;r<n.length;r++){var i=n[r];0!==l[i]&&(a=!1)}a&&(c.splice(t--,1),e=o(o.s=n[0]))}return e}var a={},l={43:0},c=[];function o(t){if(a[t])return a[t].exports;var n=a[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.m=e,o.c=a,o.d=function(e,t,n){o.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)o.d(n,a,function(t){return e[t]}.bind(null,a));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=r.push.bind(r);r.push=t,r=r.slice();for(var s=0;s<r.length;s++)t(r[s]);var m=i;return c.push([625,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},625:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return y})),n.d(t,"getContents",(function(){return L}));var a=n(0),l=n(4),c=n(2),o=n(27),r=(n(15),n(14)),i=n(65),s=n(153),m=n(136),u=n(95),d=n(84),b=n(33),O=l.c.code,h=l.c.h2,j=l.c.h3,E=l.c.li,p=l.c.p,g=l.c.strong,f=l.c.ul,y=function(){return Object(a.createElement)(l.b,{},Object(a.createElement)("div",{className:"doc lead"},"An illustration is an image and inline text that work in tandem to communicate a state in a more friendly way."),Object(a.createElement)(c.a,{exampleOnly:!0},Object(a.createElement)(b.a,null,Object(a.createElement)(m.b,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"About-Illustration"},"About Illustration"),p({},"Illustrations should be used within other components, such as cards, to express the state of the component. An illustration image must be accompanied with heading text inline."),j({id:"Accessibility"},"Accessibility"),p({},"Each SVG tag requires an ",O({},'aria-hidden="true"')," attribute."),Object(a.createElement)(o.a,{toggleCode:!1},Object(a.createElement)("svg",{viewBox:"0 0 483 218","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg"},"...")),h({id:"Base"},"Base"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"Using-Empty-States"},"Using Empty States"),p({},"Empty states are used when an element doesn’t have content to display to the user. An empty state is an opportunity to engage and delight users. The empty state should tell users what it’s for and why they’re seeing it. Effective empty states also tell users what they can do next. Illustrations should show data or system state (empty for instance), but not user input validation messaging."),p({},"Empty states have many causes, such as:"),f({},E({},"There’s ",g({},"no data")," the user can see."),E({},"A feature hasn’t been ",g({},"configured yet"),"."),E({},"There’s been an ",g({},"error"),"."),E({},"Empty area of the screen intentionally ",g({},"left blank"),".")),p({},"Use empty states to:"),f({},E({},"Prevent the application from feeling lifeless and empty."),E({},"Help users onboard an application and/or motivate them to interact with the application."),E({},"Warn the user when data is unavailable (because of a system error or otherwise).")),h({id:"With-Message-Body"},"With Message Body"),p({},"Illustrations can include message body text below the heading to further communicate the state of the component. However, illustrations cannot have a message body without heading text."),Object(a.createElement)(r.a,{type:"note",header:"Design Note"},Object(a.createElement)("p",null,"To ensure the readability of your text, we recommend limiting each line to 66 characters.")),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor",message:"Lorem ipsum dolor sit amet, consectetur"}))),h({id:"Large-Illustrations"},"Large Illustrations"),p({},"The base illustration component is typically used within smaller components and has a ",O({},"max-width")," of ",O({},"300px")," and a ",O({},"max-height")," of ",O({},"200px"),". However, there are some cases where it can be used in a larger context."),p({},"For these situations, utilize the modifier ",O({},".slds-illustration_large"),". This will increase the ",O({},"max-width")," of the image to ",O({},"600px")," and the ",O({},"max-height")," to ",O({},"400px"),"."),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,{large:!0},Object(a.createElement)(i.a,null),Object(a.createElement)("h3",{className:"slds-illustration__header slds-text-heading_medium"},"Lorem ipsum dolor"),Object(a.createElement)("p",{className:"slds-text-body_regular"},"Lorem ipsum dolor sit amet, consectetur"))),h({id:"Informational"},"Informational"),p({},"Common Scenarios:"),f({},E({},"Setup needed"),E({},"Maintenance")),j({id:"Going-Camping"},"Going Camping"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(s.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Maintenance"},"Maintenance"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(s.b,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"No-Data"},"No Data"),p({},"Common Scenarios:"),f({},E({},"No data/information"),E({},"No history/feeds")),j({id:"Desert"},"Desert"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(m.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Open-Road"},"Open Road"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(m.b,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"Error"},"Error"),p({},"Common Scenarios:"),f({},E({},"No access to a page"),E({},"No connection"),E({},"Page not available in Lightning"),E({},"Page not available"),E({},"Walkthrough not available")),j({id:"No-Access"},"No Access"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(u.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"No-Connection"},"No Connection"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(u.b,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Not-Available-In-Lightning"},"Not Available In Lightning"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(u.c,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Page-Not-Available"},"Page Not Available"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(u.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Walkthrough-Not-Available"},"Walkthrough Not Available"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(u.e,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"Custom"},"Custom"),j({id:"Fishing-Deals"},"Fishing Deals"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Lake-Mountain"},"Lake Mountain"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.b,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"No-Events"},"No Events"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.c,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"No-Task"},"No Task"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Setup"},"Setup"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.e,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"Miscellaneous"},"Miscellaneous"),j({id:"Gone-Fishing"},"Gone Fishing"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(d.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"No-Access-2"},"No Access 2"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(d.b,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"No-Content"},"No Content"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(d.c,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"No-Preview"},"No Preview"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(d.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Preview"},"Preview"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(d.e,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Research"},"Research"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(d.f,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"With-Call-to-Action"},"With Call to Action"),p({},"A call to action may be used to help users move from an empty state to a situation where the page, component, or element is now useful to them."),p({},"In most cases, one call to action will be enough. When using one call to action, place the call to action below the message text."),j({id:"One-Call-to-Action-Link"},"One Call to Action - Link"),Object(a.createElement)(c.a,{demoStyles:"width: 400px;"},Object(a.createElement)(b.b,{link:!0},Object(a.createElement)(b.a,null,Object(a.createElement)(i.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor",message:"Lorem ipsum dolor sit amet, consectetur"})))),j({id:"One-Call-to-Action-Button"},"One Call to Action - Button"),Object(a.createElement)(c.a,{demoStyles:"width: 400px;"},Object(a.createElement)(b.b,{button:"slds-button"},Object(a.createElement)(b.a,null,Object(a.createElement)(i.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor",message:"Lorem ipsum dolor sit amet, consectetur"})))),j({id:"One-Call-to-Action-Button-Brand"},"One Call to Action - Button Brand"),Object(a.createElement)(c.a,{demoStyles:"width: 400px;"},Object(a.createElement)(b.b,{button:"slds-button slds-button_brand"},Object(a.createElement)(b.a,null,Object(a.createElement)(i.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor",message:"Lorem ipsum dolor sit amet, consectetur"})))),j({id:"Two-Calls-to-Action"},"Two Calls to Action"),Object(a.createElement)(c.a,{demoStyles:"width: 400px;"},Object(a.createElement)(b.b,{link:!0},Object(a.createElement)(b.a,null,Object(a.createElement)(i.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor",message:"Lorem ipsum dolor sit amet, consectetur",secondaryCTA:"Learn More"})))),h({id:"Text-Only"},"Text Only"),p({},"In certain use cases, it may be appropriate to just use text to communicate states."),j({id:"Heading-and-Message"},"Heading and Message"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor",message:"Lorem ipsum dolor sit amet, consectetur"}))),j({id:"Heading-Only"},"Heading Only"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Message-Only"},"Message Only"),p({},"When an image is not present, a message only variant may be used."),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(b.c,{message:"Lorem ipsum dolor sit amet, consectetur"}))))},L=function(){return Object(l.a)(y())}}});

package/__internal/chunked/docs/ui/components/list-builder/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/list-builder/docs.mdx.js"]=function(e){function t(t){for(var l,s,c=t[0],d=t[1],i=t[2],m=0,u=[];m<c.length;m++)s=c[m],Object.prototype.hasOwnProperty.call(n,s)&&n[s]&&u.push(n[s][0]),n[s]=0;for(l in d)Object.prototype.hasOwnProperty.call(d,l)&&(e[l]=d[l]);for(o&&o(t);u.length;)u.shift()();return r.push.apply(r,i\|\|[]),a()}function a(){for(var e,t=0;t<r.length;t++){for(var a=r[t],l=!0,c=1;c<a.length;c++){var d=a[c];0!==n[d]&&(l=!1)}l&&(r.splice(t--,1),e=s(s.s=a[0]))}return e}var l={},n={45:0},r=[];function s(t){if(l[t])return l[t].exports;var a=l[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,s),a.l=!0,a.exports}s.m=e,s.c=l,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 l in e)s.d(a,l,function(t){return e[t]}.bind(null,l));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 c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],d=c.push.bind(c);c.push=t,c=c.slice();for(var i=0;i<c.length;i++)t(c[i]);var o=d;return r.push([757,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},757:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return H})),a.d(t,"getContents",(function(){return D}));var l=a(0),n=a.n(l),r=a(4),s=a(2),c=a(1),d=(a(14),a(3)),i=a.n(d),o=a(21),m=a(79),u=a(23),p=a(24),b=a(26),E=a(11),h=a(6),y=a(29);function f(e,t){return function(e){if(Array.isArray(e))return e}(e)\|\|function(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]\|\|e["@@iterator"];if(null==a)return;var l,n,r=[],s=!0,c=!1;try{for(a=a.call(e);!(s=(l=a.next()).done)&&(r.push(l.value),!t\|\|r.length!==t);s=!0);}catch(e){c=!0,n=e}finally{try{s\|\|null==a.return\|\|a.return()}finally{if(c)throw n}}return r}(e,t)\|\|function(e,t){if(!e)return;if("string"==typeof e)return v(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);"Object"===a&&e.constructor&&(a=e.constructor.name);if("Map"===a\|\|"Set"===a)return Array.from(e);if("Arguments"===a\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(a))return v(e,t)}(e,t)\|\|function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function v(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var a=0,l=new Array(t);a<t;a++)l[a]=e[a];return l}var N=["Name","Product Code","List Price","Product Family"],g=["Product Name"],_=[{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"}],x=function(e){var t=e.selectedFilters,a=e.itemsSelected,r=f(Object(l.useState)(c.d.uniqueId("example-unique-id-")),1)[0],s=f(Object(l.useState)(c.d.uniqueId("example-unique-id-")),1)[0];return n.a.createElement("div",{className:"slds-p-vertical_x-small slds-p-horizontal_large slds-shrink-none slds-theme_shade"},n.a.createElement(u.b,{id:r,"aria-controls":s,autocomplete:!0,label:"Search",hideLabel:!0,placeholder:"Search Salesforce",inputIconPosition:"right",rightInputIcon:n.a.createElement(E.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:n.a.createElement(p.e,{id:s,snapshot:b.p,type:"plain",count:8,hideIcons:!0}),resultsType:"listbox",hasInteractions:!0}),t\|\|null,n.a.createElement("div",{className:"slds-text-title slds-m-top_x-small","aria-live":"polite"},a\|\|"0"," Item(s) Selected"))};x.propTypes={selectedFilters:i.a.node,itemsSelected:i.a.string};var S=function(e){return n.a.createElement("div",{className:"slds-scrollable slds-grow"},n.a.createElement("div",{className:"slds-scrollable_none"},n.a.createElement(h.s,{hasNoRowHover:!0,isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example product list"},n.a.createElement(h.q,null,n.a.createElement(h.r,null,n.a.createElement(h.c,{style:{width:"3.75rem"}}),N.map((function(e,t){return n.a.createElement(h.c,{"aria-label":e,isSortable:!0,isResizable:!0,key:t},n.a.createElement(h.i,{columnName:e}))})))),n.a.createElement(h.o,null,e.children))))},P=function(e){return n.a.createElement("div",{className:"slds-scrollable slds-grow"},n.a.createElement("div",{className:"slds-scrollable_none"},n.a.createElement(h.s,{hasHiddenHeader:!0,hasNoRowHover:!0,isBordered:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example single column product list"},n.a.createElement(h.q,{isHidden:e.hasHiddenHeader},n.a.createElement(h.r,null,n.a.createElement(h.c,{style:{width:"3.75rem"}}),e.hasHiddenHeader?n.a.createElement(h.c,{"aria-label":g[0]},n.a.createElement(h.b,{columnName:g[0]})):n.a.createElement(h.c,{"aria-label":g[0]},n.a.createElement(h.i,{columnName:g[0]})))),n.a.createElement(h.o,null,e.children))))};P.propTypes={hasHiddenHeader:i.a.bool,children:i.a.node};var w=function(e){var t="Select item "+e.index;return n.a.createElement(h.p,{isSelected:e.checked},n.a.createElement(h.t,{isRightAligned:!0,tabIndex:1===e.index?"0":null,type:"advanced"},n.a.createElement(m.b,{label:t,isChecked:e.checked,isDisabled:e.disabled,tabIndex:-1})),n.a.createElement(h.m,null,n.a.createElement(h.j,{cellText:e.name})),n.a.createElement(h.t,{type:"advanced"},n.a.createElement(h.j,{cellText:e.productCode})),n.a.createElement(h.t,{type:"advanced"},n.a.createElement(h.j,{cellText:e.listPrice})),n.a.createElement(h.t,{type:"advanced"},n.a.createElement(h.j,{cellText:e.productFamily})))},A=function(e){var t="Select item "+e.index;return n.a.createElement(h.p,{isSelected:e.checked},n.a.createElement(h.t,{isRightAligned:!0,tabIndex:1===e.index?"0":"-1",type:"advanced",style:{width:"3.75rem"}},n.a.createElement(m.b,{label:t,isChecked:e.checked,isDisabled:e.disabled,tabIndex:-1})),n.a.createElement(h.t,{type:"advanced"},n.a.createElement(h.j,{cellText:e.name})))};A.propTypes={className:i.a.string,index:i.a.number,checked:i.a.bool,disabled:i.a.bool,name:i.a.string};var C=function(e){return n.a.createElement(y.f,{variant:"container-bare"},n.a.createElement(y.c,null,n.a.createElement(y.d,null,n.a.createElement(y.b,{label:"Analytics",tabIndex:"0"}))))},j=function(e){return n.a.createElement(y.f,{variant:"container-bare"},n.a.createElement(y.c,null,n.a.createElement(y.d,null,n.a.createElement(y.b,{label:"Option A",tabIndex:"0"})),n.a.createElement(y.d,null,n.a.createElement(y.b,{label:"Option B"}))))},O=[{id:"default",label:"Default",element:n.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n.a.createElement(o.a,null,n.a.createElement(o.b,{className:"slds-modal_large slds-list-builder","aria-labelledby":"id-of-modalheader-h1"},n.a.createElement(o.e,null,n.a.createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n.a.createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n.a.createElement(o.c,{className:"slds-grid slds-grow"},n.a.createElement("div",{className:"slds-grid slds-grid_vertical"},n.a.createElement(x,null),n.a.createElement(S,null,_.map((function(e,t){return n.a.createElement(w,{checked:!1,key:t,index:t+1,name:e.name,productCode:e.productCode,listPrice:e.listPrice,productFamily:e.productFamily})}))))),n.a.createElement(o.d,null,n.a.createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n.a.createElement("button",{className:"slds-button slds-button_brand"},"Next")))))}],k=[{id:"items-selected",label:"Items Selected",element:n.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n.a.createElement(o.a,null,n.a.createElement(o.b,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n.a.createElement(o.e,null,n.a.createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n.a.createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n.a.createElement(o.c,{className:"slds-grid slds-nowrap"},n.a.createElement("div",{className:"slds-col slds-grid slds-grid_vertical slds-nowrap"},n.a.createElement(x,{selectedFilters:n.a.createElement(C,null),itemsSelected:"1"}),n.a.createElement(S,null,_.map((function(e,t){return n.a.createElement(w,{key:t,index:t+1,checked:0===t,name:e.name,productCode:e.productCode,listPrice:e.listPrice,productFamily:e.productFamily})}))))),n.a.createElement(o.d,null,n.a.createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n.a.createElement("button",{className:"slds-button slds-button_brand"},"Next")))))},{id:"items-disabled",label:"Items Disabled",element:n.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n.a.createElement(o.a,null,n.a.createElement(o.b,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n.a.createElement(o.e,null,n.a.createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n.a.createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n.a.createElement(o.c,{className:"slds-grid slds-nowrap"},n.a.createElement("div",{className:"slds-col slds-grid slds-grid_vertical slds-nowrap"},n.a.createElement(x,{itemsSelected:"0"}),n.a.createElement(S,null,_.map((function(e,t){return n.a.createElement(w,{checked:!1,key:t,index:t+1,disabled:t%2==0\|\|null,name:e.name,productCode:e.productCode,listPrice:e.listPrice,productFamily:e.productFamily})}))))),n.a.createElement(o.d,null,n.a.createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n.a.createElement("button",{className:"slds-button slds-button_brand"},"Next")))))},{id:"items-default-selected",label:"Items Default Selected",element:n.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n.a.createElement(o.a,null,n.a.createElement(o.b,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n.a.createElement(o.e,null,n.a.createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n.a.createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n.a.createElement(o.c,{className:"slds-grid slds-nowrap"},n.a.createElement("div",{className:"slds-col slds-grid slds-grid_vertical slds-nowrap"},n.a.createElement(x,{itemsSelected:"0"}),n.a.createElement(S,null,_.map((function(e,t){return n.a.createElement(w,{key:t,index:t+1,checked:t%2==1,disabled:t%2==1\|\|null,name:e.name,productCode:e.productCode,listPrice:e.listPrice,productFamily:e.productFamily})}))))),n.a.createElement(o.d,null,n.a.createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n.a.createElement("button",{className:"slds-button slds-button_brand"},"Next")))))}],F=[{id:"two-column-with-hidden-header",label:"Two Column with Hidden Header",element:n.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n.a.createElement(o.a,null,n.a.createElement(o.b,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n.a.createElement(o.e,null,n.a.createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n.a.createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n.a.createElement(o.c,{className:"slds-grid slds-nowrap"},n.a.createElement("div",{className:"slds-col slds-grid slds-grid_vertical slds-nowrap"},n.a.createElement(x,{itemsSelected:"0"}),n.a.createElement(P,{hasHiddenHeader:!0},_.map((function(e,t){return n.a.createElement(A,{checked:!1,key:t,index:t+1,name:e.name})}))))),n.a.createElement(o.d,null,n.a.createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n.a.createElement("button",{className:"slds-button slds-button_brand"},"Next")))))},{id:"filtered",label:"Filtered Results",element:n.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n.a.createElement(o.a,null,n.a.createElement(o.b,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n.a.createElement(o.e,null,n.a.createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n.a.createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n.a.createElement(o.c,{className:"slds-grid slds-grow"},n.a.createElement("div",{className:"slds-grid slds-grid_vertical"},n.a.createElement(x,{selectedFilters:n.a.createElement(j,null),itemsSelected:"2"}),n.a.createElement(S,null,n.a.createElement(w,{checked:!1,index:1,name:_[0].name,productCode:_[0].productCode,listPrice:_[0].listPrice,productFamily:_[0].productFamily})))),n.a.createElement(o.d,null,n.a.createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n.a.createElement("button",{className:"slds-button slds-button_brand"},"Next")))))}],T=r.c.h2,I=r.c.h3,L=r.c.p,H=function(){return Object(l.createElement)(r.b,{},Object(l.createElement)("div",{className:"doc lead"},"The List Builder is a quick, visual and efficient ‘shopping cart’ approach to adding multiple items to a parent object."),Object(l.createElement)(s.a,{exampleOnly:!0},Object(c.f)(O)),T({id:"About-List-Builder"},"About List Builder"),L({},"The List builder relies heavily on utility classes to piece together the layout so please pay close attention to the markup and classes."),T({id:"Base"},"Base"),Object(l.createElement)(s.a,null,Object(c.f)(O)),T({id:"States"},"States"),I({id:"Items-Selected"},"Items Selected"),Object(l.createElement)(s.a,null,Object(c.f)(k,"items-selected")),I({id:"Items-Disabled"},"Items Disabled"),Object(l.createElement)(s.a,null,Object(c.f)(k,"items-disabled")),I({id:"Items-Default-Selected"},"Items Default Selected"),Object(l.createElement)(s.a,null,Object(c.f)(k,"items-default-selected")),T({id:"Examples"},"Examples"),I({id:"Two-Column-with-Hidden-Header"},"Two Column with Hidden Header"),Object(l.createElement)(s.a,null,Object(c.f)(F,"filtered")),I({id:"Filtered-Results"},"Filtered Results"),Object(l.createElement)(s.a,null,Object(c.f)(F,"two-column-with-hidden-header")))},D=function(){return Object(r.a)(H())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/list-builder/docs.mdx.js"]=function(e){function t(t){for(var l,s,c=t[0],d=t[1],i=t[2],m=0,u=[];m<c.length;m++)s=c[m],Object.prototype.hasOwnProperty.call(n,s)&&n[s]&&u.push(n[s][0]),n[s]=0;for(l in d)Object.prototype.hasOwnProperty.call(d,l)&&(e[l]=d[l]);for(o&&o(t);u.length;)u.shift()();return r.push.apply(r,i\|\|[]),a()}function a(){for(var e,t=0;t<r.length;t++){for(var a=r[t],l=!0,c=1;c<a.length;c++){var d=a[c];0!==n[d]&&(l=!1)}l&&(r.splice(t--,1),e=s(s.s=a[0]))}return e}var l={},n={45:0},r=[];function s(t){if(l[t])return l[t].exports;var a=l[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,s),a.l=!0,a.exports}s.m=e,s.c=l,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 l in e)s.d(a,l,function(t){return e[t]}.bind(null,l));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 c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],d=c.push.bind(c);c.push=t,c=c.slice();for(var i=0;i<c.length;i++)t(c[i]);var o=d;return r.push([757,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},757:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return H})),a.d(t,"getContents",(function(){return D}));var l=a(0),n=a.n(l),r=a(4),s=a(2),c=a(1),d=(a(14),a(3)),i=a.n(d),o=a(21),m=a(79),u=a(23),p=a(24),b=a(26),E=a(11),h=a(6),y=a(30);function f(e,t){return function(e){if(Array.isArray(e))return e}(e)\|\|function(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]\|\|e["@@iterator"];if(null==a)return;var l,n,r=[],s=!0,c=!1;try{for(a=a.call(e);!(s=(l=a.next()).done)&&(r.push(l.value),!t\|\|r.length!==t);s=!0);}catch(e){c=!0,n=e}finally{try{s\|\|null==a.return\|\|a.return()}finally{if(c)throw n}}return r}(e,t)\|\|function(e,t){if(!e)return;if("string"==typeof e)return v(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);"Object"===a&&e.constructor&&(a=e.constructor.name);if("Map"===a\|\|"Set"===a)return Array.from(e);if("Arguments"===a\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(a))return v(e,t)}(e,t)\|\|function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function v(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var a=0,l=new Array(t);a<t;a++)l[a]=e[a];return l}var N=["Name","Product Code","List Price","Product Family"],g=["Product Name"],_=[{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"},{name:"Analytics",productCode:"ANTLY",listPrice:"5000.00",productFamily:"Analytics Product"}],x=function(e){var t=e.selectedFilters,a=e.itemsSelected,r=f(Object(l.useState)(c.d.uniqueId("example-unique-id-")),1)[0],s=f(Object(l.useState)(c.d.uniqueId("example-unique-id-")),1)[0];return n.a.createElement("div",{className:"slds-p-vertical_x-small slds-p-horizontal_large slds-shrink-none slds-theme_shade"},n.a.createElement(u.b,{id:r,"aria-controls":s,autocomplete:!0,label:"Search",hideLabel:!0,placeholder:"Search Salesforce",inputIconPosition:"right",rightInputIcon:n.a.createElement(E.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:n.a.createElement(p.e,{id:s,snapshot:b.p,type:"plain",count:8,hideIcons:!0}),resultsType:"listbox",hasInteractions:!0}),t\|\|null,n.a.createElement("div",{className:"slds-text-title slds-m-top_x-small","aria-live":"polite"},a\|\|"0"," Item(s) Selected"))};x.propTypes={selectedFilters:i.a.node,itemsSelected:i.a.string};var S=function(e){return n.a.createElement("div",{className:"slds-scrollable slds-grow"},n.a.createElement("div",{className:"slds-scrollable_none"},n.a.createElement(h.s,{hasNoRowHover:!0,isBordered:!0,isFixedLayout:!0,isResizable:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example product list"},n.a.createElement(h.q,null,n.a.createElement(h.r,null,n.a.createElement(h.c,{style:{width:"3.75rem"}}),N.map((function(e,t){return n.a.createElement(h.c,{"aria-label":e,isSortable:!0,isResizable:!0,key:t},n.a.createElement(h.i,{columnName:e}))})))),n.a.createElement(h.o,null,e.children))))},P=function(e){return n.a.createElement("div",{className:"slds-scrollable slds-grow"},n.a.createElement("div",{className:"slds-scrollable_none"},n.a.createElement(h.s,{hasHiddenHeader:!0,hasNoRowHover:!0,isBordered:!0,selectionType:"multiple",type:"advanced",ariaLabel:"Example single column product list"},n.a.createElement(h.q,{isHidden:e.hasHiddenHeader},n.a.createElement(h.r,null,n.a.createElement(h.c,{style:{width:"3.75rem"}}),e.hasHiddenHeader?n.a.createElement(h.c,{"aria-label":g[0]},n.a.createElement(h.b,{columnName:g[0]})):n.a.createElement(h.c,{"aria-label":g[0]},n.a.createElement(h.i,{columnName:g[0]})))),n.a.createElement(h.o,null,e.children))))};P.propTypes={hasHiddenHeader:i.a.bool,children:i.a.node};var w=function(e){var t="Select item "+e.index;return n.a.createElement(h.p,{isSelected:e.checked},n.a.createElement(h.t,{isRightAligned:!0,tabIndex:1===e.index?"0":null,type:"advanced"},n.a.createElement(m.b,{label:t,isChecked:e.checked,isDisabled:e.disabled,tabIndex:-1})),n.a.createElement(h.m,null,n.a.createElement(h.j,{cellText:e.name})),n.a.createElement(h.t,{type:"advanced"},n.a.createElement(h.j,{cellText:e.productCode})),n.a.createElement(h.t,{type:"advanced"},n.a.createElement(h.j,{cellText:e.listPrice})),n.a.createElement(h.t,{type:"advanced"},n.a.createElement(h.j,{cellText:e.productFamily})))},A=function(e){var t="Select item "+e.index;return n.a.createElement(h.p,{isSelected:e.checked},n.a.createElement(h.t,{isRightAligned:!0,tabIndex:1===e.index?"0":"-1",type:"advanced",style:{width:"3.75rem"}},n.a.createElement(m.b,{label:t,isChecked:e.checked,isDisabled:e.disabled,tabIndex:-1})),n.a.createElement(h.t,{type:"advanced"},n.a.createElement(h.j,{cellText:e.name})))};A.propTypes={className:i.a.string,index:i.a.number,checked:i.a.bool,disabled:i.a.bool,name:i.a.string};var C=function(e){return n.a.createElement(y.f,{variant:"container-bare"},n.a.createElement(y.c,null,n.a.createElement(y.d,null,n.a.createElement(y.b,{label:"Analytics",tabIndex:"0"}))))},j=function(e){return n.a.createElement(y.f,{variant:"container-bare"},n.a.createElement(y.c,null,n.a.createElement(y.d,null,n.a.createElement(y.b,{label:"Option A",tabIndex:"0"})),n.a.createElement(y.d,null,n.a.createElement(y.b,{label:"Option B"}))))},O=[{id:"default",label:"Default",element:n.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n.a.createElement(o.a,null,n.a.createElement(o.b,{className:"slds-modal_large slds-list-builder","aria-labelledby":"id-of-modalheader-h1"},n.a.createElement(o.e,null,n.a.createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n.a.createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n.a.createElement(o.c,{className:"slds-grid slds-grow"},n.a.createElement("div",{className:"slds-grid slds-grid_vertical"},n.a.createElement(x,null),n.a.createElement(S,null,_.map((function(e,t){return n.a.createElement(w,{checked:!1,key:t,index:t+1,name:e.name,productCode:e.productCode,listPrice:e.listPrice,productFamily:e.productFamily})}))))),n.a.createElement(o.d,null,n.a.createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n.a.createElement("button",{className:"slds-button slds-button_brand"},"Next")))))}],k=[{id:"items-selected",label:"Items Selected",element:n.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n.a.createElement(o.a,null,n.a.createElement(o.b,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n.a.createElement(o.e,null,n.a.createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n.a.createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n.a.createElement(o.c,{className:"slds-grid slds-nowrap"},n.a.createElement("div",{className:"slds-col slds-grid slds-grid_vertical slds-nowrap"},n.a.createElement(x,{selectedFilters:n.a.createElement(C,null),itemsSelected:"1"}),n.a.createElement(S,null,_.map((function(e,t){return n.a.createElement(w,{key:t,index:t+1,checked:0===t,name:e.name,productCode:e.productCode,listPrice:e.listPrice,productFamily:e.productFamily})}))))),n.a.createElement(o.d,null,n.a.createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n.a.createElement("button",{className:"slds-button slds-button_brand"},"Next")))))},{id:"items-disabled",label:"Items Disabled",element:n.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n.a.createElement(o.a,null,n.a.createElement(o.b,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n.a.createElement(o.e,null,n.a.createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n.a.createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n.a.createElement(o.c,{className:"slds-grid slds-nowrap"},n.a.createElement("div",{className:"slds-col slds-grid slds-grid_vertical slds-nowrap"},n.a.createElement(x,{itemsSelected:"0"}),n.a.createElement(S,null,_.map((function(e,t){return n.a.createElement(w,{checked:!1,key:t,index:t+1,disabled:t%2==0\|\|null,name:e.name,productCode:e.productCode,listPrice:e.listPrice,productFamily:e.productFamily})}))))),n.a.createElement(o.d,null,n.a.createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n.a.createElement("button",{className:"slds-button slds-button_brand"},"Next")))))},{id:"items-default-selected",label:"Items Default Selected",element:n.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n.a.createElement(o.a,null,n.a.createElement(o.b,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n.a.createElement(o.e,null,n.a.createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n.a.createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n.a.createElement(o.c,{className:"slds-grid slds-nowrap"},n.a.createElement("div",{className:"slds-col slds-grid slds-grid_vertical slds-nowrap"},n.a.createElement(x,{itemsSelected:"0"}),n.a.createElement(S,null,_.map((function(e,t){return n.a.createElement(w,{key:t,index:t+1,checked:t%2==1,disabled:t%2==1\|\|null,name:e.name,productCode:e.productCode,listPrice:e.listPrice,productFamily:e.productFamily})}))))),n.a.createElement(o.d,null,n.a.createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n.a.createElement("button",{className:"slds-button slds-button_brand"},"Next")))))}],F=[{id:"two-column-with-hidden-header",label:"Two Column with Hidden Header",element:n.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n.a.createElement(o.a,null,n.a.createElement(o.b,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n.a.createElement(o.e,null,n.a.createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n.a.createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n.a.createElement(o.c,{className:"slds-grid slds-nowrap"},n.a.createElement("div",{className:"slds-col slds-grid slds-grid_vertical slds-nowrap"},n.a.createElement(x,{itemsSelected:"0"}),n.a.createElement(P,{hasHiddenHeader:!0},_.map((function(e,t){return n.a.createElement(A,{checked:!1,key:t,index:t+1,name:e.name})}))))),n.a.createElement(o.d,null,n.a.createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n.a.createElement("button",{className:"slds-button slds-button_brand"},"Next")))))},{id:"filtered",label:"Filtered Results",element:n.a.createElement("div",{className:"demo-only demo-only_viewport",style:{height:"640px"}},n.a.createElement(o.a,null,n.a.createElement(o.b,{className:"slds-modal_large","aria-labelledby":"id-of-modalheader-h1"},n.a.createElement(o.e,null,n.a.createElement("h1",{id:"id-of-modalheader-h1",className:"slds-text-heading_medium"},"Add products"),n.a.createElement("p",{className:"slds-m-top_x-small"},"Pricebook: Salesforce Products")),n.a.createElement(o.c,{className:"slds-grid slds-grow"},n.a.createElement("div",{className:"slds-grid slds-grid_vertical"},n.a.createElement(x,{selectedFilters:n.a.createElement(j,null),itemsSelected:"2"}),n.a.createElement(S,null,n.a.createElement(w,{checked:!1,index:1,name:_[0].name,productCode:_[0].productCode,listPrice:_[0].listPrice,productFamily:_[0].productFamily})))),n.a.createElement(o.d,null,n.a.createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),n.a.createElement("button",{className:"slds-button slds-button_brand"},"Next")))))}],T=r.c.h2,I=r.c.h3,L=r.c.p,H=function(){return Object(l.createElement)(r.b,{},Object(l.createElement)("div",{className:"doc lead"},"The List Builder is a quick, visual and efficient ‘shopping cart’ approach to adding multiple items to a parent object."),Object(l.createElement)(s.a,{exampleOnly:!0},Object(c.f)(O)),T({id:"About-List-Builder"},"About List Builder"),L({},"The List builder relies heavily on utility classes to piece together the layout so please pay close attention to the markup and classes."),T({id:"Base"},"Base"),Object(l.createElement)(s.a,null,Object(c.f)(O)),T({id:"States"},"States"),I({id:"Items-Selected"},"Items Selected"),Object(l.createElement)(s.a,null,Object(c.f)(k,"items-selected")),I({id:"Items-Disabled"},"Items Disabled"),Object(l.createElement)(s.a,null,Object(c.f)(k,"items-disabled")),I({id:"Items-Default-Selected"},"Items Default Selected"),Object(l.createElement)(s.a,null,Object(c.f)(k,"items-default-selected")),T({id:"Examples"},"Examples"),I({id:"Two-Column-with-Hidden-Header"},"Two Column with Hidden Header"),Object(l.createElement)(s.a,null,Object(c.f)(F,"filtered")),I({id:"Filtered-Results"},"Filtered Results"),Object(l.createElement)(s.a,null,Object(c.f)(F,"two-column-with-hidden-header")))},D=function(){return Object(r.a)(H())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/lookups/docs.mdx.js"]=function(e){function t(t){for(var s,n,i=t[0],c=t[1],r=t[2],m=0,u=[];m<i.length;m++)n=i[m],Object.prototype.hasOwnProperty.call(o,n)&&o[n]&&u.push(o[n][0]),o[n]=0;for(s in c)Object.prototype.hasOwnProperty.call(c,s)&&(e[s]=c[s]);for(d&&d(t);u.length;)u.shift()();return l.push.apply(l,r\|\|[]),a()}function a(){for(var e,t=0;t<l.length;t++){for(var a=l[t],s=!0,i=1;i<a.length;i++){var c=a[i];0!==o[c]&&(s=!1)}s&&(l.splice(t--,1),e=n(n.s=a[0]))}return e}var s={},o={46:0},l=[];function n(t){if(s[t])return s[t].exports;var a=s[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,n),a.l=!0,a.exports}n.m=e,n.c=s,n.d=function(e,t,a){n.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(n.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)n.d(a,s,function(t){return e[t]}.bind(null,s));return a},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.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 r=0;r<i.length;r++)t(i[r]);var d=c;return l.push([735,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},735:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return T})),a.d(t,"getContents",(function(){return k}));var s=a(0),o=a.n(s),l=a(4),n=a(2),i=(a(28),a(45),a(14),a(1)),c=a(23),r=a(24),d=a(7),m=a(11),u=a(34),p=a(26),b=[{id:"default",label:"Default",element:o.a.createElement(c.b,{id:"combobox-id-1","aria-controls":"listbox-id-1",autocomplete:!0,inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",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(r.e,{id:"listbox-id-1",snapshot:p.b,type:"entity",count:3}),resultsType:"listbox",hasInteractions:!0})}],h=[{id:"focused",label:"Focused",element:o.a.createElement(c.b,{id:"combobox-id-2","aria-controls":"listbox-id-2",autocomplete:!0,inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",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(r.e,{id:"listbox-id-2",snapshot:p.b,type:"entity",count:3}),resultsType:"listbox",isOpen:!0,hasFocus:!0})},{id:"open-item-focused",label:"Open - Item Focused",element:o.a.createElement(c.b,{id:"combobox-id-3","aria-controls":"listbox-id-3",autocomplete:!0,inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",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(r.e,{id:"listbox-id-3",snapshot:p.c,type:"entity",count:3}),resultsType:"listbox","aria-activedescendant":"option1",isOpen:!0,hasFocus:!0})},{id:"displaying-options-based-on-input",label:"Displaying options based on user input",element:o.a.createElement(c.b,{id:"combobox-id-4","aria-controls":"listbox-id-4",autocomplete:!0,inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),value:"salesforce",results:o.a.createElement(r.e,{id:"listbox-id-4",snapshot:p.e,term:"salesforce",type:"entity",count:4}),resultsType:"listbox","aria-activedescendant":"option1",isOpen:!0,hasFocus:!0})},{id:"closed-option-selected",label:"Option Selected",element:o.a.createElement(c.b,{id:"combobox-id-5","aria-controls":"listbox-id-5",inputIconPosition:"left-right",leftInputIcon:o.a.createElement(u.a,{symbol:"account",className:"slds-icon_small",containerClassName:"slds-combobox__input-entity-icon",assistiveText:"Account",title:"Account"}),rightInputIcon:o.a.createElement(d.b,{className:"slds-input__icon slds-input__icon_right",symbol:"close",title:"Remove selected option",assistiveText:"Remove selected option"}),results:o.a.createElement(r.e,{id:"listbox-id-5",snapshot:p.b,type:"entity",count:2}),resultsType:"listbox",hasSelection:!0,value:"Salesforce.com, Inc.",selectOnly:!0})}],y=a(10),E=a(21),x=[{id:"default",label:"Default",element:o.a.createElement("div",{className:"demo-only",style:{height:"640px"}},o.a.createElement(E.a,null,o.a.createElement(E.b,{className:"slds-modal_large"},o.a.createElement(E.e,null,o.a.createElement("h1",{className:"slds-text-heading_medium"},"Account name")),o.a.createElement(E.c,null,o.a.createElement("div",{className:"slds-lookup","data-select":"multi","data-scope":"single","data-typeahead":"true"},o.a.createElement("div",{className:"slds-form-element slds-p-top_medium slds-p-horizontal_medium slds-m-bottom_small"},o.a.createElement("label",{className:"slds-form-element__label",htmlFor:"lookup"},"Accounts"),o.a.createElement("div",{className:"slds-form-element__control slds-input-has-icon slds-input-has-icon_right"},o.a.createElement(y.a,{className:"slds-icon slds-input__icon slds-icon-text-default",sprite:"utility",symbol:"search"}),o.a.createElement("input",{id:"lookup",className:"slds-input",type:"text",role:"combobox","aria-activedescendant":"","aria-autocomplete":"list","aria-controls":"lookup-grouped-table-id-1","aria-haspopup":"listbox","aria-expanded":"true"}))),o.a.createElement("table",{className:"slds-table slds-table_bordered slds-table_cell-buffer slds-no-row-hover",role:"listbox",id:"lookup-grouped-table-id-1","aria-label":"Example table for advanced modal lookup"},o.a.createElement("thead",null,o.a.createElement("tr",null,o.a.createElement("th",{colSpan:"4",scope:"col"},o.a.createElement("div",{className:"slds-float_right"},o.a.createElement(d.b,{className:"slds-button_icon slds-button_icon-x-small",symbol:"filterList",assistiveText:"Filter List",title:"Filter List"}),o.a.createElement(d.b,{className:"slds-button_icon slds-button_icon-x-small",symbol:"sort",assistiveText:"Sort",title:"Sort"})),"5 Results, sorted by relevancy")),o.a.createElement("tr",null,o.a.createElement("th",{scope:"col"},o.a.createElement("div",{className:"slds-truncate",title:"Account Name"},"Account Name")),o.a.createElement("th",{scope:"col"},o.a.createElement("div",{className:"slds-truncate",title:"Location"},"Location")),o.a.createElement("th",{scope:"col"},o.a.createElement("div",{className:"slds-truncate",title:"Secondary Column"},"Secondary Column")),o.a.createElement("th",{scope:"col"},o.a.createElement("div",{className:"slds-truncate",title:"Tertiary Column"},"Tertiary Column")))),o.a.createElement("tbody",null,o.a.createElement("tr",null,o.a.createElement("th",{scope:"row"},o.a.createElement("a",{id:"s01",href:"#",onClick:function(e){return e.preventDefault()},role:"option"},o.a.createElement("div",{className:"slds-truncate",title:"Acme Landscape"},o.a.createElement(y.a,{className:"slds-icon slds-icon-standard-account slds-icon_small slds-m-right_x-small",sprite:"standard",symbol:"account"}),"Acme Landscape"))),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Seattle, WA"},"Seattle, WA")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Secondary Field"},"Secondary Field")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Tertiary Field"},"Tertiary Field"))),o.a.createElement("tr",null,o.a.createElement("th",{scope:"row"},o.a.createElement("a",{id:"s02",href:"#",onClick:function(e){return e.preventDefault()},role:"option"},o.a.createElement("div",{className:"slds-truncate",title:"ACME Construction"},o.a.createElement(y.a,{className:"slds-icon slds-icon-standard-account slds-icon_small slds-m-right_x-small",sprite:"standard",symbol:"account"}),"ACME Construction"))),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"San Francisco, CA"},"San Francisco, CA")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Secondary Field"},"Secondary Field")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Tertiary Field"},"Tertiary Field"))),o.a.createElement("tr",null,o.a.createElement("th",{scope:"row"},o.a.createElement("a",{id:"s03",href:"#",onClick:function(e){return e.preventDefault()},role:"option"},o.a.createElement("div",{className:"slds-truncate",title:"Action Sports"},o.a.createElement(y.a,{className:"slds-icon slds-icon-standard-account slds-icon_small slds-m-right_x-small",sprite:"standard",symbol:"account"}),"Action Sports"))),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Madison, WI"},"Madison, WI")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Secondary Field"},"Secondary Field")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Tertiary Field"},"Tertiary Field"))),o.a.createElement("tr",null,o.a.createElement("th",{scope:"row"},o.a.createElement("a",{id:"s04",href:"#",onClick:function(e){return e.preventDefault()},role:"option"},o.a.createElement("div",{className:"slds-truncate",title:"Moderno Bistro"},o.a.createElement(y.a,{className:"slds-icon slds-icon-standard-account slds-icon_small slds-m-right_x-small",sprite:"standard",symbol:"account"}),"Moderno Bistro"))),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Acton, OH"},"Acton, OH")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Secondary Field"},"Secondary Field")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Tertiary Field"},"Tertiary Field"))),o.a.createElement("tr",null,o.a.createElement("th",{scope:"row"},o.a.createElement("a",{id:"s05",href:"#",onClick:function(e){return e.preventDefault()},role:"option"},o.a.createElement("div",{className:"slds-truncate",title:"Cozy Kitchen"},o.a.createElement(y.a,{className:"slds-icon slds-icon-standard-account slds-icon_small slds-m-right_x-small",sprite:"standard",symbol:"account"}),"Cozy Kitchen"))),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Acton, CA"},"Acton, CA")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Secondary Field"},"Secondary Field")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Tertiary Field"},"Tertiary Field"))))))),o.a.createElement(E.d,{className:"slds-modal__footer_directional"},o.a.createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),o.a.createElement("button",{className:"slds-button slds-button_neutral"},"New Account")))))}],f=a(57),_=a(70),v=[{id:"default",label:"Default",element:o.a.createElement(c.a,{id:"combobox-id-1","aria-controls":"listbox-id-1",comboboxID:"primary-combobox-id-1",autocomplete:!0,results:o.a.createElement(r.e,{id:"listbox-id-1",snapshot:p.b,type:"entity",count:4}),resultsType:"listbox",addon:o.a.createElement(f.b,{id:i.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",hasInteractions:!0,comboboxAriaControls:"primary-combobox-id-1"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right"}),hasInteractions:!0})}],g=[{id:"focused",label:"Focused",element:o.a.createElement(c.a,{id:"combobox-id-1","aria-controls":"listbox-id-1",comboboxID:"primary-combobox-id-1",autocomplete:!0,results:o.a.createElement(r.e,{id:"listbox-id-1",snapshot:p.b,type:"entity",count:4}),resultsType:"listbox",addon:o.a.createElement(f.b,{id:i.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",hasInteractions:!0,comboboxAriaControls:"primary-combobox-id-1"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right"}),isOpen:!0,hasFocus:!0})},{id:"open-item-focused",label:"Open - Item Focused",element:o.a.createElement(c.a,{id:"combobox-id-2","aria-controls":"listbox-id-2",comboboxID:"primary-combobox-id-2",autocomplete:!0,results:o.a.createElement(r.e,{id:"listbox-id-2",snapshot:p.c,type:"entity",count:4}),resultsType:"listbox","aria-activedescendant":"option1",addon:o.a.createElement(f.b,{id:i.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",hasInteractions:!0,comboboxAriaControls:"primary-combobox-id-2"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right"}),isOpen:!0,hasFocus:!0})},{id:"options-selected",label:"Option(s) Selected",element:o.a.createElement(c.a,{id:"combobox-id-3","aria-controls":"listbox-id-3",comboboxID:"primary-combobox-id-3",autocomplete:!0,results:o.a.createElement(r.e,{id:"listbox-id-3",snapshot:p.b,type:"entity",count:4}),resultsType:"listbox",hasFocus:!0,addon:o.a.createElement(f.b,{id:i.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-combobox-id-3"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right"}),hasSelection:!0,listboxOfSelections:o.a.createElement(_.a,{snapshot:p.f,count:2})})},{id:"focused-options-selected",label:"Focused - Option(s) Selected",element:o.a.createElement(c.a,{id:"combobox-id-4","aria-controls":"listbox-id-4",comboboxID:"primary-combobox-id-4",autocomplete:!0,results:o.a.createElement(r.e,{id:"listbox-id-4",snapshot:p.b,type:"entity",count:4}),resultsType:"listbox",isOpen:!0,hasFocus:!0,addon:o.a.createElement(f.b,{id:i.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-combobox-id-4"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right"}),hasSelection:!0,listboxOfSelections:o.a.createElement(_.a,{snapshot:p.f,count:2})})}],N=l.c.a,S=l.c.code,O=l.c.h2,I=l.c.h3,F=l.c.li,C=l.c.p,j=l.c.strong,A=l.c.ul,T=function(){return Object(s.createElement)(l.b,{},Object(s.createElement)("div",{className:"doc lead"},"Lookup is an autocomplete combobox that will search against a database object."),Object(s.createElement)(n.a,{demoStyles:"height: 15rem;",exampleOnly:!0},Object(i.f)(h,"displaying-options-based-on-input")),O({id:"About-Lookups"},"About Lookups"),C({},j({},"Note")," — A lookup is a combobox component, please find implementation documentation under the ",N({href:"/components/combobox/#Base-Combobox"},"combobox component"),"."),C({},"The lookup can parse through single or multi scoped datasets. The parsed dataset can be filtered by single or multi option selects."),C({},"You can find the lookup component throughout most data fields that allow inline inputs. Most commonly used on ",j({},"record home")," and ",j({},"object home"),"."),I({id:"Accessibility"},"Accessibility"),C({},"Lookups allow the user to have dual keyboard focus: while focus in the input search field, the user can type text into the field and simultaneously use arrow keys to navigate up and down the results list. Use the appropriate ",j({},"ARIA")," attributes in your markup in order to effectively communicate the relationship between the input field and the results list to users of assistive technology."),C({},j({},"Expected markup:")),A({},F({},"A Combobox must come with an associated ",S({},"label")," element, with an appropriate ",S({},"for")," attribute"),F({},S({},"slds-combobox")," acts as the root node to the composite Combobox widget. It takes the ",S({},'role="combobox"')," attribute as a result",A({},F({},S({},'aria-haspopup="listbox"')," attribute is then applied to indicate the Combobox will display a popup, of type ",S({},"listbox")),F({},S({},'aria-expanded="true\|false"')," attribute is applied to describe whether the popup of ",S({},"listbox")," is currently visible or not"))),F({},S({},"aria-activedescendant")," must be set to the currently selected option within the list"),F({},S({},'role="listbox"')," must be added to the list of results, each result should have ",S({},'role="option"'))),C({},j({},"Expected keyboard interactions:")),A({},F({},S({},"Up")," and ",S({},"Down")," arrow keys to cycle through the available options in the list, also updates ",S({},"aria-activedescendant")," on the input"),F({},S({},"Enter")," selects the current option and collapses the list"),F({},S({},"Escape")," collapses the list"),F({},"Character keys jumps to the first option with those characters")),O({id:"Base"},"Base"),Object(s.createElement)(n.a,{demoStyles:"height: 13rem;"},Object(i.f)(b)),O({id:"States"},"States"),I({id:"Focused"},"Focused"),Object(s.createElement)(n.a,{demoStyles:"height: 13rem;"},Object(i.f)(h,"focused")),I({id:"Open-Item-Focused"},"Open - Item Focused"),Object(s.createElement)(n.a,{demoStyles:"height: 13rem;"},Object(i.f)(h,"open-item-focused")),I({id:"Displaying-options-based-on-user-input"},"Displaying options based on user input"),Object(s.createElement)(n.a,{demoStyles:"height: 14rem;"},Object(i.f)(h,"displaying-options-based-on-input")),I({id:"Option-Selected"},"Option Selected"),Object(s.createElement)(n.a,null,Object(i.f)(h,"closed-option-selected")),O({id:"Grouped"},"Grouped"),Object(s.createElement)(n.a,{isViewport:!0},Object(i.f)(x)),O({id:"Multi-Entity"},"Multi Entity"),Object(s.createElement)(n.a,{demoStyles:"height: 17rem;"},Object(i.f)(v)),O({id:"States-2"},"States"),I({id:"Focused-2"},"Focused"),Object(s.createElement)(n.a,{demoStyles:"height: 15rem;"},Object(i.f)(g,"focused")),I({id:"Open-Item-Focused-2"},"Open - Item Focused"),Object(s.createElement)(n.a,{demoStyles:"height: 15rem;"},Object(i.f)(g,"open-item-focused")),I({id:"Option(s)-Selected"},"Option(s) Selected"),Object(s.createElement)(n.a,null,Object(i.f)(g,"options-selected")),I({id:"Focused-Option(s)-Selected"},"Focused - Option(s) Selected"),Object(s.createElement)(n.a,{demoStyles:"height: 15rem;"},Object(i.f)(g,"focused-options-selected")))},k=function(){return Object(l.a)(T())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/lookups/docs.mdx.js"]=function(e){function t(t){for(var s,n,i=t[0],c=t[1],r=t[2],m=0,u=[];m<i.length;m++)n=i[m],Object.prototype.hasOwnProperty.call(o,n)&&o[n]&&u.push(o[n][0]),o[n]=0;for(s in c)Object.prototype.hasOwnProperty.call(c,s)&&(e[s]=c[s]);for(d&&d(t);u.length;)u.shift()();return l.push.apply(l,r\|\|[]),a()}function a(){for(var e,t=0;t<l.length;t++){for(var a=l[t],s=!0,i=1;i<a.length;i++){var c=a[i];0!==o[c]&&(s=!1)}s&&(l.splice(t--,1),e=n(n.s=a[0]))}return e}var s={},o={46:0},l=[];function n(t){if(s[t])return s[t].exports;var a=s[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,n),a.l=!0,a.exports}n.m=e,n.c=s,n.d=function(e,t,a){n.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(n.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)n.d(a,s,function(t){return e[t]}.bind(null,s));return a},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.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 r=0;r<i.length;r++)t(i[r]);var d=c;return l.push([735,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},735:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return T})),a.d(t,"getContents",(function(){return k}));var s=a(0),o=a.n(s),l=a(4),n=a(2),i=(a(29),a(45),a(14),a(1)),c=a(23),r=a(24),d=a(7),m=a(11),u=a(35),p=a(26),b=[{id:"default",label:"Default",element:o.a.createElement(c.b,{id:"combobox-id-1","aria-controls":"listbox-id-1",autocomplete:!0,inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",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(r.e,{id:"listbox-id-1",snapshot:p.b,type:"entity",count:3}),resultsType:"listbox",hasInteractions:!0})}],h=[{id:"focused",label:"Focused",element:o.a.createElement(c.b,{id:"combobox-id-2","aria-controls":"listbox-id-2",autocomplete:!0,inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",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(r.e,{id:"listbox-id-2",snapshot:p.b,type:"entity",count:3}),resultsType:"listbox",isOpen:!0,hasFocus:!0})},{id:"open-item-focused",label:"Open - Item Focused",element:o.a.createElement(c.b,{id:"combobox-id-3","aria-controls":"listbox-id-3",autocomplete:!0,inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",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(r.e,{id:"listbox-id-3",snapshot:p.c,type:"entity",count:3}),resultsType:"listbox","aria-activedescendant":"option1",isOpen:!0,hasFocus:!0})},{id:"displaying-options-based-on-input",label:"Displaying options based on user input",element:o.a.createElement(c.b,{id:"combobox-id-4","aria-controls":"listbox-id-4",autocomplete:!0,inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),value:"salesforce",results:o.a.createElement(r.e,{id:"listbox-id-4",snapshot:p.e,term:"salesforce",type:"entity",count:4}),resultsType:"listbox","aria-activedescendant":"option1",isOpen:!0,hasFocus:!0})},{id:"closed-option-selected",label:"Option Selected",element:o.a.createElement(c.b,{id:"combobox-id-5","aria-controls":"listbox-id-5",inputIconPosition:"left-right",leftInputIcon:o.a.createElement(u.a,{symbol:"account",className:"slds-icon_small",containerClassName:"slds-combobox__input-entity-icon",assistiveText:"Account",title:"Account"}),rightInputIcon:o.a.createElement(d.b,{className:"slds-input__icon slds-input__icon_right",symbol:"close",title:"Remove selected option",assistiveText:"Remove selected option"}),results:o.a.createElement(r.e,{id:"listbox-id-5",snapshot:p.b,type:"entity",count:2}),resultsType:"listbox",hasSelection:!0,value:"Salesforce.com, Inc.",selectOnly:!0})}],y=a(10),E=a(21),x=[{id:"default",label:"Default",element:o.a.createElement("div",{className:"demo-only",style:{height:"640px"}},o.a.createElement(E.a,null,o.a.createElement(E.b,{className:"slds-modal_large"},o.a.createElement(E.e,null,o.a.createElement("h1",{className:"slds-text-heading_medium"},"Account name")),o.a.createElement(E.c,null,o.a.createElement("div",{className:"slds-lookup","data-select":"multi","data-scope":"single","data-typeahead":"true"},o.a.createElement("div",{className:"slds-form-element slds-p-top_medium slds-p-horizontal_medium slds-m-bottom_small"},o.a.createElement("label",{className:"slds-form-element__label",htmlFor:"lookup"},"Accounts"),o.a.createElement("div",{className:"slds-form-element__control slds-input-has-icon slds-input-has-icon_right"},o.a.createElement(y.a,{className:"slds-icon slds-input__icon slds-icon-text-default",sprite:"utility",symbol:"search"}),o.a.createElement("input",{id:"lookup",className:"slds-input",type:"text",role:"combobox","aria-activedescendant":"","aria-autocomplete":"list","aria-controls":"lookup-grouped-table-id-1","aria-haspopup":"listbox","aria-expanded":"true"}))),o.a.createElement("table",{className:"slds-table slds-table_bordered slds-table_cell-buffer slds-no-row-hover",role:"listbox",id:"lookup-grouped-table-id-1","aria-label":"Example table for advanced modal lookup"},o.a.createElement("thead",null,o.a.createElement("tr",null,o.a.createElement("th",{colSpan:"4",scope:"col"},o.a.createElement("div",{className:"slds-float_right"},o.a.createElement(d.b,{className:"slds-button_icon slds-button_icon-x-small",symbol:"filterList",assistiveText:"Filter List",title:"Filter List"}),o.a.createElement(d.b,{className:"slds-button_icon slds-button_icon-x-small",symbol:"sort",assistiveText:"Sort",title:"Sort"})),"5 Results, sorted by relevancy")),o.a.createElement("tr",null,o.a.createElement("th",{scope:"col"},o.a.createElement("div",{className:"slds-truncate",title:"Account Name"},"Account Name")),o.a.createElement("th",{scope:"col"},o.a.createElement("div",{className:"slds-truncate",title:"Location"},"Location")),o.a.createElement("th",{scope:"col"},o.a.createElement("div",{className:"slds-truncate",title:"Secondary Column"},"Secondary Column")),o.a.createElement("th",{scope:"col"},o.a.createElement("div",{className:"slds-truncate",title:"Tertiary Column"},"Tertiary Column")))),o.a.createElement("tbody",null,o.a.createElement("tr",null,o.a.createElement("th",{scope:"row"},o.a.createElement("a",{id:"s01",href:"#",onClick:function(e){return e.preventDefault()},role:"option"},o.a.createElement("div",{className:"slds-truncate",title:"Acme Landscape"},o.a.createElement(y.a,{className:"slds-icon slds-icon-standard-account slds-icon_small slds-m-right_x-small",sprite:"standard",symbol:"account"}),"Acme Landscape"))),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Seattle, WA"},"Seattle, WA")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Secondary Field"},"Secondary Field")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Tertiary Field"},"Tertiary Field"))),o.a.createElement("tr",null,o.a.createElement("th",{scope:"row"},o.a.createElement("a",{id:"s02",href:"#",onClick:function(e){return e.preventDefault()},role:"option"},o.a.createElement("div",{className:"slds-truncate",title:"ACME Construction"},o.a.createElement(y.a,{className:"slds-icon slds-icon-standard-account slds-icon_small slds-m-right_x-small",sprite:"standard",symbol:"account"}),"ACME Construction"))),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"San Francisco, CA"},"San Francisco, CA")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Secondary Field"},"Secondary Field")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Tertiary Field"},"Tertiary Field"))),o.a.createElement("tr",null,o.a.createElement("th",{scope:"row"},o.a.createElement("a",{id:"s03",href:"#",onClick:function(e){return e.preventDefault()},role:"option"},o.a.createElement("div",{className:"slds-truncate",title:"Action Sports"},o.a.createElement(y.a,{className:"slds-icon slds-icon-standard-account slds-icon_small slds-m-right_x-small",sprite:"standard",symbol:"account"}),"Action Sports"))),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Madison, WI"},"Madison, WI")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Secondary Field"},"Secondary Field")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Tertiary Field"},"Tertiary Field"))),o.a.createElement("tr",null,o.a.createElement("th",{scope:"row"},o.a.createElement("a",{id:"s04",href:"#",onClick:function(e){return e.preventDefault()},role:"option"},o.a.createElement("div",{className:"slds-truncate",title:"Moderno Bistro"},o.a.createElement(y.a,{className:"slds-icon slds-icon-standard-account slds-icon_small slds-m-right_x-small",sprite:"standard",symbol:"account"}),"Moderno Bistro"))),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Acton, OH"},"Acton, OH")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Secondary Field"},"Secondary Field")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Tertiary Field"},"Tertiary Field"))),o.a.createElement("tr",null,o.a.createElement("th",{scope:"row"},o.a.createElement("a",{id:"s05",href:"#",onClick:function(e){return e.preventDefault()},role:"option"},o.a.createElement("div",{className:"slds-truncate",title:"Cozy Kitchen"},o.a.createElement(y.a,{className:"slds-icon slds-icon-standard-account slds-icon_small slds-m-right_x-small",sprite:"standard",symbol:"account"}),"Cozy Kitchen"))),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Acton, CA"},"Acton, CA")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Secondary Field"},"Secondary Field")),o.a.createElement("td",null,o.a.createElement("div",{className:"slds-truncate",title:"Tertiary Field"},"Tertiary Field"))))))),o.a.createElement(E.d,{className:"slds-modal__footer_directional"},o.a.createElement("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),o.a.createElement("button",{className:"slds-button slds-button_neutral"},"New Account")))))}],f=a(57),_=a(70),v=[{id:"default",label:"Default",element:o.a.createElement(c.a,{id:"combobox-id-1","aria-controls":"listbox-id-1",comboboxID:"primary-combobox-id-1",autocomplete:!0,results:o.a.createElement(r.e,{id:"listbox-id-1",snapshot:p.b,type:"entity",count:4}),resultsType:"listbox",addon:o.a.createElement(f.b,{id:i.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",hasInteractions:!0,comboboxAriaControls:"primary-combobox-id-1"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right"}),hasInteractions:!0})}],g=[{id:"focused",label:"Focused",element:o.a.createElement(c.a,{id:"combobox-id-1","aria-controls":"listbox-id-1",comboboxID:"primary-combobox-id-1",autocomplete:!0,results:o.a.createElement(r.e,{id:"listbox-id-1",snapshot:p.b,type:"entity",count:4}),resultsType:"listbox",addon:o.a.createElement(f.b,{id:i.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",hasInteractions:!0,comboboxAriaControls:"primary-combobox-id-1"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right"}),isOpen:!0,hasFocus:!0})},{id:"open-item-focused",label:"Open - Item Focused",element:o.a.createElement(c.a,{id:"combobox-id-2","aria-controls":"listbox-id-2",comboboxID:"primary-combobox-id-2",autocomplete:!0,results:o.a.createElement(r.e,{id:"listbox-id-2",snapshot:p.c,type:"entity",count:4}),resultsType:"listbox","aria-activedescendant":"option1",addon:o.a.createElement(f.b,{id:i.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",hasInteractions:!0,comboboxAriaControls:"primary-combobox-id-2"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right"}),isOpen:!0,hasFocus:!0})},{id:"options-selected",label:"Option(s) Selected",element:o.a.createElement(c.a,{id:"combobox-id-3","aria-controls":"listbox-id-3",comboboxID:"primary-combobox-id-3",autocomplete:!0,results:o.a.createElement(r.e,{id:"listbox-id-3",snapshot:p.b,type:"entity",count:4}),resultsType:"listbox",hasFocus:!0,addon:o.a.createElement(f.b,{id:i.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-combobox-id-3"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right"}),hasSelection:!0,listboxOfSelections:o.a.createElement(_.a,{snapshot:p.f,count:2})})},{id:"focused-options-selected",label:"Focused - Option(s) Selected",element:o.a.createElement(c.a,{id:"combobox-id-4","aria-controls":"listbox-id-4",comboboxID:"primary-combobox-id-4",autocomplete:!0,results:o.a.createElement(r.e,{id:"listbox-id-4",snapshot:p.b,type:"entity",count:4}),resultsType:"listbox",isOpen:!0,hasFocus:!0,addon:o.a.createElement(f.b,{id:i.d.uniqueId("combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-combobox-id-4"}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"search",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right"}),hasSelection:!0,listboxOfSelections:o.a.createElement(_.a,{snapshot:p.f,count:2})})}],N=l.c.a,S=l.c.code,O=l.c.h2,I=l.c.h3,F=l.c.li,C=l.c.p,j=l.c.strong,A=l.c.ul,T=function(){return Object(s.createElement)(l.b,{},Object(s.createElement)("div",{className:"doc lead"},"Lookup is an autocomplete combobox that will search against a database object."),Object(s.createElement)(n.a,{demoStyles:"height: 15rem;",exampleOnly:!0},Object(i.f)(h,"displaying-options-based-on-input")),O({id:"About-Lookups"},"About Lookups"),C({},j({},"Note")," — A lookup is a combobox component, please find implementation documentation under the ",N({href:"/components/combobox/#Base-Combobox"},"combobox component"),"."),C({},"The lookup can parse through single or multi scoped datasets. The parsed dataset can be filtered by single or multi option selects."),C({},"You can find the lookup component throughout most data fields that allow inline inputs. Most commonly used on ",j({},"record home")," and ",j({},"object home"),"."),I({id:"Accessibility"},"Accessibility"),C({},"Lookups allow the user to have dual keyboard focus: while focus in the input search field, the user can type text into the field and simultaneously use arrow keys to navigate up and down the results list. Use the appropriate ",j({},"ARIA")," attributes in your markup in order to effectively communicate the relationship between the input field and the results list to users of assistive technology."),C({},j({},"Expected markup:")),A({},F({},"A Combobox must come with an associated ",S({},"label")," element, with an appropriate ",S({},"for")," attribute"),F({},S({},"slds-combobox")," acts as the root node to the composite Combobox widget. It takes the ",S({},'role="combobox"')," attribute as a result",A({},F({},S({},'aria-haspopup="listbox"')," attribute is then applied to indicate the Combobox will display a popup, of type ",S({},"listbox")),F({},S({},'aria-expanded="true\|false"')," attribute is applied to describe whether the popup of ",S({},"listbox")," is currently visible or not"))),F({},S({},"aria-activedescendant")," must be set to the currently selected option within the list"),F({},S({},'role="listbox"')," must be added to the list of results, each result should have ",S({},'role="option"'))),C({},j({},"Expected keyboard interactions:")),A({},F({},S({},"Up")," and ",S({},"Down")," arrow keys to cycle through the available options in the list, also updates ",S({},"aria-activedescendant")," on the input"),F({},S({},"Enter")," selects the current option and collapses the list"),F({},S({},"Escape")," collapses the list"),F({},"Character keys jumps to the first option with those characters")),O({id:"Base"},"Base"),Object(s.createElement)(n.a,{demoStyles:"height: 13rem;"},Object(i.f)(b)),O({id:"States"},"States"),I({id:"Focused"},"Focused"),Object(s.createElement)(n.a,{demoStyles:"height: 13rem;"},Object(i.f)(h,"focused")),I({id:"Open-Item-Focused"},"Open - Item Focused"),Object(s.createElement)(n.a,{demoStyles:"height: 13rem;"},Object(i.f)(h,"open-item-focused")),I({id:"Displaying-options-based-on-user-input"},"Displaying options based on user input"),Object(s.createElement)(n.a,{demoStyles:"height: 14rem;"},Object(i.f)(h,"displaying-options-based-on-input")),I({id:"Option-Selected"},"Option Selected"),Object(s.createElement)(n.a,null,Object(i.f)(h,"closed-option-selected")),O({id:"Grouped"},"Grouped"),Object(s.createElement)(n.a,{isViewport:!0},Object(i.f)(x)),O({id:"Multi-Entity"},"Multi Entity"),Object(s.createElement)(n.a,{demoStyles:"height: 17rem;"},Object(i.f)(v)),O({id:"States-2"},"States"),I({id:"Focused-2"},"Focused"),Object(s.createElement)(n.a,{demoStyles:"height: 15rem;"},Object(i.f)(g,"focused")),I({id:"Open-Item-Focused-2"},"Open - Item Focused"),Object(s.createElement)(n.a,{demoStyles:"height: 15rem;"},Object(i.f)(g,"open-item-focused")),I({id:"Option(s)-Selected"},"Option(s) Selected"),Object(s.createElement)(n.a,null,Object(i.f)(g,"options-selected")),I({id:"Focused-Option(s)-Selected"},"Focused - Option(s) Selected"),Object(s.createElement)(n.a,{demoStyles:"height: 15rem;"},Object(i.f)(g,"focused-options-selected")))},k=function(){return Object(l.a)(T())}}});