@teselagen/ove 0.3.12 → 0.3.13

package/index.umd.js

@@ -23998,7 +23998,7 @@
   var ownKeys$9 = typeof Reflect !== "undefined" && Reflect.ownKeys ? Reflect.ownKeys : hasGetOwnPropertySymbols ? function (obj) {
     return Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(obj));
   } : /* istanbul ignore next */Object.getOwnPropertyNames;
-  function toPrimitive$3(value) {
+  function toPrimitive$2(value) {
     return value === null ? null : typeof value === "object" ? "" + value : value;
   }
   function hasProp(target, prop) {
@@ -24927,7 +24927,7 @@
       return this.name_ + "[" + this.value_ + "]";
     };
     _proto.valueOf = function valueOf() {
-      return toPrimitive$3(this.get());
+      return toPrimitive$2(this.get());
     };
     _proto[_Symbol$toPrimitive] = function () {
       return this.valueOf();
@@ -25155,7 +25155,7 @@
       return this.name_ + "[" + this.derivation.toString() + "]";
     };
     _proto.valueOf = function valueOf() {
-      return toPrimitive$3(this.get());
+      return toPrimitive$2(this.get());
     };
     _proto[_Symbol$toPrimitive$1] = function () {
       return this.valueOf();
@@ -57023,10 +57023,18 @@
     }
   };
 
-  // Thank's IE8 for his funny defineProperty
-  var _descriptors = !_fails(function () {
-    return Object.defineProperty({}, 'a', { get: function () { return 7; } }).a != 7;
-  });
+  var _descriptors;
+  var hasRequired_descriptors;
+
+  function require_descriptors () {
+  	if (hasRequired_descriptors) return _descriptors;
+  	hasRequired_descriptors = 1;
+  	// Thank's IE8 for his funny defineProperty
+  	_descriptors = !_fails(function () {
+  	  return Object.defineProperty({}, 'a', { get: function () { return 7; } }).a != 7;
+  	});
+  	return _descriptors;
+  }
 
   var _domCreate;
   var hasRequired_domCreate;
@@ -57044,9 +57052,17 @@
   	return _domCreate;
   }
 
-  var _ie8DomDefine = !_descriptors && !_fails(function () {
-    return Object.defineProperty(require_domCreate()('div'), 'a', { get: function () { return 7; } }).a != 7;
-  });
+  var _ie8DomDefine;
+  var hasRequired_ie8DomDefine;
+
+  function require_ie8DomDefine () {
+  	if (hasRequired_ie8DomDefine) return _ie8DomDefine;
+  	hasRequired_ie8DomDefine = 1;
+  	_ie8DomDefine = !require_descriptors() && !_fails(function () {
+  	  return Object.defineProperty(require_domCreate()('div'), 'a', { get: function () { return 7; } }).a != 7;
+  	});
+  	return _ie8DomDefine;
+  }
 
   // 7.1.1 ToPrimitive(input [, PreferredType])
   var isObject$6 = _isObject;
@@ -57061,22 +57077,29 @@
     throw TypeError("Can't convert object to primitive value");
   };
 
-  var anObject$5 = _anObject;
-  var IE8_DOM_DEFINE$1 = _ie8DomDefine;
-  var toPrimitive$2 = _toPrimitive$1;
-  var dP$3 = Object.defineProperty;
+  var hasRequired_objectDp;
 
-  _objectDp.f = _descriptors ? Object.defineProperty : function defineProperty(O, P, Attributes) {
-    anObject$5(O);
-    P = toPrimitive$2(P, true);
-    anObject$5(Attributes);
-    if (IE8_DOM_DEFINE$1) try {
-      return dP$3(O, P, Attributes);
-    } catch (e) { /* empty */ }
-    if ('get' in Attributes || 'set' in Attributes) throw TypeError('Accessors not supported!');
-    if ('value' in Attributes) O[P] = Attributes.value;
-    return O;
-  };
+  function require_objectDp () {
+  	if (hasRequired_objectDp) return _objectDp;
+  	hasRequired_objectDp = 1;
+  	var anObject = _anObject;
+  	var IE8_DOM_DEFINE = require_ie8DomDefine();
+  	var toPrimitive = _toPrimitive$1;
+  	var dP = Object.defineProperty;
+
+  	_objectDp.f = require_descriptors() ? Object.defineProperty : function defineProperty(O, P, Attributes) {
+  	  anObject(O);
+  	  P = toPrimitive(P, true);
+  	  anObject(Attributes);
+  	  if (IE8_DOM_DEFINE) try {
+  	    return dP(O, P, Attributes);
+  	  } catch (e) { /* empty */ }
+  	  if ('get' in Attributes || 'set' in Attributes) throw TypeError('Accessors not supported!');
+  	  if ('value' in Attributes) O[P] = Attributes.value;
+  	  return O;
+  	};
+  	return _objectDp;
+  }
 
   var _propertyDesc = function (bitmap, value) {
     return {
@@ -57087,9 +57110,9 @@
     };
   };
 
-  var dP$2 = _objectDp;
+  var dP$2 = require_objectDp();
   var createDesc$3 = _propertyDesc;
-  var _hide = _descriptors ? function (object, key, value) {
+  var _hide = require_descriptors() ? function (object, key, value) {
     return dP$2.f(object, key, createDesc$3(1, value));
   } : function (object, key, value) {
     object[key] = value;
@@ -57170,12 +57193,20 @@
     return toString$4.call(it).slice(8, -1);
   };
 
-  // fallback for non-array-like ES3 and non-enumerable old V8 strings
-  var cof$2 = _cof;
-  // eslint-disable-next-line no-prototype-builtins
-  var _iobject = Object('z').propertyIsEnumerable(0) ? Object : function (it) {
-    return cof$2(it) == 'String' ? it.split('') : Object(it);
-  };
+  var _iobject;
+  var hasRequired_iobject;
+
+  function require_iobject () {
+  	if (hasRequired_iobject) return _iobject;
+  	hasRequired_iobject = 1;
+  	// fallback for non-array-like ES3 and non-enumerable old V8 strings
+  	var cof = _cof;
+  	// eslint-disable-next-line no-prototype-builtins
+  	_iobject = Object('z').propertyIsEnumerable(0) ? Object : function (it) {
+  	  return cof(it) == 'String' ? it.split('') : Object(it);
+  	};
+  	return _iobject;
+  }
 
   // 7.2.1 RequireObjectCoercible(argument)
   var _defined = function (it) {
@@ -57184,7 +57215,7 @@
   };
 
   // to indexed object, toObject with fallback for non-array-like ES3 strings
-  var IObject = _iobject;
+  var IObject = require_iobject();
   var defined$2 = _defined;
   var _toIobject = function (it) {
     return IObject(defined$2(it));
@@ -57326,12 +57357,12 @@
   	if (hasRequired_objectAssign) return _objectAssign;
   	hasRequired_objectAssign = 1;
   	// 19.1.2.1 Object.assign(target, source, ...)
-  	var DESCRIPTORS = _descriptors;
+  	var DESCRIPTORS = require_descriptors();
   	var getKeys = _objectKeys;
   	var gOPS = _objectGops;
   	var pIE = require_objectPie();
   	var toObject = _toObject;
-  	var IObject = _iobject;
+  	var IObject = require_iobject();
   	var $assign = Object.assign;
 
   	// should work with symbols and should have deterministic property order (V8 bug)
@@ -57402,11 +57433,11 @@
 
   var _redefine = _hide;
 
-  var dP$1 = _objectDp;
+  var dP$1 = require_objectDp();
   var anObject$4 = _anObject;
   var getKeys$1 = _objectKeys;
 
-  var _objectDps = _descriptors ? Object.defineProperties : function defineProperties(O, Properties) {
+  var _objectDps = require_descriptors() ? Object.defineProperties : function defineProperties(O, Properties) {
     anObject$4(O);
     var keys = getKeys$1(Properties);
     var length = keys.length;
@@ -57485,7 +57516,7 @@
 
   var _wksExports = _wks.exports;
 
-  var def = _objectDp.f;
+  var def = require_objectDp().f;
   var has$b = _has;
   var TAG$1 = _wksExports('toStringTag');
 
@@ -57799,7 +57830,7 @@
     return it !== undefined && (Iterators.Array === it || ArrayProto[ITERATOR] === it);
   };
 
-  var $defineProperty$1 = _objectDp;
+  var $defineProperty$1 = require_objectDp();
   var createDesc$2 = _propertyDesc;
 
   var _createProperty = function (object, index, value) {
@@ -57932,7 +57963,7 @@
 
   var $export$3 = _export;
   // 19.1.2.4 / 15.2.3.6 Object.defineProperty(O, P, Attributes)
-  $export$3($export$3.S + $export$3.F * !_descriptors, 'Object', { defineProperty: _objectDp.f });
+  $export$3($export$3.S + $export$3.F * !require_descriptors(), 'Object', { defineProperty: require_objectDp().f });
 
   var $Object$1 = _coreExports.Object;
   var defineProperty$6 = function defineProperty(it, key, desc) {
@@ -57980,7 +58011,7 @@
   var META$1 = _uid('meta');
   var isObject$5 = _isObject;
   var has$9 = _has;
-  var setDesc = _objectDp.f;
+  var setDesc = require_objectDp().f;
   var id$1 = 0;
   var isExtensible = Object.isExtensible || function () {
     return true;
@@ -58035,7 +58066,7 @@
 
   var core = _coreExports;
   var wksExt$1 = _wksExt;
-  var defineProperty$4 = _objectDp.f;
+  var defineProperty$4 = require_objectDp().f;
   var _wksDefine = function (name) {
     var $Symbol = core.Symbol || (core.Symbol = {} );
     if (name.charAt(0) != '_' && !(name in $Symbol)) defineProperty$4($Symbol, name, { value: wksExt$1.f(name) });
@@ -58102,10 +58133,10 @@
   var toIObject$1 = _toIobject;
   var toPrimitive$1 = _toPrimitive$1;
   var has$8 = _has;
-  var IE8_DOM_DEFINE = _ie8DomDefine;
+  var IE8_DOM_DEFINE = require_ie8DomDefine();
   var gOPD$2 = Object.getOwnPropertyDescriptor;
 
-  _objectGopd.f = _descriptors ? gOPD$2 : function getOwnPropertyDescriptor(O, P) {
+  _objectGopd.f = require_descriptors() ? gOPD$2 : function getOwnPropertyDescriptor(O, P) {
     O = toIObject$1(O);
     P = toPrimitive$1(P, true);
     if (IE8_DOM_DEFINE) try {
@@ -58117,7 +58148,7 @@
   // ECMAScript 6 symbols shim
   var global$1 = _globalExports;
   var has$7 = _has;
-  var DESCRIPTORS = _descriptors;
+  var DESCRIPTORS = require_descriptors();
   var $export$2 = _export;
   var redefine = _redefine;
   var META = _metaExports.KEY;
@@ -58140,7 +58171,7 @@
   var gOPNExt = _objectGopnExt;
   var $GOPD = _objectGopd;
   var $GOPS = _objectGops;
-  var $DP = _objectDp;
+  var $DP = require_objectDp();
   var $keys$1 = _objectKeys;
   var gOPD$1 = $GOPD.f;
   var dP = $DP.f;
@@ -120374,6 +120405,8 @@
       userSchema = exampleData,
       initialEntities
     } = props;
+    const rerenderKey = reactExports.useRef(0);
+    rerenderKey.current = rerenderKey.current + 1;
     const data = userSchema.userData && userSchema.userData.length && userSchema.userData.map((row) => {
       const toRet = {
         _isClean: row._isClean
@@ -120420,6 +120453,7 @@
       {
         maxWidth: 800,
         maxHeight: 500,
+        rerenderKey: rerenderKey.current,
         destroyOnUnmount: false,
         doNotValidateUntouchedRows: true,
         formName: datatableFormName || "editableCellTable",
@@ -142151,9 +142185,9 @@
   function filterAminoAcidSequenceString(sequenceString, options) {
     options = options || {};
     if (options.includeStopCodon) {
-      return sequenceString.replace(/[^xtgalmfwkqespvicyhrndu.*]/gi, "");
+      return sequenceString?.replace(/[^xtgalmfwkqespvicyhrndu.*]/gi, "");
     }
-    return sequenceString.replace(/[^xtgalmfwkqespvicyhrndu]/gi, "");
+    return sequenceString?.replace(/[^xtgalmfwkqespvicyhrndu]/gi, "");
   }
 
   function getDegenerateDnaStringFromAAString(aaString) {
@@ -188727,7 +188761,7 @@ double click --> edit`}`;
   }
 
   const name = "@teselagen/ove";
-  const version = "0.3.11";
+  const version = "0.3.12";
   const main = "./src/index.js";
   const exports$1 = {
   	".": {
@@ -189269,6 +189303,184 @@ double click --> edit`}`;
     );
   }
 
+  const style$i = '';
+
+  class ToolbarItem extends React$3.Component {
+    toggleDropdown = ({ forceClose } = {}) => {
+      const { toolName, isOpen } = this.props;
+      this.props.openToolbarItemUpdate(isOpen || forceClose ? "" : toolName);
+    };
+    render() {
+      const { overrides = {} } = this.props;
+      const {
+        isOpen,
+        index,
+        Icon: Icon$1,
+        // dynamicIcon,
+        onIconClick = lodashExports.noop,
+        tooltip = "",
+        tooltipToggled,
+        dropdowntooltip = "",
+        Dropdown,
+        disabled,
+        isHidden,
+        renderIconAbove,
+        noDropdownIcon,
+        IconWrapper,
+        editorName,
+        popoverDisabled,
+        IconWrapperProps,
+        toolName,
+        dropdownicon,
+        tooltipDisabled,
+        toggled = false,
+        ...rest
+      } = { ...this.props, ...overrides };
+      if (!toolName)
+        console.warn("toolName is required!");
+      if (isHidden)
+        return null;
+      let tooltipToDisplay = tooltip;
+      if (toggled && tooltipToggled) {
+        tooltipToDisplay = tooltipToggled;
+      }
+      const buttonTarget = /* @__PURE__ */ React$3.createElement(
+        "div",
+        {
+          className: `veToolbarItemOuter ve-tool-container-${toolName}` + (disabled ? " disabled " : "")
+        },
+        renderIconAbove && /* @__PURE__ */ React$3.createElement("div", null, /* @__PURE__ */ React$3.createElement("div", { className: "veToolbarItem" }, Icon$1)),
+        Icon$1 && !renderIconAbove && /* @__PURE__ */ React$3.createElement(
+          Tooltip,
+          {
+            disabled: tooltipDisabled,
+            portalClassName: "ve-toolbar-item-popover",
+            content: tooltipToDisplay
+          },
+          /* @__PURE__ */ React$3.createElement(
+            AnchorButton,
+            {
+              intent: Intent.PRIMARY,
+              onClick: onIconClick === "toggleDropdown" ? this.toggleDropdown : onIconClick,
+              active: toggled,
+              disabled,
+              minimal: true,
+              icon: React$3.isValidElement(Icon$1) ? Icon$1 : /* @__PURE__ */ React$3.createElement(Icon$1, { toggleDropdown: this.toggleDropdown })
+            }
+          )
+        ),
+        Dropdown && !noDropdownIcon ? /* @__PURE__ */ React$3.createElement(Tooltip, { disabled: tooltipDisabled, content: dropdowntooltip }, /* @__PURE__ */ React$3.createElement(
+          "div",
+          {
+            className: (isOpen ? " isOpen " : "") + (dropdownicon ? "" : " veToolbarDropdown"),
+            onClick: this.toggleDropdown
+          },
+          dropdownicon ? /* @__PURE__ */ React$3.createElement("div", { className: "veToolbarIcon" }, /* @__PURE__ */ React$3.createElement("div", null, dropdownicon)) : isOpen ? /* @__PURE__ */ React$3.createElement(
+            Icon,
+            {
+              "data-test": toolName + "Dropdown",
+              iconSize: 13,
+              icon: "caret-up"
+            }
+          ) : /* @__PURE__ */ React$3.createElement(
+            Icon,
+            {
+              "data-test": toolName + "Dropdown",
+              iconSize: 13,
+              icon: "caret-down"
+            }
+          )
+        )) : null
+      );
+      const content = /* @__PURE__ */ React$3.createElement(
+        "div",
+        {
+          ref: (n) => {
+            if (n)
+              this.dropdownNode = n;
+          },
+          style: { padding: 10, minWidth: 250, maxWidth: 350 },
+          className: "ve-toolbar-dropdown content"
+        },
+        Dropdown && /* @__PURE__ */ React$3.createElement(
+          Dropdown,
+          {
+            ...rest,
+            editorName,
+            toggleDropdown: this.toggleDropdown
+          }
+        )
+      );
+      const target = IconWrapper ? /* @__PURE__ */ React$3.createElement(IconWrapper, { ...IconWrapperProps }, ({ getRootProps, getInputProps }) => /* @__PURE__ */ React$3.createElement("div", { ...getRootProps() }, /* @__PURE__ */ React$3.createElement("input", { ...getInputProps() }), buttonTarget)) : buttonTarget;
+      return /* @__PURE__ */ React$3.createElement("div", { style: { display: "flex", alignItems: "center" } }, index !== 0 && /* @__PURE__ */ React$3.createElement("div", { className: "veToolbarSpacer" }), /* @__PURE__ */ React$3.createElement(
+        Popover,
+        {
+          disabled: popoverDisabled,
+          isOpen: !!Dropdown && isOpen,
+          onClose: (e) => {
+            let srcElement;
+            if (e) {
+              srcElement = e.srcElement || e.target;
+            }
+            if (e && srcElement && this.dropdownNode && (this.dropdownNode.contains(srcElement) || !document.body.contains(srcElement))) {
+              return;
+            }
+            this.toggleDropdown({ forceClose: true });
+          },
+          canEscapeKeyClose: true,
+          minimal: true,
+          position: Position.BOTTOM,
+          target,
+          content
+        }
+      ));
+    }
+  }
+  const ToolbarItem$1 = connectToEditor(({ toolBar = {} }, { toolName }) => ({
+    isOpen: toolBar.openItem === toolName
+  }))(ToolbarItem);
+
+  const editTool = connectToEditor((editorState) => {
+    return {
+      readOnly: editorState.readOnly
+    };
+  })((props) => {
+    const { toolbarItemProps, readOnly, disableSetReadOnly } = props;
+    const [isLoading, setIsLoading] = reactExports.useState(false);
+    const readOnlyTooltip = ({ readOnly: readOnly2, disableSetReadOnly: disableSetReadOnly2 }) => {
+      if (isLoading) {
+        return "Loading...";
+      } else if (disableSetReadOnly2) {
+        return "You do not have permission to edit locks on this sequence";
+      }
+      return readOnly2 ? "Click to enable editing" : "Click to disable editing";
+    };
+    return /* @__PURE__ */ React$3.createElement(
+      ToolbarItem$1,
+      {
+        ...{
+          disabled: isLoading || disableSetReadOnly,
+          Icon: /* @__PURE__ */ React$3.createElement(Icon, { icon: readOnly ? "lock" : "unlock" }),
+          onIconClick: () => handleReadOnlyChange(!readOnly, { ...props, setIsLoading }),
+          tooltip: readOnlyTooltip({ readOnly, disableSetReadOnly }),
+          ...toolbarItemProps
+        }
+      }
+    );
+  });
+  async function handleReadOnlyChange(newVal, { beforeReadOnlyChange, updateReadOnlyMode, setIsLoading = () => {
+  } }) {
+    if (beforeReadOnlyChange) {
+      setIsLoading(true);
+      const shouldChange = await beforeReadOnlyChange(newVal);
+      setIsLoading(false);
+      if (shouldChange === false) {
+        return;
+      }
+    }
+    updateReadOnlyMode(newVal);
+  }
+
   const isProtein = (props) => props.sequenceData && props.sequenceData.isProtein;
   const isOligo = (props) => props.sequenceData && props.sequenceData.isOligo;
   const isRna = (props) => props.sequenceData && props.sequenceData.isRna;
@@ -189352,7 +189564,7 @@ double click --> edit`}`;
       isDisabled: (props) => props.disableSetReadOnly || !props.onSave,
       isHidden: (props) => !props.toggleReadOnlyMode,
       isActive: (props) => props.readOnly,
-      handler: (props) => props.toggleReadOnlyMode()
+      handler: (props) => handleReadOnlyChange(!props.readOnly, props)
     },
     importSequence: {
       isHidden: (props) => props.hideSingleImport,
@@ -192621,7 +192833,7 @@ double click --> edit`}`;
     ];
   }
 
-  const style$i = '';
+  const style$h = '';
 
   function SequenceName({ sequenceName, sequenceLength, isProtein }) {
     return /* @__PURE__ */ React$3.createElement("div", { key: "circViewSvgCenterText", style: { textAlign: "center" } }, /* @__PURE__ */ React$3.createElement("span", null, sequenceName, " "), /* @__PURE__ */ React$3.createElement("br", null), /* @__PURE__ */ React$3.createElement("span", null, isProtein ? `${Math.floor(sequenceLength / 3)} AAs` : `${sequenceLength} bps`));
@@ -195007,7 +195219,7 @@ double click --> edit`}`;
     );
   }
 
-  const style$h = '';
+  const style$g = '';
 
   const simpleDialog = '';
 
@@ -195284,7 +195496,7 @@ double click --> edit`}`;
     return combinedLabels;
   }
 
-  const style$g = '';
+  const style$f = '';
 
   const fontWidthToFontSize = 1.75;
   const getTextLength = (text) => {
@@ -197487,7 +197699,7 @@ double click --> edit`}`;
   }
   const DrawAnnotation = withHover(DrawAnnotationInner);
 
-  const style$f = '';
+  const style$e = '';
 
   function c(u,e,c){var i=this,a=reactExports.useRef(null),o=reactExports.useRef(0),f=reactExports.useRef(null),l=reactExports.useRef([]),m=reactExports.useRef(),v=reactExports.useRef(),d=reactExports.useRef(u),p=reactExports.useRef(!0);reactExports.useEffect(function(){d.current=u;},[u]);var g=!e&&0!==e&&"undefined"!=typeof window;if("function"!=typeof u)throw new TypeError("Expected a function");e=+e||0;var w=!!(c=c||{}).leading,s=!("trailing"in c)||!!c.trailing,x="maxWait"in c,y=x?Math.max(+c.maxWait||0,e):null;reactExports.useEffect(function(){return p.current=!0,function(){p.current=!1;}},[]);var h=reactExports.useMemo(function(){var r=function(r){var n=l.current,t=m.current;return l.current=m.current=null,o.current=r,v.current=d.current.apply(t,n)},n=function(r,n){g&&cancelAnimationFrame(f.current),f.current=g?requestAnimationFrame(r):setTimeout(r,n);},t=function(r){if(!p.current)return !1;var n=r-a.current;return !a.current||n>=e||n<0||x&&r-o.current>=y},u=function(n){return f.current=null,s&&l.current?r(n):(l.current=m.current=null,v.current)},c=function r(){var c=Date.now();if(t(c))return u(c);if(p.current){var i=e-(c-a.current),f=x?Math.min(i,y-(c-o.current)):i;n(r,f);}},h=function(){var u=Date.now(),d=t(u);if(l.current=[].slice.call(arguments),m.current=i,a.current=u,d){if(!f.current&&p.current)return o.current=a.current,n(c,e),w?r(a.current):v.current;if(x)return n(c,e),r(a.current)}return f.current||n(c,e),v.current};return h.cancel=function(){f.current&&(g?cancelAnimationFrame(f.current):clearTimeout(f.current)),o.current=0,l.current=a.current=m.current=f.current=null;},h.isPending=function(){return !!f.current},h.flush=function(){return f.current?u(Date.now()):v.current},h},[w,x,e,y,s,g]);return h}
 
@@ -198420,7 +198632,7 @@ double click --> edit`}`;
   }
   const CircularView$1 = withEditorInteractions(CircularView);
 
-  const style$e = '';
+  const style$d = '';
 
   class PrintDialog extends React$3.Component {
     state = {
@@ -198901,7 +199113,7 @@ double click --> edit`}`;
     tgFormValues("ignoreName", "ignoreStrand", "ignoreStartAndEnd")
   )(RemoveDuplicatesDialog);
 
-  const style$d = '';
+  const style$c = '';
 
   var isMobile$2 = {exports: {}};
 
@@ -199923,7 +200135,7 @@ double click --> edit`}`;
     return normalizedVal;
   };
 
-  const style$c = '';
+  const style$b = '';
 
   const EnzymeViewer = ({
     extraClasses = "",
@@ -199998,7 +200210,7 @@ double click --> edit`}`;
     );
   };
 
-  const style$b = '';
+  const style$a = '';
 
   const upsertLocalEnzymeGroups = (newGroups) => {
     const existingGroups = window.getExistingEnzymeGroups();
@@ -200694,7 +200906,7 @@ double click --> edit`}`;
     );
   });
 
-  const style$a = '';
+  const style$9 = '';
 
   const CreateCustomEnzyme = function(props) {
     const paddingStart = "-------";
@@ -201519,143 +201731,6 @@ double click --> edit`}`;
     return isHidden;
   }
 
-  const style$9 = '';
-
-  class ToolbarItem extends React$3.Component {
-    toggleDropdown = ({ forceClose } = {}) => {
-      const { toolName, isOpen } = this.props;
-      this.props.openToolbarItemUpdate(isOpen || forceClose ? "" : toolName);
-    };
-    render() {
-      const { overrides = {} } = this.props;
-      const {
-        isOpen,
-        index,
-        Icon: Icon$1,
-        // dynamicIcon,
-        onIconClick = lodashExports.noop,
-        tooltip = "",
-        tooltipToggled,
-        dropdowntooltip = "",
-        Dropdown,
-        disabled,
-        isHidden,
-        renderIconAbove,
-        noDropdownIcon,
-        IconWrapper,
-        editorName,
-        popoverDisabled,
-        IconWrapperProps,
-        toolName,
-        dropdownicon,
-        tooltipDisabled,
-        toggled = false,
-        ...rest
-      } = { ...this.props, ...overrides };
-      if (!toolName)
-        console.warn("toolName is required!");
-      if (isHidden)
-        return null;
-      let tooltipToDisplay = tooltip;
-      if (toggled && tooltipToggled) {
-        tooltipToDisplay = tooltipToggled;
-      }
-      const buttonTarget = /* @__PURE__ */ React$3.createElement(
-        "div",
-        {
-          className: `veToolbarItemOuter ve-tool-container-${toolName}` + (disabled ? " disabled " : "")
-        },
-        renderIconAbove && /* @__PURE__ */ React$3.createElement("div", null, /* @__PURE__ */ React$3.createElement("div", { className: "veToolbarItem" }, Icon$1)),
-        Icon$1 && !renderIconAbove && /* @__PURE__ */ React$3.createElement(
-          Tooltip,
-          {
-            disabled: tooltipDisabled,
-            portalClassName: "ve-toolbar-item-popover",
-            content: tooltipToDisplay
-          },
-          /* @__PURE__ */ React$3.createElement(
-            AnchorButton,
-            {
-              intent: Intent.PRIMARY,
-              onClick: onIconClick === "toggleDropdown" ? this.toggleDropdown : onIconClick,
-              active: toggled,
-              disabled,
-              minimal: true,
-              icon: React$3.isValidElement(Icon$1) ? Icon$1 : /* @__PURE__ */ React$3.createElement(Icon$1, { toggleDropdown: this.toggleDropdown })
-            }
-          )
-        ),
-        Dropdown && !noDropdownIcon ? /* @__PURE__ */ React$3.createElement(Tooltip, { disabled: tooltipDisabled, content: dropdowntooltip }, /* @__PURE__ */ React$3.createElement(
-          "div",
-          {
-            className: (isOpen ? " isOpen " : "") + (dropdownicon ? "" : " veToolbarDropdown"),
-            onClick: this.toggleDropdown
-          },
-          dropdownicon ? /* @__PURE__ */ React$3.createElement("div", { className: "veToolbarIcon" }, /* @__PURE__ */ React$3.createElement("div", null, dropdownicon)) : isOpen ? /* @__PURE__ */ React$3.createElement(
-            Icon,
-            {
-              "data-test": toolName + "Dropdown",
-              iconSize: 13,
-              icon: "caret-up"
-            }
-          ) : /* @__PURE__ */ React$3.createElement(
-            Icon,
-            {
-              "data-test": toolName + "Dropdown",
-              iconSize: 13,
-              icon: "caret-down"
-            }
-          )
-        )) : null
-      );
-      const content = /* @__PURE__ */ React$3.createElement(
-        "div",
-        {
-          ref: (n) => {
-            if (n)
-              this.dropdownNode = n;
-          },
-          style: { padding: 10, minWidth: 250, maxWidth: 350 },
-          className: "ve-toolbar-dropdown content"
-        },
-        Dropdown && /* @__PURE__ */ React$3.createElement(
-          Dropdown,
-          {
-            ...rest,
-            editorName,
-            toggleDropdown: this.toggleDropdown
-          }
-        )
-      );
-      const target = IconWrapper ? /* @__PURE__ */ React$3.createElement(IconWrapper, { ...IconWrapperProps }, ({ getRootProps, getInputProps }) => /* @__PURE__ */ React$3.createElement("div", { ...getRootProps() }, /* @__PURE__ */ React$3.createElement("input", { ...getInputProps() }), buttonTarget)) : buttonTarget;
-      return /* @__PURE__ */ React$3.createElement("div", { style: { display: "flex", alignItems: "center" } }, index !== 0 && /* @__PURE__ */ React$3.createElement("div", { className: "veToolbarSpacer" }), /* @__PURE__ */ React$3.createElement(
-        Popover,
-        {
-          disabled: popoverDisabled,
-          isOpen: !!Dropdown && isOpen,
-          onClose: (e) => {
-            let srcElement;
-            if (e) {
-              srcElement = e.srcElement || e.target;
-            }
-            if (e && srcElement && this.dropdownNode && (this.dropdownNode.contains(srcElement) || !document.body.contains(srcElement))) {
-              return;
-            }
-            this.toggleDropdown({ forceClose: true });
-          },
-          canEscapeKeyClose: true,
-          minimal: true,
-          position: Position.BOTTOM,
-          target,
-          content
-        }
-      ));
-    }
-  }
-  const ToolbarItem$1 = connectToEditor(({ toolBar = {} }, { toolName }) => ({
-    isOpen: toolBar.openItem === toolName
-  }))(ToolbarItem);
-
   function array_move(arr, old_index, new_index) {
     if (new_index >= arr.length) {
       let k = new_index - arr.length + 1;
@@ -207131,7 +207206,7 @@ ${seqDataToCopy}\r
   }
 
   const userDefinedHandlersAndOpts = [
-    "onChangeEditLock",
+    "beforeReadOnlyChange",
     "defaultLinkedOligoMessage",
     "allowMultipleFeatureDirections",
     "getAdditionalEditAnnotationComps",
@@ -207394,49 +207469,6 @@ ${seqDataToCopy}\r
     }
   );
 
-  const editTool = connectToEditor((editorState) => {
-    return {
-      readOnly: editorState.readOnly
-    };
-  })(
-    ({
-      toolbarItemProps,
-      readOnly,
-      toggleReadOnlyMode,
-      disableSetReadOnly,
-      onChangeEditLock
-    }) => {
-      const [isLoading, setIsLoading] = reactExports.useState(false);
-      const readOnlyTooltip = ({ readOnly: readOnly2, disableSetReadOnly: disableSetReadOnly2 }) => {
-        if (isLoading) {
-          return "Loading...";
-        } else if (disableSetReadOnly2) {
-          return "You do not have permission to edit locks on this sequence";
-        }
-        return readOnly2 ? "Click to enable editing" : "Click to disable editing";
-      };
-      return /* @__PURE__ */ React$3.createElement(
-        ToolbarItem$1,
-        {
-          ...{
-            disabled: isLoading || disableSetReadOnly,
-            Icon: /* @__PURE__ */ React$3.createElement(Icon, { icon: readOnly ? "lock" : "unlock" }),
-            onIconClick: async () => {
-              if (onChangeEditLock) {
-                setIsLoading(true);
-                await onChangeEditLock(!readOnly);
-                setIsLoading(false);
-              }
-              toggleReadOnlyMode();
-            },
-            tooltip: readOnlyTooltip({ readOnly, disableSetReadOnly }),
-            ...toolbarItemProps
-          }
-        }
-      );
-    }
-  );
-
   const style$4 = '';
 
   const opts = [
@@ -208057,31 +208089,22 @@ ${seqDataToCopy}\r
 
   const EditReadOnlyItem = connectToEditor(({ readOnly }) => ({
     readOnly
-  }))(
-    ({
-      onSave,
-      readOnly,
-      showReadOnly,
-      disableSetReadOnly,
-      updateReadOnlyMode
-    }) => {
-      return showReadOnly ? /* @__PURE__ */ React$3.createElement(StatusBarItem, { dataTest: "veStatusBar-readOnly" }, onSave ? /* @__PURE__ */ React$3.createElement(
-        HTMLSelect,
-        {
-          options: [
-            { label: "Read Only", value: "readOnly" },
-            { label: "Editable", value: "editable" }
-          ],
-          disabled: disableSetReadOnly || !onSave,
-          className: MINIMAL,
-          value: readOnly ? "readOnly" : "editable",
-          onChange: ({ target: { value } }) => {
-            updateReadOnlyMode(value === "readOnly");
-          }
-        }
-      ) : readOnly ? "Read Only" : "Editable") : null;
-    }
-  );
+  }))((props) => {
+    const { onSave, readOnly, showReadOnly, disableSetReadOnly } = props;
+    return showReadOnly ? /* @__PURE__ */ React$3.createElement(StatusBarItem, { dataTest: "veStatusBar-readOnly" }, onSave ? /* @__PURE__ */ React$3.createElement(
+      HTMLSelect,
+      {
+        options: [
+          { label: "Read Only", value: "readOnly" },
+          { label: "Editable", value: "editable" }
+        ],
+        disabled: disableSetReadOnly || !onSave,
+        className: MINIMAL,
+        value: readOnly ? "readOnly" : "editable",
+        onChange: ({ target: { value } }) => handleReadOnlyChange(value === "readOnly", props)
+      }
+    ) : readOnly ? "Read Only" : "Editable") : null;
+  });
   const ShowSelectionItem = compose(
     connectToEditor(
       ({ selectionLayer, caretPosition, sequenceData = { sequence: "" } }, ownProps, ...rest) => {
@@ -208228,11 +208251,13 @@ ${seqDataToCopy}\r
     showGCContentByDefault,
     onSelectionOrCaretChanged,
     GCDecimalDigits = 1,
-    isProtein
+    isProtein,
+    beforeReadOnlyChange
   }) {
     return /* @__PURE__ */ React$3.createElement("div", { className: "veStatusBar" }, showMoleculeType && /* @__PURE__ */ React$3.createElement(ShowTypeItem, { editorName }), /* @__PURE__ */ React$3.createElement(
       EditReadOnlyItem,
       {
+        beforeReadOnlyChange,
         editorName,
         onSave,
         disableSetReadOnly,
@@ -208671,7 +208696,6 @@ ${seqDataToCopy}\r
         disableSetReadOnly,
         updateAvailability,
         sequenceData,
-        updateReadOnlyMode,
         onSave,
         showAvailability,
         sequenceNameUpdate
@@ -208726,10 +208750,9 @@ ${seqDataToCopy}\r
       ))), /* @__PURE__ */ React$3.createElement("div", { className: "ve-flex-row" }, /* @__PURE__ */ React$3.createElement("div", { className: "ve-column-left bp3-label" }, "Length"), " ", /* @__PURE__ */ React$3.createElement("div", { className: "ve-column-right" }, " ", isProtein ? proteinSequence.length : sequence.length)), showReadOnly && /* @__PURE__ */ React$3.createElement("div", { className: "ve-flex-row" }, /* @__PURE__ */ React$3.createElement("div", { className: "ve-column-left bp3-label" }, "Is Editable"), " ", /* @__PURE__ */ React$3.createElement("div", { className: "ve-column-right" }, " ", /* @__PURE__ */ React$3.createElement(
         BPSelect,
         {
+          className: "veReadOnlySelect",
           disabled: !onSave || disableSetReadOnly,
-          onChange: (val) => {
-            updateReadOnlyMode(val === "readOnly");
-          },
+          onChange: (val) => console.log(`val:`, val) || handleReadOnlyChange(val === "readOnly", this.props),
           value: readOnly ? "readOnly" : "editable",
           options: [
             { label: "Read Only", value: "readOnly" },
@@ -218802,7 +218825,7 @@ ${seqDataToCopy}\r
             contentLeft: this.props.contentLeft,
             editorName,
             withDigestTool: true,
-            onChangeEditLock: this.props.onChangeEditLock,
+            beforeReadOnlyChange: this.props.beforeReadOnlyChange,
             ...ToolBarProps
           }
         ),