@payfit/unity-components 2.47.5 → 2.47.6

package/dist/esm/components/inline-field-group/parts/InlineFieldGroupActions.js

@@ -1,158 +1,111 @@
-import { jsxs as c, Fragment as y, jsx as i } from "react/jsx-runtime";
-import { useContext as E, useMemo as G } from "react";
-import { uyTv as S } from "@payfit/unity-themes";
-import { useSelector as A } from "@tanstack/react-store";
-import { useIntl as B } from "react-intl";
-import { useFormContext as j } from "../../../hooks/tanstack-form-context.js";
-import { useBreakpointListener as k } from "../../../hooks/use-breakpoint-listener.js";
-import { Button as n } from "../../button/Button.js";
-import { InlineFieldGroupContext as V } from "../InlineFieldGroup.context.js";
-const O = S({
-  slots: {
-    container: "",
-    button: ""
-  },
-  variants: {
-    orientation: {
-      horizontal: {
-        container: "uy:flex uy:gap-100 uy:items-center"
-      },
-      vertical: {
-        container: "uy:flex uy:flex-col uy:gap-100 uy:w-full",
-        button: "uy:w-full"
-      }
-    }
-  },
-  defaultVariants: {
-    orientation: "horizontal"
-  }
+import { useBreakpointListener as e } from "../../../hooks/use-breakpoint-listener.js";
+import { Button as t } from "../../button/Button.js";
+import { useFormContext as n } from "../../../hooks/tanstack-form-context.js";
+import { InlineFieldGroupContext as r } from "../InlineFieldGroup.context.js";
+import { useContext as i, useMemo as a } from "react";
+import { uyTv as o } from "@payfit/unity-themes";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useIntl as u } from "react-intl";
+import { useSelector as d } from "@tanstack/react-store";
+//#region src/components/inline-field-group/parts/InlineFieldGroupActions.tsx
+var f = o({
+	slots: {
+		container: "",
+		button: ""
+	},
+	variants: { orientation: {
+		horizontal: { container: "uy:flex uy:gap-100 uy:items-center" },
+		vertical: {
+			container: "uy:flex uy:flex-col uy:gap-100 uy:w-full",
+			button: "uy:w-full"
+		}
+	} },
+	defaultVariants: { orientation: "horizontal" }
 });
-function R({
-  orientation: b = "horizontal",
-  customActions: g
-}) {
-  const o = B(), m = E(V), f = k(), p = f === "xs" || f === "sm";
-  if (!m)
-    throw new Error(
-      "InlineFieldGroupActions must be used within InlineFieldGroup"
-    );
-  const {
-    mode: v,
-    enterEditMode: x,
-    exitEditMode: s,
-    editViewId: h,
-    isLoading: e,
-    editButtonRef: M,
-    editLabel: P,
-    saveLabel: z,
-    cancelLabel: D,
-    onEditPress: I,
-    onSavePress: r,
-    onCancelPress: a
-  } = m, L = j(), { isDirty: l } = A(L.store, (C) => ({
-    isDirty: C.isDirty
-  })), { container: F, button: t } = O({ orientation: b }), N = P || o.formatMessage({
-    id: "unity:component:inline-field-group:edit",
-    defaultMessage: "Edit"
-  }), d = z || o.formatMessage({
-    id: "unity:component:inline-field-group:save",
-    defaultMessage: "Save"
-  }), u = D || o.formatMessage({
-    id: "unity:component:inline-field-group:cancel",
-    defaultMessage: "Cancel"
-  }), w = G(() => p ? /* @__PURE__ */ c(y, { children: [
-    /* @__PURE__ */ i(
-      n,
-      {
-        variant: "primary",
-        size: "default",
-        isDisabled: !l || e,
-        isLoading: e,
-        type: "submit",
-        onPress: () => {
-          r?.();
-        },
-        className: t(),
-        children: d
-      }
-    ),
-    /* @__PURE__ */ i(
-      n,
-      {
-        variant: "secondary",
-        size: "default",
-        onPress: () => {
-          a?.(), s();
-        },
-        isDisabled: e,
-        type: "button",
-        className: t(),
-        children: u
-      }
-    )
-  ] }) : /* @__PURE__ */ c(y, { children: [
-    /* @__PURE__ */ i(
-      n,
-      {
-        variant: "secondary",
-        size: "default",
-        onPress: () => {
-          a?.(), s();
-        },
-        isDisabled: e,
-        type: "button",
-        className: t(),
-        children: u
-      }
-    ),
-    /* @__PURE__ */ i(
-      n,
-      {
-        variant: "primary",
-        size: "default",
-        isDisabled: !l || e,
-        isLoading: e,
-        type: "submit",
-        onPress: () => {
-          r?.();
-        },
-        className: t(),
-        children: d
-      }
-    )
-  ] }), [
-    t,
-    u,
-    d,
-    s,
-    l,
-    e,
-    p,
-    a,
-    r
-  ]);
-  return /* @__PURE__ */ c("div", { className: F(), role: "group", children: [
-    g,
-    v === "read" ? /* @__PURE__ */ i(
-      n,
-      {
-        ref: M,
-        variant: "secondary",
-        size: "default",
-        onPress: () => {
-          I?.(), x();
-        },
-        isDisabled: e,
-        prefixIcon: "PencilSimpleOutlined",
-        "aria-expanded": !1,
-        "aria-controls": h,
-        className: t(),
-        children: N
-      }
-    ) : w
-  ] });
+function p({ orientation: o = "horizontal", customActions: p }) {
+	let m = u(), h = i(r), g = e(), _ = g === "xs" || g === "sm";
+	if (!h) throw Error("InlineFieldGroupActions must be used within InlineFieldGroup");
+	let { mode: v, enterEditMode: y, exitEditMode: b, editViewId: x, isLoading: S, editButtonRef: C, editLabel: w, saveLabel: T, cancelLabel: E, onEditPress: D, onSavePress: O, onCancelPress: k } = h, { isDirty: A } = d(n().store, (e) => ({ isDirty: e.isDirty })), { container: j, button: M } = f({ orientation: o }), N = w || m.formatMessage({
+		id: "unity:component:inline-field-group:edit",
+		defaultMessage: "Edit"
+	}), P = T || m.formatMessage({
+		id: "unity:component:inline-field-group:save",
+		defaultMessage: "Save"
+	}), F = E || m.formatMessage({
+		id: "unity:component:inline-field-group:cancel",
+		defaultMessage: "Cancel"
+	}), I = a(() => _ ? /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(t, {
+		variant: "primary",
+		size: "default",
+		isDisabled: !A || S,
+		isLoading: S,
+		type: "submit",
+		onPress: () => {
+			O?.();
+		},
+		className: M(),
+		children: P
+	}), /* @__PURE__ */ c(t, {
+		variant: "secondary",
+		size: "default",
+		onPress: () => {
+			k?.(), b();
+		},
+		isDisabled: S,
+		type: "button",
+		className: M(),
+		children: F
+	})] }) : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(t, {
+		variant: "secondary",
+		size: "default",
+		onPress: () => {
+			k?.(), b();
+		},
+		isDisabled: S,
+		type: "button",
+		className: M(),
+		children: F
+	}), /* @__PURE__ */ c(t, {
+		variant: "primary",
+		size: "default",
+		isDisabled: !A || S,
+		isLoading: S,
+		type: "submit",
+		onPress: () => {
+			O?.();
+		},
+		className: M(),
+		children: P
+	})] }), [
+		M,
+		F,
+		P,
+		b,
+		A,
+		S,
+		_,
+		k,
+		O
+	]);
+	return /* @__PURE__ */ l("div", {
+		className: j(),
+		role: "group",
+		children: [p, v === "read" ? /* @__PURE__ */ c(t, {
+			ref: C,
+			variant: "secondary",
+			size: "default",
+			onPress: () => {
+				D?.(), y();
+			},
+			isDisabled: S,
+			prefixIcon: "PencilSimpleOutlined",
+			"aria-expanded": !1,
+			"aria-controls": x,
+			className: M(),
+			children: N
+		}) : I]
+	});
 }
-R.displayName = "InlineFieldGroupActions";
-export {
-  R as InlineFieldGroupActions
-};
+p.displayName = "InlineFieldGroupActions";
+//#endregion
+export { p as InlineFieldGroupActions };

package/dist/esm/components/inline-field-group/parts/InlineFieldGroupEditView.js

@@ -1,56 +1,52 @@
-import { jsxs as h, jsx as e } from "react/jsx-runtime";
-import { useContext as g } from "react";
-import { uyTv as w } from "@payfit/unity-themes";
-import { useIntl as x } from "react-intl";
-import { Button as v } from "../../button/Button.js";
-import { InlineFieldGroupContext as I } from "../InlineFieldGroup.context.js";
-const N = w({
-  slots: {
-    fieldset: "uy:border-0 uy:p-0 uy:m-0",
-    legend: "uy:sr-only",
-    fieldsContainer: "uy:flex uy:flex-col uy:gap-250",
-    hiddenButtons: "uy:sr-only"
-  }
-});
-function b({
-  children: d,
-  className: s,
-  legend: o
-}) {
-  const l = x(), t = g(I);
-  if (!t)
-    throw new Error(
-      "InlineFieldGroupEditView must be used within InlineFieldGroup"
-    );
-  const { mode: r, editViewId: a, isLoading: n, editViewRef: u } = t, i = r === "edit", {
-    fieldset: m,
-    legend: f,
-    fieldsContainer: c,
-    hiddenButtons: p
-  } = N(), y = l.formatMessage({
-    id: "unity:component:inline-field-group:save",
-    defaultMessage: "Save"
-  });
-  return /* @__PURE__ */ h(
-    "fieldset",
-    {
-      ref: u,
-      id: a,
-      className: m({ className: s }),
-      disabled: n,
-      hidden: !i,
-      "aria-hidden": !i,
-      "aria-busy": n,
-      ...!i && { inert: "" },
-      children: [
-        /* @__PURE__ */ e("legend", { className: f(), children: o }),
-        /* @__PURE__ */ e("div", { className: c(), children: d }),
-        /* @__PURE__ */ e("div", { className: p(), children: /* @__PURE__ */ e(v, { type: "submit", variant: "primary", children: y }) })
-      ]
-    }
-  );
+import { Button as e } from "../../button/Button.js";
+import { InlineFieldGroupContext as t } from "../InlineFieldGroup.context.js";
+import { useContext as n } from "react";
+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/inline-field-group/parts/InlineFieldGroupEditView.tsx
+var s = r({ slots: {
+	fieldset: "uy:border-0 uy:p-0 uy:m-0",
+	legend: "uy:sr-only",
+	fieldsContainer: "uy:flex uy:flex-col uy:gap-250",
+	hiddenButtons: "uy:sr-only"
+} });
+function c({ children: r, className: c, legend: l }) {
+	let u = o(), d = n(t);
+	if (!d) throw Error("InlineFieldGroupEditView must be used within InlineFieldGroup");
+	let { mode: f, editViewId: p, isLoading: m, editViewRef: h } = d, g = f === "edit", { fieldset: _, legend: v, fieldsContainer: y, hiddenButtons: b } = s(), x = u.formatMessage({
+		id: "unity:component:inline-field-group:save",
+		defaultMessage: "Save"
+	});
+	return /* @__PURE__ */ a("fieldset", {
+		ref: h,
+		id: p,
+		className: _({ className: c }),
+		disabled: m,
+		hidden: !g,
+		"aria-hidden": !g,
+		"aria-busy": m,
+		...!g && { inert: "" },
+		children: [
+			/* @__PURE__ */ i("legend", {
+				className: v(),
+				children: l
+			}),
+			/* @__PURE__ */ i("div", {
+				className: y(),
+				children: r
+			}),
+			/* @__PURE__ */ i("div", {
+				className: b(),
+				children: /* @__PURE__ */ i(e, {
+					type: "submit",
+					variant: "primary",
+					children: x
+				})
+			})
+		]
+	});
 }
-b.displayName = "InlineFieldGroupEditView";
-export {
-  b as InlineFieldGroupEditView
-};
+c.displayName = "InlineFieldGroupEditView";
+//#endregion
+export { c as InlineFieldGroupEditView };

package/dist/esm/components/inline-field-group/parts/InlineFieldGroupHeader.js

@@ -1,39 +1,40 @@
-import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { useContext as d } from "react";
-import { uyTv as m } from "@payfit/unity-themes";
-import { useBreakpointListener as f } from "../../../hooks/use-breakpoint-listener.js";
-import { Text as i } from "../../text/Text.js";
-import { InlineFieldGroupContext as y } from "../InlineFieldGroup.context.js";
-import { InlineFieldGroupActions as h } from "./InlineFieldGroupActions.js";
-const x = m({
-  slots: {
-    base: "uy:flex uy:items-center uy:justify-between uy:w-full uy:gap-300",
-    titleContainer: "uy:flex uy:flex-col uy:gap-100 uy:flex-1"
-  }
-});
-function I({
-  title: l,
-  subtitle: t,
-  customActions: s
-}) {
-  const o = d(y), n = f(), a = n !== "xs" && n !== "sm";
-  if (!o)
-    throw new Error(
-      "InlineFieldGroupHeader must be used within InlineFieldGroup"
-    );
-  const { headerId: u } = o, { base: c, titleContainer: p } = x();
-  return /* @__PURE__ */ e("header", { className: c(), children: [
-    /* @__PURE__ */ e("hgroup", { className: p(), children: [
-      /* @__PURE__ */ r(i, { id: u, variant: "h3", color: "content.neutral", children: l }),
-      t && /* @__PURE__ */ r(i, { variant: "subtitle", color: "content.neutral", children: t })
-    ] }),
-    /* @__PURE__ */ e("div", { className: "uy:flex uy:gap-100 uy:items-center", role: "group", children: [
-      s,
-      a && /* @__PURE__ */ r(h, { orientation: "horizontal" })
-    ] })
-  ] });
+import { useBreakpointListener as e } from "../../../hooks/use-breakpoint-listener.js";
+import { Text as t } from "../../text/Text.js";
+import { InlineFieldGroupContext as n } from "../InlineFieldGroup.context.js";
+import { InlineFieldGroupActions as r } from "./InlineFieldGroupActions.js";
+import { useContext 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/inline-field-group/parts/InlineFieldGroupHeader.tsx
+var c = a({ slots: {
+	base: "uy:flex uy:items-center uy:justify-between uy:w-full uy:gap-300",
+	titleContainer: "uy:flex uy:flex-col uy:gap-100 uy:flex-1"
+} });
+function l({ title: a, subtitle: l, customActions: u }) {
+	let d = i(n), f = e(), p = f !== "xs" && f !== "sm";
+	if (!d) throw Error("InlineFieldGroupHeader must be used within InlineFieldGroup");
+	let { headerId: m } = d, { base: h, titleContainer: g } = c();
+	return /* @__PURE__ */ s("header", {
+		className: h(),
+		children: [/* @__PURE__ */ s("hgroup", {
+			className: g(),
+			children: [/* @__PURE__ */ o(t, {
+				id: m,
+				variant: "h3",
+				color: "content.neutral",
+				children: a
+			}), l && /* @__PURE__ */ o(t, {
+				variant: "subtitle",
+				color: "content.neutral",
+				children: l
+			})]
+		}), /* @__PURE__ */ s("div", {
+			className: "uy:flex uy:gap-100 uy:items-center",
+			role: "group",
+			children: [u, p && /* @__PURE__ */ o(r, { orientation: "horizontal" })]
+		})]
+	});
 }
-I.displayName = "InlineFieldGroupHeader";
-export {
-  I as InlineFieldGroupHeader
-};
+l.displayName = "InlineFieldGroupHeader";
+//#endregion
+export { l as InlineFieldGroupHeader };

package/dist/esm/components/inline-field-group/parts/InlineFieldGroupReadView.js

@@ -1,28 +1,19 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useContext as d } from "react";
-import { InlineFieldGroupContext as t } from "../InlineFieldGroup.context.js";
-function l({
-  children: n,
-  className: o
-}) {
-  const i = d(t);
-  if (!i)
-    throw new Error(
-      "InlineFieldGroupReadView must be used within InlineFieldGroup"
-    );
-  const e = i.mode === "read";
-  return /* @__PURE__ */ r(
-    "div",
-    {
-      className: o,
-      hidden: !e,
-      "aria-hidden": !e,
-      ...!e && { inert: "" },
-      children: n
-    }
-  );
+import { InlineFieldGroupContext as e } from "../InlineFieldGroup.context.js";
+import { useContext as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/inline-field-group/parts/InlineFieldGroupReadView.tsx
+function r({ children: r, className: i }) {
+	let a = t(e);
+	if (!a) throw Error("InlineFieldGroupReadView must be used within InlineFieldGroup");
+	let o = a.mode === "read";
+	return /* @__PURE__ */ n("div", {
+		className: i,
+		hidden: !o,
+		"aria-hidden": !o,
+		...!o && { inert: "" },
+		children: r
+	});
 }
-l.displayName = "InlineFieldGroupReadView";
-export {
-  l as InlineFieldGroupReadView
-};
+r.displayName = "InlineFieldGroupReadView";
+//#endregion
+export { r as InlineFieldGroupReadView };