@elliemae/ds-wysiwygeditor 2.3.0-alpha.8 → 2.3.0-next.2

package/cjs/components/DSWYSIWYGEditorImpl.js

@@ -0,0 +1,256 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.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 ReactQuill = require('react-quill');
+var BlotFormatter = require('quill-blot-formatter');
+var ImageLibraryModal = require('./ImageLibraryModal.js');
+var InsertFieldModal = require('./InsertFieldModal.js');
+var CustomToolbar = require('./CustomToolbar.js');
+var IndentStyle = require('../quillOverrides/IndentStyle.js');
+var LinkFormat = require('../quillOverrides/LinkFormat.js');
+var utils = require('../utils.js');
+var clipboardLinkWithTagMatcher = require('../quillMatchers/clipboardLinkWithTagMatcher.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 _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ReactQuill__default = /*#__PURE__*/_interopDefaultLegacy(ReactQuill);
+var BlotFormatter__default = /*#__PURE__*/_interopDefaultLegacy(BlotFormatter);
+
+const _excluded = ["containerProps", "customFields", "imagesData", "customToolbar", "handleImageClick", "handleCustomFieldClick", "height", "value", "showRawHTML", "onShowHTML", "onChange", "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; }
+ReactQuill.Quill.register('modules/blotFormatter', BlotFormatter__default["default"]); // Fix block styled formats ----------------
+
+const AlignStyle = ReactQuill.Quill.import('attributors/style/align');
+const FontStyle = ReactQuill.Quill.import('attributors/style/font');
+FontStyle.whitelist = [// allow ONLY these fonts and the default
+'serif', 'monospace', 'arial', 'comic-sans', 'courier-new', 'georgia', 'helvetica', 'lucida'];
+const SizeStyle = ReactQuill.Quill.import('attributors/style/size');
+SizeStyle.whitelist = [// allow ONLY these sizes and the default
+'x-small', 'large', 'x-large']; // Fix Doc Viewer p tags extra margin issue ---------
+
+const Block = ReactQuill.Quill.import('blots/block');
+Block.tagName = 'p';
+ReactQuill.Quill.register(Block);
+ReactQuill.Quill.register(AlignStyle, true);
+ReactQuill.Quill.register(IndentStyle, true);
+ReactQuill.Quill.register(FontStyle, true);
+ReactQuill.Quill.register(SizeStyle, true); // -----------------------------------------
+
+class DSWYSIWYGEditorImpl extends React__default["default"].PureComponent {
+  constructor(props) {
+    super(props);
+    this.quillModules = _objectSpread({
+      toolbar: {
+        container: this.props.toolbarContainer ? "#".concat(this.props.toolbarContainer) : '#toolbar',
+        handlers: _objectSpread({}, this.props.toolbarHandlers)
+      },
+      clipboard: {
+        // toggle to add extra line breaks when pasting HTML:
+        matchVisual: false
+      },
+      blotFormatter: {// options... https://github.com/Fandom-OSS/quill-blot-formatter
+      }
+    }, this.props.quillModules);
+
+    this.onChangeQuill = (html, delta, source, editor) => {
+      const {
+        showRawHTML,
+        onChange
+      } = this.props;
+      if (!showRawHTML) onChange(html, delta, source, editor);
+    };
+
+    this.onChangeTextArea = e => {
+      const {
+        showRawHTML,
+        onChange
+      } = this.props;
+      if (showRawHTML) onChange(e.target.value);
+    };
+
+    this.onInserFieldConfirm = fieldCode => {
+      const editor = this.getEditor();
+      const range = editor.getSelection(true);
+      editor.insertText(range.index, fieldCode);
+    };
+
+    this.onImageConfirm = image => {
+      if (!image) {
+        return;
+      }
+
+      const editor = this.getEditor();
+      const range = editor.getSelection(true);
+      editor.insertEmbed(range.index, 'image', image.url);
+    };
+
+    this.onFieldModalClose = () => {
+      this.setState({
+        isFieldModalOpen: false
+      });
+    };
+
+    this.onImageModalClose = () => {
+      this.setState({
+        isImageModalOpen: false
+      });
+    };
+
+    this.quillRef = ref => {
+      this.quill = ref;
+    };
+
+    ReactQuill.Quill.register(LinkFormat, true);
+
+    if (props.quillOverrides.length) {
+      props.quillOverrides.map(override => ReactQuill.Quill.register(override, true));
+    }
+
+    this.state = {
+      isImageModalOpen: false,
+      isFieldModalOpen: false
+    };
+    const {
+      toolbar
+    } = this.quillModules;
+
+    if (props.imagesData) {
+      toolbar.handlers.image = value => {
+        const {
+          imagesData,
+          handleImageClick
+        } = this.props;
+
+        if (!imagesData.length) {
+          return;
+        }
+
+        this.setState({
+          isImageModalOpen: !!value
+        });
+        handleImageClick(value);
+      };
+    }
+
+    if (props.customFields) {
+      toolbar.handlers.customFields = value => {
+        const {
+          customFields,
+          handleCustomFieldClick
+        } = this.props;
+
+        if (!customFields.length) {
+          return;
+        }
+
+        this.setState({
+          isFieldModalOpen: !!value
+        });
+        handleCustomFieldClick(value);
+      };
+    }
+  }
+
+  componentDidMount() {
+    // this.quill doesn't exist untill the full call-stack execute
+    // we need to "setTimeout" so this componentDidMount work as expected
+    setTimeout(() => {
+      const quillDomRef = this.quill;
+      const editor = quillDomRef.getEditor();
+      this.props.getQuillRef(quillDomRef); // https://github.com/quilljs/quill/issues/2677
+
+      editor.clipboard.addMatcher('a', clipboardLinkWithTagMatcher.clipboardLinkWithTagMatcher);
+    });
+  } // eslint-disable-next-line max-params
+
+
+  getEditor() {
+    return this.quill.getEditor();
+  }
+
+  render() {
+    const {
+      isFieldModalOpen,
+      isImageModalOpen
+    } = this.state;
+
+    const _this$props = this.props,
+          {
+      containerProps = {},
+      customFields,
+      imagesData,
+      customToolbar,
+      handleImageClick,
+      handleCustomFieldClick,
+      height,
+      value,
+      showRawHTML,
+      onShowHTML,
+      onChange,
+      hideItems
+    } = _this$props,
+          editorProps = _objectWithoutProperties__default["default"](_this$props, _excluded);
+
+    return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
+      className: "quill-wysiwyg-editor ".concat(showRawHTML ? 'show-raw' : ''),
+      children: [customToolbar || /*#__PURE__*/_jsx__default["default"](CustomToolbar.CustomToolbar, {
+        customFields: customFields,
+        onShowHTML: onShowHTML,
+        hideItems: hideItems,
+        userProps: this.props
+      }), /*#__PURE__*/jsxRuntime.jsx(ReactQuill__default["default"], _objectSpread(_objectSpread({
+        ref: this.quillRef,
+        modules: this.quillModules,
+        onChange: this.onChangeQuill,
+        value: value,
+        style: {
+          height,
+          borderBottom: '1px solid #ccc'
+        }
+      }, editorProps), {}, {
+        id: "wysiwyg-text-container"
+      })), /*#__PURE__*/_jsx__default["default"]("textarea", {
+        className: "raw-editor ql-container ql-snow ql-editor",
+        style: {
+          width: '100%',
+          resize: 'none',
+          height,
+          minHeight: '200px'
+        },
+        onChange: this.onChangeTextArea,
+        value: utils.formatHTML(value)
+      }), imagesData && imagesData.length && /*#__PURE__*/_jsx__default["default"](ImageLibraryModal, {
+        imagesData: imagesData,
+        isOpen: isImageModalOpen,
+        onClose: this.onImageModalClose,
+        onConfirm: this.onImageConfirm
+      }), customFields && customFields.length && /*#__PURE__*/_jsx__default["default"](InsertFieldModal, {
+        customFields: customFields,
+        isOpen: isFieldModalOpen,
+        onClose: this.onFieldModalClose,
+        onConfirm: this.onInserFieldConfirm
+      })]
+    }));
+  }
+
+}
+
+module.exports = DSWYSIWYGEditorImpl;

package/cjs/components/ImageLibraryModal.js

@@ -0,0 +1,72 @@
+'use strict';
+
+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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var DSImageLibraryModal = require('@elliemae/ds-imagelibrarymodal');
+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 React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var DSImageLibraryModal__default = /*#__PURE__*/_interopDefaultLegacy(DSImageLibraryModal);
+
+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; }
+class ImageLibraryModal extends React__default["default"].PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.onSelect = selectedImage => {
+      this.setState({
+        selectedImage
+      });
+    };
+
+    this.onConfirm = () => {
+      const {
+        selectedImage
+      } = this.state;
+      const {
+        onConfirm,
+        onClose
+      } = this.props;
+      onConfirm(selectedImage);
+      onClose();
+    };
+
+    this.state = {
+      selectedImage: undefined
+    };
+  }
+
+  render() {
+    return /*#__PURE__*/jsxRuntime.jsx(DSImageLibraryModal__default["default"], _objectSpread(_objectSpread({}, this.props), {}, {
+      onConfirm: this.onConfirm,
+      onSelect: this.onSelect
+    }));
+  }
+
+}
+ImageLibraryModal.defaultProps = {
+  onReject: undefined,
+  imagesData: [{
+    url: 'https://www.freeiconspng.com/minicovers/no-image-icon-6.png',
+    name: 'no image',
+    createdBy: 'user:John Doe',
+    createdDate: '0000-01-01 00:00 AM UTC'
+  }, {
+    url: 'https://asset-service-bucket-int.s3.us-west-2.amazonaws.com/bd527d8c-472f-4dff-b8c5-1c90d5bae01e',
+    name: 'no image 2',
+    createdBy: 'user:Jane Doe',
+    createdDate: '0000-01-01 00:00 AM UTC'
+  }]
+};
+
+module.exports = ImageLibraryModal;

package/cjs/components/InsertFieldModal.js

@@ -0,0 +1,218 @@
+'use strict';
+
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+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/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 DSModal = require('@elliemae/ds-modal');
+var constants = require('@elliemae/ds-shared/constants');
+var lodash = require('lodash');
+var customFields = require('./customFields.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var DSModal__default = /*#__PURE__*/_interopDefaultLegacy(DSModal);
+
+const _excluded = ["customFields", "onSelect"];
+
+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 modalTypes = Object.values(DSModal.MODAL_TYPE);
+const elementClassName = 'insertfieldmodal-element';
+class InsertFieldModal extends React__default["default"].PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.onConfirm = () => {
+      const {
+        onConfirm,
+        onClose
+      } = this.props;
+      const {
+        selectedFieldCode
+      } = this.state;
+      onConfirm(selectedFieldCode);
+      onClose();
+    };
+
+    this.onReject = () => {
+      const {
+        onReject,
+        onClose
+      } = this.props;
+
+      if (onReject) {
+        onReject();
+      } else {
+        onClose();
+      }
+    };
+
+    this.drawDiv = (className, content, content2) => /*#__PURE__*/_jsx__default["default"]("div", {
+      className: className
+    }, void 0, /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, content), /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, content2));
+
+    this.drawLabel = (className, label, value) => /*#__PURE__*/_jsx__default["default"]("div", {
+      className: className
+    }, void 0, /*#__PURE__*/_jsx__default["default"]("span", {
+      className: "label"
+    }, void 0, label), /*#__PURE__*/_jsx__default["default"]("span", {
+      className: "value"
+    }, void 0, value));
+
+    this.handleElementClick = (e, selectedFieldCode) => {
+      if (e.key && e.key !== ' ') {
+        return;
+      }
+
+      const {
+        selectedFieldCode: fCode
+      } = this.state;
+      const {
+        disableDoubleClick
+      } = this.props;
+
+      if (selectedFieldCode === fCode && !disableDoubleClick) {
+        this.onConfirm();
+        return;
+      }
+
+      this.setState({
+        selectedFieldCode
+      });
+      const {
+        onSelect
+      } = this.props;
+
+      if (onSelect) {
+        onSelect(selectedFieldCode);
+      }
+    };
+
+    this.preventSpacebarScroll = () => {
+      document.onkeypress = function (e) {
+        if (!lodash.includes(e.target.className, elementClassName)) {
+          return true;
+        }
+
+        e = e || window.event;
+        const charCode = e.keyCode || e.which;
+
+        if (charCode === 32) {
+          e.preventDefault();
+          return false;
+        }
+
+        return true;
+      };
+    };
+
+    this.renderElements = () => {
+      const {
+        customFields: customFields$1
+      } = this.props;
+
+      if (!customFields$1) {
+        return 'Empty';
+      }
+
+      const {
+        selectedFieldCode
+      } = this.state;
+      return customFields$1.map((customField, idx) => {
+        const extras = {};
+        const fieldCode = customFields.getFieldCode(customField);
+
+        if (this.focusFirst && idx === 0) {
+          extras.ref = element => element && element.focus();
+
+          this.focusFirst = undefined;
+        } else if (fieldCode === selectedFieldCode) {
+          extras.ref = element => element && element.focus();
+        }
+
+        return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+          className: elementClassName,
+          onClick: e => this.handleElementClick(e, fieldCode),
+          onKeyUp: e => this.handleElementClick(e, fieldCode),
+          role: "button",
+          tabIndex: 0
+        }, extras), {}, {
+          children: this.drawLabel('content', customFields.getFieldName(customField), fieldCode)
+        }), fieldCode);
+      });
+    };
+
+    this.state = {
+      selectedFieldCode: customFields.getFieldCode(customFields.fields[0])
+    };
+    this.preventSpacebarScroll();
+  }
+
+  componentDidMount() {
+    const {
+      customFields
+    } = this.props;
+
+    if (customFields) {
+      this.handleElementClick({}, customFields[0]);
+      this.focusFirst = true;
+    }
+  }
+
+  getDerivedStateFromProps(nextProps) {
+    const {
+      customFields
+    } = this.props;
+
+    if (!customFields && nextProps.customFields) {
+      this.setState({
+        selectedFieldCode: customFields[0]
+      });
+    }
+  }
+
+  render() {
+    const _this$props = this.props,
+          modalProps = _objectWithoutProperties__default["default"](_this$props, _excluded);
+
+    return /*#__PURE__*/jsxRuntime.jsx(DSModal__default["default"], _objectSpread(_objectSpread({}, modalProps), {}, {
+      className: "insert-field-modal",
+      onConfirm: this.onConfirm,
+      onReject: this.onReject,
+      children: /*#__PURE__*/_jsx__default["default"]("div", {
+        className: "wrapper"
+      }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
+        className: "col-1"
+      }, void 0, this.drawDiv('title', 'Field Name', '« Field ID »'), this.renderElements()))
+    }));
+  }
+
+}
+InsertFieldModal.defaultProps = {
+  confirmLabel: 'Add',
+  customFields: customFields.fields,
+  disableDoubleClick: false,
+  isOpen: true,
+  modalTitle: 'Add Field',
+  modalType: modalTypes[1],
+  rejectLabel: 'Cancel',
+  shouldCloseOnOverlayClick: true,
+  size: constants.sizeOptions[1],
+  onSelect: undefined
+};
+
+module.exports = InsertFieldModal;

package/cjs/components/TippedButton.js

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('react');
+var dsTooltip = require('@elliemae/ds-tooltip');
+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 _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["className", "tip", "children", "onClick", "zIndex"];
+
+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 TippedButton = _ref => {
+  let {
+    className,
+    tip,
+    children,
+    onClick = () => null,
+    zIndex = 1
+  } = _ref,
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  return /*#__PURE__*/_jsx__default["default"]("div", {
+    className: "tooltip"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsTooltip.DSTooltipV3, {
+    text: tip,
+    zIndex: zIndex,
+    withoutPortal: false
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx("button", _objectSpread(_objectSpread({
+    type: "button",
+    className: className,
+    onClick: e => {
+      e.preventDefault();
+      onClick(e);
+    }
+  }, rest), {}, {
+    children: children
+  }))));
+};
+
+exports.TippedButton = TippedButton;

package/cjs/components/TippedSelect.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('react');
+var dsTooltip = require('@elliemae/ds-tooltip');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const TippedSelect = props => {
+  const {
+    tip,
+    onChange = () => null,
+    className,
+    options,
+    defaultValue = '',
+    values,
+    zIndex,
+    children
+  } = props;
+  const fallBackChildren = values && values.map((value, index) => /*#__PURE__*/_jsx__default["default"]("option", {
+    value: value === 'normal' ? '' : value
+  }, value, options ? options[index] : null));
+  return /*#__PURE__*/_jsx__default["default"]("div", {
+    className: "tooltip"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsTooltip.DSTooltipV3, {
+    text: tip,
+    zIndex: zIndex,
+    withoutPortal: false
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, /*#__PURE__*/_jsx__default["default"]("select", {
+    className: className,
+    defaultValue: defaultValue,
+    onChange: e => {
+      e.persist();
+      onChange(e);
+    }
+  }, void 0, children || fallBackChildren))));
+};
+
+exports.TippedSelect = TippedSelect;

package/cjs/components/colors.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+
+function sinToHex(i, size, phase) {
+  const sin = Math.sin(Math.PI / size * 2 * i + phase);
+  const int = Math.floor(sin * 127) + 128;
+  const hex = int.toString(16);
+  return hex.length === 1 ? "0".concat(hex) : hex;
+}
+
+function getRainbowColors() {
+  let size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 28;
+  const colors = new Array(size).fill(undefined);
+  return colors.map((color, idx) => {
+    const red = sinToHex(idx, size, 0 * Math.PI * 2 / 3); // 0   deg
+
+    const blue = sinToHex(idx, size, 1 * Math.PI * 2 / 3); // 120 deg
+
+    const green = sinToHex(idx, size, 2 * Math.PI * 2 / 3); // 240 deg
+
+    color = "#".concat(red).concat(green).concat(blue);
+    return color;
+  });
+}
+
+exports.getRainbowColors = getRainbowColors;