@studiometa/js-toolkit 2.0.0-beta.10 → 2.0.0-beta.14

package/utils/css/styles.cjs

@@ -0,0 +1,52 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// packages/js-toolkit/utils/css/styles.js
+var styles_exports = {};
+__export(styles_exports, {
+  add: () => add,
+  default: () => setStyles,
+  remove: () => remove
+});
+var import_isObject = __toESM(require("../object/isObject.cjs"), 1);
+function setStyles(element, styles, method = "add") {
+  if (!element || !styles || !(0, import_isObject.default)(styles)) {
+    return;
+  }
+  Object.entries(styles).forEach(([prop, value]) => {
+    element.style[prop] = method === "add" ? value : "";
+  });
+}
+function add(element, styles) {
+  setStyles(element, styles);
+}
+function remove(element, styles) {
+  setStyles(element, styles, "remove");
+}
+module.exports = __toCommonJS(styles_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/utils/css/styles.js

@@ -1,19 +1,20 @@
-import isObject from '../object/isObject.js';
-export default function setStyles(element, styles) {
-  var method = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'add';
-
+import isObject from "../object/isObject.js";
+function setStyles(element, styles, method = "add") {
   if (!element || !styles || !isObject(styles)) {
     return;
   }
-
-  Object.entries(styles).forEach(_ref => {
-    var [prop, value] = _ref;
-    element.style[prop] = method === 'add' ? value : '';
+  Object.entries(styles).forEach(([prop, value]) => {
+    element.style[prop] = method === "add" ? value : "";
   });
 }
-export function add(element, styles) {
+function add(element, styles) {
   setStyles(element, styles);
 }
-export function remove(element, styles) {
-  setStyles(element, styles, 'remove');
-}
+function remove(element, styles) {
+  setStyles(element, styles, "remove");
+}
+export {
+  add,
+  setStyles as default,
+  remove
+};

package/utils/css/transition.cjs

@@ -0,0 +1,122 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache2) => {
+  return (module2, temp) => {
+    return cache2 && cache2.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache2 && cache2.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// packages/js-toolkit/utils/css/transition.js
+var transition_exports = {};
+__export(transition_exports, {
+  default: () => transition,
+  setClassesOrStyles: () => setClassesOrStyles
+});
+var import_nextFrame = __toESM(require("../nextFrame.cjs"), 1);
+var classes = __toESM(require("./classes.cjs"), 1);
+var styles = __toESM(require("./styles.cjs"), 1);
+var cache = /* @__PURE__ */ new WeakMap();
+var Transition = class {
+  isTransitioning = false;
+  transitionEndHandler = null;
+  constructor(element) {
+    cache.set(element, this);
+  }
+  static getInstance(element) {
+    let instance = cache.get(element);
+    if (!instance) {
+      instance = new this(element);
+    }
+    return instance;
+  }
+};
+function setClassesOrStyles(element, classesOrStyles, method = "add") {
+  if (typeof classesOrStyles === "string") {
+    classes[method](element, classesOrStyles, method);
+  } else {
+    styles[method](element, classesOrStyles, method);
+  }
+}
+function testTransition(element) {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  const { transitionDuration } = window.getComputedStyle(element);
+  return !!transitionDuration && transitionDuration !== "0s";
+}
+async function start(element, classesOrStyles) {
+  const trs = Transition.getInstance(element);
+  trs.isTransitioning = true;
+  setClassesOrStyles(element, classesOrStyles.from);
+  await (0, import_nextFrame.default)();
+  setClassesOrStyles(element, classesOrStyles.active);
+  await (0, import_nextFrame.default)();
+}
+async function next(element, classesOrStyles) {
+  const hasTransition = testTransition(element);
+  return new Promise(async (resolve) => {
+    if (hasTransition) {
+      const trs = Transition.getInstance(element);
+      trs.transitionEndHandler = resolve;
+      element.addEventListener("transitionend", trs.transitionEndHandler, false);
+    }
+    setClassesOrStyles(element, classesOrStyles.from, "remove");
+    setClassesOrStyles(element, classesOrStyles.to);
+    await (0, import_nextFrame.default)();
+    if (!hasTransition) {
+      resolve();
+    }
+  });
+}
+function end(element, classesOrStyles, mode = "remove") {
+  const trs = Transition.getInstance(element);
+  element.removeEventListener("transitionend", trs.transitionEndHandler, false);
+  if (mode === "remove") {
+    setClassesOrStyles(element, classesOrStyles.to, "remove");
+  }
+  setClassesOrStyles(element, classesOrStyles.active, "remove");
+  trs.isTransitioning = false;
+  trs.transitionEndHandler = null;
+}
+async function transition(element, name, endMode = "remove") {
+  const classesOrStyles = typeof name === "string" ? {
+    from: `${name}-from`,
+    active: `${name}-active`,
+    to: `${name}-to`
+  } : {
+    from: "",
+    active: "",
+    to: "",
+    ...name
+  };
+  const trs = Transition.getInstance(element);
+  if (trs.isTransitioning) {
+    end(element, classesOrStyles);
+  }
+  await start(element, classesOrStyles);
+  await next(element, classesOrStyles);
+  end(element, classesOrStyles, endMode);
+  return Promise.resolve();
+}
+module.exports = __toCommonJS(transition_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/utils/css/transition.js

@@ -1,145 +1,90 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-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; }
-
-import nextFrame from '../nextFrame.js';
-import * as classes from './classes.js';
-import * as styles from './styles.js';
-var cache = new WeakMap();
-
+import nextFrame from "../nextFrame.js";
+import * as classes from "./classes.js";
+import * as styles from "./styles.js";
+const cache = /* @__PURE__ */ new WeakMap();
 class Transition {
+  isTransitioning = false;
+  transitionEndHandler = null;
   constructor(element) {
-    _defineProperty(this, "isTransitioning", false);
-
-    _defineProperty(this, "transitionEndHandler", null);
-
     cache.set(element, this);
   }
-
   static getInstance(element) {
-    var instance = cache.get(element);
-
+    let instance = cache.get(element);
     if (!instance) {
       instance = new this(element);
     }
-
     return instance;
   }
-
 }
-
-export function setClassesOrStyles(element, classesOrStyles) {
-  var method = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'add';
-
-  if (typeof classesOrStyles === 'string') {
+function setClassesOrStyles(element, classesOrStyles, method = "add") {
+  if (typeof classesOrStyles === "string") {
     classes[method](element, classesOrStyles, method);
   } else {
     styles[method](element, classesOrStyles, method);
   }
 }
-
 function testTransition(element) {
-  if (typeof window === 'undefined') {
+  if (typeof window === "undefined") {
     return false;
   }
-
-  var {
-    transitionDuration
-  } = window.getComputedStyle(element);
-  return !!transitionDuration && transitionDuration !== '0s';
+  const { transitionDuration } = window.getComputedStyle(element);
+  return !!transitionDuration && transitionDuration !== "0s";
 }
-
-function start(_x, _x2) {
-  return _start.apply(this, arguments);
+async function start(element, classesOrStyles) {
+  const trs = Transition.getInstance(element);
+  trs.isTransitioning = true;
+  setClassesOrStyles(element, classesOrStyles.from);
+  await nextFrame();
+  setClassesOrStyles(element, classesOrStyles.active);
+  await nextFrame();
 }
-
-function _start() {
-  _start = _asyncToGenerator(function* (element, classesOrStyles) {
-    var trs = Transition.getInstance(element);
-    trs.isTransitioning = true;
-    setClassesOrStyles(element, classesOrStyles.from);
-    yield nextFrame();
-    setClassesOrStyles(element, classesOrStyles.active);
-    yield nextFrame();
-  });
-  return _start.apply(this, arguments);
-}
-
-function next(_x3, _x4) {
-  return _next.apply(this, arguments);
-}
-
-function _next() {
-  _next = _asyncToGenerator(function* (element, classesOrStyles) {
-    var hasTransition = testTransition(element);
-    return new Promise(function () {
-      var _ref = _asyncToGenerator(function* (resolve) {
-        if (hasTransition) {
-          var trs = Transition.getInstance(element);
-          trs.transitionEndHandler = resolve;
-          element.addEventListener('transitionend', trs.transitionEndHandler, false);
-        }
-
-        setClassesOrStyles(element, classesOrStyles.from, 'remove');
-        setClassesOrStyles(element, classesOrStyles.to);
-        yield nextFrame();
-
-        if (!hasTransition) {
-          resolve();
-        }
-      });
-
-      return function (_x7) {
-        return _ref.apply(this, arguments);
-      };
-    }());
+async function next(element, classesOrStyles) {
+  const hasTransition = testTransition(element);
+  return new Promise(async (resolve) => {
+    if (hasTransition) {
+      const trs = Transition.getInstance(element);
+      trs.transitionEndHandler = resolve;
+      element.addEventListener("transitionend", trs.transitionEndHandler, false);
+    }
+    setClassesOrStyles(element, classesOrStyles.from, "remove");
+    setClassesOrStyles(element, classesOrStyles.to);
+    await nextFrame();
+    if (!hasTransition) {
+      resolve();
+    }
   });
-  return _next.apply(this, arguments);
 }
-
-function end(element, classesOrStyles) {
-  var mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'remove';
-  var trs = Transition.getInstance(element);
-  element.removeEventListener('transitionend', trs.transitionEndHandler, false);
-
-  if (mode === 'remove') {
-    setClassesOrStyles(element, classesOrStyles.to, 'remove');
+function end(element, classesOrStyles, mode = "remove") {
+  const trs = Transition.getInstance(element);
+  element.removeEventListener("transitionend", trs.transitionEndHandler, false);
+  if (mode === "remove") {
+    setClassesOrStyles(element, classesOrStyles.to, "remove");
   }
-
-  setClassesOrStyles(element, classesOrStyles.active, 'remove');
+  setClassesOrStyles(element, classesOrStyles.active, "remove");
   trs.isTransitioning = false;
   trs.transitionEndHandler = null;
 }
-
-export default function transition(_x5, _x6) {
-  return _transition.apply(this, arguments);
+async function transition(element, name, endMode = "remove") {
+  const classesOrStyles = typeof name === "string" ? {
+    from: `${name}-from`,
+    active: `${name}-active`,
+    to: `${name}-to`
+  } : {
+    from: "",
+    active: "",
+    to: "",
+    ...name
+  };
+  const trs = Transition.getInstance(element);
+  if (trs.isTransitioning) {
+    end(element, classesOrStyles);
+  }
+  await start(element, classesOrStyles);
+  await next(element, classesOrStyles);
+  end(element, classesOrStyles, endMode);
+  return Promise.resolve();
 }
-
-function _transition() {
-  _transition = _asyncToGenerator(function* (element, name) {
-    var endMode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'remove';
-    var classesOrStyles = typeof name === 'string' ? {
-      from: "".concat(name, "-from"),
-      active: "".concat(name, "-active"),
-      to: "".concat(name, "-to")
-    } : _objectSpread({
-      from: '',
-      active: '',
-      to: ''
-    }, name);
-    var trs = Transition.getInstance(element);
-
-    if (trs.isTransitioning) {
-      end(element, classesOrStyles);
-    }
-
-    yield start(element, classesOrStyles);
-    yield next(element, classesOrStyles);
-    end(element, classesOrStyles, endMode);
-    return Promise.resolve();
-  });
-  return _transition.apply(this, arguments);
-}
+export {
+  transition as default,
+  setClassesOrStyles
+};

package/utils/debounce.cjs

@@ -0,0 +1,39 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// packages/js-toolkit/utils/debounce.js
+var debounce_exports = {};
+__export(debounce_exports, {
+  default: () => debounce
+});
+function debounce(fn, delay = 300) {
+  let timeout;
+  return function debounced(...args) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      fn(...args);
+    }, delay);
+  };
+}
+module.exports = __toCommonJS(debounce_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/utils/debounce.js

@@ -1,14 +1,12 @@
-export default function debounce(fn) {
-  var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
-  var timeout;
-  return function debounced() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
+function debounce(fn, delay = 300) {
+  let timeout;
+  return function debounced(...args) {
     clearTimeout(timeout);
     timeout = setTimeout(() => {
       fn(...args);
     }, delay);
   };
-}
+}
+export {
+  debounce as default
+};

package/utils/focusTrap.cjs

@@ -0,0 +1,89 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// packages/js-toolkit/utils/focusTrap.js
+var focusTrap_exports = {};
+__export(focusTrap_exports, {
+  default: () => useFocusTrap,
+  saveActiveElement: () => saveActiveElement,
+  trap: () => trap,
+  untrap: () => untrap
+});
+var import_keyCodes = __toESM(require("./keyCodes.cjs"), 1);
+var FOCUSABLE_ELEMENTS = [
+  'a[href]:not([tabindex^="-"]):not([inert])',
+  'area[href]:not([tabindex^="-"]):not([inert])',
+  "input:not([disabled]):not([inert])",
+  "select:not([disabled]):not([inert])",
+  "textarea:not([disabled]):not([inert])",
+  "button:not([disabled]):not([inert])",
+  'iframe:not([tabindex^="-"]):not([inert])',
+  'audio:not([tabindex^="-"]):not([inert])',
+  'video:not([tabindex^="-"]):not([inert])',
+  '[contenteditable]:not([tabindex^="-"]):not([inert])',
+  '[tabindex]:not([tabindex^="-"]):not([inert])'
+];
+var focusedBefore;
+function saveActiveElement() {
+  focusedBefore = document.activeElement;
+}
+function trap(element, event) {
+  if (event.keyCode !== import_keyCodes.default.TAB) {
+    return;
+  }
+  if (!focusedBefore) {
+    focusedBefore = document.activeElement;
+  }
+  const focusableChildren = Array.from(element.querySelectorAll(FOCUSABLE_ELEMENTS.join(", ")));
+  const focusedItemIndex = document.activeElement instanceof HTMLElement ? focusableChildren.indexOf(document.activeElement) : -1;
+  if (!focusableChildren.length) {
+    return;
+  }
+  if (focusedItemIndex < 0) {
+    focusableChildren[0].focus();
+    event.preventDefault();
+  }
+  if (event.shiftKey && focusedItemIndex === 0) {
+    focusableChildren[focusableChildren.length - 1].focus();
+    event.preventDefault();
+  } else if (!event.shiftKey && focusedItemIndex === focusableChildren.length - 1) {
+    focusableChildren[0].focus();
+    event.preventDefault();
+  }
+}
+function untrap() {
+  if (focusedBefore && typeof focusedBefore.focus === "function") {
+    focusedBefore.focus();
+    focusedBefore = null;
+  }
+}
+function useFocusTrap() {
+  return { trap, untrap, saveActiveElement };
+}
+module.exports = __toCommonJS(focusTrap_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/utils/focusTrap.js

@@ -1,30 +1,37 @@
-import keyCodes from './keyCodes.js';
-var FOCUSABLE_ELEMENTS = ['a[href]:not([tabindex^="-"]):not([inert])', 'area[href]:not([tabindex^="-"]):not([inert])', 'input:not([disabled]):not([inert])', 'select:not([disabled]):not([inert])', 'textarea:not([disabled]):not([inert])', 'button:not([disabled]):not([inert])', 'iframe:not([tabindex^="-"]):not([inert])', 'audio:not([tabindex^="-"]):not([inert])', 'video:not([tabindex^="-"]):not([inert])', '[contenteditable]:not([tabindex^="-"]):not([inert])', '[tabindex]:not([tabindex^="-"]):not([inert])'];
-var focusedBefore;
-export function saveActiveElement() {
+import keyCodes from "./keyCodes.js";
+const FOCUSABLE_ELEMENTS = [
+  'a[href]:not([tabindex^="-"]):not([inert])',
+  'area[href]:not([tabindex^="-"]):not([inert])',
+  "input:not([disabled]):not([inert])",
+  "select:not([disabled]):not([inert])",
+  "textarea:not([disabled]):not([inert])",
+  "button:not([disabled]):not([inert])",
+  'iframe:not([tabindex^="-"]):not([inert])',
+  'audio:not([tabindex^="-"]):not([inert])',
+  'video:not([tabindex^="-"]):not([inert])',
+  '[contenteditable]:not([tabindex^="-"]):not([inert])',
+  '[tabindex]:not([tabindex^="-"]):not([inert])'
+];
+let focusedBefore;
+function saveActiveElement() {
   focusedBefore = document.activeElement;
 }
-export function trap(element, event) {
+function trap(element, event) {
   if (event.keyCode !== keyCodes.TAB) {
     return;
   }
-
   if (!focusedBefore) {
     focusedBefore = document.activeElement;
   }
-
-  var focusableChildren = Array.from(element.querySelectorAll(FOCUSABLE_ELEMENTS.join(', ')));
-  var focusedItemIndex = document.activeElement instanceof HTMLElement ? focusableChildren.indexOf(document.activeElement) : -1;
-
+  const focusableChildren = Array.from(element.querySelectorAll(FOCUSABLE_ELEMENTS.join(", ")));
+  const focusedItemIndex = document.activeElement instanceof HTMLElement ? focusableChildren.indexOf(document.activeElement) : -1;
   if (!focusableChildren.length) {
     return;
   }
-
   if (focusedItemIndex < 0) {
     focusableChildren[0].focus();
     event.preventDefault();
   }
-
   if (event.shiftKey && focusedItemIndex === 0) {
     focusableChildren[focusableChildren.length - 1].focus();
     event.preventDefault();
@@ -33,16 +40,18 @@ export function trap(element, event) {
     event.preventDefault();
   }
 }
-export function untrap() {
-  if (focusedBefore && typeof focusedBefore.focus === 'function') {
+function untrap() {
+  if (focusedBefore && typeof focusedBefore.focus === "function") {
     focusedBefore.focus();
     focusedBefore = null;
   }
 }
-export default function useFocusTrap() {
-  return {
-    trap,
-    untrap,
-    saveActiveElement
-  };
-}
+function useFocusTrap() {
+  return { trap, untrap, saveActiveElement };
+}
+export {
+  useFocusTrap as default,
+  saveActiveElement,
+  trap,
+  untrap
+};