@gusto/embedded-react-sdk 0.57.3 → 0.58.0

package/CHANGELOG.md

@@ -1,5 +1,93 @@
 # Changelog
 
+## [0.58.0](https://github.com/Gusto/embedded-react-sdk/compare/v0.57.3...v0.58.0) (2026-11-02)
+
+### Breaking Changes
+
+#### Removed `Payroll.TransitionFlow`, `Payroll.TransitionPayroll`, and `Payroll.TransitionCreation` ([#3030](https://github.com/Gusto/embedded-react-sdk/issues/3030))
+
+The API now creates transition payrolls, so the SDK no longer has a creation step. These components are removed along with their props types, `TransitionCreationFormData`, the `Payroll.Transition` and `Payroll.TransitionCreation` translation namespaces, and the `transition/created` event (`componentEvents.TRANSITION_CREATED`).
+
+Render `Payroll.PayrollFlow` to run transition payrolls. It routes them to `Payroll.TransitionConfiguration`, then to `PayrollConfiguration` and the rest of the execution steps.
+
+```tsx
+// Before
+<Payroll.TransitionFlow
+  companyId={companyId}
+  startDate={startDate}
+  endDate={endDate}
+  payScheduleUuid={payScheduleUuid}
+  onEvent={onEvent}
+/>
+
+// After
+<Payroll.PayrollFlow companyId={companyId} onEvent={onEvent} />
+```
+
+If you compose the payroll screens yourself, render `Payroll.TransitionConfiguration` with the transition payroll's ID:
+
+```tsx
+<Payroll.TransitionConfiguration companyId={companyId} payrollId={payrollId} onEvent={onEvent} />
+```
+
+#### `PayrollList` emits `transition/payrollSelected` for transition payrolls ([#3021](https://github.com/Gusto/embedded-react-sdk/issues/3021))
+
+Clicking a transition payroll row in `PayrollList` no longer emits `runPayroll/selected`. It now emits `transition/payrollSelected` with the same `{ payrollUuid, payPeriod }` payload.
+
+```tsx
+// Before
+if (eventType === componentEvents.RUN_PAYROLL_SELECTED) {
+  // fired for regular and transition payrolls
+}
+
+// After
+if (eventType === componentEvents.RUN_PAYROLL_SELECTED) {
+  // regular payrolls only
+}
+if (eventType === componentEvents.TRANSITION_PAYROLL_SELECTED) {
+  // render Payroll.TransitionConfiguration with data.payrollUuid
+}
+```
+
+#### Regular rate of pay graduated from `UnstableFeatures` to `Features` ([#3009](https://github.com/Gusto/embedded-react-sdk/issues/3009))
+
+`GustoProvider` has a new `features` prop for released functionality that is on by default. `UnstableFeatures.payrollRegularRateOfPay` is replaced by `Features.regularRateOfPay`, which defaults to `true`. Only an explicit `false` turns it off. The `@alpha` `disableWorkweekStartDayEditing` prop is removed from `PaySchedule` and `usePayScheduleForm`.
+
+```tsx
+// Before: opt in
+<GustoProvider config={config} unstableFeatures={{ payrollRegularRateOfPay: true }}>
+
+// After: on by default. To opt out:
+<GustoProvider config={config} features={{ regularRateOfPay: false }}>
+```
+
+### Features & Enhancements
+
+- `Payroll.TransitionConfiguration` is now public. It updates the settings of an API-created transition payroll and hands off to `PayrollConfiguration` ([#3000](https://github.com/Gusto/embedded-react-sdk/issues/3000), [#3050](https://github.com/Gusto/embedded-react-sdk/issues/3050))
+- `PayrollFlow` routes transition payrolls to `TransitionConfiguration`, then continues to `PayrollConfiguration` for the same payroll ([#3021](https://github.com/Gusto/embedded-react-sdk/issues/3021))
+- The transition payroll alert lists every open transition payroll, with its own Run and Skip buttons. Run and skip events include the payroll ID. A calculated transition payroll offers Review and submit and emits `payroll/review` ([#3008](https://github.com/Gusto/embedded-react-sdk/issues/3008), [#3021](https://github.com/Gusto/embedded-react-sdk/issues/3021))
+- The `PaySchedule` workweek start day API is now public ([#3009](https://github.com/Gusto/embedded-react-sdk/issues/3009))
+- Payroll employee editors show approved PTO request hours separately from additional hours entered during payroll. Approved hours are read only. The headless payroll form exposes approved hours so custom editors can show the same split ([#2986](https://github.com/Gusto/embedded-react-sdk/issues/2986))
+- Sort `ContractorManagement.ContractorList` by last name. `TableProps` gains optional `sortDescriptor` and `onSortChange` for sortable columns in custom component adapters ([#2997](https://github.com/Gusto/embedded-react-sdk/issues/2997))
+- Add `getOptionDescription` to `RadioGroupHookField` for per-option descriptions ([#2996](https://github.com/Gusto/embedded-react-sdk/issues/2996))
+
+### Fixes
+
+- Prevent a fast double-click from submitting a composed form twice, which could create duplicate records such as a second job ([#3028](https://github.com/Gusto/embedded-react-sdk/issues/3028))
+- Create dismissal payroll for the selected employee when two dismissed employees share a pay period ([#3024](https://github.com/Gusto/embedded-react-sdk/issues/3024))
+- Default off-cycle payroll withholding to the company's pay schedule frequency instead of always every other week ([#3040](https://github.com/Gusto/embedded-react-sdk/issues/3040))
+- Show the correct compensation type (for example "Salary/Eligible for overtime") on the single-job `Compensation` card ([#3042](https://github.com/Gusto/embedded-react-sdk/issues/3042))
+- Show the compensation type for salaried employees in the payroll overview's Hours worked table ([#3031](https://github.com/Gusto/embedded-react-sdk/issues/3031))
+- Show estimated total pay instead of $0.00 when the API leaves out gross pay ([#3025](https://github.com/Gusto/embedded-react-sdk/issues/3025))
+- Stop a pay schedule with a `null` custom name from failing the whole pay schedule list ([#3049](https://github.com/Gusto/embedded-react-sdk/issues/3049))
+- Let "View checks" submit after switching print check stock types with a cleared starting number ([#3032](https://github.com/Gusto/embedded-react-sdk/issues/3032))
+- Remove the misleading Totals row from the payroll receipt's tax table. Lines like SDI and Paid Family Leave are not part of the tax debit, which the Debited section still shows ([#3027](https://github.com/Gusto/embedded-react-sdk/issues/3027))
+
+### Chores & Maintenance
+
+- Bump runtime dependencies (`i18next`, `react-i18next`) ([#3018](https://github.com/Gusto/embedded-react-sdk/issues/3018), [#3020](https://github.com/Gusto/embedded-react-sdk/issues/3020))
+- Bump dev dependencies (`@microsoft/api-extractor`, `@mswjs/interceptors`, Storybook addons, `typescript-eslint`, `sass-embedded`, `pixelmatch`) ([#3044](https://github.com/Gusto/embedded-react-sdk/issues/3044), [#3036](https://github.com/Gusto/embedded-react-sdk/issues/3036), [#3045](https://github.com/Gusto/embedded-react-sdk/issues/3045), [#3035](https://github.com/Gusto/embedded-react-sdk/issues/3035), [#3034](https://github.com/Gusto/embedded-react-sdk/issues/3034), [#3033](https://github.com/Gusto/embedded-react-sdk/issues/3033), [#3047](https://github.com/Gusto/embedded-react-sdk/issues/3047), [#3037](https://github.com/Gusto/embedded-react-sdk/issues/3037), [#3043](https://github.com/Gusto/embedded-react-sdk/issues/3043), [#3019](https://github.com/Gusto/embedded-react-sdk/issues/3019))
+
 ## [0.57.3](https://github.com/Gusto/embedded-react-sdk/compare/v0.57.2...v0.57.3) (2026-10-27)
 
 ### Features & Enhancements

package/dist/components/Common/DataView/DataCards/DataCards.js

@@ -1,94 +1,126 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { useId as T } from "react";
-import y from "classnames";
-import { useTranslation as j } from "react-i18next";
-import r from "./DataCards.module.scss.js";
+import { jsxs as d, jsx as l } from "react/jsx-runtime";
+import { useId as j } from "react";
+import x from "classnames";
+import { useTranslation as F } from "react-i18next";
+import t from "./DataCards.module.scss.js";
 import { useSelectionState as H } from "../useSelectionState.js";
-import { Flex as w } from "../../Flex/Flex.js";
-import { useComponentContext as V } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-const O = ({
-  label: x,
-  data: s,
-  columns: f,
-  itemMenu: p,
+import { getSortControls as K } from "../getSortControls.js";
+import { Flex as A } from "../../Flex/Flex.js";
+import { useComponentContext as S } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+const y = "none", X = ({
+  label: $,
+  data: i,
+  columns: v,
+  itemMenu: C,
   onSelect: c,
-  onSelectAll: L,
-  getIsItemSelected: m,
-  hideSelectAll: R,
-  emptyState: v,
-  footer: C,
-  selectionMode: b = "multiple",
-  isWithinBox: d,
-  isFetching: N
+  onSelectAll: D,
+  getIsItemSelected: b,
+  hideSelectAll: O,
+  emptyState: N,
+  footer: k,
+  selectionMode: L = "multiple",
+  isWithinBox: u,
+  isFetching: R,
+  sortDescriptor: h,
+  onSortChange: m
 }) => {
-  const t = V(), { t: u } = j("common"), k = T(), { allSelected: D } = H(s, m), A = (l, o) => {
+  const o = S(), { t: n } = F("common"), T = j(), { allSelected: E } = H(i, b), p = [], f = /* @__PURE__ */ new Map();
+  m && (p.push({ value: y, label: n("card.sortDefaultOption") }), f.set(y, () => {
+    m(void 0);
+  })), v.forEach((e) => {
+    if (!e.isSortable || !m || typeof e.title != "string") return;
+    const a = K(e.key, h, m), r = e.title;
+    p.push(
+      {
+        value: `${e.key}:ascending`,
+        label: n("card.sortAscendingOption", { column: r })
+      },
+      {
+        value: `${e.key}:descending`,
+        label: n("card.sortDescendingOption", { column: r })
+      }
+    ), f.set(`${e.key}:ascending`, a.onSortAscending), f.set(`${e.key}:descending`, a.onSortDescending);
+  });
+  const V = (e, a) => {
     if (!c) return;
-    const a = m?.(l) ?? !1;
-    return b === "single" ? /* @__PURE__ */ e(
-      t.Radio,
+    const r = b?.(e) ?? !1;
+    return L === "single" ? /* @__PURE__ */ l(
+      o.Radio,
       {
-        name: k,
-        value: a,
+        name: T,
+        value: r,
         onChange: () => {
-          c(l, !0);
+          c(e, !0);
         },
-        label: u("card.selectRowLabel"),
+        label: n("card.selectRowLabel"),
         shouldVisuallyHideLabel: !0
       }
-    ) : /* @__PURE__ */ e(
-      t.Checkbox,
+    ) : /* @__PURE__ */ l(
+      o.Checkbox,
       {
-        value: a,
-        onChange: (i) => {
-          c(l, i);
+        value: r,
+        onChange: (s) => {
+          c(e, s);
         },
-        label: u("card.selectRowLabel"),
+        label: n("card.selectRowLabel"),
         shouldVisuallyHideLabel: !0
       }
     );
   };
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ d(
     "div",
     {
-      className: y(r.root, d && r.withinBox, N && r.isFetching),
+      className: x(t.root, u && t.withinBox, R && t.isFetching),
       "data-testid": "data-cards",
-      "aria-busy": !!N,
+      "aria-busy": !!R,
       children: [
-        c && m && b === "multiple" && !R && s.length > 0 && /* @__PURE__ */ e("div", { className: r.selectAllRow, children: /* @__PURE__ */ e(
-          t.Checkbox,
+        p.length > 1 && /* @__PURE__ */ l("div", { className: t.sortRow, children: /* @__PURE__ */ l(
+          o.Select,
+          {
+            label: n("card.sortByLabel"),
+            placeholder: "",
+            options: p,
+            value: h ? `${h.columnKey}:${h.direction}` : y,
+            onChange: (e) => {
+              f.get(e)?.();
+            }
+          }
+        ) }),
+        c && b && L === "multiple" && !O && i.length > 0 && /* @__PURE__ */ l("div", { className: t.selectAllRow, children: /* @__PURE__ */ l(
+          o.Checkbox,
           {
-            value: D,
-            onChange: (l) => L?.(l, s),
-            label: u("card.selectAllRowsLabel")
+            value: E,
+            onChange: (e) => D?.(e, i),
+            label: n("card.selectAllRowsLabel")
           }
         ) }),
-        /* @__PURE__ */ n("div", { role: "list", "aria-label": x, children: [
-          s.length === 0 && v && /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(t.Card, { className: d ? r.flushCard : void 0, children: v() }) }),
-          s.map((l, o) => /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(
-            t.Card,
+        /* @__PURE__ */ d("div", { role: "list", "aria-label": $, children: [
+          i.length === 0 && N && /* @__PURE__ */ l("div", { role: "listitem", children: /* @__PURE__ */ l(o.Card, { className: u ? t.flushCard : void 0, children: N() }) }),
+          i.map((e, a) => /* @__PURE__ */ l("div", { role: "listitem", children: /* @__PURE__ */ l(
+            o.Card,
             {
-              menu: p && p(l),
-              action: A(l),
-              className: d ? r.flushCard : void 0,
-              children: f.map((a, i) => /* @__PURE__ */ n(w, { flexDirection: "column", gap: 0, children: [
-                a.title && /* @__PURE__ */ e("h5", { className: r.columnTitle, children: a.title }),
-                /* @__PURE__ */ n("div", { className: r.columnData, children: [
+              menu: C && C(e),
+              action: V(e),
+              className: u ? t.flushCard : void 0,
+              children: v.map((r, s) => /* @__PURE__ */ d(A, { flexDirection: "column", gap: 0, children: [
+                r.title && /* @__PURE__ */ l("h5", { className: t.columnTitle, children: r.title }),
+                /* @__PURE__ */ d("div", { className: t.columnData, children: [
                   " ",
-                  a.render ? a.render(l) : String(l[a.key])
+                  r.render ? r.render(e) : String(e[r.key])
                 ] })
-              ] }, i))
+              ] }, s))
             }
-          ) }, o)),
-          C && /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(t.Card, { className: d ? r.flushCard : void 0, children: (() => {
-            const l = C();
-            return f.map((o, a) => {
-              const i = typeof o.key == "string" ? o.key : `column-${a}`, h = l[i];
-              if (h === void 0 || h === "") return null;
-              const g = a === 0;
-              return /* @__PURE__ */ n(w, { flexDirection: "column", gap: 0, children: [
-                !g && o.title && /* @__PURE__ */ e("h5", { className: r.columnTitle, children: o.title }),
-                /* @__PURE__ */ e("div", { className: y(r.footerItem, g && r.footerRowLabel), children: h })
-              ] }, i);
+          ) }, a)),
+          k && /* @__PURE__ */ l("div", { role: "listitem", children: /* @__PURE__ */ l(o.Card, { className: u ? t.flushCard : void 0, children: (() => {
+            const e = k();
+            return v.map((a, r) => {
+              const s = typeof a.key == "string" ? a.key : `column-${r}`, g = e[s];
+              if (g === void 0 || g === "") return null;
+              const w = r === 0;
+              return /* @__PURE__ */ d(A, { flexDirection: "column", gap: 0, children: [
+                !w && a.title && /* @__PURE__ */ l("h5", { className: t.columnTitle, children: a.title }),
+                /* @__PURE__ */ l("div", { className: x(t.footerItem, w && t.footerRowLabel), children: g })
+              ] }, s);
             });
           })() }) })
         ] })
@@ -97,6 +129,6 @@ const O = ({
   );
 };
 export {
-  O as DataCards
+  X as DataCards
 };
 //# sourceMappingURL=DataCards.js.map

package/dist/components/Common/DataView/DataCards/DataCards.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataCards.js","sources":["../../../../../src/components/Common/DataView/DataCards/DataCards.tsx"],"sourcesContent":["import { useId } from 'react'\nimport cn from 'classnames'\nimport { useTranslation } from 'react-i18next'\nimport styles from './DataCards.module.scss'\nimport type { useDataViewPropReturn, SelectionMode } from '@/components/Common/DataView/useDataView'\nimport type { TableProps } from '@/components/Common/UI/Table/TableTypes'\nimport { useSelectionState } from '@/components/Common/DataView/useSelectionState'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\n/** @internal */\nexport type DataCardsProps<T> = {\n  label: string\n  columns: useDataViewPropReturn<T>['columns']\n  data: useDataViewPropReturn<T>['data']\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: (item: T, checked: boolean) => void\n  onSelectAll?: (checked: boolean, visibleData: T[]) => void\n  getIsItemSelected?: (item: T) => boolean\n  hideSelectAll?: useDataViewPropReturn<T>['hideSelectAll']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  footer?: useDataViewPropReturn<T>['footer']\n  selectionMode?: SelectionMode\n  isWithinBox?: TableProps['isWithinBox']\n  isFetching?: useDataViewPropReturn<T>['isFetching']\n}\n\n/** @internal */\nexport const DataCards = <T,>({\n  label,\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  onSelectAll,\n  getIsItemSelected,\n  hideSelectAll,\n  emptyState,\n  footer,\n  selectionMode = 'multiple',\n  isWithinBox,\n  isFetching,\n}: DataCardsProps<T>) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation('common')\n  const radioGroupName = useId()\n  const { allSelected } = useSelectionState(data, getIsItemSelected)\n\n  const renderAction = (item: T, index: number) => {\n    if (!onSelect) return undefined\n\n    const isSelected = getIsItemSelected?.(item) ?? false\n\n    if (selectionMode === 'single') {\n      return (\n        <Components.Radio\n          name={radioGroupName}\n          value={isSelected}\n          onChange={() => {\n            onSelect(item, true)\n          }}\n          label={t('card.selectRowLabel')}\n          shouldVisuallyHideLabel\n        />\n      )\n    }\n\n    return (\n      <Components.Checkbox\n        value={isSelected}\n        onChange={(checked: boolean) => {\n          onSelect(item, checked)\n        }}\n        label={t('card.selectRowLabel')}\n        shouldVisuallyHideLabel\n      />\n    )\n  }\n\n  return (\n    <div\n      className={cn(styles.root, isWithinBox && styles.withinBox, isFetching && styles.isFetching)}\n      data-testid=\"data-cards\"\n      aria-busy={Boolean(isFetching)}\n    >\n      {onSelect &&\n        getIsItemSelected &&\n        selectionMode === 'multiple' &&\n        !hideSelectAll &&\n        data.length > 0 && (\n          <div className={styles.selectAllRow}>\n            <Components.Checkbox\n              value={allSelected}\n              onChange={(checked: boolean) => onSelectAll?.(checked, data)}\n              label={t('card.selectAllRowsLabel')}\n            />\n          </div>\n        )}\n      <div role=\"list\" aria-label={label}>\n        {data.length === 0 && emptyState && (\n          <div role=\"listitem\">\n            <Components.Card className={isWithinBox ? styles.flushCard : undefined}>\n              {emptyState()}\n            </Components.Card>\n          </div>\n        )}\n        {data.map((item, index) => (\n          <div role=\"listitem\" key={index}>\n            <Components.Card\n              menu={itemMenu && itemMenu(item)}\n              action={renderAction(item, index)}\n              className={isWithinBox ? styles.flushCard : undefined}\n            >\n              {columns.map((column, colIndex) => (\n                <Flex key={colIndex} flexDirection=\"column\" gap={0}>\n                  {column.title && <h5 className={styles.columnTitle}>{column.title}</h5>}\n                  <div className={styles.columnData}>\n                    {' '}\n                    {column.render ? column.render(item) : String(item[column.key as keyof T])}\n                  </div>\n                </Flex>\n              ))}\n            </Components.Card>\n          </div>\n        ))}\n        {footer && (\n          <div role=\"listitem\">\n            <Components.Card className={isWithinBox ? styles.flushCard : undefined}>\n              {(() => {\n                const footerContent = footer()\n\n                return columns.map((column, index) => {\n                  const columnKey = typeof column.key === 'string' ? column.key : `column-${index}`\n                  const content = footerContent[columnKey]\n                  if (content === undefined || content === '') return null\n\n                  const isRowLabel = index === 0\n\n                  return (\n                    <Flex key={columnKey} flexDirection=\"column\" gap={0}>\n                      {!isRowLabel && column.title && (\n                        <h5 className={styles.columnTitle}>{column.title}</h5>\n                      )}\n                      <div className={cn(styles.footerItem, isRowLabel && styles.footerRowLabel)}>\n                        {content}\n                      </div>\n                    </Flex>\n                  )\n                })\n              })()}\n            </Components.Card>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":["DataCards","label","data","columns","itemMenu","onSelect","onSelectAll","getIsItemSelected","hideSelectAll","emptyState","footer","selectionMode","isWithinBox","isFetching","Components","useComponentContext","t","useTranslation","radioGroupName","useId","allSelected","useSelectionState","renderAction","item","index","isSelected","jsx","checked","jsxs","cn","styles","column","colIndex","Flex","footerContent","columnKey","content","isRowLabel"],"mappings":";;;;;;;;AA4BO,MAAMA,IAAY,CAAK;AAAA,EAC5B,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,aAAAC;AAAA,EACA,YAAAC;AACF,MAAyB;AACvB,QAAMC,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAe,QAAQ,GAC/BC,IAAiBC,EAAA,GACjB,EAAE,aAAAC,EAAA,IAAgBC,EAAkBnB,GAAMK,CAAiB,GAE3De,IAAe,CAACC,GAASC,MAAkB;AAC/C,QAAI,CAACnB,EAAU;AAEf,UAAMoB,IAAalB,IAAoBgB,CAAI,KAAK;AAEhD,WAAIZ,MAAkB,WAElB,gBAAAe;AAAA,MAACZ,EAAW;AAAA,MAAX;AAAA,QACC,MAAMI;AAAA,QACN,OAAOO;AAAA,QACP,UAAU,MAAM;AACd,UAAApB,EAASkB,GAAM,EAAI;AAAA,QACrB;AAAA,QACA,OAAOP,EAAE,qBAAqB;AAAA,QAC9B,yBAAuB;AAAA,MAAA;AAAA,IAAA,IAM3B,gBAAAU;AAAA,MAACZ,EAAW;AAAA,MAAX;AAAA,QACC,OAAOW;AAAA,QACP,UAAU,CAACE,MAAqB;AAC9B,UAAAtB,EAASkB,GAAMI,CAAO;AAAA,QACxB;AAAA,QACA,OAAOX,EAAE,qBAAqB;AAAA,QAC9B,yBAAuB;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7B;AAEA,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAGC,EAAO,MAAMlB,KAAekB,EAAO,WAAWjB,KAAciB,EAAO,UAAU;AAAA,MAC3F,eAAY;AAAA,MACZ,aAAW,EAAQjB;AAAA,MAElB,UAAA;AAAA,QAAAR,KACCE,KACAI,MAAkB,cAClB,CAACH,KACDN,EAAK,SAAS,KACZ,gBAAAwB,EAAC,OAAA,EAAI,WAAWI,EAAO,cACrB,UAAA,gBAAAJ;AAAA,UAACZ,EAAW;AAAA,UAAX;AAAA,YACC,OAAOM;AAAA,YACP,UAAU,CAACO,MAAqBrB,IAAcqB,GAASzB,CAAI;AAAA,YAC3D,OAAOc,EAAE,yBAAyB;AAAA,UAAA;AAAA,QAAA,GAEtC;AAAA,QAEJ,gBAAAY,EAAC,OAAA,EAAI,MAAK,QAAO,cAAY3B,GAC1B,UAAA;AAAA,UAAAC,EAAK,WAAW,KAAKO,uBACnB,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAiB,EAACZ,EAAW,MAAX,EAAgB,WAAWF,IAAckB,EAAO,YAAY,QAC1D,UAAArB,KACH,GACF;AAAA,UAEDP,EAAK,IAAI,CAACqB,GAAMC,MACf,gBAAAE,EAAC,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAA;AAAA,YAACZ,EAAW;AAAA,YAAX;AAAA,cACC,MAAMV,KAAYA,EAASmB,CAAI;AAAA,cAC/B,QAAQD,EAAaC,CAAW;AAAA,cAChC,WAAWX,IAAckB,EAAO,YAAY;AAAA,cAE3C,UAAA3B,EAAQ,IAAI,CAAC4B,GAAQC,wBACnBC,GAAA,EAAoB,eAAc,UAAS,KAAK,GAC9C,UAAA;AAAA,gBAAAF,EAAO,SAAS,gBAAAL,EAAC,MAAA,EAAG,WAAWI,EAAO,aAAc,YAAO,MAAA,CAAM;AAAA,gBAClE,gBAAAF,EAAC,OAAA,EAAI,WAAWE,EAAO,YACpB,UAAA;AAAA,kBAAA;AAAA,kBACAC,EAAO,SAASA,EAAO,OAAOR,CAAI,IAAI,OAAOA,EAAKQ,EAAO,GAAc,CAAC;AAAA,gBAAA,EAAA,CAC3E;AAAA,cAAA,EAAA,GALSC,CAMX,CACD;AAAA,YAAA;AAAA,UAAA,EACH,GAfwBR,CAgB1B,CACD;AAAA,UACAd,KACC,gBAAAgB,EAAC,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAA,EAACZ,EAAW,MAAX,EAAgB,WAAWF,IAAckB,EAAO,YAAY,QACzD,WAAA,MAAM;AACN,kBAAMI,IAAgBxB,EAAA;AAEtB,mBAAOP,EAAQ,IAAI,CAAC4B,GAAQP,MAAU;AACpC,oBAAMW,IAAY,OAAOJ,EAAO,OAAQ,WAAWA,EAAO,MAAM,UAAUP,CAAK,IACzEY,IAAUF,EAAcC,CAAS;AACvC,kBAAIC,MAAY,UAAaA,MAAY,GAAI,QAAO;AAEpD,oBAAMC,IAAab,MAAU;AAE7B,qBACE,gBAAAI,EAACK,GAAA,EAAqB,eAAc,UAAS,KAAK,GAC/C,UAAA;AAAA,gBAAA,CAACI,KAAcN,EAAO,SACrB,gBAAAL,EAAC,QAAG,WAAWI,EAAO,aAAc,UAAAC,EAAO,MAAA,CAAM;AAAA,gBAEnD,gBAAAL,EAAC,OAAA,EAAI,WAAWG,EAAGC,EAAO,YAAYO,KAAcP,EAAO,cAAc,GACtE,UAAAM,EAAA,CACH;AAAA,cAAA,EAAA,GANSD,CAOX;AAAA,YAEJ,CAAC;AAAA,UACH,GAAA,GACF,EAAA,CACF;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"DataCards.js","sources":["../../../../../src/components/Common/DataView/DataCards/DataCards.tsx"],"sourcesContent":["import { useId } from 'react'\nimport cn from 'classnames'\nimport { useTranslation } from 'react-i18next'\nimport styles from './DataCards.module.scss'\nimport type { useDataViewPropReturn, SelectionMode } from '@/components/Common/DataView/useDataView'\nimport type { TableProps } from '@/components/Common/UI/Table/TableTypes'\nimport type { SelectOption } from '@/components/Common/UI/Select/SelectTypes'\nimport { useSelectionState } from '@/components/Common/DataView/useSelectionState'\nimport { getSortControls } from '@/components/Common/DataView/getSortControls'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\n// Sentinel for the \"default order\" option, kept clear of the `<columnKey>:<direction>` values.\nconst DEFAULT_ORDER_VALUE = 'none'\n\n/** @internal */\nexport type DataCardsProps<T> = {\n  label: string\n  columns: useDataViewPropReturn<T>['columns']\n  data: useDataViewPropReturn<T>['data']\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: (item: T, checked: boolean) => void\n  onSelectAll?: (checked: boolean, visibleData: T[]) => void\n  getIsItemSelected?: (item: T) => boolean\n  hideSelectAll?: useDataViewPropReturn<T>['hideSelectAll']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  footer?: useDataViewPropReturn<T>['footer']\n  selectionMode?: SelectionMode\n  isWithinBox?: TableProps['isWithinBox']\n  isFetching?: useDataViewPropReturn<T>['isFetching']\n  sortDescriptor?: useDataViewPropReturn<T>['sortDescriptor']\n  onSortChange?: useDataViewPropReturn<T>['onSortChange']\n}\n\n/** @internal */\nexport const DataCards = <T,>({\n  label,\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  onSelectAll,\n  getIsItemSelected,\n  hideSelectAll,\n  emptyState,\n  footer,\n  selectionMode = 'multiple',\n  isWithinBox,\n  isFetching,\n  sortDescriptor,\n  onSortChange,\n}: DataCardsProps<T>) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation('common')\n  const radioGroupName = useId()\n  const { allSelected } = useSelectionState(data, getIsItemSelected)\n\n  const sortOptions: SelectOption[] = []\n  const applySortByValue = new Map<string, () => void>()\n  if (onSortChange) {\n    sortOptions.push({ value: DEFAULT_ORDER_VALUE, label: t('card.sortDefaultOption') })\n    applySortByValue.set(DEFAULT_ORDER_VALUE, () => {\n      onSortChange(undefined)\n    })\n  }\n  columns.forEach(column => {\n    // Options are labelled from the column title, so a column titled with a ReactNode\n    // has nothing usable to show in the dropdown.\n    if (!column.isSortable || !onSortChange || typeof column.title !== 'string') return\n    const controls = getSortControls(column.key, sortDescriptor, onSortChange)\n    const columnTitle = column.title\n    sortOptions.push(\n      {\n        value: `${column.key}:ascending`,\n        label: t('card.sortAscendingOption', { column: columnTitle }),\n      },\n      {\n        value: `${column.key}:descending`,\n        label: t('card.sortDescendingOption', { column: columnTitle }),\n      },\n    )\n    applySortByValue.set(`${column.key}:ascending`, controls.onSortAscending)\n    applySortByValue.set(`${column.key}:descending`, controls.onSortDescending)\n  })\n\n  const renderAction = (item: T, index: number) => {\n    if (!onSelect) return undefined\n\n    const isSelected = getIsItemSelected?.(item) ?? false\n\n    if (selectionMode === 'single') {\n      return (\n        <Components.Radio\n          name={radioGroupName}\n          value={isSelected}\n          onChange={() => {\n            onSelect(item, true)\n          }}\n          label={t('card.selectRowLabel')}\n          shouldVisuallyHideLabel\n        />\n      )\n    }\n\n    return (\n      <Components.Checkbox\n        value={isSelected}\n        onChange={(checked: boolean) => {\n          onSelect(item, checked)\n        }}\n        label={t('card.selectRowLabel')}\n        shouldVisuallyHideLabel\n      />\n    )\n  }\n\n  return (\n    <div\n      className={cn(styles.root, isWithinBox && styles.withinBox, isFetching && styles.isFetching)}\n      data-testid=\"data-cards\"\n      aria-busy={Boolean(isFetching)}\n    >\n      {sortOptions.length > 1 && (\n        <div className={styles.sortRow}>\n          <Components.Select\n            label={t('card.sortByLabel')}\n            // A value is always selected -- unsorted data resolves to the default-order option.\n            placeholder=\"\"\n            options={sortOptions}\n            value={\n              sortDescriptor\n                ? `${sortDescriptor.columnKey}:${sortDescriptor.direction}`\n                : DEFAULT_ORDER_VALUE\n            }\n            onChange={value => {\n              applySortByValue.get(value)?.()\n            }}\n          />\n        </div>\n      )}\n      {onSelect &&\n        getIsItemSelected &&\n        selectionMode === 'multiple' &&\n        !hideSelectAll &&\n        data.length > 0 && (\n          <div className={styles.selectAllRow}>\n            <Components.Checkbox\n              value={allSelected}\n              onChange={(checked: boolean) => onSelectAll?.(checked, data)}\n              label={t('card.selectAllRowsLabel')}\n            />\n          </div>\n        )}\n      <div role=\"list\" aria-label={label}>\n        {data.length === 0 && emptyState && (\n          <div role=\"listitem\">\n            <Components.Card className={isWithinBox ? styles.flushCard : undefined}>\n              {emptyState()}\n            </Components.Card>\n          </div>\n        )}\n        {data.map((item, index) => (\n          <div role=\"listitem\" key={index}>\n            <Components.Card\n              menu={itemMenu && itemMenu(item)}\n              action={renderAction(item, index)}\n              className={isWithinBox ? styles.flushCard : undefined}\n            >\n              {columns.map((column, colIndex) => (\n                <Flex key={colIndex} flexDirection=\"column\" gap={0}>\n                  {column.title && <h5 className={styles.columnTitle}>{column.title}</h5>}\n                  <div className={styles.columnData}>\n                    {' '}\n                    {column.render ? column.render(item) : String(item[column.key as keyof T])}\n                  </div>\n                </Flex>\n              ))}\n            </Components.Card>\n          </div>\n        ))}\n        {footer && (\n          <div role=\"listitem\">\n            <Components.Card className={isWithinBox ? styles.flushCard : undefined}>\n              {(() => {\n                const footerContent = footer()\n\n                return columns.map((column, index) => {\n                  const columnKey = typeof column.key === 'string' ? column.key : `column-${index}`\n                  const content = footerContent[columnKey]\n                  if (content === undefined || content === '') return null\n\n                  const isRowLabel = index === 0\n\n                  return (\n                    <Flex key={columnKey} flexDirection=\"column\" gap={0}>\n                      {!isRowLabel && column.title && (\n                        <h5 className={styles.columnTitle}>{column.title}</h5>\n                      )}\n                      <div className={cn(styles.footerItem, isRowLabel && styles.footerRowLabel)}>\n                        {content}\n                      </div>\n                    </Flex>\n                  )\n                })\n              })()}\n            </Components.Card>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":["DEFAULT_ORDER_VALUE","DataCards","label","data","columns","itemMenu","onSelect","onSelectAll","getIsItemSelected","hideSelectAll","emptyState","footer","selectionMode","isWithinBox","isFetching","sortDescriptor","onSortChange","Components","useComponentContext","t","useTranslation","radioGroupName","useId","allSelected","useSelectionState","sortOptions","applySortByValue","column","controls","getSortControls","columnTitle","renderAction","item","index","isSelected","jsx","checked","jsxs","cn","styles","value","colIndex","Flex","footerContent","columnKey","content","isRowLabel"],"mappings":"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"}

package/dist/components/Common/DataView/DataCards/DataCards.module.scss.js

@@ -1,24 +1,26 @@
-const o = "_root_15yfq_1", t = "_isFetching_15yfq_4", e = "_withinBox_15yfq_7", _ = "_selectAllRow_15yfq_7", l = "_flushCard_15yfq_10", c = "_columnTitle_15yfq_25", n = "_columnData_15yfq_32", s = "_footerItem_15yfq_37", f = "_footerRowLabel_15yfq_41", i = {
+const o = "_root_16hvj_1", t = "_isFetching_16hvj_4", _ = "_withinBox_16hvj_7", e = "_selectAllRow_16hvj_7", l = "_flushCard_16hvj_10", s = "_sortRow_16hvj_25", c = "_columnTitle_16hvj_29", n = "_columnData_16hvj_36", h = "_footerItem_16hvj_41", r = "_footerRowLabel_16hvj_45", i = {
   root: o,
   isFetching: t,
-  withinBox: e,
-  selectAllRow: _,
+  withinBox: _,
+  selectAllRow: e,
   flushCard: l,
+  sortRow: s,
   columnTitle: c,
   columnData: n,
-  footerItem: s,
-  footerRowLabel: f
+  footerItem: h,
+  footerRowLabel: r
 };
 export {
   n as columnData,
   c as columnTitle,
   i as default,
   l as flushCard,
-  s as footerItem,
-  f as footerRowLabel,
+  h as footerItem,
+  r as footerRowLabel,
   t as isFetching,
   o as root,
-  _ as selectAllRow,
-  e as withinBox
+  e as selectAllRow,
+  s as sortRow,
+  _ as withinBox
 };
 //# sourceMappingURL=DataCards.module.scss.js.map

package/dist/components/Common/DataView/DataCards/DataCards.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataCards.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"DataCards.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}