@studiometa/js-toolkit 2.0.0-beta.9 → 2.0.0

package/utils/css/styles.js

@@ -1,19 +1,19 @@
-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,
+  remove
+};

package/utils/css/transition.cjs

@@ -0,0 +1,120 @@
+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 __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/js-toolkit/utils/css/transition.js
+var transition_exports = {};
+__export(transition_exports, {
+  default: () => transition,
+  setClassesOrStyles: () => setClassesOrStyles
+});
+module.exports = __toCommonJS(transition_exports);
+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 {
+  constructor(element) {
+    __publicField(this, "isTransitioning", false);
+    __publicField(this, "transitionEndHandler", null);
+    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" || Array.isArray(classesOrStyles)) {
+    classes[method](element, classesOrStyles);
+  } else {
+    styles[method](element, classesOrStyles);
+  }
+}
+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();
+}
+if (module.exports.default) module.exports = module.exports.default;

package/utils/css/transition.d.ts

@@ -1,20 +1,26 @@
 /**
  * Update either the classes or the styles of an element with the given method.
  *
- * @param {HTMLElement}   element         The element to update.
- * @param {String|Object} classesOrStyles The classes or styles to apply.
- * @param {String}        method          The method to use, one of `add` or `remove`.
+ * @param {HTMLElement}     element         The element to update.
+ * @param {ClassesOrStyles} classesOrStyles The classes or styles to apply.
+ * @param {'add'|'remove'}  method          The method to use, one of `add` or `remove`.
  */
-export function setClassesOrStyles(element: HTMLElement, classesOrStyles: string | any, method?: string): void;
+export function setClassesOrStyles(element: HTMLElement, classesOrStyles: ClassesOrStyles, method?: 'add' | 'remove'): void;
 /**
  * Manage CSS transition with class.
  *
  * This is heavily inspired by the Vue `<transition>` component
  * and the `@barba/css` package, many thanks to them!
  *
- * @param  {HTMLElement}   element The target element.
- * @param  {String|Object} name    The name of the transition or an object with the hooks classesOrStyles.
- * @param  {String}        endMode    Whether to remove or keep the `to` classes/styles
- * @return {Promise}               A promise resolving at the end of the transition.
+ * @param  {HTMLElement}             element The target element.
+ * @param  {string|TransitionStyles} name    The name of the transition or an object with the hooks classesOrStyles.
+ * @param  {string}                  endMode Whether to remove or keep the `to` classes/styles
+ * @returns {Promise<void>}                   A promise resolving at the end of the transition.
  */
-export default function transition(element: HTMLElement, name: string | any, endMode?: string): Promise<any>;
+export default function transition(element: HTMLElement, name: string | TransitionStyles, endMode?: string): Promise<void>;
+export type ClassesOrStyles = string | string[] | Partial<CSSStyleDeclaration>;
+export type TransitionStyles = {
+    from?: ClassesOrStyles;
+    active?: ClassesOrStyles;
+    to?: ClassesOrStyles;
+};

package/utils/css/transition.js

@@ -1,145 +1,96 @@
-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();
-
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import nextFrame from "../nextFrame.js";
+import * as classes from "./classes.js";
+import * as styles from "./styles.js";
+const cache = /* @__PURE__ */ new WeakMap();
 class Transition {
   constructor(element) {
-    _defineProperty(this, "isTransitioning", false);
-
-    _defineProperty(this, "transitionEndHandler", null);
-
+    __publicField(this, "isTransitioning", false);
+    __publicField(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') {
-    classes[method](element, classesOrStyles, method);
+function setClassesOrStyles(element, classesOrStyles, method = "add") {
+  if (typeof classesOrStyles === "string" || Array.isArray(classesOrStyles)) {
+    classes[method](element, classesOrStyles);
   } else {
-    styles[method](element, classesOrStyles, method);
+    styles[method](element, classesOrStyles);
   }
 }
-
 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,34 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/utils/debounce.js
+var debounce_exports = {};
+__export(debounce_exports, {
+  default: () => debounce
+});
+module.exports = __toCommonJS(debounce_exports);
+function debounce(fn, delay = 300) {
+  let timeout;
+  return function debounced(...args) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      fn(...args);
+    }, delay);
+  };
+}
+if (module.exports.default) module.exports = module.exports.default;

package/utils/debounce.d.ts

@@ -3,8 +3,8 @@
  * will not be triggered. The function will be called after it stops
  * being called for N milliseconds.
  *
- * @param {(...args:any[]) => void} fn The function to call.
- * @param {Number=} [delay=300] The delay in ms to wait before calling the function.
- * @return {(...args:any[]) => void} The debounced function.
+ * @param   {(...args:any[]) => void} fn The function to call.
+ * @param   {number} [delay=300] The delay in ms to wait before calling the function.
+ * @returns {(...args:any[]) => void} The debounced function.
  */
-export default function debounce(fn: (...args: any[]) => void, delay?: number | undefined): (...args: any[]) => void;
+export default function debounce(fn: (...args: any[]) => void, delay?: number): (...args: any[]) => void;

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,82 @@
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/utils/focusTrap.js
+var focusTrap_exports = {};
+__export(focusTrap_exports, {
+  default: () => useFocusTrap,
+  saveActiveElement: () => saveActiveElement,
+  trap: () => trap,
+  untrap: () => untrap
+});
+module.exports = __toCommonJS(focusTrap_exports);
+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.at(-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 };
+}
+if (module.exports.default) module.exports = module.exports.default;

package/utils/focusTrap.d.ts

@@ -14,6 +14,7 @@ export function trap(element: HTMLElement, event: KeyboardEvent): void;
 export function untrap(): void;
 /**
  * Use a trap/untrap tabs logic.
+ * @returns {{ trap: trap, untrap: untrap, saveActiveElement: saveActiveElement }}
  */
 export default function useFocusTrap(): {
     trap: typeof trap;

package/utils/focusTrap.js

@@ -1,48 +1,57 @@
-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();
+    focusableChildren.at(-1).focus();
     event.preventDefault();
   } else if (!event.shiftKey && focusedItemIndex === focusableChildren.length - 1) {
     focusableChildren[0].focus();
     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
+};