@a-ui/react 7.13.0-beta.6 → 7.13.0-beta.8

package/es/index64.mjs

@@ -1,19 +1,61 @@
-import { getDefaultExportFromCjs as d } from "./index92.mjs";
-import { __module as r } from "./index93.mjs";
-import "./index94.mjs";
-import { __exports as f } from "./index95.mjs";
-(function(o, t) {
-  Object.defineProperty(t, "__esModule", {
-    value: !0
-  });
-  var a = f, l = u(a);
-  function u(e) {
-    return e && e.__esModule ? e : { default: e };
-  }
-  t.default = l.default, o.exports = t.default;
-})(r, r.exports);
-var i = r.exports;
-const n = /* @__PURE__ */ d(i);
+import { jsx as L } from "react/jsx-runtime";
+import { getPositionValue as R } from "./index62.mjs";
+import i from "react";
+function x({
+  value: a,
+  min: n,
+  max: r,
+  sliderMin: d,
+  sliderMax: p,
+  step: l,
+  direction: f,
+  sliderPos: s,
+  onUpdate: o,
+  getPositionFromValue: h,
+  ariaLabel: y
+}) {
+  const [w, D] = i.useState(0), E = i.useRef(null);
+  i.useEffect(() => {
+    s && D(s);
+  }, [f, s]);
+  const m = (e) => {
+    e.stopPropagation(), e.preventDefault();
+  }, g = () => {
+    document.addEventListener("mousemove", u), document.addEventListener("mouseup", c);
+  }, u = (e) => {
+    e.type === "mousemove" ? m(e) : e.stopPropagation();
+    const t = v(e);
+    return o && o(t);
+  }, c = (e) => {
+    document.removeEventListener("mousemove", u), document.removeEventListener("mouseup", c);
+    const t = v(e);
+    return o && o(t);
+  }, v = (e) => R(e, w, l, n, r, d, p, f), k = (e) => {
+    let t = a;
+    e.key === "ArrowUp" || e.key === "ArrowRight" ? (e.preventDefault(), t += l) : e.key === "ArrowDown" || e.key === "ArrowLeft" ? (e.preventDefault(), t -= l) : e.key === "End" ? (e.preventDefault(), t = r) : e.key === "Home" && (e.preventDefault(), t = n), t >= n && t <= r && o(t);
+  };
+  return /* @__PURE__ */ L(
+    "div",
+    {
+      className: "a-range-slider__handle",
+      tabIndex: 0,
+      style: {
+        left: h(a) + "px"
+      },
+      onMouseDown: g,
+      onTouchEnd: m,
+      onTouchMove: u,
+      onKeyDown: k,
+      role: "slider",
+      "aria-orientation": "horizontal",
+      "aria-valuemax": r,
+      "aria-valuemin": n,
+      "aria-valuenow": a,
+      "aria-label": y,
+      ref: E
+    }
+  );
+}
 export {
-  n as default
+  x as RangeSliderHandle
 };

package/es/index65.mjs

@@ -1,37 +1,64 @@
-import "./index104.mjs";
-import { tz as f } from "./index105.mjs";
-import { TIMEZONE as m } from "./index58.mjs";
-import { format as s } from "./index75.mjs";
-import { isBefore as a } from "./index106.mjs";
-import { isSameDay as o } from "./index107.mjs";
-import { isAfter as u } from "./index100.mjs";
-function S(t, e, r, n) {
-  return r && (a(t, new Date(r)) || o(t, new Date(r))) || e && (u(t, new Date(e)) || o(t, new Date(e))) || !!n?.find((i) => o(t, new Date(i)));
-}
-function h(t, e, r) {
-  return u(t, new Date(e)) && a(t, new Date(r));
-}
-function O(t, e) {
-  try {
-    return s(new Date(t), e);
-  } catch {
-    return t;
-  }
-}
-function g(t, e, r, n = "") {
-  try {
-    return s(t, e, { locale: r });
-  } catch {
-    return n;
-  }
-}
-function y(t, e, r) {
-  return f(m)(new Date(Date.UTC(t, e, r, 0, 0, 0))).toISOString();
+import { jsx as t, jsxs as v } from "react/jsx-runtime";
+import { SORT_ASCENDING as u, SORT_DESCENDING as d } from "./index58.mjs";
+import { classNames as m } from "./index55.mjs";
+import { wrapWithIf as C } from "./index54.mjs";
+import { Checkbox as S } from "./index14.mjs";
+function w({
+  columns: c,
+  selectable: p,
+  selected: a = [],
+  rows: _ = [],
+  onSelectAll: g,
+  sort: s,
+  small: f,
+  sortDirection: n,
+  tableId: r,
+  onSortClick: o,
+  actions: i
+}) {
+  const b = a.length && a.sort().join(",") === _.map((e) => e.id).sort().join(",");
+  return /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ v("tr", { children: [
+    p ? /* @__PURE__ */ t("th", { children: /* @__PURE__ */ t(
+      S,
+      {
+        name: `aui-table-checkbox-${r}-all`,
+        id: `aui-table-checkbox-${r}-all`,
+        checked: !!b,
+        indeterminate: !!a.length && !b,
+        onChange: g,
+        label: "selecteren",
+        showLabel: !1
+      }
+    ) }) : null,
+    c.map((e) => {
+      const x = m({
+        "u-text-right": !!e.alignRight,
+        "is-collapsed": !!e.sortable,
+        "is-condensed": !!f
+      }), l = s === e?.value && n === u, h = s === e?.value && n === d, N = m({
+        "a-table__sort-button": !0,
+        "a-table__sort-button--unsorted": s !== e?.value,
+        "a-table__sort-button--sorted-asc": l,
+        "a-table__sort-button--sorted-desc": h
+      });
+      return /* @__PURE__ */ t(
+        "th",
+        {
+          className: x,
+          ...e.sortable && (l || h) && { "aria-sort": l ? u : d },
+          ...e.sortable && { "aria-live": "polite" },
+          children: C(
+            e?.label,
+            /* @__PURE__ */ t("button", { onClick: (j) => o && o(e.value), className: N }),
+            !!e?.sortable
+          )
+        },
+        e?.value
+      );
+    }),
+    i?.buttons?.length ? /* @__PURE__ */ t("th", { children: i?.label }) : null
+  ] }) });
 }
 export {
-  O as formatIfValid,
-  g as formatWithFallback,
-  h as isBetween,
-  S as isInRange,
-  y as toUtcMidnightInBrussels
+  w as TableHeader
 };

package/es/index66.mjs

@@ -1,4 +1,62 @@
-var r = /* @__PURE__ */ ((S) => (S.DAYS = "d", S.MONTHS = "m", S.YEARS = "y", S))(r || {});
+import { jsx as a, jsxs as b } from "react/jsx-runtime";
+import { classNames as o } from "./index55.mjs";
+import { wrapWithIf as f } from "./index54.mjs";
+import { Checkbox as g } from "./index14.mjs";
+import { Button as k } from "./index10.mjs";
+function N({
+  actions: s,
+  columns: m,
+  small: d,
+  tableId: i,
+  selectable: l,
+  onSelect: r,
+  selected: u = [],
+  rows: p
+}) {
+  const h = o({
+    "is-clickable": !!l
+  }), c = (e, t) => {
+    const n = e.target;
+    return n?.classList.contains("a-button") || n.parentElement?.parentElement?.classList.contains("a-button") || n?.tagName === "A" && n?.getAttribute("href") || n.parentElement?.parentElement?.tagName === "A" && n.parentElement?.parentElement?.getAttribute("href") ? !1 : (e.preventDefault(), e.stopPropagation(), l && r && r(t.id));
+  };
+  return /* @__PURE__ */ a("tbody", { children: p.map((e) => /* @__PURE__ */ b("tr", { onClick: (t) => c(t, e), className: h, children: [
+    l ? /* @__PURE__ */ a("td", { children: /* @__PURE__ */ a(
+      g,
+      {
+        name: `aui-table-checkbox-${i}-${e.id}`,
+        id: `aui-table-checkbox-row-${i}-${e.id}`,
+        checked: (u || []).includes(e.id),
+        onChange: (t) => c(t, e),
+        label: e.checkboxLabel,
+        showLabel: !1
+      }
+    ) }) : null,
+    m.map((t) => {
+      const n = o({
+        "u-text-right": !!t.alignRight,
+        "u-text-bold": t.dataType === "primary",
+        small: t.dataType === "secondary",
+        "is-condensed": !!d
+      });
+      return /* @__PURE__ */ a("td", { className: n, children: t.transformFunction ? t.transformFunction(e[t?.value] || null) : e[t?.value] || null }, t?.value);
+    }),
+    f(
+      s?.buttons?.map((t) => /* @__PURE__ */ a(
+        k,
+        {
+          onClick: (n) => t?.onActionClick && t?.onActionClick(n, e.id),
+          ...t,
+          id: `aui-table-action-${i}-${t?.id}-${e.id}`,
+          size: t?.size || "small",
+          children: t?.label || t?.children
+        },
+        `aui-table-action-${i}-${t?.id}-${e.id}`
+      )) || null,
+      /* @__PURE__ */ a("td", {}),
+      !!s?.buttons?.length
+    )
+  ] }, e?.id)) });
+}
 export {
-  r as CalendarView
+  N as TableBody
 };

package/es/index67.mjs

@@ -1,76 +1,31 @@
-import { jsx as r, jsxs as M } from "react/jsx-runtime";
-import { DayButton as b } from "./index128.mjs";
-import { titleize as l } from "./index70.mjs";
-import { useState as B } from "react";
-import { isBetween as N } from "./index71.mjs";
-import { eachDayOfInterval as $ } from "./index129.mjs";
-import { endOfWeek as u } from "./index130.mjs";
-import { startOfWeek as d } from "./index131.mjs";
-import { format as k } from "./index81.mjs";
-import { startOfMonth as j } from "./index132.mjs";
-import { endOfMonth as V } from "./index133.mjs";
-import { isValid as s } from "./index79.mjs";
-import { isAfter as E } from "./index100.mjs";
-import { addWeeks as z } from "./index134.mjs";
-import { addDays as A } from "./index135.mjs";
-function Z({
-  value: w,
-  onChange: y,
-  activeMonth: m,
-  activeYear: a,
-  ariaLabelCurrentDay: D,
-  locale: n,
-  unavailableFrom: O,
-  unavailableTo: S,
-  highlight: _,
-  unavailable: g,
-  hoverStart: f
-}) {
-  const [c, p] = B(null), W = (t) => {
-    const o = [];
-    let e = d(t, { locale: n });
-    const i = u(t, { locale: n });
-    for (; s(e) && !E(e, i); ) {
-      let h = !1;
-      const I = new Date(a, m);
-      f && c && (h = N(e, f, c.toISOString())), o.push(
-        /* @__PURE__ */ r(
-          b,
-          {
-            ariaLabelCurrentDay: D,
-            unavailableFrom: O,
-            unavailableTo: S,
-            unavailable: g,
-            date: e,
-            hoverStyle: h,
-            highlight: _,
-            value: w,
-            monthYear: I,
-            onChange: y,
-            onMouseEnter: p,
-            onMouseLeave: () => p(null)
-          },
-          `day_${s(e) ? e.toISOString() : "invalid"}`
-        )
-      ), e = A(e, 1);
+import { useRef as u, useEffect as s, useState as i } from "react";
+import { isScrollAtTheEnd as a } from "./index55.mjs";
+function E() {
+  const [l, r] = i(!0), [n, o] = i(!0), t = u(null), c = (e) => {
+    r(e.scrollLeft <= 0), o(a(e));
+  };
+  return s(() => {
+    const e = t.current;
+    e && c(e);
+  }, [t]), s(() => {
+    function e() {
+      t.current && c(t.current);
     }
-    return /* @__PURE__ */ r("tr", { children: o }, `aui-calendar-week-${e.toISOString()}`);
-  }, v = () => {
-    const t = [], o = new Date(a, m);
-    let e = d(j(o), { locale: n });
-    const i = V(o);
-    for (; s(e) && !E(e, i); )
-      t.push(W(e)), e = z(e, 1);
-    return t;
-  }, x = $({
-    start: d(/* @__PURE__ */ new Date(), { locale: n }),
-    end: u(/* @__PURE__ */ new Date(), { locale: n })
-  });
-  return /* @__PURE__ */ r("div", { className: "m-datepicker__grid", children: /* @__PURE__ */ M("table", { children: [
-    /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ r("tr", { className: "m-datepicker__grid-head", children: x.map((t) => /* @__PURE__ */ r("th", { scope: "col", children: /* @__PURE__ */ r("span", { title: l(k(t, "EEEE", { locale: n })), children: l(k(t, "EEEEEE", { locale: n })) }) }, `aui-calendar-weekday-${t}`)) }) }),
-    /* @__PURE__ */ r("tbody", { className: "m-datepicker__grid-body", children: v() })
-  ] }) });
+    return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+  }, []), [t, (e) => {
+    const d = e.target;
+    c(d);
+  }, l, n];
+}
+function m(l) {
+  const r = u(null), n = (o) => {
+    r?.current?.contains(o?.target) || l(o?.target);
+  };
+  return s(() => (window.addEventListener("click", n), () => {
+    window.removeEventListener("click", n);
+  })), { elementRef: r };
 }
 export {
-  Z as DaysView
+  E as useHorizontalScroll,
+  m as useOutsideClick
 };

package/es/index68.mjs

@@ -1,31 +1,4 @@
-import { jsx as t, jsxs as p } from "react/jsx-runtime";
-import { classNames as h } from "./index52.mjs";
-import { titleize as f } from "./index70.mjs";
-import { DEFAULT_LOCALE as u } from "./index51.mjs";
-import { getMonth as c } from "./index73.mjs";
-import { getYear as m } from "./index72.mjs";
-import { format as M } from "./index81.mjs";
-function L({ onChange: d, value: o, activeYear: n, locale: l = u }) {
-  const s = (e) => {
-    const r = !!(o && e === c(o) && n === m(o)), a = h({
-      "is-current": e === c(/* @__PURE__ */ new Date()) && n === m(/* @__PURE__ */ new Date()),
-      "is-selected": r
-    }), i = new Date(n, e);
-    return /* @__PURE__ */ t("td", { children: /* @__PURE__ */ t("button", { type: "button", className: a, onClick: () => d(i), children: f(M(i, "MMMM", { locale: l })) }) });
-  };
-  return /* @__PURE__ */ t("div", { className: "m-datepicker__list", children: /* @__PURE__ */ t("table", { children: /* @__PURE__ */ t("tbody", { className: "m-datepicker__list-body", children: (() => {
-    let e = 0;
-    const r = [];
-    for (; e < 12; )
-      r.push(
-        /* @__PURE__ */ p("tr", { children: [
-          s(e),
-          s(e + 1)
-        ] }, `aui-calendar-month-pair-${e}`)
-      ), e += 2;
-    return r;
-  })() }) }) });
-}
+var r = /* @__PURE__ */ ((S) => (S.DAYS = "d", S.MONTHS = "m", S.YEARS = "y", S))(r || {});
 export {
-  L as MonthsView
+  r as CalendarView
 };

package/es/index69.mjs

@@ -1,38 +1,76 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { classNames as l } from "./index52.mjs";
-import { getYear as c } from "./index72.mjs";
-import { format as a } from "./index81.mjs";
-import { getDate as p } from "./index136.mjs";
-function D({ yearsRowsStart: s, value: t, activeMonth: o, onChange: d }) {
-  const i = (e) => {
-    const n = l({
-      "is-current": e === c(/* @__PURE__ */ new Date()),
-      "is-selected": !!(t && e === c(new Date(t)))
-    });
-    return /* @__PURE__ */ r("td", { children: /* @__PURE__ */ r(
-      "button",
-      {
-        type: "button",
-        className: n,
-        onClick: () => d(new Date(e, o, t ? p(t) : 1)),
-        children: a(new Date(e, o), "yyyy")
-      }
-    ) });
-  };
-  return /* @__PURE__ */ r("div", { className: "m-datepicker__list", children: /* @__PURE__ */ r("table", { children: /* @__PURE__ */ r("tbody", { className: "m-datepicker__list-body", children: (() => {
-    let e = 0;
-    const n = [];
-    for (; e < 16; )
-      n.push(
-        /* @__PURE__ */ m("tr", { children: [
-          i(s + e),
-          i(s + e + 1),
-          i(s + e + 2)
-        ] }, `aui-calendar-years-${e}`)
-      ), e += 3;
-    return n;
-  })() }) }) });
+import { jsx as r, jsxs as M } from "react/jsx-runtime";
+import { DayButton as b } from "./index97.mjs";
+import { titleize as l } from "./index72.mjs";
+import { useState as B } from "react";
+import { isBetween as N } from "./index73.mjs";
+import { eachDayOfInterval as $ } from "./index98.mjs";
+import { endOfWeek as u } from "./index99.mjs";
+import { startOfWeek as d } from "./index100.mjs";
+import { format as k } from "./index83.mjs";
+import { startOfMonth as j } from "./index101.mjs";
+import { endOfMonth as V } from "./index102.mjs";
+import { isValid as s } from "./index81.mjs";
+import { isAfter as E } from "./index103.mjs";
+import { addWeeks as z } from "./index104.mjs";
+import { addDays as A } from "./index105.mjs";
+function Z({
+  value: w,
+  onChange: y,
+  activeMonth: m,
+  activeYear: a,
+  ariaLabelCurrentDay: D,
+  locale: n,
+  unavailableFrom: O,
+  unavailableTo: S,
+  highlight: _,
+  unavailable: g,
+  hoverStart: f
+}) {
+  const [c, p] = B(null), W = (t) => {
+    const o = [];
+    let e = d(t, { locale: n });
+    const i = u(t, { locale: n });
+    for (; s(e) && !E(e, i); ) {
+      let h = !1;
+      const I = new Date(a, m);
+      f && c && (h = N(e, f, c.toISOString())), o.push(
+        /* @__PURE__ */ r(
+          b,
+          {
+            ariaLabelCurrentDay: D,
+            unavailableFrom: O,
+            unavailableTo: S,
+            unavailable: g,
+            date: e,
+            hoverStyle: h,
+            highlight: _,
+            value: w,
+            monthYear: I,
+            onChange: y,
+            onMouseEnter: p,
+            onMouseLeave: () => p(null)
+          },
+          `day_${s(e) ? e.toISOString() : "invalid"}`
+        )
+      ), e = A(e, 1);
+    }
+    return /* @__PURE__ */ r("tr", { children: o }, `aui-calendar-week-${e.toISOString()}`);
+  }, v = () => {
+    const t = [], o = new Date(a, m);
+    let e = d(j(o), { locale: n });
+    const i = V(o);
+    for (; s(e) && !E(e, i); )
+      t.push(W(e)), e = z(e, 1);
+    return t;
+  }, x = $({
+    start: d(/* @__PURE__ */ new Date(), { locale: n }),
+    end: u(/* @__PURE__ */ new Date(), { locale: n })
+  });
+  return /* @__PURE__ */ r("div", { className: "m-datepicker__grid", children: /* @__PURE__ */ M("table", { children: [
+    /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ r("tr", { className: "m-datepicker__grid-head", children: x.map((t) => /* @__PURE__ */ r("th", { scope: "col", children: /* @__PURE__ */ r("span", { title: l(k(t, "EEEE", { locale: n })), children: l(k(t, "EEEEEE", { locale: n })) }) }, `aui-calendar-weekday-${t}`)) }) }),
+    /* @__PURE__ */ r("tbody", { className: "m-datepicker__grid-body", children: v() })
+  ] }) });
 }
 export {
-  D as YearsView
+  Z as DaysView
 };

package/es/index70.mjs

@@ -1,6 +1,31 @@
-function t(e) {
-  return e.charAt(0).toUpperCase() + e.slice(1);
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import { classNames as h } from "./index55.mjs";
+import { titleize as f } from "./index72.mjs";
+import { DEFAULT_LOCALE as u } from "./index58.mjs";
+import { getMonth as c } from "./index75.mjs";
+import { getYear as m } from "./index74.mjs";
+import { format as M } from "./index83.mjs";
+function L({ onChange: d, value: o, activeYear: n, locale: l = u }) {
+  const s = (e) => {
+    const r = !!(o && e === c(o) && n === m(o)), a = h({
+      "is-current": e === c(/* @__PURE__ */ new Date()) && n === m(/* @__PURE__ */ new Date()),
+      "is-selected": r
+    }), i = new Date(n, e);
+    return /* @__PURE__ */ t("td", { children: /* @__PURE__ */ t("button", { type: "button", className: a, onClick: () => d(i), children: f(M(i, "MMMM", { locale: l })) }) });
+  };
+  return /* @__PURE__ */ t("div", { className: "m-datepicker__list", children: /* @__PURE__ */ t("table", { children: /* @__PURE__ */ t("tbody", { className: "m-datepicker__list-body", children: (() => {
+    let e = 0;
+    const r = [];
+    for (; e < 12; )
+      r.push(
+        /* @__PURE__ */ p("tr", { children: [
+          s(e),
+          s(e + 1)
+        ] }, `aui-calendar-month-pair-${e}`)
+      ), e += 2;
+    return r;
+  })() }) }) });
 }
 export {
-  t as titleize
+  L as MonthsView
 };

package/es/index71.mjs

@@ -1,37 +1,38 @@
-import "./index96.mjs";
-import { tz as f } from "./index97.mjs";
-import { TIMEZONE as m } from "./index51.mjs";
-import { format as s } from "./index81.mjs";
-import { isBefore as a } from "./index98.mjs";
-import { isSameDay as o } from "./index99.mjs";
-import { isAfter as u } from "./index100.mjs";
-function S(t, e, r, n) {
-  return r && (a(t, new Date(r)) || o(t, new Date(r))) || e && (u(t, new Date(e)) || o(t, new Date(e))) || !!n?.find((i) => o(t, new Date(i)));
-}
-function h(t, e, r) {
-  return u(t, new Date(e)) && a(t, new Date(r));
-}
-function O(t, e) {
-  try {
-    return s(new Date(t), e);
-  } catch {
-    return t;
-  }
-}
-function g(t, e, r, n = "") {
-  try {
-    return s(t, e, { locale: r });
-  } catch {
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { classNames as l } from "./index55.mjs";
+import { getYear as c } from "./index74.mjs";
+import { format as a } from "./index83.mjs";
+import { getDate as p } from "./index106.mjs";
+function D({ yearsRowsStart: s, value: t, activeMonth: o, onChange: d }) {
+  const i = (e) => {
+    const n = l({
+      "is-current": e === c(/* @__PURE__ */ new Date()),
+      "is-selected": !!(t && e === c(new Date(t)))
+    });
+    return /* @__PURE__ */ r("td", { children: /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        className: n,
+        onClick: () => d(new Date(e, o, t ? p(t) : 1)),
+        children: a(new Date(e, o), "yyyy")
+      }
+    ) });
+  };
+  return /* @__PURE__ */ r("div", { className: "m-datepicker__list", children: /* @__PURE__ */ r("table", { children: /* @__PURE__ */ r("tbody", { className: "m-datepicker__list-body", children: (() => {
+    let e = 0;
+    const n = [];
+    for (; e < 16; )
+      n.push(
+        /* @__PURE__ */ m("tr", { children: [
+          i(s + e),
+          i(s + e + 1),
+          i(s + e + 2)
+        ] }, `aui-calendar-years-${e}`)
+      ), e += 3;
     return n;
-  }
-}
-function y(t, e, r) {
-  return f(m)(new Date(Date.UTC(t, e, r, 0, 0, 0))).toISOString();
+  })() }) }) });
 }
 export {
-  O as formatIfValid,
-  g as formatWithFallback,
-  h as isBetween,
-  S as isInRange,
-  y as toUtcMidnightInBrussels
+  D as YearsView
 };

package/es/index72.mjs

@@ -1,7 +1,6 @@
-import { toDate as r } from "./index149.mjs";
-function n(t, e) {
-  return r(t, e?.in).getFullYear();
+function t(e) {
+  return e.charAt(0).toUpperCase() + e.slice(1);
 }
 export {
-  n as getYear
+  t as titleize
 };