@serendie/ui 3.2.0 → 3.2.1-dev.202604210459

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

@@ -0,0 +1,690 @@
+import { setInteractionModality as F, trackFocusVisible as S, getInteractionModality as L } from "../../focus-visible/dist/index.js";
+import { getPlacement as C } from "../../popper/dist/get-placement.js";
+import { deriveSelectionState as h, resolveSelectedItems as H, createSelectedItemMap as G } from "../../collection/dist/selection-map.js";
+import { collection as k } from "./select.collection.js";
+import { getHiddenSelectEl as E, getItemEl as O, getContentEl as g, getTriggerEl as d, getClearTriggerEl as N, getPositionerEl as T } from "./select.dom.js";
+import { createMachine as y, createGuards as M } from "../../core/dist/create-machine.js";
+import { markAsInternalChangeEvent as A, trackFormControl as P } from "../../dom-query/dist/form.js";
+import { addOrRemove as V } from "../../utils/dist/array.js";
+import { raf as f } from "../../dom-query/dist/raf.js";
+import { getInitialFocus as D } from "../../dom-query/dist/initial-focus.js";
+import { observeAttributes as b } from "../../dom-query/dist/mutation-observer.js";
+import { trackDismissableElement as w } from "../../dismissable/dist/dismissable-layer.js";
+import { getByTypeahead as W } from "../../dom-query/dist/typeahead.js";
+import { isEqual as _ } from "../../utils/dist/equal.js";
+import { scrollIntoView as U } from "../../dom-query/dist/overflow.js";
+var { and: r, not: c, or: K } = M(), ne = y({
+  props({ props: e }) {
+    return {
+      loopFocus: !1,
+      closeOnSelect: !e.multiple,
+      composite: !0,
+      defaultValue: [],
+      ...e,
+      collection: e.collection ?? k.empty(),
+      translations: {
+        clearTriggerLabel: "Clear value",
+        ...e.translations
+      },
+      positioning: {
+        placement: "bottom-start",
+        gutter: 8,
+        ...e.positioning
+      }
+    };
+  },
+  context({ prop: e, bindable: t, getContext: l }) {
+    const i = e("value") ?? e("defaultValue") ?? [], n = e("collection").findMany(i);
+    return {
+      value: t(() => ({
+        defaultValue: e("defaultValue"),
+        value: e("value"),
+        isEqual: _,
+        onChange(s) {
+          var p;
+          const o = l(), m = e("collection"), I = o.get("selectedItemMap"), a = h({
+            values: s,
+            collection: m,
+            selectedItemMap: I
+          }), u = e("value") ?? s, v = u === s ? a : h({
+            values: u,
+            collection: m,
+            selectedItemMap: a.nextSelectedItemMap
+          });
+          return o.set("selectedItemMap", v.nextSelectedItemMap), (p = e("onValueChange")) == null ? void 0 : p({ value: s, items: a.selectedItems });
+        }
+      })),
+      highlightedValue: t(() => ({
+        defaultValue: e("defaultHighlightedValue") || null,
+        value: e("highlightedValue"),
+        onChange(s) {
+          var o;
+          (o = e("onHighlightChange")) == null || o({
+            highlightedValue: s,
+            highlightedItem: e("collection").find(s),
+            highlightedIndex: e("collection").indexOf(s)
+          });
+        }
+      })),
+      currentPlacement: t(() => ({
+        defaultValue: void 0
+      })),
+      fieldsetDisabled: t(() => ({
+        defaultValue: !1
+      })),
+      highlightedItem: t(() => ({
+        defaultValue: null
+      })),
+      selectedItemMap: t(() => ({
+        defaultValue: G({
+          selectedItems: n,
+          collection: e("collection")
+        })
+      }))
+    };
+  },
+  refs() {
+    return {
+      typeahead: { ...W.defaultOptions }
+    };
+  },
+  computed: {
+    hasSelectedItems: ({ context: e }) => e.get("value").length > 0,
+    isTypingAhead: ({ refs: e }) => e.get("typeahead").keysSoFar !== "",
+    isDisabled: ({ prop: e, context: t }) => !!e("disabled") || !!t.get("fieldsetDisabled"),
+    isInteractive: ({ prop: e }) => !(e("disabled") || e("readOnly")),
+    selectedItems: ({ context: e, prop: t }) => H({
+      values: e.get("value"),
+      collection: t("collection"),
+      selectedItemMap: e.get("selectedItemMap")
+    }),
+    valueAsString: ({ computed: e, prop: t }) => t("collection").stringifyItems(e("selectedItems"))
+  },
+  initialState({ prop: e }) {
+    return e("open") || e("defaultOpen") ? "open" : "idle";
+  },
+  entry: ["syncSelectElement"],
+  watch({ context: e, prop: t, track: l, action: i }) {
+    l([() => e.get("value").toString()], () => {
+      i(["syncSelectedItems", "syncSelectElement", "dispatchChangeEvent"]);
+    }), l([() => t("open")], () => {
+      i(["toggleVisibility"]);
+    }), l([() => e.get("highlightedValue")], () => {
+      i(["syncHighlightedItem"]);
+    }), l([() => t("collection").toString()], () => {
+      i(["syncCollection"]);
+    });
+  },
+  on: {
+    "HIGHLIGHTED_VALUE.SET": {
+      actions: ["setHighlightedItem"]
+    },
+    "HIGHLIGHTED_VALUE.CLEAR": {
+      actions: ["clearHighlightedItem"]
+    },
+    "ITEM.SELECT": {
+      actions: ["selectItem"]
+    },
+    "ITEM.CLEAR": {
+      actions: ["clearItem"]
+    },
+    "VALUE.SET": {
+      actions: ["setSelectedItems"]
+    },
+    "VALUE.CLEAR": {
+      actions: ["clearSelectedItems"]
+    },
+    "CLEAR.CLICK": {
+      actions: ["clearSelectedItems", "focusTriggerEl"]
+    }
+  },
+  effects: ["trackFormControlState"],
+  states: {
+    idle: {
+      tags: ["closed"],
+      on: {
+        "CONTROLLED.OPEN": [
+          {
+            guard: "isTriggerClickEvent",
+            target: "open",
+            actions: ["setInitialFocus", "highlightFirstSelectedItem"]
+          },
+          {
+            target: "open",
+            actions: ["setInitialFocus"]
+          }
+        ],
+        "TRIGGER.CLICK": [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"]
+          },
+          {
+            target: "open",
+            actions: ["invokeOnOpen", "setInitialFocus", "highlightFirstSelectedItem"]
+          }
+        ],
+        "TRIGGER.FOCUS": {
+          target: "focused"
+        },
+        OPEN: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"]
+          },
+          {
+            target: "open",
+            actions: ["setInitialFocus", "invokeOnOpen"]
+          }
+        ]
+      }
+    },
+    focused: {
+      tags: ["closed"],
+      on: {
+        "CONTROLLED.OPEN": [
+          {
+            guard: "isTriggerClickEvent",
+            target: "open",
+            actions: ["setInitialFocus", "highlightFirstSelectedItem"]
+          },
+          {
+            guard: "isTriggerArrowUpEvent",
+            target: "open",
+            actions: ["setInitialFocus", "highlightComputedLastItem"]
+          },
+          {
+            guard: K("isTriggerArrowDownEvent", "isTriggerEnterEvent"),
+            target: "open",
+            actions: ["setInitialFocus", "highlightComputedFirstItem"]
+          },
+          {
+            target: "open",
+            actions: ["setInitialFocus"]
+          }
+        ],
+        OPEN: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"]
+          },
+          {
+            target: "open",
+            actions: ["setInitialFocus", "invokeOnOpen"]
+          }
+        ],
+        "TRIGGER.BLUR": {
+          target: "idle"
+        },
+        "TRIGGER.CLICK": [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"]
+          },
+          {
+            target: "open",
+            actions: ["setInitialFocus", "invokeOnOpen", "highlightFirstSelectedItem"]
+          }
+        ],
+        "TRIGGER.ENTER": [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"]
+          },
+          {
+            target: "open",
+            actions: ["setInitialFocus", "invokeOnOpen", "highlightComputedFirstItem"]
+          }
+        ],
+        "TRIGGER.ARROW_UP": [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"]
+          },
+          {
+            target: "open",
+            actions: ["setInitialFocus", "invokeOnOpen", "highlightComputedLastItem"]
+          }
+        ],
+        "TRIGGER.ARROW_DOWN": [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"]
+          },
+          {
+            target: "open",
+            actions: ["setInitialFocus", "invokeOnOpen", "highlightComputedFirstItem"]
+          }
+        ],
+        "TRIGGER.ARROW_LEFT": [
+          {
+            guard: r(c("multiple"), "hasSelectedItems"),
+            actions: ["selectPreviousItem"]
+          },
+          {
+            guard: c("multiple"),
+            actions: ["selectLastItem"]
+          }
+        ],
+        "TRIGGER.ARROW_RIGHT": [
+          {
+            guard: r(c("multiple"), "hasSelectedItems"),
+            actions: ["selectNextItem"]
+          },
+          {
+            guard: c("multiple"),
+            actions: ["selectFirstItem"]
+          }
+        ],
+        "TRIGGER.HOME": {
+          guard: c("multiple"),
+          actions: ["selectFirstItem"]
+        },
+        "TRIGGER.END": {
+          guard: c("multiple"),
+          actions: ["selectLastItem"]
+        },
+        "TRIGGER.TYPEAHEAD": {
+          guard: c("multiple"),
+          actions: ["selectMatchingItem"]
+        }
+      }
+    },
+    open: {
+      tags: ["open"],
+      exit: ["scrollContentToTop"],
+      effects: ["trackDismissableElement", "trackFocusVisible", "computePlacement", "scrollToHighlightedItem"],
+      on: {
+        "CONTROLLED.CLOSE": [
+          {
+            guard: "restoreFocus",
+            target: "focused",
+            actions: ["focusTriggerEl", "clearHighlightedItem"]
+          },
+          {
+            target: "idle",
+            actions: ["clearHighlightedItem"]
+          }
+        ],
+        CLOSE: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnClose"]
+          },
+          {
+            guard: "restoreFocus",
+            target: "focused",
+            actions: ["invokeOnClose", "focusTriggerEl", "clearHighlightedItem"]
+          },
+          {
+            target: "idle",
+            actions: ["invokeOnClose", "clearHighlightedItem"]
+          }
+        ],
+        "TRIGGER.CLICK": [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnClose"]
+          },
+          {
+            target: "focused",
+            actions: ["invokeOnClose", "clearHighlightedItem"]
+          }
+        ],
+        "ITEM.CLICK": [
+          {
+            guard: r("closeOnSelect", "isOpenControlled"),
+            actions: ["selectHighlightedItem", "invokeOnClose"]
+          },
+          {
+            guard: "closeOnSelect",
+            target: "focused",
+            actions: ["selectHighlightedItem", "invokeOnClose", "focusTriggerEl", "clearHighlightedItem"]
+          },
+          {
+            actions: ["selectHighlightedItem"]
+          }
+        ],
+        "CONTENT.HOME": {
+          actions: ["highlightFirstItem"]
+        },
+        "CONTENT.END": {
+          actions: ["highlightLastItem"]
+        },
+        "CONTENT.ARROW_DOWN": [
+          {
+            guard: r("hasHighlightedItem", "loop", "isLastItemHighlighted"),
+            actions: ["highlightFirstItem"]
+          },
+          {
+            guard: "hasHighlightedItem",
+            actions: ["highlightNextItem"]
+          },
+          {
+            actions: ["highlightFirstItem"]
+          }
+        ],
+        "CONTENT.ARROW_UP": [
+          {
+            guard: r("hasHighlightedItem", "loop", "isFirstItemHighlighted"),
+            actions: ["highlightLastItem"]
+          },
+          {
+            guard: "hasHighlightedItem",
+            actions: ["highlightPreviousItem"]
+          },
+          {
+            actions: ["highlightLastItem"]
+          }
+        ],
+        "CONTENT.TYPEAHEAD": {
+          actions: ["highlightMatchingItem"]
+        },
+        "ITEM.POINTER_MOVE": {
+          actions: ["highlightItem"]
+        },
+        "ITEM.POINTER_LEAVE": {
+          actions: ["clearHighlightedItem"]
+        },
+        "POSITIONING.SET": {
+          actions: ["reposition"]
+        }
+      }
+    }
+  },
+  implementations: {
+    guards: {
+      loop: ({ prop: e }) => !!e("loopFocus"),
+      multiple: ({ prop: e }) => !!e("multiple"),
+      hasSelectedItems: ({ computed: e }) => !!e("hasSelectedItems"),
+      hasHighlightedItem: ({ context: e }) => e.get("highlightedValue") != null,
+      isFirstItemHighlighted: ({ context: e, prop: t }) => e.get("highlightedValue") === t("collection").firstValue,
+      isLastItemHighlighted: ({ context: e, prop: t }) => e.get("highlightedValue") === t("collection").lastValue,
+      closeOnSelect: ({ prop: e, event: t }) => !!(t.closeOnSelect ?? e("closeOnSelect")),
+      restoreFocus: ({ event: e }) => R(e),
+      // guard assertions (for controlled mode)
+      isOpenControlled: ({ prop: e }) => e("open") !== void 0,
+      isTriggerClickEvent: ({ event: e }) => {
+        var t;
+        return ((t = e.previousEvent) == null ? void 0 : t.type) === "TRIGGER.CLICK";
+      },
+      isTriggerEnterEvent: ({ event: e }) => {
+        var t;
+        return ((t = e.previousEvent) == null ? void 0 : t.type) === "TRIGGER.ENTER";
+      },
+      isTriggerArrowUpEvent: ({ event: e }) => {
+        var t;
+        return ((t = e.previousEvent) == null ? void 0 : t.type) === "TRIGGER.ARROW_UP";
+      },
+      isTriggerArrowDownEvent: ({ event: e }) => {
+        var t;
+        return ((t = e.previousEvent) == null ? void 0 : t.type) === "TRIGGER.ARROW_DOWN";
+      }
+    },
+    effects: {
+      trackFocusVisible({ scope: e }) {
+        var t;
+        return S({ root: (t = e.getRootNode) == null ? void 0 : t.call(e) });
+      },
+      trackFormControlState({ context: e, scope: t }) {
+        return P(E(t), {
+          onFieldsetDisabledChange(l) {
+            e.set("fieldsetDisabled", l);
+          },
+          onFormReset() {
+            const l = e.initial("value");
+            e.set("value", l);
+          }
+        });
+      },
+      trackDismissableElement({ scope: e, send: t, prop: l }) {
+        const i = () => g(e);
+        let n = !0;
+        return w(i, {
+          type: "listbox",
+          defer: !0,
+          exclude: [d(e), N(e)],
+          onFocusOutside: l("onFocusOutside"),
+          onPointerDownOutside: l("onPointerDownOutside"),
+          onInteractOutside(s) {
+            var o;
+            (o = l("onInteractOutside")) == null || o(s), n = !(s.detail.focusable || s.detail.contextmenu);
+          },
+          onDismiss() {
+            t({ type: "CLOSE", src: "interact-outside", restoreFocus: n });
+          }
+        });
+      },
+      computePlacement({ context: e, prop: t, scope: l }) {
+        const i = t("positioning");
+        return e.set("currentPlacement", i.placement), C(() => d(l), () => T(l), {
+          defer: !0,
+          ...i,
+          onComplete(o) {
+            e.set("currentPlacement", o.placement);
+          }
+        });
+      },
+      scrollToHighlightedItem({ context: e, prop: t, scope: l }) {
+        const i = (s) => {
+          const o = e.get("highlightedValue");
+          if (o == null || L() === "pointer") return;
+          const I = g(l), a = t("scrollToIndexFn");
+          if (a) {
+            const v = t("collection").indexOf(o);
+            a == null || a({
+              index: v,
+              immediate: s,
+              getElement: () => O(l, o)
+            });
+            return;
+          }
+          const u = O(l, o);
+          U(u, { rootEl: I, block: "nearest" });
+        };
+        return f(() => {
+          F("virtual"), i(!0);
+        }), b(() => g(l), {
+          defer: !0,
+          attributes: ["data-activedescendant"],
+          callback() {
+            i(!1);
+          }
+        });
+      }
+    },
+    actions: {
+      reposition({ context: e, prop: t, scope: l, event: i }) {
+        const n = () => T(l);
+        C(d(l), n, {
+          ...t("positioning"),
+          ...i.options,
+          defer: !0,
+          listeners: !1,
+          onComplete(s) {
+            e.set("currentPlacement", s.placement);
+          }
+        });
+      },
+      toggleVisibility({ send: e, prop: t, event: l }) {
+        e({ type: t("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: l });
+      },
+      highlightPreviousItem({ context: e, prop: t }) {
+        const l = e.get("highlightedValue");
+        if (l == null) return;
+        const i = t("collection").getPreviousValue(l, 1, t("loopFocus"));
+        i != null && e.set("highlightedValue", i);
+      },
+      highlightNextItem({ context: e, prop: t }) {
+        const l = e.get("highlightedValue");
+        if (l == null) return;
+        const i = t("collection").getNextValue(l, 1, t("loopFocus"));
+        i != null && e.set("highlightedValue", i);
+      },
+      highlightFirstItem({ context: e, prop: t }) {
+        const l = t("collection").firstValue;
+        e.set("highlightedValue", l);
+      },
+      highlightLastItem({ context: e, prop: t }) {
+        const l = t("collection").lastValue;
+        e.set("highlightedValue", l);
+      },
+      setInitialFocus({ scope: e }) {
+        f(() => {
+          const t = D({
+            root: g(e)
+          });
+          t == null || t.focus({ preventScroll: !0 });
+        });
+      },
+      focusTriggerEl({ event: e, scope: t }) {
+        R(e) && f(() => {
+          const l = d(t);
+          l == null || l.focus({ preventScroll: !0 });
+        });
+      },
+      selectHighlightedItem({ context: e, prop: t, event: l }) {
+        var s;
+        let i = l.value ?? e.get("highlightedValue");
+        if (i == null || !t("collection").has(i)) return;
+        (s = t("onSelect")) == null || s({ value: i }), i = t("deselectable") && !t("multiple") && e.get("value").includes(i) ? null : i, e.set("value", (o) => i == null ? [] : t("multiple") ? V(o, i) : [i]);
+      },
+      highlightComputedFirstItem({ context: e, prop: t, computed: l }) {
+        const i = t("collection"), n = l("hasSelectedItems") ? i.sort(e.get("value"))[0] : i.firstValue;
+        e.set("highlightedValue", n);
+      },
+      highlightComputedLastItem({ context: e, prop: t, computed: l }) {
+        const i = t("collection"), n = l("hasSelectedItems") ? i.sort(e.get("value"))[0] : i.lastValue;
+        e.set("highlightedValue", n);
+      },
+      highlightFirstSelectedItem({ context: e, prop: t, computed: l }) {
+        if (!l("hasSelectedItems")) return;
+        const i = t("collection").sort(e.get("value"))[0];
+        e.set("highlightedValue", i);
+      },
+      highlightItem({ context: e, event: t }) {
+        e.set("highlightedValue", t.value);
+      },
+      highlightMatchingItem({ context: e, prop: t, event: l, refs: i }) {
+        const n = t("collection").search(l.key, {
+          state: i.get("typeahead"),
+          currentValue: e.get("highlightedValue")
+        });
+        n != null && e.set("highlightedValue", n);
+      },
+      setHighlightedItem({ context: e, event: t }) {
+        e.set("highlightedValue", t.value);
+      },
+      clearHighlightedItem({ context: e }) {
+        e.set("highlightedValue", null);
+      },
+      selectItem({ context: e, prop: t, event: l }) {
+        var s;
+        (s = t("onSelect")) == null || s({ value: l.value });
+        const n = t("deselectable") && !t("multiple") && e.get("value").includes(l.value) ? null : l.value;
+        e.set("value", (o) => n == null ? [] : t("multiple") ? V(o, n) : [n]);
+      },
+      clearItem({ context: e, event: t }) {
+        e.set("value", (l) => l.filter((i) => i !== t.value));
+      },
+      setSelectedItems({ context: e, event: t }) {
+        e.set("value", t.value);
+      },
+      clearSelectedItems({ context: e }) {
+        e.set("value", []);
+      },
+      selectPreviousItem({ context: e, prop: t }) {
+        const [l] = e.get("value"), i = t("collection").getPreviousValue(l);
+        i && e.set("value", [i]);
+      },
+      selectNextItem({ context: e, prop: t }) {
+        const [l] = e.get("value"), i = t("collection").getNextValue(l);
+        i && e.set("value", [i]);
+      },
+      selectFirstItem({ context: e, prop: t }) {
+        const l = t("collection").firstValue;
+        l && e.set("value", [l]);
+      },
+      selectLastItem({ context: e, prop: t }) {
+        const l = t("collection").lastValue;
+        l && e.set("value", [l]);
+      },
+      selectMatchingItem({ context: e, prop: t, event: l, refs: i }) {
+        const n = t("collection").search(l.key, {
+          state: i.get("typeahead"),
+          currentValue: e.get("value")[0]
+        });
+        n != null && e.set("value", [n]);
+      },
+      scrollContentToTop({ prop: e, scope: t }) {
+        var l, i;
+        if (e("scrollToIndexFn")) {
+          const n = e("collection").firstValue;
+          (l = e("scrollToIndexFn")) == null || l({
+            index: 0,
+            immediate: !0,
+            getElement: () => O(t, n)
+          });
+        } else
+          (i = g(t)) == null || i.scrollTo(0, 0);
+      },
+      invokeOnOpen({ prop: e, context: t }) {
+        var l;
+        (l = e("onOpenChange")) == null || l({ open: !0, value: t.get("value") });
+      },
+      invokeOnClose({ prop: e, context: t }) {
+        var l;
+        (l = e("onOpenChange")) == null || l({ open: !1, value: t.get("value") });
+      },
+      syncSelectElement({ context: e, prop: t, scope: l }) {
+        const i = E(l);
+        if (i) {
+          if (e.get("value").length === 0 && !t("multiple")) {
+            i.selectedIndex = -1;
+            return;
+          }
+          for (const n of i.options)
+            n.selected = e.get("value").includes(n.value);
+        }
+      },
+      syncCollection({ context: e, prop: t }) {
+        const l = t("collection"), i = l.find(e.get("highlightedValue"));
+        i && e.set("highlightedItem", i);
+        const n = h({
+          values: e.get("value"),
+          collection: l,
+          selectedItemMap: e.get("selectedItemMap")
+        });
+        e.set("selectedItemMap", n.nextSelectedItemMap);
+      },
+      syncSelectedItems({ context: e, prop: t }) {
+        const l = h({
+          values: e.get("value"),
+          collection: t("collection"),
+          selectedItemMap: e.get("selectedItemMap")
+        });
+        e.set("selectedItemMap", l.nextSelectedItemMap);
+      },
+      syncHighlightedItem({ context: e, prop: t }) {
+        const l = t("collection"), i = e.get("highlightedValue"), n = i ? l.find(i) : null;
+        e.set("highlightedItem", n);
+      },
+      dispatchChangeEvent({ scope: e }) {
+        queueMicrotask(() => {
+          const t = E(e);
+          if (!t) return;
+          const l = e.getWin(), i = new l.Event("change", { bubbles: !0, composed: !0 });
+          t.dispatchEvent(A(i));
+        });
+      }
+    }
+  }
+});
+function R(e) {
+  var l;
+  const t = e.restoreFocus ?? ((l = e.previousEvent) == null ? void 0 : l.restoreFocus);
+  return t == null || !!t;
+}
+export {
+  ne as machine
+};

package/dist/node_modules/@zag-js/switch/dist/switch.anatomy.js

@@ -0,0 +1,6 @@
+import { createAnatomy as t } from "../../anatomy/dist/create-anatomy.js";
+var r = t("switch").parts("root", "label", "control", "thumb"), o = r.build();
+export {
+  r as anatomy,
+  o as parts
+};