INIT

node_modules/bits-ui/dist/internal/focus.js

@@ -0,0 +1,113 @@
+import { getDocument, getWindow } from "svelte-toolbelt";
+import { isBrowser, isElementHidden, isSelectableInput } from "./is.js";
+/**
+ * Handles `initialFocus` prop behavior for the
+ * Calendar & RangeCalendar components.
+ */
+export function handleCalendarInitialFocus(calendar) {
+    if (!isBrowser)
+        return;
+    const selectedDay = calendar.querySelector("[data-selected]");
+    if (selectedDay)
+        return focusWithoutScroll(selectedDay);
+    const today = calendar.querySelector("[data-today]");
+    if (today)
+        return focusWithoutScroll(today);
+    const firstDay = calendar.querySelector("[data-calendar-date]");
+    if (firstDay)
+        return focusWithoutScroll(firstDay);
+}
+/**
+ * A utility function that focuses an element without scrolling.
+ */
+export function focusWithoutScroll(element) {
+    const doc = getDocument(element);
+    const win = getWindow(element);
+    const scrollPosition = {
+        x: win.pageXOffset || doc.documentElement.scrollLeft,
+        y: win.pageYOffset || doc.documentElement.scrollTop,
+    };
+    element.focus();
+    win.scrollTo(scrollPosition.x, scrollPosition.y);
+}
+/**
+ * A utility function that focuses an element.
+ */
+export function focus(element, { select = false } = {}) {
+    if (!element || !element.focus)
+        return;
+    const doc = getDocument(element);
+    if (doc.activeElement === element)
+        return;
+    const previouslyFocusedElement = doc.activeElement;
+    // prevent scroll on focus
+    element.focus({ preventScroll: true });
+    // only elect if its not the same element, it supports selection, and we need to select it
+    if (element !== previouslyFocusedElement && isSelectableInput(element) && select) {
+        element.select();
+    }
+}
+/**
+ * Attempts to focus the first element in a list of candidates.
+ * Stops when focus is successful.
+ */
+export function focusFirst(candidates, { select = false } = {}, getActiveElement) {
+    const previouslyFocusedElement = getActiveElement();
+    for (const candidate of candidates) {
+        focus(candidate, { select });
+        if (getActiveElement() !== previouslyFocusedElement)
+            return true;
+    }
+}
+/**
+ * Returns the first visible element in a list.
+ * NOTE: Only checks visibility up to the `container`.
+ */
+export function findVisible(elements, container) {
+    for (const element of elements) {
+        // we stop checking if it's hidden at the `container` level (excluding)
+        if (!isElementHidden(element, container))
+            return element;
+    }
+}
+/**
+ * Returns a list of potential tabbable candidates.
+ *
+ * NOTE: This is only a close approximation. For example it doesn't take into account cases like when
+ * elements are not visible. This cannot be worked out easily by just reading a property, but rather
+ * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
+ * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
+ */
+export function getTabbableCandidates(container) {
+    const nodes = [];
+    const doc = getDocument(container);
+    const walker = doc.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+        // oxlint-disable-next-line no-explicit-any
+        acceptNode: (node) => {
+            const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
+            if (node.disabled || node.hidden || isHiddenInput)
+                return NodeFilter.FILTER_SKIP;
+            // `.tabIndex` is not the same as the `tabindex` attribute. It works on the
+            // runtime's understanding of tabbability, so this automatically accounts
+            // for any kind of element that could be tabbed to.
+            return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+        },
+    });
+    while (walker.nextNode())
+        nodes.push(walker.currentNode);
+    // we do not take into account the order of nodes with positive `tabIndex` as it
+    // hinders accessibility to have tab order different from visual order.
+    return nodes;
+}
+/**
+ * A utility function that returns the first and last elements within a container that are
+ * visible and focusable.
+ */
+export function getTabbableEdges(container) {
+    const candidates = getTabbableCandidates(container);
+    const first = findVisible(candidates, container);
+    const last = findVisible(candidates.reverse(), container);
+    return [first, last];
+}