@nectary/components 2.12.0 → 2.12.2

package/lib/cjs/utils/dom.js

@@ -0,0 +1,183 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cloneNode = exports.clampNumber = exports.attrValueToPixels = exports.attrValueToInteger = void 0;
+exports.getAttribute = getAttribute;
+exports.getCssVars = exports.getCssVar = exports.getBooleanAttribute = void 0;
+exports.getIntegerAttribute = getIntegerAttribute;
+exports.getLiteralAttribute = getLiteralAttribute;
+exports.updateLiteralAttribute = exports.updateIntegerAttribute = exports.updateExplicitBooleanAttribute = exports.updateBooleanAttribute = exports.updateAttribute = exports.shouldReduceMotion = exports.setClass = exports.isLiteralValue = exports.isAttrTrue = exports.isAttrEqual = exports.hasClass = void 0;
+const updateExplicitBooleanAttribute = ($element, attrName, attrValue) => {
+  $element.setAttribute(attrName, attrValue === true ? 'true' : 'false');
+};
+exports.updateExplicitBooleanAttribute = updateExplicitBooleanAttribute;
+const isAttrTrue = attrValue => {
+  return attrValue !== null && attrValue !== 'false';
+};
+exports.isAttrTrue = isAttrTrue;
+const getBooleanAttribute = ($element, attrName) => {
+  return isAttrTrue($element.getAttribute(attrName));
+};
+exports.getBooleanAttribute = getBooleanAttribute;
+const updateBooleanAttribute = ($element, attrName, attrValue) => {
+  const currentAttrValue = $element.getAttribute(attrName);
+  if (attrValue === true) {
+    if (!isAttrTrue(currentAttrValue)) {
+      $element.setAttribute(attrName, '');
+    }
+  } else if (currentAttrValue !== null) {
+    $element.removeAttribute(attrName);
+  }
+};
+exports.updateBooleanAttribute = updateBooleanAttribute;
+const updateAttribute = ($element, attrName, attrValue) => {
+  if (attrValue != null) {
+    $element.setAttribute(attrName, String(attrValue));
+  } else {
+    $element.removeAttribute(attrName);
+  }
+};
+exports.updateAttribute = updateAttribute;
+function getAttribute($element, attrName) {
+  let defaultValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  return $element.getAttribute(attrName) ?? defaultValue;
+}
+const isLiteralValue = (literals, value) => {
+  return value != null && literals.includes(value);
+};
+exports.isLiteralValue = isLiteralValue;
+const updateLiteralAttribute = ($element, literals, attrName, attrValue) => {
+  if (isLiteralValue(literals, attrValue)) {
+    $element.setAttribute(attrName, attrValue);
+  } else {
+    $element.removeAttribute(attrName);
+  }
+};
+exports.updateLiteralAttribute = updateLiteralAttribute;
+function getLiteralAttribute($element, literals, attrName, defaultValue) {
+  const attrValue = $element.getAttribute(attrName);
+  if (isLiteralValue(literals, attrValue)) {
+    return attrValue;
+  }
+  return defaultValue;
+}
+const clampNumber = (value, min, max) => {
+  return Math.min(max, Math.max(min, value));
+};
+exports.clampNumber = clampNumber;
+const DEFAULT_INTEGER_OPTIONS = {
+  itemSizeMultiplier: 1,
+  itemSpaceBetween: 0,
+  defaultValue: null
+};
+const applyRange = (value, _ref) => {
+  let {
+    min,
+    max
+  } = _ref;
+  let result = value;
+  if (min != null) {
+    result = Math.max(min, result);
+  }
+  if (max != null) {
+    result = Math.min(max, result);
+  }
+  return result;
+};
+const attrValueToInteger = function (value) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_INTEGER_OPTIONS;
+  const {
+    defaultValue = null,
+    itemSizeMultiplier = 1,
+    itemSpaceBetween = 0
+  } = options;
+  let intValue = defaultValue;
+  if (value !== null) {
+    const int = parseInt(value);
+    if (Number.isInteger(int)) {
+      intValue = applyRange(int, options);
+    }
+  }
+  if (intValue !== null) {
+    return intValue * itemSizeMultiplier + Math.max(intValue - 1, 0) * itemSpaceBetween;
+  }
+  return null;
+};
+exports.attrValueToInteger = attrValueToInteger;
+const attrValueToPixels = function (value) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_INTEGER_OPTIONS;
+  const int = attrValueToInteger(value, options);
+  return int === null ? 'unset' : `${int}px`;
+};
+exports.attrValueToPixels = attrValueToPixels;
+const updateIntegerAttribute = function ($element, attrName, attrValue) {
+  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : DEFAULT_INTEGER_OPTIONS;
+  const {
+    defaultValue = null,
+    itemSizeMultiplier: multiplier = 1
+  } = options;
+  let intValue = null;
+  if (typeof attrValue === 'string') {
+    intValue = attrValueToInteger(attrValue, options);
+  } else if (typeof attrValue === 'number') {
+    intValue = applyRange(attrValue, options) * multiplier;
+  } else {
+    intValue = defaultValue;
+  }
+  if (intValue === null) {
+    $element.removeAttribute(attrName);
+  } else {
+    $element.setAttribute(attrName, intValue.toFixed(0));
+  }
+};
+exports.updateIntegerAttribute = updateIntegerAttribute;
+function getIntegerAttribute($element, attrName, defaultValue) {
+  return attrValueToInteger($element.getAttribute(attrName)) ?? defaultValue;
+}
+const setClass = (elem, name, isSet) => {
+  isSet ? elem.classList.add(name) : elem.classList.remove(name);
+};
+exports.setClass = setClass;
+const hasClass = (elem, name) => {
+  return elem.classList.contains(name);
+};
+exports.hasClass = hasClass;
+const getCssVar = (element, variableName) => {
+  const result = getComputedStyle(element).getPropertyValue(variableName).trim();
+  return result === '' ? null : result;
+};
+exports.getCssVar = getCssVar;
+const getCssVars = (element, variableNames) => {
+  const style = getComputedStyle(element);
+  return variableNames.map(name => {
+    const result = style.getPropertyValue(name).trim();
+    return result === '' ? null : result;
+  });
+};
+exports.getCssVars = getCssVars;
+const cloneNode = (el, deep) => {
+  const root = el.getRootNode();
+  if (root !== document && Reflect.has(root, 'createElement')) {
+    const cloned = root.createElement(el.tagName.toLowerCase());
+    for (const attr of el.getAttributeNames()) {
+      cloned.setAttribute(attr, el.getAttribute(attr));
+    }
+    if (deep) {
+      for (let i = 0; i < el.children.length; i++) {
+        const clonedChild = cloneNode(el.children[i], deep);
+        cloned.appendChild(clonedChild);
+      }
+    }
+    return cloned;
+  }
+  return el.cloneNode(deep);
+};
+exports.cloneNode = cloneNode;
+const shouldReduceMotion = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+exports.shouldReduceMotion = shouldReduceMotion;
+const isAttrEqual = (oldVal, newVal) => {
+  return oldVal === newVal || newVal === null && oldVal === 'false' || newVal === '' && oldVal === 'true';
+};
+exports.isAttrEqual = isAttrEqual;

package/lib/cjs/utils/element.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setNectaryRegistry = exports.defineCustomElement = exports.NectaryElement = void 0;
+var _package = _interopRequireDefault(require('../../package.json'));
+const nectaryDefinitions = new Map();
+let nectaryRegistry = null;
+const defineCustomElement = (name, constructor) => {
+  if (nectaryRegistry !== null) {
+    if (nectaryRegistry.get(name) == null) {
+      nectaryRegistry.define(name, constructor);
+    }
+    return;
+  }
+  nectaryDefinitions.set(name, constructor);
+};
+exports.defineCustomElement = defineCustomElement;
+const setNectaryRegistry = registry => {
+  if (nectaryRegistry !== null) {
+    throw new Error('Nectary registry already set');
+  }
+  nectaryRegistry = registry;
+  for (const [name, ctor] of nectaryDefinitions.entries()) {
+    if (nectaryRegistry.get(name) == null) {
+      nectaryRegistry.define(name, ctor);
+    }
+  }
+  nectaryDefinitions.clear();
+};
+exports.setNectaryRegistry = setNectaryRegistry;
+class NectaryElement extends HTMLElement {
+  attachShadow(options) {
+    return super.attachShadow({
+      mode: 'open',
+      delegatesFocus: false,
+      customElements: nectaryRegistry,
+      ...options
+    });
+  }
+  version = _package.default.version;
+  get focusable() {
+    return false;
+  }
+  #isDomConnected = false;
+  connectedCallback() {
+    this.#isDomConnected = true;
+  }
+  disconnectedCallback() {
+    this.#isDomConnected = false;
+  }
+  get isDomConnected() {
+    return this.#isDomConnected;
+  }
+}
+exports.NectaryElement = NectaryElement;

package/lib/cjs/utils/event-target.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isTargetEqual = exports.getTargetIndexInParent = exports.getTargetByAttribute = exports.getTargetAttribute = void 0;
+const isTargetEqual = (e, $elem) => {
+  return e.target === $elem || e.originalTarget === $elem;
+};
+exports.isTargetEqual = isTargetEqual;
+const getTargetByAttribute = (e, attr) => {
+  if (e.target.hasAttribute(attr)) {
+    return e.target;
+  }
+  if (e.originalTarget?.hasAttribute(attr) === true) {
+    return e.originalTarget;
+  }
+  return null;
+};
+exports.getTargetByAttribute = getTargetByAttribute;
+const getTargetAttribute = (e, attr) => {
+  return e.target.getAttribute(attr) ?? e.originalTarget?.getAttribute(attr) ?? null;
+};
+exports.getTargetAttribute = getTargetAttribute;
+const getTargetIndexInParent = (e, parent) => {
+  const indexOf = Array.prototype.indexOf.call(parent.children, e.target);
+  if (indexOf >= 0) {
+    return indexOf;
+  }
+  const origTgt = e.originalTarget;
+  if (origTgt != null) {
+    return Array.prototype.indexOf.call(parent.children, origTgt);
+  }
+  return -1;
+};
+exports.getTargetIndexInParent = getTargetIndexInParent;

package/lib/cjs/utils/get-react-event-handler.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getReactEventHandler = void 0;
+const getReactEventHandler = ($element, handlerName) => {
+  for (const key in $element) {
+    if (Object.hasOwn($element, key) && key.startsWith('__reactProps$')) {
+      return $element[key][handlerName];
+    }
+  }
+  return null;
+};
+exports.getReactEventHandler = getReactEventHandler;

package/lib/cjs/utils/index.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _context = require('./context');
+Object.keys(_context).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _context[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _context[key];
+    }
+  });
+});
+var _csv = require('./csv');
+Object.keys(_csv).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _csv[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _csv[key];
+    }
+  });
+});
+var _dom = require('./dom');
+Object.keys(_dom).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _dom[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _dom[key];
+    }
+  });
+});
+var _element = require('./element');
+Object.keys(_element).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _element[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _element[key];
+    }
+  });
+});
+var _rect = require('./rect');
+Object.keys(_rect).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _rect[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _rect[key];
+    }
+  });
+});
+var _slot = require('./slot');
+Object.keys(_slot).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _slot[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _slot[key];
+    }
+  });
+});
+var _throttle = require('./throttle');
+Object.keys(_throttle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _throttle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _throttle[key];
+    }
+  });
+});
+var _debounce = require('./debounce');
+Object.keys(_debounce).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _debounce[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _debounce[key];
+    }
+  });
+});
+var _getReactEventHandler = require('./get-react-event-handler');
+Object.keys(_getReactEventHandler).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _getReactEventHandler[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _getReactEventHandler[key];
+    }
+  });
+});
+var _markdown = require('./markdown');
+Object.keys(_markdown).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _markdown[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _markdown[key];
+    }
+  });
+});
+var _eventTarget = require('./event-target');
+Object.keys(_eventTarget).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _eventTarget[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _eventTarget[key];
+    }
+  });
+});
+var _uid = require('./uid');
+Object.keys(_uid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _uid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _uid[key];
+    }
+  });
+});

package/lib/cjs/utils/markdown.js

@@ -0,0 +1,151 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseMarkdown = exports.isEmojiString = void 0;
+const regLinebreak = /(?:<br>\n|<br>|\n)/;
+const regParagraph = /\n{2,}/;
+const regEm3Star = /\*\*\*(?<em3>.+?)\*\*\*/;
+const regEm2Star = /\*\*(?<em2>.+?)\*\*/;
+const regEm1Star = /\*(?<em1>.+?)\*/;
+const regEm3Underscore = /___(?<em3>.+?)___/;
+const regEm2Underscore = /__(?<em2>.+?)__/;
+const regEm1Underscore = /_(?<em1>.+?)_/;
+const regCodeTag = /`(?<code>.+?)`/;
+const regStrikethrough = /~~(?<strike>.+?)~~/;
+const regLink = /!?\[(?<linktext>[^\]]*?)\]\((?<linkhref>[^)]+?)\)(\{(?<linkattrs>[^)]+?)\})?/;
+const regEmoji = /(?<emoji>(?![0-9*#])\p{Emoji})/u;
+const regUList = /^(?<indent>[\t ]*?)[*+-][\t ]+(?<ultext>.*?)[\t ]*?$/;
+const regOList = /^(?<indent>[\t ]*?)\d+\.[\t ]+(?<oltext>.*?)[\t ]*?$/;
+const allRegs = [regCodeTag, regLink, regEm3Star, regEm2Star, regEm1Star, regEm3Underscore, regEm2Underscore, regEm1Underscore, regStrikethrough, regEmoji];
+const isEmojiString = data => regEmoji.test(data);
+exports.isEmojiString = isEmojiString;
+const excludeRegs = function (regs) {
+  for (var _len = arguments.length, excluding = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    excluding[_key - 1] = arguments[_key];
+  }
+  return regs.filter(r => !excluding.includes(r));
+};
+const matchClosest = (regs, line) => {
+  return regs.map(reg => reg.exec(line)).reduce((res, match) => {
+    if (match === null) {
+      return res;
+    }
+    if (res === null || res.index > match.index) {
+      return match;
+    }
+    return res;
+  }, null);
+};
+const INITIAL_CONTEXT = {
+  isBold: false,
+  isItalic: false,
+  isStrikethrough: false
+};
+const createLineParser = visitor => function parseLine(regs, md) {
+  let context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INITIAL_CONTEXT;
+  let line = md;
+  let match = null;
+  while ((match = matchClosest(regs, line)) !== null) {
+    const groups = match.groups;
+    const matchedStr = match[0];
+    if (match.index > 0) {
+      visitor.inline(line.substring(0, match.index), context);
+    }
+    line = line.substring(match.index + matchedStr.length);
+    if (groups?.linkhref != null) {
+      visitor.link(groups.linktext, groups.linkhref, groups.linkattrs?.split(' '));
+    }
+    if (groups?.code != null) {
+      visitor.codetag(groups.code);
+    }
+    if (groups?.emoji != null) {
+      visitor.emoji(groups.emoji);
+    }
+    if (groups?.em1 != null) {
+      parseLine(excludeRegs(regs, regEm1Star, regEm1Underscore), groups.em1, {
+        ...context,
+        isItalic: true
+      });
+    }
+    if (groups?.em2 != null) {
+      parseLine(excludeRegs(regs, regEm2Star, regEm2Underscore), groups.em2, {
+        ...context,
+        isBold: true
+      });
+    }
+    if (groups?.em3 != null) {
+      parseLine(excludeRegs(regs, regEm3Star, regEm3Underscore, regEm2Star, regEm2Underscore, regEm1Star, regEm1Underscore), groups.em3, {
+        ...context,
+        isBold: true,
+        isItalic: true
+      });
+    }
+    if (groups?.strike != null) {
+      parseLine(excludeRegs(regs, regStrikethrough), groups.strike, {
+        ...context,
+        isStrikethrough: true
+      });
+    }
+  }
+  if (line.length > 0) {
+    visitor.inline(line, context);
+  }
+};
+const createBlockParser = visitor => {
+  const parseLine = createLineParser(visitor);
+  const listRegs = [regUList, regOList];
+  const getListItemText = match => {
+    return match.groups.ultext ?? match.groups.oltext;
+  };
+  const BLOCK_MODE_PARAGRAPH = 1;
+  const BLOCK_MODE_ULIST = 2;
+  const BLOCK_MODE_OLIST = 2;
+  return function parseBlock(lines) {
+    let mode = 0;
+    for (let i = 0; i < lines.length; ++i) {
+      const listMatch = matchClosest(listRegs, lines[i]);
+      const isListLine = listMatch !== null;
+      if (isListLine) {
+        const groups = listMatch.groups;
+        const isOrderedList = groups.oltext != null;
+        mode = isOrderedList ? BLOCK_MODE_OLIST : BLOCK_MODE_ULIST;
+        visitor.list(isOrderedList);
+        const listItemInitialIndent = groups.indent;
+        let listItemLines = [getListItemText(listMatch)];
+        visitor.listItem();
+        for (++i; i < lines.length; ++i) {
+          const listItemMatch = isOrderedList ? regOList.exec(lines[i]) : regUList.exec(lines[i]);
+          if (listItemMatch !== null && listItemMatch.groups.indent === listItemInitialIndent) {
+            parseBlock(listItemLines);
+            listItemLines = [getListItemText(listItemMatch)];
+            visitor.listItem();
+          } else {
+            listItemLines.push(lines[i]);
+          }
+        }
+        parseBlock(listItemLines);
+        visitor.endList();
+        mode = 0;
+      } else {
+        if (mode === BLOCK_MODE_PARAGRAPH) {
+          visitor.linebreak();
+        }
+        if (mode !== BLOCK_MODE_PARAGRAPH) {
+          mode = BLOCK_MODE_PARAGRAPH;
+          visitor.paragraph();
+        }
+        parseLine(allRegs, lines[i]);
+      }
+    }
+  };
+};
+const parseMarkdown = (md, visitor) => {
+  const parseBlock = createBlockParser(visitor);
+  for (const block of md.trim().split(regParagraph)) {
+    parseBlock(block.trim().split(regLinebreak));
+  }
+  return visitor.end();
+};
+exports.parseMarkdown = parseMarkdown;

package/lib/cjs/utils/rect.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rectOverlap = exports.getTargetRect = exports.getRect = void 0;
+var _slot = require('./slot');
+const getRect = el => {
+  const {
+    x,
+    y,
+    width,
+    height
+  } = el.getBoundingClientRect();
+  return {
+    x,
+    y,
+    width,
+    height
+  };
+};
+exports.getRect = getRect;
+const rectOverlap = (targetRect, contentRect) => {
+  return targetRect.x < contentRect.x + contentRect.width && targetRect.x + targetRect.width > contentRect.x && targetRect.y < contentRect.y + contentRect.height && targetRect.y + targetRect.height > contentRect.y;
+};
+exports.rectOverlap = rectOverlap;
+const getTargetRect = slot => {
+  const item = (0, _slot.getFirstSlotElement)(slot, true);
+  if (item === null) {
+    return null;
+  }
+  if (Reflect.has(item, 'footprintRect')) {
+    return item.footprintRect;
+  }
+  return getRect(item);
+};
+exports.getTargetRect = getTargetRect;

package/lib/cjs/utils/size.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sizeValues = exports.sizeExValues = exports.DEFAULT_SIZE = void 0;
+const DEFAULT_SIZE = exports.DEFAULT_SIZE = 'm';
+const sizeValues = exports.sizeValues = ['l', 'm', 's'];
+const sizeExValues = exports.sizeExValues = [...sizeValues, 'xs'];

package/lib/cjs/utils/slot.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isElementFocused = exports.getFirstSlotElement = exports.getFirstFocusableElement = void 0;
+const isSlotElement = el => {
+  return el.tagName === 'SLOT';
+};
+const getFirstSlotElement = function (root) {
+  let isDeep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const el = root.assignedElements()[0];
+  if (el == null) {
+    return null;
+  }
+  if (isDeep && isSlotElement(el)) {
+    return getFirstSlotElement(el, isDeep);
+  }
+  return el;
+};
+exports.getFirstSlotElement = getFirstSlotElement;
+const getChildren = root => {
+  if (isSlotElement(root)) {
+    return root.assignedElements();
+  }
+  return Array.from(root.children);
+};
+const isFocusable = el => {
+  return el.focusable === true;
+};
+const getFirstFocusableElement = root => {
+  for (const child of getChildren(root)) {
+    if (isFocusable(child)) {
+      return child;
+    }
+    const resultEl = getFirstFocusableElement(child);
+    if (resultEl !== null) {
+      return resultEl;
+    }
+  }
+  return null;
+};
+exports.getFirstFocusableElement = getFirstFocusableElement;
+const isElementFocused = $el => {
+  return $el !== null && $el === $el.getRootNode().activeElement;
+};
+exports.isElementFocused = isElementFocused;