@sesamehr/react-design-system 3.10.0 → 3.10.1

package/dist/Forms/Inputs/Combobox/ComboboxItem.js

@@ -0,0 +1,44 @@
+import { jsx as c } from "react/jsx-runtime";
+import { IconCheck as p } from "@sesame/orxata-icons/IconCheck";
+import { Icon as C } from "@sesame/orxata-icons/react";
+import { CommandItem as h } from "cmdk";
+import { forwardRef as I, useRef as k, useCallback as y, useEffect as w } from "react";
+import { useComboboxContext as R } from "./context.js";
+import { ListboxItem as A } from "../../../internal/Listbox/ListboxItem.js";
+const L = I(({ className: a, value: e, disabled: f = !1, children: l, ...u }, o) => {
+  const { value: r, select: b, registerLabel: d } = R(), m = Array.isArray(r) ? r.includes(e) : r === e, i = k(null), x = y(
+    (t) => {
+      i.current = t, typeof o == "function" ? o(t) : o && (o.current = t);
+    },
+    [o]
+  );
+  return w(() => {
+    var n, s;
+    const t = (s = (n = i.current) == null ? void 0 : n.textContent) == null ? void 0 : s.trim();
+    t && d(e, t);
+  }), /* @__PURE__ */ c(
+    h,
+    {
+      ref: x,
+      asChild: !0,
+      "data-slot": "combobox-item",
+      "data-state": m ? "checked" : "unchecked",
+      value: e,
+      disabled: f,
+      onSelect: b,
+      ...u,
+      children: /* @__PURE__ */ c(
+        A,
+        {
+          className: a,
+          indicator: m ? /* @__PURE__ */ c(C, { icon: p }) : null,
+          children: l
+        }
+      )
+    }
+  );
+});
+L.displayName = "OxComboboxItem";
+export {
+  L as ComboboxItem
+};

package/dist/Forms/Inputs/Combobox/ComboboxItemEdit.js

@@ -0,0 +1,98 @@
+import { jsx as J } from "react/jsx-runtime";
+import { forwardRef as M, useState as _, useRef as e, useCallback as l, useEffect as j } from "react";
+import { cn as Q } from "../../../lib/utils.js";
+import W from "./ComboboxItemEdit.module.css.js";
+import { useComboboxContext as X } from "./context.js";
+const Z = /* @__PURE__ */ new Set([
+  "Enter",
+  " ",
+  "ArrowUp",
+  "ArrowDown",
+  "Home",
+  "End"
+]), $ = 'input, textarea, select, [contenteditable="true"]', h = M(
+  ({
+    className: q,
+    value: o,
+    defaultValue: B,
+    onValueChange: p,
+    onCommit: d,
+    onCancel: A,
+    field: m,
+    children: E,
+    onClick: b,
+    onClickCapture: x,
+    onPointerMove: g,
+    onKeyDown: R,
+    ...D
+  }, c) => {
+    const { openEdit: P, closeEdit: i, inputRef: V } = X(), [s, H] = _(!1), w = e(null), f = o !== void 0 && p !== void 0, [Y, y] = _(
+      B ?? o
+    ), F = e(o);
+    !f && o !== F.current && (F.current = o, y(o));
+    const n = f ? o : Y, I = e({
+      currentValue: n,
+      controlled: f,
+      onValueChange: p,
+      onCancel: A
+    });
+    I.current = { currentValue: n, controlled: f, onValueChange: p, onCancel: A };
+    const S = l((t) => {
+      const { controlled: r, onValueChange: u } = I.current;
+      r || y(t), u == null || u(t);
+    }, []), N = e(void 0), L = e(!1), O = e(() => {
+    }), T = l(() => {
+      var t;
+      H(!1), i(O.current), (t = V.current) == null || t.focus();
+    }, [i, V]), a = l(() => {
+      var t, r;
+      S(N.current), T(), (r = (t = I.current).onCancel) == null || r.call(t);
+    }, [S, T]);
+    O.current = a;
+    const U = () => {
+      T(), d == null || d(n);
+    }, z = (t) => {
+      t == null || t.stopPropagation(), N.current = n, P(a), H(!0);
+    };
+    j(() => {
+      var t, r;
+      s && ((r = (t = w.current) == null ? void 0 : t.querySelector($)) == null || r.focus());
+    }, [s]), j(() => () => i(a), [i, a]);
+    const G = l(
+      (t) => {
+        w.current = t, typeof c == "function" ? c(t) : c && (c.current = t);
+      },
+      [c]
+    );
+    return /* @__PURE__ */ J(
+      "div",
+      {
+        ref: G,
+        "data-slot": "combobox-item-edit",
+        "data-editing": s ? "" : void 0,
+        className: Q(W.oxComboboxItemEdit, q),
+        ...D,
+        onClickCapture: (t) => {
+          L.current = s, x == null || x(t);
+        },
+        onClick: (t) => {
+          L.current && t.stopPropagation(), L.current = !1, b == null || b(t);
+        },
+        onPointerMove: (t) => {
+          s && t.stopPropagation(), g == null || g(t);
+        },
+        onKeyDown: (t) => {
+          if (R == null || R(t), !s || !Z.has(t.key)) return;
+          t.stopPropagation();
+          const r = t.target, u = r instanceof HTMLInputElement || r instanceof HTMLTextAreaElement;
+          t.key === "Enter" && u && (t.preventDefault(), U());
+        },
+        children: s ? m == null ? void 0 : m({ value: n, setValue: S, commit: U, cancel: a }) : E == null ? void 0 : E({ edit: z })
+      }
+    );
+  }
+);
+h.displayName = "OxComboboxItemEdit";
+export {
+  h as ComboboxItemEdit
+};

package/dist/Forms/Inputs/Combobox/ComboboxItemEdit.module.css.js

@@ -0,0 +1,7 @@
+const o = "_oxComboboxItemEdit_120vp_2", t = {
+  oxComboboxItemEdit: o
+};
+export {
+  t as default,
+  o as oxComboboxItemEdit
+};

package/dist/Forms/Inputs/Combobox/ComboboxSeparator.js

@@ -0,0 +1,9 @@
+import { jsx as o } from "react/jsx-runtime";
+import { CommandSeparator as m } from "cmdk";
+import { forwardRef as p } from "react";
+import { ListboxSeparator as e } from "../../../internal/Listbox/ListboxSeparator.js";
+const i = p(({ className: r, ...a }, t) => /* @__PURE__ */ o(m, { ref: t, asChild: !0, "data-slot": "combobox-separator", ...a, children: /* @__PURE__ */ o(e, { className: r }) }));
+i.displayName = "OxComboboxSeparator";
+export {
+  i as ComboboxSeparator
+};

package/dist/Forms/Inputs/Combobox/context.js

@@ -0,0 +1,12 @@
+import { createContext as t, useContext as e } from "react";
+const n = t(null);
+function r() {
+  const o = e(n);
+  if (!o)
+    throw new Error("Combobox sub-components must be used within <Combobox>.");
+  return o;
+}
+export {
+  n as ComboboxContext,
+  r as useComboboxContext
+};

package/dist/Forms/Inputs/Combobox/useChipOverflow.js

@@ -0,0 +1,45 @@
+import { useState as C, useCallback as q, useEffect as x } from "react";
+const v = '[data-slot="chip"]', E = "input";
+function a(s) {
+  const r = Number.parseFloat(s);
+  return Number.isFinite(r) ? r : 0;
+}
+function O({ row: s, sizer: r }, n) {
+  const [y, u] = C(n), f = q(() => {
+    var m;
+    const e = s.current;
+    if (!e) return;
+    if (n === 0) {
+      u(0);
+      return;
+    }
+    const c = [...e.querySelectorAll(v)];
+    if (c.length !== n) return;
+    const o = a(getComputedStyle(e).columnGap), l = e.querySelector(E), g = l ? a(getComputedStyle(l).minWidth) : 0, d = e.clientWidth - g - o, p = c.map((t) => t.offsetWidth);
+    if (p.reduce((t, i) => t + i, 0) + o * (n - 1) <= d) {
+      u(n);
+      return;
+    }
+    const S = (((m = r.current) == null ? void 0 : m.offsetWidth) ?? 0) + o;
+    let h = 0, b = 0;
+    for (let t = 0; t < n; t += 1) {
+      const i = p[t] + (t > 0 ? o : 0);
+      if (h + i + S > d) break;
+      h += i, b = t + 1;
+    }
+    u(Math.max(b, 1));
+  }, [s, r, n]);
+  return x(() => {
+    if (f(), typeof ResizeObserver > "u") return;
+    const e = new ResizeObserver(f), c = s.current;
+    if (c) {
+      e.observe(c);
+      for (const o of c.querySelectorAll(v))
+        e.observe(o);
+    }
+    return r.current && e.observe(r.current), () => e.disconnect();
+  }, [f, s, r]), y;
+}
+export {
+  O as useChipOverflow
+};

package/dist/Forms/Inputs/Combobox/useComboboxEditing.js

@@ -0,0 +1,19 @@
+import { useRef as s, useCallback as t, useMemo as l } from "react";
+function f() {
+  const e = s(null), r = t((n) => {
+    var o;
+    (o = e.current) == null || o.call(e), e.current = n;
+  }, []), c = t((n) => {
+    e.current === n && (e.current = null);
+  }, []), u = t(() => {
+    const n = e.current;
+    return n ? (n(), !0) : !1;
+  }, []);
+  return l(
+    () => ({ openEdit: r, closeEdit: c, cancelOpenEdit: u }),
+    [r, c, u]
+  );
+}
+export {
+  f as useComboboxEditing
+};

package/dist/Forms/Inputs/Combobox/useComboboxLabels.js

@@ -0,0 +1,13 @@
+import { useState as c, useCallback as b, useMemo as m } from "react";
+const p = /* @__PURE__ */ new Map();
+function M() {
+  const [o, l] = c(p), t = b((e, n) => {
+    l(
+      (s) => s.get(e) === n ? s : new Map(s).set(e, n)
+    );
+  }, []), a = b((e) => o.get(e), [o]);
+  return m(() => ({ register: t, labelFor: a }), [t, a]);
+}
+export {
+  M as useComboboxLabels
+};

package/dist/Forms/Inputs/Combobox/useComboboxSearch.js

@@ -0,0 +1,20 @@
+import { useMemo as s } from "react";
+import { useSearchDebounce as o } from "../../../hooks/useSearchDebounce/useSearchDebounce.js";
+function b(u, e) {
+  const { schedule: m, immediately: t } = o(
+    u,
+    (i) => e == null ? void 0 : e(i)
+  );
+  return s(
+    () => ({
+      schedule: e ? m : () => {
+      },
+      immediately: e ? t : () => {
+      }
+    }),
+    [e, m, t]
+  );
+}
+export {
+  b as useComboboxSearch
+};

package/dist/Forms/Inputs/DatePicker/DatePicker.js

@@ -0,0 +1,89 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useState as l } from "react";
+import { Popover as u } from "../../../Feedback/Popover/Popover.js";
+import { PopoverContent as N } from "../../../Feedback/Popover/PopoverContent.js";
+import { Calendar as j } from "../Calendar/Calendar.js";
+import { useCalendarLocale as C } from "../Calendar/useCalendarLocale.js";
+import H from "./DatePicker.module.css.js";
+import { DatePickerHeader as L } from "./DatePickerHeader.js";
+import { DatePickerTrigger as S } from "./DatePickerTrigger.js";
+import { formatDay as T } from "./format.js";
+const U = ({
+  className: f,
+  value: a,
+  defaultValue: d,
+  onValueChange: i,
+  visibleMonth: n,
+  onVisibleMonthChange: P,
+  onFocusDay: k,
+  months: m = 1,
+  constraints: c,
+  disabled: v = !1,
+  children: p,
+  icon: D,
+  day: y,
+  dataTestid: t
+}) => {
+  const { locale: O } = C(), [g, h] = l(d), r = a ?? g, [x, s] = l(!1), $ = (o) => {
+    a === void 0 && h(o), i == null || i(o), o && s(!1);
+  };
+  return /* @__PURE__ */ e(
+    u,
+    {
+      open: x,
+      onOpenChange: s,
+      trigger: /* @__PURE__ */ e(
+        S,
+        {
+          className: f,
+          empty: !r,
+          disabled: v,
+          icon: D,
+          dataTestid: t,
+          children: p ? p({ value: r }) : r && T(O, r)
+        }
+      ),
+      children: /* @__PURE__ */ e(
+        N,
+        {
+          align: "start",
+          sideOffset: 4,
+          dataTestid: `${t}-popover`,
+          children: /* @__PURE__ */ e(
+            "div",
+            {
+              className: H.oxDatePickerPanel,
+              style: { "--ox-date-picker-months": m },
+              children: /* @__PURE__ */ e(
+                j,
+                {
+                  value: r,
+                  onValueChange: $,
+                  visibleMonth: n,
+                  onVisibleMonthChange: P,
+                  onFocusDay: k,
+                  months: m,
+                  constraints: c,
+                  day: y,
+                  header: (o) => /* @__PURE__ */ e(
+                    L,
+                    {
+                      nav: o,
+                      constraints: c,
+                      dataTestid: `${t}-header`
+                    }
+                  ),
+                  dataTestid: `${t}-calendar`
+                }
+              )
+            }
+          )
+        }
+      )
+    }
+  );
+};
+U.displayName = "OxDatePicker";
+export {
+  U as DatePicker
+};

package/dist/Forms/Inputs/DatePicker/DatePicker.module.css.js

@@ -0,0 +1,7 @@
+const e = "_oxDatePickerPanel_vunr9_2", a = {
+  oxDatePickerPanel: e
+};
+export {
+  a as default,
+  e as oxDatePickerPanel
+};

package/dist/Forms/Inputs/DatePicker/DatePickerHeader.js

@@ -0,0 +1,67 @@
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import { IconChevronLeft as x } from "@sesame/orxata-icons/IconChevronLeft";
+import { IconChevronRight as f } from "@sesame/orxata-icons/IconChevronRight";
+import { Icon as n } from "@sesame/orxata-icons/react";
+import { useMemo as P } from "react";
+import { IconButton as s } from "../../../Button/IconButton/IconButton.js";
+import { useCalendarLocale as k } from "../Calendar/useCalendarLocale.js";
+import r from "./DatePickerHeader.module.css.js";
+import { formatMonthYearRange as N, formatMonthYear as i } from "./format.js";
+import { monthOf as a } from "./month.js";
+import { DatePickerHeaderContext as u } from "./useDatePickerHeader.js";
+const D = ({
+  nav: e,
+  constraints: c,
+  children: h,
+  dataTestid: m
+}) => {
+  const { locale: t } = k(), l = e.months > 1 ? N(
+    t,
+    e.month,
+    a(e.month, e.months - 1)
+  ) : i(t, e.month), d = P(() => ({ nav: e, constraints: c }), [e, c]);
+  return /* @__PURE__ */ o(u.Provider, { value: d, children: /* @__PURE__ */ p(
+    "div",
+    {
+      className: r.oxDatePickerHeader,
+      "data-slot": "date-picker-header",
+      "data-testid": m,
+      children: [
+        e.canGoPrev && /* @__PURE__ */ o(
+          s,
+          {
+            className: r.oxDatePickerHeaderPrev,
+            type: "button",
+            variant: "ghost",
+            size: "2xs",
+            "aria-label": i(
+              t,
+              a(e.month, -e.months)
+            ),
+            "data-testid": `${m}-prev-month`,
+            onClick: () => e.goToPrev(),
+            children: /* @__PURE__ */ o(n, { icon: x })
+          }
+        ),
+        h ?? /* @__PURE__ */ o("span", { className: r.oxDatePickerHeaderTitle, children: l }),
+        e.canGoNext && /* @__PURE__ */ o(
+          s,
+          {
+            className: r.oxDatePickerHeaderNext,
+            type: "button",
+            variant: "ghost",
+            size: "2xs",
+            "aria-label": i(t, a(e.month, e.months)),
+            "data-testid": `${m}-next-month`,
+            onClick: () => e.goToNext(),
+            children: /* @__PURE__ */ o(n, { icon: f })
+          }
+        )
+      ]
+    }
+  ) });
+};
+D.displayName = "OxDatePickerHeader";
+export {
+  D as DatePickerHeader
+};

package/dist/Forms/Inputs/DatePicker/DatePickerHeader.module.css.js

@@ -0,0 +1,13 @@
+const e = "_oxDatePickerHeader_1o3rk_2", r = "_oxDatePickerHeaderPrev_1o3rk_2", a = "_oxDatePickerHeaderNext_1o3rk_2", t = "_oxDatePickerHeaderTitle_1o3rk_2", o = {
+  oxDatePickerHeader: e,
+  oxDatePickerHeaderPrev: r,
+  oxDatePickerHeaderNext: a,
+  oxDatePickerHeaderTitle: t
+};
+export {
+  o as default,
+  e as oxDatePickerHeader,
+  a as oxDatePickerHeaderNext,
+  r as oxDatePickerHeaderPrev,
+  t as oxDatePickerHeaderTitle
+};

package/dist/Forms/Inputs/DatePicker/DatePickerMonthSelect.js

@@ -0,0 +1,49 @@
+import { jsxs as g, jsx as a } from "react/jsx-runtime";
+import { useCalendarLocale as S } from "../Calendar/useCalendarLocale.js";
+import { Select as v } from "../Select/Select.js";
+import { SelectContent as x } from "../Select/SelectContent.js";
+import { SelectItem as D } from "../Select/SelectItem.js";
+import { SelectTrigger as b } from "../Select/SelectTrigger.js";
+import i from "./DatePickerMonthSelect.module.css.js";
+import { formatMonthShort as s } from "./format.js";
+import { monthIndex as o } from "./month.js";
+import { useDatePickerHeader as M } from "./useDatePickerHeader.js";
+const k = ({
+  dataTestid: d
+}) => {
+  const { nav: t, constraints: h } = M(), { locale: l } = S(), { from: n, to: m } = h ?? {}, f = t.month.getFullYear(), u = Array.from({ length: 12 }, (e, c) => {
+    const r = new Date(f, c, 1);
+    return {
+      value: String(c),
+      label: s(l, r),
+      /* Read by month, the way `Calendar` reads them, so a `from` set mid-month
+         does not disable the month it sits in. */
+      disabled: n !== void 0 && o(r) < o(n) || m !== void 0 && o(r) > o(m)
+    };
+  }), p = (e) => t.goTo(new Date(t.month.getFullYear(), Number(e), 1));
+  return /* @__PURE__ */ g(
+    v,
+    {
+      className: i.oxDatePickerMonthSelect,
+      value: String(t.month.getMonth()),
+      onValueChange: p,
+      dataTestid: d,
+      children: [
+        /* @__PURE__ */ a(b, { children: () => s(l, t.month) }),
+        /* @__PURE__ */ a(x, { className: i.oxDatePickerMonthOptions, children: u.map((e) => /* @__PURE__ */ a(
+          D,
+          {
+            value: e.value,
+            disabled: e.disabled,
+            children: e.label
+          },
+          e.value
+        )) })
+      ]
+    }
+  );
+};
+k.displayName = "OxDatePickerMonthSelect";
+export {
+  k as DatePickerMonthSelect
+};

package/dist/Forms/Inputs/DatePicker/DatePickerMonthSelect.module.css.js

@@ -0,0 +1,9 @@
+const t = "_oxDatePickerMonthSelect_5o40a_2", e = "_oxDatePickerMonthOptions_5o40a_2", o = {
+  oxDatePickerMonthSelect: t,
+  oxDatePickerMonthOptions: e
+};
+export {
+  o as default,
+  e as oxDatePickerMonthOptions,
+  t as oxDatePickerMonthSelect
+};

package/dist/Forms/Inputs/DatePicker/DatePickerTrigger.js

@@ -0,0 +1,26 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { IconCalendar as n } from "@sesame/orxata-icons/IconCalendar";
+import { Icon as p } from "@sesame/orxata-icons/react";
+import { forwardRef as d } from "react";
+import { cn as g } from "../../../lib/utils.js";
+import r from "./DatePickerTrigger.module.css.js";
+const f = d(({ className: a, empty: o = !1, icon: t, children: i, dataTestid: c, ...s }, l) => /* @__PURE__ */ m(
+  "button",
+  {
+    ref: l,
+    type: "button",
+    "data-slot": "controller",
+    "data-testid": c,
+    "data-placeholder": o || void 0,
+    className: g(r.oxDatePickerTrigger, a),
+    ...s,
+    children: [
+      /* @__PURE__ */ e("span", { className: r.oxDatePickerTriggerValue, children: i }),
+      /* @__PURE__ */ e("span", { "data-slot": "icon", className: r.oxDatePickerTriggerIcon, children: t ?? /* @__PURE__ */ e(p, { icon: n, className: r.oxDatePickerTriggerGlyph }) })
+    ]
+  }
+));
+f.displayName = "OxDatePickerTrigger";
+export {
+  f as DatePickerTrigger
+};

package/dist/Forms/Inputs/DatePicker/DatePickerTrigger.module.css.js

@@ -0,0 +1,13 @@
+const e = "_oxDatePickerTrigger_1teyt_2", r = "_oxDatePickerTriggerValue_1teyt_2", t = "_oxDatePickerTriggerIcon_1teyt_2", g = "_oxDatePickerTriggerGlyph_1teyt_2", i = {
+  oxDatePickerTrigger: e,
+  oxDatePickerTriggerValue: r,
+  oxDatePickerTriggerIcon: t,
+  oxDatePickerTriggerGlyph: g
+};
+export {
+  i as default,
+  e as oxDatePickerTrigger,
+  g as oxDatePickerTriggerGlyph,
+  t as oxDatePickerTriggerIcon,
+  r as oxDatePickerTriggerValue
+};

package/dist/Forms/Inputs/DatePicker/DatePickerYearSelect.js

@@ -0,0 +1,41 @@
+import { jsxs as x, jsx as o } from "react/jsx-runtime";
+import { useCalendarLocale as D } from "../Calendar/useCalendarLocale.js";
+import { Select as Y } from "../Select/Select.js";
+import { SelectContent as k } from "../Select/SelectContent.js";
+import { SelectItem as y } from "../Select/SelectItem.js";
+import { SelectTrigger as P } from "../Select/SelectTrigger.js";
+import m from "./DatePickerYearSelect.module.css.js";
+import { formatYear as c } from "./format.js";
+import { yearRange as b } from "./month.js";
+import { useDatePickerHeader as N } from "./useDatePickerHeader.js";
+const C = ({
+  dataTestid: s
+}) => {
+  const { nav: t, constraints: i } = N(), { locale: a } = D(), { from: f, to: h } = i ?? {}, { first: p, last: u } = b(t.month, f, h), r = t.month.getFullYear(), n = Math.min(p, r), g = Math.max(u, r), S = Array.from({ length: g - n + 1 }, (e, v) => {
+    const l = n + v;
+    return {
+      value: String(l),
+      /* `Intl` and not `String(year)`: a locale with its own numerals writes
+         the year in them, and `toLocaleString` on a *number* would put a
+         thousands separator in it — `2,025`. */
+      label: c(a, new Date(l, 0, 1))
+    };
+  }), d = (e) => t.goTo(new Date(Number(e), t.month.getMonth(), 1));
+  return /* @__PURE__ */ x(
+    Y,
+    {
+      className: m.oxDatePickerYearSelect,
+      value: String(r),
+      onValueChange: d,
+      dataTestid: s,
+      children: [
+        /* @__PURE__ */ o(P, { children: () => c(a, t.month) }),
+        /* @__PURE__ */ o(k, { className: m.oxDatePickerYearOptions, children: S.map((e) => /* @__PURE__ */ o(y, { value: e.value, children: e.label }, e.value)) })
+      ]
+    }
+  );
+};
+C.displayName = "OxDatePickerYearSelect";
+export {
+  C as DatePickerYearSelect
+};

package/dist/Forms/Inputs/DatePicker/DatePickerYearSelect.module.css.js

@@ -0,0 +1,9 @@
+const e = "_oxDatePickerYearSelect_5f5ah_2", t = "_oxDatePickerYearOptions_5f5ah_2", a = {
+  oxDatePickerYearSelect: e,
+  oxDatePickerYearOptions: t
+};
+export {
+  a as default,
+  t as oxDatePickerYearOptions,
+  e as oxDatePickerYearSelect
+};