@elliemae/ds-wysiwygeditor 2.0.0-alpha.1 → 2.0.0-alpha.13

package/cjs/DSWYSIWYGEditor.js

@@ -4,6 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
 var reactDesc = require('react-desc');
 var DSWYSIWYGEditorImpl = require('./components/DSWYSIWYGEditorImpl.js');
@@ -18,7 +24,7 @@ const _excluded = ["value", "onChange", "getQuillRef", "quillModules", "customTo
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 const DSWYSIWYGEditor = _ref => {
   let {
@@ -32,7 +38,7 @@ const DSWYSIWYGEditor = _ref => {
     height,
     hideItems
   } = _ref,
-      rest = _objectWithoutProperties__default['default'](_ref, _excluded);
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
 
   const emptyAction = () => {};
 
@@ -58,11 +64,7 @@ const DSWYSIWYGEditor = _ref => {
 
 const wysiwygEditorProps = {
   value: reactDesc.PropTypes.string.description('editors value').isRequired,
-  onChange: reactDesc.PropTypes.func.description(`(content, delta, source, editor) : Called back with the new contents of the editor after change. 
-    It will be passed the HTML contents of the editor, a delta object expressing the change, the source of the change, and finally a read-only proxy to editor accessors such as getHTML(). 
-    ⚠️ Do not use this delta object as value, as it will cause a loop. 
-    Use editor.getContents() instead. See Using Deltas for details. 
-    Read more: https://github.com/zenoamaro/react-quill#props`).isRequired,
+  onChange: reactDesc.PropTypes.func.description("(content, delta, source, editor) : Called back with the new contents of the editor after change. \n    It will be passed the HTML contents of the editor, a delta object expressing the change, the source of the change, and finally a read-only proxy to editor accessors such as getHTML(). \n    \u26A0\uFE0F Do not use this delta object as value, as it will cause a loop. \n    Use editor.getContents() instead. See Using Deltas for details. \n    Read more: https://github.com/zenoamaro/react-quill#props").isRequired,
   getQuillRef: reactDesc.PropTypes.func.description('function to use quill.js ref'),
   quillModules: reactDesc.PropTypes.object.description('object to override quill modules'),
   customToolbar: reactDesc.PropTypes.element.description('custom toolbar'),
@@ -70,10 +72,11 @@ const wysiwygEditorProps = {
   showRawHTML: reactDesc.PropTypes.bool.description('whether to display html view or not').defaultValue(false),
   height: reactDesc.PropTypes.string.description('heigth of the editors text area'),
   readOnly: reactDesc.PropTypes.string.description("If true, the editor won't allow changing its contents. Wraps the Quill disable API."),
-  hideItems: reactDesc.PropTypes.object.description('object of defaultItems to be removed from toolbar').defaultValue({})
+  hideItems: reactDesc.PropTypes.object.description('object of defaultItems to be removed from toolbar').defaultValue({}),
+  zIndex: reactDesc.PropTypes.number.description('zIndex to be used (required when used in a modal for correct tooltips displaying)')
 };
 const WYSIWYWithSchema = reactDesc.describe(DSWYSIWYGEditor);
 WYSIWYWithSchema.propTypes = wysiwygEditorProps;
 
 exports.WYSIWYWithSchema = WYSIWYWithSchema;
-exports['default'] = DSWYSIWYGEditor;
+exports["default"] = DSWYSIWYGEditor;

package/cjs/components/CustomImageUploader.js

@@ -3,17 +3,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
-var Image = require('@elliemae/ds-icons/Image');
+var dsIcons = require('@elliemae/ds-icons');
 var DSUploader = require('@elliemae/ds-uploader');
 var DSModal = require('@elliemae/ds-modal');
-var CustomToolbar = require('./CustomToolbar.js');
+var TippedButton = require('./TippedButton.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image);
 var DSUploader__default = /*#__PURE__*/_interopDefaultLegacy(DSUploader);
 var DSModal__default = /*#__PURE__*/_interopDefaultLegacy(DSModal);
 
@@ -21,12 +21,14 @@ const ALLOWED_TYPES_TEXT = 'JPG, JPEG, PNG, GIF, BMP, TIFF';
 const ALLOWED_TYPES = /image\/(jpeg|jpg|png|gif|bmp|tiff)/;
 const DEFAULT_MAX_SIZE = 1024 * 1024; // 1 MB
 
-const CustomImageUploader = ({
-  quillRef,
-  editorFieldName,
-  allowedImageTypes = ALLOWED_TYPES_TEXT,
-  uploadAsset = () => null
-}) => {
+const CustomImageUploader = _ref => {
+  let {
+    quillRef,
+    editorFieldName,
+    allowedImageTypes = ALLOWED_TYPES_TEXT,
+    uploadAsset = () => null,
+    zIndex = 1
+  } = _ref;
   const [isOpen, setIsOpen] = React.useState(false);
   const [error, setError] = React.useState(null);
   const [inProgress, setInProgress] = React.useState(false);
@@ -34,7 +36,7 @@ const CustomImageUploader = ({
     index: 0,
     length: 0
   });
-  const elementId = `uploadImage${editorFieldName}`; // eslint-disable-next-line consistent-return
+  const elementId = "uploadImage".concat(editorFieldName); // eslint-disable-next-line consistent-return
 
   const handleFileChange = async files => {
     if (!inProgress) {
@@ -79,16 +81,17 @@ const CustomImageUploader = ({
   };
 
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/_jsx__default['default'](CustomToolbar.TippedButton, {
+    children: [/*#__PURE__*/_jsx__default["default"](TippedButton.TippedButton, {
+      zIndex: zIndex,
       tip: "Insert Image",
       onClick: () => {
         setLastSelection(quillRef === null || quillRef === void 0 ? void 0 : quillRef.getEditor().getSelection());
         setIsOpen(true);
       }
-    }, void 0, /*#__PURE__*/_jsx__default['default'](Image__default['default'], {
+    }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.Image, {
       color: ['neutral', 500],
       size: "s"
-    })), /*#__PURE__*/_jsx__default['default'](DSModal__default['default'], {
+    })), /*#__PURE__*/_jsx__default["default"](DSModal__default["default"], {
       isOpen: isOpen,
       title: "",
       onConfirm: () => {
@@ -103,14 +106,14 @@ const CustomImageUploader = ({
       modalType: DSModal.MODAL_TYPE_V2.DECISION,
       confirmLabel: "Cancel",
       message: ""
-    }, void 0, !inProgress && /*#__PURE__*/_jsx__default['default'](DSUploader__default['default'], {
+    }, void 0, !inProgress && /*#__PURE__*/_jsx__default["default"](DSUploader__default["default"], {
       containerProps: {
         id: elementId
       },
       showAltAction: false,
       acceptedTypesText: allowedImageTypes,
       onDrop: handleFileChange
-    }), inProgress && 'Upload in progress...', error && /*#__PURE__*/_jsx__default['default']("div", {
+    }), inProgress && 'Upload in progress...', error && /*#__PURE__*/_jsx__default["default"]("div", {
       style: {
         color: 'red',
         marginTop: '10px'

package/cjs/components/CustomToolbar.js

@@ -2,141 +2,91 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 require('core-js/modules/es.string.replace.js');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
-var DSButton = require('@elliemae/ds-basic/Button');
-var ArrowheadDown = require('@elliemae/ds-icons/ArrowheadDown');
+var DSButton = require('@elliemae/ds-button');
+var dsIcons = require('@elliemae/ds-icons');
 var DSDropdownMenu = require('@elliemae/ds-dropdownmenu');
-var DSTooltip = require('@elliemae/ds-basic/Tooltip');
 var constants = require('../constants.js');
+var TippedButton = require('./TippedButton.js');
+var TippedSelect = require('./TippedSelect.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
-var ArrowheadDown__default = /*#__PURE__*/_interopDefaultLegacy(ArrowheadDown);
 var DSDropdownMenu__default = /*#__PURE__*/_interopDefaultLegacy(DSDropdownMenu);
-var DSTooltip__default = /*#__PURE__*/_interopDefaultLegacy(DSTooltip);
 
-const _excluded = ["className", "tip", "children", "onClick"];
-
-var _span, _ArrowheadDown, _Divider, _Divider2, _Divider3, _TippedButton, _TippedButton2, _TippedButton3, _TippedButton4, _TippedButton5, _TippedButton6, _Divider4, _TippedButton7, _TippedButton8, _TippedButton9, _TippedButton10, _span2, _Colors, _Colors2, _Divider5, _TippedButton11, _TippedButton12, _Divider6, _span3, _Divider7, _span4, _Divider8;
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-const persist = e => e.persist();
+var _span, _ArrowheadDown, _Divider, _Divider2, _Divider3, _Divider4, _Divider5, _Divider6, _Divider7, _Divider8, _Divider9, _CustomFields, _Divider10;
 
 const optionsToValues = options => options.map(opt => opt.toLowerCase().replace(' ', '-')); // Stateless Components -----------------------------------------
 
 
-const CustomFields = () => _span || (_span = /*#__PURE__*/_jsx__default['default']("span", {}, void 0, "\u1438\u1433")); // eslint-disable-line react/jsx-one-expression-per-line
+const CustomFields = () => _span || (_span = /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, "\u1438\u1433")); // eslint-disable-line react/jsx-one-expression-per-line
 
 
-const Color = ({
-  color
-}) => /*#__PURE__*/_jsx__default['default']("option", {
-  value: color
-});
-
-const Colors = ({
-  className,
-  tip
-}) => /*#__PURE__*/_jsx__default['default'](TippedSelect, {
-  className: className,
-  tip: tip
-}, void 0, constants.colors.map(color => /*#__PURE__*/_jsx__default['default'](Color, {
-  color: color
-}, color)));
+const Color = _ref => {
+  let {
+    color
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"]("option", {
+    value: color
+  });
+};
 
-const TippedButton = _ref => {
+const Colors = _ref2 => {
   let {
     className,
     tip,
-    children,
-    onClick = () => null
-  } = _ref,
-      rest = _objectWithoutProperties__default['default'](_ref, _excluded);
+    zIndex
+  } = _ref2;
+  return /*#__PURE__*/_jsx__default["default"](TippedSelect.TippedSelect, {
+    className: className,
+    tip: tip,
+    zIndex: zIndex
+  }, void 0, constants.colors.map(color => /*#__PURE__*/_jsx__default["default"](Color, {
+    color: color
+  }, color)));
+};
 
-  return /*#__PURE__*/_jsx__default['default']("div", {
-    className: "tooltip"
-  }, void 0, /*#__PURE__*/_jsx__default['default'](DSTooltip__default['default'], {
-    interactionType: "hover",
-    title: tip,
-    delayClose: 20,
-    triggerComponent: /*#__PURE__*/jsxRuntime.jsx("button", _objectSpread(_objectSpread({
-      className: className,
-      onClick: e => {
-        e.preventDefault();
-        onClick(e);
-      }
-    }, rest), {}, {
-      children: children
-    }))
-  }));
+const CustomDropdown = _ref3 => {
+  let {
+    options,
+    label,
+    onSelectMenuItem = () => null,
+    onClickOutsideMenu = () => null,
+    onClose = () => null,
+    closeMenuOnItemSelection,
+    isOpen,
+    minWidth,
+    maxWidth,
+    zIndex = 10
+  } = _ref3;
+  return /*#__PURE__*/_jsx__default["default"](DSDropdownMenu__default["default"], {
+    onClickOutsideMenu: onClickOutsideMenu,
+    options: options,
+    onSelectMenuItem: onSelectMenuItem,
+    onClose: onClose,
+    closeMenuOnItemSelection: closeMenuOnItemSelection,
+    isOpen: isOpen,
+    minWidth: minWidth,
+    maxWidth: maxWidth,
+    zIndex: zIndex,
+    preventOverflow: "scrollParent",
+    triggerComponent: /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      labelText: label,
+      buttonType: "text",
+      icon: _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadDown, {}))
+    })
+  });
 };
-const TippedSelect = ({
-  className,
-  options,
-  tip,
-  defaultValue = '',
-  onChange = () => null,
-  values,
-  children = values && values.map((value, index) => /*#__PURE__*/_jsx__default['default']("option", {
-    value: value === 'normal' ? '' : value
-  }, value, options ? options[index] : null))
-}) => /*#__PURE__*/_jsx__default['default']("div", {
-  className: "tooltip"
-}, void 0, /*#__PURE__*/_jsx__default['default'](DSTooltip__default['default'], {
-  interactionType: "hover",
-  title: tip,
-  delayClose: 20,
-  triggerComponent: /*#__PURE__*/_jsx__default['default']("div", {}, void 0, /*#__PURE__*/_jsx__default['default']("select", {
-    className: className,
-    defaultValue: defaultValue,
-    onChange: e => {
-      persist(e);
-      onChange(e);
-    }
-  }, void 0, children))
-}));
-const CustomDropdown = ({
-  options,
-  label,
-  onSelectMenuItem = () => null,
-  onClickOutsideMenu = () => null,
-  onClose = () => null,
-  closeMenuOnItemSelection,
-  isOpen,
-  minWidth,
-  maxWidth,
-  zIndex = 10
-}) => /*#__PURE__*/_jsx__default['default'](DSDropdownMenu__default['default'], {
-  onClickOutsideMenu: onClickOutsideMenu,
-  options: options,
-  onSelectMenuItem: onSelectMenuItem,
-  onClose: onClose,
-  closeMenuOnItemSelection: closeMenuOnItemSelection,
-  isOpen: isOpen,
-  minWidth: minWidth,
-  maxWidth: maxWidth,
-  zIndex: zIndex,
-  preventOverflow: "scrollParent",
-  triggerComponent: /*#__PURE__*/_jsx__default['default'](DSButton__default['default'], {
-    labelText: label,
-    buttonType: "text",
-    icon: _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx__default['default'](ArrowheadDown__default['default'], {}))
-  })
-});
 
-const Divider = () => /*#__PURE__*/_jsx__default['default']("div", {
+const Divider = () => /*#__PURE__*/_jsx__default["default"]("div", {
   style: {
     height: '21px',
     width: '1px',
@@ -147,13 +97,15 @@ const Divider = () => /*#__PURE__*/_jsx__default['default']("div", {
   }
 });
 
-const CustomToolbar = ({
-  customFields,
-  customItems = [],
-  hideItems = {},
-  onShowHTML = () => {},
-  id = 'toolbar'
-}) => {
+const CustomToolbar = _ref4 => {
+  let {
+    customFields,
+    customItems = [],
+    hideItems = {},
+    onShowHTML = () => {},
+    id = 'toolbar',
+    userProps
+  } = _ref4;
   const {
     HEADER,
     FONT,
@@ -184,105 +136,125 @@ const CustomToolbar = ({
     onShowHTML();
   };
 
-  return /*#__PURE__*/_jsx__default['default']("div", {
+  return /*#__PURE__*/_jsx__default["default"]("div", {
     id: id,
     className: "ds-ql-custom-toolbar"
-  }, void 0, (!HEADER || !FONT || !FONT_SIZE) && /*#__PURE__*/_jsx__default['default']("span", {
+  }, void 0, (!HEADER || !FONT || !FONT_SIZE) && /*#__PURE__*/_jsx__default["default"]("span", {
     className: "ql-formats"
   }, void 0, !HEADER && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/_jsx__default['default'](TippedSelect, {
+    children: [/*#__PURE__*/_jsx__default["default"](TippedSelect.TippedSelect, {
       className: "ql-header",
       tip: "Header",
-      values: ['', '1', '2', '3', '4', '5', '6']
-    }), _Divider || (_Divider = /*#__PURE__*/_jsx__default['default'](Divider, {}))]
+      values: ['', '1', '2', '3', '4', '5', '6'],
+      zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1
+    }), _Divider || (_Divider = /*#__PURE__*/_jsx__default["default"](Divider, {}))]
   }), !FONT && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/_jsx__default['default'](TippedSelect, {
+    children: [/*#__PURE__*/_jsx__default["default"](TippedSelect.TippedSelect, {
       className: "ql-font",
       defaultValue: "sans-serif",
       options: constants.fonts,
       tip: "Font",
-      values: optionsToValues(constants.fonts)
-    }), _Divider2 || (_Divider2 = /*#__PURE__*/_jsx__default['default'](Divider, {}))]
+      values: optionsToValues(constants.fonts),
+      zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1
+    }), _Divider2 || (_Divider2 = /*#__PURE__*/_jsx__default["default"](Divider, {}))]
   }), !FONT_SIZE && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/_jsx__default['default'](TippedSelect, {
+    children: [/*#__PURE__*/_jsx__default["default"](TippedSelect.TippedSelect, {
       className: "ql-size",
       options: constants.sizes,
       tip: "Font Size",
-      values: optionsToValues(constants.sizesReal)
-    }), _Divider3 || (_Divider3 = /*#__PURE__*/_jsx__default['default'](Divider, {}))]
-  })), (!BOLD || !ITALIC || !UNDERLINE || !STRIKE) && /*#__PURE__*/_jsx__default['default']("span", {
+      values: optionsToValues(constants.sizesReal),
+      zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1
+    }), _Divider3 || (_Divider3 = /*#__PURE__*/_jsx__default["default"](Divider, {}))]
+  })), (!BOLD || !ITALIC || !UNDERLINE || !STRIKE) && /*#__PURE__*/_jsx__default["default"]("span", {
     className: "ql-formats"
-  }, void 0, !BOLD && (_TippedButton || (_TippedButton = /*#__PURE__*/_jsx__default['default'](TippedButton, {
+  }, void 0, !BOLD && /*#__PURE__*/_jsx__default["default"](TippedButton.TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-bold",
     tip: "Bold"
-  }))), !ITALIC && (_TippedButton2 || (_TippedButton2 = /*#__PURE__*/_jsx__default['default'](TippedButton, {
+  }), !ITALIC && /*#__PURE__*/_jsx__default["default"](TippedButton.TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-italic",
     tip: "Italic"
-  }))), !UNDERLINE && (_TippedButton3 || (_TippedButton3 = /*#__PURE__*/_jsx__default['default'](TippedButton, {
+  }), !UNDERLINE && /*#__PURE__*/_jsx__default["default"](TippedButton.TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-underline",
     tip: "Underline"
-  }))), !STRIKE && (_TippedButton4 || (_TippedButton4 = /*#__PURE__*/_jsx__default['default'](TippedButton, {
+  }), !STRIKE && /*#__PURE__*/_jsx__default["default"](TippedButton.TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-strike",
     tip: "Strike"
-  })))), (!SUB || !SUPER) && /*#__PURE__*/_jsx__default['default']("span", {
+  })), (!SUB || !SUPER) && /*#__PURE__*/_jsx__default["default"]("span", {
     className: "ql-formats"
-  }, void 0, !SUB && (_TippedButton5 || (_TippedButton5 = /*#__PURE__*/_jsx__default['default'](TippedButton, {
+  }, void 0, !SUB && /*#__PURE__*/_jsx__default["default"](TippedButton.TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-script",
     tip: "Sub",
     value: "sub"
-  }))), !SUPER && (_TippedButton6 || (_TippedButton6 = /*#__PURE__*/_jsx__default['default'](TippedButton, {
+  }), !SUPER && /*#__PURE__*/_jsx__default["default"](TippedButton.TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-script",
     tip: "Super",
     value: "super"
-  }))), _Divider4 || (_Divider4 = /*#__PURE__*/_jsx__default['default'](Divider, {}))), (!ORDERED_LIST || !BULLET_LIST) && /*#__PURE__*/_jsx__default['default']("span", {
+  }), _Divider4 || (_Divider4 = /*#__PURE__*/_jsx__default["default"](Divider, {}))), (!ORDERED_LIST || !BULLET_LIST) && /*#__PURE__*/_jsx__default["default"]("span", {
     className: "ql-formats"
-  }, void 0, !ORDERED_LIST && (_TippedButton7 || (_TippedButton7 = /*#__PURE__*/_jsx__default['default'](TippedButton, {
+  }, void 0, !ORDERED_LIST && /*#__PURE__*/_jsx__default["default"](TippedButton.TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-list",
     tip: "Ordered List",
     value: "ordered"
-  }))), !BULLET_LIST && (_TippedButton8 || (_TippedButton8 = /*#__PURE__*/_jsx__default['default'](TippedButton, {
+  }), !BULLET_LIST && /*#__PURE__*/_jsx__default["default"](TippedButton.TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-list",
     tip: "Bullet List",
     value: "bullet"
-  })))), (!INDENT_MINUS_ONE || !INDENT_PLUS_ONE) && /*#__PURE__*/_jsx__default['default']("span", {
+  })), (!INDENT_MINUS_ONE || !INDENT_PLUS_ONE) && /*#__PURE__*/_jsx__default["default"]("span", {
     className: "ql-formats"
-  }, void 0, !INDENT_MINUS_ONE && (_TippedButton9 || (_TippedButton9 = /*#__PURE__*/_jsx__default['default'](TippedButton, {
+  }, void 0, !INDENT_MINUS_ONE && /*#__PURE__*/_jsx__default["default"](TippedButton.TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-indent",
     tip: "Indent -1",
     value: "-1"
-  }))), !INDENT_PLUS_ONE && (_TippedButton10 || (_TippedButton10 = /*#__PURE__*/_jsx__default['default'](TippedButton, {
+  }), !INDENT_PLUS_ONE && /*#__PURE__*/_jsx__default["default"](TippedButton.TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-indent",
     tip: "Indent +1",
     value: "+1"
-  })))), !ALIGN && (_span2 || (_span2 = /*#__PURE__*/_jsx__default['default']("span", {
+  })), !ALIGN && /*#__PURE__*/_jsx__default["default"]("span", {
     className: "ql-formats"
-  }, void 0, /*#__PURE__*/_jsx__default['default'](TippedSelect, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](TippedSelect.TippedSelect, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-align",
     tip: "Align"
-  }), /*#__PURE__*/_jsx__default['default'](Divider, {})))), (!FONT_COLOR || !FONT_BACKGROUND_COLOR) && /*#__PURE__*/_jsx__default['default']("span", {
+  }), _Divider5 || (_Divider5 = /*#__PURE__*/_jsx__default["default"](Divider, {}))), (!FONT_COLOR || !FONT_BACKGROUND_COLOR) && /*#__PURE__*/_jsx__default["default"]("span", {
     className: "ql-formats"
-  }, void 0, !FONT_COLOR && (_Colors || (_Colors = /*#__PURE__*/_jsx__default['default'](Colors, {
+  }, void 0, !FONT_COLOR && /*#__PURE__*/_jsx__default["default"](Colors, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-color",
     tip: "Font Color"
-  }))), !FONT_BACKGROUND_COLOR && (_Colors2 || (_Colors2 = /*#__PURE__*/_jsx__default['default'](Colors, {
+  }), !FONT_BACKGROUND_COLOR && /*#__PURE__*/_jsx__default["default"](Colors, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-background",
     tip: "Font Background Color"
-  }))), _Divider5 || (_Divider5 = /*#__PURE__*/_jsx__default['default'](Divider, {}))), (!HYPERLINK || !IMAGE) && /*#__PURE__*/_jsx__default['default']("span", {
+  }), _Divider6 || (_Divider6 = /*#__PURE__*/_jsx__default["default"](Divider, {}))), (!HYPERLINK || !IMAGE) && /*#__PURE__*/_jsx__default["default"]("span", {
     className: "ql-formats"
-  }, void 0, !HYPERLINK && (_TippedButton11 || (_TippedButton11 = /*#__PURE__*/_jsx__default['default'](TippedButton, {
+  }, void 0, !HYPERLINK && /*#__PURE__*/_jsx__default["default"](TippedButton.TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-link",
     tip: "Hyperlink: Select Text First"
-  }))), !IMAGE && (_TippedButton12 || (_TippedButton12 = /*#__PURE__*/_jsx__default['default'](TippedButton, {
+  }), !IMAGE && /*#__PURE__*/_jsx__default["default"](TippedButton.TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-image",
     tip: "Insert Image"
-  }))), _Divider6 || (_Divider6 = /*#__PURE__*/_jsx__default['default'](Divider, {}))), !CLEAR_FORMAT && (_span3 || (_span3 = /*#__PURE__*/_jsx__default['default']("span", {
+  }), _Divider7 || (_Divider7 = /*#__PURE__*/_jsx__default["default"](Divider, {}))), !CLEAR_FORMAT && /*#__PURE__*/_jsx__default["default"]("span", {
     className: "ql-formats"
-  }, void 0, /*#__PURE__*/_jsx__default['default'](TippedButton, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](TippedButton.TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-clean",
     tip: "Clear Format (Select Text)"
-  })))), !SHOW_HTML && /*#__PURE__*/_jsx__default['default']("span", {
+  })), !SHOW_HTML && /*#__PURE__*/_jsx__default["default"]("span", {
     className: "ql-formats"
-  }, void 0, _Divider7 || (_Divider7 = /*#__PURE__*/_jsx__default['default'](Divider, {})), /*#__PURE__*/_jsx__default['default'](TippedButton, {
+  }, void 0, _Divider8 || (_Divider8 = /*#__PURE__*/_jsx__default["default"](Divider, {})), /*#__PURE__*/_jsx__default["default"](TippedButton.TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     style: {
       width: 'fit-content',
       color: '#1e79c2',
@@ -291,21 +263,20 @@ const CustomToolbar = ({
     onClick: handleShowHTML,
     tip: showHTML ? 'SHOW TEXT' : 'SHOW HTML',
     className: "ql-customFields-html"
-  }, void 0, showHTML ? 'SHOW TEXT' : 'SHOW HTML')), customFields && (_span4 || (_span4 = /*#__PURE__*/_jsx__default['default']("span", {
+  }, void 0, showHTML ? 'SHOW TEXT' : 'SHOW HTML')), customFields && /*#__PURE__*/_jsx__default["default"]("span", {
     className: "ql-formats"
-  }, void 0, /*#__PURE__*/_jsx__default['default'](Divider, {}), /*#__PURE__*/_jsx__default['default'](TippedButton, {
+  }, void 0, _Divider9 || (_Divider9 = /*#__PURE__*/_jsx__default["default"](Divider, {})), /*#__PURE__*/_jsx__default["default"](TippedButton.TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
     className: "ql-customFields",
     tip: "Insert Custom Field"
-  }, void 0, /*#__PURE__*/_jsx__default['default'](CustomFields, {}))))), customItems && /*#__PURE__*/_jsx__default['default']("span", {
+  }, void 0, _CustomFields || (_CustomFields = /*#__PURE__*/_jsx__default["default"](CustomFields, {})))), customItems && /*#__PURE__*/_jsx__default["default"]("span", {
     style: {
       display: 'inline-flex'
     }
   }, void 0, customItems.map(Item => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [_Divider8 || (_Divider8 = /*#__PURE__*/_jsx__default['default'](Divider, {})), /*#__PURE__*/_jsx__default['default'](Item, {})]
+    children: [_Divider10 || (_Divider10 = /*#__PURE__*/_jsx__default["default"](Divider, {})), /*#__PURE__*/_jsx__default["default"](Item, {})]
   }))));
 };
 
 exports.CustomDropdown = CustomDropdown;
 exports.CustomToolbar = CustomToolbar;
-exports.TippedButton = TippedButton;
-exports.TippedSelect = TippedSelect;