@onereach/ui-components-common 20.2.0-beta.5166.0 → 20.2.0-beta.5168.0

package/dist/hooks.js

@@ -1,4 +1,4 @@
-import { a, b as u, c as t, d as o, e as r, f as i, g as l, h as m, i as n, j as b, k as d, l as v, m as T, u as f, n as g } from "./useValidationAttributes-DxhcSj_h.js";
+import { a, b as u, c as t, d as o, e as r, f as i, g as l, h as m, i as n, j as b, k as d, l as v, m as T, u as f, n as g } from "./useValidationAttributes-Cp_70z2s.js";
 export {
   a as useControlAttributes,
   u as useDateFormat,

package/dist/index.js

@@ -1,11 +1,11 @@
 import { D as e, a as E } from "./dropdown-open-k6cFnrqA.js";
 import { g as t, a as R, s as T } from "./searchItemsByLabel-BhinsABA.js";
-import { D as r, L as A, T as O, a as C, b as i, c as D, d as l, e as S, f as N, g as m, h as X, i as n, j as u, k as P, l as L, m as M, u as I, n as g } from "./useValidationAttributes-DxhcSj_h.js";
+import { D as r, L as A, T as O, a as C, b as i, c as D, d as l, e as S, f as N, g as m, h as X, i as n, j as u, k as P, l as L, m as M, u as I, n as g } from "./useValidationAttributes-Cp_70z2s.js";
 import { DateFormat as f, TimeFormat as p } from "./types.js";
 import { C as F, a as c, b as x, c as b, d as B, e as y, f as G, g as h, h as v, i as U, j as V, k, l as w, m as j, H as W, p as q, o as K, t as Y, s as z, r as Q, q as Z, n as J, P as $, Q as aa, R as sa, u as ea, S as Ea, T as _a, v as ta, W as Ra, X as Ta, w as oa, x as ra, y as Aa, V as Oa, z as Ca, A as ia, _ as Da, B as la, D as Sa, E as Na, Y as ma, F as Xa, Z as na, G as ua, I as Pa, J as La, K as Ma, U as Ia, L as ga, M as da, N as fa, O as pa, $ as Ha, am as Fa, a5 as ca, a4 as xa, a2 as ba, a9 as Ba, a6 as ya, a0 as Ga, a3 as ha, aa as va, ab as Ua, ac as Va, ad as ka, ae as wa, af as ja, ag as Wa, ah as qa, ai as Ka, aj as Ya, ak as za, a7 as Qa, a8 as Za, a1 as Ja, al as $a } from "./extractCssVarName-IHa2pGlF.js";
 import { M as ss, f as es, c as Es, e as _s, l as ts, q as Rs, g as Ts, t as os, w as rs, p as As, m as Os, i as Cs, u as is, v as Ds, b as ls, k as Ss, h as Ns, a as ms, o as Xs, r as ns, d as us, s as Ps, j as Ls, n as Ms } from "./dom-CwV-xS38.js";
 import { i as gs } from "./isUndefined-B5qXrATz.js";
-import { i as fs } from "./isVisible-BuGrjvTY.js";
+import { i as fs } from "./isVisible-BogKi39W.js";
 export {
   F as CODE_BACKSPACE,
   c as CODE_BREAK,

package/dist/isVisible-BogKi39W.js

@@ -0,0 +1,4 @@
+const s = (i) => i.offsetWidth > 0 && i.offsetHeight > 0;
+export {
+  s as i
+};

package/dist/{useValidationAttributes-DxhcSj_h.js → useValidationAttributes-Cp_70z2s.js}

@@ -1,7 +1,7 @@
-import { useAttrs as h, computed as o, inject as g, isRef as p, ref as c, watch as m, getCurrentInstance as b, onMounted as R } from "vue";
-import { DateFormat as x, TimeFormat as M } from "./types.js";
+import { useAttrs as h, computed as u, inject as g, isRef as p, ref as d, watch as v, getCurrentInstance as b, onMounted as x } from "vue";
+import { DateFormat as R, TimeFormat as M } from "./types.js";
 import { r as C } from "./dom-CwV-xS38.js";
-import { i as E } from "./isVisible-BuGrjvTY.js";
+import { i as E } from "./isVisible-BogKi39W.js";
 import { useMutationObserver as S, useResizeObserver as $, refDebounced as F, useMediaQuery as P } from "@vueuse/core";
 import O from "@onereach/styles/screens.json";
 import { isVue3 as V } from "@/constants";
@@ -9,11 +9,11 @@ import Y from "@onereach/styles/tailwind.config.json";
 const _ = () => {
   const e = h();
   return {
-    readonly: o(() => e.readonly),
-    disabled: o(() => e.disabled),
-    "force-state": o(() => e["force-state"])
+    readonly: u(() => e.readonly),
+    disabled: u(() => e.disabled),
+    "force-state": u(() => e["force-state"])
   };
-}, q = Symbol(), L = Symbol(), N = Symbol(), k = (e) => o(() => e.value ?? g(q, x.Short)), G = (e, t) => o(() => typeof e.value != "function" ? new Intl.DateTimeFormat(t.value, {
+}, q = Symbol(), L = Symbol(), z = Symbol(), k = (e) => u(() => e.value ?? g(q, R.Short)), G = (e, t) => u(() => typeof e.value != "function" ? new Intl.DateTimeFormat(t.value, {
   dateStyle: e.value,
   timeZone: "UTC"
 }).formatToParts(Date.UTC(1, 0, 1, 1, 1)).reduce((r, n) => {
@@ -37,56 +37,62 @@ const _ = () => {
       return r + n.value;
   }
 }, "") : e.value(void 0, t.value)), J = (e, t) => {
-  const s = p(e) ? e : c(e), r = p(t) ? t : c();
+  const s = p(e) ? e : d(e), r = p(t) ? t : d();
   function n(a) {
-    return [...document.body.querySelectorAll("*")].filter(E).filter((u) => !u.isEqualNode(a)).map((u) => getComputedStyle(u)).map((u) => Number(u.zIndex)).filter((u) => !isNaN(u));
+    return Array.from(document.body.querySelectorAll("*")).reduce((o, i) => {
+      if (!i.isEqualNode(a) && E(i)) {
+        const c = Number(getComputedStyle(i).zIndex);
+        isNaN(c) || o.push(c);
+      }
+      return o;
+    }, []);
   }
   function l(a) {
     a.style.zIndex = String(Math.max(0, ...n(a)) + 1);
   }
-  m([s, r], ([a]) => {
+  v([s, r], ([a]) => {
     a && l(a);
   }, { immediate: !0 });
 }, K = () => {
   const e = h(), t = b();
-  return o(() => e.id ?? (t == null ? void 0 : t.uid.toString()));
-}, X = (e) => o(() => e.value ?? g(L, navigator.language)), ee = (e, t = {}) => {
-  const { hide: s = !0, threshold: r = 0 } = t, n = p(e) ? e : c(e), l = c([]), a = c([]);
-  function u() {
+  return u(() => e.id ?? (t == null ? void 0 : t.uid.toString()));
+}, X = (e) => u(() => e.value ?? g(L, navigator.language)), ee = (e, t = {}) => {
+  const { hide: s = !0, threshold: r = 0 } = t, n = p(e) ? e : d(e), l = d([]), a = d([]);
+  function o() {
     const i = n.value;
     if (i) {
-      const d = [...i.children].reduce(({ innerItems: v, outerItems: y }, T) => {
-        const f = T, { x: D, width: I } = f.getBoundingClientRect(), { x: A, width: w } = i.getBoundingClientRect();
-        return D + I > A + w + r ? (s && f.style.setProperty("visibility", "hidden"), {
-          innerItems: v,
+      const c = [...i.children].reduce(({ innerItems: m, outerItems: y }, T) => {
+        const f = T, { x: I, width: A } = f.getBoundingClientRect(), { x: D, width: w } = i.getBoundingClientRect();
+        return I + A > D + w + r ? (s && f.style.setProperty("visibility", "hidden"), {
+          innerItems: m,
           outerItems: [...y, f]
         }) : (s && f.style.removeProperty("visibility"), {
-          innerItems: [...v, f],
+          innerItems: [...m, f],
           outerItems: y
         });
       }, {
         innerItems: [],
         outerItems: []
       });
-      l.value = d.innerItems, a.value = d.outerItems;
+      l.value = c.innerItems, a.value = c.outerItems;
     } else
       l.value = [], a.value = [];
   }
-  return m(n, u, {
+  return v(n, o, {
     immediate: !0
-  }), S(n, u, {
+  }), S(n, o, {
     childList: !0
-  }), $(n, () => C(u)), {
+  }), $(n, () => C(o)), {
     innerItems: l,
     outerItems: a
   };
 }, te = (e, t, s = {}) => {
-  const r = c(e.value ? "open" : "closed");
-  m(e, (i) => {
+  const r = d(e.value ? "open" : "closed");
+  v(e, (i) => {
     r.value = i ? "open" : "closed";
   });
   const n = F(r, s.debounce ?? 0);
-  m(n, (i) => {
+  v(n, (i) => {
     switch (t("update:state", i), i) {
       case "open":
         t("open");
@@ -102,24 +108,24 @@ const _ = () => {
   function a() {
     r.value = "closed";
   }
-  function u() {
+  function o() {
     r.value = r.value === "open" ? "closed" : "open";
   }
   return {
     state: n,
     open: l,
     close: a,
-    toggle: u
+    toggle: o
   };
 };
 function re(e, t, s = {}) {
   const { defaultValue: r } = s;
-  return r ? o({
+  return r ? u({
     get: () => e.value ?? r.value,
     set: (n) => {
       t("update:modelValue", n);
     }
-  }) : o({
+  }) : u({
     get: () => e.value,
     set: (n) => {
       t("update:modelValue", n);
@@ -127,29 +133,29 @@ function re(e, t, s = {}) {
   });
 }
 function ne(e) {
-  const t = b(), s = c();
-  e ? m(e, (u) => {
-    s.value = u;
-  }) : R(() => {
+  const t = b(), s = d();
+  e ? v(e, (o) => {
+    s.value = o;
+  }) : x(() => {
     if (t) {
-      const u = t.vnode[V ? "el" : "elm"];
-      u instanceof Element && (s.value = u);
+      const o = t.vnode[V ? "el" : "elm"];
+      o instanceof Element && (s.value = o);
     }
   });
-  const r = o(() => a(s.value) || l.value), n = o(() => !r.value), l = P(`(min-width: ${O.md})`);
-  function a(u) {
-    var d;
-    if (!u)
+  const r = u(() => a(s.value) || l.value), n = u(() => !r.value), l = P(`(min-width: ${O.md})`);
+  function a(o) {
+    var c;
+    if (!o)
       return !1;
-    const i = (d = u.getAttribute("force-screen")) == null ? void 0 : d.split(/\s+/);
-    return i != null && i.some((v) => ["md", "lg", "xl"].includes(v)) ? !0 : a(u.parentElement ?? void 0);
+    const i = (c = o.getAttribute("force-screen")) == null ? void 0 : c.split(/\s+/);
+    return i != null && i.some((m) => ["md", "lg", "xl"].includes(m)) ? !0 : a(o.parentElement ?? void 0);
   }
   return {
     isDesktop: r,
     isMobile: n
   };
 }
-const ue = () => Y.theme, oe = (e) => o(() => e.value ?? g(N, M.Auto)), se = (e, t) => o(() => typeof e.value != "function" ? new Intl.DateTimeFormat(t.value, {
+const ue = () => Y.theme, oe = (e) => u(() => e.value ?? g(z, M.Auto)), se = (e, t) => u(() => typeof e.value != "function" ? new Intl.DateTimeFormat(t.value, {
   timeStyle: "short",
   hourCycle: e.value !== M.Auto ? e.value : void 0,
   timeZone: "UTC"
@@ -166,7 +172,7 @@ const ue = () => Y.theme, oe = (e) => o(() => e.value ?? g(N, M.Auto)), se = (e,
   }
 }, "") : e.value(void 0, t.value));
 function ae(e = !1) {
-  const t = c(e);
+  const t = d(e);
   function s() {
     t.value = !0;
   }
@@ -186,19 +192,19 @@ function ae(e = !1) {
 const ie = () => {
   const e = h();
   return {
-    required: o(() => e.required),
-    minlength: o(() => e.minlength),
-    maxlength: o(() => e.maxlength),
-    pattern: o(() => e.pattern),
-    min: o(() => e.min),
-    max: o(() => e.max),
-    step: o(() => e.step)
+    required: u(() => e.required),
+    minlength: u(() => e.minlength),
+    maxlength: u(() => e.maxlength),
+    pattern: u(() => e.pattern),
+    min: u(() => e.min),
+    max: u(() => e.max),
+    step: u(() => e.step)
   };
 };
 export {
   q as D,
   L,
-  N as T,
+  z as T,
   _ as a,
   k as b,
   G as c,

package/dist/utils/isVisible.d.ts

@@ -1 +1 @@
-export declare const isVisible: (element: Element) => boolean;
+export declare const isVisible: (element: HTMLElement) => boolean;

package/dist/utils.js

@@ -1,7 +1,7 @@
 import { C as E, a as _, b as R, c as e, d as T, e as t, f as A, g as C, h as O, i as r, j as S, k as o, l as N, m as i, H as D, p as X, o as P, t as l, s as L, r as n, q as M, n as I, P as g, Q as H, R as m, u as c, S as d, T as f, v as B, W as x, X as F, w as G, x as b, y as p, V as U, z as u, A as h, _ as y, B as v, D as V, E as W, Y as j, F as q, Z as K, G as Y, I as k, J as w, K as z, U as Q, L as Z, M as J, N as $, O as aa, $ as sa, am as Ea, a5 as _a, a4 as Ra, a2 as ea, a9 as Ta, a6 as ta, a0 as Aa, a3 as Ca, aa as Oa, ab as ra, ac as Sa, ad as oa, ae as Na, af as ia, ag as Da, ah as Xa, ai as Pa, aj as la, ak as La, a7 as na, a8 as Ma, a1 as Ia, al as ga } from "./extractCssVarName-IHa2pGlF.js";
 import { M as ma, f as ca, c as da, e as fa, l as Ba, q as xa, g as Fa, t as Ga, w as ba, p as pa, m as Ua, i as ua, u as ha, v as ya, b as va, k as Va, h as Wa, a as ja, o as qa, r as Ka, d as Ya, s as ka, j as wa, n as za } from "./dom-CwV-xS38.js";
 import { i as Za } from "./isUndefined-B5qXrATz.js";
-import { i as $a } from "./isVisible-BuGrjvTY.js";
+import { i as $a } from "./isVisible-BogKi39W.js";
 export {
   E as CODE_BACKSPACE,
   _ as CODE_BREAK,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components-common",
-  "version": "20.2.0-beta.5166.0",
+  "version": "20.2.0-beta.5168.0",
   "type": "module",
   "exports": {
     ".": {
@@ -59,7 +59,7 @@
     "prepare": "pnpm build"
   },
   "dependencies": {
-    "@onereach/styles": "^20.2.0-beta.5166.0",
+    "@onereach/styles": "^20.1.2",
     "@vueuse/core": "9.13.0",
     "lodash": "^4.17.21"
   },

package/src/hooks/useElevation.ts

@@ -11,12 +11,16 @@ export const useElevation = (
 
   // Functions
   function getPageElevations(currentElement: HTMLElement): number[] {
-    return ([...document.body.querySelectorAll('*')] as HTMLElement[])
-      .filter(isVisible)
-      .filter(element => !element.isEqualNode(currentElement))
-      .map((element) => getComputedStyle(element))
-      .map((style) => Number(style.zIndex))
-      .filter((zIndex) => !isNaN(zIndex));
+    return Array.from(document.body.querySelectorAll('*'))
+      .reduce((acc: number[], element) => {
+        if (!element.isEqualNode(currentElement) && isVisible(element as HTMLElement)) {
+          const zIndex = Number(getComputedStyle(element).zIndex);
+          if (!isNaN(zIndex)) {
+            acc.push(zIndex);
+          }
+        }
+        return acc;
+      }, []);
   }
 
   function setElementElevation(element: HTMLElement): void {

package/src/utils/isVisible.ts

@@ -1,3 +1,3 @@
-export const isVisible = (element: Element): boolean => {
-  return element.getClientRects().length > 0;
+export const isVisible = (element: HTMLElement): boolean => {
+  return element.offsetWidth > 0 && element.offsetHeight > 0;
 };

package/dist/isVisible-BuGrjvTY.js

@@ -1,4 +0,0 @@
-const t = (e) => e.getClientRects().length > 0;
-export {
-  t as i
-};