npm - @salesforce-ux/design-system - Versions diffs - 2.17.0 → 2.17.4 - Mend

@salesforce-ux/design-system 2.17.0 → 2.17.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 (967) hide show

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/docked-form-footer/docs.mdx.js"]=function(e){function t(t){for(var r,a,l=t[0],i=t[1],c=t[2],d=0,b=[];d<l.length;d++)a=l[d],Object.prototype.hasOwnProperty.call(n,a)&&n[a]&&b.push(n[a][0]),n[a]=0;for(r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r]);for(u&&u(t);b.length;)b.shift()();return s.push.apply(s,c\|\|[]),o()}function o(){for(var e,t=0;t<s.length;t++){for(var o=s[t],r=!0,l=1;l<o.length;l++){var i=o[l];0!==n[i]&&(r=!1)}r&&(s.splice(t--,1),e=a(a.s=o[0]))}return e}var r={},n={28:0},s=[];function a(t){if(r[t])return r[t].exports;var o=r[t]={i:t,l:!1,exports:{}};return e[t].call(o.exports,o,o.exports,a),o.l=!0,o.exports}a.m=e,a.c=r,a.d=function(e,t,o){a.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:o})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(a.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)a.d(o,r,function(t){return e[t]}.bind(null,r));return o},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/assets/scripts/bundle/";var l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=l.push.bind(l);l.push=t,l=l.slice();for(var c=0;c<l.length;c++)t(l[c]);var u=i;return s.push([~~688~~,0]),o()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~688~~:function(e,t,o){"use strict";o.r(t),o.d(t,"getElement",(function(){return v})),o.d(t,"getContents",(function(){return y}));var r=o(0),n=o.n(r),s=o(4),a=o(2),l=(o(25),o(14),o(1)),i=o(7),c=o(59),u=o(72),d=l.d.uniqueId("dialog-heading-id-"),b=n.a.createElement("div",{className:"slds-docked-form-footer"},n.a.createElement("button",{type:"button",className:"slds-button slds-button_neutral"},"Cancel"),n.a.createElement("button",{type:"button",className:"slds-button slds-button_brand"},"Save")),p=[{id:"docked-form-footer-with-error",label:"With error(s)",element:n.a.createElement("div",{className:"slds-docked-form-footer"},n.a.createElement(i.b,{assistiveText:"Resolve error",className:"slds-button_icon slds-button_icon-error",iconClassName:"slds-button__icon_large",symbol:"error",title:"Resolve error"}),n.a.createElement("button",{type:"button",className:"slds-button slds-button_neutral"},"Cancel"),n.a.createElement("button",{type:"button",className:"slds-button slds-button_brand"},"Save"))},{id:"docked-form-footer-with-popover",label:"With error popover",element:n.a.createElement("div",{className:"slds-docked-form-footer"},n.a.createElement(i.b,{assistiveText:"Resolve error",className:"slds-button_icon slds-button_icon-error",iconClassName:"slds-button__icon_large",symbol:"error",title:"Resolve error"}),n.a.createElement("button",{type:"button",className:"slds-button slds-button_neutral"},"Cancel"),n.a.createElement("button",{type:"button",className:"slds-button slds-button_brand"},"Save"),n.a.createElement(c.a,{className:"slds-popover_error slds-nubbin_bottom-left",headingId:d,header:n.a.createElement(u.b,{headingId:d,title:"Resolve error",symbol:"error"}),closeButton:!0,inverse:!0,style:{position:"absolute",bottom:"56px",left:"50%",marginLeft:"62px",transform:"translateX(-50%)"}},n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",n.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Learn More"},"Learn More"))))}],f=s.c.h2,m=s.c.h3,h=s.c.p,v=function(){return Object(r.createElement)(s.b,{},Object(r.createElement)("div",{className:"lead doc"},"Docked form footer is used to dock form actions to the bottom of the viewport"),Object(r.createElement)(a.a,{exampleOnly:!0,isViewport:!0,demoStyles:"height: 180px;"},Object(l.f)(b)),f({id:"About-Docked-Form-footer"},"About Docked Form footer"),h({},"The popover should be positioned with JavaScript."),h({},"When errors are found within a form, the user will be notified with a popover with the page-level errors listed out."),m({id:"Accessibility"},"Accessibility"),h({},'Please provide a contextually specific title for the dialog with the aria-label attribute. e.g. "Acme Global edit form errors".'),f({id:"Base"},"Base"),Object(r.createElement)(a.a,{isViewport:!0,demoStyles:"height: 180px;"},Object(l.f)(b)),m({id:"With-Error(s)"},"With Error(s)"),Object(r.createElement)(a.a,{isViewport:!0,demoStyles:"height: 180px;"},Object(l.f)(p,"docked-form-footer-with-error")),m({id:"With-Error-Popover"},"With Error Popover"),Object(r.createElement)(a.a,{isViewport:!0,demoStyles:"height: 180px;"},Object(l.f)(p,"docked-form-footer-with-popover")))},y=function(){return Object(s.a)(v())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/docked-form-footer/docs.mdx.js"]=function(e){function t(t){for(var r,a,l=t[0],i=t[1],c=t[2],d=0,b=[];d<l.length;d++)a=l[d],Object.prototype.hasOwnProperty.call(n,a)&&n[a]&&b.push(n[a][0]),n[a]=0;for(r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r]);for(u&&u(t);b.length;)b.shift()();return s.push.apply(s,c\|\|[]),o()}function o(){for(var e,t=0;t<s.length;t++){for(var o=s[t],r=!0,l=1;l<o.length;l++){var i=o[l];0!==n[i]&&(r=!1)}r&&(s.splice(t--,1),e=a(a.s=o[0]))}return e}var r={},n={28:0},s=[];function a(t){if(r[t])return r[t].exports;var o=r[t]={i:t,l:!1,exports:{}};return e[t].call(o.exports,o,o.exports,a),o.l=!0,o.exports}a.m=e,a.c=r,a.d=function(e,t,o){a.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:o})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(a.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)a.d(o,r,function(t){return e[t]}.bind(null,r));return o},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/assets/scripts/bundle/";var l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=l.push.bind(l);l.push=t,l=l.slice();for(var c=0;c<l.length;c++)t(l[c]);var u=i;return s.push([689,0]),o()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},689:function(e,t,o){"use strict";o.r(t),o.d(t,"getElement",(function(){return v})),o.d(t,"getContents",(function(){return y}));var r=o(0),n=o.n(r),s=o(4),a=o(2),l=(o(26),o(14),o(1)),i=o(7),c=o(60),u=o(73),d=l.d.uniqueId("dialog-heading-id-"),b=n.a.createElement("div",{className:"slds-docked-form-footer"},n.a.createElement("button",{type:"button",className:"slds-button slds-button_neutral"},"Cancel"),n.a.createElement("button",{type:"button",className:"slds-button slds-button_brand"},"Save")),p=[{id:"docked-form-footer-with-error",label:"With error(s)",element:n.a.createElement("div",{className:"slds-docked-form-footer"},n.a.createElement(i.b,{assistiveText:"Resolve error",className:"slds-button_icon slds-button_icon-error",iconClassName:"slds-button__icon_large",symbol:"error",title:"Resolve error"}),n.a.createElement("button",{type:"button",className:"slds-button slds-button_neutral"},"Cancel"),n.a.createElement("button",{type:"button",className:"slds-button slds-button_brand"},"Save"))},{id:"docked-form-footer-with-popover",label:"With error popover",element:n.a.createElement("div",{className:"slds-docked-form-footer"},n.a.createElement(i.b,{assistiveText:"Resolve error",className:"slds-button_icon slds-button_icon-error",iconClassName:"slds-button__icon_large",symbol:"error",title:"Resolve error"}),n.a.createElement("button",{type:"button",className:"slds-button slds-button_neutral"},"Cancel"),n.a.createElement("button",{type:"button",className:"slds-button slds-button_brand"},"Save"),n.a.createElement(c.a,{className:"slds-popover_error slds-nubbin_bottom-left",headingId:d,header:n.a.createElement(u.b,{headingId:d,title:"Resolve error",symbol:"error"}),closeButton:!0,inverse:!0,style:{position:"absolute",bottom:"56px",left:"50%",marginLeft:"62px",transform:"translateX(-50%)"}},n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",n.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Learn More"},"Learn More"))))}],f=s.c.h2,m=s.c.h3,h=s.c.p,v=function(){return Object(r.createElement)(s.b,{},Object(r.createElement)("div",{className:"lead doc"},"Docked form footer is used to dock form actions to the bottom of the viewport"),Object(r.createElement)(a.a,{exampleOnly:!0,isViewport:!0,demoStyles:"height: 180px;"},Object(l.f)(b)),f({id:"About-Docked-Form-footer"},"About Docked Form footer"),h({},"The popover should be positioned with JavaScript."),h({},"When errors are found within a form, the user will be notified with a popover with the page-level errors listed out."),m({id:"Accessibility"},"Accessibility"),h({},'Please provide a contextually specific title for the dialog with the aria-label attribute. e.g. "Acme Global edit form errors".'),f({id:"Base"},"Base"),Object(r.createElement)(a.a,{isViewport:!0,demoStyles:"height: 180px;"},Object(l.f)(b)),m({id:"With-Error(s)"},"With Error(s)"),Object(r.createElement)(a.a,{isViewport:!0,demoStyles:"height: 180px;"},Object(l.f)(p,"docked-form-footer-with-error")),m({id:"With-Error-Popover"},"With Error Popover"),Object(r.createElement)(a.a,{isViewport:!0,demoStyles:"height: 180px;"},Object(l.f)(p,"docked-form-footer-with-popover")))},y=function(){return Object(s.a)(v())}}});

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

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

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/drop-zone/docs.mdx.js"]=function(e){function t(t){for(var a,l,c=t[0],s=t[1],i=t[2],m=0,u=[];m<c.length;m++)l=c[m],Object.prototype.hasOwnProperty.call(r,l)&&r[l]&&u.push(r[l][0]),r[l]=0;for(a in s)Object.prototype.hasOwnProperty.call(s,a)&&(e[a]=s[a]);for(d&&d(t);u.length;)u.shift()();return o.push.apply(o,i\|\|[]),n()}function n(){for(var e,t=0;t<o.length;t++){for(var n=o[t],a=!0,c=1;c<n.length;c++){var s=n[c];0!==r[s]&&(a=!1)}a&&(o.splice(t--,1),e=l(l.s=n[0]))}return e}var a={},r={30:0},o=[];function l(t){if(a[t])return a[t].exports;var n=a[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,l),n.l=!0,n.exports}l.m=e,l.c=a,l.d=function(e,t,n){l.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(l.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)l.d(n,a,function(t){return e[t]}.bind(null,a));return n},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=c.push.bind(c);c.push=t,c=c.slice();for(var i=0;i<c.length;i++)t(c[i]);var d=s;return o.push([~~700~~,0]),n()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~700~~:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return A})),n.d(t,"getContents",(function(){return S}));var a=n(0),r=n.n(a),o=n(4),l=n(2),c=(n(25),n(14),n(15)),s=n(5),i=n.n(s),d=n(11),m=n(77),u=n(7),p=n(55),b=n(13),h=n(3),E=n.n(h),O=function(e){return r.a.createElement("div",{className:"demo-only",style:{paddingTop:"2rem"}},e.children)};O.propTypes={children:E.a.node};var j=function(e){return r.a.createElement("div",{className:"demo-only demo-component",style:{width:"100%",height:"10rem"}},e.children)};j.propTypes={children:E.a.node};var f=function(e){return r.a.createElement("div",{className:i()("slds-drop-zone",{"slds-drop-zone_drag":e.isDragging})},e.children)};f.propTypes={isDragging:E.a.bool,children:E.a.node};var g=function(e){return r.a.createElement("div",{className:"slds-drop-zone_drag__slot"})},v=function(e){return r.a.createElement("div",{className:i()("slds-drop-zone__container",{"slds-is-hovered":e.isHovered}),tabIndex:"-1"},r.a.createElement(_,{isContainer:!0,headerText:"Component Name"}),e.children,e.hasActions&&r.a.createElement("div",{className:"slds-drop-zone__actions"},r.a.createElement(p.a,null,r.a.createElement(u.b,{className:"slds-button_icon-x-small",theme:"brand",symbol:"move",assistiveText:"Move",title:"Move"}),r.a.createElement(u.b,{className:"slds-button_icon-x-small",theme:"brand",symbol:"close",assistiveText:"Close",title:"Close"}))))};v.propTypes={hasActions:E.a.bool,isHovered:E.a.bool,children:E.a.node};var y=function(e){return r.a.createElement(d.a,{symbol:e.isContainer?"connected_apps":"builder",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-current-color",title:!1,assistiveText:!1})};y.propTypes={isContainer:E.a.bool};var _=function(e){return r.a.createElement("div",{className:i()("slds-drop-zone__label",{"slds-drop-zone__label_container":e.isContainer})},r.a.createElement(m.a,{figureLeft:r.a.createElement(y,{isContainer:e.isContainer}),flavor:"center"},e.isContainer?r.a.createElement("h2",null,r.a.createElement("button",{className:"slds-drop-zone__label_button slds-button_reset"},r.a.createElement("span",{className:"slds-assistive-text"},"Edit: "),r.a.createElement("span",null,e.headerText))):r.a.createElement("h2",null,e.headerText)))};_.propTypes={isContainer:E.a.bool,headerText:E.a.string};b.d,b.c,b.a,b.b,b.d,b.c,b.a,b.b,b.d,b.c,b.a,b.b,b.d,b.c,b.a,b.b,n(32),n(1);var x=o.c.h2,C=o.c.h3,w=o.c.li,D=o.c.p,T=o.c.strong,N=o.c.ul,A=function(){return Object(a.createElement)(o.b,{},Object(a.createElement)("div",{className:"lead doc"},"Screen building elements that surround areas where components can be placed. Drop Zones visually indicate to users where they may drag and drop components onto a page."),Object(a.createElement)(l.a,{exampleOnly:!0},Object(a.createElement)(f,null,Object(a.createElement)(j,null),Object(a.createElement)(v,{hasActions:!0,isHovered:!0},Object(a.createElement)(j,null)))),x({id:"Base-Drop-Zone"},"Base Drop Zone"),D({},"A Base Drop Zone outlines areas within a page where users may drag and drop a component. These create a template to guide users within a screen building experience."),Object(a.createElement)(c.a,{title:"Drop Zone - Base"},Object(a.createElement)(l.a,{toggleCode:!1},Object(a.createElement)(f,null,Object(a.createElement)(j,null)))),x({id:"Drag-Over-Drop-Zone"},"Drag Over Drop Zone"),D({},"When dragging a component, use the drag over drop zone to indicate to the user where the component will be placed when dropped."),Object(a.createElement)(c.a,{title:"Drop Zone - Drag Over"},Object(a.createElement)(l.a,null,Object(a.createElement)(O,null,Object(a.createElement)(f,{isDragging:!0},Object(a.createElement)(_,{headerText:"Content"}),Object(a.createElement)(j,null),Object(a.createElement)(g,null),Object(a.createElement)(j,null))))),C({id:"Insertion-Point"},"Insertion Point"),D({},"An insertion point is used to further communicate to the user the exact slot the component is being placed."),Object(a.createElement)(l.a,{toggleCode:!1},Object(a.createElement)(g,null)),D({},"The position of this element should be controlled by your implementation."),N({},w({},D({},T({},"When there are no components in the drop zone"),": The insertion point should be placed in the center.")),w({},D({},T({},"When there are components in the drop zone"),": The insertion point should be placed before or after components, to indicate where a new component will be placed relative to the ones already in the the drop zone."))),x({id:"Drop-Zone-Container"},"Drop Zone Container"),D({},"Use a drop zone container to highlight components within a drop zone. This provides a label for the component, as well as Button Icons to perform actions, such as moving the component and deleting the component from the screen."),Object(a.createElement)(c.a,{title:"Drop Zone - Container"},Object(a.createElement)(l.a,null,Object(a.createElement)(f,null,Object(a.createElement)(j,null),Object(a.createElement)(v,{hasActions:!0,isHovered:!0},Object(a.createElement)(j,null))))),x({id:"Example-Cards"},"Example - Cards"),Object(a.createElement)(c.a,{title:"Drop Zone - Cards Example"},Object(a.createElement)(l.a,null,Object(a.createElement)(O,null,Object(a.createElement)(f,null,Object(a.createElement)(v,{hasActions:!0},Object(a.createElement)(b.d,{className:"slds-m-bottom_small"},Object(a.createElement)(b.c,{title:"Accounts",showIcon:!0,symbol:"account"}),Object(a.createElement)(b.a,{hasPadding:!0},"Card Body"),Object(a.createElement)(b.b,{linkTabIndex:"-1"},"View All ",Object(a.createElement)("span",{className:"slds-assistive-text"},"Accounts")))),Object(a.createElement)(v,{hasActions:!0},Object(a.createElement)(b.d,{className:"slds-m-top_small"},Object(a.createElement)(b.c,{title:"Accounts",showIcon:!0,symbol:"account"}),Object(a.createElement)(b.a,{hasPadding:!0},"Card Body"),Object(a.createElement)(b.b,{linkTabIndex:"-1"},"View All ",Object(a.createElement)("span",{className:"slds-assistive-text"},"Accounts")))))))),x({id:"Example-Cards-Insertion"},"Example - Cards Insertion"),Object(a.createElement)(c.a,{title:"Drop Zone - Cards Insert Example"},Object(a.createElement)(l.a,null,Object(a.createElement)(O,null,Object(a.createElement)(f,{isDragging:!0},Object(a.createElement)(_,{headerText:"Content"}),Object(a.createElement)(v,{hasActions:!0},Object(a.createElement)(b.d,{className:"slds-m-bottom_small"},Object(a.createElement)(b.c,{title:"Accounts",showIcon:!0,symbol:"account"}),Object(a.createElement)(b.a,{hasPadding:!0},"Card Body"),Object(a.createElement)(b.b,{linkTabIndex:"-1"},"View All ",Object(a.createElement)("span",{className:"slds-assistive-text"},"Accounts")))),Object(a.createElement)(g,null),Object(a.createElement)(v,{hasActions:!0},Object(a.createElement)(b.d,{className:"slds-m-top_small"},Object(a.createElement)(b.c,{title:"Accounts",showIcon:!0,symbol:"account"}),Object(a.createElement)(b.a,{hasPadding:!0},"Card Body"),Object(a.createElement)(b.b,{linkTabIndex:"-1"},"View All ",Object(a.createElement)("span",{className:"slds-assistive-text"},"Accounts")))))))))},S=function(){return Object(o.a)(A())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/drop-zone/docs.mdx.js"]=function(e){function t(t){for(var a,l,c=t[0],s=t[1],i=t[2],m=0,u=[];m<c.length;m++)l=c[m],Object.prototype.hasOwnProperty.call(r,l)&&r[l]&&u.push(r[l][0]),r[l]=0;for(a in s)Object.prototype.hasOwnProperty.call(s,a)&&(e[a]=s[a]);for(d&&d(t);u.length;)u.shift()();return o.push.apply(o,i\|\|[]),n()}function n(){for(var e,t=0;t<o.length;t++){for(var n=o[t],a=!0,c=1;c<n.length;c++){var s=n[c];0!==r[s]&&(a=!1)}a&&(o.splice(t--,1),e=l(l.s=n[0]))}return e}var a={},r={30:0},o=[];function l(t){if(a[t])return a[t].exports;var n=a[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,l),n.l=!0,n.exports}l.m=e,l.c=a,l.d=function(e,t,n){l.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(l.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)l.d(n,a,function(t){return e[t]}.bind(null,a));return n},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=c.push.bind(c);c.push=t,c=c.slice();for(var i=0;i<c.length;i++)t(c[i]);var d=s;return o.push([701,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},701:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return A})),n.d(t,"getContents",(function(){return S}));var a=n(0),r=n.n(a),o=n(4),l=n(2),c=(n(26),n(14),n(15)),s=n(5),i=n.n(s),d=n(11),m=n(78),u=n(7),p=n(56),b=n(13),h=n(3),E=n.n(h),O=function(e){return r.a.createElement("div",{className:"demo-only",style:{paddingTop:"2rem"}},e.children)};O.propTypes={children:E.a.node};var j=function(e){return r.a.createElement("div",{className:"demo-only demo-component",style:{width:"100%",height:"10rem"}},e.children)};j.propTypes={children:E.a.node};var f=function(e){return r.a.createElement("div",{className:i()("slds-drop-zone",{"slds-drop-zone_drag":e.isDragging})},e.children)};f.propTypes={isDragging:E.a.bool,children:E.a.node};var g=function(e){return r.a.createElement("div",{className:"slds-drop-zone_drag__slot"})},v=function(e){return r.a.createElement("div",{className:i()("slds-drop-zone__container",{"slds-is-hovered":e.isHovered}),tabIndex:"-1"},r.a.createElement(_,{isContainer:!0,headerText:"Component Name"}),e.children,e.hasActions&&r.a.createElement("div",{className:"slds-drop-zone__actions"},r.a.createElement(p.a,null,r.a.createElement(u.b,{className:"slds-button_icon-x-small",theme:"brand",symbol:"move",assistiveText:"Move",title:"Move"}),r.a.createElement(u.b,{className:"slds-button_icon-x-small",theme:"brand",symbol:"close",assistiveText:"Close",title:"Close"}))))};v.propTypes={hasActions:E.a.bool,isHovered:E.a.bool,children:E.a.node};var y=function(e){return r.a.createElement(d.a,{symbol:e.isContainer?"connected_apps":"builder",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-current-color",title:!1,assistiveText:!1})};y.propTypes={isContainer:E.a.bool};var _=function(e){return r.a.createElement("div",{className:i()("slds-drop-zone__label",{"slds-drop-zone__label_container":e.isContainer})},r.a.createElement(m.a,{figureLeft:r.a.createElement(y,{isContainer:e.isContainer}),flavor:"center"},e.isContainer?r.a.createElement("h2",null,r.a.createElement("button",{className:"slds-drop-zone__label_button slds-button_reset"},r.a.createElement("span",{className:"slds-assistive-text"},"Edit: "),r.a.createElement("span",null,e.headerText))):r.a.createElement("h2",null,e.headerText)))};_.propTypes={isContainer:E.a.bool,headerText:E.a.string};b.d,b.c,b.a,b.b,b.d,b.c,b.a,b.b,b.d,b.c,b.a,b.b,b.d,b.c,b.a,b.b,n(33),n(1);var x=o.c.h2,C=o.c.h3,w=o.c.li,D=o.c.p,T=o.c.strong,N=o.c.ul,A=function(){return Object(a.createElement)(o.b,{},Object(a.createElement)("div",{className:"lead doc"},"Screen building elements that surround areas where components can be placed. Drop Zones visually indicate to users where they may drag and drop components onto a page."),Object(a.createElement)(l.a,{exampleOnly:!0},Object(a.createElement)(f,null,Object(a.createElement)(j,null),Object(a.createElement)(v,{hasActions:!0,isHovered:!0},Object(a.createElement)(j,null)))),x({id:"Base-Drop-Zone"},"Base Drop Zone"),D({},"A Base Drop Zone outlines areas within a page where users may drag and drop a component. These create a template to guide users within a screen building experience."),Object(a.createElement)(c.a,{title:"Drop Zone - Base"},Object(a.createElement)(l.a,{toggleCode:!1},Object(a.createElement)(f,null,Object(a.createElement)(j,null)))),x({id:"Drag-Over-Drop-Zone"},"Drag Over Drop Zone"),D({},"When dragging a component, use the drag over drop zone to indicate to the user where the component will be placed when dropped."),Object(a.createElement)(c.a,{title:"Drop Zone - Drag Over"},Object(a.createElement)(l.a,null,Object(a.createElement)(O,null,Object(a.createElement)(f,{isDragging:!0},Object(a.createElement)(_,{headerText:"Content"}),Object(a.createElement)(j,null),Object(a.createElement)(g,null),Object(a.createElement)(j,null))))),C({id:"Insertion-Point"},"Insertion Point"),D({},"An insertion point is used to further communicate to the user the exact slot the component is being placed."),Object(a.createElement)(l.a,{toggleCode:!1},Object(a.createElement)(g,null)),D({},"The position of this element should be controlled by your implementation."),N({},w({},D({},T({},"When there are no components in the drop zone"),": The insertion point should be placed in the center.")),w({},D({},T({},"When there are components in the drop zone"),": The insertion point should be placed before or after components, to indicate where a new component will be placed relative to the ones already in the the drop zone."))),x({id:"Drop-Zone-Container"},"Drop Zone Container"),D({},"Use a drop zone container to highlight components within a drop zone. This provides a label for the component, as well as Button Icons to perform actions, such as moving the component and deleting the component from the screen."),Object(a.createElement)(c.a,{title:"Drop Zone - Container"},Object(a.createElement)(l.a,null,Object(a.createElement)(f,null,Object(a.createElement)(j,null),Object(a.createElement)(v,{hasActions:!0,isHovered:!0},Object(a.createElement)(j,null))))),x({id:"Example-Cards"},"Example - Cards"),Object(a.createElement)(c.a,{title:"Drop Zone - Cards Example"},Object(a.createElement)(l.a,null,Object(a.createElement)(O,null,Object(a.createElement)(f,null,Object(a.createElement)(v,{hasActions:!0},Object(a.createElement)(b.d,{className:"slds-m-bottom_small"},Object(a.createElement)(b.c,{title:"Accounts",showIcon:!0,symbol:"account"}),Object(a.createElement)(b.a,{hasPadding:!0},"Card Body"),Object(a.createElement)(b.b,{linkTabIndex:"-1"},"View All ",Object(a.createElement)("span",{className:"slds-assistive-text"},"Accounts")))),Object(a.createElement)(v,{hasActions:!0},Object(a.createElement)(b.d,{className:"slds-m-top_small"},Object(a.createElement)(b.c,{title:"Accounts",showIcon:!0,symbol:"account"}),Object(a.createElement)(b.a,{hasPadding:!0},"Card Body"),Object(a.createElement)(b.b,{linkTabIndex:"-1"},"View All ",Object(a.createElement)("span",{className:"slds-assistive-text"},"Accounts")))))))),x({id:"Example-Cards-Insertion"},"Example - Cards Insertion"),Object(a.createElement)(c.a,{title:"Drop Zone - Cards Insert Example"},Object(a.createElement)(l.a,null,Object(a.createElement)(O,null,Object(a.createElement)(f,{isDragging:!0},Object(a.createElement)(_,{headerText:"Content"}),Object(a.createElement)(v,{hasActions:!0},Object(a.createElement)(b.d,{className:"slds-m-bottom_small"},Object(a.createElement)(b.c,{title:"Accounts",showIcon:!0,symbol:"account"}),Object(a.createElement)(b.a,{hasPadding:!0},"Card Body"),Object(a.createElement)(b.b,{linkTabIndex:"-1"},"View All ",Object(a.createElement)("span",{className:"slds-assistive-text"},"Accounts")))),Object(a.createElement)(g,null),Object(a.createElement)(v,{hasActions:!0},Object(a.createElement)(b.d,{className:"slds-m-top_small"},Object(a.createElement)(b.c,{title:"Accounts",showIcon:!0,symbol:"account"}),Object(a.createElement)(b.a,{hasPadding:!0},"Card Body"),Object(a.createElement)(b.b,{linkTabIndex:"-1"},"View All ",Object(a.createElement)("span",{className:"slds-assistive-text"},"Accounts")))))))))},S=function(){return Object(o.a)(A())}}});

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

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

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/dynamic-icons/docs.mdx.js"]=function(e){function t(t){for(var n,i,r=t[0],c=t[1],d=t[2],m=0,u=[];m<r.length;m++)i=r[m],Object.prototype.hasOwnProperty.call(l,i)&&l[i]&&u.push(l[i][0]),l[i]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(o&&o(t);u.length;)u.shift()();return s.push.apply(s,d\|\|[]),a()}function a(){for(var e,t=0;t<s.length;t++){for(var a=s[t],n=!0,r=1;r<a.length;r++){var c=a[r];0!==l[c]&&(n=!1)}n&&(s.splice(t--,1),e=i(i.s=a[0]))}return e}var n={},l={32:0},s=[];function i(t){if(n[t])return n[t].exports;var a=n[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,i),a.l=!0,a.exports}i.m=e,i.c=n,i.d=function(e,t,a){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(a,n,function(t){return e[t]}.bind(null,n));return a},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=r.push.bind(r);r.push=t,r=r.slice();for(var d=0;d<r.length;d++)t(r[d]);var o=c;return s.push([650,0]),a()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},650:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return G})),a.d(t,"getContents",(function(){return J}));var n=a(0),l=a.n(n),s=a(4),i=a(2),r=a(1),c=a(139),d=[{id:"default",label:"Ellie – default",element:l.a.createElement(c.a,{className:"slds-is-animated",title:"Description of the icon",assistiveText:"Text alternative"})}],o=[{id:"paused",label:"Ellie – Paused",element:l.a.createElement(c.a,{className:"slds-is-animated slds-is-paused",title:"Description of the icon",assistiveText:"Text alternative"})},{id:"static",label:"Ellie – Static (no animation)",element:l.a.createElement(c.a,{title:"Description of the icon",assistiveText:"Text alternative"})}],m=function(){return l.a.createElement("div",{className:"slds-icon-eq slds-is-animated",title:"Description of the icon when needed"},l.a.createElement("div",{className:"slds-icon-eq__bar"}),l.a.createElement("div",{className:"slds-icon-eq__bar"}),l.a.createElement("div",{className:"slds-icon-eq__bar"}),l.a.createElement("span",{className:"slds-assistive-text"},"Text alternative when needed"))},u=[{id:"default",label:"EQ – default",element:l.a.createElement(m,null)}],b=function(){return l.a.createElement("button",{className:"slds-button slds-button_icon slds-icon-help"},l.a.createElement("svg",{className:"slds-button__icon",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -12 78.5 110","aria-labelledby":"title",role:"presentation"},l.a.createElement("defs",null,l.a.createElement("mask",{id:"questionMark",x:"0",y:"0",width:"78.5",height:"110"},l.a.createElement("path",{d:"M46.8,70.4H37a2.7,2.7,0,0,1-2.7-2.7V64.8A19.6,19.6,0,0,1,47.4,46.4a14.6,14.6,0,0,0,6.2-4.1c9.8-11.7.8-25.8-10.9-26.2a15.7,15.7,0,0,0-11.5,4.4,13.7,13.7,0,0,0-4.5,8.6,2.8,2.8,0,0,1-2.9,2.1H14a2.8,2.8,0,0,1-2.9-3.1A31.8,31.8,0,0,1,20.5,8.8,32,32,0,0,1,43.3,0a31.3,31.3,0,0,1,9.6,60.7A4.4,4.4,0,0,0,50,64.6v2.9a3,3,0,0,1-3.1,2.9Zm3.1,20.5a3,3,0,0,1-2.9,3H37.2A3,3,0,0,1,34.3,91V81.2a3,3,0,0,1,2.9-2.9H47a3,3,0,0,1,2.9,2.9Z",transform:"translate(-2.5 0)",fill:"#aab4be"}))),l.a.createElement("title",{id:"title"},"help"),l.a.createElement("g",null,l.a.createElement("circle",{cy:"45",cx:"45",r:"60"}),l.a.createElement("circle",{className:"slds-icon-help_hover",cy:"45",cx:"45",r:"60"}),l.a.createElement("circle",{className:"slds-icon-help_focus",cy:"45",cx:"45",r:"60"}))),l.a.createElement("span",{className:"slds-assistive-text"},"help"))},f=[{id:"default",label:"Global Action Help - Default",element:l.a.createElement(b,null)}],p=a(140),g=[{id:"default",label:"Score – default",element:l.a.createElement(p.a,{"data-slds-state":"positive"})}],h=[{id:"positive",label:"Score – Positive",element:l.a.createElement(p.a,{"data-slds-state":"positive"})},{id:"negative",label:"Score – Negative",element:l.a.createElement(p.a,{"data-slds-state":"negative"})}],v=a(5),E=a.n(v);function O(){return(O=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e}).apply(this,arguments)}var j=function(e){return l.a.createElement("span",O({},e,{title:"Description of the icon when needed",className:E()("slds-icon-strength",e.className)}),l.a.createElement("svg",{viewBox:"0 0 27 7","aria-hidden":"true"},l.a.createElement("circle",{r:"3.025",cx:"3.5",cy:"3.5"}),l.a.createElement("circle",{r:"3.025",cx:"13.5",cy:"3.5"}),l.a.createElement("circle",{r:"3.025",cx:"23.5",cy:"3.5"})),l.a.createElement("span",{className:"slds-assistive-text"},"Text alternative when needed"))},S=[{id:"default",label:"Strength – default",element:l.a.createElement(j,{"data-slds-strength":"0"})}],y=[{id:"strength-1",label:"Strength: 1",element:l.a.createElement(j,{"data-slds-strength":"1"})},{id:"strength-2",label:"Strength: 2",element:l.a.createElement(j,{"data-slds-strength":"2"})},{id:"strength-3",label:"Strength: 3",element:l.a.createElement(j,{"data-slds-strength":"3"})},{id:"strength-negative-1",label:"Strength: Neg 1",element:l.a.createElement(j,{"data-slds-strength":"-1"})},{id:"strength-negative-2",label:"Strength: Neg 2",element:l.a.createElement(j,{"data-slds-strength":"-2"})},{id:"strength-negative-3",label:"Strength: Neg 3",element:l.a.createElement(j,{"data-slds-strength":"-3"})},{id:"animated",label:"Strength – Animated on load",element:l.a.createElement(j,{className:"slds-is-animated","data-slds-strength":"3"})},{id:"animated-negative",label:"Strength – Animated on load (negative)",element:l.a.createElement(j,{className:"slds-is-animated","data-slds-strength":"-3"})},{id:"paused",label:"Strength – Paused",element:l.a.createElement(j,{className:"slds-is-animated slds-is-paused","data-slds-strength":"3"})}],x=a(3),T=a.n(x),N=["assistiveText"];function _(){return(_=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e}).apply(this,arguments)}function w(e,t){if(null==e)return{};var a,n,l=function(e,t){if(null==e)return{};var a,n,l={},s=Object.keys(e);for(n=0;n<s.length;n++)a=s[n],t.indexOf(a)>=0\|\|(l[a]=e[a]);return l}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(n=0;n<s.length;n++)a=s[n],t.indexOf(a)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,a)&&(l[a]=e[a])}return l}var P=function(e){var t=e.assistiveText,a=w(e,N);return l.a.createElement("span",_({},a,{className:E()("slds-icon-trend",e.className)}),l.a.createElement("svg",{viewBox:"0 0 16 16","aria-hidden":"true"},l.a.createElement("path",{className:"slds-icon-trend__arrow",d:"M.75 8H11M8 4.5L11.5 8 8 11.5"}),l.a.createElement("circle",{className:"slds-icon-trend__circle",cy:"8",cx:"8",r:"7.375",transform:"rotate(-28 8 8) scale(-1 1) translate(-16 0)"})),l.a.createElement("span",{className:"slds-assistive-text"},t))};P.propTypes={title:T.a.string.isRequired,assistiveText:T.a.string.isRequired};var D=P,A=[{id:"default",label:"Trend – default",element:l.a.createElement(D,{"data-slds-trend":"neutral",className:"slds-is-animated",title:"Description of the icon",assistiveText:"Text alternative"})}],q=[{id:"down",label:"Trend - Down",element:l.a.createElement(D,{"data-slds-trend":"down",className:"slds-is-animated",title:"Description of the icon",assistiveText:"Text alternative"})},{id:"up",label:"Trend - Up",element:l.a.createElement(D,{"data-slds-trend":"up",className:"slds-is-animated",title:"Description of the icon",assistiveText:"Text alternative"})},{id:"static",label:"Trend - Static (no animation)",element:l.a.createElement(D,{"data-slds-trend":"up",title:"Description of the icon",assistiveText:"Text alternative"})},{id:"paused",label:"Trend - Paused",element:l.a.createElement(D,{"data-slds-trend":"up",className:"slds-is-animated slds-is-paused",title:"Description of the icon",assistiveText:"Text alternative"})}],M=a(143),U=[{id:"default",label:"Typing – default",element:l.a.createElement(M.a,{title:"User is typing",assistiveText:"User is typing",isAnimated:!0})}],k=[{id:"paused",label:"Typing – Paused",element:l.a.createElement(M.a,{title:"User is typing",assistiveText:"User is typing",isAnimated:!0,isPaused:!0})},{id:"static",label:"Typing – Static",element:l.a.createElement(M.a,{title:"User is typing",assistiveText:"User is typing"})}],H=a(137),L=[{id:"default",label:"Waffle",element:l.a.createElement(H.a,null)}],B=s.c.h2,R=s.c.h3,G=function(){return Object(n.createElement)(s.b,{},Object(n.createElement)("div",{className:"lead doc"},"A set of delightful animated icons"),Object(n.createElement)(i.a,{exampleOnly:!0},Object(r.f)(u)),B({id:"Ellie"},"Ellie"),Object(n.createElement)(i.a,null,Object(r.f)(d)),R({id:"Paused"},"Paused"),Object(n.createElement)(i.a,null,Object(r.f)(o,"paused")),R({id:"Static"},"Static"),Object(n.createElement)(i.a,null,Object(r.f)(o,"static")),B({id:"Eq"},"Eq"),Object(n.createElement)(i.a,null,Object(r.f)(u)),B({id:"Global-Action-Help"},"Global Action Help"),Object(n.createElement)(i.a,null,Object(r.f)(f)),B({id:"Score"},"Score"),Object(n.createElement)(i.a,null,Object(r.f)(g)),R({id:"Positive"},"Positive"),Object(n.createElement)(i.a,null,Object(r.f)(h,"positive")),R({id:"Negative"},"Negative"),Object(n.createElement)(i.a,null,Object(r.f)(h,"negative")),B({id:"Strength"},"Strength"),Object(n.createElement)(i.a,null,Object(r.f)(S)),R({id:"Strength:-1"},"Strength: 1"),Object(n.createElement)(i.a,null,Object(r.f)(y,"strength-1")),R({id:"Strength:-2"},"Strength: 2"),Object(n.createElement)(i.a,null,Object(r.f)(y,"strength-2")),R({id:"Strength:-3"},"Strength: 3"),Object(n.createElement)(i.a,null,Object(r.f)(y,"strength-3")),R({id:"Strength:-1-2"},"Strength: -1"),Object(n.createElement)(i.a,null,Object(r.f)(y,"strength-negative-1")),R({id:"Strength:-2-2"},"Strength: -2"),Object(n.createElement)(i.a,null,Object(r.f)(y,"strength-negative-2")),R({id:"Strength:-3-2"},"Strength: -3"),Object(n.createElement)(i.a,null,Object(r.f)(y,"strength-negative-3")),R({id:"Animated-on-load"},"Animated on load"),Object(n.createElement)(i.a,null,Object(r.f)(y,"animated")),R({id:"Animated-on-load-(negative)"},"Animated on load (negative)"),Object(n.createElement)(i.a,null,Object(r.f)(y,"animated-negative")),R({id:"Paused-2"},"Paused"),Object(n.createElement)(i.a,null,Object(r.f)(y,"paused")),B({id:"Trend"},"Trend"),Object(n.createElement)(i.a,null,Object(r.f)(A)),R({id:"Down"},"Down"),Object(n.createElement)(i.a,null,Object(r.f)(q,"down")),R({id:"Up"},"Up"),Object(n.createElement)(i.a,null,Object(r.f)(q,"up")),R({id:"Static-(no-animation)"},"Static (no animation)"),Object(n.createElement)(i.a,null,Object(r.f)(q,"static")),R({id:"Paused-3"},"Paused"),Object(n.createElement)(i.a,null,Object(r.f)(q,"paused")),B({id:"Typing"},"Typing"),Object(n.createElement)(i.a,null,Object(r.f)(U)),R({id:"Paused-4"},"Paused"),Object(n.createElement)(i.a,null,Object(r.f)(k,"paused")),R({id:"Static-2"},"Static"),Object(n.createElement)(i.a,null,Object(r.f)(k,"static")),B({id:"Waffle"},"Waffle"),Object(n.createElement)(i.a,null,Object(r.f)(L)))},J=function(){return Object(s.a)(G())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/dynamic-icons/docs.mdx.js"]=function(e){function t(t){for(var n,i,r=t[0],c=t[1],d=t[2],m=0,u=[];m<r.length;m++)i=r[m],Object.prototype.hasOwnProperty.call(l,i)&&l[i]&&u.push(l[i][0]),l[i]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(o&&o(t);u.length;)u.shift()();return s.push.apply(s,d\|\|[]),a()}function a(){for(var e,t=0;t<s.length;t++){for(var a=s[t],n=!0,r=1;r<a.length;r++){var c=a[r];0!==l[c]&&(n=!1)}n&&(s.splice(t--,1),e=i(i.s=a[0]))}return e}var n={},l={32:0},s=[];function i(t){if(n[t])return n[t].exports;var a=n[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,i),a.l=!0,a.exports}i.m=e,i.c=n,i.d=function(e,t,a){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(a,n,function(t){return e[t]}.bind(null,n));return a},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=r.push.bind(r);r.push=t,r=r.slice();for(var d=0;d<r.length;d++)t(r[d]);var o=c;return s.push([651,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},651:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return G})),a.d(t,"getContents",(function(){return J}));var n=a(0),l=a.n(n),s=a(4),i=a(2),r=a(1),c=a(140),d=[{id:"default",label:"Ellie – default",element:l.a.createElement(c.a,{className:"slds-is-animated",title:"Description of the icon",assistiveText:"Text alternative"})}],o=[{id:"paused",label:"Ellie – Paused",element:l.a.createElement(c.a,{className:"slds-is-animated slds-is-paused",title:"Description of the icon",assistiveText:"Text alternative"})},{id:"static",label:"Ellie – Static (no animation)",element:l.a.createElement(c.a,{title:"Description of the icon",assistiveText:"Text alternative"})}],m=function(){return l.a.createElement("div",{className:"slds-icon-eq slds-is-animated",title:"Description of the icon when needed"},l.a.createElement("div",{className:"slds-icon-eq__bar"}),l.a.createElement("div",{className:"slds-icon-eq__bar"}),l.a.createElement("div",{className:"slds-icon-eq__bar"}),l.a.createElement("span",{className:"slds-assistive-text"},"Text alternative when needed"))},u=[{id:"default",label:"EQ – default",element:l.a.createElement(m,null)}],b=function(){return l.a.createElement("button",{className:"slds-button slds-button_icon slds-icon-help"},l.a.createElement("svg",{className:"slds-button__icon",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -12 78.5 110","aria-labelledby":"title",role:"presentation"},l.a.createElement("defs",null,l.a.createElement("mask",{id:"questionMark",x:"0",y:"0",width:"78.5",height:"110"},l.a.createElement("path",{d:"M46.8,70.4H37a2.7,2.7,0,0,1-2.7-2.7V64.8A19.6,19.6,0,0,1,47.4,46.4a14.6,14.6,0,0,0,6.2-4.1c9.8-11.7.8-25.8-10.9-26.2a15.7,15.7,0,0,0-11.5,4.4,13.7,13.7,0,0,0-4.5,8.6,2.8,2.8,0,0,1-2.9,2.1H14a2.8,2.8,0,0,1-2.9-3.1A31.8,31.8,0,0,1,20.5,8.8,32,32,0,0,1,43.3,0a31.3,31.3,0,0,1,9.6,60.7A4.4,4.4,0,0,0,50,64.6v2.9a3,3,0,0,1-3.1,2.9Zm3.1,20.5a3,3,0,0,1-2.9,3H37.2A3,3,0,0,1,34.3,91V81.2a3,3,0,0,1,2.9-2.9H47a3,3,0,0,1,2.9,2.9Z",transform:"translate(-2.5 0)",fill:"#aab4be"}))),l.a.createElement("title",{id:"title"},"help"),l.a.createElement("g",null,l.a.createElement("circle",{cy:"45",cx:"45",r:"60"}),l.a.createElement("circle",{className:"slds-icon-help_hover",cy:"45",cx:"45",r:"60"}),l.a.createElement("circle",{className:"slds-icon-help_focus",cy:"45",cx:"45",r:"60"}))),l.a.createElement("span",{className:"slds-assistive-text"},"help"))},f=[{id:"default",label:"Global Action Help - Default",element:l.a.createElement(b,null)}],p=a(141),g=[{id:"default",label:"Score – default",element:l.a.createElement(p.a,{"data-slds-state":"positive"})}],h=[{id:"positive",label:"Score – Positive",element:l.a.createElement(p.a,{"data-slds-state":"positive"})},{id:"negative",label:"Score – Negative",element:l.a.createElement(p.a,{"data-slds-state":"negative"})}],v=a(5),E=a.n(v);function O(){return(O=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e}).apply(this,arguments)}var j=function(e){return l.a.createElement("span",O({},e,{title:"Description of the icon when needed",className:E()("slds-icon-strength",e.className)}),l.a.createElement("svg",{viewBox:"0 0 27 7","aria-hidden":"true"},l.a.createElement("circle",{r:"3.025",cx:"3.5",cy:"3.5"}),l.a.createElement("circle",{r:"3.025",cx:"13.5",cy:"3.5"}),l.a.createElement("circle",{r:"3.025",cx:"23.5",cy:"3.5"})),l.a.createElement("span",{className:"slds-assistive-text"},"Text alternative when needed"))},S=[{id:"default",label:"Strength – default",element:l.a.createElement(j,{"data-slds-strength":"0"})}],y=[{id:"strength-1",label:"Strength: 1",element:l.a.createElement(j,{"data-slds-strength":"1"})},{id:"strength-2",label:"Strength: 2",element:l.a.createElement(j,{"data-slds-strength":"2"})},{id:"strength-3",label:"Strength: 3",element:l.a.createElement(j,{"data-slds-strength":"3"})},{id:"strength-negative-1",label:"Strength: Neg 1",element:l.a.createElement(j,{"data-slds-strength":"-1"})},{id:"strength-negative-2",label:"Strength: Neg 2",element:l.a.createElement(j,{"data-slds-strength":"-2"})},{id:"strength-negative-3",label:"Strength: Neg 3",element:l.a.createElement(j,{"data-slds-strength":"-3"})},{id:"animated",label:"Strength – Animated on load",element:l.a.createElement(j,{className:"slds-is-animated","data-slds-strength":"3"})},{id:"animated-negative",label:"Strength – Animated on load (negative)",element:l.a.createElement(j,{className:"slds-is-animated","data-slds-strength":"-3"})},{id:"paused",label:"Strength – Paused",element:l.a.createElement(j,{className:"slds-is-animated slds-is-paused","data-slds-strength":"3"})}],x=a(3),T=a.n(x),N=["assistiveText"];function _(){return(_=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e}).apply(this,arguments)}function w(e,t){if(null==e)return{};var a,n,l=function(e,t){if(null==e)return{};var a,n,l={},s=Object.keys(e);for(n=0;n<s.length;n++)a=s[n],t.indexOf(a)>=0\|\|(l[a]=e[a]);return l}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(n=0;n<s.length;n++)a=s[n],t.indexOf(a)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,a)&&(l[a]=e[a])}return l}var P=function(e){var t=e.assistiveText,a=w(e,N);return l.a.createElement("span",_({},a,{className:E()("slds-icon-trend",e.className)}),l.a.createElement("svg",{viewBox:"0 0 16 16","aria-hidden":"true"},l.a.createElement("path",{className:"slds-icon-trend__arrow",d:"M.75 8H11M8 4.5L11.5 8 8 11.5"}),l.a.createElement("circle",{className:"slds-icon-trend__circle",cy:"8",cx:"8",r:"7.375",transform:"rotate(-28 8 8) scale(-1 1) translate(-16 0)"})),l.a.createElement("span",{className:"slds-assistive-text"},t))};P.propTypes={title:T.a.string.isRequired,assistiveText:T.a.string.isRequired};var D=P,A=[{id:"default",label:"Trend – default",element:l.a.createElement(D,{"data-slds-trend":"neutral",className:"slds-is-animated",title:"Description of the icon",assistiveText:"Text alternative"})}],q=[{id:"down",label:"Trend - Down",element:l.a.createElement(D,{"data-slds-trend":"down",className:"slds-is-animated",title:"Description of the icon",assistiveText:"Text alternative"})},{id:"up",label:"Trend - Up",element:l.a.createElement(D,{"data-slds-trend":"up",className:"slds-is-animated",title:"Description of the icon",assistiveText:"Text alternative"})},{id:"static",label:"Trend - Static (no animation)",element:l.a.createElement(D,{"data-slds-trend":"up",title:"Description of the icon",assistiveText:"Text alternative"})},{id:"paused",label:"Trend - Paused",element:l.a.createElement(D,{"data-slds-trend":"up",className:"slds-is-animated slds-is-paused",title:"Description of the icon",assistiveText:"Text alternative"})}],M=a(144),U=[{id:"default",label:"Typing – default",element:l.a.createElement(M.a,{title:"User is typing",assistiveText:"User is typing",isAnimated:!0})}],k=[{id:"paused",label:"Typing – Paused",element:l.a.createElement(M.a,{title:"User is typing",assistiveText:"User is typing",isAnimated:!0,isPaused:!0})},{id:"static",label:"Typing – Static",element:l.a.createElement(M.a,{title:"User is typing",assistiveText:"User is typing"})}],H=a(138),L=[{id:"default",label:"Waffle",element:l.a.createElement(H.a,null)}],B=s.c.h2,R=s.c.h3,G=function(){return Object(n.createElement)(s.b,{},Object(n.createElement)("div",{className:"lead doc"},"A set of delightful animated icons"),Object(n.createElement)(i.a,{exampleOnly:!0},Object(r.f)(u)),B({id:"Ellie"},"Ellie"),Object(n.createElement)(i.a,null,Object(r.f)(d)),R({id:"Paused"},"Paused"),Object(n.createElement)(i.a,null,Object(r.f)(o,"paused")),R({id:"Static"},"Static"),Object(n.createElement)(i.a,null,Object(r.f)(o,"static")),B({id:"Eq"},"Eq"),Object(n.createElement)(i.a,null,Object(r.f)(u)),B({id:"Global-Action-Help"},"Global Action Help"),Object(n.createElement)(i.a,null,Object(r.f)(f)),B({id:"Score"},"Score"),Object(n.createElement)(i.a,null,Object(r.f)(g)),R({id:"Positive"},"Positive"),Object(n.createElement)(i.a,null,Object(r.f)(h,"positive")),R({id:"Negative"},"Negative"),Object(n.createElement)(i.a,null,Object(r.f)(h,"negative")),B({id:"Strength"},"Strength"),Object(n.createElement)(i.a,null,Object(r.f)(S)),R({id:"Strength:-1"},"Strength: 1"),Object(n.createElement)(i.a,null,Object(r.f)(y,"strength-1")),R({id:"Strength:-2"},"Strength: 2"),Object(n.createElement)(i.a,null,Object(r.f)(y,"strength-2")),R({id:"Strength:-3"},"Strength: 3"),Object(n.createElement)(i.a,null,Object(r.f)(y,"strength-3")),R({id:"Strength:-1-2"},"Strength: -1"),Object(n.createElement)(i.a,null,Object(r.f)(y,"strength-negative-1")),R({id:"Strength:-2-2"},"Strength: -2"),Object(n.createElement)(i.a,null,Object(r.f)(y,"strength-negative-2")),R({id:"Strength:-3-2"},"Strength: -3"),Object(n.createElement)(i.a,null,Object(r.f)(y,"strength-negative-3")),R({id:"Animated-on-load"},"Animated on load"),Object(n.createElement)(i.a,null,Object(r.f)(y,"animated")),R({id:"Animated-on-load-(negative)"},"Animated on load (negative)"),Object(n.createElement)(i.a,null,Object(r.f)(y,"animated-negative")),R({id:"Paused-2"},"Paused"),Object(n.createElement)(i.a,null,Object(r.f)(y,"paused")),B({id:"Trend"},"Trend"),Object(n.createElement)(i.a,null,Object(r.f)(A)),R({id:"Down"},"Down"),Object(n.createElement)(i.a,null,Object(r.f)(q,"down")),R({id:"Up"},"Up"),Object(n.createElement)(i.a,null,Object(r.f)(q,"up")),R({id:"Static-(no-animation)"},"Static (no animation)"),Object(n.createElement)(i.a,null,Object(r.f)(q,"static")),R({id:"Paused-3"},"Paused"),Object(n.createElement)(i.a,null,Object(r.f)(q,"paused")),B({id:"Typing"},"Typing"),Object(n.createElement)(i.a,null,Object(r.f)(U)),R({id:"Paused-4"},"Paused"),Object(n.createElement)(i.a,null,Object(r.f)(k,"paused")),R({id:"Static-2"},"Static"),Object(n.createElement)(i.a,null,Object(r.f)(k,"static")),B({id:"Waffle"},"Waffle"),Object(n.createElement)(i.a,null,Object(r.f)(L)))},J=function(){return Object(s.a)(G())}}});

package/__internal/chunked/docs/ui/components/dynamic-menu/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/dynamic-menu/docs.mdx.js"]=function(e){function t(t){for(var o,i,c=t[0],s=t[1],u=t[2],h=0,d=[];h<c.length;h++)i=c[h],Object.prototype.hasOwnProperty.call(a,i)&&a[i]&&d.push(a[i][0]),a[i]=0;for(o in s)Object.prototype.hasOwnProperty.call(s,o)&&(e[o]=s[o]);for(l&&l(t);d.length;)d.shift()();return r.push.apply(r,u\|\|[]),n()}function n(){for(var e,t=0;t<r.length;t++){for(var n=r[t],o=!0,c=1;c<n.length;c++){var s=n[c];0!==a[s]&&(o=!1)}o&&(r.splice(t--,1),e=i(i.s=n[0]))}return e}var o={},a={33:0},r=[];function i(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,i),n.l=!0,n.exports}i.m=e,i.c=o,i.d=function(e,t,n){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)i.d(n,o,function(t){return e[t]}.bind(null,o));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=c.push.bind(c);c.push=t,c=c.slice();for(var u=0;u<c.length;u++)t(c[u]);var l=s;return r.push([~~580~~,0]),n()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~580~~:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return f})),n.d(t,"getContents",(function(){return m}));var o=n(0),a=n(4),r=n(2),i=(n(25),n(14),n(1)),c=n(98),s=a.c.a,u=a.c.code,l=a.c.h1,h=a.c.h2,d=a.c.h3,p=a.c.p,f=function(){return Object(o.createElement)(a.b,{},Object(o.createElement)("div",{className:"lead doc"},"The Dynamic Menu can be used to give a user a variable number of actions to take. When that list of actions is long, a search mechanism is provided."),Object(o.createElement)(r.a,{exampleOnly:!0},Object(i.f)(c.c)),l({id:"About-Dynamic-Menu"},"About Dynamic Menu"),p({},"The Dynamic Menu is a modified concept of the ",s({href:"/components/menus/"},"Menu component"),", used when the number of actions available to the user is dynamic or variable. It can also be useful when\nthe number of actions in the menu is large enough that a search functionality would be required."),p({},"The component is composed of a ",s({href:"/components/popovers"},"Popover"),", coupled with either a ",u({},"listbox")," of options or an always expanded ",s({href:"/components/combobox"},"Autocomplete Combobox")," and a list of additional actions pinned to the bottom of the dialog. The Popover and pinned actions are constant through the 3 different states the Dynamic Menu can take."),p({},"When there are no actions other than the pinned actions, static content is displayed in the body of the Popover informing the user of the empty state. When there are 10 or less options in the menu a ",u({},"listbox")," is used to display them in the body of the Popover. When there are more than 10 options an Autocomplete Combobox is used to display some options and allow searching through the rest of available options that may not be displayed."),p({},"Both the ",u({},"listbox")," and Combobox versions come with ",u({},"Up")," and ",u({},"Down")," arrow key navigation through the list. The ",u({},"listbox")," variant should only have a single focusable option. The Combobox variant should follow the expected keyboard behavior listed on the ",s({href:"/components/combobox"},"Combobox Component")," page."),l({id:"Base"},"Base"),Object(o.createElement)(r.a,null,Object(i.f)(c.c)),h({id:"States"},"States"),d({id:"With-1-item"},"With 1 item"),Object(o.createElement)(r.a,null,Object(i.f)(c.d,"dynamic-menu-1-item")),d({id:"With-fewer-than-10-items"},"With fewer than 10 items"),Object(o.createElement)(r.a,null,Object(i.f)(c.d,"dynamic-menu-sub-10-item")),d({id:"With-greater-than-10-items"},"With greater than 10 items"),Object(o.createElement)(r.a,null,Object(i.f)(c.d,"dynamic-menu-over-10-item")))},m=function(){return Object(a.a)(f())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/dynamic-menu/docs.mdx.js"]=function(e){function t(t){for(var o,i,c=t[0],s=t[1],u=t[2],h=0,d=[];h<c.length;h++)i=c[h],Object.prototype.hasOwnProperty.call(a,i)&&a[i]&&d.push(a[i][0]),a[i]=0;for(o in s)Object.prototype.hasOwnProperty.call(s,o)&&(e[o]=s[o]);for(l&&l(t);d.length;)d.shift()();return r.push.apply(r,u\|\|[]),n()}function n(){for(var e,t=0;t<r.length;t++){for(var n=r[t],o=!0,c=1;c<n.length;c++){var s=n[c];0!==a[s]&&(o=!1)}o&&(r.splice(t--,1),e=i(i.s=n[0]))}return e}var o={},a={33:0},r=[];function i(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,i),n.l=!0,n.exports}i.m=e,i.c=o,i.d=function(e,t,n){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)i.d(n,o,function(t){return e[t]}.bind(null,o));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=c.push.bind(c);c.push=t,c=c.slice();for(var u=0;u<c.length;u++)t(c[u]);var l=s;return r.push([581,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},581:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return f})),n.d(t,"getContents",(function(){return m}));var o=n(0),a=n(4),r=n(2),i=(n(26),n(14),n(1)),c=n(99),s=a.c.a,u=a.c.code,l=a.c.h1,h=a.c.h2,d=a.c.h3,p=a.c.p,f=function(){return Object(o.createElement)(a.b,{},Object(o.createElement)("div",{className:"lead doc"},"The Dynamic Menu can be used to give a user a variable number of actions to take. When that list of actions is long, a search mechanism is provided."),Object(o.createElement)(r.a,{exampleOnly:!0},Object(i.f)(c.c)),l({id:"About-Dynamic-Menu"},"About Dynamic Menu"),p({},"The Dynamic Menu is a modified concept of the ",s({href:"/components/menus/"},"Menu component"),", used when the number of actions available to the user is dynamic or variable. It can also be useful when\nthe number of actions in the menu is large enough that a search functionality would be required."),p({},"The component is composed of a ",s({href:"/components/popovers"},"Popover"),", coupled with either a ",u({},"listbox")," of options or an always expanded ",s({href:"/components/combobox"},"Autocomplete Combobox")," and a list of additional actions pinned to the bottom of the dialog. The Popover and pinned actions are constant through the 3 different states the Dynamic Menu can take."),p({},"When there are no actions other than the pinned actions, static content is displayed in the body of the Popover informing the user of the empty state. When there are 10 or less options in the menu a ",u({},"listbox")," is used to display them in the body of the Popover. When there are more than 10 options an Autocomplete Combobox is used to display some options and allow searching through the rest of available options that may not be displayed."),p({},"Both the ",u({},"listbox")," and Combobox versions come with ",u({},"Up")," and ",u({},"Down")," arrow key navigation through the list. The ",u({},"listbox")," variant should only have a single focusable option. The Combobox variant should follow the expected keyboard behavior listed on the ",s({href:"/components/combobox"},"Combobox Component")," page."),l({id:"Base"},"Base"),Object(o.createElement)(r.a,null,Object(i.f)(c.c)),h({id:"States"},"States"),d({id:"With-1-item"},"With 1 item"),Object(o.createElement)(r.a,null,Object(i.f)(c.d,"dynamic-menu-1-item")),d({id:"With-fewer-than-10-items"},"With fewer than 10 items"),Object(o.createElement)(r.a,null,Object(i.f)(c.d,"dynamic-menu-sub-10-item")),d({id:"With-greater-than-10-items"},"With greater than 10 items"),Object(o.createElement)(r.a,null,Object(i.f)(c.d,"dynamic-menu-over-10-item")))},m=function(){return Object(a.a)(f())}}});

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

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

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/expression/docs.mdx.js"]=function(e){function t(t){for(var n,s,i=t[0],r=t[1],c=t[2],u=0,m=[];u<i.length;u++)s=i[u],Object.prototype.hasOwnProperty.call(o,s)&&o[s]&&m.push(o[s][0]),o[s]=0;for(n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);for(d&&d(t);m.length;)m.shift()();return a.push.apply(a,c\|\|[]),l()}function l(){for(var e,t=0;t<a.length;t++){for(var l=a[t],n=!0,i=1;i<l.length;i++){var r=l[i];0!==o[r]&&(n=!1)}n&&(a.splice(t--,1),e=s(s.s=l[0]))}return e}var n={},o={35:0},a=[];function s(t){if(n[t])return n[t].exports;var l=n[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,s),l.l=!0,l.exports}s.m=e,s.c=n,s.d=function(e,t,l){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:l})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(s.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)s.d(l,n,function(t){return e[t]}.bind(null,n));return l},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=i.push.bind(i);i.push=t,i=i.slice();for(var c=0;c<i.length;c++)t(i[c]);var d=r;return a.push([661,0]),l()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},661:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return te})),l.d(t,"getContents",(function(){return le}));var n=l(0),o=l.n(n),a=l(4),s=l(2),i=l(25),r=l(15),c=l(14),d=l(3),u=l.n(d),m=l(11),p=l(10),b=l(7),h=l(12),E=l(22),g=l(23),f=l(8),O=l(16),x={conditionOption1:{name:"All Conditions Are Met"},conditionOption2:{name:"Any Condition Is Met"},conditionOption3:{name:"Custom Logic Is Met"},conditionOption4:{name:"Always (No Criteria)"},conditionOption5:{name:"Formula Evaluates to True"}},v={resourceOption1:{name:"Resource 1"},resourceOption2:{name:"Resource 2"},resourceOption3:{name:"Resource 3"},resourceOption4:{name:"Resource 4"}},y={resourceOption1:{name:"Resource 1",selected:!0,focused:!0},resourceOption2:{name:"Resource 2"},resourceOption3:{name:"Resource 3"},resourceOption4:{name:"Resource 4"}},j={operatorOption1:{name:"Equals"},operatorOption2:{name:"Does Not Equal"},operatorOption3:{name:"Greater Than"},operatorOption4:{name:"Less Than"}},_={all:{snapshot:{conditionOption1:{name:"All Conditions Are Met",selected:!0,focused:!0},conditionOption2:{name:"Any Condition Is Met"},conditionOption3:{name:"Custom Logic Is Met"},conditionOption4:{name:"Always (No Criteria)"},conditionOption5:{name:"Formula Evaluates to True"}},value:"All Conditions Are Met"},any:{snapshot:{conditionOption1:{name:"All Conditions Are Met"},conditionOption2:{name:"Any Condition Is Met",selected:!0,focused:!0},conditionOption3:{name:"Custom Logic Is Met"},conditionOption4:{name:"Always (No Criteria)"},conditionOption5:{name:"Formula Evaluates to True"}},value:"Any Condition Is Met"},custom:{snapshot:{conditionOption1:{name:"All Conditions Are Met"},conditionOption2:{name:"Any Condition Is Met"},conditionOption3:{name:"Custom Logic Is Met",selected:!0,focused:!0},conditionOption4:{name:"Always (No Criteria)"},conditionOption5:{name:"Formula Evaluates to True"}},value:"Custom Logic Is Met"},always:{snapshot:{conditionOption1:{name:"All Conditions Are Met"},conditionOption2:{name:"Any Condition Is Met"},conditionOption3:{name:"Custom Logic Is Met"},conditionOption4:{name:"Always (No Criteria)",selected:!0,focused:!0},conditionOption5:{name:"Formula Evaluates to True"}},value:"Always (No Criteria)"},formula:{snapshot:{conditionOption1:{name:"All Conditions Are Met"},conditionOption2:{name:"Any Condition Is Met"},conditionOption3:{name:"Custom Logic Is Met"},conditionOption4:{name:"Always (No Criteria)"},conditionOption5:{name:"Formula Evaluates to True",selected:!0,focused:!0}},value:"Formula Evaluates to True"},group:{snapshot:{conditionOption1:{name:"All Conditions Are Met for This Group"},conditionOption2:{name:"Any Condition Is Met for This Group",selected:!0,focused:!0},conditionOption3:{name:"Custom Logic Is Met for This Group"},conditionOption4:{name:"Always (No Criteria)"},conditionOption5:{name:"Formula Evaluates to True"}},value:"Any Condition Is Met in This Group"}},N=l(5),w=l.n(N),S=l(1),A=function(e){var t=e.optionSelected,l=e.isInFilter,n=e.label,a=e.placeholderText,s=S.d.uniqueId("listbox-id-"),i=t&&_[t];return o.a.createElement("div",{className:w()(l?"slds-m-vertical_small":"slds-expression__options")},o.a.createElement(E.b,{id:S.d.uniqueId("combobox-id-"),"aria-controls":s,label:n,value:i&&i.value,placeholder:a,selectOnly:!0,inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(g.e,{id:s,hasUniqueId:!0,snapshot:i?i.snapshot:x,type:"plain",count:i?Object.keys(i.snapshot).length:Object.keys(x).length,visualSelection:!0}),resultsType:"listbox",hasInteractions:!0}))};A.propTypes={label:u.a.string.isRequired,isInFilter:u.a.bool,optionSelected:u.a.oneOf(["any","all","custom","formula","always","group"]),placeholderText:u.a.string},A.defaultProps={label:"Take Action When",placeholderText:"Select…"};var T=function(e){var t=S.d.uniqueId("text-input-id-");return o.a.createElement("div",{className:"slds-expression__custom-logic"},o.a.createElement(f.b,{labelContent:"Custom Logic",inputId:t},o.a.createElement(O.a,{id:t,defaultValue:e.defaultValue})))};T.propTypes={defaultValue:u.a.string};var C=function(e){return o.a.createElement("ul",null,e.children)};C.propTypes={children:u.a.node};var I=function(e){return o.a.createElement("legend",{className:w()("slds-expression__legend",{"slds-expression__legend_group":e.isGroup})},e.legendText&&o.a.createElement("span",null,e.legendText),o.a.createElement("span",{className:"slds-assistive-text"},e.assistiveText))};I.propTypes={isGroup:u.a.bool,legendText:u.a.string,assistiveText:u.a.string};var D=function(e){return o.a.createElement("div",{className:w()("slds-col",{"slds-grow-none":e.doesNotGrow})},e.children)};D.propTypes={doesNotGrow:u.a.bool,children:u.a.node};var M=function(e){var t=e.isGroup,l=e.groupName,n=e.conditionName,a=e.placeholderText,s=e.resourceIsSelected,i=e.inputIsDisabled,r=e.hasError,c=e.errorMessage,d=e.buttonIsDisabled,u=e.legendText,p=S.d.uniqueId("listbox-id-"),h=S.d.uniqueId("listbox-id-"),x=S.d.uniqueId("text-input-id-"),_="error-message-unique-id";return o.a.createElement("li",{className:w()("slds-expression__row",{"slds-expression__row_group":t})},o.a.createElement("fieldset",null,o.a.createElement(I,{legendText:u,assistiveText:t?n+" of "+l:n}),o.a.createElement("div",{className:"slds-grid slds-gutters_xx-small"},o.a.createElement(D,null,o.a.createElement(E.b,{id:S.d.uniqueId("combobox-id-"),"aria-controls":p,label:"Resource",placeholder:a,selectOnly:!0,inputIconPosition:"right",value:s&&"Resource 1",formClassName:"slds-has-error",errorId:_,rightInputIcon:o.a.createElement(m.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(g.e,{id:p,hasUniqueId:!0,snapshot:s?y:v,type:"plain",count:4,visualSelection:!0}),resultsType:"listbox",hasInteractions:!0})),o.a.createElement(D,{doesNotGrow:!0},o.a.createElement(E.b,{id:S.d.uniqueId("combobox-id-"),"aria-controls":h,label:"Operator",placeholder:a,selectOnly:!0,inputIconPosition:"right",isDisabled:i,rightInputIcon:o.a.createElement(m.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(g.e,{id:h,hasUniqueId:!0,snapshot:j,type:"plain",count:4,visualSelection:!0}),resultsType:"listbox",hasInteractions:!0})),o.a.createElement(D,null,o.a.createElement(f.b,{hasError:r,labelContent:"Value",inputId:x,errorId:c&&_,inlineMessage:c},o.a.createElement(O.a,{disabled:i,id:x,"aria-describedby":c&&_}))),o.a.createElement(D,{doesNotGrow:!0},o.a.createElement(f.h,null,o.a.createElement(f.e,null," "),o.a.createElement(f.c,null,o.a.createElement(b.b,{theme:"neutral",symbol:"delete",disabled:d,assistiveText:t?"Delete "+n+" of "+l:"Delete "+n,title:t?"Delete "+n+" of "+l:"Delete "+n})))))))};M.propTypes={legendText:u.a.string,conditionName:u.a.string.isRequired,isGroup:u.a.bool,groupName:function(e,t){if(e.isGroup&&(void 0===e[t]\|\|"string"!=typeof e[t]))return new Error("Please provide a string of this row's group name for assistive text.")},inputIsDisabled:u.a.bool,buttonIsDisabled:u.a.bool,resourceIsSelected:u.a.bool,errorMessage:u.a.string,placeholderText:u.a.string},M.defaultProps={conditionName:"Condition 1",placeholderText:"Select…"};var G=function(e){return o.a.createElement("li",{className:"slds-expression__group"},o.a.createElement("fieldset",null,o.a.createElement(I,{legendText:e.legendText,assistiveText:e.assistiveText,isGroup:!0}),o.a.createElement(A,{optionSelected:e.optionSelected}),o.a.createElement("ul",null,e.children),o.a.createElement(R,{isGroup:!0})))};G.propTypes={legendText:u.a.string,assistiveText:u.a.string.isRequired,optionSelected:u.a.oneOf(["any","all","custom","formula","always","group"]),children:u.a.node},G.defaultProps={assistiveText:"Condition Group 1"};var R=function(e){return o.a.createElement("div",{className:"slds-expression__buttons"},o.a.createElement(h.a,{isNeutral:!0},o.a.createElement(p.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"add"}),"Add Condition"),!e.isGroup&&o.a.createElement(h.a,{isNeutral:!0},o.a.createElement(p.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"add"}),"Add Group"))};R.propTypes={isGroup:u.a.bool};var L=function(e){return o.a.createElement("div",{className:"slds-expression"},o.a.createElement("h2",{className:"slds-expression__title"},"Conditions"),o.a.createElement(A,{optionSelected:e.optionSelected}),e.hasCustomLogic&&o.a.createElement(T,{defaultValue:e.customLogicValue}),o.a.createElement(C,null,o.a.createElement(M,{legendText:e.legendText,assistiveText:"Condition 1",inputIsDisabled:e.inputIsDisabled,buttonIsDisabled:e.buttonIsDisabled,resourceIsSelected:e.resourceIsSelected}),e.children),o.a.createElement(R,null))};L.propTypes={hasCustomLogic:u.a.bool,legendText:u.a.string,inputIsDisabled:u.a.bool,buttonIsDisabled:u.a.bool,optionSelected:u.a.oneOf(["any","all","custom","formula","always"]),resourceIsSelected:u.a.bool,customLogicValue:u.a.string,children:u.a.node};var F=l(18),k=function(e){return o.a.createElement("div",{className:"slds-expression"},o.a.createElement(A,{optionSelected:e.optionSelected}),o.a.createElement("div",{className:"slds-expression_formula__rte"},o.a.createElement(F.a,{label:"Formula"},o.a.createElement(F.l,null,o.a.createElement(F.h,null)),o.a.createElement(F.k,{label:"Compose formula",placeholder:"Compose formula..."}))),o.a.createElement("div",{className:"slds-m-top_small"},o.a.createElement(h.a,{isNeutral:!0},"Check Syntax")))};k.propTypes={optionSelected:u.a.string};var q=l(40),B=function(e){return o.a.createElement("div",{className:"demo-only",style:{maxWidth:"320px",overflow:"hidden"}},e.children)};B.propTypes={children:u.a.node};var P=function(e){return o.a.createElement("div",{className:"slds-m-top_small"},o.a.createElement(h.a,{isNeutral:!0},o.a.createElement(p.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"add"}),"Add Condition"),e.hasGroup&&o.a.createElement(h.a,{isNeutral:!0},o.a.createElement(p.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"add"}),"Add Group"))};P.propTypes={hasGroup:u.a.bool};var W=function(e){return o.a.createElement("div",{className:"slds-filters__group"},o.a.createElement("div",{className:"slds-grid slds-grid_align-spread"},o.a.createElement("span",null,o.a.createElement("strong",null,"AND")),o.a.createElement("span",{className:"slds-assistive-text"},"Condition Group 1"),o.a.createElement(b.b,{className:"slds-button_icon slds-button_icon-small",iconClassName:"slds-button__icon_hint",symbol:"delete",assistiveText:"Remove Group",title:"Remove Group"})),o.a.createElement(A,{isInFilter:!0,optionSelected:e.optionSelected}),o.a.createElement("ol",null,o.a.createElement(q.a,{type:"Amount",removable:!0,removeSymbol:"delete"},'greater than "1000"')),o.a.createElement(P,null))};W.propTypes={optionSelected:u.a.string};var V=function(e){return o.a.createElement(B,null,o.a.createElement(q.c,null,o.a.createElement("h2",{className:"slds-text-heading_small"},"Conditions"),o.a.createElement("div",{className:"slds-m-vertical_small"},o.a.createElement(A,{isInFilter:!0,optionSelected:e.optionSelected})),o.a.createElement("ol",{className:"slds-list_vertical slds-list_vertical-space"},o.a.createElement(q.a,{type:"Amount",removable:!0,removeSymbol:"delete"},'greater than "1000"'),e.children),o.a.createElement(P,{hasGroup:!0})))};V.propTypes={optionSelected:u.a.string,children:u.a.node};q.a,q.b,q.a;var U=a.c.a,J=a.c.code,H=a.c.em,K=a.c.h2,z=a.c.h3,Q=a.c.h4,X=a.c.li,Y=a.c.ol,Z=a.c.p,$=a.c.strong,ee=a.c.ul,te=function(){return Object(n.createElement)(a.b,{},Object(n.createElement)("div",{className:"doc lead"},"Expression builders help users declaratively construct logical expressions. These expressions can be used when querying for a filtered set of records, creating rules to control when something executes, or any other conditional logic."),Object(n.createElement)(s.a,{exampleOnly:!0},Object(n.createElement)(L,{optionSelected:"all",inputIsDisabled:!0,buttonIsDisabled:!0})),K({id:"About-Expression-Builder"},"About Expression Builder"),Z({},"The variants scale from lightweight e-commerce style filtering to declarative rule building, and even to advanced formula or SOQL/SQL expressions."),Z({},"We also include size variants to fit a variety of use cases:"),ee({},X({},"Use the narrow version for in-context expression building, enabling users to preview their results."),X({},"Use the full width version when expression building is a standalone task, perhaps in a modal.")),z({id:"Accessibility"},"Accessibility"),Q({id:"Markup"},"Markup"),Z({},"Each row in the expression builder is a ",J({},"<fieldset>")," and is contained in an ",J({},"<li>")," inside of a ",J({},"<ul>"),"."),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("ul",null,Object(n.createElement)("li",{className:"slds-expression__row"},Object(n.createElement)("fieldset",null,Object(n.createElement)("legend",{className:"slds-expression__legend"},Object(n.createElement)("span",null,"AND"),Object(n.createElement)("span",{className:"slds-assistive-text"},"Condition N")),Object(n.createElement)("div",{className:"slds-expression__row_inputs"},"..."))))),Z({},"The first child DOM element of the ",J({},"<fieldset>")," should be the ",J({},"<legend>"),', which includes the logic operator, such as "AND" or "OR", and assistive text describing the current rule, such as "Condition 3".'),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("legend",{className:"slds-expression__legend"},Object(n.createElement)("span",null,"AND"),Object(n.createElement)("span",{className:"slds-assistive-text"},"Condition N"))),Q({id:"Focus-Management"},"Focus Management"),Z({},$({},"Adding:")),Z({},"When clicking ",J({},"Add Condition"),":"),ee({},X({},'Focus should move to the first combobox input in the new rule, labeled "Resource" or something similar')),Z({},"When clicking ",J({},"Add Group"),":"),ee({},X({},'Focus should move to the mode combobox in the new group, where "All Conditions Are Met For This Group" should be selected by default')),Z({},$({},"Deleting:")),Z({},'When "deleting" the only row:'),ee({},X({},"When there is only one row, the delete button is disabled until a Resource is selected."),X({},"If a Resource has been selected, then clicking the delete button resets to the ",U({href:"/components/expression/#Default"},"Default State"),", since there is a one row minimum. This includes:",Y({},X({},"Clear any comboboxes or inputs that have been changed from the default"),X({},'Use JavaScript to move focus to the "Resource" combobox input of that same row.'),X({},'Disable the "Operator" and "Value" inputs, as well as the Delete button')))),Z({},"When deleting the first row or a middle row:"),ee({},X({},"Use JavaScript to move focus to the first combobox input in the ",H({},"next"),' row, labeled "Resource" or something similar.')),Z({},"When deleting the last row:"),ee({},X({},"Use JavaScript to move focus to the first combobox input in the ",H({},"previous"),' row, labeled "Resource" or something similar.')),K({id:"Base"},"Base"),Object(n.createElement)(r.a,{title:"Expression Builder - Base"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",resourceIsSelected:!0}))),Z({},'By default, the expression builder starts with one condition. The default option for the mode combobox is "All Conditions Are Met". Until a Resource is selected, the Operator and Value fields, as well as the Delete button, are disabled.'),Z({},"The expression builder has a one row minimum requirement. Therefore, clicking the delete button on a single row will only clear any populated values from the inputs."),Object(n.createElement)(c.a,{header:"Label Note",type:"note"},Object(n.createElement)("p",null,'Be sure to show labels above all inputs. By default "Take Action When" is the label for the mode combobox. However, this should be updated based on the product or persona to best match the use case. Similarly, use “Resource”, “Operator”, and “Value” as labels in each row, but, when relevant, replace “Resource” with a more specific label for your use case (e.g. “Field”).')),z({id:"Initial-State"},"Initial State"),Z({},"Since the options in the Operator field and the type of component used for the Value field are dependent on the Resource selected, the Operator and Value Fields are disabled in the initial state until a Resource is selected. The Delete button is also disabled until a Resource is selected."),Object(n.createElement)(r.a,{title:"Expression Builder - Initial Disabled State"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",inputIsDisabled:!0,buttonIsDisabled:!0}))),z({id:"Resource-Selected"},"Resource Selected"),Z({},"Once a resource is selected, the values for the Operator field update to correspond with the type of Resource selected. Similarly, the component used for the Value field can be an input, combobox, picklist, or lookup, depending on what Resource was chosen."),Object(n.createElement)(r.a,{title:"Expression Builder - Initial State Resource Selected"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",resourceIsSelected:!0}))),z({id:"New-Condition-Added"},"New Condition Added"),Object(n.createElement)(r.a,{title:"Expression Builder - Condition Added"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",resourceIsSelected:!0},Object(n.createElement)(M,{legendText:"AND",conditionName:"Condition 2",inputIsDisabled:!0})))),z({id:"Error-State"},"Error State"),Object(n.createElement)(r.a,{title:"Expression Builder - Error State"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",resourceIsSelected:!0},Object(n.createElement)(M,{legendText:"AND",conditionName:"Condition 2",errorMessage:"Enter a value",hasError:!0})))),K({id:"All-or-Any-Conditions"},"All or Any Conditions"),Z({},'When the user selects "All Conditions Are Met" from the mode combobox and adds a second condition, the expression builder will use ',J({},"AND")," logic:"),Object(n.createElement)(r.a,{title:"Expression Builder - All Conditions"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",resourceIsSelected:!0},Object(n.createElement)(M,{legendText:"AND",conditionName:"Condition 2",resourceIsSelected:!0})))),Z({},'If the user selects "Any Condition Is Met" from the mode combobox, the expression builder will use ',J({},"OR")," logic:"),Object(n.createElement)(r.a,{title:"Expression Builder - Any Conditions"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"any",resourceIsSelected:!0},Object(n.createElement)(M,{legendText:"OR",conditionName:"Condition 2",resourceIsSelected:!0})))),z({id:"With-an-Expression-Group"},"With an Expression Group"),Z({},"To create more complex expressions, the user can add an expression group to create something like ",J({},"Condition 1 AND (Condition 2 OR Condition 3)")),Z({},$({},"Interaction Details:")),Y({},X({},"New groups are added when the ",J({},"Add Group")," button is selected"),X({},"The only mode combobox options inside of a group are ",J({},"All")," and ",J({},"Any")),X({},"Only one level of groups is desirable, so there is no ",J({},"Add Group")," button inside of a Group",ee({},X({},"All logical expressions can be written with one level of nesting, so this maintains the best readability"))),X({},"Deleting the only rule in a group removes the entire group"),X({},"If a group is added but the first, default rule has not been altered, the first rule is replaced by the group")),Object(n.createElement)(c.a,{header:"Label Note",type:"note"},Object(n.createElement)("p",null,'The values in the group mode combobox get "for This Group" appended, ex. "All Conditions are Met for This Group"')),Object(n.createElement)(r.a,{title:"Expression Builder - With Expression Group"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",resourceIsSelected:!0},Object(n.createElement)(G,{legendText:"AND",assistiveText:"Condition Group 1",optionSelected:"group",isGroup:!0},Object(n.createElement)(M,{conditionName:"Condition 1",isGroup:!0,groupName:"Condition Group 1",resourceIsSelected:!0}),Object(n.createElement)(M,{legendText:"OR",conditionName:"Condition 2",isGroup:!0,groupName:"Condition Group 1",inputIsDisabled:!0}))))),K({id:"Custom-Logic"},"Custom Logic"),Z({},"Another option for creating more complex expressions is using the Custom Logic variant. This allows users to manually type their custom logic into an input field, which references the numbered conditions below, like ",J({},"1 AND 2"),"."),Z({},$({},"Interaction Details:")),ee({},X({},'After switching the mode to "Custom Logic", the default custom logic text input should match the previous user selection.',Y({},X({},'For example, if the user was previously using "match Any", the input would default to something like ',J({},"1 OR 2")),X({},"If the user had added a group previously, the input should reflect that group as well, something like ",J({},"1 AND (2 OR 3)")),X({},'Otherwise, the input defaults to "match All", such as ',J({},"1 AND 2")))),X({},"New conditions are added to the end of the list, while ",J({},"AND n")," is added to the custom logic input text"),X({},"If a rule is removed, the custom logic should automatically rewrite to maintain intended logic")),Object(n.createElement)(r.a,{title:"Expression Builder - Custom Logic"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{hasCustomLogic:!0,customLogicValue:"1 AND 2",legendText:"1",optionSelected:"custom",resourceIsSelected:!0},Object(n.createElement)(M,{legendText:"2",conditionName:"Condition 2",inputIsDisabled:!0})))),K({id:"Formula-Logic"},"Formula Logic"),Z({},"The Formula variant provides the user the most customization for their expressions. Users can write free-form custom logic by using the insertion comboboxes and/or typing freely. By default, the formula variant does not appear with default text."),Z({},"Users can also validate the syntax to check for errors."),Object(n.createElement)(r.a,{title:"Expression Builder - Formula Logic"},Object(n.createElement)(s.a,null,Object(n.createElement)(k,{optionSelected:"formula"}))),K({id:"Narrow"},"Narrow"),Z({},"Use the narrow variant for in-context expression building, where users are able to immediately preview the results of their conditional logic, like a list or report."),Object(n.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(n.createElement)("p",null,"Be sure to use assistive text to improve the clarity of what the user might be editing. For example, add"," ",Object(n.createElement)("code",null,Object(n.createElement)("span",{className:"slds-assistive-text"},"Edit filter:"))," ","to each expression button element.")),Object(n.createElement)(r.a,{title:"Expression Builder - Narrow Variant"},Object(n.createElement)(s.a,null,Object(n.createElement)(V,{optionSelected:"all"}))),z({id:"With-an-Expression-Group-2"},"With an Expression Group"),Object(n.createElement)(r.a,{title:"Expression Builder - Narrow Variant with Group"},Object(n.createElement)(s.a,null,Object(n.createElement)(V,{optionSelected:"all"},Object(n.createElement)(q.a,{operator:"AND",type:"Status",removable:!0},"equals Red"),Object(n.createElement)(q.b,null,Object(n.createElement)(W,{optionSelected:"any"}))))),z({id:"Filtering"},"Filtering"),Z({},"One example of in-context expression building is filtering. To see examples of filtering logic inside of a panel, checkout our ",U({href:"/components/panels/#Panels-for-Filtering"},"Panel")," documentation"),Object(n.createElement)(r.a,{title:"Expression Builder - Filtering"},Object(n.createElement)(s.a,{demoStyles:"max-width: 320px;"},Object(n.createElement)(q.c,null,Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Show Me"},"All Products")),Object(n.createElement)("h3",{className:"slds-text-body_small slds-m-vertical_x-small"},"Matching all these filters"),Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Created Date",removable:!0},"equals THIS WEEK"),Object(n.createElement)(q.a,{type:"List Price",removable:!0},'greater than "500"')),Object(n.createElement)(q.d,null)))),Q({id:"Adding-a-new-filter"},"Adding a new filter"),Object(n.createElement)(r.a,{title:"Expression Builder - Filtering with new filter"},Object(n.createElement)(s.a,{demoStyles:"max-width: 320px;"},Object(n.createElement)(q.c,null,Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Show Me"},"All Products")),Object(n.createElement)("h3",{className:"slds-text-body_small slds-m-vertical_x-small"},"Matching all these filters"),Object(n.createElement)("ul",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Created Date",removable:!0},"equals THIS WEEK"),Object(n.createElement)(q.a,{type:"List Price",removable:!0},'greater than "500"'),Object(n.createElement)(q.a,{className:"slds-is-new",removable:!0},"New Filter")),Object(n.createElement)(q.d,null)))),Q({id:"With-an-error"},"With an error"),Object(n.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},"When an error message is displayed to the user, the"," ",Object(n.createElement)("code",null,"<div>")," containing the error message should have the ",Object(n.createElement)("code",null,'role="alert"')," attribute applied. This will immediately notify the user that an error has occurred."),Object(n.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(n.createElement)("p",null,"The filter button that has an error is associated to that error with the use of ",Object(n.createElement)("code",null,"aria-describedby"),". The value of"," ",Object(n.createElement)("code",null,"aria-describedby")," matches the ID given to the element that contains the corresponding error message.")),Object(n.createElement)(r.a,{title:"Expression Builder - Filtering with error"},Object(n.createElement)(s.a,{demoStyles:"max-width: 320px;"},Object(n.createElement)(q.c,null,Object(n.createElement)("div",{className:"slds-text-color_error slds-m-bottom_x-small",role:"alert"},"Filters could not be applied. Please fix the validation errors below."),Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Show Me"},"All Products")),Object(n.createElement)("h3",{className:"slds-text-body_small slds-m-vertical_x-small"},"Matching all these filters"),Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Created Date",removable:!0},"equals THIS WEEK"),Object(n.createElement)(q.a,{type:"List Price",removable:!0},'greater than "500"'),Object(n.createElement)(q.a,{className:"slds-has-error",type:"Stage",errorMessage:"Error Message",removable:!0},'equals "Red"')),Object(n.createElement)(q.d,null)))),Q({id:"With-locked-filters"},"With locked filters"),Object(n.createElement)(r.a,{title:"Expression Builder - Filtering with locked filters"},Object(n.createElement)(s.a,{demoStyles:"max-width: 320px;"},Object(n.createElement)(q.c,null,Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Show Me"},"All Products")),Object(n.createElement)("h3",{className:"slds-text-body_small slds-m-vertical_x-small"},"Matching all these filters"),Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Created Date",removable:!0},"equals THIS WEEK"),Object(n.createElement)(q.a,{type:"List Price",removable:!0},'greater than "500"')),Object(n.createElement)("h3",{className:"slds-text-body_small slds-m-vertical_x-small slds-grid"},"Locked Filters",Object(n.createElement)(p.a,{className:"slds-icon slds-icon_x-small slds-icon-text-default slds-m-left_x-small",sprite:"utility",symbol:"lock"})),Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{className:"slds-is-locked",type:"Name",disabled:!0},'equals "ACME"')),Object(n.createElement)(q.d,null)))))},le=function(){return Object(a.a)(te())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/expression/docs.mdx.js"]=function(e){function t(t){for(var n,s,i=t[0],r=t[1],c=t[2],u=0,m=[];u<i.length;u++)s=i[u],Object.prototype.hasOwnProperty.call(o,s)&&o[s]&&m.push(o[s][0]),o[s]=0;for(n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);for(d&&d(t);m.length;)m.shift()();return a.push.apply(a,c\|\|[]),l()}function l(){for(var e,t=0;t<a.length;t++){for(var l=a[t],n=!0,i=1;i<l.length;i++){var r=l[i];0!==o[r]&&(n=!1)}n&&(a.splice(t--,1),e=s(s.s=l[0]))}return e}var n={},o={35:0},a=[];function s(t){if(n[t])return n[t].exports;var l=n[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,s),l.l=!0,l.exports}s.m=e,s.c=n,s.d=function(e,t,l){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:l})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(s.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)s.d(l,n,function(t){return e[t]}.bind(null,n));return l},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=i.push.bind(i);i.push=t,i=i.slice();for(var c=0;c<i.length;c++)t(i[c]);var d=r;return a.push([662,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},662:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return te})),l.d(t,"getContents",(function(){return le}));var n=l(0),o=l.n(n),a=l(4),s=l(2),i=l(26),r=l(15),c=l(14),d=l(3),u=l.n(d),m=l(11),p=l(10),b=l(7),h=l(12),E=l(23),g=l(24),f=l(8),O=l(17),x={conditionOption1:{name:"All Conditions Are Met"},conditionOption2:{name:"Any Condition Is Met"},conditionOption3:{name:"Custom Logic Is Met"},conditionOption4:{name:"Always (No Criteria)"},conditionOption5:{name:"Formula Evaluates to True"}},v={resourceOption1:{name:"Resource 1"},resourceOption2:{name:"Resource 2"},resourceOption3:{name:"Resource 3"},resourceOption4:{name:"Resource 4"}},y={resourceOption1:{name:"Resource 1",selected:!0,focused:!0},resourceOption2:{name:"Resource 2"},resourceOption3:{name:"Resource 3"},resourceOption4:{name:"Resource 4"}},j={operatorOption1:{name:"Equals"},operatorOption2:{name:"Does Not Equal"},operatorOption3:{name:"Greater Than"},operatorOption4:{name:"Less Than"}},_={all:{snapshot:{conditionOption1:{name:"All Conditions Are Met",selected:!0,focused:!0},conditionOption2:{name:"Any Condition Is Met"},conditionOption3:{name:"Custom Logic Is Met"},conditionOption4:{name:"Always (No Criteria)"},conditionOption5:{name:"Formula Evaluates to True"}},value:"All Conditions Are Met"},any:{snapshot:{conditionOption1:{name:"All Conditions Are Met"},conditionOption2:{name:"Any Condition Is Met",selected:!0,focused:!0},conditionOption3:{name:"Custom Logic Is Met"},conditionOption4:{name:"Always (No Criteria)"},conditionOption5:{name:"Formula Evaluates to True"}},value:"Any Condition Is Met"},custom:{snapshot:{conditionOption1:{name:"All Conditions Are Met"},conditionOption2:{name:"Any Condition Is Met"},conditionOption3:{name:"Custom Logic Is Met",selected:!0,focused:!0},conditionOption4:{name:"Always (No Criteria)"},conditionOption5:{name:"Formula Evaluates to True"}},value:"Custom Logic Is Met"},always:{snapshot:{conditionOption1:{name:"All Conditions Are Met"},conditionOption2:{name:"Any Condition Is Met"},conditionOption3:{name:"Custom Logic Is Met"},conditionOption4:{name:"Always (No Criteria)",selected:!0,focused:!0},conditionOption5:{name:"Formula Evaluates to True"}},value:"Always (No Criteria)"},formula:{snapshot:{conditionOption1:{name:"All Conditions Are Met"},conditionOption2:{name:"Any Condition Is Met"},conditionOption3:{name:"Custom Logic Is Met"},conditionOption4:{name:"Always (No Criteria)"},conditionOption5:{name:"Formula Evaluates to True",selected:!0,focused:!0}},value:"Formula Evaluates to True"},group:{snapshot:{conditionOption1:{name:"All Conditions Are Met for This Group"},conditionOption2:{name:"Any Condition Is Met for This Group",selected:!0,focused:!0},conditionOption3:{name:"Custom Logic Is Met for This Group"},conditionOption4:{name:"Always (No Criteria)"},conditionOption5:{name:"Formula Evaluates to True"}},value:"Any Condition Is Met in This Group"}},N=l(5),w=l.n(N),S=l(1),A=function(e){var t=e.optionSelected,l=e.isInFilter,n=e.label,a=e.placeholderText,s=S.d.uniqueId("listbox-id-"),i=t&&_[t];return o.a.createElement("div",{className:w()(l?"slds-m-vertical_small":"slds-expression__options")},o.a.createElement(E.b,{id:S.d.uniqueId("combobox-id-"),"aria-controls":s,label:n,value:i&&i.value,placeholder:a,selectOnly:!0,inputIconPosition:"right",rightInputIcon:o.a.createElement(m.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(g.e,{id:s,hasUniqueId:!0,snapshot:i?i.snapshot:x,type:"plain",count:i?Object.keys(i.snapshot).length:Object.keys(x).length,visualSelection:!0}),resultsType:"listbox",hasInteractions:!0}))};A.propTypes={label:u.a.string.isRequired,isInFilter:u.a.bool,optionSelected:u.a.oneOf(["any","all","custom","formula","always","group"]),placeholderText:u.a.string},A.defaultProps={label:"Take Action When",placeholderText:"Select…"};var T=function(e){var t=S.d.uniqueId("text-input-id-");return o.a.createElement("div",{className:"slds-expression__custom-logic"},o.a.createElement(f.b,{labelContent:"Custom Logic",inputId:t},o.a.createElement(O.a,{id:t,defaultValue:e.defaultValue})))};T.propTypes={defaultValue:u.a.string};var C=function(e){return o.a.createElement("ul",null,e.children)};C.propTypes={children:u.a.node};var I=function(e){return o.a.createElement("legend",{className:w()("slds-expression__legend",{"slds-expression__legend_group":e.isGroup})},e.legendText&&o.a.createElement("span",null,e.legendText),o.a.createElement("span",{className:"slds-assistive-text"},e.assistiveText))};I.propTypes={isGroup:u.a.bool,legendText:u.a.string,assistiveText:u.a.string};var D=function(e){return o.a.createElement("div",{className:w()("slds-col",{"slds-grow-none":e.doesNotGrow})},e.children)};D.propTypes={doesNotGrow:u.a.bool,children:u.a.node};var M=function(e){var t=e.isGroup,l=e.groupName,n=e.conditionName,a=e.placeholderText,s=e.resourceIsSelected,i=e.inputIsDisabled,r=e.hasError,c=e.errorMessage,d=e.buttonIsDisabled,u=e.legendText,p=S.d.uniqueId("listbox-id-"),h=S.d.uniqueId("listbox-id-"),x=S.d.uniqueId("text-input-id-"),_="error-message-unique-id";return o.a.createElement("li",{className:w()("slds-expression__row",{"slds-expression__row_group":t})},o.a.createElement("fieldset",null,o.a.createElement(I,{legendText:u,assistiveText:t?n+" of "+l:n}),o.a.createElement("div",{className:"slds-grid slds-gutters_xx-small"},o.a.createElement(D,null,o.a.createElement(E.b,{id:S.d.uniqueId("combobox-id-"),"aria-controls":p,label:"Resource",placeholder:a,selectOnly:!0,inputIconPosition:"right",value:s&&"Resource 1",formClassName:"slds-has-error",errorId:_,rightInputIcon:o.a.createElement(m.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(g.e,{id:p,hasUniqueId:!0,snapshot:s?y:v,type:"plain",count:4,visualSelection:!0}),resultsType:"listbox",hasInteractions:!0})),o.a.createElement(D,{doesNotGrow:!0},o.a.createElement(E.b,{id:S.d.uniqueId("combobox-id-"),"aria-controls":h,label:"Operator",placeholder:a,selectOnly:!0,inputIconPosition:"right",isDisabled:i,rightInputIcon:o.a.createElement(m.a,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o.a.createElement(g.e,{id:h,hasUniqueId:!0,snapshot:j,type:"plain",count:4,visualSelection:!0}),resultsType:"listbox",hasInteractions:!0})),o.a.createElement(D,null,o.a.createElement(f.b,{hasError:r,labelContent:"Value",inputId:x,errorId:c&&_,inlineMessage:c},o.a.createElement(O.a,{disabled:i,id:x,"aria-describedby":c&&_}))),o.a.createElement(D,{doesNotGrow:!0},o.a.createElement(f.h,null,o.a.createElement(f.e,null," "),o.a.createElement(f.c,null,o.a.createElement(b.b,{theme:"neutral",symbol:"delete",disabled:d,assistiveText:t?"Delete "+n+" of "+l:"Delete "+n,title:t?"Delete "+n+" of "+l:"Delete "+n})))))))};M.propTypes={legendText:u.a.string,conditionName:u.a.string.isRequired,isGroup:u.a.bool,groupName:function(e,t){if(e.isGroup&&(void 0===e[t]\|\|"string"!=typeof e[t]))return new Error("Please provide a string of this row's group name for assistive text.")},inputIsDisabled:u.a.bool,buttonIsDisabled:u.a.bool,resourceIsSelected:u.a.bool,errorMessage:u.a.string,placeholderText:u.a.string},M.defaultProps={conditionName:"Condition 1",placeholderText:"Select…"};var G=function(e){return o.a.createElement("li",{className:"slds-expression__group"},o.a.createElement("fieldset",null,o.a.createElement(I,{legendText:e.legendText,assistiveText:e.assistiveText,isGroup:!0}),o.a.createElement(A,{optionSelected:e.optionSelected}),o.a.createElement("ul",null,e.children),o.a.createElement(R,{isGroup:!0})))};G.propTypes={legendText:u.a.string,assistiveText:u.a.string.isRequired,optionSelected:u.a.oneOf(["any","all","custom","formula","always","group"]),children:u.a.node},G.defaultProps={assistiveText:"Condition Group 1"};var R=function(e){return o.a.createElement("div",{className:"slds-expression__buttons"},o.a.createElement(h.a,{isNeutral:!0},o.a.createElement(p.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"add"}),"Add Condition"),!e.isGroup&&o.a.createElement(h.a,{isNeutral:!0},o.a.createElement(p.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"add"}),"Add Group"))};R.propTypes={isGroup:u.a.bool};var L=function(e){return o.a.createElement("div",{className:"slds-expression"},o.a.createElement("h2",{className:"slds-expression__title"},"Conditions"),o.a.createElement(A,{optionSelected:e.optionSelected}),e.hasCustomLogic&&o.a.createElement(T,{defaultValue:e.customLogicValue}),o.a.createElement(C,null,o.a.createElement(M,{legendText:e.legendText,assistiveText:"Condition 1",inputIsDisabled:e.inputIsDisabled,buttonIsDisabled:e.buttonIsDisabled,resourceIsSelected:e.resourceIsSelected}),e.children),o.a.createElement(R,null))};L.propTypes={hasCustomLogic:u.a.bool,legendText:u.a.string,inputIsDisabled:u.a.bool,buttonIsDisabled:u.a.bool,optionSelected:u.a.oneOf(["any","all","custom","formula","always"]),resourceIsSelected:u.a.bool,customLogicValue:u.a.string,children:u.a.node};var F=l(19),k=function(e){return o.a.createElement("div",{className:"slds-expression"},o.a.createElement(A,{optionSelected:e.optionSelected}),o.a.createElement("div",{className:"slds-expression_formula__rte"},o.a.createElement(F.a,{label:"Formula"},o.a.createElement(F.l,null,o.a.createElement(F.h,null)),o.a.createElement(F.k,{label:"Compose formula",placeholder:"Compose formula..."}))),o.a.createElement("div",{className:"slds-m-top_small"},o.a.createElement(h.a,{isNeutral:!0},"Check Syntax")))};k.propTypes={optionSelected:u.a.string};var q=l(41),B=function(e){return o.a.createElement("div",{className:"demo-only",style:{maxWidth:"320px",overflow:"hidden"}},e.children)};B.propTypes={children:u.a.node};var P=function(e){return o.a.createElement("div",{className:"slds-m-top_small"},o.a.createElement(h.a,{isNeutral:!0},o.a.createElement(p.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"add"}),"Add Condition"),e.hasGroup&&o.a.createElement(h.a,{isNeutral:!0},o.a.createElement(p.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"add"}),"Add Group"))};P.propTypes={hasGroup:u.a.bool};var W=function(e){return o.a.createElement("div",{className:"slds-filters__group"},o.a.createElement("div",{className:"slds-grid slds-grid_align-spread"},o.a.createElement("span",null,o.a.createElement("strong",null,"AND")),o.a.createElement("span",{className:"slds-assistive-text"},"Condition Group 1"),o.a.createElement(b.b,{className:"slds-button_icon slds-button_icon-small",iconClassName:"slds-button__icon_hint",symbol:"delete",assistiveText:"Remove Group",title:"Remove Group"})),o.a.createElement(A,{isInFilter:!0,optionSelected:e.optionSelected}),o.a.createElement("ol",null,o.a.createElement(q.a,{type:"Amount",removable:!0,removeSymbol:"delete"},'greater than "1000"')),o.a.createElement(P,null))};W.propTypes={optionSelected:u.a.string};var V=function(e){return o.a.createElement(B,null,o.a.createElement(q.c,null,o.a.createElement("h2",{className:"slds-text-heading_small"},"Conditions"),o.a.createElement("div",{className:"slds-m-vertical_small"},o.a.createElement(A,{isInFilter:!0,optionSelected:e.optionSelected})),o.a.createElement("ol",{className:"slds-list_vertical slds-list_vertical-space"},o.a.createElement(q.a,{type:"Amount",removable:!0,removeSymbol:"delete"},'greater than "1000"'),e.children),o.a.createElement(P,{hasGroup:!0})))};V.propTypes={optionSelected:u.a.string,children:u.a.node};q.a,q.b,q.a;var U=a.c.a,J=a.c.code,H=a.c.em,K=a.c.h2,z=a.c.h3,Q=a.c.h4,X=a.c.li,Y=a.c.ol,Z=a.c.p,$=a.c.strong,ee=a.c.ul,te=function(){return Object(n.createElement)(a.b,{},Object(n.createElement)("div",{className:"doc lead"},"Expression builders help users declaratively construct logical expressions. These expressions can be used when querying for a filtered set of records, creating rules to control when something executes, or any other conditional logic."),Object(n.createElement)(s.a,{exampleOnly:!0},Object(n.createElement)(L,{optionSelected:"all",inputIsDisabled:!0,buttonIsDisabled:!0})),K({id:"About-Expression-Builder"},"About Expression Builder"),Z({},"The variants scale from lightweight e-commerce style filtering to declarative rule building, and even to advanced formula or SOQL/SQL expressions."),Z({},"We also include size variants to fit a variety of use cases:"),ee({},X({},"Use the narrow version for in-context expression building, enabling users to preview their results."),X({},"Use the full width version when expression building is a standalone task, perhaps in a modal.")),z({id:"Accessibility"},"Accessibility"),Q({id:"Markup"},"Markup"),Z({},"Each row in the expression builder is a ",J({},"<fieldset>")," and is contained in an ",J({},"<li>")," inside of a ",J({},"<ul>"),"."),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("ul",null,Object(n.createElement)("li",{className:"slds-expression__row"},Object(n.createElement)("fieldset",null,Object(n.createElement)("legend",{className:"slds-expression__legend"},Object(n.createElement)("span",null,"AND"),Object(n.createElement)("span",{className:"slds-assistive-text"},"Condition N")),Object(n.createElement)("div",{className:"slds-expression__row_inputs"},"..."))))),Z({},"The first child DOM element of the ",J({},"<fieldset>")," should be the ",J({},"<legend>"),', which includes the logic operator, such as "AND" or "OR", and assistive text describing the current rule, such as "Condition 3".'),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("legend",{className:"slds-expression__legend"},Object(n.createElement)("span",null,"AND"),Object(n.createElement)("span",{className:"slds-assistive-text"},"Condition N"))),Q({id:"Focus-Management"},"Focus Management"),Z({},$({},"Adding:")),Z({},"When clicking ",J({},"Add Condition"),":"),ee({},X({},'Focus should move to the first combobox input in the new rule, labeled "Resource" or something similar')),Z({},"When clicking ",J({},"Add Group"),":"),ee({},X({},'Focus should move to the mode combobox in the new group, where "All Conditions Are Met For This Group" should be selected by default')),Z({},$({},"Deleting:")),Z({},'When "deleting" the only row:'),ee({},X({},"When there is only one row, the delete button is disabled until a Resource is selected."),X({},"If a Resource has been selected, then clicking the delete button resets to the ",U({href:"/components/expression/#Default"},"Default State"),", since there is a one row minimum. This includes:",Y({},X({},"Clear any comboboxes or inputs that have been changed from the default"),X({},'Use JavaScript to move focus to the "Resource" combobox input of that same row.'),X({},'Disable the "Operator" and "Value" inputs, as well as the Delete button')))),Z({},"When deleting the first row or a middle row:"),ee({},X({},"Use JavaScript to move focus to the first combobox input in the ",H({},"next"),' row, labeled "Resource" or something similar.')),Z({},"When deleting the last row:"),ee({},X({},"Use JavaScript to move focus to the first combobox input in the ",H({},"previous"),' row, labeled "Resource" or something similar.')),K({id:"Base"},"Base"),Object(n.createElement)(r.a,{title:"Expression Builder - Base"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",resourceIsSelected:!0}))),Z({},'By default, the expression builder starts with one condition. The default option for the mode combobox is "All Conditions Are Met". Until a Resource is selected, the Operator and Value fields, as well as the Delete button, are disabled.'),Z({},"The expression builder has a one row minimum requirement. Therefore, clicking the delete button on a single row will only clear any populated values from the inputs."),Object(n.createElement)(c.a,{header:"Label Note",type:"note"},Object(n.createElement)("p",null,'Be sure to show labels above all inputs. By default "Take Action When" is the label for the mode combobox. However, this should be updated based on the product or persona to best match the use case. Similarly, use “Resource”, “Operator”, and “Value” as labels in each row, but, when relevant, replace “Resource” with a more specific label for your use case (e.g. “Field”).')),z({id:"Initial-State"},"Initial State"),Z({},"Since the options in the Operator field and the type of component used for the Value field are dependent on the Resource selected, the Operator and Value Fields are disabled in the initial state until a Resource is selected. The Delete button is also disabled until a Resource is selected."),Object(n.createElement)(r.a,{title:"Expression Builder - Initial Disabled State"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",inputIsDisabled:!0,buttonIsDisabled:!0}))),z({id:"Resource-Selected"},"Resource Selected"),Z({},"Once a resource is selected, the values for the Operator field update to correspond with the type of Resource selected. Similarly, the component used for the Value field can be an input, combobox, picklist, or lookup, depending on what Resource was chosen."),Object(n.createElement)(r.a,{title:"Expression Builder - Initial State Resource Selected"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",resourceIsSelected:!0}))),z({id:"New-Condition-Added"},"New Condition Added"),Object(n.createElement)(r.a,{title:"Expression Builder - Condition Added"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",resourceIsSelected:!0},Object(n.createElement)(M,{legendText:"AND",conditionName:"Condition 2",inputIsDisabled:!0})))),z({id:"Error-State"},"Error State"),Object(n.createElement)(r.a,{title:"Expression Builder - Error State"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",resourceIsSelected:!0},Object(n.createElement)(M,{legendText:"AND",conditionName:"Condition 2",errorMessage:"Enter a value",hasError:!0})))),K({id:"All-or-Any-Conditions"},"All or Any Conditions"),Z({},'When the user selects "All Conditions Are Met" from the mode combobox and adds a second condition, the expression builder will use ',J({},"AND")," logic:"),Object(n.createElement)(r.a,{title:"Expression Builder - All Conditions"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",resourceIsSelected:!0},Object(n.createElement)(M,{legendText:"AND",conditionName:"Condition 2",resourceIsSelected:!0})))),Z({},'If the user selects "Any Condition Is Met" from the mode combobox, the expression builder will use ',J({},"OR")," logic:"),Object(n.createElement)(r.a,{title:"Expression Builder - Any Conditions"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"any",resourceIsSelected:!0},Object(n.createElement)(M,{legendText:"OR",conditionName:"Condition 2",resourceIsSelected:!0})))),z({id:"With-an-Expression-Group"},"With an Expression Group"),Z({},"To create more complex expressions, the user can add an expression group to create something like ",J({},"Condition 1 AND (Condition 2 OR Condition 3)")),Z({},$({},"Interaction Details:")),Y({},X({},"New groups are added when the ",J({},"Add Group")," button is selected"),X({},"The only mode combobox options inside of a group are ",J({},"All")," and ",J({},"Any")),X({},"Only one level of groups is desirable, so there is no ",J({},"Add Group")," button inside of a Group",ee({},X({},"All logical expressions can be written with one level of nesting, so this maintains the best readability"))),X({},"Deleting the only rule in a group removes the entire group"),X({},"If a group is added but the first, default rule has not been altered, the first rule is replaced by the group")),Object(n.createElement)(c.a,{header:"Label Note",type:"note"},Object(n.createElement)("p",null,'The values in the group mode combobox get "for This Group" appended, ex. "All Conditions are Met for This Group"')),Object(n.createElement)(r.a,{title:"Expression Builder - With Expression Group"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{optionSelected:"all",resourceIsSelected:!0},Object(n.createElement)(G,{legendText:"AND",assistiveText:"Condition Group 1",optionSelected:"group",isGroup:!0},Object(n.createElement)(M,{conditionName:"Condition 1",isGroup:!0,groupName:"Condition Group 1",resourceIsSelected:!0}),Object(n.createElement)(M,{legendText:"OR",conditionName:"Condition 2",isGroup:!0,groupName:"Condition Group 1",inputIsDisabled:!0}))))),K({id:"Custom-Logic"},"Custom Logic"),Z({},"Another option for creating more complex expressions is using the Custom Logic variant. This allows users to manually type their custom logic into an input field, which references the numbered conditions below, like ",J({},"1 AND 2"),"."),Z({},$({},"Interaction Details:")),ee({},X({},'After switching the mode to "Custom Logic", the default custom logic text input should match the previous user selection.',Y({},X({},'For example, if the user was previously using "match Any", the input would default to something like ',J({},"1 OR 2")),X({},"If the user had added a group previously, the input should reflect that group as well, something like ",J({},"1 AND (2 OR 3)")),X({},'Otherwise, the input defaults to "match All", such as ',J({},"1 AND 2")))),X({},"New conditions are added to the end of the list, while ",J({},"AND n")," is added to the custom logic input text"),X({},"If a rule is removed, the custom logic should automatically rewrite to maintain intended logic")),Object(n.createElement)(r.a,{title:"Expression Builder - Custom Logic"},Object(n.createElement)(s.a,null,Object(n.createElement)(L,{hasCustomLogic:!0,customLogicValue:"1 AND 2",legendText:"1",optionSelected:"custom",resourceIsSelected:!0},Object(n.createElement)(M,{legendText:"2",conditionName:"Condition 2",inputIsDisabled:!0})))),K({id:"Formula-Logic"},"Formula Logic"),Z({},"The Formula variant provides the user the most customization for their expressions. Users can write free-form custom logic by using the insertion comboboxes and/or typing freely. By default, the formula variant does not appear with default text."),Z({},"Users can also validate the syntax to check for errors."),Object(n.createElement)(r.a,{title:"Expression Builder - Formula Logic"},Object(n.createElement)(s.a,null,Object(n.createElement)(k,{optionSelected:"formula"}))),K({id:"Narrow"},"Narrow"),Z({},"Use the narrow variant for in-context expression building, where users are able to immediately preview the results of their conditional logic, like a list or report."),Object(n.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(n.createElement)("p",null,"Be sure to use assistive text to improve the clarity of what the user might be editing. For example, add"," ",Object(n.createElement)("code",null,Object(n.createElement)("span",{className:"slds-assistive-text"},"Edit filter:"))," ","to each expression button element.")),Object(n.createElement)(r.a,{title:"Expression Builder - Narrow Variant"},Object(n.createElement)(s.a,null,Object(n.createElement)(V,{optionSelected:"all"}))),z({id:"With-an-Expression-Group-2"},"With an Expression Group"),Object(n.createElement)(r.a,{title:"Expression Builder - Narrow Variant with Group"},Object(n.createElement)(s.a,null,Object(n.createElement)(V,{optionSelected:"all"},Object(n.createElement)(q.a,{operator:"AND",type:"Status",removable:!0},"equals Red"),Object(n.createElement)(q.b,null,Object(n.createElement)(W,{optionSelected:"any"}))))),z({id:"Filtering"},"Filtering"),Z({},"One example of in-context expression building is filtering. To see examples of filtering logic inside of a panel, checkout our ",U({href:"/components/panels/#Panels-for-Filtering"},"Panel")," documentation"),Object(n.createElement)(r.a,{title:"Expression Builder - Filtering"},Object(n.createElement)(s.a,{demoStyles:"max-width: 320px;"},Object(n.createElement)(q.c,null,Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Show Me"},"All Products")),Object(n.createElement)("h3",{className:"slds-text-body_small slds-m-vertical_x-small"},"Matching all these filters"),Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Created Date",removable:!0},"equals THIS WEEK"),Object(n.createElement)(q.a,{type:"List Price",removable:!0},'greater than "500"')),Object(n.createElement)(q.d,null)))),Q({id:"Adding-a-new-filter"},"Adding a new filter"),Object(n.createElement)(r.a,{title:"Expression Builder - Filtering with new filter"},Object(n.createElement)(s.a,{demoStyles:"max-width: 320px;"},Object(n.createElement)(q.c,null,Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Show Me"},"All Products")),Object(n.createElement)("h3",{className:"slds-text-body_small slds-m-vertical_x-small"},"Matching all these filters"),Object(n.createElement)("ul",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Created Date",removable:!0},"equals THIS WEEK"),Object(n.createElement)(q.a,{type:"List Price",removable:!0},'greater than "500"'),Object(n.createElement)(q.a,{className:"slds-is-new",removable:!0},"New Filter")),Object(n.createElement)(q.d,null)))),Q({id:"With-an-error"},"With an error"),Object(n.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},"When an error message is displayed to the user, the"," ",Object(n.createElement)("code",null,"<div>")," containing the error message should have the ",Object(n.createElement)("code",null,'role="alert"')," attribute applied. This will immediately notify the user that an error has occurred."),Object(n.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(n.createElement)("p",null,"The filter button that has an error is associated to that error with the use of ",Object(n.createElement)("code",null,"aria-describedby"),". The value of"," ",Object(n.createElement)("code",null,"aria-describedby")," matches the ID given to the element that contains the corresponding error message.")),Object(n.createElement)(r.a,{title:"Expression Builder - Filtering with error"},Object(n.createElement)(s.a,{demoStyles:"max-width: 320px;"},Object(n.createElement)(q.c,null,Object(n.createElement)("div",{className:"slds-text-color_error slds-m-bottom_x-small",role:"alert"},"Filters could not be applied. Please fix the validation errors below."),Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Show Me"},"All Products")),Object(n.createElement)("h3",{className:"slds-text-body_small slds-m-vertical_x-small"},"Matching all these filters"),Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Created Date",removable:!0},"equals THIS WEEK"),Object(n.createElement)(q.a,{type:"List Price",removable:!0},'greater than "500"'),Object(n.createElement)(q.a,{className:"slds-has-error",type:"Stage",errorMessage:"Error Message",removable:!0},'equals "Red"')),Object(n.createElement)(q.d,null)))),Q({id:"With-locked-filters"},"With locked filters"),Object(n.createElement)(r.a,{title:"Expression Builder - Filtering with locked filters"},Object(n.createElement)(s.a,{demoStyles:"max-width: 320px;"},Object(n.createElement)(q.c,null,Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Show Me"},"All Products")),Object(n.createElement)("h3",{className:"slds-text-body_small slds-m-vertical_x-small"},"Matching all these filters"),Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{type:"Created Date",removable:!0},"equals THIS WEEK"),Object(n.createElement)(q.a,{type:"List Price",removable:!0},'greater than "500"')),Object(n.createElement)("h3",{className:"slds-text-body_small slds-m-vertical_x-small slds-grid"},"Locked Filters",Object(n.createElement)(p.a,{className:"slds-icon slds-icon_x-small slds-icon-text-default slds-m-left_x-small",sprite:"utility",symbol:"lock"})),Object(n.createElement)("ol",{className:"slds-list_vertical slds-list_vertical-space"},Object(n.createElement)(q.a,{className:"slds-is-locked",type:"Name",disabled:!0},'equals "ACME"')),Object(n.createElement)(q.d,null)))))},le=function(){return Object(a.a)(te())}}});