@payfit/unity-components 2.47.5 → 2.47.6

package/dist/esm/components/tabs/parts/RawTab.js

@@ -1,18 +1,22 @@
-import { jsxs as i, jsx as l } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { Tab as b } from "react-aria-components/Tabs";
-import { useTabsContext as c } from "../Tabs.context.js";
-import { tabsVariant as f } from "../Tabs.variant.js";
-const d = p(
-  ({ children: a, suffix: r, id: o, ...t }, s) => {
-    const { variant: m, scrollable: n } = c(), { tab: e } = f({ variant: m, scrollable: n });
-    return /* @__PURE__ */ i(b, { ...t, ref: s, id: o, className: e(), children: [
-      a,
-      r ? /* @__PURE__ */ l("span", { children: r }) : null
-    ] });
-  }
-);
-d.displayName = "RawTab";
-export {
-  d as RawTab
-};
+import { useTabsContext as e } from "../Tabs.context.js";
+import { tabsVariant as t } from "../Tabs.variant.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Tab as a } from "react-aria-components/Tabs";
+//#region src/components/tabs/parts/RawTab.tsx
+var o = n(({ children: n, suffix: o, id: s, ...c }, l) => {
+	let { variant: u, scrollable: d } = e(), { tab: f } = t({
+		variant: u,
+		scrollable: d
+	});
+	return /* @__PURE__ */ i(a, {
+		...c,
+		ref: l,
+		id: s,
+		className: f(),
+		children: [n, o ? /* @__PURE__ */ r("span", { children: o }) : null]
+	});
+});
+o.displayName = "RawTab";
+//#endregion
+export { o as RawTab };

package/dist/esm/components/tabs/parts/TabList.js

@@ -1,83 +1,84 @@
-import { jsxs as A, jsx as c } from "react/jsx-runtime";
-import { forwardRef as C, useRef as B, useState as d, useCallback as j } from "react";
-import { TabList as L } from "react-aria-components/Tabs";
-import { useResizeObserver as q } from "usehooks-ts";
-import { useTabsContext as w } from "../Tabs.context.js";
-import { tabsVariant as z } from "../Tabs.variant.js";
-import { NavigationButton as g } from "./NavigationButton.js";
-const P = C(
-  ({ children: i }, f) => {
-    const t = B(null), [p, S] = d(!1), [R, v] = d(!1), { variant: y, scrollable: u } = w(), { tabList: b, scroller: W } = z({ variant: y, scrollable: u }), m = j(() => {
-      if (!t.current) return;
-      const { scrollLeft: r, scrollWidth: s, clientWidth: e } = t.current;
-      S(r > 0), v(r + e < s);
-    }, []);
-    q({
-      ref: t,
-      onResize: m
-    });
-    const N = (r) => {
-      m();
-    }, T = () => {
-      const r = t.current?.querySelectorAll("[role=tab]");
-      if (!t.current || !r) return 0;
-      const { scrollLeft: s } = t.current, e = Array.from(r);
-      for (let o = e.length - 1; o >= 0; o--) {
-        const l = e[o];
-        if (l.offsetLeft < s)
-          return -l.offsetWidth;
-      }
-      return 0;
-    }, x = () => {
-      const r = t.current?.querySelectorAll("[role=tab]");
-      if (!t.current || !r) return 0;
-      const { scrollLeft: s, clientWidth: e } = t.current, o = Array.from(r), l = s + e;
-      for (let n = 0; n < o.length - 1; n++) {
-        const a = o[n], h = a.offsetLeft + a.offsetWidth;
-        if (h > l || h < l)
-          return a.offsetWidth;
-      }
-      return 0;
-    };
-    return u ? /* @__PURE__ */ A("div", { className: "uy:relative", children: [
-      p && /* @__PURE__ */ c(
-        g,
-        {
-          direction: "left",
-          onPress: () => {
-            t.current?.scrollBy({
-              behavior: "smooth",
-              left: T()
-            });
-          }
-        }
-      ),
-      /* @__PURE__ */ c(
-        "div",
-        {
-          ref: t,
-          "data-testid": "scrollable-tab-list",
-          className: W(),
-          onScroll: N,
-          children: /* @__PURE__ */ c(L, { ref: f, className: b(), children: i })
-        }
-      ),
-      R && /* @__PURE__ */ c(
-        g,
-        {
-          direction: "right",
-          onPress: () => {
-            t.current?.scrollBy({
-              behavior: "smooth",
-              left: x()
-            });
-          }
-        }
-      )
-    ] }) : /* @__PURE__ */ c(L, { ref: f, className: b(), children: i });
-  }
-);
-P.displayName = "TabList";
-export {
-  P as TabList
-};
+import { useTabsContext as e } from "../Tabs.context.js";
+import { tabsVariant as t } from "../Tabs.variant.js";
+import { NavigationButton as n } from "./NavigationButton.js";
+import { forwardRef as r, useCallback as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useResizeObserver as l } from "usehooks-ts";
+import { TabList as u } from "react-aria-components/Tabs";
+//#region src/components/tabs/parts/TabList.tsx
+var d = r(({ children: r }, d) => {
+	let f = a(null), [p, m] = o(!1), [h, g] = o(!1), { variant: _, scrollable: v } = e(), { tabList: y, scroller: b } = t({
+		variant: _,
+		scrollable: v
+	}), x = i(() => {
+		if (!f.current) return;
+		let { scrollLeft: e, scrollWidth: t, clientWidth: n } = f.current;
+		m(e > 0), g(e + n < t);
+	}, []);
+	l({
+		ref: f,
+		onResize: x
+	});
+	let S = (e) => {
+		x();
+	}, C = () => {
+		let e = f.current?.querySelectorAll("[role=tab]");
+		if (!f.current || !e) return 0;
+		let { scrollLeft: t } = f.current, n = Array.from(e);
+		for (let e = n.length - 1; e >= 0; e--) {
+			let r = n[e];
+			if (r.offsetLeft < t) return -r.offsetWidth;
+		}
+		return 0;
+	}, w = () => {
+		let e = f.current?.querySelectorAll("[role=tab]");
+		if (!f.current || !e) return 0;
+		let { scrollLeft: t, clientWidth: n } = f.current, r = Array.from(e), i = t + n;
+		for (let e = 0; e < r.length - 1; e++) {
+			let t = r[e], n = t.offsetLeft + t.offsetWidth;
+			if (n > i || n < i) return t.offsetWidth;
+		}
+		return 0;
+	};
+	return v ? /* @__PURE__ */ c("div", {
+		className: "uy:relative",
+		children: [
+			p && /* @__PURE__ */ s(n, {
+				direction: "left",
+				onPress: () => {
+					f.current?.scrollBy({
+						behavior: "smooth",
+						left: C()
+					});
+				}
+			}),
+			/* @__PURE__ */ s("div", {
+				ref: f,
+				"data-testid": "scrollable-tab-list",
+				className: b(),
+				onScroll: S,
+				children: /* @__PURE__ */ s(u, {
+					ref: d,
+					className: y(),
+					children: r
+				})
+			}),
+			h && /* @__PURE__ */ s(n, {
+				direction: "right",
+				onPress: () => {
+					f.current?.scrollBy({
+						behavior: "smooth",
+						left: w()
+					});
+				}
+			})
+		]
+	}) : /* @__PURE__ */ s(u, {
+		ref: d,
+		className: y(),
+		children: r
+	});
+});
+d.displayName = "TabList";
+//#endregion
+export { d as TabList };

package/dist/esm/components/tabs/parts/TabPanel.js

@@ -1,10 +1,14 @@
-import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
 import { TabPanel as n } from "react-aria-components/Tabs";
-const p = t(
-  ({ children: a, id: r, ...o }, e) => /* @__PURE__ */ m(n, { "data-dd-privacy": "mask", id: r, ref: e, ...o, children: a })
-);
-p.displayName = "TabPanel";
-export {
-  p as TabPanel
-};
+//#region src/components/tabs/parts/TabPanel.tsx
+var r = e(({ children: e, id: r, ...i }, a) => /* @__PURE__ */ t(n, {
+	"data-dd-privacy": "mask",
+	id: r,
+	ref: a,
+	...i,
+	children: e
+}));
+r.displayName = "TabPanel";
+//#endregion
+export { r as TabPanel };

package/dist/esm/components/task-menu/TaskMenu.context.js

@@ -1,61 +1,47 @@
-import { jsx as x } from "react/jsx-runtime";
-import { useState as r, useRef as i, createContext as C, useContext as M } from "react";
-import { useId as G } from "react-aria/useId";
-import { useOverlayTrigger as P } from "react-aria/useOverlayTrigger";
-import { useOverlayTriggerState as I } from "react-stately/useOverlayTriggerState";
-const c = C({
-  currentTask: void 0,
-  setCurrentTask: void 0,
-  toggleTaskGroup: void 0,
-  expandedTaskGroup: void 0,
-  taskMenuId: "",
-  taskMenuContentId: "",
-  state: null,
-  triggerRef: { current: null },
-  overlayRef: { current: null },
-  triggerProps: {},
-  overlayProps: {}
+import { createContext as e, useContext as t, useRef as n, useState as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { useId as a } from "react-aria/useId";
+import { useOverlayTriggerState as o } from "react-stately/useOverlayTriggerState";
+import { useOverlayTrigger as s } from "react-aria/useOverlayTrigger";
+//#region src/components/task-menu/TaskMenu.context.tsx
+var c = e({
+	currentTask: void 0,
+	setCurrentTask: void 0,
+	toggleTaskGroup: void 0,
+	expandedTaskGroup: void 0,
+	taskMenuId: "",
+	taskMenuContentId: "",
+	state: null,
+	triggerRef: { current: null },
+	overlayRef: { current: null },
+	triggerProps: {},
+	overlayProps: {}
 });
-function O({ children: e }) {
-  const n = G(), [k, d] = r(null), [o, s] = r(
-    null
-  ), [p, u] = r(null), a = I({}), l = i(null), T = i(null), { triggerProps: v, overlayProps: f } = P(
-    { type: "dialog" },
-    a,
-    l
-  ), g = `task-menu-${n}`, m = (t) => {
-    t === p ? (u(null), s(null)) : (u(t), s(o === t ? null : t));
-  };
-  return /* @__PURE__ */ x(
-    c.Provider,
-    {
-      value: {
-        currentTask: k,
-        setCurrentTask: d,
-        toggleTaskGroup: m,
-        expandedTaskGroup: o,
-        taskMenuId: n,
-        taskMenuContentId: g,
-        state: a,
-        triggerRef: l,
-        overlayRef: T,
-        triggerProps: v,
-        overlayProps: f
-      },
-      children: e
-    }
-  );
+function l({ children: e }) {
+	let t = a(), [l, u] = r(null), [d, f] = r(null), [p, m] = r(null), h = o({}), g = n(null), _ = n(null), { triggerProps: v, overlayProps: y } = s({ type: "dialog" }, h, g), b = `task-menu-${t}`;
+	return /* @__PURE__ */ i(c.Provider, {
+		value: {
+			currentTask: l,
+			setCurrentTask: u,
+			toggleTaskGroup: (e) => {
+				e === p ? (m(null), f(null)) : (m(e), f(d === e ? null : e));
+			},
+			expandedTaskGroup: d,
+			taskMenuId: t,
+			taskMenuContentId: b,
+			state: h,
+			triggerRef: g,
+			overlayRef: _,
+			triggerProps: v,
+			overlayProps: y
+		},
+		children: e
+	});
 }
-function S() {
-  const e = M(c);
-  if (!e)
-    throw new Error(
-      "useTaskMenuContext must be used within an TaskMenuProvider"
-    );
-  return e;
+function u() {
+	let e = t(c);
+	if (!e) throw Error("useTaskMenuContext must be used within an TaskMenuProvider");
+	return e;
 }
-export {
-  c as TaskMenuContext,
-  O as TaskMenuProvider,
-  S as useTaskMenuContext
-};
+//#endregion
+export { l as TaskMenuProvider, u as useTaskMenuContext };

package/dist/esm/components/task-menu/TaskMenu.js

@@ -1,28 +1,21 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
-import { uyTv as d } from "@payfit/unity-themes";
-import { useBreakpointListener as l } from "../../hooks/use-breakpoint-listener.js";
-import { Content as y } from "./parts/Content.js";
-import { Header as f } from "./parts/Header.js";
-import { TaskMenuProvider as p } from "./TaskMenu.context.js";
-const c = d({
-  slots: {
-    base: [
-      "uy:relative uy:flex uy:flex-col uy:shadow-raising uy:bg-surface-neutral",
-      "uy:md:border uy:md:border-solid uy:md:border-border-neutral uy:md:rounded-300 uy:md:p-300"
-    ]
-  }
-}), b = u(
-  ({ children: o, label: s, ...t }, a) => {
-    const { base: n } = c(), e = l(), i = e === "xs" || e === "sm";
-    return /* @__PURE__ */ r("nav", { ...t, className: n(), ref: a, "aria-label": s, children: /* @__PURE__ */ m(p, { children: [
-      i && /* @__PURE__ */ r(f, {}),
-      /* @__PURE__ */ r(y, { children: o })
-    ] }) });
-  }
-);
-b.displayName = "TaskMenu";
-export {
-  b as TaskMenu,
-  c as taskMenu
-};
+import { useBreakpointListener as e } from "../../hooks/use-breakpoint-listener.js";
+import { TaskMenuProvider as t } from "./TaskMenu.context.js";
+import { Content as n } from "./parts/Content.js";
+import { Header as r } from "./parts/Header.js";
+import { forwardRef as i } from "react";
+import { uyTv as a } from "@payfit/unity-themes";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/task-menu/TaskMenu.tsx
+var c = a({ slots: { base: ["uy:relative uy:flex uy:flex-col uy:shadow-raising uy:bg-surface-neutral", "uy:md:border uy:md:border-solid uy:md:border-border-neutral uy:md:rounded-300 uy:md:p-300"] } }), l = i(({ children: i, label: a, ...l }, u) => {
+	let { base: d } = c(), f = e(), p = f === "xs" || f === "sm";
+	return /* @__PURE__ */ o("nav", {
+		...l,
+		className: d(),
+		ref: u,
+		"aria-label": a,
+		children: /* @__PURE__ */ s(t, { children: [p && /* @__PURE__ */ o(r, {}), /* @__PURE__ */ o(n, { children: i })] })
+	});
+});
+l.displayName = "TaskMenu";
+//#endregion
+export { l as TaskMenu, c as taskMenu };

package/dist/esm/components/task-menu/parts/Content.js

@@ -1,49 +1,44 @@
-import { jsx as t } from "react/jsx-runtime";
-import { uyTv as y } from "@payfit/unity-themes";
-import { FocusScope as p } from "react-aria/FocusScope";
-import { mergeProps as f } from "react-aria/mergeProps";
-import { useOverlay as b } from "react-aria/useOverlay";
-import { useBreakpointListener as u } from "../../../hooks/use-breakpoint-listener.js";
-import { useTaskMenuContext as r } from "../TaskMenu.context.js";
-const v = y({
-  base: [
-    "uy:flex uy:flex-col uy:mt-100",
-    "uy:flex uy:md:flex-col uy:md:gap-200 uy:md:list-none uy:md:mt-0",
-    "uy:focus-visible:outline-2 uy:focus-visible:outline uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
-  ]
-}), l = ({ children: e }) => {
-  const {
-    taskMenuContentId: o,
-    state: s,
-    overlayProps: a,
-    overlayRef: n
-  } = r(), i = u(), m = i === "xs" || i === "sm", { overlayProps: c } = b(
-    {
-      onClose: () => s?.close(),
-      isOpen: s?.isOpen,
-      isDismissable: !1
-    },
-    n
-  );
-  return /* @__PURE__ */ t(
-    "ol",
-    {
-      ...f(c, a),
-      ref: n,
-      className: v(),
-      id: o,
-      ...m && { "data-mobile-open": s?.isOpen },
-      children: e
-    }
-  );
-}, d = ({ children: e }) => {
-  const { state: o } = r();
-  return !!o?.isOpen && /* @__PURE__ */ t("div", { className: "uy:absolute uy:z-9 uy:top-full uy:inset-x-0 uy:h-[100dvh] uy:bg-surface-neutral", children: /* @__PURE__ */ t(p, { contain: !0, restoreFocus: !0, autoFocus: !0, children: /* @__PURE__ */ t(l, { children: e }) }) });
-}, x = ({ children: e }) => {
-  const o = u();
-  return o === "xs" || o === "sm" ? /* @__PURE__ */ t(d, { children: e }) : /* @__PURE__ */ t(l, { children: e });
-};
-x.displayName = "TaskMenuContent";
-export {
-  x as Content
+import { useBreakpointListener as e } from "../../../hooks/use-breakpoint-listener.js";
+import { useTaskMenuContext as t } from "../TaskMenu.context.js";
+import { uyTv as n } from "@payfit/unity-themes";
+import { jsx as r } from "react/jsx-runtime";
+import { mergeProps as i } from "react-aria/mergeProps";
+import { useOverlay as a } from "react-aria/useOverlay";
+import { FocusScope as o } from "react-aria/FocusScope";
+//#region src/components/task-menu/parts/Content.tsx
+var s = n({ base: [
+	"uy:flex uy:flex-col uy:mt-100",
+	"uy:flex uy:md:flex-col uy:md:gap-200 uy:md:list-none uy:md:mt-0",
+	"uy:focus-visible:outline-2 uy:focus-visible:outline uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
+] }), c = ({ children: n }) => {
+	let { taskMenuContentId: o, state: c, overlayProps: l, overlayRef: u } = t(), d = e(), f = d === "xs" || d === "sm", { overlayProps: p } = a({
+		onClose: () => c?.close(),
+		isOpen: c?.isOpen,
+		isDismissable: !1
+	}, u);
+	return /* @__PURE__ */ r("ol", {
+		...i(p, l),
+		ref: u,
+		className: s(),
+		id: o,
+		...f && { "data-mobile-open": c?.isOpen },
+		children: n
+	});
+}, l = ({ children: e }) => {
+	let { state: n } = t();
+	return !!n?.isOpen && /* @__PURE__ */ r("div", {
+		className: "uy:absolute uy:z-9 uy:top-full uy:inset-x-0 uy:h-[100dvh] uy:bg-surface-neutral",
+		children: /* @__PURE__ */ r(o, {
+			contain: !0,
+			restoreFocus: !0,
+			autoFocus: !0,
+			children: /* @__PURE__ */ r(c, { children: e })
+		})
+	});
+}, u = ({ children: t }) => {
+	let n = e();
+	return r(n === "xs" || n === "sm" ? l : c, { children: t });
 };
+u.displayName = "TaskMenuContent";
+//#endregion
+export { u as Content };

package/dist/esm/components/task-menu/parts/Header.js

@@ -1,55 +1,40 @@
-import { jsxs as d, jsx as s } from "react/jsx-runtime";
-import { uyTv as m } from "@payfit/unity-themes";
-import { useIntl as c } from "react-intl";
-import { IconButton as p } from "../../icon-button/IconButton.js";
-import { Text as f } from "../../text/Text.js";
-import { useTaskMenuContext as y } from "../TaskMenu.context.js";
-const h = m({
-  slots: {
-    header: ["uy:flex uy:px-300 uy:py-200 uy:gap-200 uy:shadow-raising"],
-    headerSelectedTask: ["uy:flex-1 uy:basis-full uy:self-center"]
-  }
-}), g = () => {
-  const {
-    currentTask: t,
-    taskMenuId: a,
-    taskMenuContentId: n,
-    state: e,
-    triggerProps: r,
-    triggerRef: o
-  } = y(), i = c(), { header: l, headerSelectedTask: u } = h();
-  return /* @__PURE__ */ d("div", { className: l(), children: [
-    /* @__PURE__ */ s(
-      f,
-      {
-        asElement: "span",
-        className: u(),
-        "aria-describedby": a,
-        children: t?.label
-      }
-    ),
-    /* @__PURE__ */ s(
-      p,
-      {
-        ...r,
-        ref: o,
-        variant: "ghost",
-        color: "neutral",
-        icon: e?.isOpen ? "CloseOutlined" : "ListOutlined",
-        label: i.formatMessage({
-          id: e?.isOpen ? "unity:component:task-menu:header:menu-close" : "unity:component:task-menu:header:menu-open",
-          defaultMessage: e?.isOpen ? "Close task menu" : "Open task menu"
-        }),
-        onClick: () => {
-          e?.toggle();
-        },
-        "aria-expanded": !!e?.isOpen,
-        "aria-controls": n
-      }
-    )
-  ] });
-};
-g.displayName = "Header";
-export {
-  g as Header
+import { IconButton as e } from "../../icon-button/IconButton.js";
+import { Text as t } from "../../text/Text.js";
+import { useTaskMenuContext as n } from "../TaskMenu.context.js";
+import { uyTv as r } from "@payfit/unity-themes";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useIntl as o } from "react-intl";
+//#region src/components/task-menu/parts/Header.tsx
+var s = r({ slots: {
+	header: ["uy:flex uy:px-300 uy:py-200 uy:gap-200 uy:shadow-raising"],
+	headerSelectedTask: ["uy:flex-1 uy:basis-full uy:self-center"]
+} }), c = () => {
+	let { currentTask: r, taskMenuId: c, taskMenuContentId: l, state: u, triggerProps: d, triggerRef: f } = n(), p = o(), { header: m, headerSelectedTask: h } = s();
+	return /* @__PURE__ */ a("div", {
+		className: m(),
+		children: [/* @__PURE__ */ i(t, {
+			asElement: "span",
+			className: h(),
+			"aria-describedby": c,
+			children: r?.label
+		}), /* @__PURE__ */ i(e, {
+			...d,
+			ref: f,
+			variant: "ghost",
+			color: "neutral",
+			icon: u?.isOpen ? "CloseOutlined" : "ListOutlined",
+			label: p.formatMessage({
+				id: u?.isOpen ? "unity:component:task-menu:header:menu-close" : "unity:component:task-menu:header:menu-open",
+				defaultMessage: u?.isOpen ? "Close task menu" : "Open task menu"
+			}),
+			onClick: () => {
+				u?.toggle();
+			},
+			"aria-expanded": !!u?.isOpen,
+			"aria-controls": l
+		})]
+	});
 };
+c.displayName = "Header";
+//#endregion
+export { c as Header };