@splunk/dynamic-editors 0.42.2 → 0.43.0

package/editors/MarkdownEditor.js

@@ -2,24 +2,21 @@
  * Copyright © 2018 Splunk Inc.
  * SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
  * in part without a valid written license from Splunk Inc. is PROHIBITED.
- */(()=>{"use strict";var e={7970:function(e,t,r){var n=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=r);var a=Object.getOwnPropertyDescriptor(t,r);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,a)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]}),a=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),o=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&n(t,e,r);return a(t,e),t},i=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const s=o(r(9497)),u=o(r(23)),l=i(r(232)),c=i(r(348));r(6265);const d=i(r(1018)),p=r(6649),f=i(r(6447)),m=r(3563),v=r(5135),b=r(962),g=r(137),h=l.default.div`
-    font-family: ${m.variables.sansFontFamily};
-    .react-mde * {
-        font-family: inherit;
+ */(()=>{"use strict";var e={7970:function(e,t,r){var n=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=r);var a=Object.getOwnPropertyDescriptor(t,r);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,a)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]}),a=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),o=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&n(t,e,r);return a(t,e),t},i=this&&this.__rest||function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(r[n[a]]=e[n[a]])}return r},s=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const u=o(r(9497)),l=o(r(23)),c=s(r(232)),d=r(1398),p=s(r(1018)),m=s(r(6447)),f=r(6649),b=r(8987),g=s(r(4703)),v=s(r(4723)),O=s(r(4784)),x=s(r(7110)),h=s(r(6078)),y=s(r(3757)),j=s(r(785)),_=s(r(6301)),k=s(r(821)),E=s(r(7020)),q=s(r(6379)),w=s(r(5905)),C=s(r(2621)),M=r(3563),P=r(5135),R=r(962),S=r(137),D=[Object.assign(Object.assign({},d.commands.heading3),{icon:u.createElement(O.default,null),name:"header"}),Object.assign(Object.assign({},d.commands.bold),{icon:u.createElement(g.default,null),name:"bold"}),Object.assign(Object.assign({},d.commands.italic),{icon:u.createElement(x.default,null),name:"italic"}),Object.assign(Object.assign({},d.commands.link),{icon:u.createElement(v.default,null),name:"link"}),Object.assign(Object.assign({},d.commands.quote),{icon:u.createElement(k.default,null),name:"quote"}),Object.assign(Object.assign({},d.commands.code),{icon:u.createElement(h.default,null),name:"code"}),Object.assign(Object.assign({},d.commands.image),{icon:u.createElement(y.default,null),name:"image"}),Object.assign(Object.assign({},d.commands.unorderedListCommand),{icon:u.createElement(j.default,null),name:"unordered-list"}),Object.assign(Object.assign({},d.commands.orderedListCommand),{icon:u.createElement(_.default,null),name:"ordered-list"})],L=c.default.div`
+    font-family: ${M.variables.sansFontFamily};
+`,T=c.default.div`
+    display: flex;
+    padding: 12px 0;
+    justify-content: space-between;
+`,F=(0,c.default)(w.default)`
+    [data-test='textbox'] {
+        resize: vertical;
     }
-    .mde-header,
-    .mde-preview,
-    .mde-textarea-wrapper textarea.mde-text {
-        background-color: ${m.variables.backgroundColorPopup};
-    }
-    .mde-header .mde-tabs button,
-    .mde-header ul.mde-header-group li.mde-header-item button,
-    .mde-textarea-wrapper textarea.mde-text {
-        color: ${m.variables.contentColorActive};
-    }
-`,_=l.default.div`
+`,I=c.default.div`
     display: none;
-`,y={error:1,warning:2,other:3},x=({onChange:e,defaultErrors:t={},name:r,value:n=""})=>{const[a,o]=s.useState("write"),[i,u]=s.useState(n),[l,m]=s.useState(t),x=s.useCallback((e=>u(e)),[u]),O=s.useCallback((a=>{i!==n&&(e(a,r,i),m(t))}),[i,n,e,r,t]),M=s.useMemo((()=>{let e=null;return Object.values(l).includes("error")?e=s.createElement(b.CSPMessage,{type:"error"}):Object.values(l).includes("warning")&&(e=s.createElement(b.CSPMessage,{type:"warning"})),Object.values(l).includes("other")&&(e=s.createElement(s.Fragment,null,e,s.createElement(f.default,{appearance:"fill",type:"error","data-test":"image-error"},(0,p._)("We can't find an image with this URL. Please enter a new URL")))),e}),[Object.values(l).join("")]),j=s.useMemo((()=>{return s.createElement(_,null,s.createElement(d.default,{text:n,imageRenderer:(e=(e,t)=>{var r,n;(null!==(r=y[l[e]])&&void 0!==r?r:1/0)>(null!==(n=y[t])&&void 0!==n?n:0)&&m(Object.assign(Object.assign({},l),{[e]:t}))},function({src:t,alt:r}){const n=(0,v.useCSPViolationObserver)(t);return s.useEffect((()=>{"none"!==n&&e(t,n)}),[n,t]),s.createElement("img",{src:t,alt:r,onError:()=>{"none"===n&&e(t,"other")}})})}));var e}),[n,l]);return s.createElement(h,{"data-test":r},s.createElement(c.default,{value:i,toolbarCommands:[["header","bold","italic","link","quote","code","image","unordered-list","ordered-list"]],onChange:x,selectedTab:a,onTabChange:o,disablePreview:!0,childProps:{textArea:{onBlur:O}}}),j,M&&s.createElement(g.MessageContainer,null,M))};x.propTypes={onChange:u.func.isRequired,name:u.string.isRequired,value:u.string,defaultErrors:u.string},t.default=x},5135:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useCSPViolationObserver=void 0;const n=r(9497);t.useCSPViolationObserver=(e,t="none")=>{const[r,a]=(0,n.useState)(t);return(0,n.useEffect)((()=>{const r=t=>{t.blockedURI!==e&&t.blockedURI!==`${e}/`||"enforce"!==t.disposition?t.blockedURI!==e&&t.blockedURI!==`${e}/`||"report"!==t.disposition||a("warning"):a("error")};return document.addEventListener("securitypolicyviolation",r),a(t),()=>{document.removeEventListener("securitypolicyviolation",r)}}),[e]),r}},962:function(e,t,r){var n=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=r);var a=Object.getOwnPropertyDescriptor(t,r);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,a)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]}),a=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),o=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&n(t,e,r);return a(t,e),t},i=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.CSPMessage=void 0;const s=o(r(9497)),u=r(6649),l=i(r(6447)),c=i(r(451)),d=i(r(5711));t.CSPMessage=({type:e})=>{const{cspMessageLink:t}=s.useContext(d.default);return s.createElement(l.default,{appearance:"fill",type:e,"data-test":`csp-message-${e}`},(0,u._)("External image URLs must now have their domains listed in the Dashboards Trusted Domains List by working with your administrator. Alternatively, you can upload the image directly into the dashboard. "),t&&s.createElement(c.default,{to:t,openInNewContext:!0},(0,u._)("Learn more")))}},137:function(e,t,r){var n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.MessageContainer=void 0;const a=n(r(232));t.MessageContainer=a.default.div`
+`,B=(0,c.default)(E.default)`
+    flex: 0;
+`,$={error:1,warning:2,other:3},A=u.memo((({command:e,isFocusable:t,onFocus:r,onExecute:n})=>{const{icon:a,buttonProps:o}=e,{title:s}=o||{};return u.createElement(q.default,{content:s||"",contentRelationship:"label",renderAnchor:o=>{var{onFocus:s,onClick:l}=o,c=i(o,["onFocus","onClick"]);return u.createElement(B,Object.assign({appearance:"subtle","data-name":e.name,onFocus:t=>{s(t),r(e.name||"")},tabIndex:t?0:-1,onClick:t=>{l(t),n(e)}},c),a)}})}));A.displayName="ToolbarButton",A.propTypes={command:l.object.isRequired,isFocusable:l.bool.isRequired,onFocus:l.func.isRequired,onExecute:l.func.isRequired};const U=({onChange:e,name:t,value:r="",defaultErrors:n={}})=>{const a=u.useMemo((()=>(0,b.createDOMID)("markdown-editor")),[]),o=u.useRef(null),[i,s]=u.useState(r),[l,c]=u.useState(D[0].name||""),g=u.useRef(null),[v,O]=u.useState(n);u.useEffect((()=>(o.current&&!g.current&&(g.current=new d.TextAreaCommandOrchestrator(o.current)),()=>{g.current=null})),[]);const x=u.useCallback(((e,{value:t})=>{s(t)}),[]),h=u.useCallback((a=>{i!==r&&(e(a,t,i),O(n))}),[i,r,e,t,n]),y=u.useCallback((e=>{g.current&&o.current&&(g.current.executeCommand(e),s(o.current.value))}),[]),j=u.useMemo((()=>{let e=null;return Object.values(v).includes("error")?e=u.createElement(R.CSPMessage,{type:"error"}):Object.values(v).includes("warning")&&(e=u.createElement(R.CSPMessage,{type:"warning"})),Object.values(v).includes("other")&&(e=u.createElement(u.Fragment,null,e,u.createElement(m.default,{appearance:"fill",type:"error","data-test":"image-error"},(0,f._)("We can't find an image with this URL. Please enter a new URL")))),e}),[Object.values(v).join("")]),_=u.useMemo((()=>{return u.createElement(I,null,u.createElement(p.default,{text:r,imageRenderer:(e=(e,t)=>{var r,n;(null!==(r=$[v[e]])&&void 0!==r?r:1/0)>(null!==(n=$[t])&&void 0!==n?n:0)&&O(Object.assign(Object.assign({},v),{[e]:t}))},function({src:t,alt:r}){const n=(0,P.useCSPViolationObserver)(t);return u.useEffect((()=>{"none"!==n&&e(t,n)}),[n,t]),u.createElement("img",{src:t,alt:r,onError:()=>{"none"===n&&e(t,"other")}})})}));var e}),[r,v]),k=u.useCallback((e=>{var t,r;const n=e.target;if("BUTTON"!==n.tagName)return;const a=e.currentTarget,o=Array.from(a.querySelectorAll("button")),i=o.indexOf(n);if(-1===i)return;const s="ArrowLeft"===e.key,u="ArrowRight"===e.key,l="Home"===e.key,c="End"===e.key;let d=null;s?d=null!==(t=o[i-1])&&void 0!==t?t:o[o.length-1]:u?d=null!==(r=o[i+1])&&void 0!==r?r:o[0]:l?[d]=o:c&&(d=o[o.length-1]),d&&(e.preventDefault(),d.focus())}),[]),E=u.useCallback((e=>{(0,d.handleKeyDown)(e,2,!0),g.current&&((0,d.shortcuts)(e,D,g.current),o.current&&s(o.current.value))}),[]);return u.createElement(L,{"data-test":t},u.createElement(T,{role:"toolbar","aria-label":(0,f._)("Markdown formatting"),"aria-orientation":"horizontal","aria-controls":`${a}-textarea`,onKeyDown:k},D.map((e=>u.createElement(A,{key:e.name,command:e,isFocusable:l===e.name,onFocus:c,onExecute:y})))),u.createElement(C.default,{id:`${a}-textarea-label`},(0,f._)("Markdown editor")),u.createElement(F,{inputRef:o,"data-test":`${t}-textarea`,id:`${a}-textarea`,labelledBy:`${a}-textarea-label`,value:i,onChange:x,onBlur:h,onKeyDown:E}),_,j&&u.createElement(S.MessageContainer,null,j))};U.propTypes={onChange:l.func.isRequired,name:l.string.isRequired,value:l.string,defaultErrors:l.objectOf(l.oneOf(["warning","error","other"]))},t.default=U},5135:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useCSPViolationObserver=void 0;const n=r(9497);t.useCSPViolationObserver=(e,t="none")=>{const[r,a]=(0,n.useState)(t);return(0,n.useEffect)((()=>{const r=t=>{t.blockedURI!==e&&t.blockedURI!==`${e}/`||"enforce"!==t.disposition?t.blockedURI!==e&&t.blockedURI!==`${e}/`||"report"!==t.disposition||a("warning"):a("error")};return document.addEventListener("securitypolicyviolation",r),a(t),()=>{document.removeEventListener("securitypolicyviolation",r)}}),[e]),r}},962:function(e,t,r){var n=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=r);var a=Object.getOwnPropertyDescriptor(t,r);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,a)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]}),a=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),o=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&n(t,e,r);return a(t,e),t},i=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.CSPMessage=void 0;const s=o(r(9497)),u=r(6649),l=i(r(6447)),c=i(r(451)),d=i(r(5711));t.CSPMessage=({type:e})=>{const{cspMessageLink:t}=s.useContext(d.default);return s.createElement(l.default,{appearance:"fill",type:e,"data-test":`csp-message-${e}`},(0,u._)("External image URLs must now have their domains listed in the Dashboards Trusted Domains List by working with your administrator. Alternatively, you can upload the image directly into the dashboard. "),t&&s.createElement(c.default,{to:t,openInNewContext:!0},(0,u._)("Learn more")))}},137:function(e,t,r){var n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.MessageContainer=void 0;const a=n(r(232));t.MessageContainer=a.default.div`
     margin-top: 10px;
-`},451:e=>{e.exports=require("@splunk/react-ui/Link")},1018:e=>{e.exports=require("@splunk/react-ui/Markdown")},6447:e=>{e.exports=require("@splunk/react-ui/Message")},3563:e=>{e.exports=require("@splunk/themes")},6649:e=>{e.exports=require("@splunk/ui-utils/i18n")},5711:e=>{e.exports=require("@splunk/visualization-context/MessageContext")},23:e=>{e.exports=require("prop-types")},9497:e=>{e.exports=require("react")},348:e=>{e.exports=require("react-mde")},6265:e=>{e.exports=require("react-mde/lib/styles/css/react-mde-all.css")},232:e=>{e.exports=require("styled-components")}},t={};var r=function r(n){var a=t[n];if(void 0!==a)return a.exports;var o=t[n]={exports:{}};return e[n].call(o.exports,o,o.exports,r),o.exports}(7970);module.exports=r})();
+`},4723:e=>{e.exports=require("@splunk/react-icons/Chain")},6078:e=>{e.exports=require("@splunk/react-icons/ChevronsSlash")},785:e=>{e.exports=require("@splunk/react-icons/List")},6301:e=>{e.exports=require("@splunk/react-icons/ListNumbered")},3757:e=>{e.exports=require("@splunk/react-icons/Picture")},821:e=>{e.exports=require("@splunk/react-icons/QuotationDouble")},4703:e=>{e.exports=require("@splunk/react-icons/TextBBold")},4784:e=>{e.exports=require("@splunk/react-icons/TextH")},7110:e=>{e.exports=require("@splunk/react-icons/TextIItalic")},7020:e=>{e.exports=require("@splunk/react-ui/Button")},451:e=>{e.exports=require("@splunk/react-ui/Link")},1018:e=>{e.exports=require("@splunk/react-ui/Markdown")},6447:e=>{e.exports=require("@splunk/react-ui/Message")},2621:e=>{e.exports=require("@splunk/react-ui/ScreenReaderContent")},5905:e=>{e.exports=require("@splunk/react-ui/TextArea")},6379:e=>{e.exports=require("@splunk/react-ui/Tooltip")},3563:e=>{e.exports=require("@splunk/themes")},6649:e=>{e.exports=require("@splunk/ui-utils/i18n")},8987:e=>{e.exports=require("@splunk/ui-utils/id")},5711:e=>{e.exports=require("@splunk/visualization-context/MessageContext")},1398:e=>{e.exports=require("@uiw/react-md-editor/nohighlight")},23:e=>{e.exports=require("prop-types")},9497:e=>{e.exports=require("react")},232:e=>{e.exports=require("styled-components")}},t={};var r=function r(n){var a=t[n];if(void 0!==a)return a.exports;var o=t[n]={exports:{}};return e[n].call(o.exports,o,o.exports,r),o.exports}(7970);module.exports=r})();
 //# sourceMappingURL=MarkdownEditor.js.map

package/editors/MarkdownEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownEditor.js","mappings":";;;;2zBAAA,mBACA,WACA,YACA,YACA,QACA,mBACA,UACA,aACA,UACA,UACA,SACA,SAEMA,EAAgC,UAAOC,GAAG;mBAC7B,EAAAC,UAAUC;;;;;;;4BAOD,EAAAD,UAAUE;;;;;iBAKrB,EAAAF,UAAUG;;EAIrBC,EAAgB,UAAOL,GAAG;;EAyB1BM,EAAgB,CAClBC,MAAO,EACPC,QAAS,EACTC,MAAO,GAYLC,EAAiB,EAAGC,WAAUC,gBAAgB,CAAC,EAAGC,OAAMC,QAAQ,OAClE,MAAOC,EAAaC,GAAkBC,EAAMC,SAA8B,UACnEC,EAAKC,GAAiBH,EAAMC,SAASJ,IACrCO,EAAQC,GAAaL,EAAMC,SAAqBN,GAEjDW,EAAoBN,EAAMO,aAAYC,GAAKL,EAAcK,IAAI,CAACL,IAC9DM,EAAaT,EAAMO,aACrBG,IACQR,IAAQL,IACRH,EAASgB,EAAOd,EAAMM,GACtBG,EAAUV,GACd,GAEJ,CAACO,EAAKL,EAAOH,EAAUE,EAAMD,IAO3BgB,EAAeX,EAAMY,SAAQ,KAC/B,IAAIC,EAAU,KAgBd,OAfIC,OAAOC,OAAOX,GAAQY,SAAS,SAC/BH,EAAU,gBAAC,EAAAI,WAAU,CAACC,KAAK,UACpBJ,OAAOC,OAAOX,GAAQY,SAAS,aACtCH,EAAU,gBAAC,EAAAI,WAAU,CAACC,KAAK,aAE3BJ,OAAOC,OAAOX,GAAQY,SAAS,WAC/BH,EACI,gCACKA,EACD,gBAAC,UAAO,CAACM,WAAW,OAAOD,KAAK,QAAO,YAAW,gBAC7C,IAAAE,GAAE,mEAKZP,CAAO,GAEf,CAACC,OAAOC,OAAOX,GAAQiB,KAAK,MAEzBC,EAAwBtB,EAAMY,SAChC,KAAM,OACF,gBAACxB,EAAa,KACV,gBAAC,UAAQ,CACLmC,KAAM1B,EACN2B,eAlFMC,EAkF2B,CAACC,EAAKpC,K,SACJ,QAA1B,EAAAD,EAAce,EAAOsB,WAAK,QAAIC,MAAiC,QAApB,EAAAtC,EAAcC,UAAM,QAAI,IACpEe,EAAU,OAAD,wBAAMD,GAAM,CAAE,CAACsB,GAAMpC,IAClC,EApFpB,UAAuB,IAAEoC,EAAG,IAAEE,IAC1B,MAAMC,GAAgB,IAAAC,yBAAwBJ,GAM9C,OALA1B,EAAM+B,WAAU,KACU,SAAlBF,GACAJ,EAAcC,EAAKG,EACvB,GACD,CAACA,EAAeH,IAEf,uBACIA,IAAKA,EACLE,IAAKA,EACLI,QAAS,KACiB,SAAlBH,GACAJ,EAAcC,EAAK,QACvB,GAIhB,MAnBsBD,KAyFjB,GACD,CAAC5B,EAAOO,IAGZ,OACI,gBAACtB,EAA6B,aAAYc,GACtC,gBAAC,UAAQ,CACLC,MAAOK,EACP+B,gBA7CY,CACpB,CAAC,SAAU,OAAQ,SAAU,OAAQ,QAAS,OAAQ,QAAS,iBAAkB,iBA6CzEvC,SAAUY,EACVR,YAAaA,EACboC,YAAanC,EACboC,gBAAc,EACdC,WAAY,CACRC,SAAU,CACNC,OAAQ7B,MAInBa,EACAX,GAAgB,gBAAC,EAAA4B,iBAAgB,KAAE5B,GAE3C,EAGLlB,EAAe+C,UAAY,CAIvB9C,SAAU+C,EAAEC,KAAKC,WAIjB/C,KAAM6C,EAAEG,OAAOD,WAIf9C,MAAO4C,EAAEG,OAITjD,cAAe8C,EAAEG,QAGrB,UAAenD,C,mGCvKf,gBA0BS,EAAAqC,wBAtBuB,CAACJ,EAAamB,EAA8B,UACxE,MAAOC,EAAWC,IAAgB,IAAA9C,UAAwB4C,GAkB1D,OAjBA,IAAAd,YAAU,KACN,MAAMiB,EAAmBC,IAChBA,EAAEC,aAAexB,GAAOuB,EAAEC,aAAe,GAAGxB,MAA6B,YAAlBuB,EAAEE,YAIlDF,EAAEC,aAAexB,GAAOuB,EAAEC,aAAe,GAAGxB,MAA6B,WAAlBuB,EAAEE,aACjEJ,EAAa,WAFbA,EAAa,QAGjB,EAIJ,OAFAK,SAASC,iBAAiB,0BAA2BL,GACrDD,EAAaF,GACN,KACHO,SAASE,oBAAoB,0BAA2BN,EAAiB,CAC5E,GAEF,CAACtB,IACGoB,CAAS,C,mzBCvBpB,mBACA,UACA,aACA,YACA,aAIa,EAAA7B,WAAa,EAAGC,WACzB,MAAM,eAAEqC,GAAmBvD,EAAMwD,WAAW,WAC5C,OACI,gBAAC,UAAO,CAACrC,WAAW,OAAOD,KAAMA,EAAI,YAAa,eAAeA,MAC5D,IAAAE,GACG,2MAEHmC,GACG,gBAAC,UAAI,CAACE,GAAIF,EAAgBG,kBAAgB,IACrC,IAAAtC,GAAE,eAIlB,C,qLCrBL,kBAEa,EAAAmB,iBAAmB,UAAOxD,GAAG;;WCF1C4E,EAAOC,QAAUC,QAAQ,wB,WCAzBF,EAAOC,QAAUC,QAAQ,4B,WCAzBF,EAAOC,QAAUC,QAAQ,2B,WCAzBF,EAAOC,QAAUC,QAAQ,iB,WCAzBF,EAAOC,QAAUC,QAAQ,wB,WCAzBF,EAAOC,QAAUC,QAAQ,+C,SCAzBF,EAAOC,QAAUC,QAAQ,a,WCAzBF,EAAOC,QAAUC,QAAQ,Q,UCAzBF,EAAOC,QAAUC,QAAQ,Y,WCAzBF,EAAOC,QAAUC,QAAQ,6C,UCAzBF,EAAOC,QAAUC,QAAQ,oB,GCCrBC,EAA2B,CAAC,ECEhC,IAAIC,EDCJ,SAASC,EAAoBC,GAE5B,IAAIC,EAAeJ,EAAyBG,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAaN,QAGrB,IAAID,EAASG,EAAyBG,GAAY,CAGjDL,QAAS,CAAC,GAOX,OAHAQ,EAAoBH,GAAUI,KAAKV,EAAOC,QAASD,EAAQA,EAAOC,QAASI,GAGpEL,EAAOC,OACf,CCnB0BI,CAAoB,M","sources":["webpack://@splunk/dynamic-editors/./src/editors/MarkdownEditor.tsx","webpack://@splunk/dynamic-editors/./src/hooks/useCSPViolationObserver.tsx","webpack://@splunk/dynamic-editors/./src/shared/CSPMessage.tsx","webpack://@splunk/dynamic-editors/./src/shared/MessageContainer.tsx","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/Link\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/Markdown\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/Message\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/themes\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/ui-utils/i18n\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/visualization-context/MessageContext\"","webpack://@splunk/dynamic-editors/external commonjs2 \"prop-types\"","webpack://@splunk/dynamic-editors/external commonjs2 \"react\"","webpack://@splunk/dynamic-editors/external commonjs2 \"react-mde\"","webpack://@splunk/dynamic-editors/external commonjs2 \"react-mde/lib/styles/css/react-mde-all.css\"","webpack://@splunk/dynamic-editors/external commonjs2 \"styled-components\"","webpack://@splunk/dynamic-editors/webpack/bootstrap","webpack://@splunk/dynamic-editors/webpack/startup"],"sourcesContent":["import * as React from 'react';\nimport * as T from 'prop-types';\nimport styled from 'styled-components';\nimport ReactMde from 'react-mde';\nimport 'react-mde/lib/styles/css/react-mde-all.css';\nimport Markdown from '@splunk/react-ui/Markdown';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport Message from '@splunk/react-ui/Message';\nimport { variables } from '@splunk/themes';\nimport { useCSPViolationObserver } from '../hooks/useCSPViolationObserver';\nimport { CSPMessage } from '../shared/CSPMessage';\nimport { MessageContainer } from '../shared/MessageContainer';\n\nconst StyledMarkdownEditorContainer = styled.div`\n    font-family: ${variables.sansFontFamily};\n    .react-mde * {\n        font-family: inherit;\n    }\n    .mde-header,\n    .mde-preview,\n    .mde-textarea-wrapper textarea.mde-text {\n        background-color: ${variables.backgroundColorPopup};\n    }\n    .mde-header .mde-tabs button,\n    .mde-header ul.mde-header-group li.mde-header-item button,\n    .mde-textarea-wrapper textarea.mde-text {\n        color: ${variables.contentColorActive};\n    }\n`;\n\nconst HiddenPreview = styled.div`\n    display: none;\n`;\n\nconst getCustomRenderer = errorCallback =>\n    function ImageRenderer({ src, alt }: { src: string; alt: string }) {\n        const violationType = useCSPViolationObserver(src);\n        React.useEffect(() => {\n            if (violationType !== 'none') {\n                errorCallback(src, violationType);\n            }\n        }, [violationType, src]);\n        return (\n            <img\n                src={src}\n                alt={alt}\n                onError={() => {\n                    if (violationType === 'none') {\n                        errorCallback(src, 'other');\n                    }\n                }}\n            />\n        );\n    };\n\nconst errorPriority = {\n    error: 1,\n    warning: 2,\n    other: 3,\n} as const;\n\n/**\n * an object mapping resource URLs to error types\n * e.g. { \"https://foo.com\": \"warning\" }\n */\ntype ErrorState = {\n    [url: string]: 'warning' | 'error' | 'other';\n};\n\n// TODO: Type this component\nconst MarkdownEditor = ({ onChange, defaultErrors = {}, name, value = '' }): React.ReactElement => {\n    const [selectedTab, setSelectedTab] = React.useState<'write' | 'preview'>('write');\n    const [val, setValueState] = React.useState(value);\n    const [errors, setErrors] = React.useState<ErrorState>(defaultErrors);\n\n    const handleValueChange = React.useCallback(v => setValueState(v), [setValueState]);\n    const handleBlur = React.useCallback(\n        event => {\n            if (val !== value) {\n                onChange(event, name, val);\n                setErrors(defaultErrors);\n            }\n        },\n        [val, value, onChange, name, defaultErrors]\n    );\n    // This excludes 'strikethrough' and 'checked-list' which is in default toolbar, as markdown component doesnt support it yet\n    const toolbarCommands = [\n        ['header', 'bold', 'italic', 'link', 'quote', 'code', 'image', 'unordered-list', 'ordered-list'],\n    ];\n\n    const errorMessage = React.useMemo(() => {\n        let message = null;\n        if (Object.values(errors).includes('error')) {\n            message = <CSPMessage type=\"error\" />;\n        } else if (Object.values(errors).includes('warning')) {\n            message = <CSPMessage type=\"warning\" />;\n        }\n        if (Object.values(errors).includes('other')) {\n            message = (\n                <>\n                    {message}\n                    <Message appearance=\"fill\" type=\"error\" data-test=\"image-error\">\n                        {_(\"We can't find an image with this URL. Please enter a new URL\")}\n                    </Message>\n                </>\n            );\n        }\n        return message;\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [Object.values(errors).join('')]);\n\n    const hiddenMarkdownPreview = React.useMemo(\n        () => (\n            <HiddenPreview>\n                <Markdown\n                    text={value}\n                    imageRenderer={getCustomRenderer((src, error) => {\n                        if ((errorPriority[errors[src]] ?? Infinity) > (errorPriority[error] ?? 0)) {\n                            setErrors({ ...errors, [src]: error });\n                        }\n                    })}\n                />\n            </HiddenPreview>\n        ),\n        [value, errors]\n    );\n\n    return (\n        <StyledMarkdownEditorContainer data-test={name}>\n            <ReactMde\n                value={val}\n                toolbarCommands={toolbarCommands}\n                onChange={handleValueChange}\n                selectedTab={selectedTab}\n                onTabChange={setSelectedTab}\n                disablePreview\n                childProps={{\n                    textArea: {\n                        onBlur: handleBlur,\n                    },\n                }}\n            />\n            {hiddenMarkdownPreview}\n            {errorMessage && <MessageContainer>{errorMessage}</MessageContainer>}\n        </StyledMarkdownEditorContainer>\n    );\n};\n\nMarkdownEditor.propTypes = {\n    /**\n     * Callback when markdown input is changed\n     */\n    onChange: T.func.isRequired,\n    /**\n     * Name of the markdown editor\n     */\n    name: T.string.isRequired,\n    /**\n     * Markdown input string in the editor\n     */\n    value: T.string,\n    /**\n     * Simulate CSP Violation Error\n     */\n    defaultErrors: T.string,\n};\n\nexport default MarkdownEditor;\n","import { useState, useEffect } from 'react';\n\ntype ViolationType = 'error' | 'warning' | 'none';\n\nconst useCSPViolationObserver = (src: string, defaultValue: ViolationType = 'none'): ViolationType => {\n    const [violation, setViolation] = useState<ViolationType>(defaultValue);\n    useEffect(() => {\n        const violationHandler = e => {\n            if ((e.blockedURI === src || e.blockedURI === `${src}/`) && e.disposition === 'enforce') {\n                // the second src condition is required as Chrome rewrites\n                // URLs without query parameters (e.g. foo.com -> foo.com/ )\n                setViolation('error');\n            } else if ((e.blockedURI === src || e.blockedURI === `${src}/`) && e.disposition === 'report') {\n                setViolation('warning');\n            }\n        };\n        document.addEventListener('securitypolicyviolation', violationHandler);\n        setViolation(defaultValue);\n        return () => {\n            document.removeEventListener('securitypolicyviolation', violationHandler);\n        };\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [src]);\n    return violation;\n};\n\nexport { useCSPViolationObserver };\n","import * as React from 'react';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport Message from '@splunk/react-ui/Message';\nimport Link from '@splunk/react-ui/Link';\nimport MessageContext from '@splunk/visualization-context/MessageContext';\n\nexport type CSPMessageProps = { type: 'warning' | 'error' };\n\nexport const CSPMessage = ({ type }: CSPMessageProps) => {\n    const { cspMessageLink } = React.useContext(MessageContext) as Record<string, string>; // NOSONAR\n    return (\n        <Message appearance=\"fill\" type={type} data-test={`csp-message-${type}`}>\n            {_(\n                'External image URLs must now have their domains listed in the Dashboards Trusted Domains List by working with your administrator. Alternatively, you can upload the image directly into the dashboard. '\n            )}\n            {cspMessageLink && (\n                <Link to={cspMessageLink} openInNewContext>\n                    {_('Learn more')}\n                </Link>\n            )}\n        </Message>\n    );\n};\n","import styled from 'styled-components';\n\nexport const MessageContainer = styled.div`\n    margin-top: 10px;\n`;\n","module.exports = require(\"@splunk/react-ui/Link\");","module.exports = require(\"@splunk/react-ui/Markdown\");","module.exports = require(\"@splunk/react-ui/Message\");","module.exports = require(\"@splunk/themes\");","module.exports = require(\"@splunk/ui-utils/i18n\");","module.exports = require(\"@splunk/visualization-context/MessageContext\");","module.exports = require(\"prop-types\");","module.exports = require(\"react\");","module.exports = require(\"react-mde\");","module.exports = require(\"react-mde/lib/styles/css/react-mde-all.css\");","module.exports = require(\"styled-components\");","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// startup\n// Load entry module and return exports\n// This entry module is referenced by other modules so it can't be inlined\nvar __webpack_exports__ = __webpack_require__(7970);\n"],"names":["StyledMarkdownEditorContainer","div","variables","sansFontFamily","backgroundColorPopup","contentColorActive","HiddenPreview","errorPriority","error","warning","other","MarkdownEditor","onChange","defaultErrors","name","value","selectedTab","setSelectedTab","React","useState","val","setValueState","errors","setErrors","handleValueChange","useCallback","v","handleBlur","event","errorMessage","useMemo","message","Object","values","includes","CSPMessage","type","appearance","_","join","hiddenMarkdownPreview","text","imageRenderer","errorCallback","src","Infinity","alt","violationType","useCSPViolationObserver","useEffect","onError","toolbarCommands","onTabChange","disablePreview","childProps","textArea","onBlur","MessageContainer","propTypes","T","func","isRequired","string","defaultValue","violation","setViolation","violationHandler","e","blockedURI","disposition","document","addEventListener","removeEventListener","cspMessageLink","useContext","to","openInNewContext","module","exports","require","__webpack_module_cache__","__webpack_exports__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","call"],"sourceRoot":""}
+{"version":3,"file":"MarkdownEditor.js","mappings":"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","sources":["webpack://@splunk/dynamic-editors/./src/editors/MarkdownEditor.tsx","webpack://@splunk/dynamic-editors/./src/hooks/useCSPViolationObserver.tsx","webpack://@splunk/dynamic-editors/./src/shared/CSPMessage.tsx","webpack://@splunk/dynamic-editors/./src/shared/MessageContainer.tsx","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-icons/Chain\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-icons/ChevronsSlash\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-icons/List\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-icons/ListNumbered\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-icons/Picture\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-icons/QuotationDouble\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-icons/TextBBold\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-icons/TextH\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-icons/TextIItalic\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/Button\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/Link\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/Markdown\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/Message\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/ScreenReaderContent\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/TextArea\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/Tooltip\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/themes\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/ui-utils/i18n\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/ui-utils/id\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/visualization-context/MessageContext\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@uiw/react-md-editor/nohighlight\"","webpack://@splunk/dynamic-editors/external commonjs2 \"prop-types\"","webpack://@splunk/dynamic-editors/external commonjs2 \"react\"","webpack://@splunk/dynamic-editors/external commonjs2 \"styled-components\"","webpack://@splunk/dynamic-editors/webpack/bootstrap","webpack://@splunk/dynamic-editors/webpack/startup"],"sourcesContent":["import * as React from 'react';\nimport * as T from 'prop-types';\nimport styled from 'styled-components';\nimport {\n    handleKeyDown,\n    shortcuts,\n    TextAreaCommandOrchestrator,\n    commands,\n    type ICommand,\n} from '@uiw/react-md-editor/nohighlight';\n\nimport Markdown from '@splunk/react-ui/Markdown';\nimport Message from '@splunk/react-ui/Message';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport { createDOMID } from '@splunk/ui-utils/id';\nimport TextBBold from '@splunk/react-icons/TextBBold';\nimport Chain from '@splunk/react-icons/Chain';\nimport TextH from '@splunk/react-icons/TextH';\nimport TextIItalic from '@splunk/react-icons/TextIItalic';\nimport ChevronsSlash from '@splunk/react-icons/ChevronsSlash';\nimport Picture from '@splunk/react-icons/Picture';\nimport List from '@splunk/react-icons/List';\nimport ListNumbered from '@splunk/react-icons/ListNumbered';\nimport QuotationDouble from '@splunk/react-icons/QuotationDouble';\nimport Button from '@splunk/react-ui/Button';\nimport Tooltip from '@splunk/react-ui/Tooltip';\nimport TextArea from '@splunk/react-ui/TextArea';\nimport ScreenReaderContent from '@splunk/react-ui/ScreenReaderContent';\nimport { variables } from '@splunk/themes';\nimport { useCSPViolationObserver } from '../hooks/useCSPViolationObserver';\nimport { CSPMessage } from '../shared/CSPMessage';\nimport { MessageContainer } from '../shared/MessageContainer';\n\nconst TOOLBAR_COMMANDS: ICommand[] = [\n    {\n        ...commands.heading3,\n        icon: <TextH />,\n        name: 'header',\n    },\n    {\n        ...commands.bold,\n        icon: <TextBBold />,\n        name: 'bold',\n    },\n    {\n        ...commands.italic,\n        icon: <TextIItalic />,\n        name: 'italic',\n    },\n    {\n        ...commands.link,\n        icon: <Chain />,\n        name: 'link',\n    },\n    {\n        ...commands.quote,\n        icon: <QuotationDouble />,\n        name: 'quote',\n    },\n    {\n        ...commands.code,\n        icon: <ChevronsSlash />,\n        name: 'code',\n    },\n    {\n        ...commands.image,\n        icon: <Picture />,\n        name: 'image',\n    },\n    {\n        ...commands.unorderedListCommand,\n        icon: <List />,\n        name: 'unordered-list',\n    },\n    {\n        ...commands.orderedListCommand,\n        icon: <ListNumbered />,\n        name: 'ordered-list',\n    },\n];\n\nconst EditorContainer = styled.div`\n    font-family: ${variables.sansFontFamily};\n`;\n\nconst Toolbar = styled.div`\n    display: flex;\n    padding: 12px 0;\n    justify-content: space-between;\n`;\n\nconst StyledTextArea = styled(TextArea)`\n    [data-test='textbox'] {\n        resize: vertical;\n    }\n`;\n\nconst HiddenPreview = styled.div`\n    display: none;\n`;\n\nconst ToolbarButtonStyled = styled(Button)`\n    flex: 0;\n`;\n\nconst errorPriority = {\n    error: 1,\n    warning: 2,\n    other: 3,\n} as const;\n\n/**\n * an object mapping resource URLs to error types\n * e.g. { \"https://foo.com\": \"warning\" }\n */\ntype ErrorState = {\n    [url: string]: 'warning' | 'error' | 'other';\n};\n\nconst getCustomRenderer = errorCallback =>\n    function ImageRenderer({ src, alt }: { src: string; alt: string }) {\n        const violationType = useCSPViolationObserver(src);\n        React.useEffect(() => {\n            if (violationType !== 'none') {\n                errorCallback(src, violationType);\n            }\n        }, [violationType, src]);\n        return (\n            <img\n                src={src}\n                alt={alt}\n                onError={() => {\n                    if (violationType === 'none') {\n                        errorCallback(src, 'other');\n                    }\n                }}\n            />\n        );\n    };\n\ninterface ToolbarButtonProps {\n    command: ICommand;\n    isFocusable: boolean;\n    onFocus: (name: string) => void;\n    onExecute: (command: ICommand) => void;\n}\n\nconst ToolbarButton: React.FC<ToolbarButtonProps> = React.memo(\n    ({ command, isFocusable, onFocus, onExecute }) => {\n        const { icon, buttonProps } = command;\n        const { title } = buttonProps || {};\n\n        return (\n            <Tooltip\n                content={title || ''}\n                contentRelationship=\"label\"\n                renderAnchor={({\n                    onFocus: tooltipAnchorOnFocus,\n                    onClick: tooltipAnchorOnClick,\n                    ...anchorProps\n                }) => (\n                    <ToolbarButtonStyled\n                        appearance=\"subtle\"\n                        data-name={command.name}\n                        onFocus={event => {\n                            tooltipAnchorOnFocus(event);\n                            onFocus(command.name || '');\n                        }}\n                        tabIndex={isFocusable ? 0 : -1}\n                        onClick={event => {\n                            tooltipAnchorOnClick(event);\n                            onExecute(command);\n                        }}\n                        {...anchorProps}\n                    >\n                        {icon}\n                    </ToolbarButtonStyled>\n                )}\n            />\n        );\n    }\n);\n\nToolbarButton.displayName = 'ToolbarButton';\n\nToolbarButton.propTypes = {\n    command: T.object.isRequired,\n    isFocusable: T.bool.isRequired,\n    onFocus: T.func.isRequired,\n    onExecute: T.func.isRequired,\n};\n\ninterface MarkdownEditorProps {\n    onChange: (event: any, name: string, value: string) => void;\n    name: string;\n    value?: string;\n    defaultErrors?: ErrorState;\n}\n\nconst MarkdownEditor: React.FC<MarkdownEditorProps> = ({\n    onChange,\n    name,\n    value = '',\n    defaultErrors = {},\n}) => {\n    const instanceId = React.useMemo(() => createDOMID('markdown-editor'), []);\n    const textareaRef = React.useRef<HTMLTextAreaElement>(null);\n    const [val, setValueState] = React.useState(value);\n    const [focusableCommand, setFocusableCommand] = React.useState<string>(TOOLBAR_COMMANDS[0].name || '');\n    const orchestratorRef = React.useRef<TextAreaCommandOrchestrator | null>(null);\n    const [errors, setErrors] = React.useState<ErrorState>(defaultErrors);\n\n    // Initialize command orchestrator when textarea is available\n    React.useEffect(() => {\n        if (textareaRef.current && !orchestratorRef.current) {\n            orchestratorRef.current = new TextAreaCommandOrchestrator(textareaRef.current);\n        }\n\n        return () => {\n            orchestratorRef.current = null;\n        };\n    }, []);\n\n    const handleValueChange = React.useCallback(\n        (\n            _event: React.ChangeEvent<HTMLTextAreaElement> | React.MouseEvent<HTMLSpanElement>,\n            { value: newValue }: { value: string }\n        ) => {\n            setValueState(newValue);\n        },\n        []\n    );\n\n    const handleBlur = React.useCallback(\n        (event: React.FocusEvent<HTMLTextAreaElement>) => {\n            if (val !== value) {\n                onChange(event, name, val);\n                setErrors(defaultErrors);\n            }\n        },\n        [val, value, onChange, name, defaultErrors]\n    );\n\n    const executeCommand = React.useCallback((command: ICommand) => {\n        if (orchestratorRef.current && textareaRef.current) {\n            orchestratorRef.current.executeCommand(command);\n            setValueState(textareaRef.current.value);\n        }\n    }, []);\n\n    const errorMessage = React.useMemo(() => {\n        let message = null;\n        if (Object.values(errors).includes('error')) {\n            message = <CSPMessage type=\"error\" />;\n        } else if (Object.values(errors).includes('warning')) {\n            message = <CSPMessage type=\"warning\" />;\n        }\n        if (Object.values(errors).includes('other')) {\n            message = (\n                <>\n                    {message}\n                    <Message appearance=\"fill\" type=\"error\" data-test=\"image-error\">\n                        {_(\"We can't find an image with this URL. Please enter a new URL\")}\n                    </Message>\n                </>\n            );\n        }\n        return message;\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [Object.values(errors).join('')]);\n\n    const hiddenMarkdownPreview = React.useMemo(\n        () => (\n            <HiddenPreview>\n                <Markdown\n                    text={value}\n                    imageRenderer={getCustomRenderer((src, error) => {\n                        if ((errorPriority[errors[src]] ?? Infinity) > (errorPriority[error] ?? 0)) {\n                            setErrors({ ...errors, [src]: error });\n                        }\n                    })}\n                />\n            </HiddenPreview>\n        ),\n        [value, errors]\n    );\n\n    const handleToolbarKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n        const item = e.target as HTMLElement;\n        if (item.tagName !== 'BUTTON') return;\n\n        const toolbar = e.currentTarget;\n        const buttons = Array.from(toolbar.querySelectorAll<HTMLElement>('button'));\n        const currentIndex = buttons.indexOf(item);\n\n        if (currentIndex === -1) return;\n\n        const prevPressed = e.key === 'ArrowLeft';\n        const nextPressed = e.key === 'ArrowRight';\n        const firstPressed = e.key === 'Home';\n        const lastPressed = e.key === 'End';\n\n        let newFocus: HTMLElement | null = null;\n        if (prevPressed) {\n            // Wrap to last button if at first\n            newFocus = buttons[currentIndex - 1] ?? buttons[buttons.length - 1];\n        } else if (nextPressed) {\n            // Wrap to first button if at last\n            newFocus = buttons[currentIndex + 1] ?? buttons[0];\n        } else if (firstPressed) {\n            [newFocus] = buttons;\n        } else if (lastPressed) {\n            newFocus = buttons[buttons.length - 1];\n        }\n\n        if (newFocus) {\n            e.preventDefault();\n            newFocus.focus();\n        }\n    }, []);\n\n    const handleTextareaKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        // Handle tab key and newlines\n        handleKeyDown(e, 2, true); // tab size 2, allow default tab to exit the textarea\n\n        // Handle markdown keyboard shortcuts\n        if (orchestratorRef.current) {\n            shortcuts(e, TOOLBAR_COMMANDS, orchestratorRef.current);\n            // Update value after command execution\n            if (textareaRef.current) {\n                setValueState(textareaRef.current.value);\n            }\n        }\n    }, []);\n\n    return (\n        <EditorContainer data-test={name}>\n            <Toolbar\n                role=\"toolbar\"\n                aria-label={_('Markdown formatting')}\n                aria-orientation=\"horizontal\"\n                aria-controls={`${instanceId}-textarea`}\n                onKeyDown={handleToolbarKeyDown}\n            >\n                {TOOLBAR_COMMANDS.map(command => (\n                    <ToolbarButton\n                        key={command.name}\n                        command={command}\n                        isFocusable={focusableCommand === command.name}\n                        onFocus={setFocusableCommand}\n                        onExecute={executeCommand}\n                    />\n                ))}\n            </Toolbar>\n            <ScreenReaderContent id={`${instanceId}-textarea-label`}>\n                {_('Markdown editor')}\n            </ScreenReaderContent>\n            <StyledTextArea\n                inputRef={textareaRef}\n                data-test={`${name}-textarea`}\n                id={`${instanceId}-textarea`}\n                labelledBy={`${instanceId}-textarea-label`}\n                value={val}\n                onChange={handleValueChange}\n                onBlur={handleBlur}\n                onKeyDown={handleTextareaKeyDown}\n            />\n            {hiddenMarkdownPreview}\n            {errorMessage && <MessageContainer>{errorMessage}</MessageContainer>}\n        </EditorContainer>\n    );\n};\n\nMarkdownEditor.propTypes = {\n    /**\n     * Callback when markdown input is changed\n     */\n    onChange: T.func.isRequired,\n    /**\n     * Name of the markdown editor\n     */\n    name: T.string.isRequired,\n    /**\n     * Markdown input string in the editor\n     */\n    value: T.string,\n    /**\n     * Initial error state for CSP violations and image loading\n     */\n    defaultErrors: T.objectOf(T.oneOf(['warning', 'error', 'other'])),\n};\n\nexport default MarkdownEditor;\n","import { useState, useEffect } from 'react';\n\ntype ViolationType = 'error' | 'warning' | 'none';\n\nconst useCSPViolationObserver = (src: string, defaultValue: ViolationType = 'none'): ViolationType => {\n    const [violation, setViolation] = useState<ViolationType>(defaultValue);\n    useEffect(() => {\n        const violationHandler = e => {\n            if ((e.blockedURI === src || e.blockedURI === `${src}/`) && e.disposition === 'enforce') {\n                // the second src condition is required as Chrome rewrites\n                // URLs without query parameters (e.g. foo.com -> foo.com/ )\n                setViolation('error');\n            } else if ((e.blockedURI === src || e.blockedURI === `${src}/`) && e.disposition === 'report') {\n                setViolation('warning');\n            }\n        };\n        document.addEventListener('securitypolicyviolation', violationHandler);\n        setViolation(defaultValue);\n        return () => {\n            document.removeEventListener('securitypolicyviolation', violationHandler);\n        };\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [src]);\n    return violation;\n};\n\nexport { useCSPViolationObserver };\n","import * as React from 'react';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport Message from '@splunk/react-ui/Message';\nimport Link from '@splunk/react-ui/Link';\nimport MessageContext from '@splunk/visualization-context/MessageContext';\n\nexport type CSPMessageProps = { type: 'warning' | 'error' };\n\nexport const CSPMessage = ({ type }: CSPMessageProps) => {\n    const { cspMessageLink } = React.useContext(MessageContext) as Record<string, string>; // NOSONAR\n    return (\n        <Message appearance=\"fill\" type={type} data-test={`csp-message-${type}`}>\n            {_(\n                'External image URLs must now have their domains listed in the Dashboards Trusted Domains List by working with your administrator. Alternatively, you can upload the image directly into the dashboard. '\n            )}\n            {cspMessageLink && (\n                <Link to={cspMessageLink} openInNewContext>\n                    {_('Learn more')}\n                </Link>\n            )}\n        </Message>\n    );\n};\n","import styled from 'styled-components';\n\nexport const MessageContainer = styled.div`\n    margin-top: 10px;\n`;\n","module.exports = require(\"@splunk/react-icons/Chain\");","module.exports = require(\"@splunk/react-icons/ChevronsSlash\");","module.exports = require(\"@splunk/react-icons/List\");","module.exports = require(\"@splunk/react-icons/ListNumbered\");","module.exports = require(\"@splunk/react-icons/Picture\");","module.exports = require(\"@splunk/react-icons/QuotationDouble\");","module.exports = require(\"@splunk/react-icons/TextBBold\");","module.exports = require(\"@splunk/react-icons/TextH\");","module.exports = require(\"@splunk/react-icons/TextIItalic\");","module.exports = require(\"@splunk/react-ui/Button\");","module.exports = require(\"@splunk/react-ui/Link\");","module.exports = require(\"@splunk/react-ui/Markdown\");","module.exports = require(\"@splunk/react-ui/Message\");","module.exports = require(\"@splunk/react-ui/ScreenReaderContent\");","module.exports = require(\"@splunk/react-ui/TextArea\");","module.exports = require(\"@splunk/react-ui/Tooltip\");","module.exports = require(\"@splunk/themes\");","module.exports = require(\"@splunk/ui-utils/i18n\");","module.exports = require(\"@splunk/ui-utils/id\");","module.exports = require(\"@splunk/visualization-context/MessageContext\");","module.exports = require(\"@uiw/react-md-editor/nohighlight\");","module.exports = require(\"prop-types\");","module.exports = require(\"react\");","module.exports = require(\"styled-components\");","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// startup\n// Load entry module and return exports\n// This entry module is referenced by other modules so it can't be inlined\nvar __webpack_exports__ = __webpack_require__(7970);\n"],"names":["TOOLBAR_COMMANDS","commands","heading3","icon","name","bold","italic","link","quote","code","image","unorderedListCommand","orderedListCommand","EditorContainer","div","variables","sansFontFamily","Toolbar","StyledTextArea","HiddenPreview","ToolbarButtonStyled","errorPriority","error","warning","other","ToolbarButton","React","memo","command","isFocusable","onFocus","onExecute","buttonProps","title","content","contentRelationship","renderAnchor","tooltipAnchorOnFocus","onClick","tooltipAnchorOnClick","anchorProps","appearance","event","tabIndex","displayName","propTypes","T","object","isRequired","bool","func","MarkdownEditor","onChange","value","defaultErrors","instanceId","useMemo","createDOMID","textareaRef","useRef","val","setValueState","useState","focusableCommand","setFocusableCommand","orchestratorRef","errors","setErrors","useEffect","current","TextAreaCommandOrchestrator","handleValueChange","useCallback","_event","newValue","handleBlur","executeCommand","errorMessage","message","Object","values","includes","CSPMessage","type","_","join","hiddenMarkdownPreview","text","imageRenderer","errorCallback","src","Infinity","alt","violationType","useCSPViolationObserver","onError","handleToolbarKeyDown","e","item","target","tagName","toolbar","currentTarget","buttons","Array","from","querySelectorAll","currentIndex","indexOf","prevPressed","key","nextPressed","firstPressed","lastPressed","newFocus","length","preventDefault","focus","handleTextareaKeyDown","handleKeyDown","shortcuts","role","onKeyDown","map","id","inputRef","labelledBy","onBlur","MessageContainer","string","objectOf","oneOf","defaultValue","violation","setViolation","violationHandler","blockedURI","disposition","document","addEventListener","removeEventListener","cspMessageLink","useContext","to","openInNewContext","module","exports","require","__webpack_module_cache__","__webpack_exports__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","call"],"sourceRoot":""}

package/editors/MultiColorPickerEditor.js

@@ -2,13 +2,13 @@
  * Copyright © 2018 Splunk Inc.
  * SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
  * in part without a valid written license from Splunk Inc. is PROHIBITED.
- */(()=>{"use strict";var e={437:(e,t,o)=>{o.r(t),o.d(t,{default:()=>T});var l=o(9497),r=o.n(l),a=o(23),n=o.n(a),i=o(232),u=o.n(i),d=o(4793),s=o(3563),c=o(7408),p=o.n(c),f=o(4082),b=o.n(f),h=o(8987),m=o(6649);const g=require("@splunk/react-ui/ScreenReaderContent");var C=o.n(g);const v=require("@splunk/visualizations-shared/colorConstants");var y=o(3283),x=o(4008),_=o.n(x);const k=u().div`
+ */(()=>{"use strict";var e={397:(e,t,o)=>{o.r(t),o.d(t,{default:()=>T});var l=o(9497),r=o.n(l),a=o(23),n=o.n(a),i=o(232),u=o.n(i),d=o(4793),s=o(3563),c=o(7408),p=o.n(c),f=o(4082),b=o.n(f),h=o(8987),m=o(6649),g=o(2621),C=o.n(g);const v=require("@splunk/visualizations-shared/colorConstants");var y=o(3283),x=o(4008),_=o.n(x);const k=u().div`
     max-height: ${s.variables.inputHeight};
     width: 100%;
     min-width: 0;
 `,O=u()(b())`
     max-height: ${s.variables.inputHeight};
-`,E=({color:e,defaultColor:t,prevColor:o})=>{const l="string"==typeof e?e.trim():e;return(0,y.isColor)(l)||null===l?l:(0,y.isColor)(t)?t:(0,y.isColor)(o)||null===o?o:"transparent"},P=({id:e,showTextInput:t,color:o,palette:a,handleColorChange:n,labelledBy:i,textWidth:u,value:d,name:s,handleTextColorChange:c,handleKeyPress:f,handleBlur:b,isDisabled:g})=>{const v=(0,l.useMemo)((()=>(0,h.createDOMID)("color-code")),[]);return r().createElement(r().Fragment,null,r().createElement("div",null,r().createElement(p(),{key:"color-editor",append:t,value:E({color:o}),palette:a,onChange:n,"data-test":`color-picker-${s}`,disabled:g,hideInput:!0,labelledBy:i})),t&&r().createElement(k,{"data-test":"text-container",textWidth:u},r().createElement(C(),{id:v},(0,m._)("Color code input")),r().createElement(O,{key:d,"data-test":s,prepend:!0,value:null===o?"N/A":o,onChange:c,onKeyDown:f,onBlur:b,disabled:g,style:{height:"32px"},labelledBy:`${i} ${v}`,inputId:e})))};P.propTypes={id:n().string,showTextInput:n().bool,color:n().string,palette:n().arrayOf(n().string),handleColorChange:n().func,labelledBy:n().string,textWidth:n().oneOfType([n().string,n().number]),value:n().string,name:n().string.isRequired,handleTextColorChange:n().func,handleKeyPress:n().func,handleBlur:n().func,isDisabled:n().bool};const M={default:"transparent"},j={},w=({name:e="color",value:t="transparent",label:o="",labelPosition:a="top",labelWidth:n,palette:i=v.COLOR_EDITOR_PALETTE,onChange:u=d.noop,itemSchema:s=M,isDisabled:c=!1,textWidth:p="auto",hideLabel:f=!1,showTextInput:b=!0,style:h=j})=>{const[m,g]=(0,l.useState)(t);(0,l.useEffect)((()=>{g(t)}),[t]);const C=(0,l.useMemo)((()=>(0,d.debounce)(u,250)),[u]),y=(0,l.useCallback)((({value:o})=>{const l=E({color:o,defaultColor:s.default,prevColor:t});g(l),t!==l&&C(null,e,l)}),[C,s.default,e,t]),x=(0,l.useCallback)(((e,{value:t})=>{const o="n/a"===(0,d.toLower)(t).trim()?null:t;g(o)}),[]),k=(0,l.useCallback)((o=>{if("Escape"!==o.key){if("Enter"===o.key&&t!==m){const l=E({color:m,defaultColor:s.default,prevColor:t});g(l),l!==t&&u(o,e,l)}}else g(t)}),[e,m,t,u,s.default]),O=(0,l.useCallback)((o=>{if(m!==t){const l=E({color:m,defaultColor:s.default,prevColor:t});g(l),l!==t&&u(o,e,l)}}),[e,m,t,u,s.default]);return r().createElement(_(),{label:o,labelPosition:a,labelWidth:n,style:h,hideLabel:f,controlsLayout:"fillJoin"},r().createElement(P,{showTextInput:b,color:m,palette:i,handleColorChange:y,name:e,isDisabled:c,textWidth:p,value:t,handleTextColorChange:x,handleKeyPress:k,handleBlur:O}))};w.propTypes={name:n().string.isRequired,value:n().string,itemSchema:n().object,label:n().string.isRequired,hideLabel:n().bool,showTextInput:n().bool,style:n().object,labelPosition:n().oneOf(["top","left"]),labelWidth:n().number,palette:n().arrayOf(n().string),onChange:n().func.isRequired,isDisabled:n().bool,textWidth:n().oneOfType([n().string,n().number])};const T=w},2965:function(e,t,o){var l=this&&this.__createBinding||(Object.create?function(e,t,o,l){void 0===l&&(l=o);var r=Object.getOwnPropertyDescriptor(t,o);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,l,r)}:function(e,t,o,l){void 0===l&&(l=o),e[l]=t[o]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var o in e)"default"!==o&&Object.prototype.hasOwnProperty.call(e,o)&&l(t,e,o);return r(t,e),t},n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.ColorFlyoutEditor=void 0;const i=a(o(9497)),u=a(o(23)),d=n(o(232)),s=o(4793),c=n(o(4566)),p=o(6649),f=n(o(8965)),b=o(8987),h=n(o(7020)),m=n(o(1551)),g=o(3850),C=o(6801),v=n(o(4008)),y=n(o(437)),x={padding:"10px"},_={width:"314px"},k=(0,d.default)(h.default)`
+`,E=({color:e,defaultColor:t,prevColor:o})=>{const l="string"==typeof e?e.trim():e;return(0,y.isColor)(l)||null===l?l:(0,y.isColor)(t)?t:(0,y.isColor)(o)||null===o?o:"transparent"},P=({id:e,showTextInput:t,color:o,palette:a,handleColorChange:n,labelledBy:i,textWidth:u,value:d,name:s,handleTextColorChange:c,handleKeyPress:f,handleBlur:b,isDisabled:g})=>{const v=(0,l.useMemo)((()=>(0,h.createDOMID)("color-code")),[]);return r().createElement(r().Fragment,null,r().createElement("div",null,r().createElement(p(),{key:"color-editor",append:t,value:E({color:o}),palette:a,onChange:n,"data-test":`color-picker-${s}`,disabled:g,hideInput:!0,labelledBy:i})),t&&r().createElement(k,{"data-test":"text-container",textWidth:u},r().createElement(C(),{id:v},(0,m._)("Color code input")),r().createElement(O,{key:d,"data-test":s,prepend:!0,value:null===o?"N/A":o,onChange:c,onKeyDown:f,onBlur:b,disabled:g,style:{height:"32px"},labelledBy:`${i} ${v}`,inputId:e})))};P.propTypes={id:n().string,showTextInput:n().bool,color:n().string,palette:n().arrayOf(n().string),handleColorChange:n().func,labelledBy:n().string,textWidth:n().oneOfType([n().string,n().number]),value:n().string,name:n().string.isRequired,handleTextColorChange:n().func,handleKeyPress:n().func,handleBlur:n().func,isDisabled:n().bool};const M={default:"transparent"},j={},w=({name:e="color",value:t="transparent",label:o="",labelPosition:a="top",labelWidth:n,palette:i=v.COLOR_EDITOR_PALETTE,onChange:u=d.noop,itemSchema:s=M,isDisabled:c=!1,textWidth:p="auto",hideLabel:f=!1,showTextInput:b=!0,style:h=j})=>{const[m,g]=(0,l.useState)(t);(0,l.useEffect)((()=>{g(t)}),[t]);const C=(0,l.useMemo)((()=>(0,d.debounce)(u,250)),[u]),y=(0,l.useCallback)((({value:o})=>{const l=E({color:o,defaultColor:s.default,prevColor:t});g(l),t!==l&&C(null,e,l)}),[C,s.default,e,t]),x=(0,l.useCallback)(((e,{value:t})=>{const o="n/a"===(0,d.toLower)(t).trim()?null:t;g(o)}),[]),k=(0,l.useCallback)((o=>{if("Escape"!==o.key){if("Enter"===o.key&&t!==m){const l=E({color:m,defaultColor:s.default,prevColor:t});g(l),l!==t&&u(o,e,l)}}else g(t)}),[e,m,t,u,s.default]),O=(0,l.useCallback)((o=>{if(m!==t){const l=E({color:m,defaultColor:s.default,prevColor:t});g(l),l!==t&&u(o,e,l)}}),[e,m,t,u,s.default]);return r().createElement(_(),{label:o,labelPosition:a,labelWidth:n,style:h,hideLabel:f,controlsLayout:"fillJoin"},r().createElement(P,{showTextInput:b,color:m,palette:i,handleColorChange:y,name:e,isDisabled:c,textWidth:p,value:t,handleTextColorChange:x,handleKeyPress:k,handleBlur:O}))};w.propTypes={name:n().string.isRequired,value:n().string,itemSchema:n().object,label:n().string.isRequired,hideLabel:n().bool,showTextInput:n().bool,style:n().object,labelPosition:n().oneOf(["top","left"]),labelWidth:n().number,palette:n().arrayOf(n().string),onChange:n().func.isRequired,isDisabled:n().bool,textWidth:n().oneOfType([n().string,n().number])};const T=w},2965:function(e,t,o){var l=this&&this.__createBinding||(Object.create?function(e,t,o,l){void 0===l&&(l=o);var r=Object.getOwnPropertyDescriptor(t,o);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,l,r)}:function(e,t,o,l){void 0===l&&(l=o),e[l]=t[o]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var o in e)"default"!==o&&Object.prototype.hasOwnProperty.call(e,o)&&l(t,e,o);return r(t,e),t},n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.ColorFlyoutEditor=void 0;const i=a(o(9497)),u=a(o(23)),d=n(o(232)),s=o(4793),c=n(o(4566)),p=o(6649),f=n(o(8965)),b=o(8987),h=n(o(7020)),m=n(o(1551)),g=o(3850),C=o(6801),v=n(o(4008)),y=n(o(397)),x={padding:"10px"},_={width:"314px"},k=(0,d.default)(h.default)`
     padding: 8px;
     width: 100%;
     min-height: 40px;
@@ -73,5 +73,5 @@
     &:hover {
         background-color: ${p.variables.interactiveColorOverlayDrag} !important;
     }
-`;t.AdvancedConfigButton=({label:e="",onClick:t})=>i.default.createElement(g,{"data-test":`${e}-advanced-config-button-tooltip`,content:(0,s._)("Advanced configurations")},i.default.createElement(C,{"data-test":`${e}-advanced-config-button`,icon:i.default.createElement(c.default,{"data-test":`${e}-advanced-config-button-icon`}),appearance:"subtle",onClick:t}));const v=({"data-test":e,children:o,isAdvanced:l=!1,label:r,hideLabel:a,labelPosition:n,labelWidth:u,tooltip:d,help:s,style:c,error:p,controlsLayout:f,onClick:b,onAdvancedConfigButtonClick:h})=>i.default.createElement(m,{"data-test":null!=e?e:"control-group",label:r,hideLabel:a,labelPosition:n,labelWidth:u,tooltip:d,help:s,error:p,style:c,onClick:b,controlsLayout:f},l?i.Children.toArray(o).filter(Boolean).map((e=>(0,i.cloneElement)(e,{style:{flex:1}}))):o,l?i.default.createElement(t.AdvancedConfigButton,{label:r,onClick:h}):null);v.propTypes={style:u.object,isAdvanced:u.bool,onClick:u.func,onAdvancedConfigButtonClick:u.func},t.default=v},6643:e=>{e.exports=require("@splunk/react-icons/SlidersDoubleHorizontal")},7020:e=>{e.exports=require("@splunk/react-ui/Button")},7408:e=>{e.exports=require("@splunk/react-ui/Color")},9250:e=>{e.exports=require("@splunk/react-ui/ControlGroup")},8965:e=>{e.exports=require("@splunk/react-ui/FormRows")},1551:e=>{e.exports=require("@splunk/react-ui/Popover")},4082:e=>{e.exports=require("@splunk/react-ui/Text")},6379:e=>{e.exports=require("@splunk/react-ui/Tooltip")},3563:e=>{e.exports=require("@splunk/themes")},4566:e=>{e.exports=require("@splunk/themes/variables")},6649:e=>{e.exports=require("@splunk/ui-utils/i18n")},8987:e=>{e.exports=require("@splunk/ui-utils/id")},3850:e=>{e.exports=require("@splunk/visualization-color-palettes")},3283:e=>{e.exports=require("@splunk/visualizations-shared/colorUtils")},4793:e=>{e.exports=require("lodash")},23:e=>{e.exports=require("prop-types")},9497:e=>{e.exports=require("react")},232:e=>{e.exports=require("styled-components")}},t={};function o(l){var r=t[l];if(void 0!==r)return r.exports;var a=t[l]={exports:{}};return e[l].call(a.exports,a,a.exports,o),a.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var l in t)o.o(t,l)&&!o.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var l=o(2965);module.exports=l})();
+`;t.AdvancedConfigButton=({label:e="",onClick:t})=>i.default.createElement(g,{"data-test":`${e}-advanced-config-button-tooltip`,content:(0,s._)("Advanced configurations")},i.default.createElement(C,{"data-test":`${e}-advanced-config-button`,icon:i.default.createElement(c.default,{"data-test":`${e}-advanced-config-button-icon`}),appearance:"subtle",onClick:t}));const v=({"data-test":e,children:o,isAdvanced:l=!1,label:r,hideLabel:a,labelPosition:n,labelWidth:u,tooltip:d,help:s,style:c,error:p,controlsLayout:f,onClick:b,onAdvancedConfigButtonClick:h})=>i.default.createElement(m,{"data-test":null!=e?e:"control-group",label:r,hideLabel:a,labelPosition:n,labelWidth:u,tooltip:d,help:s,error:p,style:c,onClick:b,controlsLayout:f},l?i.Children.toArray(o).filter(Boolean).map((e=>(0,i.cloneElement)(e,{style:{flex:1}}))):o,l?i.default.createElement(t.AdvancedConfigButton,{label:r,onClick:h}):null);v.propTypes={style:u.object,isAdvanced:u.bool,onClick:u.func,onAdvancedConfigButtonClick:u.func},t.default=v},6643:e=>{e.exports=require("@splunk/react-icons/SlidersDoubleHorizontal")},7020:e=>{e.exports=require("@splunk/react-ui/Button")},7408:e=>{e.exports=require("@splunk/react-ui/Color")},9250:e=>{e.exports=require("@splunk/react-ui/ControlGroup")},8965:e=>{e.exports=require("@splunk/react-ui/FormRows")},1551:e=>{e.exports=require("@splunk/react-ui/Popover")},2621:e=>{e.exports=require("@splunk/react-ui/ScreenReaderContent")},4082:e=>{e.exports=require("@splunk/react-ui/Text")},6379:e=>{e.exports=require("@splunk/react-ui/Tooltip")},3563:e=>{e.exports=require("@splunk/themes")},4566:e=>{e.exports=require("@splunk/themes/variables")},6649:e=>{e.exports=require("@splunk/ui-utils/i18n")},8987:e=>{e.exports=require("@splunk/ui-utils/id")},3850:e=>{e.exports=require("@splunk/visualization-color-palettes")},3283:e=>{e.exports=require("@splunk/visualizations-shared/colorUtils")},4793:e=>{e.exports=require("lodash")},23:e=>{e.exports=require("prop-types")},9497:e=>{e.exports=require("react")},232:e=>{e.exports=require("styled-components")}},t={};function o(l){var r=t[l];if(void 0!==r)return r.exports;var a=t[l]={exports:{}};return e[l].call(a.exports,a,a.exports,o),a.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var l in t)o.o(t,l)&&!o.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var l=o(2965);module.exports=l})();
 //# sourceMappingURL=MultiColorPickerEditor.js.map

package/editors/MultiColorPickerEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiColorPickerEditor.js","mappings":"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","sources":["webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/ScreenReaderContent\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/visualizations-shared/colorConstants\"","webpack://@splunk/dynamic-editors/./src/editors/ColorEditor.jsx","webpack://@splunk/dynamic-editors/./src/editors/MultiColorPickerEditor.tsx","webpack://@splunk/dynamic-editors/./src/interfaces/BaseEditorProps.ts","webpack://@splunk/dynamic-editors/./src/shared/AdvancedControlGroup.tsx","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-icons/SlidersDoubleHorizontal\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/Button\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/Color\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/ControlGroup\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/FormRows\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/Popover\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/Text\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/Tooltip\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/themes\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/themes/variables\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/ui-utils/i18n\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/ui-utils/id\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/visualization-color-palettes\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/visualizations-shared/colorUtils\"","webpack://@splunk/dynamic-editors/external commonjs2 \"lodash\"","webpack://@splunk/dynamic-editors/external commonjs2 \"prop-types\"","webpack://@splunk/dynamic-editors/external commonjs2 \"react\"","webpack://@splunk/dynamic-editors/external commonjs2 \"styled-components\"","webpack://@splunk/dynamic-editors/webpack/bootstrap","webpack://@splunk/dynamic-editors/webpack/runtime/compat get default export","webpack://@splunk/dynamic-editors/webpack/runtime/define property getters","webpack://@splunk/dynamic-editors/webpack/runtime/hasOwnProperty shorthand","webpack://@splunk/dynamic-editors/webpack/runtime/make namespace object","webpack://@splunk/dynamic-editors/webpack/startup"],"sourcesContent":["const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@splunk/react-ui/ScreenReaderContent\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@splunk/visualizations-shared/colorConstants\");","import React, { useEffect, useCallback, useState, useMemo } from 'react';\nimport T from 'prop-types';\nimport styled from 'styled-components';\nimport { debounce, noop, toLower } from 'lodash';\nimport { variables } from '@splunk/themes';\nimport Color from '@splunk/react-ui/Color';\nimport Text from '@splunk/react-ui/Text';\nimport { createDOMID } from '@splunk/ui-utils/id';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport ScreenReaderContent from '@splunk/react-ui/ScreenReaderContent';\nimport { COLOR_EDITOR_PALETTE } from '@splunk/visualizations-shared/colorConstants';\nimport { isColor } from '@splunk/visualizations-shared/colorUtils';\nimport ControlGroup from '../shared/AdvancedControlGroup';\n\nconst TextContainer = styled.div`\n    max-height: ${variables.inputHeight};\n    width: 100%;\n    min-width: 0;\n`;\n\n// hardcoded style to sync with SUI color picker's hardcoded dimensions\n// TODO(fkurniawan): see if we can leverage prisma's consolidated textInput out of the box instead of our own component\n// right now, we're using hideInput\nconst StyledText = styled(Text)`\n    max-height: ${variables.inputHeight};\n`;\n\n/**\n * Trims the color input and returns the result, or default color if the default color is valid, or previous color\n * @param {String} color The color the user entered\n * @param {String} defaultColor The default color of the component\n * @param {String} prevColor The previous color of the component\n * @returns {String}\n */\nconst getColor = ({ color, defaultColor, prevColor }) => {\n    const newColor = typeof color === 'string' ? color.trim() : color;\n\n    // color === null is `N/A` in color picker\n    if (isColor(newColor) || newColor === null) {\n        return newColor;\n    }\n\n    if (isColor(defaultColor)) {\n        return defaultColor;\n    }\n\n    if (isColor(prevColor) || prevColor === null) {\n        return prevColor;\n    }\n\n    return 'transparent';\n};\n\nconst ColorAndTextWrapper = ({\n    id,\n    showTextInput,\n    color,\n    palette,\n    handleColorChange,\n    labelledBy,\n    textWidth,\n    value,\n    name,\n    handleTextColorChange,\n    handleKeyPress,\n    handleBlur,\n    isDisabled,\n}) => {\n    const textLabelId = useMemo(() => createDOMID('color-code'), []);\n\n    return (\n        <>\n            <div>\n                <Color\n                    key=\"color-editor\"\n                    append={showTextInput}\n                    value={getColor({ color })}\n                    palette={palette}\n                    onChange={handleColorChange}\n                    data-test={`color-picker-${name}`}\n                    disabled={isDisabled}\n                    hideInput\n                    labelledBy={labelledBy}\n                />\n            </div>\n            {showTextInput && (\n                <TextContainer data-test=\"text-container\" textWidth={textWidth}>\n                    <ScreenReaderContent id={textLabelId}>{_('Color code input')}</ScreenReaderContent>\n                    <StyledText\n                        key={value}\n                        data-test={name}\n                        prepend\n                        value={color === null ? 'N/A' : color}\n                        onChange={handleTextColorChange}\n                        onKeyDown={handleKeyPress}\n                        onBlur={handleBlur}\n                        disabled={isDisabled}\n                        // hardcoded style to sync with SUI color picker's hardcoded dimensions\n                        // TODO(fkurniawan): see if we can leverage prisma's consolidated textInput out of the box\n                        style={{ height: '32px' }}\n                        labelledBy={`${labelledBy} ${textLabelId}`}\n                        inputId={id}\n                    />\n                </TextContainer>\n            )}\n        </>\n    );\n};\n\nColorAndTextWrapper.propTypes = {\n    id: T.string,\n    showTextInput: T.bool,\n    color: T.string,\n    palette: T.arrayOf(T.string),\n    handleColorChange: T.func,\n    labelledBy: T.string,\n    textWidth: T.oneOfType([T.string, T.number]),\n    value: T.string,\n    name: T.string.isRequired,\n    handleTextColorChange: T.func,\n    handleKeyPress: T.func,\n    handleBlur: T.func,\n    isDisabled: T.bool,\n};\n\nconst defaultItemSchema = { default: 'transparent' };\nconst emptyStyle = {};\n\n// The propTypes typing for TS callers isn't working for the onChange callback\n/**\n * @param {Object} props\n * @param {(e: import('react').SyntheticEvent, name: string, value: string) => void} [props.onChange]\n * @returns\n */\nconst ColorEditor = ({\n    name = 'color',\n    value = 'transparent',\n    label = '',\n    labelPosition = 'top',\n    labelWidth,\n    palette = COLOR_EDITOR_PALETTE,\n    onChange = noop,\n    itemSchema = defaultItemSchema,\n    isDisabled = false,\n    textWidth = 'auto',\n    hideLabel = false,\n    showTextInput = true,\n    style: customEditorStyle = emptyStyle,\n}) => {\n    const [color, setColor] = useState(value);\n\n    useEffect(() => {\n        setColor(value);\n    }, [value]);\n\n    const debouncedOnChange = useMemo(() => debounce(onChange, 250), [onChange]);\n\n    const handleColorChange = useCallback(\n        ({ value: val }) => {\n            const newColor = getColor({ color: val, defaultColor: itemSchema.default, prevColor: value });\n            setColor(newColor);\n            if (value !== newColor) {\n                // No event to pass back, so it is null\n                debouncedOnChange(null, name, newColor);\n            }\n        },\n        [debouncedOnChange, itemSchema.default, name, value]\n    );\n\n    const handleTextColorChange = useCallback((_event, { value: val }) => {\n        const colorToValue = toLower(val).trim() === 'n/a' ? null : val;\n        setColor(colorToValue);\n    }, []);\n\n    const handleKeyPress = useCallback(\n        event => {\n            if (event.key === 'Escape') {\n                setColor(value);\n                return;\n            }\n            if (event.key !== 'Enter') {\n                return;\n            }\n\n            if (value !== color) {\n                const newColor = getColor({ color, defaultColor: itemSchema.default, prevColor: value });\n                setColor(newColor);\n                if (newColor !== value) {\n                    onChange(event, name, newColor);\n                }\n            }\n        },\n        [name, color, value, onChange, itemSchema.default]\n    );\n\n    const handleBlur = useCallback(\n        event => {\n            if (color !== value) {\n                const newColor = getColor({ color, defaultColor: itemSchema.default, prevColor: value });\n                setColor(newColor);\n                if (newColor !== value) {\n                    onChange(event, name, newColor);\n                }\n            }\n        },\n        [name, color, value, onChange, itemSchema.default]\n    );\n\n    return (\n        <ControlGroup\n            label={label}\n            labelPosition={labelPosition}\n            labelWidth={labelWidth}\n            style={customEditorStyle}\n            hideLabel={hideLabel}\n            controlsLayout=\"fillJoin\"\n        >\n            <ColorAndTextWrapper\n                showTextInput={showTextInput}\n                color={color}\n                palette={palette}\n                handleColorChange={handleColorChange}\n                name={name}\n                isDisabled={isDisabled}\n                textWidth={textWidth}\n                value={value}\n                handleTextColorChange={handleTextColorChange}\n                handleKeyPress={handleKeyPress}\n                handleBlur={handleBlur}\n            />\n        </ControlGroup>\n    );\n};\n\nColorEditor.propTypes = {\n    /**\n     * The option name\n     */\n    name: T.string.isRequired,\n\n    /**\n     * The option value\n     */\n    value: T.string,\n\n    /**\n     * @param {Object} itemSchema Either the dataContract or schema for the selected item\n     */\n    itemSchema: T.object,\n\n    /**\n     * A human readable label for the option\n     */\n    label: T.string.isRequired,\n\n    /**\n     * Flag to hide the editor label\n     */\n    hideLabel: T.bool,\n\n    /**\n     * Flag to hide the color text input\n     */\n    showTextInput: T.bool,\n\n    /**\n     * Custom styling for the editor layout, eg: setting margin-bottom to 0px for ControlGroup, SUI has it at 15px\n     */\n    style: T.object,\n\n    /**\n     * Label position\n     */\n    labelPosition: T.oneOf(['top', 'left']),\n\n    /**\n     * Label position\n     */\n    labelWidth: T.number,\n\n    /**\n     * An array of color swatch values\n     */\n    palette: T.arrayOf(T.string),\n\n    /**\n     * Callback when changing the text value\n     *\n     * @param {SyntheticEvent} event The react `SyntheticEvent`\n     * @param {string} name The option name\n     * @param {string} value The option value\n     */\n    onChange: T.func.isRequired,\n    /**\n     * Disabled state of component\n     */\n    isDisabled: T.bool,\n    textWidth: T.oneOfType([T.string, T.number]),\n};\n\nexport default ColorEditor;\n","import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';\nimport * as T from 'prop-types';\nimport styled from 'styled-components';\nimport { noop } from 'lodash';\nimport variables from '@splunk/themes/variables';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport FormRows from '@splunk/react-ui/FormRows';\nimport { createDOMID } from '@splunk/ui-utils/id';\nimport Button from '@splunk/react-ui/Button';\nimport type { PopoverRequestCloseHandler } from '@splunk/react-ui/Popover';\nimport Popover from '@splunk/react-ui/Popover';\nimport { VIZ_CATEGORICAL } from '@splunk/visualization-color-palettes';\nimport { BaseEditorPropTypes } from '../interfaces/BaseEditorProps';\nimport type { BaseEditorProps } from '../interfaces/BaseEditorProps';\nimport ControlGroup from '../shared/AdvancedControlGroup';\nimport ColorEditor from './ColorEditor';\n\nconst popoverStyle = { padding: '10px' };\nconst colorButtonStyle = { width: '314px' };\n\nconst StyledButton = styled(Button)`\n    padding: 8px;\n    width: 100%;\n    min-height: 40px;\n    & > span {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 26px);\n        justify-content: space-evenly;\n        grid-gap: 4px;\n    }\n    background-color: ${variables.interactiveColorBackground};\n`;\n\nconst ColorChip = styled.div`\n    width: 26px;\n    height: 24px;\n    background-color: ${(props): string => props.color};\n    border-radius: 2px;\n    border: 1px solid ${variables.neutral100};\n`;\n\nconst StyledFlyoutContent = styled.div`\n    box-sizing: border-box;\n    padding: 8px;\n    width: 312px;\n    max-height: 484px;\n    background-color: ${variables.backgroundColorPopup};\n`;\n\nconst FlyoutHeader = styled.div`\n    font-weight: 500;\n    font-size: 14px;\n    line-height: 20px;\n    padding: 8px 8px 0 8px;\n    font-family: ${variables.fontFamily};\n    color: ${variables.contentColorActive};\n`;\n\nconst ColorListEditor = styled.div`\n    height: 412px;\n    overflow-y: auto;\n    padding: 8px 10px;\n`;\n\nexport interface ColorFlyoutEditorProps {\n    colors: string[];\n    handleColorRemove: (_e, { index }: { index: number }) => void;\n    handleColorChange: (idx: number) => (_evt, name: string, value: string) => void;\n    CustomColorMatchEditor?: (props: { index: number }) => React.ReactNode;\n    flyoutTitle: string;\n    addColorButtonLabel: string;\n    handleColorAdd: () => void;\n    handleColorMove: (data: { fromIndex: number; toIndex: number }) => void;\n}\n\nexport const ColorFlyoutEditor = ({\n    colors,\n    CustomColorMatchEditor,\n    handleColorRemove,\n    handleColorChange,\n    flyoutTitle,\n    addColorButtonLabel,\n    handleColorAdd,\n    handleColorMove,\n}: ColorFlyoutEditorProps) => {\n    const ColorRowItems = useMemo(() => {\n        return colors.map((color, idx) => {\n            // disable the color editor's text input when a custom input editor is available to render adjacently\n            const showTextInput = CustomColorMatchEditor == null;\n            return (\n                <FormRows.Row\n                    index={idx}\n                    key={createDOMID()}\n                    data-color={color}\n                    onRequestRemove={handleColorRemove}\n                >\n                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>\n                        <ColorEditor\n                            value={color}\n                            key={createDOMID()}\n                            onChange={handleColorChange(idx)}\n                            hideLabel\n                            label=\" \"\n                            name=\"color\"\n                            style={{ marginBottom: 0, marginTop: 0, width: showTextInput ? '100%' : 32 }}\n                            showTextInput={showTextInput}\n                        />\n                        {typeof CustomColorMatchEditor === 'function' && (\n                            <CustomColorMatchEditor index={idx} />\n                        )}\n                    </div>\n                </FormRows.Row>\n            );\n        });\n    }, [colors, CustomColorMatchEditor, handleColorRemove, handleColorChange]);\n\n    return (\n        <StyledFlyoutContent data-test=\"MultiColorPickerFlyoutContent\">\n            <FlyoutHeader data-test=\"MultiColorPickerFlyoutTitle\">{flyoutTitle}</FlyoutHeader>\n            <ColorListEditor>\n                <FormRows\n                    addLabel={addColorButtonLabel}\n                    onRequestAdd={handleColorAdd}\n                    onRequestMove={handleColorMove}\n                    data-test=\"ColorListEditor\"\n                >\n                    {ColorRowItems}\n                </FormRows>\n            </ColorListEditor>\n        </StyledFlyoutContent>\n    );\n};\n\nexport interface MultiColorPickerEditorProps extends BaseEditorProps {\n    CustomColorMatchEditor?: (props: { index: number }) => React.ReactNode;\n    canReorderColors?: boolean;\n    value: string[];\n    flyoutTitle?: string;\n    addColorButtonLabel?: string;\n    hideLabel?: boolean;\n    canAddNewColors?: boolean;\n}\n\nconst MultiColorPickerEditor: React.FunctionComponent<MultiColorPickerEditorProps> = ({\n    CustomColorMatchEditor,\n    onChange = noop,\n    canReorderColors = true,\n    value: vizColors = VIZ_CATEGORICAL,\n    flyoutTitle = _('Customize colors'),\n    addColorButtonLabel = _('Add color'),\n    name = 'seriesColors',\n    label = '',\n    labelPosition = 'top',\n    labelWidth,\n    isDisabled = false,\n    hideLabel = true,\n    canAddNewColors = true,\n}) => {\n    const [showFlyout, setShowFlyout] = useState(false);\n    const [colors, setColors] = useState(vizColors);\n    const buttonRef = useRef(null);\n\n    useEffect(() => {\n        setColors(vizColors);\n    }, [vizColors]);\n\n    // callbacks to add, remove, update and reorder a color form row\n    const handleColorAdd = useCallback(() => {\n        const userColorsSet = new Set(colors);\n        let nextColor = VIZ_CATEGORICAL.find(color => !userColorsSet.has(color));\n        if (!nextColor) {\n            // All picked, count appearances\n            const countMap = new Map<string, number>();\n            VIZ_CATEGORICAL.forEach(color => countMap.set(color, 0));\n            colors.forEach(color => {\n                countMap.set(color, (countMap.get(color) || 0) + 1);\n            });\n            // Find color with minimum appearances\n            let minCount = Infinity;\n            VIZ_CATEGORICAL.forEach(color => {\n                const count = countMap.get(color) || 0;\n                if (count < minCount) {\n                    minCount = count;\n                    nextColor = color;\n                }\n            });\n        }\n        onChange(null, name, [...colors, nextColor]);\n    }, [name, onChange, colors]);\n\n    const handleColorChange = useCallback(\n        idx => (_evt, _name, value) => {\n            const colorsCopy = [...colors];\n            colorsCopy.splice(idx, 1, value);\n            onChange(null, name, colorsCopy);\n        },\n        [name, onChange, colors]\n    );\n\n    const handleColorRemove = useCallback(\n        (e, { index }) => {\n            const colorsCopy = [...colors];\n            colorsCopy.splice(index, 1);\n            onChange(null, name, colorsCopy);\n        },\n        [name, onChange, colors]\n    );\n\n    const handleColorMove = useCallback(\n        ({ fromIndex, toIndex }) => {\n            const colorsCopy = [...colors];\n            const movedColor = colorsCopy[fromIndex];\n            colorsCopy.splice(fromIndex, 1); // first, delete the color at the original position\n            colorsCopy.splice(toIndex, 0, movedColor); // then reinsert it at the new position\n            onChange(null, name, colorsCopy);\n        },\n        [name, onChange, colors]\n    );\n\n    /**\n     * custom logic is required for closing the flyout as the FormRows component is rendered inside a Popover, and\n     * when we sort the form rows, the popover closes mid-sorting (closeReason=\"clickAway\") as the dragged element is\n     * taken out of the flow. Current workaround is to check if the event's source element has a sortable handle,\n     * if yes, the flyout is kept open.\n     *\n     * Additionally, focus is returned to the trigger button when exiting through escape key press\n     */\n    const handleFlyoutClose: PopoverRequestCloseHandler = useCallback(({ event, reason }) => {\n        // @ts-ignore\n        if (!event?.srcElement?.sortableHandle) {\n            setShowFlyout(false);\n        }\n        if (reason === 'escapeKey') {\n            buttonRef.current.focus();\n        }\n    }, []);\n\n    const ColorChips = useMemo(\n        () => colors.map(color => <ColorChip color={color} key={createDOMID()} />),\n        [colors]\n    );\n\n    const toggleShowFlyout = useCallback(() => {\n        setShowFlyout(isShown => !isShown);\n    }, []);\n\n    return (\n        <ControlGroup\n            label={label}\n            labelPosition={labelPosition}\n            labelWidth={labelWidth}\n            hideLabel={hideLabel}\n            data-test=\"MultiColorPickerEditor\"\n        >\n            <StyledButton\n                inline={false}\n                data-test=\"MultiColorPickerButton\"\n                appearance=\"default\"\n                ref={buttonRef}\n                onClick={toggleShowFlyout}\n                disabled={isDisabled}\n                style={colorButtonStyle}\n            >\n                {ColorChips}\n            </StyledButton>\n            <Popover\n                data-test=\"MultiColorPickerFlyout\"\n                open={showFlyout}\n                anchor={buttonRef.current}\n                defaultPlacement=\"horizontal\"\n                style={popoverStyle}\n                onRequestClose={handleFlyoutClose}\n                takeFocus\n            >\n                <ColorFlyoutEditor\n                    colors={colors}\n                    CustomColorMatchEditor={CustomColorMatchEditor}\n                    handleColorRemove={handleColorRemove}\n                    handleColorChange={handleColorChange}\n                    handleColorAdd={canAddNewColors ? handleColorAdd : undefined}\n                    handleColorMove={canReorderColors ? handleColorMove : undefined}\n                    flyoutTitle={flyoutTitle}\n                    addColorButtonLabel={addColorButtonLabel}\n                />\n            </Popover>\n        </ControlGroup>\n    );\n};\n\nMultiColorPickerEditor.propTypes = {\n    ...BaseEditorPropTypes,\n    /**\n     * Colors can be reordered manually\n     */\n    canReorderColors: T.bool,\n    /**\n     * Can add a new color\n     */\n    canAddNewColors: T.bool,\n    /**\n     * List of colors\n     */\n    value: T.arrayOf(T.string),\n    /**\n     * Title of the flyout editor\n     */\n    flyoutTitle: T.string,\n    /**\n     * Button label for adding a new color row\n     */\n    addColorButtonLabel: T.string,\n    /**\n     * Custom input editor for mapping a value to color, eg: dropdown for field -> color\n     */\n    CustomColorMatchEditor: T.func,\n    /**\n     * Flag to hide the editor label\n     */\n    hideLabel: T.bool,\n};\n\nexport default MultiColorPickerEditor;\n","import * as T from 'prop-types';\nimport type { JSONSchema7 } from 'json-schema';\n\nexport interface BaseEditorProps {\n    name: string;\n    value: any;\n    onChange?: (...args: any[]) => void;\n    label?: string; // @TODO(pwied): this should not live in editor props\n    labelPosition?: 'top' | 'left'; // ^^^\n    context?: Record<string, any>;\n    labelWidth?: number;\n    isAdvanced?: boolean;\n    isDisabled?: boolean;\n    dataSourceBindings?: Record<string, any>;\n    options?: { [k: string]: any };\n    optionsSchema?: {\n        [key: string]: JSONSchema7;\n    };\n}\n\nexport const BaseEditorPropTypes: Record<keyof BaseEditorProps, T.Validator<any>> = {\n    name: T.string.isRequired,\n    value: T.oneOfType([T.string, T.object, T.arrayOf(T.string)]),\n    context: T.object,\n    label: T.string,\n    labelPosition: T.oneOf(['top', 'left']),\n    labelWidth: T.number,\n    onChange: T.func,\n    isAdvanced: T.bool,\n    isDisabled: T.bool,\n    dataSourceBindings: T.object,\n    options: T.object,\n    optionsSchema: T.object,\n};\n","import React, { Children, cloneElement } from 'react';\nimport type { ReactElement } from 'react';\nimport * as T from 'prop-types';\nimport styled from 'styled-components';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport AdvancedConfigIcon from '@splunk/react-icons/SlidersDoubleHorizontal';\nimport { variables } from '@splunk/themes';\nimport Tooltip from '@splunk/react-ui/Tooltip';\nimport type { ButtonClickHandler, ButtonProps } from '@splunk/react-ui/Button';\nimport Button from '@splunk/react-ui/Button';\nimport SUIControlGroup from '@splunk/react-ui/ControlGroup';\nimport type { ControlGroupPropsBase } from '@splunk/react-ui/ControlGroup';\n\ninterface AdvancedControlGroupProps extends Omit<ControlGroupPropsBase, 'splunkTheme'> {\n    'data-test'?: string;\n    style?: Record<string, string | number>;\n    isAdvanced?: boolean;\n    onClick?: React.MouseEventHandler<HTMLDivElement>;\n    onAdvancedConfigButtonClick?: ButtonClickHandler;\n}\n\ninterface AdvancedConfigButtonProps {\n    label?: string;\n    onClick?: ButtonClickHandler;\n}\n\n// remove all surrounding margins. let parent add padding\nconst ControlGroupContainer = styled(SUIControlGroup)`\n    margin-top: 0;\n    padding: 0;\n    // adjust bottom margin according to theme\n    margin-bottom: ${variables.spacingMedium};\n    width: 100%;\n\n    // remove top margin of the first component in control group\n    &:first-child {\n        margin-top: 0;\n    }\n\n    // remove bottom margin of the last component in control group\n    &:last-child {\n        margin-bottom: 0;\n    }\n    // remove top padding on label of the first control group\n    [data-test='label']:first-of-type {\n        padding-top: 0;\n    }\n`;\n\n// override tooltip to set desired config button style\nconst StyledToolTip = styled(Tooltip)`\n    display: flex;\n    > span {\n        display: flex;\n        width: 35px;\n    }\n`;\n\nconst StyledAdvancedConfigButton = styled(Button)<ButtonProps>`\n    color: ${variables.contentColorActive} !important;\n    &:hover {\n        background-color: ${variables.interactiveColorOverlayDrag} !important;\n    }\n`;\n\nexport const AdvancedConfigButton = ({\n    label = '',\n    onClick,\n}: AdvancedConfigButtonProps): React.ReactElement => {\n    return (\n        <StyledToolTip\n            data-test={`${label}-advanced-config-button-tooltip`}\n            content={_('Advanced configurations')}\n        >\n            <StyledAdvancedConfigButton\n                data-test={`${label}-advanced-config-button`}\n                icon={<AdvancedConfigIcon data-test={`${label}-advanced-config-button-icon`} />}\n                appearance=\"subtle\"\n                onClick={onClick}\n            />\n        </StyledToolTip>\n    );\n};\n\nconst AdvancedControlGroup = ({\n    'data-test': dataTest,\n    children,\n    isAdvanced = false,\n    label,\n    hideLabel,\n    labelPosition,\n    labelWidth,\n    tooltip,\n    help,\n    style,\n    error,\n    controlsLayout,\n    onClick,\n    onAdvancedConfigButtonClick,\n}: AdvancedControlGroupProps): React.ReactElement => (\n    <ControlGroupContainer\n        data-test={dataTest ?? 'control-group'}\n        label={label}\n        hideLabel={hideLabel}\n        labelPosition={labelPosition}\n        labelWidth={labelWidth}\n        tooltip={tooltip}\n        help={help}\n        error={error}\n        style={style}\n        onClick={onClick}\n        controlsLayout={controlsLayout}\n    >\n        {isAdvanced\n            ? Children.toArray(children)\n                  .filter(Boolean)\n                  .map(child =>\n                      cloneElement(child as ReactElement, {\n                          style: { flex: 1 },\n                      })\n                  )\n            : children}\n        {isAdvanced ? <AdvancedConfigButton label={label} onClick={onAdvancedConfigButtonClick} /> : null}\n    </ControlGroupContainer>\n);\n\nAdvancedControlGroup.propTypes = {\n    /**\n     * Style overriding SUI ControlGroup\n     */\n    style: T.object,\n    /**\n     * Whether the current editor is enabled with advanced configurations\n     */\n    isAdvanced: T.bool,\n    /**\n     * Callback for editor click\n     */\n    onClick: T.func,\n    /**\n     * Callback for advanced config button click\n     */\n    onAdvancedConfigButtonClick: T.func,\n};\n\nexport default AdvancedControlGroup;\n","module.exports = require(\"@splunk/react-icons/SlidersDoubleHorizontal\");","module.exports = require(\"@splunk/react-ui/Button\");","module.exports = require(\"@splunk/react-ui/Color\");","module.exports = require(\"@splunk/react-ui/ControlGroup\");","module.exports = require(\"@splunk/react-ui/FormRows\");","module.exports = require(\"@splunk/react-ui/Popover\");","module.exports = require(\"@splunk/react-ui/Text\");","module.exports = require(\"@splunk/react-ui/Tooltip\");","module.exports = require(\"@splunk/themes\");","module.exports = require(\"@splunk/themes/variables\");","module.exports = require(\"@splunk/ui-utils/i18n\");","module.exports = require(\"@splunk/ui-utils/id\");","module.exports = require(\"@splunk/visualization-color-palettes\");","module.exports = require(\"@splunk/visualizations-shared/colorUtils\");","module.exports = require(\"lodash\");","module.exports = require(\"prop-types\");","module.exports = require(\"react\");","module.exports = require(\"styled-components\");","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","// startup\n// Load entry module and return exports\n// This entry module is referenced by other modules so it can't be inlined\nvar __webpack_exports__ = __webpack_require__(2965);\n"],"names":["require","TextContainer","styled","variables","inputHeight","StyledText","Text","getColor","color","defaultColor","prevColor","newColor","trim","isColor","ColorAndTextWrapper","id","showTextInput","palette","handleColorChange","labelledBy","textWidth","value","name","handleTextColorChange","handleKeyPress","handleBlur","isDisabled","textLabelId","useMemo","createDOMID","React","Color","key","append","onChange","disabled","hideInput","ScreenReaderContent","_","prepend","onKeyDown","onBlur","style","height","inputId","propTypes","T","isRequired","defaultItemSchema","default","emptyStyle","ColorEditor","label","labelPosition","labelWidth","COLOR_EDITOR_PALETTE","noop","itemSchema","hideLabel","customEditorStyle","setColor","useState","useEffect","debouncedOnChange","debounce","useCallback","val","_event","colorToValue","toLower","event","ControlGroup","controlsLayout","popoverStyle","padding","colorButtonStyle","width","StyledButton","interactiveColorBackground","ColorChip","div","props","neutral100","StyledFlyoutContent","backgroundColorPopup","FlyoutHeader","fontFamily","contentColorActive","ColorListEditor","ColorFlyoutEditor","colors","CustomColorMatchEditor","handleColorRemove","flyoutTitle","addColorButtonLabel","handleColorAdd","handleColorMove","ColorRowItems","map","idx","Row","index","onRequestRemove","display","justifyContent","marginBottom","marginTop","addLabel","onRequestAdd","onRequestMove","MultiColorPickerEditor","canReorderColors","vizColors","VIZ_CATEGORICAL","canAddNewColors","showFlyout","setShowFlyout","setColors","buttonRef","useRef","userColorsSet","Set","nextColor","find","has","countMap","Map","forEach","set","get","minCount","Infinity","count","_evt","_name","colorsCopy","splice","e","fromIndex","toIndex","movedColor","handleFlyoutClose","reason","srcElement","sortableHandle","current","focus","ColorChips","toggleShowFlyout","isShown","inline","appearance","ref","onClick","open","anchor","defaultPlacement","onRequestClose","takeFocus","undefined","BaseEditorPropTypes","bool","arrayOf","string","func","oneOfType","object","context","oneOf","number","isAdvanced","dataSourceBindings","options","optionsSchema","ControlGroupContainer","spacingMedium","StyledToolTip","StyledAdvancedConfigButton","interactiveColorOverlayDrag","AdvancedConfigButton","content","icon","AdvancedControlGroup","dataTest","children","tooltip","help","error","onAdvancedConfigButtonClick","Children","toArray","filter","Boolean","child","cloneElement","flex","module","exports","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","__webpack_modules__","call","n","getter","__esModule","d","a","definition","o","Object","defineProperty","enumerable","obj","prop","prototype","hasOwnProperty","r","Symbol","toStringTag","__webpack_exports__"],"sourceRoot":""}
+{"version":3,"file":"MultiColorPickerEditor.js","mappings":"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","sources":["webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/visualizations-shared/colorConstants\"","webpack://@splunk/dynamic-editors/./src/editors/ColorEditor.jsx","webpack://@splunk/dynamic-editors/./src/editors/MultiColorPickerEditor.tsx","webpack://@splunk/dynamic-editors/./src/interfaces/BaseEditorProps.ts","webpack://@splunk/dynamic-editors/./src/shared/AdvancedControlGroup.tsx","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-icons/SlidersDoubleHorizontal\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/Button\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/Color\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/ControlGroup\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/FormRows\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/Popover\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/ScreenReaderContent\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/Text\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/react-ui/Tooltip\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/themes\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/themes/variables\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/ui-utils/i18n\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/ui-utils/id\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/visualization-color-palettes\"","webpack://@splunk/dynamic-editors/external commonjs2 \"@splunk/visualizations-shared/colorUtils\"","webpack://@splunk/dynamic-editors/external commonjs2 \"lodash\"","webpack://@splunk/dynamic-editors/external commonjs2 \"prop-types\"","webpack://@splunk/dynamic-editors/external commonjs2 \"react\"","webpack://@splunk/dynamic-editors/external commonjs2 \"styled-components\"","webpack://@splunk/dynamic-editors/webpack/bootstrap","webpack://@splunk/dynamic-editors/webpack/runtime/compat get default export","webpack://@splunk/dynamic-editors/webpack/runtime/define property getters","webpack://@splunk/dynamic-editors/webpack/runtime/hasOwnProperty shorthand","webpack://@splunk/dynamic-editors/webpack/runtime/make namespace object","webpack://@splunk/dynamic-editors/webpack/startup"],"sourcesContent":["const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@splunk/visualizations-shared/colorConstants\");","import React, { useEffect, useCallback, useState, useMemo } from 'react';\nimport T from 'prop-types';\nimport styled from 'styled-components';\nimport { debounce, noop, toLower } from 'lodash';\nimport { variables } from '@splunk/themes';\nimport Color from '@splunk/react-ui/Color';\nimport Text from '@splunk/react-ui/Text';\nimport { createDOMID } from '@splunk/ui-utils/id';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport ScreenReaderContent from '@splunk/react-ui/ScreenReaderContent';\nimport { COLOR_EDITOR_PALETTE } from '@splunk/visualizations-shared/colorConstants';\nimport { isColor } from '@splunk/visualizations-shared/colorUtils';\nimport ControlGroup from '../shared/AdvancedControlGroup';\n\nconst TextContainer = styled.div`\n    max-height: ${variables.inputHeight};\n    width: 100%;\n    min-width: 0;\n`;\n\n// hardcoded style to sync with SUI color picker's hardcoded dimensions\n// TODO(fkurniawan): see if we can leverage prisma's consolidated textInput out of the box instead of our own component\n// right now, we're using hideInput\nconst StyledText = styled(Text)`\n    max-height: ${variables.inputHeight};\n`;\n\n/**\n * Trims the color input and returns the result, or default color if the default color is valid, or previous color\n * @param {String} color The color the user entered\n * @param {String} defaultColor The default color of the component\n * @param {String} prevColor The previous color of the component\n * @returns {String}\n */\nconst getColor = ({ color, defaultColor, prevColor }) => {\n    const newColor = typeof color === 'string' ? color.trim() : color;\n\n    // color === null is `N/A` in color picker\n    if (isColor(newColor) || newColor === null) {\n        return newColor;\n    }\n\n    if (isColor(defaultColor)) {\n        return defaultColor;\n    }\n\n    if (isColor(prevColor) || prevColor === null) {\n        return prevColor;\n    }\n\n    return 'transparent';\n};\n\nconst ColorAndTextWrapper = ({\n    id,\n    showTextInput,\n    color,\n    palette,\n    handleColorChange,\n    labelledBy,\n    textWidth,\n    value,\n    name,\n    handleTextColorChange,\n    handleKeyPress,\n    handleBlur,\n    isDisabled,\n}) => {\n    const textLabelId = useMemo(() => createDOMID('color-code'), []);\n\n    return (\n        <>\n            <div>\n                <Color\n                    key=\"color-editor\"\n                    append={showTextInput}\n                    value={getColor({ color })}\n                    palette={palette}\n                    onChange={handleColorChange}\n                    data-test={`color-picker-${name}`}\n                    disabled={isDisabled}\n                    hideInput\n                    labelledBy={labelledBy}\n                />\n            </div>\n            {showTextInput && (\n                <TextContainer data-test=\"text-container\" textWidth={textWidth}>\n                    <ScreenReaderContent id={textLabelId}>{_('Color code input')}</ScreenReaderContent>\n                    <StyledText\n                        key={value}\n                        data-test={name}\n                        prepend\n                        value={color === null ? 'N/A' : color}\n                        onChange={handleTextColorChange}\n                        onKeyDown={handleKeyPress}\n                        onBlur={handleBlur}\n                        disabled={isDisabled}\n                        // hardcoded style to sync with SUI color picker's hardcoded dimensions\n                        // TODO(fkurniawan): see if we can leverage prisma's consolidated textInput out of the box\n                        style={{ height: '32px' }}\n                        labelledBy={`${labelledBy} ${textLabelId}`}\n                        inputId={id}\n                    />\n                </TextContainer>\n            )}\n        </>\n    );\n};\n\nColorAndTextWrapper.propTypes = {\n    id: T.string,\n    showTextInput: T.bool,\n    color: T.string,\n    palette: T.arrayOf(T.string),\n    handleColorChange: T.func,\n    labelledBy: T.string,\n    textWidth: T.oneOfType([T.string, T.number]),\n    value: T.string,\n    name: T.string.isRequired,\n    handleTextColorChange: T.func,\n    handleKeyPress: T.func,\n    handleBlur: T.func,\n    isDisabled: T.bool,\n};\n\nconst defaultItemSchema = { default: 'transparent' };\nconst emptyStyle = {};\n\n// The propTypes typing for TS callers isn't working for the onChange callback\n/**\n * @param {Object} props\n * @param {(e: import('react').SyntheticEvent, name: string, value: string) => void} [props.onChange]\n * @returns\n */\nconst ColorEditor = ({\n    name = 'color',\n    value = 'transparent',\n    label = '',\n    labelPosition = 'top',\n    labelWidth,\n    palette = COLOR_EDITOR_PALETTE,\n    onChange = noop,\n    itemSchema = defaultItemSchema,\n    isDisabled = false,\n    textWidth = 'auto',\n    hideLabel = false,\n    showTextInput = true,\n    style: customEditorStyle = emptyStyle,\n}) => {\n    const [color, setColor] = useState(value);\n\n    useEffect(() => {\n        setColor(value);\n    }, [value]);\n\n    const debouncedOnChange = useMemo(() => debounce(onChange, 250), [onChange]);\n\n    const handleColorChange = useCallback(\n        ({ value: val }) => {\n            const newColor = getColor({ color: val, defaultColor: itemSchema.default, prevColor: value });\n            setColor(newColor);\n            if (value !== newColor) {\n                // No event to pass back, so it is null\n                debouncedOnChange(null, name, newColor);\n            }\n        },\n        [debouncedOnChange, itemSchema.default, name, value]\n    );\n\n    const handleTextColorChange = useCallback((_event, { value: val }) => {\n        const colorToValue = toLower(val).trim() === 'n/a' ? null : val;\n        setColor(colorToValue);\n    }, []);\n\n    const handleKeyPress = useCallback(\n        event => {\n            if (event.key === 'Escape') {\n                setColor(value);\n                return;\n            }\n            if (event.key !== 'Enter') {\n                return;\n            }\n\n            if (value !== color) {\n                const newColor = getColor({ color, defaultColor: itemSchema.default, prevColor: value });\n                setColor(newColor);\n                if (newColor !== value) {\n                    onChange(event, name, newColor);\n                }\n            }\n        },\n        [name, color, value, onChange, itemSchema.default]\n    );\n\n    const handleBlur = useCallback(\n        event => {\n            if (color !== value) {\n                const newColor = getColor({ color, defaultColor: itemSchema.default, prevColor: value });\n                setColor(newColor);\n                if (newColor !== value) {\n                    onChange(event, name, newColor);\n                }\n            }\n        },\n        [name, color, value, onChange, itemSchema.default]\n    );\n\n    return (\n        <ControlGroup\n            label={label}\n            labelPosition={labelPosition}\n            labelWidth={labelWidth}\n            style={customEditorStyle}\n            hideLabel={hideLabel}\n            controlsLayout=\"fillJoin\"\n        >\n            <ColorAndTextWrapper\n                showTextInput={showTextInput}\n                color={color}\n                palette={palette}\n                handleColorChange={handleColorChange}\n                name={name}\n                isDisabled={isDisabled}\n                textWidth={textWidth}\n                value={value}\n                handleTextColorChange={handleTextColorChange}\n                handleKeyPress={handleKeyPress}\n                handleBlur={handleBlur}\n            />\n        </ControlGroup>\n    );\n};\n\nColorEditor.propTypes = {\n    /**\n     * The option name\n     */\n    name: T.string.isRequired,\n\n    /**\n     * The option value\n     */\n    value: T.string,\n\n    /**\n     * @param {Object} itemSchema Either the dataContract or schema for the selected item\n     */\n    itemSchema: T.object,\n\n    /**\n     * A human readable label for the option\n     */\n    label: T.string.isRequired,\n\n    /**\n     * Flag to hide the editor label\n     */\n    hideLabel: T.bool,\n\n    /**\n     * Flag to hide the color text input\n     */\n    showTextInput: T.bool,\n\n    /**\n     * Custom styling for the editor layout, eg: setting margin-bottom to 0px for ControlGroup, SUI has it at 15px\n     */\n    style: T.object,\n\n    /**\n     * Label position\n     */\n    labelPosition: T.oneOf(['top', 'left']),\n\n    /**\n     * Label position\n     */\n    labelWidth: T.number,\n\n    /**\n     * An array of color swatch values\n     */\n    palette: T.arrayOf(T.string),\n\n    /**\n     * Callback when changing the text value\n     *\n     * @param {SyntheticEvent} event The react `SyntheticEvent`\n     * @param {string} name The option name\n     * @param {string} value The option value\n     */\n    onChange: T.func.isRequired,\n    /**\n     * Disabled state of component\n     */\n    isDisabled: T.bool,\n    textWidth: T.oneOfType([T.string, T.number]),\n};\n\nexport default ColorEditor;\n","import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';\nimport * as T from 'prop-types';\nimport styled from 'styled-components';\nimport { noop } from 'lodash';\nimport variables from '@splunk/themes/variables';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport FormRows from '@splunk/react-ui/FormRows';\nimport { createDOMID } from '@splunk/ui-utils/id';\nimport Button from '@splunk/react-ui/Button';\nimport type { PopoverRequestCloseHandler } from '@splunk/react-ui/Popover';\nimport Popover from '@splunk/react-ui/Popover';\nimport { VIZ_CATEGORICAL } from '@splunk/visualization-color-palettes';\nimport { BaseEditorPropTypes } from '../interfaces/BaseEditorProps';\nimport type { BaseEditorProps } from '../interfaces/BaseEditorProps';\nimport ControlGroup from '../shared/AdvancedControlGroup';\nimport ColorEditor from './ColorEditor';\n\nconst popoverStyle = { padding: '10px' };\nconst colorButtonStyle = { width: '314px' };\n\nconst StyledButton = styled(Button)`\n    padding: 8px;\n    width: 100%;\n    min-height: 40px;\n    & > span {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 26px);\n        justify-content: space-evenly;\n        grid-gap: 4px;\n    }\n    background-color: ${variables.interactiveColorBackground};\n`;\n\nconst ColorChip = styled.div`\n    width: 26px;\n    height: 24px;\n    background-color: ${(props): string => props.color};\n    border-radius: 2px;\n    border: 1px solid ${variables.neutral100};\n`;\n\nconst StyledFlyoutContent = styled.div`\n    box-sizing: border-box;\n    padding: 8px;\n    width: 312px;\n    max-height: 484px;\n    background-color: ${variables.backgroundColorPopup};\n`;\n\nconst FlyoutHeader = styled.div`\n    font-weight: 500;\n    font-size: 14px;\n    line-height: 20px;\n    padding: 8px 8px 0 8px;\n    font-family: ${variables.fontFamily};\n    color: ${variables.contentColorActive};\n`;\n\nconst ColorListEditor = styled.div`\n    height: 412px;\n    overflow-y: auto;\n    padding: 8px 10px;\n`;\n\nexport interface ColorFlyoutEditorProps {\n    colors: string[];\n    handleColorRemove: (_e, { index }: { index: number }) => void;\n    handleColorChange: (idx: number) => (_evt, name: string, value: string) => void;\n    CustomColorMatchEditor?: (props: { index: number }) => React.ReactNode;\n    flyoutTitle: string;\n    addColorButtonLabel: string;\n    handleColorAdd: () => void;\n    handleColorMove: (data: { fromIndex: number; toIndex: number }) => void;\n}\n\nexport const ColorFlyoutEditor = ({\n    colors,\n    CustomColorMatchEditor,\n    handleColorRemove,\n    handleColorChange,\n    flyoutTitle,\n    addColorButtonLabel,\n    handleColorAdd,\n    handleColorMove,\n}: ColorFlyoutEditorProps) => {\n    const ColorRowItems = useMemo(() => {\n        return colors.map((color, idx) => {\n            // disable the color editor's text input when a custom input editor is available to render adjacently\n            const showTextInput = CustomColorMatchEditor == null;\n            return (\n                <FormRows.Row\n                    index={idx}\n                    key={createDOMID()}\n                    data-color={color}\n                    onRequestRemove={handleColorRemove}\n                >\n                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>\n                        <ColorEditor\n                            value={color}\n                            key={createDOMID()}\n                            onChange={handleColorChange(idx)}\n                            hideLabel\n                            label=\" \"\n                            name=\"color\"\n                            style={{ marginBottom: 0, marginTop: 0, width: showTextInput ? '100%' : 32 }}\n                            showTextInput={showTextInput}\n                        />\n                        {typeof CustomColorMatchEditor === 'function' && (\n                            <CustomColorMatchEditor index={idx} />\n                        )}\n                    </div>\n                </FormRows.Row>\n            );\n        });\n    }, [colors, CustomColorMatchEditor, handleColorRemove, handleColorChange]);\n\n    return (\n        <StyledFlyoutContent data-test=\"MultiColorPickerFlyoutContent\">\n            <FlyoutHeader data-test=\"MultiColorPickerFlyoutTitle\">{flyoutTitle}</FlyoutHeader>\n            <ColorListEditor>\n                <FormRows\n                    addLabel={addColorButtonLabel}\n                    onRequestAdd={handleColorAdd}\n                    onRequestMove={handleColorMove}\n                    data-test=\"ColorListEditor\"\n                >\n                    {ColorRowItems}\n                </FormRows>\n            </ColorListEditor>\n        </StyledFlyoutContent>\n    );\n};\n\nexport interface MultiColorPickerEditorProps extends BaseEditorProps {\n    CustomColorMatchEditor?: (props: { index: number }) => React.ReactNode;\n    canReorderColors?: boolean;\n    value: string[];\n    flyoutTitle?: string;\n    addColorButtonLabel?: string;\n    hideLabel?: boolean;\n    canAddNewColors?: boolean;\n}\n\nconst MultiColorPickerEditor: React.FunctionComponent<MultiColorPickerEditorProps> = ({\n    CustomColorMatchEditor,\n    onChange = noop,\n    canReorderColors = true,\n    value: vizColors = VIZ_CATEGORICAL,\n    flyoutTitle = _('Customize colors'),\n    addColorButtonLabel = _('Add color'),\n    name = 'seriesColors',\n    label = '',\n    labelPosition = 'top',\n    labelWidth,\n    isDisabled = false,\n    hideLabel = true,\n    canAddNewColors = true,\n}) => {\n    const [showFlyout, setShowFlyout] = useState(false);\n    const [colors, setColors] = useState(vizColors);\n    const buttonRef = useRef(null);\n\n    useEffect(() => {\n        setColors(vizColors);\n    }, [vizColors]);\n\n    // callbacks to add, remove, update and reorder a color form row\n    const handleColorAdd = useCallback(() => {\n        const userColorsSet = new Set(colors);\n        let nextColor = VIZ_CATEGORICAL.find(color => !userColorsSet.has(color));\n        if (!nextColor) {\n            // All picked, count appearances\n            const countMap = new Map<string, number>();\n            VIZ_CATEGORICAL.forEach(color => countMap.set(color, 0));\n            colors.forEach(color => {\n                countMap.set(color, (countMap.get(color) || 0) + 1);\n            });\n            // Find color with minimum appearances\n            let minCount = Infinity;\n            VIZ_CATEGORICAL.forEach(color => {\n                const count = countMap.get(color) || 0;\n                if (count < minCount) {\n                    minCount = count;\n                    nextColor = color;\n                }\n            });\n        }\n        onChange(null, name, [...colors, nextColor]);\n    }, [name, onChange, colors]);\n\n    const handleColorChange = useCallback(\n        idx => (_evt, _name, value) => {\n            const colorsCopy = [...colors];\n            colorsCopy.splice(idx, 1, value);\n            onChange(null, name, colorsCopy);\n        },\n        [name, onChange, colors]\n    );\n\n    const handleColorRemove = useCallback(\n        (e, { index }) => {\n            const colorsCopy = [...colors];\n            colorsCopy.splice(index, 1);\n            onChange(null, name, colorsCopy);\n        },\n        [name, onChange, colors]\n    );\n\n    const handleColorMove = useCallback(\n        ({ fromIndex, toIndex }) => {\n            const colorsCopy = [...colors];\n            const movedColor = colorsCopy[fromIndex];\n            colorsCopy.splice(fromIndex, 1); // first, delete the color at the original position\n            colorsCopy.splice(toIndex, 0, movedColor); // then reinsert it at the new position\n            onChange(null, name, colorsCopy);\n        },\n        [name, onChange, colors]\n    );\n\n    /**\n     * custom logic is required for closing the flyout as the FormRows component is rendered inside a Popover, and\n     * when we sort the form rows, the popover closes mid-sorting (closeReason=\"clickAway\") as the dragged element is\n     * taken out of the flow. Current workaround is to check if the event's source element has a sortable handle,\n     * if yes, the flyout is kept open.\n     *\n     * Additionally, focus is returned to the trigger button when exiting through escape key press\n     */\n    const handleFlyoutClose: PopoverRequestCloseHandler = useCallback(({ event, reason }) => {\n        // @ts-ignore\n        if (!event?.srcElement?.sortableHandle) {\n            setShowFlyout(false);\n        }\n        if (reason === 'escapeKey') {\n            buttonRef.current.focus();\n        }\n    }, []);\n\n    const ColorChips = useMemo(\n        () => colors.map(color => <ColorChip color={color} key={createDOMID()} />),\n        [colors]\n    );\n\n    const toggleShowFlyout = useCallback(() => {\n        setShowFlyout(isShown => !isShown);\n    }, []);\n\n    return (\n        <ControlGroup\n            label={label}\n            labelPosition={labelPosition}\n            labelWidth={labelWidth}\n            hideLabel={hideLabel}\n            data-test=\"MultiColorPickerEditor\"\n        >\n            <StyledButton\n                inline={false}\n                data-test=\"MultiColorPickerButton\"\n                appearance=\"default\"\n                ref={buttonRef}\n                onClick={toggleShowFlyout}\n                disabled={isDisabled}\n                style={colorButtonStyle}\n            >\n                {ColorChips}\n            </StyledButton>\n            <Popover\n                data-test=\"MultiColorPickerFlyout\"\n                open={showFlyout}\n                anchor={buttonRef.current}\n                defaultPlacement=\"horizontal\"\n                style={popoverStyle}\n                onRequestClose={handleFlyoutClose}\n                takeFocus\n            >\n                <ColorFlyoutEditor\n                    colors={colors}\n                    CustomColorMatchEditor={CustomColorMatchEditor}\n                    handleColorRemove={handleColorRemove}\n                    handleColorChange={handleColorChange}\n                    handleColorAdd={canAddNewColors ? handleColorAdd : undefined}\n                    handleColorMove={canReorderColors ? handleColorMove : undefined}\n                    flyoutTitle={flyoutTitle}\n                    addColorButtonLabel={addColorButtonLabel}\n                />\n            </Popover>\n        </ControlGroup>\n    );\n};\n\nMultiColorPickerEditor.propTypes = {\n    ...BaseEditorPropTypes,\n    /**\n     * Colors can be reordered manually\n     */\n    canReorderColors: T.bool,\n    /**\n     * Can add a new color\n     */\n    canAddNewColors: T.bool,\n    /**\n     * List of colors\n     */\n    value: T.arrayOf(T.string),\n    /**\n     * Title of the flyout editor\n     */\n    flyoutTitle: T.string,\n    /**\n     * Button label for adding a new color row\n     */\n    addColorButtonLabel: T.string,\n    /**\n     * Custom input editor for mapping a value to color, eg: dropdown for field -> color\n     */\n    CustomColorMatchEditor: T.func,\n    /**\n     * Flag to hide the editor label\n     */\n    hideLabel: T.bool,\n};\n\nexport default MultiColorPickerEditor;\n","import * as T from 'prop-types';\nimport type { JSONSchema7 } from 'json-schema';\n\nexport interface BaseEditorProps {\n    name: string;\n    value: any;\n    onChange?: (...args: any[]) => void;\n    label?: string; // @TODO(pwied): this should not live in editor props\n    labelPosition?: 'top' | 'left'; // ^^^\n    context?: Record<string, any>;\n    labelWidth?: number;\n    isAdvanced?: boolean;\n    isDisabled?: boolean;\n    dataSourceBindings?: Record<string, any>;\n    options?: { [k: string]: any };\n    optionsSchema?: {\n        [key: string]: JSONSchema7;\n    };\n}\n\nexport const BaseEditorPropTypes: Record<keyof BaseEditorProps, T.Validator<any>> = {\n    name: T.string.isRequired,\n    value: T.oneOfType([T.string, T.object, T.arrayOf(T.string)]),\n    context: T.object,\n    label: T.string,\n    labelPosition: T.oneOf(['top', 'left']),\n    labelWidth: T.number,\n    onChange: T.func,\n    isAdvanced: T.bool,\n    isDisabled: T.bool,\n    dataSourceBindings: T.object,\n    options: T.object,\n    optionsSchema: T.object,\n};\n","import React, { Children, cloneElement } from 'react';\nimport type { ReactElement } from 'react';\nimport * as T from 'prop-types';\nimport styled from 'styled-components';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport AdvancedConfigIcon from '@splunk/react-icons/SlidersDoubleHorizontal';\nimport { variables } from '@splunk/themes';\nimport Tooltip from '@splunk/react-ui/Tooltip';\nimport type { ButtonClickHandler, ButtonProps } from '@splunk/react-ui/Button';\nimport Button from '@splunk/react-ui/Button';\nimport SUIControlGroup from '@splunk/react-ui/ControlGroup';\nimport type { ControlGroupPropsBase } from '@splunk/react-ui/ControlGroup';\n\ninterface AdvancedControlGroupProps extends Omit<ControlGroupPropsBase, 'splunkTheme'> {\n    'data-test'?: string;\n    style?: Record<string, string | number>;\n    isAdvanced?: boolean;\n    onClick?: React.MouseEventHandler<HTMLDivElement>;\n    onAdvancedConfigButtonClick?: ButtonClickHandler;\n}\n\ninterface AdvancedConfigButtonProps {\n    label?: string;\n    onClick?: ButtonClickHandler;\n}\n\n// remove all surrounding margins. let parent add padding\nconst ControlGroupContainer = styled(SUIControlGroup)`\n    margin-top: 0;\n    padding: 0;\n    // adjust bottom margin according to theme\n    margin-bottom: ${variables.spacingMedium};\n    width: 100%;\n\n    // remove top margin of the first component in control group\n    &:first-child {\n        margin-top: 0;\n    }\n\n    // remove bottom margin of the last component in control group\n    &:last-child {\n        margin-bottom: 0;\n    }\n    // remove top padding on label of the first control group\n    [data-test='label']:first-of-type {\n        padding-top: 0;\n    }\n`;\n\n// override tooltip to set desired config button style\nconst StyledToolTip = styled(Tooltip)`\n    display: flex;\n    > span {\n        display: flex;\n        width: 35px;\n    }\n`;\n\nconst StyledAdvancedConfigButton = styled(Button)<ButtonProps>`\n    color: ${variables.contentColorActive} !important;\n    &:hover {\n        background-color: ${variables.interactiveColorOverlayDrag} !important;\n    }\n`;\n\nexport const AdvancedConfigButton = ({\n    label = '',\n    onClick,\n}: AdvancedConfigButtonProps): React.ReactElement => {\n    return (\n        <StyledToolTip\n            data-test={`${label}-advanced-config-button-tooltip`}\n            content={_('Advanced configurations')}\n        >\n            <StyledAdvancedConfigButton\n                data-test={`${label}-advanced-config-button`}\n                icon={<AdvancedConfigIcon data-test={`${label}-advanced-config-button-icon`} />}\n                appearance=\"subtle\"\n                onClick={onClick}\n            />\n        </StyledToolTip>\n    );\n};\n\nconst AdvancedControlGroup = ({\n    'data-test': dataTest,\n    children,\n    isAdvanced = false,\n    label,\n    hideLabel,\n    labelPosition,\n    labelWidth,\n    tooltip,\n    help,\n    style,\n    error,\n    controlsLayout,\n    onClick,\n    onAdvancedConfigButtonClick,\n}: AdvancedControlGroupProps): React.ReactElement => (\n    <ControlGroupContainer\n        data-test={dataTest ?? 'control-group'}\n        label={label}\n        hideLabel={hideLabel}\n        labelPosition={labelPosition}\n        labelWidth={labelWidth}\n        tooltip={tooltip}\n        help={help}\n        error={error}\n        style={style}\n        onClick={onClick}\n        controlsLayout={controlsLayout}\n    >\n        {isAdvanced\n            ? Children.toArray(children)\n                  .filter(Boolean)\n                  .map(child =>\n                      cloneElement(child as ReactElement, {\n                          style: { flex: 1 },\n                      })\n                  )\n            : children}\n        {isAdvanced ? <AdvancedConfigButton label={label} onClick={onAdvancedConfigButtonClick} /> : null}\n    </ControlGroupContainer>\n);\n\nAdvancedControlGroup.propTypes = {\n    /**\n     * Style overriding SUI ControlGroup\n     */\n    style: T.object,\n    /**\n     * Whether the current editor is enabled with advanced configurations\n     */\n    isAdvanced: T.bool,\n    /**\n     * Callback for editor click\n     */\n    onClick: T.func,\n    /**\n     * Callback for advanced config button click\n     */\n    onAdvancedConfigButtonClick: T.func,\n};\n\nexport default AdvancedControlGroup;\n","module.exports = require(\"@splunk/react-icons/SlidersDoubleHorizontal\");","module.exports = require(\"@splunk/react-ui/Button\");","module.exports = require(\"@splunk/react-ui/Color\");","module.exports = require(\"@splunk/react-ui/ControlGroup\");","module.exports = require(\"@splunk/react-ui/FormRows\");","module.exports = require(\"@splunk/react-ui/Popover\");","module.exports = require(\"@splunk/react-ui/ScreenReaderContent\");","module.exports = require(\"@splunk/react-ui/Text\");","module.exports = require(\"@splunk/react-ui/Tooltip\");","module.exports = require(\"@splunk/themes\");","module.exports = require(\"@splunk/themes/variables\");","module.exports = require(\"@splunk/ui-utils/i18n\");","module.exports = require(\"@splunk/ui-utils/id\");","module.exports = require(\"@splunk/visualization-color-palettes\");","module.exports = require(\"@splunk/visualizations-shared/colorUtils\");","module.exports = require(\"lodash\");","module.exports = require(\"prop-types\");","module.exports = require(\"react\");","module.exports = require(\"styled-components\");","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","// startup\n// Load entry module and return exports\n// This entry module is referenced by other modules so it can't be inlined\nvar __webpack_exports__ = __webpack_require__(2965);\n"],"names":["require","TextContainer","styled","variables","inputHeight","StyledText","Text","getColor","color","defaultColor","prevColor","newColor","trim","isColor","ColorAndTextWrapper","id","showTextInput","palette","handleColorChange","labelledBy","textWidth","value","name","handleTextColorChange","handleKeyPress","handleBlur","isDisabled","textLabelId","useMemo","createDOMID","React","Color","key","append","onChange","disabled","hideInput","ScreenReaderContent","_","prepend","onKeyDown","onBlur","style","height","inputId","propTypes","T","isRequired","defaultItemSchema","default","emptyStyle","ColorEditor","label","labelPosition","labelWidth","COLOR_EDITOR_PALETTE","noop","itemSchema","hideLabel","customEditorStyle","setColor","useState","useEffect","debouncedOnChange","debounce","useCallback","val","_event","colorToValue","toLower","event","ControlGroup","controlsLayout","popoverStyle","padding","colorButtonStyle","width","StyledButton","interactiveColorBackground","ColorChip","div","props","neutral100","StyledFlyoutContent","backgroundColorPopup","FlyoutHeader","fontFamily","contentColorActive","ColorListEditor","ColorFlyoutEditor","colors","CustomColorMatchEditor","handleColorRemove","flyoutTitle","addColorButtonLabel","handleColorAdd","handleColorMove","ColorRowItems","map","idx","Row","index","onRequestRemove","display","justifyContent","marginBottom","marginTop","addLabel","onRequestAdd","onRequestMove","MultiColorPickerEditor","canReorderColors","vizColors","VIZ_CATEGORICAL","canAddNewColors","showFlyout","setShowFlyout","setColors","buttonRef","useRef","userColorsSet","Set","nextColor","find","has","countMap","Map","forEach","set","get","minCount","Infinity","count","_evt","_name","colorsCopy","splice","e","fromIndex","toIndex","movedColor","handleFlyoutClose","reason","srcElement","sortableHandle","current","focus","ColorChips","toggleShowFlyout","isShown","inline","appearance","ref","onClick","open","anchor","defaultPlacement","onRequestClose","takeFocus","undefined","BaseEditorPropTypes","bool","arrayOf","string","func","oneOfType","object","context","oneOf","number","isAdvanced","dataSourceBindings","options","optionsSchema","ControlGroupContainer","spacingMedium","StyledToolTip","StyledAdvancedConfigButton","interactiveColorOverlayDrag","AdvancedConfigButton","content","icon","AdvancedControlGroup","dataTest","children","tooltip","help","error","onAdvancedConfigButtonClick","Children","toArray","filter","Boolean","child","cloneElement","flex","module","exports","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","__webpack_modules__","call","n","getter","__esModule","d","a","definition","o","Object","defineProperty","enumerable","obj","prop","prototype","hasOwnProperty","r","Symbol","toStringTag","__webpack_exports__"],"sourceRoot":""}

package/editors/NetworkGraphDynamicColorEditor.js

@@ -2,7 +2,7 @@
  * Copyright © 2018 Splunk Inc.
  * SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
  * in part without a valid written license from Splunk Inc. is PROHIBITED.
- */(()=>{"use strict";var e={437:(e,t,r)=>{r.r(t),r.d(t,{default:()=>T});var a=r(9497),l=r.n(a),n=r(23),o=r.n(n),i=r(232),s=r.n(i),u=r(4793),c=r(3563),d=r(7408),f=r.n(d),p=r(4082),h=r.n(p),m=r(8987),g=r(6649);const b=require("@splunk/react-ui/ScreenReaderContent");var v=r.n(b);const y=require("@splunk/visualizations-shared/colorConstants");var _=r(3283),C=r(4008),O=r.n(C);const x=s().div`
+ */(()=>{"use strict";var e={397:(e,t,r)=>{r.r(t),r.d(t,{default:()=>T});var a=r(9497),l=r.n(a),n=r(23),o=r.n(n),i=r(232),s=r.n(i),u=r(4793),c=r(3563),d=r(7408),f=r.n(d),p=r(4082),h=r.n(p),m=r(8987),g=r(6649),b=r(2621),v=r.n(b);const y=require("@splunk/visualizations-shared/colorConstants");var _=r(3283),C=r(4008),O=r.n(C);const x=s().div`
     max-height: ${c.variables.inputHeight};
     width: 100%;
     min-width: 0;
@@ -23,7 +23,7 @@
     width: ${(0,s.toPx)(_.FLYOUT_WIDTH)};
 `,M=(0,f.default)(c.default)`
     padding: '4px';
-`;t.prepareUpdate=({name:e,selectedDataSelector:t,selectedFormatterType:r,currentFormatterConfig:a})=>{const l=`${e}EditorConfig`,n=l.replace(/^\w+\[\d+\]\.(.+)$/,"$1");return{options:{[e]:(0,g.buildDSLFromDataSelectorAndFormatter)(t,r,l)},context:{[n]:a}}};t.DynamicColorEditor=({name:e,value:r,label:a="",labelPosition:l="left",labelWidth:n,context:o,onChange:s=(()=>{}),flyoutTitle:c=(0,p._)("Dynamic coloring"),formatters:f=[],dataSelectors:_=[],defaultPalettesConfig:D=h.defaultPalettesConfig,isDisabled:T=!1,showStaticTextColor:S=!1,colorMode:R,handleColorModeChange:k})=>{const[I,A]=x(!1),F=O(null),{type:V,paramKey:$}=(0,g.getLastFormatterFromDSL)(r)||{type:"unknown",paramKey:"unknown"},L=(0,g.getDataSelectorsFromDSL)(r)[0],[B,q]=x(V);P((()=>{q(V)}),[V]);const[W,U]=x(L);P((()=>{U(L)}),[L]);const z=(0,C.getFormatterConfig)({contextConfig:o[$],formatters:f,formatterFromDSL:V,selectedDataSelector:W}),[N,G]=x(z);P((()=>{G(z)}),[o,f,$,V,L]);const H=r=>{const a=(0,m.find)(f,(e=>e.isDefault))||(0,m.find)(f,(e=>"rangeValue"===e.value))||f[0];if((0,m.isEmpty)(a))return;const l=a.value,n=Object.keys(a.defaults)[0],o=a.defaults[n];U(n),q(l),G(o),s(r,(0,t.prepareUpdate)({name:e,selectedDataSelector:n,selectedFormatterType:l,currentFormatterConfig:o}))},K=i.useCallback((()=>{A((e=>!e))}),[]);if(!(0,C.isSupportedDataSelector)({selectedDataSelector:W,dataSelectors:_})||!(0,C.isSupportedFormatter)({selectedFormatterType:B,formattersFromEditor:f,supportedFormatters:v.supportedFormatters}))return i.createElement(y.default,{label:a,labelPosition:l,labelWidth:n,onResetToDefault:H});const Y=v.supportedFormatters[B].preview;return i.createElement(i.Fragment,null,i.createElement(u.default,{"data-test":"DynamicColorEditorGroup",label:a,labelPosition:l,labelWidth:n},i.createElement(M,{inline:!1,"data-test":"DynamicColorEditorButton",appearance:"default",ref:F,onClick:K,disabled:T},i.createElement(Y,{"data-test":"FormatterConfigPreview",config:N}))),i.createElement(d.default,{"data-test":"DynamicColorEditorFlyout",open:I,anchor:F.current,defaultPlacement:"horizontal",style:{padding:"10px"},onRequestClose:()=>A(!1),takeFocus:!0},i.createElement(j,null,!R&&i.createElement(w,null,c),R&&i.createElement(u.default,{"data-test":"TableDynamicColorEditorGroup",label:c,labelPosition:l,labelWidth:n},i.createElement(b.default,{value:R,onChange:k},[{label:(0,p._)("Off"),value:"off"},{label:(0,p._)("Text"),value:"text"},{label:(0,p._)("Background"),value:"background"}].map((({label:e,value:t})=>i.createElement(b.default.Option,{key:t,value:t,label:(0,p._)(e)}))))),R&&i.createElement(E,null,(0,p._)("Method")),i.createElement(v.FormatterEditor,{selectedDataSelector:W,selectedFormatterType:B,currentFormatterConfig:N,onDataSelectorChange:(r,a,l)=>{U(l);const n=(0,m.find)(f,(e=>e.defaults[l]));q(n.value);const o=n.defaults[l];G(o),s(r,(0,t.prepareUpdate)({name:e,selectedDataSelector:l,selectedFormatterType:n.value,currentFormatterConfig:o}))},onFormatterTypeChange:(r,a,l)=>{q(l);const n=(0,m.find)(f,["value",l]).defaults[W];G(n),s(r,(0,t.prepareUpdate)({name:e,selectedDataSelector:W,selectedFormatterType:l,currentFormatterConfig:n}))},onFormatterConfigChange:(r,a,l)=>{G(l),s(r,(0,t.prepareUpdate)({name:e,selectedDataSelector:W,selectedFormatterType:B,currentFormatterConfig:l}))},formatters:f,dataSelectors:_,defaultPalettesConfig:D,showStaticTextColor:S}))))}},1546:function(e,t,r){var a=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var l=Object.getOwnPropertyDescriptor(t,r);l&&!("get"in l?!t.__esModule:l.writable||l.configurable)||(l={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,l)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),l=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),n=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&a(t,e,r);return l(t,e),t},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.NetworkGraphDynamicColorEditor=void 0;const i=n(r(9497)),s=r(6649),u=o(r(7143)),c=r(152),d=o(r(4182)),f=o(r(437));t.NetworkGraphDynamicColorEditor=({name:e,value:t,contextName:r,label:a="",labelWidth:l,context:n,flyoutTitle:o=(0,s._)("Dynamic coloring"),formatters:p=[],dataSelectors:h=[],defaultPalettesConfig:m,tooltip:g,options:b={},onChange:v=(()=>{})})=>{var y;const _=null===(y=h[0])||void 0===y?void 0:y.value,C=i.useCallback((e=>!e||e.trim().startsWith("#")?"static":"dynamic"),[]),[O,x]=i.useState(C(t));i.useEffect((()=>{const e=C(t);x(e)}),[C,t]);const P=i.useCallback(((t,a,l)=>{var o,i,s;x(l);const u=Object.assign({},b),c=Object.assign({},n);if("dynamic"===l){const a=(null===(o=p[0])||void 0===o?void 0:o.value)||"gradient",l=(null===(s=null===(i=p[0])||void 0===i?void 0:i.defaults)||void 0===s?void 0:s[_])||{},n=`> ${_} | ${a}(${r})`;u[e]=n,c[r]=l,v(t,{options:u,context:c})}else"static"===l&&(u[e]=void 0,c[r]=void 0,v(t,{options:u,context:c}))}),[b,n,p,_,r,e,v]),w=i.useCallback(((t,a)=>{var l;const o=a.options[e],i=null===(l=a.context)||void 0===l?void 0:l[r],s=Object.assign(Object.assign({},b),{[e]:o}),u=Object.assign(Object.assign({},n),{[r]:i});v(t,{options:s,context:u})}),[b,e,n,v,r]),E=i.useCallback(((e,t,a)=>{const l=Object.assign(Object.assign({},b),{[t]:a}),o=Object.assign({},n);o[r]=void 0,v(e,{options:l,context:o})}),[n,v,b,r]);return i.createElement(u.default,{"data-test":"dynamic-color-toggle",gutter:15},i.createElement(u.default.Row,{"data-test":"network-graph-dynamic-color-row",alignItems:"start"},i.createElement(u.default.Column,{span:6},i.createElement(d.default,{name:e,label:(0,s._)(a),labelPosition:"top",value:O,onChange:P,itemSchema:{type:"string"},values:[{label:(0,s._)("Static coloring"),value:"static"},{label:(0,s._)("Dynamic coloring"),value:"dynamic"}],help:g})),"dynamic"===O&&i.createElement(u.default.Column,{span:6},i.createElement(c.DynamicColorEditor,{name:e,label:" ",labelPosition:"top",labelWidth:l,value:t,context:n,onChange:w,flyoutTitle:o,formatters:p,dataSelectors:h,defaultPalettesConfig:m})),"static"===O&&i.createElement(u.default.Column,{span:6},i.createElement(f.default,{name:e,label:" ",labelPosition:"top",labelWidth:l,value:t,onChange:E}))))}},1705:function(e,t,r){var a=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var l=Object.getOwnPropertyDescriptor(t,r);l&&!("get"in l?!t.__esModule:l.writable||l.configurable)||(l={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,l)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),l=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),n=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&a(t,e,r);return l(t,e),t},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.ColorPreview=void 0;const i=n(r(9497)),s=o(r(232)),u=r(3283),c=r(8987),d=s.default.div.attrs((e=>({"data-test":"ColorPreviewWrapper",isReversed:e.isReversed})))`
+`;t.prepareUpdate=({name:e,selectedDataSelector:t,selectedFormatterType:r,currentFormatterConfig:a})=>{const l=`${e}EditorConfig`,n=l.replace(/^\w+\[\d+\]\.(.+)$/,"$1");return{options:{[e]:(0,g.buildDSLFromDataSelectorAndFormatter)(t,r,l)},context:{[n]:a}}};t.DynamicColorEditor=({name:e,value:r,label:a="",labelPosition:l="left",labelWidth:n,context:o,onChange:s=(()=>{}),flyoutTitle:c=(0,p._)("Dynamic coloring"),formatters:f=[],dataSelectors:_=[],defaultPalettesConfig:D=h.defaultPalettesConfig,isDisabled:T=!1,showStaticTextColor:S=!1,colorMode:R,handleColorModeChange:k})=>{const[I,A]=x(!1),F=O(null),{type:V,paramKey:$}=(0,g.getLastFormatterFromDSL)(r)||{type:"unknown",paramKey:"unknown"},L=(0,g.getDataSelectorsFromDSL)(r)[0],[B,q]=x(V);P((()=>{q(V)}),[V]);const[W,U]=x(L);P((()=>{U(L)}),[L]);const z=(0,C.getFormatterConfig)({contextConfig:o[$],formatters:f,formatterFromDSL:V,selectedDataSelector:W}),[N,G]=x(z);P((()=>{G(z)}),[o,f,$,V,L]);const H=r=>{const a=(0,m.find)(f,(e=>e.isDefault))||(0,m.find)(f,(e=>"rangeValue"===e.value))||f[0];if((0,m.isEmpty)(a))return;const l=a.value,n=Object.keys(a.defaults)[0],o=a.defaults[n];U(n),q(l),G(o),s(r,(0,t.prepareUpdate)({name:e,selectedDataSelector:n,selectedFormatterType:l,currentFormatterConfig:o}))},K=i.useCallback((()=>{A((e=>!e))}),[]);if(!(0,C.isSupportedDataSelector)({selectedDataSelector:W,dataSelectors:_})||!(0,C.isSupportedFormatter)({selectedFormatterType:B,formattersFromEditor:f,supportedFormatters:v.supportedFormatters}))return i.createElement(y.default,{label:a,labelPosition:l,labelWidth:n,onResetToDefault:H});const Y=v.supportedFormatters[B].preview;return i.createElement(i.Fragment,null,i.createElement(u.default,{"data-test":"DynamicColorEditorGroup",label:a,labelPosition:l,labelWidth:n},i.createElement(M,{inline:!1,"data-test":"DynamicColorEditorButton",appearance:"default",ref:F,onClick:K,disabled:T},i.createElement(Y,{"data-test":"FormatterConfigPreview",config:N}))),i.createElement(d.default,{"data-test":"DynamicColorEditorFlyout",open:I,anchor:F.current,defaultPlacement:"horizontal",style:{padding:"10px"},onRequestClose:()=>A(!1),takeFocus:!0},i.createElement(j,null,!R&&i.createElement(w,null,c),R&&i.createElement(u.default,{"data-test":"TableDynamicColorEditorGroup",label:c,labelPosition:l,labelWidth:n},i.createElement(b.default,{value:R,onChange:k},[{label:(0,p._)("Off"),value:"off"},{label:(0,p._)("Text"),value:"text"},{label:(0,p._)("Background"),value:"background"}].map((({label:e,value:t})=>i.createElement(b.default.Option,{key:t,value:t,label:(0,p._)(e)}))))),R&&i.createElement(E,null,(0,p._)("Method")),i.createElement(v.FormatterEditor,{selectedDataSelector:W,selectedFormatterType:B,currentFormatterConfig:N,onDataSelectorChange:(r,a,l)=>{U(l);const n=(0,m.find)(f,(e=>e.defaults[l]));q(n.value);const o=n.defaults[l];G(o),s(r,(0,t.prepareUpdate)({name:e,selectedDataSelector:l,selectedFormatterType:n.value,currentFormatterConfig:o}))},onFormatterTypeChange:(r,a,l)=>{q(l);const n=(0,m.find)(f,["value",l]).defaults[W];G(n),s(r,(0,t.prepareUpdate)({name:e,selectedDataSelector:W,selectedFormatterType:l,currentFormatterConfig:n}))},onFormatterConfigChange:(r,a,l)=>{G(l),s(r,(0,t.prepareUpdate)({name:e,selectedDataSelector:W,selectedFormatterType:B,currentFormatterConfig:l}))},formatters:f,dataSelectors:_,defaultPalettesConfig:D,showStaticTextColor:S}))))}},1546:function(e,t,r){var a=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var l=Object.getOwnPropertyDescriptor(t,r);l&&!("get"in l?!t.__esModule:l.writable||l.configurable)||(l={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,l)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),l=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),n=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&a(t,e,r);return l(t,e),t},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.NetworkGraphDynamicColorEditor=void 0;const i=n(r(9497)),s=r(6649),u=o(r(7143)),c=r(152),d=o(r(4182)),f=o(r(397));t.NetworkGraphDynamicColorEditor=({name:e,value:t,contextName:r,label:a="",labelWidth:l,context:n,flyoutTitle:o=(0,s._)("Dynamic coloring"),formatters:p=[],dataSelectors:h=[],defaultPalettesConfig:m,tooltip:g,options:b={},onChange:v=(()=>{})})=>{var y;const _=null===(y=h[0])||void 0===y?void 0:y.value,C=i.useCallback((e=>!e||e.trim().startsWith("#")?"static":"dynamic"),[]),[O,x]=i.useState(C(t));i.useEffect((()=>{const e=C(t);x(e)}),[C,t]);const P=i.useCallback(((t,a,l)=>{var o,i,s;x(l);const u=Object.assign({},b),c=Object.assign({},n);if("dynamic"===l){const a=(null===(o=p[0])||void 0===o?void 0:o.value)||"gradient",l=(null===(s=null===(i=p[0])||void 0===i?void 0:i.defaults)||void 0===s?void 0:s[_])||{},n=`> ${_} | ${a}(${r})`;u[e]=n,c[r]=l,v(t,{options:u,context:c})}else"static"===l&&(u[e]=void 0,c[r]=void 0,v(t,{options:u,context:c}))}),[b,n,p,_,r,e,v]),w=i.useCallback(((t,a)=>{var l;const o=a.options[e],i=null===(l=a.context)||void 0===l?void 0:l[r],s=Object.assign(Object.assign({},b),{[e]:o}),u=Object.assign(Object.assign({},n),{[r]:i});v(t,{options:s,context:u})}),[b,e,n,v,r]),E=i.useCallback(((e,t,a)=>{const l=Object.assign(Object.assign({},b),{[t]:a}),o=Object.assign({},n);o[r]=void 0,v(e,{options:l,context:o})}),[n,v,b,r]);return i.createElement(u.default,{"data-test":"dynamic-color-toggle",gutter:15},i.createElement(u.default.Row,{"data-test":"network-graph-dynamic-color-row",alignItems:"start"},i.createElement(u.default.Column,{span:6},i.createElement(d.default,{name:e,label:(0,s._)(a),labelPosition:"top",value:O,onChange:P,itemSchema:{type:"string"},values:[{label:(0,s._)("Static coloring"),value:"static"},{label:(0,s._)("Dynamic coloring"),value:"dynamic"}],help:g})),"dynamic"===O&&i.createElement(u.default.Column,{span:6},i.createElement(c.DynamicColorEditor,{name:e,label:" ",labelPosition:"top",labelWidth:l,value:t,context:n,onChange:w,flyoutTitle:o,formatters:p,dataSelectors:h,defaultPalettesConfig:m})),"static"===O&&i.createElement(u.default.Column,{span:6},i.createElement(f.default,{name:e,label:" ",labelPosition:"top",labelWidth:l,value:t,onChange:E}))))}},1705:function(e,t,r){var a=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var l=Object.getOwnPropertyDescriptor(t,r);l&&!("get"in l?!t.__esModule:l.writable||l.configurable)||(l={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,l)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),l=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),n=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&a(t,e,r);return l(t,e),t},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.ColorPreview=void 0;const i=n(r(9497)),s=o(r(232)),u=r(3283),c=r(8987),d=s.default.div.attrs((e=>({"data-test":"ColorPreviewWrapper",isReversed:e.isReversed})))`
     display: flex;
     flex-direction: row;
     height: 100%;
@@ -250,7 +250,7 @@
     display: flex;
     flex-direction: column;
     margin-left: ${c.default.spacingMedium};
-`;t.handleUpdateRangeBoundary=({rangeBoundaryIndex:e,setError:t,shouldUpdate:r,updateRangeBoundary:a,value:l})=>{if(r){const r=a(l,e);r&&r.error&&t(r.error)}};t.default=({initialValue:e,rangeBoundaryIndex:r,rangeText:a,rangeValues:l,showNumberEditor:n=!0,updateRangeBoundary:o})=>{const[s,u]=i.useState(null),[c,g]=i.useState(!1),[b,v]=i.useState(null),y=i.useCallback((()=>{g(!0)}),[]),_=i.useCallback(((e,{value:a})=>{u(a),(0,t.handleUpdateRangeBoundary)({rangeBoundaryIndex:r,setError:v,shouldUpdate:!c,updateRangeBoundary:o,value:a})}),[c,r,o]),C=i.useCallback((()=>{g(!1),(0,t.handleUpdateRangeBoundary)({rangeBoundaryIndex:r,setError:v,shouldUpdate:"number"==typeof s&&s!==e,updateRangeBoundary:o,value:s})}),[r,s,e,o]),O=i.useCallback((a=>(0,t.handleUpdateRangeBoundary)({rangeBoundaryIndex:r,setError:v,shouldUpdate:"Enter"===a.key&&"number"==typeof s&&s!==e,updateRangeBoundary:o,value:s})),[r,s,e,o]);return i.useEffect((()=>{b&&!l.includes(s)&&(v(null),(0,t.handleUpdateRangeBoundary)({rangeBoundaryIndex:r,setError:v,shouldUpdate:"number"==typeof s,updateRangeBoundary:o,value:s}))}),[s,b,r,l,o]),i.createElement(m,null,i.createElement(h,null,n&&i.createElement(p,{"data-test":"range-boundary-editor",error:!!b,onBlur:C,onChange:_,onFocus:y,onKeyUp:O,value:null!=s?s:e}),i.createElement(d,null,a)),n&&b&&i.createElement(f,null,b))}},1782:function(e,t,r){var a=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var l=Object.getOwnPropertyDescriptor(t,r);l&&!("get"in l?!t.__esModule:l.writable||l.configurable)||(l={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,l)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),l=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),n=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&a(t,e,r);return l(t,e),t},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const i=n(r(9497)),s=o(r(7408));t.default=({color:e,colorIndex:t,onChange:r,palette:a})=>{const l=i.useCallback((({value:e})=>r({colorIndex:t,value:e})),[t,r]);return i.createElement(s.default,{"data-test":`range-color-${e}`,value:e,palette:a,onChange:l,hideInput:!0})}},104:function(e,t,r){var a=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var l=Object.getOwnPropertyDescriptor(t,r);l&&!("get"in l?!t.__esModule:l.writable||l.configurable)||(l={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,l)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),l=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),n=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&a(t,e,r);return l(t,e),t},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const i=n(r(9497)),s=n(r(23)),u=o(r(232)),c=r(6649),d=o(r(2841)),f=o(r(6959)),p=o(r(1782)),h=o(r(6900)),m=r(8548),g=u.default.div`
+`;t.handleUpdateRangeBoundary=({rangeBoundaryIndex:e,setError:t,shouldUpdate:r,updateRangeBoundary:a,value:l})=>{if(r){const r=a(l,e);r&&r.error&&t(r.error)}};t.default=({initialValue:e,rangeBoundaryIndex:r,rangeText:a,rangeValues:l,showNumberEditor:n=!0,updateRangeBoundary:o})=>{const[s,u]=i.useState(null),[c,g]=i.useState(!1),[b,v]=i.useState(null),y=i.useCallback((()=>{g(!0)}),[]),_=i.useCallback(((e,{value:a})=>{u(a),(0,t.handleUpdateRangeBoundary)({rangeBoundaryIndex:r,setError:v,shouldUpdate:!c,updateRangeBoundary:o,value:a})}),[c,r,o]),C=i.useCallback((()=>{g(!1),(0,t.handleUpdateRangeBoundary)({rangeBoundaryIndex:r,setError:v,shouldUpdate:"number"==typeof s&&s!==e,updateRangeBoundary:o,value:s})}),[r,s,e,o]),O=i.useCallback((a=>(0,t.handleUpdateRangeBoundary)({rangeBoundaryIndex:r,setError:v,shouldUpdate:"Enter"===a.key&&"number"==typeof s&&s!==e,updateRangeBoundary:o,value:s})),[r,s,e,o]);return i.useEffect((()=>{b&&!l.includes(s)&&(v(null),(0,t.handleUpdateRangeBoundary)({rangeBoundaryIndex:r,setError:v,shouldUpdate:"number"==typeof s,updateRangeBoundary:o,value:s}))}),[s,b,r,l,o]),i.createElement(m,null,i.createElement(h,null,n&&i.createElement(p,{"data-test":"range-boundary-editor",error:!!b,onBlur:C,onChange:_,onFocus:y,onKeyUp:O,value:null!=s?s:e}),i.createElement(d,null,a)),n&&b&&i.createElement(f,null,b))}},1782:function(e,t,r){var a=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var l=Object.getOwnPropertyDescriptor(t,r);l&&!("get"in l?!t.__esModule:l.writable||l.configurable)||(l={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,l)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),l=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),n=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&a(t,e,r);return l(t,e),t},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const i=n(r(9497)),s=o(r(7408));t.default=({color:e,colorIndex:t,onChange:r,palette:a})=>{const l=i.useCallback((({value:e})=>{let a=e;return null===a&&(a="transparent"),r({colorIndex:t,value:a})}),[t,r]);return i.createElement(s.default,{"data-test":`range-color-${e}`,value:e,palette:a,onChange:l,hideInput:!0})}},104:function(e,t,r){var a=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var l=Object.getOwnPropertyDescriptor(t,r);l&&!("get"in l?!t.__esModule:l.writable||l.configurable)||(l={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,l)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),l=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),n=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&a(t,e,r);return l(t,e),t},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const i=n(r(9497)),s=n(r(23)),u=o(r(232)),c=r(6649),d=o(r(2841)),f=o(r(6959)),p=o(r(1782)),h=o(r(6900)),m=r(8548),g=u.default.div`
     padding-top: 10px;
 `,b=u.default.div`
     display: flex;
@@ -330,5 +330,5 @@
     position: relative;
     width: 100%;
     height: 20px;
-`},5862:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.editorStyle=t.DROPDOWN_MENU_WIDTH=t.VERTICAL_EDITOR_SPACING=t.FLYOUT_WIDTH=t.COLUMN_FLYOUT_PADDING=t.FLYOUT_PADDING=void 0,t.FLYOUT_PADDING=21,t.COLUMN_FLYOUT_PADDING=16,t.FLYOUT_WIDTH=344,t.VERTICAL_EDITOR_SPACING=16,t.DROPDOWN_MENU_WIDTH=327,t.editorStyle={width:"100%"}},6195:e=>{e.exports=require("@babel/runtime/helpers/defineProperty")},2649:e=>{e.exports=require("@babel/runtime/helpers/extends")},9597:e=>{e.exports=require("@splunk/react-icons/ArrowDown")},2267:e=>{e.exports=require("@splunk/react-icons/ArrowUp")},6062:e=>{e.exports=require("@splunk/react-icons/ArrowsRectangularDouble")},8855:e=>{e.exports=require("@splunk/react-icons/Cross")},6643:e=>{e.exports=require("@splunk/react-icons/SlidersDoubleHorizontal")},7020:e=>{e.exports=require("@splunk/react-ui/Button")},7408:e=>{e.exports=require("@splunk/react-ui/Color")},7143:e=>{e.exports=require("@splunk/react-ui/ColumnLayout")},9250:e=>{e.exports=require("@splunk/react-ui/ControlGroup")},6214:e=>{e.exports=require("@splunk/react-ui/Dropdown")},4233:e=>{e.exports=require("@splunk/react-ui/Menu")},6447:e=>{e.exports=require("@splunk/react-ui/Message")},2782:e=>{e.exports=require("@splunk/react-ui/Number")},1551:e=>{e.exports=require("@splunk/react-ui/Popover")},5411:e=>{e.exports=require("@splunk/react-ui/RadioBar")},2373:e=>{e.exports=require("@splunk/react-ui/Select")},4082:e=>{e.exports=require("@splunk/react-ui/Text")},6379:e=>{e.exports=require("@splunk/react-ui/Tooltip")},3563:e=>{e.exports=require("@splunk/themes")},4566:e=>{e.exports=require("@splunk/themes/variables")},6649:e=>{e.exports=require("@splunk/ui-utils/i18n")},8987:e=>{e.exports=require("@splunk/ui-utils/id")},5089:e=>{e.exports=require("@splunk/visualization-color-palettes/editors/PresetPalettes")},1413:e=>{e.exports=require("@splunk/visualization-encoding/utils/dsl")},3283:e=>{e.exports=require("@splunk/visualizations-shared/colorUtils")},7124:e=>{e.exports=require("@splunk/visualizations-shared/style")},4793:e=>{e.exports=require("lodash")},23:e=>{e.exports=require("prop-types")},9497:e=>{e.exports=require("react")},232:e=>{e.exports=require("styled-components")}},t={};function r(a){var l=t[a];if(void 0!==l)return l.exports;var n=t[a]={exports:{}};return e[a].call(n.exports,n,n.exports,r),n.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a=r(1546);module.exports=a})();
+`},5862:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.editorStyle=t.DROPDOWN_MENU_WIDTH=t.VERTICAL_EDITOR_SPACING=t.FLYOUT_WIDTH=t.COLUMN_FLYOUT_PADDING=t.FLYOUT_PADDING=void 0,t.FLYOUT_PADDING=21,t.COLUMN_FLYOUT_PADDING=16,t.FLYOUT_WIDTH=344,t.VERTICAL_EDITOR_SPACING=16,t.DROPDOWN_MENU_WIDTH=327,t.editorStyle={width:"100%"}},6195:e=>{e.exports=require("@babel/runtime/helpers/defineProperty")},2649:e=>{e.exports=require("@babel/runtime/helpers/extends")},9597:e=>{e.exports=require("@splunk/react-icons/ArrowDown")},2267:e=>{e.exports=require("@splunk/react-icons/ArrowUp")},6062:e=>{e.exports=require("@splunk/react-icons/ArrowsRectangularDouble")},8855:e=>{e.exports=require("@splunk/react-icons/Cross")},6643:e=>{e.exports=require("@splunk/react-icons/SlidersDoubleHorizontal")},7020:e=>{e.exports=require("@splunk/react-ui/Button")},7408:e=>{e.exports=require("@splunk/react-ui/Color")},7143:e=>{e.exports=require("@splunk/react-ui/ColumnLayout")},9250:e=>{e.exports=require("@splunk/react-ui/ControlGroup")},6214:e=>{e.exports=require("@splunk/react-ui/Dropdown")},4233:e=>{e.exports=require("@splunk/react-ui/Menu")},6447:e=>{e.exports=require("@splunk/react-ui/Message")},2782:e=>{e.exports=require("@splunk/react-ui/Number")},1551:e=>{e.exports=require("@splunk/react-ui/Popover")},5411:e=>{e.exports=require("@splunk/react-ui/RadioBar")},2621:e=>{e.exports=require("@splunk/react-ui/ScreenReaderContent")},2373:e=>{e.exports=require("@splunk/react-ui/Select")},4082:e=>{e.exports=require("@splunk/react-ui/Text")},6379:e=>{e.exports=require("@splunk/react-ui/Tooltip")},3563:e=>{e.exports=require("@splunk/themes")},4566:e=>{e.exports=require("@splunk/themes/variables")},6649:e=>{e.exports=require("@splunk/ui-utils/i18n")},8987:e=>{e.exports=require("@splunk/ui-utils/id")},5089:e=>{e.exports=require("@splunk/visualization-color-palettes/editors/PresetPalettes")},1413:e=>{e.exports=require("@splunk/visualization-encoding/utils/dsl")},3283:e=>{e.exports=require("@splunk/visualizations-shared/colorUtils")},7124:e=>{e.exports=require("@splunk/visualizations-shared/style")},4793:e=>{e.exports=require("lodash")},23:e=>{e.exports=require("prop-types")},9497:e=>{e.exports=require("react")},232:e=>{e.exports=require("styled-components")}},t={};function r(a){var l=t[a];if(void 0!==l)return l.exports;var n=t[a]={exports:{}};return e[a].call(n.exports,n,n.exports,r),n.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a=r(1546);module.exports=a})();
 //# sourceMappingURL=NetworkGraphDynamicColorEditor.js.map