@gusto/embedded-react-sdk 0.52.2 → 0.54.0

package/dist/components/Employee/Deductions/management/DeductionsCard/DeductionsCard.js

@@ -1,40 +1,47 @@
-import { jsx as o, jsxs as M } from "react/jsx-runtime";
-import { useTranslation as T } from "react-i18next";
-import { useDeductionsList as _ } from "../../shared/useDeductionsList.js";
-import { useDeleteDeduction as A } from "../../shared/useDeleteDeduction.js";
-import { DeleteDeductionDialog as P } from "../../shared/DeleteDeductionDialog.js";
-import { formatDeductionAmount as N } from "../../shared/formatDeductionAmount.js";
-import { Loading as S } from "../../../../Common/Loading/Loading.js";
-import { EmptyData as b } from "../../../../Common/EmptyData/EmptyData.js";
-import { HamburgerMenu as k } from "../../../../Common/HamburgerMenu/HamburgerMenu.js";
-import { BaseBoundaries as x, BaseLayout as B } from "../../../../Base/Base.js";
-import { useComponentContext as U } from "../../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { jsx as i, jsxs as T } from "react/jsx-runtime";
+import { useTranslation as _ } from "react-i18next";
+import { useDeductionsList as A } from "../../shared/useDeductionsList.js";
+import { useDeleteDeduction as P } from "../../shared/useDeleteDeduction.js";
+import { DeleteDeductionDialog as N } from "../../shared/DeleteDeductionDialog.js";
+import { formatDeductionAmount as S } from "../../shared/formatDeductionAmount.js";
+import { Loading as b } from "../../../../Common/Loading/Loading.js";
+import { EmptyData as k } from "../../../../Common/EmptyData/EmptyData.js";
+import { HamburgerMenu as x } from "../../../../Common/HamburgerMenu/HamburgerMenu.js";
+import { BaseBoundaries as B, BaseLayout as U } from "../../../../Base/Base.js";
+import { useComponentContext as w } from "../../../../../contexts/ComponentAdapter/useComponentContext.js";
 import u from "../../../../../hooks/useNumberFormatter.js";
-import { useI18n as w } from "../../../../../i18n/I18n.js";
+import { useI18n as O } from "../../../../../i18n/I18n.js";
 import { componentEvents as s } from "../../../../../shared/constants.js";
-import O from "../../../../../assets/icons/plus-circle.svg.js";
-import v from "../../../../../assets/icons/trashcan.svg.js";
-import G from "../../../../../assets/icons/pencil.svg.js";
-import { useDataView as R } from "../../../../Common/DataView/useDataView.js";
-import { DataView as H } from "../../../../Common/DataView/DataView.js";
-function ae(n) {
-  return /* @__PURE__ */ o(x, { componentName: "Employee.Management.Deductions", children: /* @__PURE__ */ o(I, { ...n }) });
+import v from "../../../../../assets/icons/plus-circle.svg.js";
+import G from "../../../../../assets/icons/trashcan.svg.js";
+import R from "../../../../../assets/icons/pencil.svg.js";
+import { useDataView as H } from "../../../../Common/DataView/useDataView.js";
+import { DataView as I } from "../../../../Common/DataView/DataView.js";
+function de({ LoaderComponent: n, ...r }) {
+  return /* @__PURE__ */ i(
+    B,
+    {
+      componentName: "Employee.Management.Deductions",
+      LoaderComponent: n,
+      children: /* @__PURE__ */ i(V, { LoaderComponent: n, ...r })
+    }
+  );
 }
-function I({ employeeId: n, onEvent: a }) {
-  w("Employee.Management.Deductions");
-  const { t: e } = T("Employee.Management.Deductions"), d = U(), D = u("currency"), p = u("percent"), i = _({ employeeId: n }), {
+function V({ employeeId: n, onEvent: r, LoaderComponent: D }) {
+  O("Employee.Management.Deductions");
+  const { t: e } = _("Employee.Management.Deductions"), d = w(), p = u("currency"), f = u("percent"), o = A({ employeeId: n }), {
     pendingDeleteDeduction: c,
     setPendingDeleteDeduction: m,
-    handleConfirmDelete: f
-  } = A(async (t) => {
-    if (i.isLoading) return;
-    const r = await i.actions.onDelete(t);
-    r && a(s.EMPLOYEE_MANAGEMENT_DEDUCTIONS_CARD_DELETED, r.data.garnishment);
-  }), g = i.isLoading && i.errorHandling.errors.length === 0, E = i.isLoading ? [] : i.data.deductions, l = i.isLoading ? void 0 : i.status.deletingGarnishmentUuid, C = () => {
-    a(s.EMPLOYEE_MANAGEMENT_DEDUCTIONS_CARD_ADD_REQUESTED, { employeeId: n });
-  }, h = (t) => {
-    a(s.EMPLOYEE_MANAGEMENT_DEDUCTIONS_CARD_EDIT_REQUESTED, t);
-  }, y = [
+    handleConfirmDelete: g
+  } = P(async (t) => {
+    if (o.isLoading) return;
+    const a = await o.actions.onDelete(t);
+    a && r(s.EMPLOYEE_MANAGEMENT_DEDUCTIONS_CARD_DELETED, a.data.garnishment);
+  }), E = o.isLoading && o.errorHandling.errors.length === 0, C = o.isLoading ? [] : o.data.deductions, l = o.isLoading ? void 0 : o.status.deletingGarnishmentUuid, h = () => {
+    r(s.EMPLOYEE_MANAGEMENT_DEDUCTIONS_CARD_ADD_REQUESTED, { employeeId: n });
+  }, y = (t) => {
+    r(s.EMPLOYEE_MANAGEMENT_DEDUCTIONS_CARD_EDIT_REQUESTED, t);
+  }, L = [
     {
       key: "description",
       title: e("columns.deduction"),
@@ -48,57 +55,57 @@ function I({ employeeId: n, onEvent: a }) {
     {
       key: "amount",
       title: e("columns.withhold"),
-      render: (t) => N(t, {
-        formatCurrency: D,
-        formatPercent: p,
-        formatPerPaycheck: (r) => e("amountPerPaycheck", { value: r })
+      render: (t) => S(t, {
+        formatCurrency: p,
+        formatPercent: f,
+        formatPerPaycheck: (a) => e("amountPerPaycheck", { value: a })
       })
     }
-  ], L = R({
-    data: E,
-    columns: y,
-    itemMenu: (t) => /* @__PURE__ */ o(
-      k,
+  ], M = H({
+    data: C,
+    columns: L,
+    itemMenu: (t) => /* @__PURE__ */ i(
+      x,
       {
         isLoading: l === t.uuid,
         items: [
           {
             label: e("editCta"),
             onClick: () => {
-              h(t);
+              y(t);
             },
-            icon: /* @__PURE__ */ o(G, { "aria-hidden": !0 })
+            icon: /* @__PURE__ */ i(R, { "aria-hidden": !0 })
           },
           {
             label: e("deleteCta"),
             onClick: () => {
               m(t);
             },
-            icon: /* @__PURE__ */ o(v, { "aria-hidden": !0 })
+            icon: /* @__PURE__ */ i(G, { "aria-hidden": !0 })
           }
         ],
         triggerLabel: e("hamburgerTitle")
       }
     ),
-    emptyState: () => /* @__PURE__ */ o(b, { title: e("emptyState.title"), description: e("emptyState.description") })
+    emptyState: () => /* @__PURE__ */ i(k, { title: e("emptyState.title"), description: e("emptyState.description") })
   });
-  return /* @__PURE__ */ M(B, { error: i.errorHandling.errors, children: [
-    /* @__PURE__ */ o(
+  return /* @__PURE__ */ T(U, { error: o.errorHandling.errors, LoaderComponent: D, children: [
+    /* @__PURE__ */ i(
       d.Box,
       {
         withPadding: !1,
-        header: /* @__PURE__ */ o(
+        header: /* @__PURE__ */ i(
           d.BoxHeader,
           {
             title: e("title"),
-            action: /* @__PURE__ */ o(d.Button, { variant: "secondary", onClick: C, icon: /* @__PURE__ */ o(O, {}), children: e("addDeductionCta") })
+            action: /* @__PURE__ */ i(d.Button, { variant: "secondary", onClick: h, icon: /* @__PURE__ */ i(v, {}), children: e("addDeductionCta") })
           }
         ),
-        children: g ? /* @__PURE__ */ o(S, {}) : /* @__PURE__ */ o(H, { label: e("listLabel"), isWithinBox: !0, ...L })
+        children: E ? /* @__PURE__ */ i(b, {}) : /* @__PURE__ */ i(I, { label: e("listLabel"), isWithinBox: !0, ...M })
       }
     ),
-    /* @__PURE__ */ o(
-      P,
+    /* @__PURE__ */ i(
+      N,
       {
         pendingDeleteDeduction: c,
         isPrimaryActionLoading: l === c?.uuid,
@@ -106,7 +113,7 @@ function I({ employeeId: n, onEvent: a }) {
           m(null);
         },
         onConfirm: () => {
-          f();
+          g();
         },
         title: e("deleteDeductionDialog.title"),
         description: e("deleteDeductionDialog.description", {
@@ -119,6 +126,6 @@ function I({ employeeId: n, onEvent: a }) {
   ] });
 }
 export {
-  ae as DeductionsCard
+  de as DeductionsCard
 };
 //# sourceMappingURL=DeductionsCard.js.map

package/dist/components/Employee/Deductions/management/DeductionsCard/DeductionsCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeductionsCard.js","sources":["../../../../../../src/components/Employee/Deductions/management/DeductionsCard/DeductionsCard.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Garnishment } from '@gusto/embedded-api/models/components/garnishment'\nimport { useDeductionsList } from '../../shared/useDeductionsList'\nimport { useDeleteDeduction } from '../../shared/useDeleteDeduction'\nimport { DeleteDeductionDialog } from '../../shared/DeleteDeductionDialog'\nimport { formatDeductionAmount } from '../../shared/formatDeductionAmount'\nimport { DataView, useDataView, EmptyData, Loading } from '@/components/Common'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { BaseBoundaries, BaseLayout } from '@/components/Base/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { useI18n } from '@/i18n'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport PlusCircleIcon from '@/assets/icons/plus-circle.svg?react'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\n\n/**\n * Props for {@link DeductionsCard}.\n *\n * @public\n */\nexport interface DeductionsCardProps {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** Callback invoked when the card emits an event. See the events table on {@link DeductionsCard} for the available event types and payloads. */\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/**\n * Standalone read-only card listing an employee's active deductions, with affordances to add, edit, or delete a deduction.\n *\n * @remarks\n * Fetches its own data and owns the delete confirm dialog. Has no alert API — alert rendering is the consumer's responsibility. Add and edit affordances do not open a form themselves; emit-then-route is the contract, so the consumer listens for the `addRequested` / `editRequested` events and renders {@link DeductionsEditForm} (or its own equivalent) accordingly. For an orchestrated card-plus-form flow, use {@link Deductions} instead.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/management/deductions/card/addRequested` | Fired when the \"Add deduction\" CTA is clicked | `{ employeeId: string }` |\n * | `employee/management/deductions/card/editRequested` | Fired when an \"Edit\" CTA is clicked for a deduction | The matching `Garnishment` |\n * | `employee/management/deductions/card/deleted` | Fired after a deduction is deleted via the confirm dialog | The deleted `Garnishment` |\n *\n * @param props - See {@link DeductionsCardProps}.\n * @returns The rendered deductions card.\n * @public\n */\nexport function DeductionsCard(props: DeductionsCardProps) {\n  return (\n    <BaseBoundaries componentName=\"Employee.Management.Deductions\">\n      <DeductionsCardContent {...props} />\n    </BaseBoundaries>\n  )\n}\n\nfunction DeductionsCardContent({ employeeId, onEvent }: DeductionsCardProps) {\n  useI18n('Employee.Management.Deductions')\n  const { t } = useTranslation('Employee.Management.Deductions')\n  const Components = useComponentContext()\n  const formatCurrency = useNumberFormatter('currency')\n  const formatPercent = useNumberFormatter('percent')\n\n  const deductionsList = useDeductionsList({ employeeId })\n\n  const {\n    pendingDeleteDeduction,\n    setPendingDeleteDeduction,\n    handleConfirmDelete: handleConfirmDeleteDeduction,\n  } = useDeleteDeduction(async garnishment => {\n    if (deductionsList.isLoading) return\n    const result = await deductionsList.actions.onDelete(garnishment)\n    if (result) {\n      onEvent(componentEvents.EMPLOYEE_MANAGEMENT_DEDUCTIONS_CARD_DELETED, result.data.garnishment)\n    }\n  })\n\n  // `useDeductionsList` returns `isLoading: true` even when the query has\n  // errored and `data` is missing. Treat those rows as \"not loading\" so the\n  // section doesn't show a perpetual skeleton while BaseLayout already\n  // renders the error alert.\n  const isDeductionsLoading =\n    deductionsList.isLoading && deductionsList.errorHandling.errors.length === 0\n\n  const deductions = deductionsList.isLoading ? [] : deductionsList.data.deductions\n  const deletingGarnishmentUuid = deductionsList.isLoading\n    ? undefined\n    : deductionsList.status.deletingGarnishmentUuid\n\n  const handleAdd = () => {\n    onEvent(componentEvents.EMPLOYEE_MANAGEMENT_DEDUCTIONS_CARD_ADD_REQUESTED, { employeeId })\n  }\n  const handleEdit = (garnishment: Garnishment) => {\n    onEvent(componentEvents.EMPLOYEE_MANAGEMENT_DEDUCTIONS_CARD_EDIT_REQUESTED, garnishment)\n  }\n\n  const garnishmentsColumns = [\n    {\n      key: 'description',\n      title: t('columns.deduction'),\n      render: (garnishment: Garnishment) => garnishment.description || '-',\n    },\n    {\n      key: 'frequency',\n      title: t('columns.frequency'),\n      render: (garnishment: Garnishment) => (garnishment.recurring ? t('recurring') : t('oneTime')),\n    },\n    {\n      key: 'amount',\n      title: t('columns.withhold'),\n      render: (garnishment: Garnishment) =>\n        formatDeductionAmount(garnishment, {\n          formatCurrency,\n          formatPercent,\n          formatPerPaycheck: (value: string) => t('amountPerPaycheck', { value }),\n        }),\n    },\n  ]\n\n  const garnishmentsDataView = useDataView({\n    data: deductions,\n    columns: garnishmentsColumns,\n    itemMenu: (garnishment: Garnishment) => (\n      <HamburgerMenu\n        isLoading={deletingGarnishmentUuid === garnishment.uuid}\n        items={[\n          {\n            label: t('editCta'),\n            onClick: () => {\n              handleEdit(garnishment)\n            },\n            icon: <PencilSvg aria-hidden />,\n          },\n          {\n            label: t('deleteCta'),\n            onClick: () => {\n              setPendingDeleteDeduction(garnishment)\n            },\n            icon: <TrashCanSvg aria-hidden />,\n          },\n        ]}\n        triggerLabel={t('hamburgerTitle')}\n      />\n    ),\n    emptyState: () => (\n      <EmptyData title={t('emptyState.title')} description={t('emptyState.description')} />\n    ),\n  })\n\n  return (\n    <BaseLayout error={deductionsList.errorHandling.errors}>\n      <Components.Box\n        withPadding={false}\n        header={\n          <Components.BoxHeader\n            title={t('title')}\n            action={\n              <Components.Button variant=\"secondary\" onClick={handleAdd} icon={<PlusCircleIcon />}>\n                {t('addDeductionCta')}\n              </Components.Button>\n            }\n          />\n        }\n      >\n        {isDeductionsLoading ? (\n          <Loading />\n        ) : (\n          <DataView label={t('listLabel')} isWithinBox {...garnishmentsDataView} />\n        )}\n      </Components.Box>\n\n      <DeleteDeductionDialog\n        pendingDeleteDeduction={pendingDeleteDeduction}\n        isPrimaryActionLoading={deletingGarnishmentUuid === pendingDeleteDeduction?.uuid}\n        onClose={() => {\n          setPendingDeleteDeduction(null)\n        }}\n        onConfirm={() => {\n          void handleConfirmDeleteDeduction()\n        }}\n        title={t('deleteDeductionDialog.title')}\n        description={t('deleteDeductionDialog.description', {\n          deduction: pendingDeleteDeduction?.description ?? '',\n        })}\n        confirmLabel={t('deleteDeductionDialog.confirmCta')}\n        cancelLabel={t('deleteDeductionDialog.cancelCta')}\n      />\n    </BaseLayout>\n  )\n}\n"],"names":["DeductionsCard","props","jsx","BaseBoundaries","DeductionsCardContent","employeeId","onEvent","useI18n","t","useTranslation","Components","useComponentContext","formatCurrency","useNumberFormatter","formatPercent","deductionsList","useDeductionsList","pendingDeleteDeduction","setPendingDeleteDeduction","handleConfirmDeleteDeduction","useDeleteDeduction","garnishment","result","componentEvents","isDeductionsLoading","deductions","deletingGarnishmentUuid","handleAdd","handleEdit","garnishmentsColumns","formatDeductionAmount","value","garnishmentsDataView","useDataView","HamburgerMenu","PencilSvg","TrashCanSvg","EmptyData","jsxs","BaseLayout","PlusCircleIcon","Loading","DataView","DeleteDeductionDialog"],"mappings":"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"}
+{"version":3,"file":"DeductionsCard.js","sources":["../../../../../../src/components/Employee/Deductions/management/DeductionsCard/DeductionsCard.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Garnishment } from '@gusto/embedded-api/models/components/garnishment'\nimport { useDeductionsList } from '../../shared/useDeductionsList'\nimport { useDeleteDeduction } from '../../shared/useDeleteDeduction'\nimport { DeleteDeductionDialog } from '../../shared/DeleteDeductionDialog'\nimport { formatDeductionAmount } from '../../shared/formatDeductionAmount'\nimport { DataView, useDataView, EmptyData, Loading } from '@/components/Common'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { BaseBoundaries, BaseLayout } from '@/components/Base/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { useI18n } from '@/i18n'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport type { LoaderComponentType } from '@/components/Base'\nimport PlusCircleIcon from '@/assets/icons/plus-circle.svg?react'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\n\n/**\n * Props for {@link DeductionsCard}.\n *\n * @public\n */\nexport interface DeductionsCardProps {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** Callback invoked when the card emits an event. See the events table on {@link DeductionsCard} for the available event types and payloads. */\n  onEvent: OnEventType<EventType, unknown>\n  /** Custom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on `GustoProvider` for this instance only. */\n  LoaderComponent?: LoaderComponentType\n}\n\n/**\n * Standalone read-only card listing an employee's active deductions, with affordances to add, edit, or delete a deduction.\n *\n * @remarks\n * Fetches its own data and owns the delete confirm dialog. Has no alert API — alert rendering is the consumer's responsibility. Add and edit affordances do not open a form themselves; emit-then-route is the contract, so the consumer listens for the `addRequested` / `editRequested` events and renders {@link DeductionsEditForm} (or its own equivalent) accordingly. For an orchestrated card-plus-form flow, use {@link Deductions} instead.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/management/deductions/card/addRequested` | Fired when the \"Add deduction\" CTA is clicked | `{ employeeId: string }` |\n * | `employee/management/deductions/card/editRequested` | Fired when an \"Edit\" CTA is clicked for a deduction | The matching `Garnishment` |\n * | `employee/management/deductions/card/deleted` | Fired after a deduction is deleted via the confirm dialog | The deleted `Garnishment` |\n *\n * @param props - See {@link DeductionsCardProps}.\n * @returns The rendered deductions card.\n * @public\n */\nexport function DeductionsCard({ LoaderComponent, ...props }: DeductionsCardProps) {\n  return (\n    <BaseBoundaries\n      componentName=\"Employee.Management.Deductions\"\n      LoaderComponent={LoaderComponent}\n    >\n      <DeductionsCardContent LoaderComponent={LoaderComponent} {...props} />\n    </BaseBoundaries>\n  )\n}\n\nfunction DeductionsCardContent({ employeeId, onEvent, LoaderComponent }: DeductionsCardProps) {\n  useI18n('Employee.Management.Deductions')\n  const { t } = useTranslation('Employee.Management.Deductions')\n  const Components = useComponentContext()\n  const formatCurrency = useNumberFormatter('currency')\n  const formatPercent = useNumberFormatter('percent')\n\n  const deductionsList = useDeductionsList({ employeeId })\n\n  const {\n    pendingDeleteDeduction,\n    setPendingDeleteDeduction,\n    handleConfirmDelete: handleConfirmDeleteDeduction,\n  } = useDeleteDeduction(async garnishment => {\n    if (deductionsList.isLoading) return\n    const result = await deductionsList.actions.onDelete(garnishment)\n    if (result) {\n      onEvent(componentEvents.EMPLOYEE_MANAGEMENT_DEDUCTIONS_CARD_DELETED, result.data.garnishment)\n    }\n  })\n\n  // `useDeductionsList` returns `isLoading: true` even when the query has\n  // errored and `data` is missing. Treat those rows as \"not loading\" so the\n  // section doesn't show a perpetual skeleton while BaseLayout already\n  // renders the error alert.\n  const isDeductionsLoading =\n    deductionsList.isLoading && deductionsList.errorHandling.errors.length === 0\n\n  const deductions = deductionsList.isLoading ? [] : deductionsList.data.deductions\n  const deletingGarnishmentUuid = deductionsList.isLoading\n    ? undefined\n    : deductionsList.status.deletingGarnishmentUuid\n\n  const handleAdd = () => {\n    onEvent(componentEvents.EMPLOYEE_MANAGEMENT_DEDUCTIONS_CARD_ADD_REQUESTED, { employeeId })\n  }\n  const handleEdit = (garnishment: Garnishment) => {\n    onEvent(componentEvents.EMPLOYEE_MANAGEMENT_DEDUCTIONS_CARD_EDIT_REQUESTED, garnishment)\n  }\n\n  const garnishmentsColumns = [\n    {\n      key: 'description',\n      title: t('columns.deduction'),\n      render: (garnishment: Garnishment) => garnishment.description || '-',\n    },\n    {\n      key: 'frequency',\n      title: t('columns.frequency'),\n      render: (garnishment: Garnishment) => (garnishment.recurring ? t('recurring') : t('oneTime')),\n    },\n    {\n      key: 'amount',\n      title: t('columns.withhold'),\n      render: (garnishment: Garnishment) =>\n        formatDeductionAmount(garnishment, {\n          formatCurrency,\n          formatPercent,\n          formatPerPaycheck: (value: string) => t('amountPerPaycheck', { value }),\n        }),\n    },\n  ]\n\n  const garnishmentsDataView = useDataView({\n    data: deductions,\n    columns: garnishmentsColumns,\n    itemMenu: (garnishment: Garnishment) => (\n      <HamburgerMenu\n        isLoading={deletingGarnishmentUuid === garnishment.uuid}\n        items={[\n          {\n            label: t('editCta'),\n            onClick: () => {\n              handleEdit(garnishment)\n            },\n            icon: <PencilSvg aria-hidden />,\n          },\n          {\n            label: t('deleteCta'),\n            onClick: () => {\n              setPendingDeleteDeduction(garnishment)\n            },\n            icon: <TrashCanSvg aria-hidden />,\n          },\n        ]}\n        triggerLabel={t('hamburgerTitle')}\n      />\n    ),\n    emptyState: () => (\n      <EmptyData title={t('emptyState.title')} description={t('emptyState.description')} />\n    ),\n  })\n\n  return (\n    <BaseLayout error={deductionsList.errorHandling.errors} LoaderComponent={LoaderComponent}>\n      <Components.Box\n        withPadding={false}\n        header={\n          <Components.BoxHeader\n            title={t('title')}\n            action={\n              <Components.Button variant=\"secondary\" onClick={handleAdd} icon={<PlusCircleIcon />}>\n                {t('addDeductionCta')}\n              </Components.Button>\n            }\n          />\n        }\n      >\n        {isDeductionsLoading ? (\n          <Loading />\n        ) : (\n          <DataView label={t('listLabel')} isWithinBox {...garnishmentsDataView} />\n        )}\n      </Components.Box>\n\n      <DeleteDeductionDialog\n        pendingDeleteDeduction={pendingDeleteDeduction}\n        isPrimaryActionLoading={deletingGarnishmentUuid === pendingDeleteDeduction?.uuid}\n        onClose={() => {\n          setPendingDeleteDeduction(null)\n        }}\n        onConfirm={() => {\n          void handleConfirmDeleteDeduction()\n        }}\n        title={t('deleteDeductionDialog.title')}\n        description={t('deleteDeductionDialog.description', {\n          deduction: pendingDeleteDeduction?.description ?? '',\n        })}\n        confirmLabel={t('deleteDeductionDialog.confirmCta')}\n        cancelLabel={t('deleteDeductionDialog.cancelCta')}\n      />\n    </BaseLayout>\n  )\n}\n"],"names":["DeductionsCard","LoaderComponent","props","jsx","BaseBoundaries","DeductionsCardContent","employeeId","onEvent","useI18n","t","useTranslation","Components","useComponentContext","formatCurrency","useNumberFormatter","formatPercent","deductionsList","useDeductionsList","pendingDeleteDeduction","setPendingDeleteDeduction","handleConfirmDeleteDeduction","useDeleteDeduction","garnishment","result","componentEvents","isDeductionsLoading","deductions","deletingGarnishmentUuid","handleAdd","handleEdit","garnishmentsColumns","formatDeductionAmount","value","garnishmentsDataView","useDataView","HamburgerMenu","PencilSvg","TrashCanSvg","EmptyData","BaseLayout","PlusCircleIcon","Loading","DataView","DeleteDeductionDialog"],"mappings":"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"}

package/dist/components/Employee/Deductions/management/DeductionsComponents.js

@@ -1,36 +1,44 @@
-import { jsxs as u, jsx as n } from "react/jsx-runtime";
-import { useTranslation as l } from "react-i18next";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { useTranslation as p } from "react-i18next";
 import { Flex as c } from "../../../Common/Flex/Flex.js";
-import { useFlow as r } from "../../../Flow/useFlow.js";
-import { useComponentContext as p } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { ensureRequired as m } from "../../../../helpers/ensureRequired.js";
-import { componentEvents as d } from "../../../../shared/constants.js";
+import { useFlow as m } from "../../../Flow/useFlow.js";
+import { useComponentContext as d } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { ensureRequired as s } from "../../../../helpers/ensureRequired.js";
+import { componentEvents as a } from "../../../../shared/constants.js";
 import { DeductionsCard as E } from "./DeductionsCard/DeductionsCard.js";
-import { DeductionsEditForm as a } from "./DeductionsEditForm/DeductionsEditForm.js";
+import { DeductionsEditForm as f } from "./DeductionsEditForm/DeductionsEditForm.js";
 function S() {
-  const { employeeId: t, onEvent: o, successAlert: e } = r(), { t: s } = l("Employee.Management.Deductions"), i = p();
-  return /* @__PURE__ */ u(c, { flexDirection: "column", gap: 16, children: [
-    e ? /* @__PURE__ */ n(
-      i.Alert,
+  const { employeeId: t, onEvent: o, successAlert: e, LoaderComponent: n } = m(), { t: i } = p("Employee.Management.Deductions"), u = d();
+  return /* @__PURE__ */ l(c, { flexDirection: "column", gap: 16, children: [
+    e ? /* @__PURE__ */ r(
+      u.Alert,
       {
         status: "success",
-        label: s(`alerts.${e}`),
+        label: i(`alerts.${e}`),
         onDismiss: () => {
-          o(d.EMPLOYEE_MANAGEMENT_DEDUCTIONS_ALERT_DISMISSED, null);
+          o(a.EMPLOYEE_MANAGEMENT_DEDUCTIONS_ALERT_DISMISSED, null);
         }
       }
     ) : null,
-    /* @__PURE__ */ n(E, { employeeId: m(t), onEvent: o })
+    /* @__PURE__ */ r(
+      E,
+      {
+        employeeId: s(t),
+        onEvent: o,
+        LoaderComponent: n
+      }
+    )
   ] });
 }
 function T() {
-  const { employeeId: t, editingDeductionId: o, onEvent: e } = r();
-  return /* @__PURE__ */ n(
-    a,
+  const { employeeId: t, editingDeductionId: o, onEvent: e, LoaderComponent: n } = m();
+  return /* @__PURE__ */ r(
+    f,
     {
-      employeeId: m(t),
+      employeeId: s(t),
       editingDeductionId: o,
-      onEvent: e
+      onEvent: e,
+      LoaderComponent: n
     }
   );
 }

package/dist/components/Employee/Deductions/management/DeductionsComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeductionsComponents.js","sources":["../../../../../src/components/Employee/Deductions/management/DeductionsComponents.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { DeductionsCard } from './DeductionsCard'\nimport { DeductionsEditForm } from './DeductionsEditForm'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useFlow, type FlowContextInterface } from '@/components/Flow/useFlow'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { ensureRequired } from '@/helpers/ensureRequired'\nimport { componentEvents } from '@/shared/constants'\n\ntype DeductionsSuccessAlertCode = 'deductionAdded' | 'deductionUpdated' | 'deductionDeleted'\n\n/** @internal */\nexport interface DeductionsContextInterface extends FlowContextInterface {\n  employeeId?: string\n  /** Set when transitioning to `editDeduction` via the EDIT event; consumed\n   *  by `DeductionsEditFormContextual` to pre-populate the form. Omit on\n   *  ADD to open the form in create mode. */\n  editingDeductionId?: string\n  successAlert?: DeductionsSuccessAlertCode | null\n}\n\n/** @internal */\nexport function DeductionsCardContextual() {\n  const { employeeId, onEvent, successAlert } = useFlow<DeductionsContextInterface>()\n  const { t } = useTranslation('Employee.Management.Deductions')\n  const Components = useComponentContext()\n  return (\n    <Flex flexDirection=\"column\" gap={16}>\n      {successAlert ? (\n        <Components.Alert\n          status=\"success\"\n          label={t(`alerts.${successAlert}`)}\n          onDismiss={() => {\n            onEvent(componentEvents.EMPLOYEE_MANAGEMENT_DEDUCTIONS_ALERT_DISMISSED, null)\n          }}\n        />\n      ) : null}\n      <DeductionsCard employeeId={ensureRequired(employeeId)} onEvent={onEvent} />\n    </Flex>\n  )\n}\n\n/** @internal */\nexport function DeductionsEditFormContextual() {\n  const { employeeId, editingDeductionId, onEvent } = useFlow<DeductionsContextInterface>()\n  return (\n    <DeductionsEditForm\n      employeeId={ensureRequired(employeeId)}\n      editingDeductionId={editingDeductionId}\n      onEvent={onEvent}\n    />\n  )\n}\n"],"names":["DeductionsCardContextual","employeeId","onEvent","successAlert","useFlow","t","useTranslation","Components","useComponentContext","jsxs","Flex","jsx","componentEvents","DeductionsCard","ensureRequired","DeductionsEditFormContextual","editingDeductionId","DeductionsEditForm"],"mappings":";;;;;;;;;AAsBO,SAASA,IAA2B;AACzC,QAAM,EAAE,YAAAC,GAAY,SAAAC,GAAS,cAAAC,EAAA,IAAiBC,EAAA,GACxC,EAAE,GAAAC,EAAA,IAAMC,EAAe,gCAAgC,GACvDC,IAAaC,EAAA;AACnB,SACE,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAA;AAAA,IAAAP,IACC,gBAAAQ;AAAA,MAACJ,EAAW;AAAA,MAAX;AAAA,QACC,QAAO;AAAA,QACP,OAAOF,EAAE,UAAUF,CAAY,EAAE;AAAA,QACjC,WAAW,MAAM;AACf,UAAAD,EAAQU,EAAgB,gDAAgD,IAAI;AAAA,QAC9E;AAAA,MAAA;AAAA,IAAA,IAEA;AAAA,sBACHC,GAAA,EAAe,YAAYC,EAAeb,CAAU,GAAG,SAAAC,EAAA,CAAkB;AAAA,EAAA,GAC5E;AAEJ;AAGO,SAASa,IAA+B;AAC7C,QAAM,EAAE,YAAAd,GAAY,oBAAAe,GAAoB,SAAAd,EAAA,IAAYE,EAAA;AACpD,SACE,gBAAAO;AAAA,IAACM;AAAA,IAAA;AAAA,MACC,YAAYH,EAAeb,CAAU;AAAA,MACrC,oBAAAe;AAAA,MACA,SAAAd;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"DeductionsComponents.js","sources":["../../../../../src/components/Employee/Deductions/management/DeductionsComponents.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { DeductionsCard } from './DeductionsCard'\nimport { DeductionsEditForm } from './DeductionsEditForm'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useFlow, type FlowContextInterface } from '@/components/Flow/useFlow'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { ensureRequired } from '@/helpers/ensureRequired'\nimport { componentEvents } from '@/shared/constants'\n\ntype DeductionsSuccessAlertCode = 'deductionAdded' | 'deductionUpdated' | 'deductionDeleted'\n\n/** @internal */\nexport interface DeductionsContextInterface extends FlowContextInterface {\n  employeeId?: string\n  /** Set when transitioning to `editDeduction` via the EDIT event; consumed\n   *  by `DeductionsEditFormContextual` to pre-populate the form. Omit on\n   *  ADD to open the form in create mode. */\n  editingDeductionId?: string\n  successAlert?: DeductionsSuccessAlertCode | null\n}\n\n/** @internal */\nexport function DeductionsCardContextual() {\n  const { employeeId, onEvent, successAlert, LoaderComponent } =\n    useFlow<DeductionsContextInterface>()\n  const { t } = useTranslation('Employee.Management.Deductions')\n  const Components = useComponentContext()\n  return (\n    <Flex flexDirection=\"column\" gap={16}>\n      {successAlert ? (\n        <Components.Alert\n          status=\"success\"\n          label={t(`alerts.${successAlert}`)}\n          onDismiss={() => {\n            onEvent(componentEvents.EMPLOYEE_MANAGEMENT_DEDUCTIONS_ALERT_DISMISSED, null)\n          }}\n        />\n      ) : null}\n      <DeductionsCard\n        employeeId={ensureRequired(employeeId)}\n        onEvent={onEvent}\n        LoaderComponent={LoaderComponent}\n      />\n    </Flex>\n  )\n}\n\n/** @internal */\nexport function DeductionsEditFormContextual() {\n  const { employeeId, editingDeductionId, onEvent, LoaderComponent } =\n    useFlow<DeductionsContextInterface>()\n  return (\n    <DeductionsEditForm\n      employeeId={ensureRequired(employeeId)}\n      editingDeductionId={editingDeductionId}\n      onEvent={onEvent}\n      LoaderComponent={LoaderComponent}\n    />\n  )\n}\n"],"names":["DeductionsCardContextual","employeeId","onEvent","successAlert","LoaderComponent","useFlow","t","useTranslation","Components","useComponentContext","jsxs","Flex","jsx","componentEvents","DeductionsCard","ensureRequired","DeductionsEditFormContextual","editingDeductionId","DeductionsEditForm"],"mappings":";;;;;;;;;AAsBO,SAASA,IAA2B;AACzC,QAAM,EAAE,YAAAC,GAAY,SAAAC,GAAS,cAAAC,GAAc,iBAAAC,EAAA,IACzCC,EAAA,GACI,EAAE,GAAAC,EAAA,IAAMC,EAAe,gCAAgC,GACvDC,IAAaC,EAAA;AACnB,SACE,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAA;AAAA,IAAAR,IACC,gBAAAS;AAAA,MAACJ,EAAW;AAAA,MAAX;AAAA,QACC,QAAO;AAAA,QACP,OAAOF,EAAE,UAAUH,CAAY,EAAE;AAAA,QACjC,WAAW,MAAM;AACf,UAAAD,EAAQW,EAAgB,gDAAgD,IAAI;AAAA,QAC9E;AAAA,MAAA;AAAA,IAAA,IAEA;AAAA,IACJ,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,YAAYC,EAAed,CAAU;AAAA,QACrC,SAAAC;AAAA,QACA,iBAAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAGO,SAASY,IAA+B;AAC7C,QAAM,EAAE,YAAAf,GAAY,oBAAAgB,GAAoB,SAAAf,GAAS,iBAAAE,EAAA,IAC/CC,EAAA;AACF,SACE,gBAAAO;AAAA,IAACM;AAAA,IAAA;AAAA,MACC,YAAYH,EAAed,CAAU;AAAA,MACrC,oBAAAgB;AAAA,MACA,SAAAf;AAAA,MACA,iBAAAE;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Employee/Deductions/management/DeductionsEditForm/DeductionsEditForm.d.ts

@@ -30,4 +30,4 @@ export interface DeductionsEditFormProps extends BaseComponentInterface<'Employe
  * @returns The rendered add/edit form.
  * @public
  */
-export declare function DeductionsEditForm({ FallbackComponent, ...props }: DeductionsEditFormProps): import("react").JSX.Element;
+export declare function DeductionsEditForm({ FallbackComponent, LoaderComponent, ...props }: DeductionsEditFormProps): import("react").JSX.Element;

package/dist/components/Employee/Deductions/management/DeductionsEditForm/DeductionsEditForm.js

@@ -1,51 +1,58 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useDeductionsList as D } from "../../shared/useDeductionsList.js";
-import { useManagementDeductionsFormDictionary as d } from "./useFormDictionary.js";
-import { BaseBoundaries as M, BaseLayout as m } from "../../../../Base/Base.js";
+import { jsx as r } from "react/jsx-runtime";
+import { useDeductionsList as d } from "../../shared/useDeductionsList.js";
+import { useManagementDeductionsFormDictionary as M } from "./useFormDictionary.js";
+import { BaseBoundaries as _, BaseLayout as u } from "../../../../Base/Base.js";
 import "../../../../Base/useBase.js";
-import { useI18n as _, useComponentDictionary as p } from "../../../../../i18n/I18n.js";
-import { componentEvents as i } from "../../../../../shared/constants.js";
-import { DeductionsForm as f } from "../../shared/DeductionsForm/DeductionsForm.js";
-function F({ FallbackComponent: r, ...n }) {
-  return /* @__PURE__ */ o(
-    M,
+import { useI18n as f, useComponentDictionary as l } from "../../../../../i18n/I18n.js";
+import { componentEvents as m } from "../../../../../shared/constants.js";
+import { DeductionsForm as p } from "../../shared/DeductionsForm/DeductionsForm.js";
+function I({
+  FallbackComponent: n,
+  LoaderComponent: o,
+  ...e
+}) {
+  return /* @__PURE__ */ r(
+    _,
     {
       componentName: "Employee.Management.Deductions",
-      FallbackComponent: r,
-      children: /* @__PURE__ */ o(l, { ...n })
+      FallbackComponent: n,
+      LoaderComponent: o,
+      children: /* @__PURE__ */ r(N, { LoaderComponent: o, ...e })
     }
   );
 }
-function l({
-  employeeId: r,
-  editingDeductionId: n,
-  dictionary: s,
-  onEvent: E
+function N({
+  employeeId: n,
+  editingDeductionId: o,
+  dictionary: e,
+  onEvent: s,
+  LoaderComponent: i
 }) {
-  _("Employee.Management.Deductions"), p("Employee.Management.Deductions", s);
-  const e = D({ employeeId: r }), a = d();
-  if (e.isLoading)
-    return /* @__PURE__ */ o(m, { isLoading: !0, error: e.errorHandling.errors });
-  const u = n ? e.data.deductions.find((t) => t.uuid === n) ?? null : null;
-  return /* @__PURE__ */ o(m, { error: e.errorHandling.errors, children: /* @__PURE__ */ o(
-    f,
+  f("Employee.Management.Deductions"), l("Employee.Management.Deductions", e);
+  const t = d({ employeeId: n }), c = M();
+  if (t.isLoading)
+    return /* @__PURE__ */ r(u, { isLoading: !0, error: t.errorHandling.errors, LoaderComponent: i });
+  const a = o ? t.data.deductions.find((E) => E.uuid === o) ?? null : null;
+  return /* @__PURE__ */ r(u, { error: t.errorHandling.errors, LoaderComponent: i, children: /* @__PURE__ */ r(
+    p,
     {
-      employeeId: r,
-      deduction: u,
-      dictionary: a,
-      onSaved: (t, c) => {
-        E(
-          c === "create" ? i.EMPLOYEE_MANAGEMENT_DEDUCTIONS_EDIT_FORM_CREATED : i.EMPLOYEE_MANAGEMENT_DEDUCTIONS_EDIT_FORM_UPDATED,
-          t
+      employeeId: n,
+      deduction: a,
+      dictionary: c,
+      LoaderComponent: i,
+      onSaved: (E, D) => {
+        s(
+          D === "create" ? m.EMPLOYEE_MANAGEMENT_DEDUCTIONS_EDIT_FORM_CREATED : m.EMPLOYEE_MANAGEMENT_DEDUCTIONS_EDIT_FORM_UPDATED,
+          E
         );
       },
       onCancel: () => {
-        E(i.EMPLOYEE_MANAGEMENT_DEDUCTIONS_EDIT_FORM_CANCELLED);
+        s(m.EMPLOYEE_MANAGEMENT_DEDUCTIONS_EDIT_FORM_CANCELLED);
       }
     }
   ) });
 }
 export {
-  F as DeductionsEditForm
+  I as DeductionsEditForm
 };
 //# sourceMappingURL=DeductionsEditForm.js.map

package/dist/components/Employee/Deductions/management/DeductionsEditForm/DeductionsEditForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeductionsEditForm.js","sources":["../../../../../../src/components/Employee/Deductions/management/DeductionsEditForm/DeductionsEditForm.tsx"],"sourcesContent":["import { DeductionsForm } from '../../shared/DeductionsForm'\nimport { useDeductionsList } from '../../shared/useDeductionsList'\nimport { useManagementDeductionsFormDictionary } from './useFormDictionary'\nimport { BaseBoundaries, BaseLayout, type BaseComponentInterface } from '@/components/Base'\nimport { useI18n, useComponentDictionary } from '@/i18n'\nimport { componentEvents } from '@/shared/constants'\n\n/**\n * Props for {@link DeductionsEditForm}.\n *\n * @public\n */\nexport interface DeductionsEditFormProps extends BaseComponentInterface<'Employee.Management.Deductions'> {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** When provided, the form opens in edit mode pre-populated with the\n   *  matching active deduction. Omit to open in add mode. */\n  editingDeductionId?: string\n  /** Callback invoked when the form emits an event. See the events table on {@link DeductionsEditForm} for the available event types and payloads. */\n  onEvent: BaseComponentInterface['onEvent']\n}\n\n/**\n * Standalone add/edit surface for a single employee deduction.\n *\n * @remarks\n * Renders the inline form for a post-tax custom deduction or court-ordered garnishment. Looks up the row to edit by `editingDeductionId`; omit it to open in add mode. Resolves its text against the `Employee.Management.Deductions` translation namespace so partner overrides on that namespace flow into the form. For an orchestrated card-plus-form flow, use {@link Deductions}.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/management/deductions/editForm/created` | Fired after a new deduction is saved | The created `Garnishment` |\n * | `employee/management/deductions/editForm/updated` | Fired after an existing deduction is updated | The updated `Garnishment` |\n * | `employee/management/deductions/editForm/cancelled` | Fired when the user cancels the form | — |\n *\n * @param input - See {@link DeductionsEditFormProps}, plus a `FallbackComponent` override for the error boundary.\n * @returns The rendered add/edit form.\n * @public\n */\nexport function DeductionsEditForm({ FallbackComponent, ...props }: DeductionsEditFormProps) {\n  return (\n    <BaseBoundaries\n      componentName=\"Employee.Management.Deductions\"\n      FallbackComponent={FallbackComponent}\n    >\n      <DeductionsEditFormRoot {...props} />\n    </BaseBoundaries>\n  )\n}\n\nfunction DeductionsEditFormRoot({\n  employeeId,\n  editingDeductionId,\n  dictionary,\n  onEvent,\n}: DeductionsEditFormProps) {\n  useI18n('Employee.Management.Deductions')\n  useComponentDictionary('Employee.Management.Deductions', dictionary)\n\n  // React Query dedupes against any sibling consumer of this list, so this\n  // is just a typed handle on the loaded row used to seed edit mode.\n  const list = useDeductionsList({ employeeId })\n  const formDictionary = useManagementDeductionsFormDictionary()\n\n  if (list.isLoading) {\n    return <BaseLayout isLoading error={list.errorHandling.errors} />\n  }\n\n  const deduction = editingDeductionId\n    ? (list.data.deductions.find(d => d.uuid === editingDeductionId) ?? null)\n    : null\n\n  return (\n    <BaseLayout error={list.errorHandling.errors}>\n      <DeductionsForm\n        employeeId={employeeId}\n        deduction={deduction}\n        dictionary={formDictionary}\n        onSaved={(saved, mode) => {\n          onEvent(\n            mode === 'create'\n              ? componentEvents.EMPLOYEE_MANAGEMENT_DEDUCTIONS_EDIT_FORM_CREATED\n              : componentEvents.EMPLOYEE_MANAGEMENT_DEDUCTIONS_EDIT_FORM_UPDATED,\n            saved,\n          )\n        }}\n        onCancel={() => {\n          onEvent(componentEvents.EMPLOYEE_MANAGEMENT_DEDUCTIONS_EDIT_FORM_CANCELLED)\n        }}\n      />\n    </BaseLayout>\n  )\n}\n"],"names":["DeductionsEditForm","FallbackComponent","props","jsx","BaseBoundaries","DeductionsEditFormRoot","employeeId","editingDeductionId","dictionary","onEvent","useI18n","useComponentDictionary","list","useDeductionsList","formDictionary","useManagementDeductionsFormDictionary","BaseLayout","deduction","d","DeductionsForm","saved","mode","componentEvents"],"mappings":";;;;;;;;AAuCO,SAASA,EAAmB,EAAE,mBAAAC,GAAmB,GAAGC,KAAkC;AAC3F,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,eAAc;AAAA,MACd,mBAAAH;AAAA,MAEA,UAAA,gBAAAE,EAACE,GAAA,EAAwB,GAAGH,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGzC;AAEA,SAASG,EAAuB;AAAA,EAC9B,YAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AACF,GAA4B;AAC1B,EAAAC,EAAQ,gCAAgC,GACxCC,EAAuB,kCAAkCH,CAAU;AAInE,QAAMI,IAAOC,EAAkB,EAAE,YAAAP,GAAY,GACvCQ,IAAiBC,EAAA;AAEvB,MAAIH,EAAK;AACP,6BAAQI,GAAA,EAAW,WAAS,IAAC,OAAOJ,EAAK,cAAc,QAAQ;AAGjE,QAAMK,IAAYV,IACbK,EAAK,KAAK,WAAW,KAAK,CAAAM,MAAKA,EAAE,SAASX,CAAkB,KAAK,OAClE;AAEJ,SACE,gBAAAJ,EAACa,GAAA,EAAW,OAAOJ,EAAK,cAAc,QACpC,UAAA,gBAAAT;AAAA,IAACgB;AAAA,IAAA;AAAA,MACC,YAAAb;AAAA,MACA,WAAAW;AAAA,MACA,YAAYH;AAAA,MACZ,SAAS,CAACM,GAAOC,MAAS;AACxB,QAAAZ;AAAA,UACEY,MAAS,WACLC,EAAgB,mDAChBA,EAAgB;AAAA,UACpBF;AAAA,QAAA;AAAA,MAEJ;AAAA,MACA,UAAU,MAAM;AACd,QAAAX,EAAQa,EAAgB,kDAAkD;AAAA,MAC5E;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"DeductionsEditForm.js","sources":["../../../../../../src/components/Employee/Deductions/management/DeductionsEditForm/DeductionsEditForm.tsx"],"sourcesContent":["import { DeductionsForm } from '../../shared/DeductionsForm'\nimport { useDeductionsList } from '../../shared/useDeductionsList'\nimport { useManagementDeductionsFormDictionary } from './useFormDictionary'\nimport { BaseBoundaries, BaseLayout, type BaseComponentInterface } from '@/components/Base'\nimport { useI18n, useComponentDictionary } from '@/i18n'\nimport { componentEvents } from '@/shared/constants'\n\n/**\n * Props for {@link DeductionsEditForm}.\n *\n * @public\n */\nexport interface DeductionsEditFormProps extends BaseComponentInterface<'Employee.Management.Deductions'> {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** When provided, the form opens in edit mode pre-populated with the\n   *  matching active deduction. Omit to open in add mode. */\n  editingDeductionId?: string\n  /** Callback invoked when the form emits an event. See the events table on {@link DeductionsEditForm} for the available event types and payloads. */\n  onEvent: BaseComponentInterface['onEvent']\n}\n\n/**\n * Standalone add/edit surface for a single employee deduction.\n *\n * @remarks\n * Renders the inline form for a post-tax custom deduction or court-ordered garnishment. Looks up the row to edit by `editingDeductionId`; omit it to open in add mode. Resolves its text against the `Employee.Management.Deductions` translation namespace so partner overrides on that namespace flow into the form. For an orchestrated card-plus-form flow, use {@link Deductions}.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/management/deductions/editForm/created` | Fired after a new deduction is saved | The created `Garnishment` |\n * | `employee/management/deductions/editForm/updated` | Fired after an existing deduction is updated | The updated `Garnishment` |\n * | `employee/management/deductions/editForm/cancelled` | Fired when the user cancels the form | — |\n *\n * @param input - See {@link DeductionsEditFormProps}, plus a `FallbackComponent` override for the error boundary.\n * @returns The rendered add/edit form.\n * @public\n */\nexport function DeductionsEditForm({\n  FallbackComponent,\n  LoaderComponent,\n  ...props\n}: DeductionsEditFormProps) {\n  return (\n    <BaseBoundaries\n      componentName=\"Employee.Management.Deductions\"\n      FallbackComponent={FallbackComponent}\n      LoaderComponent={LoaderComponent}\n    >\n      <DeductionsEditFormRoot LoaderComponent={LoaderComponent} {...props} />\n    </BaseBoundaries>\n  )\n}\n\nfunction DeductionsEditFormRoot({\n  employeeId,\n  editingDeductionId,\n  dictionary,\n  onEvent,\n  LoaderComponent,\n}: DeductionsEditFormProps) {\n  useI18n('Employee.Management.Deductions')\n  useComponentDictionary('Employee.Management.Deductions', dictionary)\n\n  // React Query dedupes against any sibling consumer of this list, so this\n  // is just a typed handle on the loaded row used to seed edit mode.\n  const list = useDeductionsList({ employeeId })\n  const formDictionary = useManagementDeductionsFormDictionary()\n\n  if (list.isLoading) {\n    return (\n      <BaseLayout isLoading error={list.errorHandling.errors} LoaderComponent={LoaderComponent} />\n    )\n  }\n\n  const deduction = editingDeductionId\n    ? (list.data.deductions.find(d => d.uuid === editingDeductionId) ?? null)\n    : null\n\n  return (\n    <BaseLayout error={list.errorHandling.errors} LoaderComponent={LoaderComponent}>\n      <DeductionsForm\n        employeeId={employeeId}\n        deduction={deduction}\n        dictionary={formDictionary}\n        LoaderComponent={LoaderComponent}\n        onSaved={(saved, mode) => {\n          onEvent(\n            mode === 'create'\n              ? componentEvents.EMPLOYEE_MANAGEMENT_DEDUCTIONS_EDIT_FORM_CREATED\n              : componentEvents.EMPLOYEE_MANAGEMENT_DEDUCTIONS_EDIT_FORM_UPDATED,\n            saved,\n          )\n        }}\n        onCancel={() => {\n          onEvent(componentEvents.EMPLOYEE_MANAGEMENT_DEDUCTIONS_EDIT_FORM_CANCELLED)\n        }}\n      />\n    </BaseLayout>\n  )\n}\n"],"names":["DeductionsEditForm","FallbackComponent","LoaderComponent","props","jsx","BaseBoundaries","DeductionsEditFormRoot","employeeId","editingDeductionId","dictionary","onEvent","useI18n","useComponentDictionary","list","useDeductionsList","formDictionary","useManagementDeductionsFormDictionary","BaseLayout","deduction","d","DeductionsForm","saved","mode","componentEvents"],"mappings":";;;;;;;;AAuCO,SAASA,EAAmB;AAAA,EACjC,mBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,GAAGC;AACL,GAA4B;AAC1B,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,eAAc;AAAA,MACd,mBAAAJ;AAAA,MACA,iBAAAC;AAAA,MAEA,UAAA,gBAAAE,EAACE,GAAA,EAAuB,iBAAAJ,GAAmC,GAAGC,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAG3E;AAEA,SAASG,EAAuB;AAAA,EAC9B,YAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,iBAAAR;AACF,GAA4B;AAC1B,EAAAS,EAAQ,gCAAgC,GACxCC,EAAuB,kCAAkCH,CAAU;AAInE,QAAMI,IAAOC,EAAkB,EAAE,YAAAP,GAAY,GACvCQ,IAAiBC,EAAA;AAEvB,MAAIH,EAAK;AACP,WACE,gBAAAT,EAACa,KAAW,WAAS,IAAC,OAAOJ,EAAK,cAAc,QAAQ,iBAAAX,GAAkC;AAI9F,QAAMgB,IAAYV,IACbK,EAAK,KAAK,WAAW,KAAK,CAAAM,MAAKA,EAAE,SAASX,CAAkB,KAAK,OAClE;AAEJ,2BACGS,GAAA,EAAW,OAAOJ,EAAK,cAAc,QAAQ,iBAAAX,GAC5C,UAAA,gBAAAE;AAAA,IAACgB;AAAA,IAAA;AAAA,MACC,YAAAb;AAAA,MACA,WAAAW;AAAA,MACA,YAAYH;AAAA,MACZ,iBAAAb;AAAA,MACA,SAAS,CAACmB,GAAOC,MAAS;AACxB,QAAAZ;AAAA,UACEY,MAAS,WACLC,EAAgB,mDAChBA,EAAgB;AAAA,UACpBF;AAAA,QAAA;AAAA,MAEJ;AAAA,MACA,UAAU,MAAM;AACd,QAAAX,EAAQa,EAAgB,kDAAkD;AAAA,MAC5E;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/Employee/Deductions/onboarding/Deductions.d.ts

@@ -46,4 +46,4 @@ export interface DeductionsProps extends BaseComponentInterface<'Employee.Deduct
  * }
  * ```
  */
-export declare function Deductions({ employeeId, dictionary, onEvent }: DeductionsProps): import("react").JSX.Element;
+export declare function Deductions({ employeeId, dictionary, onEvent, LoaderComponent }: DeductionsProps): import("react").JSX.Element;

package/dist/components/Employee/Deductions/onboarding/Deductions.js

@@ -1,27 +1,36 @@
 import { jsx as n } from "react/jsx-runtime";
-import { createMachine as m } from "robot3";
-import { useMemo as c } from "react";
-import { DeductionsListContextual as s } from "./deductionsContextualComponents.js";
-import { deductionsMachine as u } from "./stateMachine.js";
-import { Flow as p } from "../../../Flow/Flow.js";
-import { BaseBoundaries as f } from "../../../Base/Base.js";
-import { useComponentDictionary as a, useI18n as d } from "../../../../i18n/I18n.js";
-function j({ employeeId: o, dictionary: t, onEvent: e }) {
-  return /* @__PURE__ */ n(f, { componentName: "Employee.Deductions", children: /* @__PURE__ */ n(D, { employeeId: o, dictionary: t, onEvent: e }) });
+import { createMachine as c } from "robot3";
+import { useMemo as s } from "react";
+import { DeductionsListContextual as u } from "./deductionsContextualComponents.js";
+import { deductionsMachine as p } from "./stateMachine.js";
+import { Flow as f } from "../../../Flow/Flow.js";
+import { BaseBoundaries as a } from "../../../Base/Base.js";
+import { useComponentDictionary as d, useI18n as D } from "../../../../i18n/I18n.js";
+function F({ employeeId: t, dictionary: e, onEvent: i, LoaderComponent: o }) {
+  return /* @__PURE__ */ n(a, { componentName: "Employee.Deductions", LoaderComponent: o, children: /* @__PURE__ */ n(
+    l,
+    {
+      employeeId: t,
+      dictionary: e,
+      onEvent: i,
+      LoaderComponent: o
+    }
+  ) });
 }
-function D({ employeeId: o, dictionary: t, onEvent: e }) {
-  a("Employee.Deductions", t), d("Employee.Deductions");
-  const i = c(
-    () => m("list", u, (r) => ({
-      ...r,
-      component: s,
-      employeeId: o
+function l({ employeeId: t, dictionary: e, onEvent: i, LoaderComponent: o }) {
+  d("Employee.Deductions", e), D("Employee.Deductions");
+  const r = s(
+    () => c("list", p, (m) => ({
+      ...m,
+      component: u,
+      employeeId: t,
+      LoaderComponent: o
     })),
-    [o]
+    [t, o]
   );
-  return /* @__PURE__ */ n(p, { machine: i, onEvent: e });
+  return /* @__PURE__ */ n(f, { machine: r, onEvent: i });
 }
 export {
-  j as Deductions
+  F as Deductions
 };
 //# sourceMappingURL=Deductions.js.map

package/dist/components/Employee/Deductions/onboarding/Deductions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Deductions.js","sources":["../../../../../src/components/Employee/Deductions/onboarding/Deductions.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMemo } from 'react'\nimport {\n  DeductionsListContextual,\n  type DeductionsContextInterface,\n} from './deductionsContextualComponents'\nimport { deductionsMachine } from './stateMachine'\nimport { Flow } from '@/components/Flow/Flow'\nimport { BaseBoundaries, type BaseComponentInterface } from '@/components/Base/Base'\nimport { useComponentDictionary, useI18n } from '@/i18n'\n\n/**\n * Props for {@link Deductions}.\n *\n * @public\n */\nexport interface DeductionsProps extends BaseComponentInterface<'Employee.Deductions'> {\n  /** The associated employee identifier. */\n  employeeId: string\n}\n\n/**\n * Onboarding step for collecting an employee's post-tax deductions and court-ordered garnishments.\n *\n * @remarks\n * Renders the employee's current deductions as a list, with an empty state when none exist. Users add or edit deductions inline — post-tax custom deductions or court-ordered garnishments — and can complete the step with or without any active deductions.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/deductions/add` | Fired when the user opens the form to add a new deduction | — |\n * | `employee/deductions/edit` | Fired when the user opens the form to edit an existing deduction | The matching `Garnishment` |\n * | `employee/deductions/created` | Fired after a new deduction is saved | The created `Garnishment` |\n * | `employee/deductions/updated` | Fired after an existing deduction is updated | The updated `Garnishment` |\n * | `employee/deductions/deleted` | Fired after a deduction is deleted and others remain | The deleted `Garnishment` |\n * | `employee/deductions/deletedEmpty` | Fired after the last deduction is deleted, leaving none | — |\n * | `employee/deductions/cancel` | Fired when the user cancels the form while other deductions exist | — |\n * | `employee/deductions/cancelEmpty` | Fired when the user cancels the form and no deductions remain | — |\n * | `employee/deductions/done` | Fired when the step is complete and the parent flow can advance | — |\n *\n * @param props - See {@link DeductionsProps}.\n * @returns The deductions onboarding step.\n * @public\n * @group Block components\n *\n * @example\n * ```tsx\n * import { EmployeeOnboarding } from '@gusto/embedded-react-sdk'\n *\n * function MyComponent() {\n *   return (\n *     <EmployeeOnboarding.Deductions\n *       employeeId=\"4b3f930f-82cd-48a8-b797-798686e12e5e\"\n *       onEvent={() => {}}\n *     />\n *   )\n * }\n * ```\n */\nexport function Deductions({ employeeId, dictionary, onEvent }: DeductionsProps) {\n  return (\n    <BaseBoundaries componentName=\"Employee.Deductions\">\n      <DeductionsRoot employeeId={employeeId} dictionary={dictionary} onEvent={onEvent} />\n    </BaseBoundaries>\n  )\n}\n\nfunction DeductionsRoot({ employeeId, dictionary, onEvent }: DeductionsProps) {\n  useComponentDictionary('Employee.Deductions', dictionary)\n  useI18n('Employee.Deductions')\n\n  const machine = useMemo(\n    () =>\n      createMachine('list', deductionsMachine, (initialContext: DeductionsContextInterface) => ({\n        ...initialContext,\n        component: DeductionsListContextual,\n        employeeId,\n      })),\n    [employeeId],\n  )\n\n  return <Flow machine={machine} onEvent={onEvent} />\n}\n"],"names":["Deductions","employeeId","dictionary","onEvent","jsx","BaseBoundaries","DeductionsRoot","useComponentDictionary","useI18n","machine","useMemo","createMachine","deductionsMachine","initialContext","DeductionsListContextual","Flow"],"mappings":";;;;;;;;AA2DO,SAASA,EAAW,EAAE,YAAAC,GAAY,YAAAC,GAAY,SAAAC,KAA4B;AAC/E,SACE,gBAAAC,EAACC,KAAe,eAAc,uBAC5B,4BAACC,GAAA,EAAe,YAAAL,GAAwB,YAAAC,GAAwB,SAAAC,EAAA,CAAkB,EAAA,CACpF;AAEJ;AAEA,SAASG,EAAe,EAAE,YAAAL,GAAY,YAAAC,GAAY,SAAAC,KAA4B;AAC5E,EAAAI,EAAuB,uBAAuBL,CAAU,GACxDM,EAAQ,qBAAqB;AAE7B,QAAMC,IAAUC;AAAA,IACd,MACEC,EAAc,QAAQC,GAAmB,CAACC,OAAgD;AAAA,MACxF,GAAGA;AAAA,MACH,WAAWC;AAAA,MACX,YAAAb;AAAA,IAAA,EACA;AAAA,IACJ,CAACA,CAAU;AAAA,EAAA;AAGb,SAAO,gBAAAG,EAACW,GAAA,EAAK,SAAAN,GAAkB,SAAAN,EAAA,CAAkB;AACnD;"}
+{"version":3,"file":"Deductions.js","sources":["../../../../../src/components/Employee/Deductions/onboarding/Deductions.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMemo } from 'react'\nimport {\n  DeductionsListContextual,\n  type DeductionsContextInterface,\n} from './deductionsContextualComponents'\nimport { deductionsMachine } from './stateMachine'\nimport { Flow } from '@/components/Flow/Flow'\nimport { BaseBoundaries, type BaseComponentInterface } from '@/components/Base/Base'\nimport { useComponentDictionary, useI18n } from '@/i18n'\n\n/**\n * Props for {@link Deductions}.\n *\n * @public\n */\nexport interface DeductionsProps extends BaseComponentInterface<'Employee.Deductions'> {\n  /** The associated employee identifier. */\n  employeeId: string\n}\n\n/**\n * Onboarding step for collecting an employee's post-tax deductions and court-ordered garnishments.\n *\n * @remarks\n * Renders the employee's current deductions as a list, with an empty state when none exist. Users add or edit deductions inline — post-tax custom deductions or court-ordered garnishments — and can complete the step with or without any active deductions.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/deductions/add` | Fired when the user opens the form to add a new deduction | — |\n * | `employee/deductions/edit` | Fired when the user opens the form to edit an existing deduction | The matching `Garnishment` |\n * | `employee/deductions/created` | Fired after a new deduction is saved | The created `Garnishment` |\n * | `employee/deductions/updated` | Fired after an existing deduction is updated | The updated `Garnishment` |\n * | `employee/deductions/deleted` | Fired after a deduction is deleted and others remain | The deleted `Garnishment` |\n * | `employee/deductions/deletedEmpty` | Fired after the last deduction is deleted, leaving none | — |\n * | `employee/deductions/cancel` | Fired when the user cancels the form while other deductions exist | — |\n * | `employee/deductions/cancelEmpty` | Fired when the user cancels the form and no deductions remain | — |\n * | `employee/deductions/done` | Fired when the step is complete and the parent flow can advance | — |\n *\n * @param props - See {@link DeductionsProps}.\n * @returns The deductions onboarding step.\n * @public\n * @group Block components\n *\n * @example\n * ```tsx\n * import { EmployeeOnboarding } from '@gusto/embedded-react-sdk'\n *\n * function MyComponent() {\n *   return (\n *     <EmployeeOnboarding.Deductions\n *       employeeId=\"4b3f930f-82cd-48a8-b797-798686e12e5e\"\n *       onEvent={() => {}}\n *     />\n *   )\n * }\n * ```\n */\nexport function Deductions({ employeeId, dictionary, onEvent, LoaderComponent }: DeductionsProps) {\n  return (\n    <BaseBoundaries componentName=\"Employee.Deductions\" LoaderComponent={LoaderComponent}>\n      <DeductionsRoot\n        employeeId={employeeId}\n        dictionary={dictionary}\n        onEvent={onEvent}\n        LoaderComponent={LoaderComponent}\n      />\n    </BaseBoundaries>\n  )\n}\n\nfunction DeductionsRoot({ employeeId, dictionary, onEvent, LoaderComponent }: DeductionsProps) {\n  useComponentDictionary('Employee.Deductions', dictionary)\n  useI18n('Employee.Deductions')\n\n  const machine = useMemo(\n    () =>\n      createMachine('list', deductionsMachine, (initialContext: DeductionsContextInterface) => ({\n        ...initialContext,\n        component: DeductionsListContextual,\n        employeeId,\n        LoaderComponent,\n      })),\n    [employeeId, LoaderComponent],\n  )\n\n  return <Flow machine={machine} onEvent={onEvent} />\n}\n"],"names":["Deductions","employeeId","dictionary","onEvent","LoaderComponent","jsx","BaseBoundaries","DeductionsRoot","useComponentDictionary","useI18n","machine","useMemo","createMachine","deductionsMachine","initialContext","DeductionsListContextual","Flow"],"mappings":";;;;;;;;AA2DO,SAASA,EAAW,EAAE,YAAAC,GAAY,YAAAC,GAAY,SAAAC,GAAS,iBAAAC,KAAoC;AAChG,SACE,gBAAAC,EAACC,GAAA,EAAe,eAAc,uBAAsB,iBAAAF,GAClD,UAAA,gBAAAC;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,YAAAN;AAAA,MACA,YAAAC;AAAA,MACA,SAAAC;AAAA,MACA,iBAAAC;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAEA,SAASG,EAAe,EAAE,YAAAN,GAAY,YAAAC,GAAY,SAAAC,GAAS,iBAAAC,KAAoC;AAC7F,EAAAI,EAAuB,uBAAuBN,CAAU,GACxDO,EAAQ,qBAAqB;AAE7B,QAAMC,IAAUC;AAAA,IACd,MACEC,EAAc,QAAQC,GAAmB,CAACC,OAAgD;AAAA,MACxF,GAAGA;AAAA,MACH,WAAWC;AAAA,MACX,YAAAd;AAAA,MACA,iBAAAG;AAAA,IAAA,EACA;AAAA,IACJ,CAACH,GAAYG,CAAe;AAAA,EAAA;AAG9B,SAAO,gBAAAC,EAACW,GAAA,EAAK,SAAAN,GAAkB,SAAAP,EAAA,CAAkB;AACnD;"}