@elliemae/ds-wysiwygeditor 2.3.0-alpha.9 → 2.3.0-next.3

package/cjs/DSWYSIWYGEditor.js

@@ -0,0 +1,82 @@
+'use strict';
+
+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');
+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);
+
+const _excluded = ["value", "onChange", "getQuillRef", "quillModules", "customToolbar", "toolbarHandlers", "showRawHTML", "height", "hideItems"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const DSWYSIWYGEditor = _ref => {
+  let {
+    value = '',
+    onChange = () => null,
+    getQuillRef = () => null,
+    quillModules = {},
+    customToolbar,
+    toolbarHandlers,
+    showRawHTML = false,
+    height,
+    hideItems
+  } = _ref,
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const emptyAction = () => {};
+
+  const [showHTML, setShowHTML] = React.useState(showRawHTML);
+  React.useEffect(() => setShowHTML(showRawHTML), [showRawHTML]);
+  return /*#__PURE__*/jsxRuntime.jsx(DSWYSIWYGEditorImpl, _objectSpread({
+    forceHttpLink: true,
+    handleCustomFieldClick: emptyAction,
+    handleImageClick: emptyAction,
+    quillOverrides: [],
+    value: value,
+    onChange: onChange,
+    getQuillRef: getQuillRef,
+    quillModules: quillModules,
+    customToolbar: customToolbar,
+    toolbarHandlers: toolbarHandlers,
+    showRawHTML: showHTML,
+    onShowHTML: () => setShowHTML(!showHTML),
+    height: height,
+    hideItems: hideItems
+  }, rest));
+};
+
+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. \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'),
+  toolbarHandlers: reactDesc.PropTypes.object.description('object with toolbar handlers'),
+  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({}),
+  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;

package/cjs/components/CustomImageUploader.js

@@ -0,0 +1,125 @@
+'use strict';
+
+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 dsIcons = require('@elliemae/ds-icons');
+var DSUploader = require('@elliemae/ds-uploader');
+var DSModal = require('@elliemae/ds-modal');
+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 DSUploader__default = /*#__PURE__*/_interopDefaultLegacy(DSUploader);
+var DSModal__default = /*#__PURE__*/_interopDefaultLegacy(DSModal);
+
+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 = _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);
+  const [lastSelection, setLastSelection] = React.useState({
+    index: 0,
+    length: 0
+  });
+  const elementId = "uploadImage".concat(editorFieldName); // eslint-disable-next-line consistent-return
+
+  const handleFileChange = async files => {
+    if (!inProgress) {
+      setError(null);
+      const selectedFile = files[0];
+
+      if (!selectedFile) {
+        setError('Please select a file.');
+        return false;
+      }
+
+      if (!selectedFile.type.match(ALLOWED_TYPES)) {
+        setError('File must be an image.');
+      } else if (selectedFile.size > DEFAULT_MAX_SIZE) {
+        setError('File is too large.');
+      } else {
+        const fr = new FileReader();
+
+        fr.onload = async () => {
+          setInProgress(true);
+
+          try {
+            const url = await uploadAsset({
+              name: selectedFile.name,
+              type: selectedFile.type,
+              description: selectedFile.name,
+              isSystemAsset: false,
+              file: fr.result
+            });
+            setIsOpen(false);
+            quillRef === null || quillRef === void 0 ? void 0 : quillRef.getEditor().insertEmbed((lastSelection === null || lastSelection === void 0 ? void 0 : lastSelection.index) || 0, 'image', url);
+          } catch (e) {
+            setError('An error has occurred, try again');
+          }
+
+          setInProgress(false);
+        };
+
+        fr.readAsArrayBuffer(selectedFile);
+      }
+    }
+  };
+
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    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"](dsIcons.Image, {
+      color: ['neutral', 500],
+      size: "s"
+    })), /*#__PURE__*/_jsx__default["default"](DSModal__default["default"], {
+      isOpen: isOpen,
+      title: "",
+      onConfirm: () => {
+        setIsOpen(false);
+      },
+      onClose: () => {
+        setIsOpen(false);
+      },
+      showClose: true,
+      version: 2,
+      size: "xsmall",
+      modalType: DSModal.MODAL_TYPE_V2.DECISION,
+      confirmLabel: "Cancel",
+      message: ""
+    }, 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", {
+      style: {
+        color: 'red',
+        marginTop: '10px'
+      }
+    }, void 0, error))]
+  });
+};
+
+exports.CustomImageUploader = CustomImageUploader;

package/cjs/components/CustomToolbar.js

@@ -0,0 +1,282 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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-button');
+var dsIcons = require('@elliemae/ds-icons');
+var DSDropdownMenu = require('@elliemae/ds-dropdownmenu');
+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 _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+var DSDropdownMenu__default = /*#__PURE__*/_interopDefaultLegacy(DSDropdownMenu);
+
+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 Color = _ref => {
+  let {
+    color
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"]("option", {
+    value: color
+  });
+};
+
+const Colors = _ref2 => {
+  let {
+    className,
+    tip,
+    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)));
+};
+
+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 Divider = () => /*#__PURE__*/_jsx__default["default"]("div", {
+  style: {
+    height: '21px',
+    width: '1px',
+    margin: '0 10px',
+    padding: '0',
+    borderLeft: '1px solid #bbb',
+    display: 'inline-block'
+  }
+});
+
+const CustomToolbar = _ref4 => {
+  let {
+    customFields,
+    customItems = [],
+    hideItems = {},
+    onShowHTML = () => {},
+    id = 'toolbar',
+    userProps
+  } = _ref4;
+  const {
+    HEADER,
+    FONT,
+    FONT_SIZE,
+    BOLD,
+    ITALIC,
+    UNDERLINE,
+    STRIKE,
+    SUB,
+    SUPER,
+    ORDERED_LIST,
+    BULLET_LIST,
+    INDENT_MINUS_ONE,
+    INDENT_PLUS_ONE,
+    ALIGN,
+    FONT_COLOR,
+    FONT_BACKGROUND_COLOR,
+    HYPERLINK,
+    IMAGE,
+    CLEAR_FORMAT,
+    SHOW_HTML
+  } = hideItems;
+  const [showHTML, setShowHTML] = React.useState(false);
+
+  const handleShowHTML = e => {
+    e.preventDefault();
+    setShowHTML(!showHTML);
+    onShowHTML();
+  };
+
+  return /*#__PURE__*/_jsx__default["default"]("div", {
+    id: id,
+    className: "ds-ql-custom-toolbar"
+  }, 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.TippedSelect, {
+      className: "ql-header",
+      tip: "Header",
+      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.TippedSelect, {
+      className: "ql-font",
+      defaultValue: "sans-serif",
+      options: constants.fonts,
+      tip: "Font",
+      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.TippedSelect, {
+      className: "ql-size",
+      options: constants.sizes,
+      tip: "Font Size",
+      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 && /*#__PURE__*/_jsx__default["default"](TippedButton.TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
+    className: "ql-bold",
+    tip: "Bold"
+  }), !ITALIC && /*#__PURE__*/_jsx__default["default"](TippedButton.TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
+    className: "ql-italic",
+    tip: "Italic"
+  }), !UNDERLINE && /*#__PURE__*/_jsx__default["default"](TippedButton.TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
+    className: "ql-underline",
+    tip: "Underline"
+  }), !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", {
+    className: "ql-formats"
+  }, 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 && /*#__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", {
+    className: "ql-formats"
+  }, 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 && /*#__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", {
+    className: "ql-formats"
+  }, 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 && /*#__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 && /*#__PURE__*/_jsx__default["default"]("span", {
+    className: "ql-formats"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](TippedSelect.TippedSelect, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
+    className: "ql-align",
+    tip: "Align"
+  }), _Divider5 || (_Divider5 = /*#__PURE__*/_jsx__default["default"](Divider, {}))), (!FONT_COLOR || !FONT_BACKGROUND_COLOR) && /*#__PURE__*/_jsx__default["default"]("span", {
+    className: "ql-formats"
+  }, 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 && /*#__PURE__*/_jsx__default["default"](Colors, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
+    className: "ql-background",
+    tip: "Font Background Color"
+  }), _Divider6 || (_Divider6 = /*#__PURE__*/_jsx__default["default"](Divider, {}))), (!HYPERLINK || !IMAGE) && /*#__PURE__*/_jsx__default["default"]("span", {
+    className: "ql-formats"
+  }, 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 && /*#__PURE__*/_jsx__default["default"](TippedButton.TippedButton, {
+    zIndex: (userProps === null || userProps === void 0 ? void 0 : userProps.zIndex) || 1,
+    className: "ql-image",
+    tip: "Insert Image"
+  }), _Divider7 || (_Divider7 = /*#__PURE__*/_jsx__default["default"](Divider, {}))), !CLEAR_FORMAT && /*#__PURE__*/_jsx__default["default"]("span", {
+    className: "ql-formats"
+  }, 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", {
+    className: "ql-formats"
+  }, 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',
+      fontWeight: '500'
+    },
+    onClick: handleShowHTML,
+    tip: showHTML ? 'SHOW TEXT' : 'SHOW HTML',
+    className: "ql-customFields-html"
+  }, void 0, showHTML ? 'SHOW TEXT' : 'SHOW HTML')), customFields && /*#__PURE__*/_jsx__default["default"]("span", {
+    className: "ql-formats"
+  }, 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, _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: [_Divider10 || (_Divider10 = /*#__PURE__*/_jsx__default["default"](Divider, {})), /*#__PURE__*/_jsx__default["default"](Item, {})]
+  }))));
+};
+
+exports.CustomDropdown = CustomDropdown;
+exports.CustomToolbar = CustomToolbar;