@atlaskit/editor-common 69.2.1 → 69.3.0

package/dist/esm/ui-menu/DropdownMenu/index.js

@@ -0,0 +1,265 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["children"];
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+/** @jsx jsx */
+import React, { PureComponent } from 'react';
+import { css, jsx } from '@emotion/react';
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { CustomItem, MenuGroup } from '@atlaskit/menu';
+import { DN600, DN80, N70, N900 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
+import { token } from '@atlaskit/tokens';
+import Tooltip from '@atlaskit/tooltip';
+import { withReactEditorViewOuterListeners } from '../../ui-react';
+import DropList from '../../ui/DropList';
+import Popup from '../../ui/Popup';
+var wrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* tooltip in ToolbarButton is display:block */\n  & > div > div {\n    display: flex;\n  }\n"])));
+
+var buttonStyles = function buttonStyles(isActive) {
+  return function (theme) {
+    if (isActive) {
+      /**
+       * Hack for item to imitate old dropdown-menu selected styles
+       */
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      > span,\n      > span:hover,\n      > span:active {\n        background: ", ";\n        color: ", ";\n      }\n    "])), token('color.background.selected', '#6c798f'), token('color.text', '#fff'));
+    } else {
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      > span:hover[aria-disabled='false'] {\n        color: ", ";\n        background-color: ", ";\n      }\n      > span:active[aria-disabled='false'] {\n        background-color: ", ";\n      }\n      > span[aria-disabled='true'] {\n        color: ", ";\n      }\n    "])), themed({
+        light: token('color.text', N900),
+        dark: token('color.text', DN600)
+      })(theme), themed({
+        light: token('color.background.neutral.subtle.hovered', 'rgb(244, 245, 247)'),
+        dark: token('color.background.neutral.subtle.hovered', 'rgb(59, 71, 92)')
+      })(theme), themed({
+        light: token('color.background.neutral.subtle.pressed', 'rgb(179, 212, 255)'),
+        dark: token('color.background.neutral.subtle.pressed', 'rgb(179, 212, 255)')
+      })(theme), themed({
+        light: token('color.text.disabled', N70),
+        dark: token('color.text.disabled', DN80)
+      })(theme));
+    }
+  };
+};
+
+var DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
+/**
+ * Wrapper around @atlaskit/droplist which uses Popup and Portal to render
+ * dropdown-menu outside of "overflow: hidden" containers when needed.
+ *
+ * Also it controls popper's placement.
+ */
+
+var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
+  _inherits(DropdownMenuWrapper, _PureComponent);
+
+  var _super = _createSuper(DropdownMenuWrapper);
+
+  function DropdownMenuWrapper() {
+    var _this;
+
+    _classCallCheck(this, DropdownMenuWrapper);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      popupPlacement: ['bottom', 'left']
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleRef", function (target) {
+      _this.setState({
+        target: target || undefined
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "updatePopupPlacement", function (placement) {
+      var previousPlacement = _this.state.popupPlacement;
+
+      if (placement[0] !== previousPlacement[0] || placement[1] !== previousPlacement[1]) {
+        _this.setState({
+          popupPlacement: placement
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleClose", function () {
+      if (_this.props.onOpenChange) {
+        _this.props.onOpenChange({
+          isOpen: false
+        });
+      }
+    });
+
+    return _this;
+  }
+
+  _createClass(DropdownMenuWrapper, [{
+    key: "renderDropdownMenu",
+    value: function renderDropdownMenu() {
+      var _this2 = this;
+
+      var _this$state = this.state,
+          target = _this$state.target,
+          popupPlacement = _this$state.popupPlacement;
+      var _this$props = this.props,
+          items = _this$props.items,
+          mountTo = _this$props.mountTo,
+          boundariesElement = _this$props.boundariesElement,
+          scrollableElement = _this$props.scrollableElement,
+          offset = _this$props.offset,
+          fitHeight = _this$props.fitHeight,
+          fitWidth = _this$props.fitWidth,
+          isOpen = _this$props.isOpen,
+          zIndex = _this$props.zIndex,
+          shouldUseDefaultRole = _this$props.shouldUseDefaultRole;
+      return jsx(Popup, {
+        target: isOpen ? target : undefined,
+        mountTo: mountTo,
+        boundariesElement: boundariesElement,
+        scrollableElement: scrollableElement,
+        onPlacementChanged: this.updatePopupPlacement,
+        fitHeight: fitHeight,
+        fitWidth: fitWidth,
+        zIndex: zIndex || akEditorFloatingPanelZIndex,
+        offset: offset
+      }, jsx(DropListWithOutsideListeners, {
+        isOpen: true,
+        appearance: "tall",
+        position: popupPlacement.join(' '),
+        shouldFlip: false,
+        shouldFitContainer: true,
+        isTriggerNotTabbable: true,
+        handleClickOutside: this.handleClose,
+        handleEscapeKeydown: this.handleClose
+      }, jsx("div", {
+        style: {
+          height: 0,
+          minWidth: fitWidth || 0
+        }
+      }), items.map(function (group, index) {
+        return jsx(MenuGroup, {
+          key: index,
+          role: shouldUseDefaultRole ? 'group' : 'menu'
+        }, group.items.map(function (item) {
+          var _item$key;
+
+          return jsx(DropdownMenuItem, {
+            key: (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : String(item.content),
+            item: item,
+            onItemActivated: _this2.props.onItemActivated,
+            shouldUseDefaultRole: _this2.props.shouldUseDefaultRole,
+            onMouseEnter: _this2.props.onMouseEnter,
+            onMouseLeave: _this2.props.onMouseLeave
+          });
+        }));
+      })));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          children = _this$props2.children,
+          isOpen = _this$props2.isOpen;
+      return jsx("div", {
+        css: wrapper
+      }, jsx("div", {
+        ref: this.handleRef
+      }, children), isOpen ? this.renderDropdownMenu() : null);
+    }
+  }]);
+
+  return DropdownMenuWrapper;
+}(PureComponent);
+
+export { DropdownMenuWrapper as default };
+var DropdownMenuItemCustomComponent = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  return jsx("span", _extends({
+    ref: ref
+  }, rest), children);
+});
+
+function DropdownMenuItem(_ref) {
+  var _item$key2;
+
+  var item = _ref.item,
+      onItemActivated = _ref.onItemActivated,
+      shouldUseDefaultRole = _ref.shouldUseDefaultRole,
+      _onMouseEnter = _ref.onMouseEnter,
+      _onMouseLeave = _ref.onMouseLeave;
+
+  // onClick and value.name are the action indicators in the handlers
+  // If neither are present, don't wrap in an Item.
+  if (!item.onClick && !(item.value && item.value.name)) {
+    return jsx("span", {
+      key: String(item.content)
+    }, item.content);
+  }
+
+  var dropListItem = jsx("div", {
+    css: function css(theme) {
+      return buttonStyles(item.isActive)({
+        theme: theme
+      });
+    }
+  }, jsx(CustomItem, {
+    item: item,
+    key: (_item$key2 = item.key) !== null && _item$key2 !== void 0 ? _item$key2 : String(item.content),
+    role: shouldUseDefaultRole ? 'button' : 'menuitem',
+    iconBefore: item.elemBefore,
+    iconAfter: item.elemAfter,
+    isDisabled: item.isDisabled,
+    onClick: function onClick() {
+      return onItemActivated && onItemActivated({
+        item: item
+      });
+    },
+    "aria-label": item['aria-label'] || String(item.content),
+    "aria-pressed": shouldUseDefaultRole ? item.isActive : undefined,
+    onMouseDown: function onMouseDown(e) {
+      e.preventDefault();
+    },
+    component: DropdownMenuItemCustomComponent,
+    onMouseEnter: function onMouseEnter() {
+      return _onMouseEnter && _onMouseEnter({
+        item: item
+      });
+    },
+    onMouseLeave: function onMouseLeave() {
+      return _onMouseLeave && _onMouseLeave({
+        item: item
+      });
+    }
+  }, item.content));
+
+  if (item.tooltipDescription) {
+    var _item$key3;
+
+    return jsx(Tooltip, {
+      key: (_item$key3 = item.key) !== null && _item$key3 !== void 0 ? _item$key3 : String(item.content),
+      content: item.tooltipDescription,
+      position: item.tooltipPosition
+    }, dropListItem);
+  }
+
+  return dropListItem;
+}

package/dist/esm/ui-menu/DropdownMenu/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui-menu/ToolbarButton/index.js

@@ -0,0 +1,102 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+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(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; }
+
+/** @jsx jsx */
+import React, { useCallback } from 'react';
+import { css, jsx } from '@emotion/react';
+import { FabricChannel } from '@atlaskit/analytics-listeners';
+import Tooltip from '@atlaskit/tooltip';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, TOOLBAR_ACTION_SUBJECT_ID } from '../../analytics';
+import Button from './styles';
+export var TOOLBAR_BUTTON = TOOLBAR_ACTION_SUBJECT_ID;
+var buttonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  height: 100%;\n"])));
+var ToolbarButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var buttonId = props.buttonId,
+      testId = props.testId,
+      _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      href = props.href,
+      iconAfter = props.iconAfter,
+      iconBefore = props.iconBefore,
+      disabled = props.disabled,
+      selected = props.selected,
+      spacing = props.spacing,
+      target = props.target,
+      children = props.children,
+      hideTooltip = props.hideTooltip,
+      title = props.title,
+      _props$titlePosition = props.titlePosition,
+      titlePosition = _props$titlePosition === void 0 ? 'top' : _props$titlePosition,
+      item = props.item,
+      ariaLabel = props['aria-label'],
+      ariaHasPopup = props['aria-haspopup'],
+      ariaExpanded = props['aria-expanded'],
+      ariaPressed = props['aria-pressed'],
+      onClick = props.onClick,
+      onItemClick = props.onItemClick;
+  var handleClick = useCallback(function (event, analyticsEvent) {
+    if (disabled) {
+      return;
+    }
+
+    if (buttonId) {
+      analyticsEvent.update(function (payload) {
+        return _objectSpread(_objectSpread({}, payload), {}, {
+          action: ACTION.CLICKED,
+          actionSubject: ACTION_SUBJECT.TOOLBAR_BUTTON,
+          actionSubjectId: buttonId,
+          eventType: EVENT_TYPE.UI
+        });
+      }).fire(FabricChannel.editor);
+    }
+
+    if (onClick) {
+      onClick(event);
+    }
+
+    if (item && onItemClick) {
+      onItemClick(item);
+    }
+  }, [disabled, onClick, onItemClick, item, buttonId]);
+  var id = buttonId ? "editor-toolbar__".concat(buttonId) : undefined;
+  var button = jsx(Button, {
+    id: id,
+    ref: ref,
+    appearance: "subtle",
+    testId: testId,
+    className: className,
+    href: href,
+    iconAfter: iconAfter,
+    iconBefore: iconBefore,
+    isDisabled: disabled,
+    isSelected: selected,
+    onClick: handleClick,
+    spacing: spacing || 'default',
+    target: target,
+    shouldFitContainer: true,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
+    "aria-label": ariaLabel,
+    "aria-pressed": ariaPressed
+  }, children);
+
+  if (!title) {
+    return button;
+  }
+
+  var tooltipContent = !hideTooltip ? title : null;
+  return jsx(Tooltip, {
+    content: tooltipContent,
+    hideTooltipOnClick: true,
+    position: titlePosition
+  }, jsx("div", {
+    css: buttonWrapper
+  }, button));
+});
+export default ToolbarButton;

package/dist/esm/ui-menu/ToolbarButton/styles.js

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Button from '@atlaskit/button/standard-button';
+export default /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    ref: ref
+  }, props, {
+    style: {
+      alignItems: 'center'
+    }
+  }));
+});

package/dist/esm/ui-menu/index.js

@@ -0,0 +1,3 @@
+export { default as DropdownMenu } from '../ui-menu/DropdownMenu';
+export { default as ToolbarButton, TOOLBAR_BUTTON } from '../ui-menu/ToolbarButton';
+export { default as Dropdown } from './Dropdown';

package/dist/esm/ui-react/ReactEditorViewContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+var ReactEditorViewContext = /*#__PURE__*/React.createContext({});
+export default ReactEditorViewContext;

package/dist/esm/ui-react/index.js

@@ -0,0 +1,2 @@
+export { default as ReactEditorViewContext } from './ReactEditorViewContext';
+export { default as withReactEditorViewOuterListeners } from './with-react-editor-view-outer-listeners';

package/dist/esm/ui-react/with-react-editor-view-outer-listeners.js

@@ -0,0 +1,138 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["handleClickOutside", "handleEnterKeydown", "handleEscapeKeydown"];
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React, { PureComponent } from 'react';
+import ReactDOM from 'react-dom';
+import ReactEditorViewContext from './ReactEditorViewContext';
+
+var WithOutsideClick = /*#__PURE__*/function (_PureComponent) {
+  _inherits(WithOutsideClick, _PureComponent);
+
+  var _super = _createSuper(WithOutsideClick);
+
+  function WithOutsideClick() {
+    var _this;
+
+    _classCallCheck(this, WithOutsideClick);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function (evt) {
+      if (!_this.props.isActiveComponent) {
+        return;
+      }
+
+      var domNode = ReactDOM.findDOMNode(_assertThisInitialized(_this)); // eslint-disable-line react/no-find-dom-node
+
+      if (!domNode || evt.target instanceof Node && !domNode.contains(evt.target)) {
+        if (_this.props.handleClickOutside) {
+          _this.props.handleClickOutside(evt);
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleKeydown", function (evt) {
+      if (!_this.props.isActiveComponent) {
+        return;
+      }
+
+      if (evt.code === 'Escape' && _this.props.handleEscapeKeydown) {
+        var _this$props$editorVie;
+
+        evt.preventDefault();
+        evt.stopPropagation();
+
+        _this.props.handleEscapeKeydown(evt);
+
+        if (!((_this$props$editorVie = _this.props.editorView) !== null && _this$props$editorVie !== void 0 && _this$props$editorVie.hasFocus())) {
+          var _this$props$editorVie2;
+
+          (_this$props$editorVie2 = _this.props.editorView) === null || _this$props$editorVie2 === void 0 ? void 0 : _this$props$editorVie2.focus();
+        }
+
+        return false;
+      } else if (evt.code === 'Enter' && _this.props.handleEnterKeydown) {
+        _this.props.handleEnterKeydown(evt);
+      }
+    });
+
+    return _this;
+  }
+
+  _createClass(WithOutsideClick, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.handleClickOutside) {
+        document.addEventListener('click', this.handleClick, false);
+      }
+
+      if (this.props.handleEscapeKeydown) {
+        var _this$props$editorRef;
+
+        (((_this$props$editorRef = this.props.editorRef) === null || _this$props$editorRef === void 0 ? void 0 : _this$props$editorRef.current) || document).addEventListener('keydown', this.handleKeydown, false);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.props.handleClickOutside) {
+        document.removeEventListener('click', this.handleClick, false);
+      }
+
+      if (this.props.handleEscapeKeydown) {
+        var _this$props$editorRef2;
+
+        (((_this$props$editorRef2 = this.props.editorRef) === null || _this$props$editorRef2 === void 0 ? void 0 : _this$props$editorRef2.current) || document).removeEventListener('keydown', this.handleKeydown, false);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return this.props.children;
+    }
+  }]);
+
+  return WithOutsideClick;
+}(PureComponent);
+
+function hasIsOpen(props) {
+  return 'isOpen' in props;
+}
+
+export default function withReactEditorViewOuterListeners(Component) {
+  return function (_ref) {
+    var handleClickOutside = _ref.handleClickOutside,
+        handleEnterKeydown = _ref.handleEnterKeydown,
+        handleEscapeKeydown = _ref.handleEscapeKeydown,
+        props = _objectWithoutProperties(_ref, _excluded);
+
+    var isActiveComponent = hasIsOpen(props) ? props.isOpen : true;
+    return /*#__PURE__*/React.createElement(ReactEditorViewContext.Consumer, null, function (_ref2) {
+      var editorView = _ref2.editorView,
+          editorRef = _ref2.editorRef;
+      return /*#__PURE__*/React.createElement(WithOutsideClick, {
+        editorView: editorView,
+        editorRef: editorRef,
+        isActiveComponent: isActiveComponent,
+        handleClickOutside: handleClickOutside,
+        handleEnterKeydown: handleEnterKeydown,
+        handleEscapeKeydown: handleEscapeKeydown
+      }, /*#__PURE__*/React.createElement(Component, props));
+    });
+  };
+}

package/dist/esm/utils/dom.js

@@ -0,0 +1,113 @@
+/**
+ * Walks a DOM tree up to the provided `stopElement`, or if falsy before.
+ * @param element
+ * @param stopElement
+ */
+export function walkUpTreeUntil(element, shouldStop) {
+  var rootElement = element;
+
+  while (rootElement && rootElement.parentElement && !shouldStop(rootElement)) {
+    rootElement = rootElement.parentElement;
+  }
+
+  return rootElement;
+}
+/**
+ * Takes all children out from wrapped el and puts them directly inside
+ * the parent el, at the wrapped el's position
+ */
+
+export function unwrap(parent, wrapped) {
+  var docsFragment = document.createDocumentFragment();
+  Array.from(wrapped.children).forEach(function (child) {
+    docsFragment.appendChild(child);
+  });
+  parent.replaceChild(docsFragment, wrapped);
+}
+/**
+ * Walks up DOM removing elements if they are empty until it finds
+ * one that is not
+ */
+
+export function removeNestedEmptyEls(el) {
+  while (el.parentElement && el.childElementCount === 0 && el.textContent === '') {
+    var parentEl = el.parentElement;
+    parentEl.removeChild(el);
+    el = parentEl;
+  }
+}
+/**
+ * IE11 doesn't support classList to SVGElements
+ **/
+
+export var containsClassName = function containsClassName(node, className) {
+  if (!node) {
+    return false;
+  }
+
+  if (node.classList && node.classList.contains) {
+    return node.classList.contains(className);
+  }
+
+  if (!node.className) {
+    return false;
+  }
+
+  var classNames = typeof node.className.baseVal === 'string' ? node.className.baseVal : node.className;
+  return classNames.split(' ').indexOf(className) !== -1;
+};
+export function closest(node, s) {
+  if (!node) {
+    return null;
+  }
+
+  var el = node;
+
+  if (!document.documentElement || !document.documentElement.contains(el)) {
+    return null;
+  }
+
+  if (el.closest) {
+    return el.closest(s);
+  }
+
+  do {
+    var matchfn = el.matches ? el.matches : el.msMatchesSelector;
+
+    if (matchfn && matchfn.call(el, s)) {
+      return el;
+    }
+
+    el = el.parentElement || el.parentNode;
+  } while (el !== null && el.nodeType === 1);
+
+  return null;
+}
+/*
+ * @deprecated - Use HTMLElement.protoype.closest instead
+ */
+
+export function closestElement(node, s) {
+  return closest(node, s);
+}
+export function parsePx(pxStr) {
+  if (!pxStr.endsWith('px')) {
+    return undefined;
+  }
+
+  var maybeNumber = parseInt(pxStr, 10);
+  return !Number.isNaN(maybeNumber) ? maybeNumber : undefined;
+}
+// does typescript have function templates yet?
+export function mapElem(elem, callback) {
+  var array = [];
+
+  for (var i = 0; i < elem.childElementCount; i++) {
+    array.push(callback(elem.children[i], i, elem));
+  }
+
+  return array;
+}
+export function maphElem(elem, callback) {
+  return mapElem(elem, callback);
+}