@als-tp/als-react-ts-ui 0.4.0 → 0.5.1

package/dist/als-react-ts-ui307.js

@@ -1,57 +1,106 @@
-import { createEventEmitter as s } from "./als-react-ts-ui304.js";
-import { ReactStore as f } from "./als-react-ts-ui243.js";
-import { createSelector as o } from "./als-react-ts-ui245.js";
-const a = {
-  open: o((e) => e.open),
-  domReferenceElement: o((e) => e.domReferenceElement),
-  referenceElement: o((e) => e.positionReference ?? e.referenceElement),
-  floatingElement: o((e) => e.floatingElement),
-  floatingId: o((e) => e.floatingId)
-};
-class g extends f {
-  constructor(n) {
-    const {
-      nested: t,
-      noEmit: r,
-      onOpenChange: i,
-      triggerElements: m,
-      ...c
-    } = n;
-    super({
-      ...c,
-      positionReference: c.referenceElement,
-      domReferenceElement: c.referenceElement
-    }, {
-      onOpenChange: i,
-      dataRef: {
-        current: {}
-      },
-      events: s(),
-      nested: t,
-      noEmit: r,
-      triggerElements: m
-    }, a);
-  }
-  /**
-   * Emits the `openchange` event through the internal event emitter and calls the `onOpenChange` handler with the provided arguments.
-   *
-   * @param newOpen The new open state.
-   * @param eventDetails Details about the event that triggered the open state change.
-   */
-  setOpen = (n, t) => {
-    if (this.context.dataRef.current.openEvent = n ? t.event : void 0, !this.context.noEmit) {
-      const r = {
-        open: n,
-        reason: t.reason,
-        nativeEvent: t.event,
-        nested: this.context.nested,
-        triggerElement: t.trigger
-      };
-      this.context.events.emit("openchange", r);
+import { getWindow as u, isOverflowElement as Y } from "./als-react-ts-ui320.js";
+import { isIOS as W, isWebKit as E } from "./als-react-ts-ui351.js";
+import { ownerDocument as n } from "./als-react-ts-ui352.js";
+import { useIsoLayoutEffect as T } from "./als-react-ts-ui267.js";
+import { Timeout as k } from "./als-react-ts-ui297.js";
+import { AnimationFrame as z } from "./als-react-ts-ui346.js";
+import { NOOP as H } from "./als-react-ts-ui304.js";
+let L = {}, C = {}, O = "";
+function F(r) {
+  if (typeof document > "u")
+    return !1;
+  const o = n(r);
+  return u(o).innerWidth - o.documentElement.clientWidth > 0;
+}
+function j(r) {
+  const o = n(r), t = o.documentElement, e = o.body, l = Y(t) ? t : e, s = l.style.overflow;
+  return l.style.overflow = "hidden", () => {
+    l.style.overflow = s;
+  };
+}
+function I(r) {
+  const o = n(r), t = o.documentElement, e = o.body, l = u(t);
+  let s = 0, c = 0;
+  const h = z.create(), f = typeof CSS < "u" && CSS.supports?.("scrollbar-gutter", "stable");
+  if (E && (l.visualViewport?.scale ?? 1) !== 1)
+    return () => {
+    };
+  function d() {
+    const a = l.getComputedStyle(t), i = l.getComputedStyle(e), y = (a.scrollbarGutter || "").includes("both-edges") ? "stable both-edges" : "stable";
+    s = t.scrollTop, c = t.scrollLeft, L = {
+      scrollbarGutter: t.style.scrollbarGutter,
+      overflowY: t.style.overflowY,
+      overflowX: t.style.overflowX
+    }, O = t.style.scrollBehavior, C = {
+      position: e.style.position,
+      height: e.style.height,
+      width: e.style.width,
+      boxSizing: e.style.boxSizing,
+      overflowY: e.style.overflowY,
+      overflowX: e.style.overflowX,
+      scrollBehavior: e.style.scrollBehavior
+    };
+    const X = t.scrollHeight > t.clientHeight, B = t.scrollWidth > t.clientWidth, x = a.overflowY === "scroll" || i.overflowY === "scroll", G = a.overflowX === "scroll" || i.overflowX === "scroll", b = Math.max(0, l.innerWidth - t.clientWidth), w = Math.max(0, l.innerHeight - t.clientHeight), p = parseFloat(i.marginTop) + parseFloat(i.marginBottom), g = parseFloat(i.marginLeft) + parseFloat(i.marginRight), S = Y(t) ? t : e;
+    if (f) {
+      t.style.scrollbarGutter = y, S.style.overflowY = "hidden", S.style.overflowX = "hidden";
+      return;
     }
-    this.context.onOpenChange?.(n, t);
+    Object.assign(t.style, {
+      scrollbarGutter: y,
+      overflowY: "hidden",
+      overflowX: "hidden"
+    }), (X || x) && (t.style.overflowY = "scroll"), (B || G) && (t.style.overflowX = "scroll"), Object.assign(e.style, {
+      position: "relative",
+      height: p || w ? `calc(100dvh - ${p + w}px)` : "100dvh",
+      width: g || b ? `calc(100vw - ${g + b}px)` : "100vw",
+      boxSizing: "border-box",
+      overflow: "hidden",
+      scrollBehavior: "unset"
+    }), e.scrollTop = s, e.scrollLeft = c, t.setAttribute("data-base-ui-scroll-locked", ""), t.style.scrollBehavior = "unset";
+  }
+  function m() {
+    Object.assign(t.style, L), Object.assign(e.style, C), f || (t.scrollTop = s, t.scrollLeft = c, t.removeAttribute("data-base-ui-scroll-locked"), t.style.scrollBehavior = O);
+  }
+  function v() {
+    m(), h.request(d);
+  }
+  return d(), l.addEventListener("resize", v), () => {
+    h.cancel(), m(), typeof l.removeEventListener == "function" && l.removeEventListener("resize", v);
   };
 }
+class R {
+  lockCount = 0;
+  restore = null;
+  timeoutLock = k.create();
+  timeoutUnlock = k.create();
+  acquire(o) {
+    return this.lockCount += 1, this.lockCount === 1 && this.restore === null && this.timeoutLock.start(0, () => this.lock(o)), this.release;
+  }
+  release = () => {
+    this.lockCount -= 1, this.lockCount === 0 && this.restore && this.timeoutUnlock.start(0, this.unlock);
+  };
+  unlock = () => {
+    this.lockCount === 0 && this.restore && (this.restore?.(), this.restore = null);
+  };
+  lock(o) {
+    if (this.lockCount === 0 || this.restore !== null)
+      return;
+    const e = n(o).documentElement, l = u(e).getComputedStyle(e).overflowY;
+    if (l === "hidden" || l === "clip") {
+      this.restore = H;
+      return;
+    }
+    const s = W || !F(o);
+    this.restore = s ? j(o) : I(o);
+  }
+}
+const V = new R();
+function _(r = !0, o = null) {
+  T(() => {
+    if (r)
+      return V.acquire(o);
+  }, [r, o]);
+}
 export {
-  g as FloatingRootStore
+  _ as useScrollLock
 };

package/dist/als-react-ts-ui308.js

@@ -1,32 +1,24 @@
 import * as e from "react";
-import { useTimeout as l } from "./als-react-ts-ui229.js";
-import { createAttribute as m } from "./als-react-ts-ui299.js";
-import { TYPEABLE_SELECTOR as p } from "./als-react-ts-ui310.js";
-const S = m("safe-polygon"), v = `button,a,[role="button"],select,[tabindex]:not([tabindex="-1"]),${p}`;
-function T(t) {
-  return t ? !!t.closest(v) : !1;
-}
-function E(t) {
-  const o = e.useRef(void 0), s = e.useRef(!1), r = e.useRef(void 0), f = e.useRef(!0), i = e.useRef(!1), a = e.useRef(() => {
-  }), u = e.useRef(!1), c = l(), d = l(), R = e.useRef(void 0);
-  return e.useMemo(() => {
-    const n = t.context.dataRef.current;
-    return n.hoverInteractionState || (n.hoverInteractionState = {
-      pointerTypeRef: o,
-      interactedInsideRef: s,
-      handlerRef: r,
-      blockMouseMoveRef: f,
-      performedPointerEventsMutationRef: i,
-      unbindMouseMoveRef: a,
-      restTimeoutPendingRef: u,
-      openChangeTimeout: c,
-      restTimeout: d,
-      handleCloseOptionsRef: R
-    }), n.hoverInteractionState;
-  }, [t, o, s, r, f, i, a, u, c, d, R]);
+import { useStableCallback as i } from "./als-react-ts-ui266.js";
+import { useEnhancedClickHandler as u } from "./als-react-ts-ui353.js";
+function f(s) {
+  const [n, o] = e.useState(null), c = i((p, a) => {
+    s || o(a);
+  }), t = e.useCallback(() => {
+    o(null);
+  }, []), {
+    onClick: r,
+    onPointerDown: l
+  } = u(c);
+  return e.useMemo(() => ({
+    openMethod: n,
+    reset: t,
+    triggerProps: {
+      onClick: r,
+      onPointerDown: l
+    }
+  }), [n, t, r, l]);
 }
 export {
-  T as isInteractiveElement,
-  S as safePolygonIdentifier,
-  E as useHoverInteractionSharedState
+  f as useOpenInteractionType
 };

package/dist/als-react-ts-ui309.js

@@ -1,16 +1,35 @@
-import "react";
-import { isMouseLikePointerType as f } from "./als-react-ts-ui180.js";
-function u(r, e, n) {
-  if (n && !f(n))
-    return 0;
-  if (typeof r == "number")
-    return r;
-  if (typeof r == "function") {
-    const t = r();
-    return typeof t == "number" ? t : t?.[e];
-  }
-  return r?.[e];
+import { useId as f } from "./als-react-ts-ui306.js";
+import { useRefWithInit as g } from "./als-react-ts-ui222.js";
+import { useIsoLayoutEffect as E } from "./als-react-ts-ui267.js";
+import { isElement as d } from "./als-react-ts-ui320.js";
+import { useFloatingParentNodeId as S } from "./als-react-ts-ui364.js";
+import { FloatingRootStore as x } from "./als-react-ts-ui373.js";
+function v(p) {
+  const {
+    popupStore: o,
+    noEmit: i = !1,
+    treatPopupAsFloatingElement: a = !1,
+    onOpenChange: m
+  } = p, n = f(), c = S() != null, r = o.useState("open"), t = o.useState("activeTriggerElement"), s = o.useState(a ? "popupElement" : "positionerElement"), u = o.context.triggerElements, e = g(() => new x({
+    open: r,
+    referenceElement: t,
+    floatingElement: s,
+    triggerElements: u,
+    onOpenChange: m,
+    floatingId: n,
+    nested: c,
+    noEmit: i
+  })).current;
+  return E(() => {
+    const l = {
+      open: r,
+      floatingId: n,
+      referenceElement: t,
+      floatingElement: s
+    };
+    d(t) && (l.domReferenceElement = t), e.update(l);
+  }, [r, n, t, s, e]), e.context.onOpenChange = m, e.context.nested = c, e.context.noEmit = i, e;
 }
 export {
-  u as getDelay
+  v as useSyncedFloatingRootContext
 };

package/dist/als-react-ts-ui31.js

@@ -1,9 +1,112 @@
-import { jsx as o } from "react/jsx-runtime";
-import r from "./als-react-ts-ui112.js";
-function i(t) {
-  return /* @__PURE__ */ o("div", { className: r.root });
-}
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { forwardRef as j, useId as A } from "react";
+import { clsx as l } from "./als-react-ts-ui56.js";
+import a from "./als-react-ts-ui291.js";
+import { SwitchRoot as C } from "./als-react-ts-ui292.js";
+import { SwitchThumb as F } from "./als-react-ts-ui293.js";
+const L = j(
+  ({
+    size: d = "md",
+    color: N = "primary",
+    defaultChecked: w = !1,
+    checked: b,
+    onCheckedChange: u,
+    disabled: h = !1,
+    readOnly: v = !1,
+    required: t = !1,
+    name: S,
+    id: $,
+    label: s,
+    labelPosition: m = "right",
+    description: r,
+    "aria-label": x,
+    className: o,
+    style: f,
+    ...I
+  }, g) => {
+    const y = A(), c = $ || y, n = r ? `${c}-description` : void 0, p = /* @__PURE__ */ e(
+      C,
+      {
+        ref: g,
+        id: c,
+        name: S,
+        defaultChecked: w,
+        checked: b,
+        onCheckedChange: u,
+        disabled: h,
+        readOnly: v,
+        required: t,
+        "aria-label": s ? void 0 : x,
+        "aria-describedby": n,
+        className: l(
+          a.switch,
+          a[`switch--${d}`],
+          a[`switch--${N}`]
+        ),
+        ...I,
+        children: /* @__PURE__ */ e(
+          F,
+          {
+            className: l(a.thumb, a[`thumb--${d}`])
+          }
+        )
+      }
+    );
+    return s ? /* @__PURE__ */ i(
+      "div",
+      {
+        className: l(
+          a.container,
+          a[`container--${m}`],
+          {
+            [a["container--disabled"]]: h
+          },
+          o
+        ),
+        style: f,
+        children: [
+          m === "left" && /* @__PURE__ */ i("div", { className: a.labelContainer, children: [
+            /* @__PURE__ */ i("label", { htmlFor: c, className: a.label, children: [
+              s,
+              t && /* @__PURE__ */ e("span", { className: a.required, children: "*" })
+            ] }),
+            r && /* @__PURE__ */ e(
+              "p",
+              {
+                id: n,
+                className: a.description,
+                children: r
+              }
+            )
+          ] }),
+          p,
+          m === "right" && /* @__PURE__ */ i("div", { className: a.labelContainer, children: [
+            /* @__PURE__ */ i("label", { htmlFor: c, className: a.label, children: [
+              s,
+              t && /* @__PURE__ */ e("span", { className: a.required, children: "*" })
+            ] }),
+            r && /* @__PURE__ */ e(
+              "p",
+              {
+                id: n,
+                className: a.description,
+                children: r
+              }
+            )
+          ] })
+        ]
+      }
+    ) : /* @__PURE__ */ e(
+      "div",
+      {
+        className: l(a.container, o),
+        style: f,
+        children: p
+      }
+    );
+  }
+);
+L.displayName = "ALSSwitch";
 export {
-  i as ALSSwitch,
-  i as default
+  L as ALSSwitch
 };

package/dist/als-react-ts-ui310.js

@@ -1,11 +1,77 @@
-const t = "data-base-ui-focusable", e = "active", o = "selected", n = "input:not([type='hidden']):not([disabled]),[contenteditable]:not([contenteditable='false']),textarea:not([disabled])", s = "ArrowLeft", c = "ArrowRight", E = "ArrowUp", a = "ArrowDown";
+import * as r from "react";
+import { useId as P } from "./als-react-ts-ui306.js";
+import { useFloatingParentNodeId as S } from "./als-react-ts-ui364.js";
+import { EMPTY_OBJECT as F } from "./als-react-ts-ui304.js";
+import { getFloatingFocusElement as y } from "./als-react-ts-ui312.js";
+const T = /* @__PURE__ */ new Map([["select", "listbox"], ["combobox", "listbox"], ["label", !1]]);
+function k(c, I = {}) {
+  const a = "rootStore" in c ? c.rootStore : c, l = a.useState("open"), u = a.useState("floatingId"), x = a.useState("domReferenceElement"), d = a.useState("floatingElement"), {
+    enabled: m = !0,
+    role: o = "dialog"
+  } = I, M = P(), s = x?.id || M, t = r.useMemo(() => y(d)?.id || u, [d, u]), e = T.get(o) ?? o, p = S() != null, i = r.useMemo(() => e === "tooltip" || o === "label" ? F : {
+    "aria-haspopup": e === "alertdialog" ? "dialog" : e,
+    "aria-expanded": "false",
+    ...e === "listbox" && {
+      role: "combobox"
+    },
+    ...e === "menu" && p && {
+      role: "menuitem"
+    },
+    ...o === "select" && {
+      "aria-autocomplete": "none"
+    },
+    ...o === "combobox" && {
+      "aria-autocomplete": "list"
+    }
+  }, [e, p, o]), f = r.useMemo(() => e === "tooltip" || o === "label" ? {
+    [`aria-${o === "label" ? "labelledby" : "describedby"}`]: l ? t : void 0
+  } : {
+    ...i,
+    "aria-expanded": l ? "true" : "false",
+    "aria-controls": l ? t : void 0,
+    ...e === "menu" && {
+      id: s
+    }
+  }, [e, t, l, s, o, i]), b = r.useMemo(() => {
+    const n = {
+      id: t,
+      ...e && {
+        role: e
+      }
+    };
+    return e === "tooltip" || o === "label" ? n : {
+      ...n,
+      ...e === "menu" && {
+        "aria-labelledby": s
+      }
+    };
+  }, [e, t, s, o]), g = r.useCallback(({
+    active: n,
+    selected: R
+  }) => {
+    const E = {
+      role: "option",
+      ...n && {
+        id: `${t}-fui-option`
+      }
+    };
+    switch (o) {
+      case "select":
+      case "combobox":
+        return {
+          ...E,
+          "aria-selected": R
+        };
+    }
+    return {};
+  }, [t, o]);
+  return r.useMemo(() => m ? {
+    reference: f,
+    floating: b,
+    item: g,
+    trigger: i
+  } : {}, [m, f, b, i, g]);
+}
 export {
-  e as ACTIVE_KEY,
-  a as ARROW_DOWN,
-  s as ARROW_LEFT,
-  c as ARROW_RIGHT,
-  E as ARROW_UP,
-  t as FOCUSABLE_ATTRIBUTE,
-  o as SELECTED_KEY,
-  n as TYPEABLE_SELECTOR
+  k as useRole
 };