@serendie/ui 3.2.0 → 3.2.1-dev.202604251106

package/dist/node_modules/@zag-js/tabs/dist/tabs.machine.js

@@ -0,0 +1,268 @@
+import { getTriggerEl as n, getIndicatorEl as d, getElements as g, getRectByValue as V, getContentEl as T, getPrevTriggerEl as m, getNextTriggerEl as F, getLastTriggerEl as I, getFirstTriggerEl as b, getOffsetRect as E } from "./tabs.dom.js";
+import { isAnchorElement as A } from "../../dom-query/dist/node.js";
+import { callAll as R } from "../../utils/dist/functions.js";
+import { resizeObserverBorderBox as C } from "../../dom-query/dist/resize-observer.js";
+import { raf as c } from "../../dom-query/dist/raf.js";
+import { getFocusables as y } from "../../dom-query/dist/tabbable.js";
+import { clickIfLink as O } from "../../dom-query/dist/navigate.js";
+import { setup as p } from "../../core/dist/create-machine.js";
+import { isEqual as N } from "../../utils/dist/equal.js";
+var { createMachine: _ } = p(), z = _({
+  props({ props: e }) {
+    return {
+      dir: "ltr",
+      orientation: "horizontal",
+      activationMode: "automatic",
+      loopFocus: !0,
+      composite: !0,
+      navigate(t) {
+        O(t.node);
+      },
+      defaultValue: null,
+      ...e
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  context({ prop: e, bindable: t }) {
+    return {
+      value: t(() => ({
+        defaultValue: e("defaultValue"),
+        value: e("value"),
+        onChange(s) {
+          var a;
+          (a = e("onValueChange")) == null || a({ value: s });
+        }
+      })),
+      focusedValue: t(() => ({
+        defaultValue: e("value") || e("defaultValue"),
+        sync: !0,
+        onChange(s) {
+          var a;
+          (a = e("onFocusChange")) == null || a({ focusedValue: s });
+        }
+      })),
+      ssr: t(() => ({ defaultValue: !0 })),
+      indicatorRect: t(() => ({
+        defaultValue: null
+      })),
+      animateIndicator: t(() => ({
+        defaultValue: !1
+      }))
+    };
+  },
+  refs() {
+    return {
+      indicatorCleanup: null,
+      prevValue: null
+    };
+  },
+  watch({ context: e, prop: t, track: s, action: a }) {
+    s([() => e.get("value")], () => {
+      a(["syncIndicatorAnimation", "syncIndicatorRect", "syncTabIndex", "navigateIfNeeded"]);
+    }), s([() => t("dir"), () => t("orientation")], () => {
+      a(["syncIndicatorRect"]);
+    });
+  },
+  on: {
+    SET_VALUE: {
+      actions: ["setValue"]
+    },
+    CLEAR_VALUE: {
+      actions: ["clearValue"]
+    },
+    SET_INDICATOR_RECT: {
+      actions: ["setIndicatorRect"]
+    },
+    SYNC_TAB_INDEX: {
+      actions: ["syncTabIndex"]
+    },
+    INDICATOR_TRANSITION_END: {
+      actions: ["clearIndicatorAnimation"]
+    }
+  },
+  entry: ["syncPrevValue", "syncIndicatorRect", "syncTabIndex", "syncSsr"],
+  exit: ["cleanupObserver"],
+  states: {
+    idle: {
+      on: {
+        TAB_FOCUS: {
+          target: "focused",
+          actions: ["setFocusedValue"]
+        },
+        TAB_CLICK: {
+          target: "focused",
+          actions: ["setFocusedValue", "setValue"]
+        }
+      }
+    },
+    focused: {
+      on: {
+        TAB_CLICK: {
+          actions: ["setFocusedValue", "setValue"]
+        },
+        ARROW_PREV: [
+          {
+            guard: "selectOnFocus",
+            actions: ["focusPrevTab", "selectFocusedTab"]
+          },
+          {
+            actions: ["focusPrevTab"]
+          }
+        ],
+        ARROW_NEXT: [
+          {
+            guard: "selectOnFocus",
+            actions: ["focusNextTab", "selectFocusedTab"]
+          },
+          {
+            actions: ["focusNextTab"]
+          }
+        ],
+        HOME: [
+          {
+            guard: "selectOnFocus",
+            actions: ["focusFirstTab", "selectFocusedTab"]
+          },
+          {
+            actions: ["focusFirstTab"]
+          }
+        ],
+        END: [
+          {
+            guard: "selectOnFocus",
+            actions: ["focusLastTab", "selectFocusedTab"]
+          },
+          {
+            actions: ["focusLastTab"]
+          }
+        ],
+        TAB_FOCUS: {
+          actions: ["setFocusedValue"]
+        },
+        TAB_BLUR: {
+          target: "idle",
+          actions: ["clearFocusedValue"]
+        }
+      }
+    }
+  },
+  implementations: {
+    guards: {
+      selectOnFocus: ({ prop: e }) => e("activationMode") === "automatic"
+    },
+    actions: {
+      selectFocusedTab({ context: e, prop: t }) {
+        c(() => {
+          const s = e.get("focusedValue");
+          if (!s) return;
+          const l = t("deselectable") && e.get("value") === s ? null : s;
+          e.set("value", l);
+        });
+      },
+      setFocusedValue({ context: e, event: t, flush: s }) {
+        t.value != null && s(() => {
+          e.set("focusedValue", t.value);
+        });
+      },
+      clearFocusedValue({ context: e }) {
+        e.set("focusedValue", null);
+      },
+      setValue({ context: e, event: t, prop: s }) {
+        const a = s("deselectable") && e.get("value") === e.get("focusedValue");
+        e.set("value", a ? null : t.value);
+      },
+      clearValue({ context: e }) {
+        e.set("value", null);
+      },
+      focusFirstTab({ scope: e }) {
+        c(() => {
+          var t;
+          (t = b(e)) == null || t.focus();
+        });
+      },
+      focusLastTab({ scope: e }) {
+        c(() => {
+          var t;
+          (t = I(e)) == null || t.focus();
+        });
+      },
+      focusNextTab({ context: e, prop: t, scope: s, event: a }) {
+        const l = a.value ?? e.get("focusedValue");
+        if (!l) return;
+        const u = F(s, {
+          value: l,
+          loopFocus: t("loopFocus")
+        });
+        c(() => {
+          t("composite") ? u == null || u.focus() : (u == null ? void 0 : u.dataset.value) != null && e.set("focusedValue", u.dataset.value);
+        });
+      },
+      focusPrevTab({ context: e, prop: t, scope: s, event: a }) {
+        const l = a.value ?? e.get("focusedValue");
+        if (!l) return;
+        const u = m(s, {
+          value: l,
+          loopFocus: t("loopFocus")
+        });
+        c(() => {
+          t("composite") ? u == null || u.focus() : (u == null ? void 0 : u.dataset.value) != null && e.set("focusedValue", u.dataset.value);
+        });
+      },
+      syncTabIndex({ context: e, scope: t }) {
+        c(() => {
+          const s = e.get("value");
+          if (!s) return;
+          const a = T(t, s);
+          if (!a) return;
+          y(a).length > 0 ? a.removeAttribute("tabindex") : a.setAttribute("tabindex", "0");
+        });
+      },
+      cleanupObserver({ refs: e }) {
+        const t = e.get("indicatorCleanup");
+        t && t();
+      },
+      setIndicatorRect({ context: e, event: t, scope: s }) {
+        const a = t.id ?? e.get("value");
+        !d(s) || !a || !n(s, a) || e.set("indicatorRect", V(s, a));
+      },
+      syncSsr({ context: e }) {
+        e.set("ssr", !1);
+      },
+      syncPrevValue({ context: e, refs: t }) {
+        t.set("prevValue", e.get("value"));
+      },
+      syncIndicatorAnimation({ context: e, refs: t }) {
+        const s = t.get("prevValue"), a = e.get("value"), l = s != null && a != null && s !== a;
+        e.set("animateIndicator", l), t.set("prevValue", a);
+      },
+      clearIndicatorAnimation({ context: e }) {
+        e.set("animateIndicator", !1);
+      },
+      syncIndicatorRect({ context: e, refs: t, scope: s }) {
+        const a = t.get("indicatorCleanup");
+        if (a && a(), !d(s)) return;
+        const u = () => {
+          const o = n(s, e.get("value"));
+          if (!o) return;
+          const i = E(o);
+          e.set("indicatorRect", (r) => N(r, i) ? r : i);
+        };
+        u();
+        const f = g(s), v = R(...f.map((o) => C.observe(o, u)));
+        t.set("indicatorCleanup", v);
+      },
+      navigateIfNeeded({ context: e, prop: t, scope: s }) {
+        var u;
+        const a = e.get("value");
+        if (!a) return;
+        const l = n(s, a);
+        A(l) && ((u = t("navigate")) == null || u({ value: a, node: l, href: l.href }));
+      }
+    }
+  }
+});
+export {
+  z as machine
+};