@splunk/dynamic-editors 0.44.2 → 0.44.3

package/containers/EditorItem.js

@@ -178,17 +178,17 @@ e.exports=function(){"use strict";function e(e,t){if("undefined"==typeof documen
     display: none;
 `,B=(0,c.default)(D.default)`
     flex: 0;
-`,j={error:1,warning:2,other:3},H=s.memo((({command:e,isFocusable:t,onFocus:n,onExecute:r})=>{const{icon:o,buttonProps:a}=e,{title:l}=a||{};return s.createElement(O.default,{content:l||"",contentRelationship:"label",renderAnchor:a=>{var{onFocus:l,onClick:u}=a,c=i(a,["onFocus","onClick"]);return s.createElement(B,Object.assign({appearance:"subtle","data-name":e.name,onFocus:t=>{l(t),n(e.name||"")},tabIndex:t?0:-1,onClick:t=>{u(t),r(e)}},c),o)}})}));H.displayName="ToolbarButton",H.propTypes={command:u.object.isRequired,isFocusable:u.bool.isRequired,onFocus:u.func.isRequired,onExecute:u.func.isRequired};const U=({onChange:e,name:t,value:n="",defaultErrors:r={}})=>{const o=s.useMemo((()=>(0,m.createDOMID)("markdown-editor")),[]),a=s.useRef(null),[i,l]=s.useState(n),[u,c]=s.useState(R[0].name||""),g=s.useRef(null),[E,b]=s.useState(r);s.useEffect((()=>(a.current&&!g.current&&(g.current=new d.TextAreaCommandOrchestrator(a.current)),()=>{g.current=null})),[]);const C=s.useCallback(((e,{value:t})=>{l(t)}),[]),T=s.useCallback((o=>{i!==n&&(e(o,t,i),b(r))}),[i,n,e,t,r]),_=s.useCallback((e=>{g.current&&a.current&&(g.current.executeCommand(e),l(a.current.value))}),[]),y=s.useMemo((()=>{let e=null;return Object.values(E).includes("error")?e=s.createElement(N.CSPMessage,{type:"error"}):Object.values(E).includes("warning")&&(e=s.createElement(N.CSPMessage,{type:"warning"})),Object.values(E).includes("other")&&(e=s.createElement(s.Fragment,null,e,s.createElement(p.default,{appearance:"fill",type:"error","data-test":"image-error"},(0,h._)("We can't find an image with this URL. Please enter a new URL")))),e}),[Object.values(E).join("")]),v=s.useMemo((()=>{return s.createElement(w,null,s.createElement(f.default,{text:n,imageRenderer:(e=(e,t)=>{var n,r;(null!==(n=j[E[e]])&&void 0!==n?n:1/0)>(null!==(r=j[t])&&void 0!==r?r:0)&&b(Object.assign(Object.assign({},E),{[e]:t}))},function({src:t,alt:n}){const r=(0,I.useCSPViolationObserver)(t);return s.useEffect((()=>{"none"!==r&&e(t,r)}),[r,t]),s.createElement("img",{src:t,alt:n,onError:()=>{"none"===r&&e(t,"other")}})})}));var e}),[n,E]),A=s.useCallback((e=>{var t,n;const r=e.target;if("BUTTON"!==r.tagName)return;const o=e.currentTarget,a=Array.from(o.querySelectorAll("button")),i=a.indexOf(r);if(-1===i)return;const l="ArrowLeft"===e.key,s="ArrowRight"===e.key,u="Home"===e.key,c="End"===e.key;let d=null;l?d=null!==(t=a[i-1])&&void 0!==t?t:a[a.length-1]:s?d=null!==(n=a[i+1])&&void 0!==n?n:a[0]:u?[d]=a:c&&(d=a[a.length-1]),d&&(e.preventDefault(),d.focus())}),[]),D=s.useCallback((e=>{(0,d.handleKeyDown)(e,2,!0),g.current&&((0,d.shortcuts)(e,R,g.current),a.current&&l(a.current.value))}),[]);return s.createElement(L,{"data-test":t},s.createElement(M,{role:"toolbar","aria-label":(0,h._)("Markdown formatting"),"aria-orientation":"horizontal","aria-controls":`${o}-textarea`,onKeyDown:A},R.map((e=>s.createElement(H,{key:e.name,command:e,isFocusable:u===e.name,onFocus:c,onExecute:_})))),s.createElement(S.default,{id:`${o}-textarea-label`},(0,h._)("Markdown editor")),s.createElement(F,{inputRef:a,"data-test":`${t}-textarea`,id:`${o}-textarea`,labelledBy:`${o}-textarea-label`,value:i,onChange:C,onBlur:T,onKeyDown:D}),v,y&&s.createElement(P.MessageContainer,null,y))};U.propTypes={onChange:u.func.isRequired,name:u.string.isRequired,value:u.string,defaultErrors:u.objectOf(u.oneOf(["warning","error","other"]))},t.default=U},2965:function(e,t,n){"use strict";var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),o=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 n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&r(t,e,n);return o(t,e),t},i=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.ColorFlyoutEditor=void 0;const l=a(n(9497)),s=a(n(23)),u=i(n(232)),c=n(4793),d=i(n(4566)),f=n(6649),p=i(n(8965)),h=n(8987),m=i(n(7020)),g=i(n(1551)),E=n(3850),b=n(6801),C=i(n(4008)),T=i(n(397)),_={padding:"10px"},y={width:"314px"},v=(0,u.default)(m.default)`
+`,j={error:1,warning:2,other:3},H=s.memo((({command:e,isFocusable:t,onFocus:n,onExecute:r})=>{const{icon:o,buttonProps:a}=e,{title:l}=a||{};return s.createElement(O.default,{content:l||"",contentRelationship:"label",renderAnchor:a=>{var{onFocus:l,onClick:u}=a,c=i(a,["onFocus","onClick"]);return s.createElement(B,Object.assign({appearance:"subtle","data-name":e.name,onFocus:t=>{l(t),n(e.name||"")},tabIndex:t?0:-1,onClick:t=>{u(t),r(e)}},c),o)}})}));H.displayName="ToolbarButton",H.propTypes={command:u.object.isRequired,isFocusable:u.bool.isRequired,onFocus:u.func.isRequired,onExecute:u.func.isRequired};const U=({onChange:e,name:t,value:n="",defaultErrors:r={}})=>{const o=s.useMemo((()=>(0,m.createDOMID)("markdown-editor")),[]),a=s.useRef(null),[i,l]=s.useState(n),[u,c]=s.useState(R[0].name||""),g=s.useRef(null),[E,b]=s.useState(r);s.useEffect((()=>(a.current&&!g.current&&(g.current=new d.TextAreaCommandOrchestrator(a.current)),()=>{g.current=null})),[]);const C=s.useCallback(((e,{value:t})=>{l(t)}),[]),T=s.useCallback((o=>{i!==n&&(e(o,t,i),b(r))}),[i,n,e,t,r]),_=s.useCallback((e=>{g.current&&a.current&&(g.current.executeCommand(e),l(a.current.value))}),[]),y=s.useMemo((()=>{let e=null;return Object.values(E).includes("error")?e=s.createElement(N.CSPMessage,{type:"error"}):Object.values(E).includes("warning")&&(e=s.createElement(N.CSPMessage,{type:"warning"})),Object.values(E).includes("other")&&(e=s.createElement(s.Fragment,null,e,s.createElement(p.default,{appearance:"fill",type:"error","data-test":"image-error"},(0,h._)("We can't find an image with this URL. Please enter a new URL")))),e}),[Object.values(E).join("")]),v=s.useMemo((()=>{return s.createElement(w,null,s.createElement(f.default,{text:n,imageRenderer:(e=(e,t)=>{var n,r;(null!==(n=j[E[e]])&&void 0!==n?n:1/0)>(null!==(r=j[t])&&void 0!==r?r:0)&&b(Object.assign(Object.assign({},E),{[e]:t}))},function({src:t,alt:n}){const r=(0,I.useCSPViolationObserver)(t);return s.useEffect((()=>{"none"!==r&&e(t,r)}),[r,t]),s.createElement("img",{src:t,alt:n,onError:()=>{"none"===r&&e(t,"other")}})})}));var e}),[n,E]),A=s.useCallback((e=>{var t,n;const r=e.target;if("BUTTON"!==r.tagName)return;const o=e.currentTarget,a=Array.from(o.querySelectorAll("button")),i=a.indexOf(r);if(-1===i)return;const l="ArrowLeft"===e.key,s="ArrowRight"===e.key,u="Home"===e.key,c="End"===e.key;let d=null;l?d=null!==(t=a[i-1])&&void 0!==t?t:a[a.length-1]:s?d=null!==(n=a[i+1])&&void 0!==n?n:a[0]:u?[d]=a:c&&(d=a[a.length-1]),d&&(e.preventDefault(),d.focus())}),[]),D=s.useCallback((e=>{(0,d.handleKeyDown)(e,2,!0),g.current&&((0,d.shortcuts)(e,R,g.current),a.current&&l(a.current.value))}),[]);return s.createElement(L,{"data-test":t},s.createElement(M,{role:"toolbar","aria-label":(0,h._)("Markdown formatting"),"aria-orientation":"horizontal","aria-controls":`${o}-textarea`,onKeyDown:A},R.map((e=>s.createElement(H,{key:e.name,command:e,isFocusable:u===e.name,onFocus:c,onExecute:_})))),s.createElement(S.default,{id:`${o}-textarea-label`},(0,h._)("Markdown editor")),s.createElement(F,{inputRef:a,"data-test":`${t}-textarea`,id:`${o}-textarea`,labelledBy:`${o}-textarea-label`,value:i,onChange:C,onBlur:T,onKeyDown:D}),v,y&&s.createElement(P.MessageContainer,null,y))};U.propTypes={onChange:u.func.isRequired,name:u.string.isRequired,value:u.string,defaultErrors:u.objectOf(u.oneOf(["warning","error","other"]))},t.default=U},2965:function(e,t,n){"use strict";var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),o=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 n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&r(t,e,n);return o(t,e),t},i=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.ColorFlyoutEditor=void 0;const l=a(n(9497)),s=a(n(23)),u=i(n(232)),c=n(4793),d=i(n(4566)),f=n(6649),p=i(n(8965)),h=n(8987),m=i(n(7020)),g=i(n(1551)),E=n(3850),b=n(6801),C=i(n(4008)),T=i(n(397)),_={padding:"10px"},y=(0,u.default)(m.default)`
     padding: 8px;
     width: 100%;
     min-height: 40px;
-    & > span {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, 26px);
-        justify-content: space-evenly;
-        grid-gap: 4px;
-    }
     background-color: ${d.default.interactiveColorBackground};
+`,v=u.default.div`
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 26px);
+    justify-content: center;
+    gap: 4px;
+    width: 100%;
 `,A=u.default.div`
     width: 26px;
     height: 24px;
@@ -212,7 +212,7 @@ e.exports=function(){"use strict";function e(e,t){if("undefined"==typeof documen
     height: 412px;
     overflow-y: auto;
     padding: 8px 10px;
-`;t.ColorFlyoutEditor=({colors:e,CustomColorMatchEditor:t,handleColorRemove:n,handleColorChange:r,flyoutTitle:o,addColorButtonLabel:a,handleColorAdd:i,handleColorMove:s})=>{const u=(0,l.useMemo)((()=>e.map(((e,o)=>{const a=null==t;return l.default.createElement(p.default.Row,{index:o,key:(0,h.createDOMID)(),"data-color":e,onRequestRemove:n},l.default.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},l.default.createElement(T.default,{value:e,key:(0,h.createDOMID)(),onChange:r(o),hideLabel:!0,label:" ",name:"color",style:{marginBottom:0,marginTop:0,width:a?"100%":32},showTextInput:a}),"function"==typeof t&&l.default.createElement(t,{index:o})))}))),[e,t,n,r]);return l.default.createElement(D,{"data-test":"MultiColorPickerFlyoutContent"},l.default.createElement(O,{"data-test":"MultiColorPickerFlyoutTitle"},o),l.default.createElement(x,null,l.default.createElement(p.default,{addLabel:a,onRequestAdd:i,onRequestMove:s,"data-test":"ColorListEditor"},u)))};const S=({CustomColorMatchEditor:e,onChange:n=c.noop,canReorderColors:r=!0,value:o=E.VIZ_CATEGORICAL,flyoutTitle:a=(0,f._)("Customize colors"),addColorButtonLabel:i=(0,f._)("Add color"),name:s="seriesColors",label:u="",labelPosition:d="top",labelWidth:p,isDisabled:m=!1,hideLabel:b=!0,canAddNewColors:T=!0})=>{const[D,O]=(0,l.useState)(!1),[x,S]=(0,l.useState)(o),k=(0,l.useRef)(null);(0,l.useEffect)((()=>{S(o)}),[o]);const I=(0,l.useCallback)((()=>{const e=new Set(x);let t=E.VIZ_CATEGORICAL.find((t=>!e.has(t)));if(!t){const e=new Map;E.VIZ_CATEGORICAL.forEach((t=>e.set(t,0))),x.forEach((t=>{e.set(t,(e.get(t)||0)+1)}));let n=1/0;E.VIZ_CATEGORICAL.forEach((r=>{const o=e.get(r)||0;o<n&&(n=o,t=r)}))}n(null,s,[...x,t])}),[s,n,x]),N=(0,l.useCallback)((e=>(t,r,o)=>{const a=[...x];a.splice(e,1,o),n(null,s,a)}),[s,n,x]),P=(0,l.useCallback)(((e,{index:t})=>{const r=[...x];r.splice(t,1),n(null,s,r)}),[s,n,x]),R=(0,l.useCallback)((({fromIndex:e,toIndex:t})=>{const r=[...x],o=r[e];r.splice(e,1),r.splice(t,0,o),n(null,s,r)}),[s,n,x]),L=(0,l.useCallback)((({event:e,reason:t})=>{var n;(null===(n=null==e?void 0:e.srcElement)||void 0===n?void 0:n.sortableHandle)||O(!1),"escapeKey"===t&&k.current.focus()}),[]),M=(0,l.useMemo)((()=>x.map((e=>l.default.createElement(A,{color:e,key:(0,h.createDOMID)()})))),[x]),F=(0,l.useCallback)((()=>{O((e=>!e))}),[]);return l.default.createElement(C.default,{label:u,labelPosition:d,labelWidth:p,hideLabel:b,"data-test":"MultiColorPickerEditor"},l.default.createElement(v,{inline:!1,"data-test":"MultiColorPickerButton",appearance:"default",ref:k,onClick:F,disabled:m,style:y},M),l.default.createElement(g.default,{"data-test":"MultiColorPickerFlyout",open:D,anchor:k.current,defaultPlacement:"horizontal",style:_,onRequestClose:L,takeFocus:!0},l.default.createElement(t.ColorFlyoutEditor,{colors:x,CustomColorMatchEditor:e,handleColorRemove:P,handleColorChange:N,handleColorAdd:T?I:void 0,handleColorMove:r?R:void 0,flyoutTitle:a,addColorButtonLabel:i})))};S.propTypes=Object.assign(Object.assign({},b.BaseEditorPropTypes),{canReorderColors:s.bool,canAddNewColors:s.bool,value:s.arrayOf(s.string),flyoutTitle:s.string,addColorButtonLabel:s.string,CustomColorMatchEditor:s.func,hideLabel:s.bool}),t.default=S},1546:function(e,t,n){"use strict";var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),o=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 n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&r(t,e,n);return o(t,e),t},i=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.NetworkGraphDynamicColorEditor=void 0;const l=a(n(9497)),s=n(6649),u=i(n(7143)),c=n(152),d=i(n(4182)),f=i(n(397));t.NetworkGraphDynamicColorEditor=({name:e,value:t,contextName:n,label:r="",labelWidth:o,context:a,flyoutTitle:i=(0,s._)("Dynamic coloring"),formatters:p=[],dataSelectors:h=[],defaultPalettesConfig:m,tooltip:g,options:E={},onChange:b=(()=>{})})=>{var C;const T=null===(C=h[0])||void 0===C?void 0:C.value,_=l.useCallback((e=>!e||e.trim().startsWith("#")?"static":"dynamic"),[]),[y,v]=l.useState(_(t));l.useEffect((()=>{const e=_(t);v(e)}),[_,t]);const A=l.useCallback(((t,r,o)=>{var i,l,s;v(o);const u=Object.assign({},E),c=Object.assign({},a);if("dynamic"===o){const r=(null===(i=p[0])||void 0===i?void 0:i.value)||"gradient",o=(null===(s=null===(l=p[0])||void 0===l?void 0:l.defaults)||void 0===s?void 0:s[T])||{},a=`> ${T} | ${r}(${n})`;u[e]=a,c[n]=o,b(t,{options:u,context:c})}else"static"===o&&(u[e]=void 0,c[n]=void 0,b(t,{options:u,context:c}))}),[E,a,p,T,n,e,b]),D=l.useCallback(((t,r)=>{var o;const i=r.options[e],l=null===(o=r.context)||void 0===o?void 0:o[n],s=Object.assign(Object.assign({},E),{[e]:i}),u=Object.assign(Object.assign({},a),{[n]:l});b(t,{options:s,context:u})}),[E,e,a,b,n]),O=l.useCallback(((e,t,r)=>{const o=Object.assign(Object.assign({},E),{[t]:r}),i=Object.assign({},a);i[n]=void 0,b(e,{options:o,context:i})}),[a,b,E,n]);return l.createElement(u.default,{"data-test":"dynamic-color-toggle",gutter:15},l.createElement(u.default.Row,{"data-test":"network-graph-dynamic-color-row",alignItems:"start"},l.createElement(u.default.Column,{span:6},l.createElement(d.default,{name:e,label:(0,s._)(r),labelPosition:"top",value:y,onChange:A,itemSchema:{type:"string"},values:[{label:(0,s._)("Static coloring"),value:"static"},{label:(0,s._)("Dynamic coloring"),value:"dynamic"}],help:g})),"dynamic"===y&&l.createElement(u.default.Column,{span:6},l.createElement(c.DynamicColorEditor,{name:e,label:" ",labelPosition:"top",labelWidth:o,value:t,context:a,onChange:D,flyoutTitle:i,formatters:p,dataSelectors:h,defaultPalettesConfig:m})),"static"===y&&l.createElement(u.default.Column,{span:6},l.createElement(f.default,{name:e,label:" ",labelPosition:"top",labelWidth:o,value:t,onChange:O}))))}},4215:function(e,t,n){"use strict";var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),o=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 n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&r(t,e,n);return o(t,e),t},i=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const l=a(n(9497)),s=i(n(232)),u=i(n(4566)),c=i(n(7020)),d=i(n(1551)),f=i(n(6769)),p=n(3563),h=i(n(1668)),m=i(n(4008)),g=(0,s.default)(h.default)`
+`;t.ColorFlyoutEditor=({colors:e,CustomColorMatchEditor:t,handleColorRemove:n,handleColorChange:r,flyoutTitle:o,addColorButtonLabel:a,handleColorAdd:i,handleColorMove:s})=>{const u=(0,l.useMemo)((()=>e.map(((e,o)=>{const a=null==t;return l.default.createElement(p.default.Row,{index:o,key:(0,h.createDOMID)(),"data-color":e,onRequestRemove:n},l.default.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},l.default.createElement(T.default,{value:e,key:(0,h.createDOMID)(),onChange:r(o),hideLabel:!0,label:" ",name:"color",style:{marginBottom:0,marginTop:0,width:a?"100%":32},showTextInput:a}),"function"==typeof t&&l.default.createElement(t,{index:o})))}))),[e,t,n,r]);return l.default.createElement(D,{"data-test":"MultiColorPickerFlyoutContent"},l.default.createElement(O,{"data-test":"MultiColorPickerFlyoutTitle"},o),l.default.createElement(x,null,l.default.createElement(p.default,{addLabel:a,onRequestAdd:i,onRequestMove:s,"data-test":"ColorListEditor"},u)))};const S=({CustomColorMatchEditor:e,onChange:n=c.noop,canReorderColors:r=!0,value:o=E.VIZ_CATEGORICAL,flyoutTitle:a=(0,f._)("Customize colors"),addColorButtonLabel:i=(0,f._)("Add color"),name:s="seriesColors",label:u="",labelPosition:d="top",labelWidth:p,isDisabled:m=!1,hideLabel:b=!0,canAddNewColors:T=!0})=>{const[D,O]=(0,l.useState)(!1),[x,S]=(0,l.useState)(o),k=(0,l.useRef)(null);(0,l.useEffect)((()=>{S(o)}),[o]);const I=(0,l.useCallback)((()=>{const e=new Set(x);let t=E.VIZ_CATEGORICAL.find((t=>!e.has(t)));if(!t){const e=new Map;E.VIZ_CATEGORICAL.forEach((t=>e.set(t,0))),x.forEach((t=>{e.set(t,(e.get(t)||0)+1)}));let n=1/0;E.VIZ_CATEGORICAL.forEach((r=>{const o=e.get(r)||0;o<n&&(n=o,t=r)}))}n(null,s,[...x,t])}),[s,n,x]),N=(0,l.useCallback)((e=>(t,r,o)=>{const a=[...x];a.splice(e,1,o),n(null,s,a)}),[s,n,x]),P=(0,l.useCallback)(((e,{index:t})=>{const r=[...x];r.splice(t,1),n(null,s,r)}),[s,n,x]),R=(0,l.useCallback)((({fromIndex:e,toIndex:t})=>{const r=[...x],o=r[e];r.splice(e,1),r.splice(t,0,o),n(null,s,r)}),[s,n,x]),L=(0,l.useCallback)((({event:e,reason:t})=>{var n;(null===(n=null==e?void 0:e.srcElement)||void 0===n?void 0:n.sortableHandle)||O(!1),"escapeKey"===t&&k.current.focus()}),[]),M=(0,l.useMemo)((()=>x.map((e=>l.default.createElement(A,{color:e,key:(0,h.createDOMID)()})))),[x]),F=(0,l.useCallback)((()=>{O((e=>!e))}),[]);return l.default.createElement(C.default,{label:u,labelPosition:d,labelWidth:p,hideLabel:b,"data-test":"MultiColorPickerEditor"},l.default.createElement(y,{inline:!1,"data-test":"MultiColorPickerButton",appearance:"default",ref:k,onClick:F,disabled:m},l.default.createElement(v,null,M)),l.default.createElement(g.default,{"data-test":"MultiColorPickerFlyout",open:D,anchor:k.current,defaultPlacement:"horizontal",style:_,onRequestClose:L,takeFocus:!0},l.default.createElement(t.ColorFlyoutEditor,{colors:x,CustomColorMatchEditor:e,handleColorRemove:P,handleColorChange:N,handleColorAdd:T?I:void 0,handleColorMove:r?R:void 0,flyoutTitle:a,addColorButtonLabel:i})))};S.propTypes=Object.assign(Object.assign({},b.BaseEditorPropTypes),{canReorderColors:s.bool,canAddNewColors:s.bool,value:s.arrayOf(s.string),flyoutTitle:s.string,addColorButtonLabel:s.string,CustomColorMatchEditor:s.func,hideLabel:s.bool}),t.default=S},1546:function(e,t,n){"use strict";var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),o=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 n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&r(t,e,n);return o(t,e),t},i=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.NetworkGraphDynamicColorEditor=void 0;const l=a(n(9497)),s=n(6649),u=i(n(7143)),c=n(152),d=i(n(4182)),f=i(n(397));t.NetworkGraphDynamicColorEditor=({name:e,value:t,contextName:n,label:r="",labelWidth:o,context:a,flyoutTitle:i=(0,s._)("Dynamic coloring"),formatters:p=[],dataSelectors:h=[],defaultPalettesConfig:m,tooltip:g,options:E={},onChange:b=(()=>{})})=>{var C;const T=null===(C=h[0])||void 0===C?void 0:C.value,_=l.useCallback((e=>!e||e.trim().startsWith("#")?"static":"dynamic"),[]),[y,v]=l.useState(_(t));l.useEffect((()=>{const e=_(t);v(e)}),[_,t]);const A=l.useCallback(((t,r,o)=>{var i,l,s;v(o);const u=Object.assign({},E),c=Object.assign({},a);if("dynamic"===o){const r=(null===(i=p[0])||void 0===i?void 0:i.value)||"gradient",o=(null===(s=null===(l=p[0])||void 0===l?void 0:l.defaults)||void 0===s?void 0:s[T])||{},a=`> ${T} | ${r}(${n})`;u[e]=a,c[n]=o,b(t,{options:u,context:c})}else"static"===o&&(u[e]=void 0,c[n]=void 0,b(t,{options:u,context:c}))}),[E,a,p,T,n,e,b]),D=l.useCallback(((t,r)=>{var o;const i=r.options[e],l=null===(o=r.context)||void 0===o?void 0:o[n],s=Object.assign(Object.assign({},E),{[e]:i}),u=Object.assign(Object.assign({},a),{[n]:l});b(t,{options:s,context:u})}),[E,e,a,b,n]),O=l.useCallback(((e,t,r)=>{const o=Object.assign(Object.assign({},E),{[t]:r}),i=Object.assign({},a);i[n]=void 0,b(e,{options:o,context:i})}),[a,b,E,n]);return l.createElement(u.default,{"data-test":"dynamic-color-toggle",gutter:15},l.createElement(u.default.Row,{"data-test":"network-graph-dynamic-color-row",alignItems:"start"},l.createElement(u.default.Column,{span:6},l.createElement(d.default,{name:e,label:(0,s._)(r),labelPosition:"top",value:y,onChange:A,itemSchema:{type:"string"},values:[{label:(0,s._)("Static coloring"),value:"static"},{label:(0,s._)("Dynamic coloring"),value:"dynamic"}],help:g})),"dynamic"===y&&l.createElement(u.default.Column,{span:6},l.createElement(c.DynamicColorEditor,{name:e,label:" ",labelPosition:"top",labelWidth:o,value:t,context:a,onChange:D,flyoutTitle:i,formatters:p,dataSelectors:h,defaultPalettesConfig:m})),"static"===y&&l.createElement(u.default.Column,{span:6},l.createElement(f.default,{name:e,label:" ",labelPosition:"top",labelWidth:o,value:t,onChange:O}))))}},4215:function(e,t,n){"use strict";var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),o=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 n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&r(t,e,n);return o(t,e),t},i=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const l=a(n(9497)),s=i(n(232)),u=i(n(4566)),c=i(n(7020)),d=i(n(1551)),f=i(n(6769)),p=n(3563),h=i(n(1668)),m=i(n(4008)),g=(0,s.default)(h.default)`
     background-color: ${u.default.backgroundColorPopup};
 `,E=s.default.span`
     font-weight: 500;
@@ -260,7 +260,7 @@ e.exports=function(){"use strict";function e(e,t){if("undefined"==typeof documen
 `,D=u.default.div`
     flex: 1 0 1px;
     height: 100%;
-`,O=({label:e,value:n,name:r,onChange:o})=>{const a=(0,l.useMemo)((()=>!!(null==n?void 0:n.length)&&!(0,c.isEqual)(n,g.VIZ_CATEGORICAL)),[n]),i=(0,l.useMemo)((()=>a?Object.assign(Object.assign({},t.PALETTES),{custom:Object.assign(Object.assign({},t.PALETTES.custom),{palette:n})}):t.PALETTES),[a,n]),[s,u]=(0,l.useState)(a?"custom":"default"),[T,y]=(0,l.useState)(i),O=(0,l.useCallback)((e=>{u(e),o(null,r,T[e].palette)}),[r,o,T]),x=(0,l.useCallback)(((e,n,a)=>{a.length?(y((e=>Object.assign(Object.assign({},e),{custom:Object.assign(Object.assign({},t.PALETTES.custom),{palette:a})}))),u("custom"),o(null,r,a)):(y((e=>Object.assign(Object.assign({},e),{custom:t.PALETTES.custom}))),u("default"),o(null,r,t.PALETTES.default.palette))}),[r,o]),S=l.default.createElement(d.default,{appearance:"default","data-test":"palette-dropdown-button",label:T[s].name,isMenu:!0}),k=e=>{const{id:t,palette:n,name:r}=e;return l.default.createElement(h.default.Item,{key:`SeriesColorsDropdownMenuItem-${t}`,"data-test":`palette-dropdown-menu-${t}`,selectable:!0,selected:s===t,onClick:()=>O(t)},l.default.createElement(A,null,l.default.createElement(v,null,r),l.default.createElement(D,null,l.default.createElement(b.ColorPreview,{colors:n.slice(0,8),maxColorCount:8,expandToFillHorizontalSpace:!1}))))},I=T.custom.palette.length>0;return l.default.createElement(f.default,{gutter:_.VERTICAL_EDITOR_SPACING},l.default.createElement(f.default.Row,null,l.default.createElement(C.default,{label:e||(0,m._)("Series colors"),labelPosition:"top","data-test":"series-colors-editor"},l.default.createElement(p.default,{toggle:S},l.default.createElement(h.default,{style:{width:_.DROPDOWN_MENU_WIDTH}},I&&k(T.custom),I&&l.default.createElement(h.default.Divider,null),k(t.PALETTES.default))))),l.default.createElement(f.default.Row,null,l.default.createElement(E.default,{name:"series-colors",value:T[s].palette,flyoutTitle:(0,m._)("Customize colors"),addColorButtonLabel:(0,m._)("Add color"),onChange:x})))};O.propTypes=Object.assign(Object.assign({},y.BaseEditorPropTypes),{value:s.arrayOf(s.string)}),t.default=O},148:function(e,t,n){"use strict";var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),o=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 n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&r(t,e,n);return o(t,e),t},i=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.SliderEditor=void 0;const l=a(n(9497)),s=i(n(232)),u=i(n(5309)),c=i(n(2782)),d=i(n(4008)),f=n(5592),p={flexBasis:92,flexGrow:0,flexShrink:0},h=(0,s.default)(u.default)`
+`,O=({label:e,value:n,name:r,onChange:o})=>{const a=(0,l.useMemo)((()=>!!(null==n?void 0:n.length)&&!(0,c.isEqual)(n,g.VIZ_CATEGORICAL)),[n]),i=(0,l.useMemo)((()=>a?Object.assign(Object.assign({},t.PALETTES),{custom:Object.assign(Object.assign({},t.PALETTES.custom),{palette:n})}):t.PALETTES),[a,n]),[s,u]=(0,l.useState)(a?"custom":"default"),[T,y]=(0,l.useState)(i),O=(0,l.useCallback)((e=>{u(e),o(null,r,T[e].palette)}),[r,o,T]),x=(0,l.useCallback)(((e,n,a)=>{a.length?(y((e=>Object.assign(Object.assign({},e),{custom:Object.assign(Object.assign({},t.PALETTES.custom),{palette:a})}))),u("custom"),o(null,r,a)):(y((e=>Object.assign(Object.assign({},e),{custom:t.PALETTES.custom}))),u("default"),o(null,r,t.PALETTES.default.palette))}),[r,o]),S=l.default.createElement(d.default,{appearance:"default","data-test":"palette-dropdown-button",label:T[s].name,inline:!1,isMenu:!0}),k=e=>{const{id:t,palette:n,name:r}=e;return l.default.createElement(h.default.Item,{key:`SeriesColorsDropdownMenuItem-${t}`,"data-test":`palette-dropdown-menu-${t}`,selectable:!0,selected:s===t,onClick:()=>O(t)},l.default.createElement(A,null,l.default.createElement(v,null,r),l.default.createElement(D,null,l.default.createElement(b.ColorPreview,{colors:n.slice(0,8),maxColorCount:8,expandToFillHorizontalSpace:!1}))))},I=T.custom.palette.length>0;return l.default.createElement(f.default,{gutter:_.VERTICAL_EDITOR_SPACING},l.default.createElement(f.default.Row,null,l.default.createElement(C.default,{label:e||(0,m._)("Series colors"),labelPosition:"top","data-test":"series-colors-editor"},l.default.createElement(p.default,{toggle:S},l.default.createElement(h.default,{style:{width:_.DROPDOWN_MENU_WIDTH}},I&&k(T.custom),I&&l.default.createElement(h.default.Divider,null),k(t.PALETTES.default))))),l.default.createElement(f.default.Row,null,l.default.createElement(E.default,{name:"series-colors",value:T[s].palette,flyoutTitle:(0,m._)("Customize colors"),addColorButtonLabel:(0,m._)("Add color"),onChange:x})))};O.propTypes=Object.assign(Object.assign({},y.BaseEditorPropTypes),{value:s.arrayOf(s.string)}),t.default=O},148:function(e,t,n){"use strict";var r=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),o=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 n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&r(t,e,n);return o(t,e),t},i=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.SliderEditor=void 0;const l=a(n(9497)),s=i(n(232)),u=i(n(5309)),c=i(n(2782)),d=i(n(4008)),f=n(5592),p={flexBasis:92,flexGrow:0,flexShrink:0},h=(0,s.default)(u.default)`
     div:has(> [data-test='bar']) {
         min-width: 0;
     }