@gusto/embedded-react-sdk 0.13.1 → 0.13.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.13.2
+
+### Features & Enhancements
+
+- Add alert for edit payroll success
+- Add payroll type and pay date to PayrollList
+- Add comprehensive footer support to DataView components
+- Implement PayrollHistory presentation layer
+- Implement new deductions empty state UI
+
+### Chores & Maintenance
+
+- Upgrade embedded API to 0.6.11
+- Bump dompurify from 3.2.6 to 3.2.7
+
 ## 0.13.1
 
 ### Fixes

package/dist/_virtual/_commonjsHelpers.js

@@ -0,0 +1,7 @@
+function e(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+export {
+  e as getDefaultExportFromCjs
+};
+//# sourceMappingURL=_commonjsHelpers.js.map

package/dist/_virtual/_commonjsHelpers.js.map

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

package/dist/_virtual/index.js

@@ -0,0 +1,8 @@
+import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
+import { __require as r } from "../node_modules/fast-deep-equal/index.js";
+var t = r();
+const p = /* @__PURE__ */ e(t);
+export {
+  p as default
+};
+//# sourceMappingURL=index.js.map

package/dist/_virtual/index.js.map

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

package/dist/assets/icons/close.svg.js

@@ -0,0 +1,10 @@
+import * as e from "react";
+const l = ({
+  title: t,
+  titleId: r,
+  ...o
+}) => /* @__PURE__ */ e.createElement("svg", { width: 36, height: 36, viewBox: "0 0 36 36", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": r, ...o }, t ? /* @__PURE__ */ e.createElement("title", { id: r }, t) : null, /* @__PURE__ */ e.createElement("path", { d: "M23 13L13 23M13 13L23 23", stroke: "currentColor", strokeWidth: 1.66667, strokeLinecap: "round", strokeLinejoin: "round" }));
+export {
+  l as default
+};
+//# sourceMappingURL=close.svg.js.map

package/dist/assets/icons/close.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"close.svg.js","sources":["../../../src/assets/icons/close.svg?react"],"sourcesContent":["import * as React from \"react\";\nconst SvgClose = ({\n  title,\n  titleId,\n  ...props\n}) => /* @__PURE__ */ React.createElement(\"svg\", { width: 36, height: 36, viewBox: \"0 0 36 36\", fill: \"currentColor\", xmlns: \"http://www.w3.org/2000/svg\", \"aria-labelledby\": titleId, ...props }, title ? /* @__PURE__ */ React.createElement(\"title\", { id: titleId }, title) : null, /* @__PURE__ */ React.createElement(\"path\", { d: \"M23 13L13 23M13 13L23 23\", stroke: \"currentColor\", strokeWidth: 1.66667, strokeLinecap: \"round\", strokeLinejoin: \"round\" }));\nexport default SvgClose;\n"],"names":["SvgClose","title","titleId","props","React"],"mappings":";AACK,MAACA,IAAW,CAAC;AAAA,EAChB,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MAAsB,gBAAAC,EAAM,cAAc,OAAO,EAAE,OAAO,IAAI,QAAQ,IAAI,SAAS,aAAa,MAAM,gBAAgB,OAAO,8BAA8B,mBAAmBF,GAAS,GAAGC,EAAK,GAAIF,IAAwB,gBAAAG,EAAM,cAAc,SAAS,EAAE,IAAIF,KAAWD,CAAK,IAAI,MAAsB,gBAAAG,EAAM,cAAc,QAAQ,EAAE,GAAG,4BAA4B,QAAQ,gBAAgB,aAAa,SAAS,eAAe,SAAS,gBAAgB,SAAS,CAAC;"}

package/dist/components/Base/Base.js

@@ -10,7 +10,6 @@ import { FadeIn as _ } from "../Common/FadeIn/FadeIn.js";
 import { BaseContext as j } from "./useBase.js";
 import { componentEvents as F } from "../../shared/constants.js";
 import { useAsyncError as K } from "../Common/hooks/useAsyncError.js";
-import "classnames";
 import { InternalError as P } from "../Common/InternalError/InternalError.js";
 import { snakeCaseToCamelCase as w } from "../../helpers/formattedStrings.js";
 import { useComponentContext as M } from "../../contexts/ComponentAdapter/useComponentContext.js";
@@ -29,7 +28,7 @@ const U = (t) => t.map((n) => n.message ? /* @__PURE__ */ o("li", { children: n.
     return t.metadata?.key && typeof t.metadata.key == "string" ? a = t.metadata.key : t.metadata?.state && typeof t.metadata.state == "string" ? a = t.metadata.state : t.errorKey && (a = t.errorKey), t.errors.flatMap((r) => x(r, m + a));
   }
   return [];
-}, ot = ({
+}, rt = ({
   children: t,
   FallbackComponent: n = P,
   LoaderComponent: m,
@@ -83,6 +82,6 @@ const U = (t) => t.map((n) => n.message ? /* @__PURE__ */ o("li", { children: n.
   );
 };
 export {
-  ot as BaseComponent
+  rt as BaseComponent
 };
 //# sourceMappingURL=Base.js.map

package/dist/components/Base/Base.js.map

@@ -1 +1 @@
-{"version":3,"file":"Base.js","sources":["../../../src/components/Base/Base.tsx"],"sourcesContent":["import type { ReactNode, JSX } from 'react'\nimport { Suspense, useState, useCallback } from 'react'\nimport type { FallbackProps } from 'react-error-boundary'\nimport { ErrorBoundary } from 'react-error-boundary'\nimport { useTranslation } from 'react-i18next'\nimport { APIError } from '@gusto/embedded-api/models/errors/apierror'\nimport { SDKValidationError } from '@gusto/embedded-api/models/errors/sdkvalidationerror'\nimport { UnprocessableEntityErrorObject } from '@gusto/embedded-api/models/errors/unprocessableentityerrorobject'\nimport type { EntityErrorObject } from '@gusto/embedded-api/models/components/entityerrorobject'\nimport { QueryErrorResetBoundary } from '@tanstack/react-query'\nimport { FadeIn } from '../Common/FadeIn/FadeIn'\nimport { BaseContext, type FieldError, type KnownErrors, type OnEventType } from './useBase'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport { InternalError, useAsyncError } from '@/components/Common'\nimport { snakeCaseToCamelCase } from '@/helpers/formattedStrings'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport type { ResourceDictionary, Resources } from '@/types/Helpers'\nimport { useLoadingIndicator } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\nimport type { LoadingIndicatorContextProps } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\n\nexport interface CommonComponentInterface<TResourceKey extends keyof Resources = keyof Resources> {\n  children?: ReactNode\n  className?: string\n  defaultValues?: unknown\n  dictionary?: ResourceDictionary<TResourceKey>\n}\n\n// Base component wrapper with error and suspense handling\nexport interface BaseComponentInterface<TResourceKey extends keyof Resources = keyof Resources>\n  extends CommonComponentInterface<TResourceKey> {\n  FallbackComponent?: (props: FallbackProps) => JSX.Element\n  LoaderComponent?: LoadingIndicatorContextProps['LoadingIndicator']\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/**Traverses errorList and finds items with message properties */\nconst renderErrorList = (errorList: FieldError[]): React.ReactNode[] => {\n  return errorList.map(errorFromList => {\n    if (errorFromList.message) {\n      return <li key={errorFromList.key}>{errorFromList.message}</li>\n    }\n    return null\n  })\n}\n/**Recuresively parses error list and constructs an array of objects containing attribute value error messages associated with form fields. Nested errors construct '.' separated keys\n * metadata.state is a special case for state taxes validation errors\n */\nconst getFieldErrors = (\n  error: EntityErrorObject,\n  parentKey?: string,\n): { key: string; message: string }[] => {\n  const keyPrefix = parentKey ? parentKey + '.' : ''\n  if (error.category === 'invalid_attribute_value' || error.category === 'invalid_operation') {\n    return [\n      {\n        key: snakeCaseToCamelCase(keyPrefix + error.errorKey),\n        message: error.message ?? '',\n      },\n    ]\n  }\n  if (error.category === 'nested_errors' && error.errors !== undefined) {\n    //TODO: clean this up once Metadata type is fixed in openapi spec\n    let keySuffix = ''\n    //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n    if (error.metadata?.key && typeof error.metadata.key === 'string') {\n      //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n      keySuffix = error.metadata.key as string\n      //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n    } else if (error.metadata?.state && typeof error.metadata.state === 'string') {\n      //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n      keySuffix = error.metadata.state as string\n    } else if (error.errorKey) {\n      keySuffix = error.errorKey\n    }\n    return error.errors.flatMap(err => getFieldErrors(err, keyPrefix + keySuffix))\n  }\n  return []\n}\n\ntype SubmitHandler<T> = (data: T) => Promise<void>\n\nexport const BaseComponent = <TResourceKey extends keyof Resources = keyof Resources>({\n  children,\n  FallbackComponent = InternalError,\n  LoaderComponent: LoadingIndicatorFromProps,\n  onEvent,\n}: BaseComponentInterface<TResourceKey>) => {\n  const [error, setError] = useState<KnownErrors | null>(null)\n  const [fieldErrors, setFieldErrors] = useState<FieldError[] | null>(null)\n  const throwError = useAsyncError()\n  const { t } = useTranslation()\n  const Components = useComponentContext()\n\n  const { LoadingIndicator: LoadingIndicatorFromContext } = useLoadingIndicator()\n\n  const LoaderComponent = LoadingIndicatorFromProps ?? LoadingIndicatorFromContext\n\n  // Enhanced setError that also clears fieldErrors when error is cleared\n  const setErrorWithFieldsClear = useCallback((error: KnownErrors | null) => {\n    setError(error)\n    if (!error) {\n      setFieldErrors(null)\n    }\n  }, [])\n\n  const processError = (error: KnownErrors) => {\n    setError(error)\n    //422\tapplication/json - content relaited error\n    if (error instanceof UnprocessableEntityErrorObject && Array.isArray(error.errors)) {\n      setFieldErrors(error.errors.flatMap(err => getFieldErrors(err)))\n    }\n  }\n\n  const baseSubmitHandler = useCallback(\n    async <T,>(data: T, componentHandler: SubmitHandler<T>) => {\n      setError(null)\n      setFieldErrors(null)\n      try {\n        await componentHandler(data)\n      } catch (err) {\n        if (\n          err instanceof APIError ||\n          err instanceof SDKValidationError ||\n          err instanceof UnprocessableEntityErrorObject\n        ) {\n          processError(err)\n        } else throwError(err)\n      }\n    },\n    [setError, throwError],\n  )\n\n  return (\n    <BaseContext.Provider\n      value={{\n        fieldErrors,\n        setError: setErrorWithFieldsClear,\n        onEvent,\n        throwError,\n        baseSubmitHandler,\n        LoadingIndicator: LoaderComponent,\n      }}\n    >\n      <QueryErrorResetBoundary>\n        {({ reset: resetQueries }) => (\n          <ErrorBoundary\n            FallbackComponent={FallbackComponent}\n            onReset={resetQueries}\n            onError={err => {\n              onEvent(componentEvents.ERROR, err)\n            }}\n          >\n            {(error || fieldErrors) && (\n              <Components.Alert label={t('status.errorEncountered')} status=\"error\">\n                {fieldErrors && <Components.UnorderedList items={renderErrorList(fieldErrors)} />}\n                {error && error instanceof APIError && (\n                  <Components.Text>{error.message}</Components.Text>\n                )}\n                {error && error instanceof SDKValidationError && (\n                  <Components.Text as=\"pre\">{error.pretty()}</Components.Text>\n                )}\n              </Components.Alert>\n            )}\n            <Suspense fallback={<LoaderComponent />}>\n              <FadeIn>{children}</FadeIn>\n            </Suspense>\n          </ErrorBoundary>\n        )}\n      </QueryErrorResetBoundary>\n    </BaseContext.Provider>\n  )\n}\n"],"names":["renderErrorList","errorList","errorFromList","jsx","getFieldErrors","error","parentKey","keyPrefix","snakeCaseToCamelCase","keySuffix","err","BaseComponent","children","FallbackComponent","InternalError","LoadingIndicatorFromProps","onEvent","setError","useState","fieldErrors","setFieldErrors","throwError","useAsyncError","t","useTranslation","Components","useComponentContext","LoadingIndicatorFromContext","useLoadingIndicator","LoaderComponent","setErrorWithFieldsClear","useCallback","processError","UnprocessableEntityErrorObject","baseSubmitHandler","data","componentHandler","APIError","SDKValidationError","BaseContext","QueryErrorResetBoundary","resetQueries","jsxs","ErrorBoundary","componentEvents","Suspense","FadeIn"],"mappings":"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"}
+{"version":3,"file":"Base.js","sources":["../../../src/components/Base/Base.tsx"],"sourcesContent":["import type { ReactNode, JSX } from 'react'\nimport { Suspense, useState, useCallback } from 'react'\nimport type { FallbackProps } from 'react-error-boundary'\nimport { ErrorBoundary } from 'react-error-boundary'\nimport { useTranslation } from 'react-i18next'\nimport { APIError } from '@gusto/embedded-api/models/errors/apierror'\nimport { SDKValidationError } from '@gusto/embedded-api/models/errors/sdkvalidationerror'\nimport { UnprocessableEntityErrorObject } from '@gusto/embedded-api/models/errors/unprocessableentityerrorobject'\nimport type { EntityErrorObject } from '@gusto/embedded-api/models/components/entityerrorobject'\nimport { QueryErrorResetBoundary } from '@tanstack/react-query'\nimport { FadeIn } from '../Common/FadeIn/FadeIn'\nimport { BaseContext, type FieldError, type KnownErrors, type OnEventType } from './useBase'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport { InternalError, useAsyncError } from '@/components/Common'\nimport { snakeCaseToCamelCase } from '@/helpers/formattedStrings'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport type { ResourceDictionary, Resources } from '@/types/Helpers'\nimport { useLoadingIndicator } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\nimport type { LoadingIndicatorContextProps } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\n\nexport interface CommonComponentInterface<TResourceKey extends keyof Resources = keyof Resources> {\n  children?: ReactNode\n  className?: string\n  defaultValues?: unknown\n  dictionary?: ResourceDictionary<TResourceKey>\n}\n\n// Base component wrapper with error and suspense handling\nexport interface BaseComponentInterface<TResourceKey extends keyof Resources = keyof Resources>\n  extends CommonComponentInterface<TResourceKey> {\n  FallbackComponent?: (props: FallbackProps) => JSX.Element\n  LoaderComponent?: LoadingIndicatorContextProps['LoadingIndicator']\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/**Traverses errorList and finds items with message properties */\nconst renderErrorList = (errorList: FieldError[]): React.ReactNode[] => {\n  return errorList.map(errorFromList => {\n    if (errorFromList.message) {\n      return <li key={errorFromList.key}>{errorFromList.message}</li>\n    }\n    return null\n  })\n}\n/**Recuresively parses error list and constructs an array of objects containing attribute value error messages associated with form fields. Nested errors construct '.' separated keys\n * metadata.state is a special case for state taxes validation errors\n */\nconst getFieldErrors = (\n  error: EntityErrorObject,\n  parentKey?: string,\n): { key: string; message: string }[] => {\n  const keyPrefix = parentKey ? parentKey + '.' : ''\n  if (error.category === 'invalid_attribute_value' || error.category === 'invalid_operation') {\n    return [\n      {\n        key: snakeCaseToCamelCase(keyPrefix + error.errorKey),\n        message: error.message ?? '',\n      },\n    ]\n  }\n  if (error.category === 'nested_errors' && error.errors !== undefined) {\n    //TODO: clean this up once Metadata type is fixed in openapi spec\n    let keySuffix = ''\n    //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n    if (error.metadata?.key && typeof error.metadata.key === 'string') {\n      //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n      keySuffix = error.metadata.key as string\n      //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n    } else if (error.metadata?.state && typeof error.metadata.state === 'string') {\n      //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n      keySuffix = error.metadata.state as string\n    } else if (error.errorKey) {\n      keySuffix = error.errorKey\n    }\n    return error.errors.flatMap(err => getFieldErrors(err, keyPrefix + keySuffix))\n  }\n  return []\n}\n\ntype SubmitHandler<T> = (data: T) => Promise<void>\n\nexport const BaseComponent = <TResourceKey extends keyof Resources = keyof Resources>({\n  children,\n  FallbackComponent = InternalError,\n  LoaderComponent: LoadingIndicatorFromProps,\n  onEvent,\n}: BaseComponentInterface<TResourceKey>) => {\n  const [error, setError] = useState<KnownErrors | null>(null)\n  const [fieldErrors, setFieldErrors] = useState<FieldError[] | null>(null)\n  const throwError = useAsyncError()\n  const { t } = useTranslation()\n  const Components = useComponentContext()\n\n  const { LoadingIndicator: LoadingIndicatorFromContext } = useLoadingIndicator()\n\n  const LoaderComponent = LoadingIndicatorFromProps ?? LoadingIndicatorFromContext\n\n  // Enhanced setError that also clears fieldErrors when error is cleared\n  const setErrorWithFieldsClear = useCallback((error: KnownErrors | null) => {\n    setError(error)\n    if (!error) {\n      setFieldErrors(null)\n    }\n  }, [])\n\n  const processError = (error: KnownErrors) => {\n    setError(error)\n    //422\tapplication/json - content relaited error\n    if (error instanceof UnprocessableEntityErrorObject && Array.isArray(error.errors)) {\n      setFieldErrors(error.errors.flatMap(err => getFieldErrors(err)))\n    }\n  }\n\n  const baseSubmitHandler = useCallback(\n    async <T,>(data: T, componentHandler: SubmitHandler<T>) => {\n      setError(null)\n      setFieldErrors(null)\n      try {\n        await componentHandler(data)\n      } catch (err) {\n        if (\n          err instanceof APIError ||\n          err instanceof SDKValidationError ||\n          err instanceof UnprocessableEntityErrorObject\n        ) {\n          processError(err)\n        } else throwError(err)\n      }\n    },\n    [setError, throwError],\n  )\n\n  return (\n    <BaseContext.Provider\n      value={{\n        fieldErrors,\n        setError: setErrorWithFieldsClear,\n        onEvent,\n        throwError,\n        baseSubmitHandler,\n        LoadingIndicator: LoaderComponent,\n      }}\n    >\n      <QueryErrorResetBoundary>\n        {({ reset: resetQueries }) => (\n          <ErrorBoundary\n            FallbackComponent={FallbackComponent}\n            onReset={resetQueries}\n            onError={err => {\n              onEvent(componentEvents.ERROR, err)\n            }}\n          >\n            {(error || fieldErrors) && (\n              <Components.Alert label={t('status.errorEncountered')} status=\"error\">\n                {fieldErrors && <Components.UnorderedList items={renderErrorList(fieldErrors)} />}\n                {error && error instanceof APIError && (\n                  <Components.Text>{error.message}</Components.Text>\n                )}\n                {error && error instanceof SDKValidationError && (\n                  <Components.Text as=\"pre\">{error.pretty()}</Components.Text>\n                )}\n              </Components.Alert>\n            )}\n            <Suspense fallback={<LoaderComponent />}>\n              <FadeIn>{children}</FadeIn>\n            </Suspense>\n          </ErrorBoundary>\n        )}\n      </QueryErrorResetBoundary>\n    </BaseContext.Provider>\n  )\n}\n"],"names":["renderErrorList","errorList","errorFromList","jsx","getFieldErrors","error","parentKey","keyPrefix","snakeCaseToCamelCase","keySuffix","err","BaseComponent","children","FallbackComponent","InternalError","LoadingIndicatorFromProps","onEvent","setError","useState","fieldErrors","setFieldErrors","throwError","useAsyncError","t","useTranslation","Components","useComponentContext","LoadingIndicatorFromContext","useLoadingIndicator","LoaderComponent","setErrorWithFieldsClear","useCallback","processError","UnprocessableEntityErrorObject","baseSubmitHandler","data","componentHandler","APIError","SDKValidationError","BaseContext","QueryErrorResetBoundary","resetQueries","jsxs","ErrorBoundary","componentEvents","Suspense","FadeIn"],"mappings":"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"}

package/dist/components/Common/DataView/DataCards/DataCards.d.ts

@@ -5,5 +5,6 @@ export type DataCardsProps<T> = {
     itemMenu?: useDataViewPropReturn<T>['itemMenu'];
     onSelect?: useDataViewPropReturn<T>['onSelect'];
     emptyState?: useDataViewPropReturn<T>['emptyState'];
+    footer?: useDataViewPropReturn<T>['footer'];
 };
-export declare const DataCards: <T>({ data, columns, itemMenu, onSelect, emptyState, }: DataCardsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataCards: <T>({ data, columns, itemMenu, onSelect, emptyState, footer, }: DataCardsProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,36 +1,41 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import a from "./DataCards.module.scss.js";
-import { Flex as p } from "../../Flex/Flex.js";
-import { useComponentContext as x } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-const D = ({
-  data: t,
-  columns: c,
-  itemMenu: d,
-  onSelect: n,
-  emptyState: o
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import m from "./DataCards.module.scss.js";
+import { Flex as C } from "../../Flex/Flex.js";
+import { useComponentContext as v } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+const u = ({
+  data: l,
+  columns: h,
+  itemMenu: o,
+  onSelect: s,
+  emptyState: c,
+  footer: a
 }) => {
-  const s = x();
-  return /* @__PURE__ */ l("div", { role: "list", "data-testid": "data-cards", children: [
-    t.length === 0 && o && /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(s.Card, { children: o() }) }),
-    t.map((i, m) => /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(
-      s.Card,
+  const t = v();
+  return /* @__PURE__ */ d("div", { role: "list", "data-testid": "data-cards", children: [
+    l.length === 0 && c && /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(t.Card, { children: c() }) }),
+    l.map((i, n) => /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(
+      t.Card,
       {
-        menu: d && d(i),
-        onSelect: n ? (r) => {
-          n(i, r);
+        menu: o && o(i),
+        onSelect: s ? (r) => {
+          s(i, r);
         } : void 0,
-        children: c.map((r, h) => /* @__PURE__ */ l(p, { flexDirection: "column", gap: 0, children: [
-          /* @__PURE__ */ e("h5", { className: a.columnTitle, children: r.title }),
-          /* @__PURE__ */ l("div", { className: a.columnData, children: [
+        children: h.map((r, p) => /* @__PURE__ */ d(C, { flexDirection: "column", gap: 0, children: [
+          /* @__PURE__ */ e("h5", { className: m.columnTitle, children: r.title }),
+          /* @__PURE__ */ d("div", { className: m.columnData, children: [
             " ",
             r.render ? r.render(i) : String(i[r.key])
           ] })
-        ] }, h))
+        ] }, p))
       }
-    ) }, m))
+    ) }, n)),
+    a && /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(t.Card, { children: (() => {
+      const i = a();
+      return Object.entries(i).map(([n, r]) => /* @__PURE__ */ e("div", { children: r }, n));
+    })() }) })
   ] });
 };
 export {
-  D as DataCards
+  u 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 styles from './DataCards.module.scss'\nimport type { useDataViewPropReturn } from '@/components/Common/DataView/useDataView'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport type DataCardsProps<T> = {\n  columns: useDataViewPropReturn<T>['columns']\n  data: useDataViewPropReturn<T>['data']\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n}\n\nexport const DataCards = <T,>({\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  emptyState,\n}: DataCardsProps<T>) => {\n  const Components = useComponentContext()\n  return (\n    <div role=\"list\" data-testid=\"data-cards\">\n      {data.length === 0 && emptyState && (\n        <div role=\"listitem\">\n          <Components.Card>{emptyState()}</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            onSelect={\n              onSelect\n                ? (checked: boolean) => {\n                    onSelect(item, checked)\n                  }\n                : undefined\n            }\n          >\n            {columns.map((column, index) => (\n              <Flex key={index} flexDirection=\"column\" gap={0}>\n                <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    </div>\n  )\n}\n"],"names":["DataCards","data","columns","itemMenu","onSelect","emptyState","Components","useComponentContext","jsxs","jsx","item","index","checked","column","Flex","styles"],"mappings":";;;;AAaO,MAAMA,IAAY,CAAK;AAAA,EAC5B,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACF,MAAyB;AACvB,QAAMC,IAAaC,EAAA;AACnB,SACE,gBAAAC,EAAC,OAAA,EAAI,MAAK,QAAO,eAAY,cAC1B,UAAA;AAAA,IAAAP,EAAK,WAAW,KAAKI,KACpB,gBAAAI,EAAC,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAA,EAACH,EAAW,MAAX,EAAiB,UAAAD,EAAA,GAAa,GACjC;AAAA,IAEDJ,EAAK,IAAI,CAACS,GAAMC,MACf,gBAAAF,EAAC,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAA;AAAA,MAACH,EAAW;AAAA,MAAX;AAAA,QACC,MAAMH,KAAYA,EAASO,CAAI;AAAA,QAC/B,UACEN,IACI,CAACQ,MAAqB;AACpB,UAAAR,EAASM,GAAME,CAAO;AAAA,QACxB,IACA;AAAA,QAGL,UAAAV,EAAQ,IAAI,CAACW,GAAQF,wBACnBG,GAAA,EAAiB,eAAc,UAAS,KAAK,GAC5C,UAAA;AAAA,UAAA,gBAAAL,EAAC,MAAA,EAAG,WAAWM,EAAO,aAAc,YAAO,OAAM;AAAA,UACjD,gBAAAP,EAAC,OAAA,EAAI,WAAWO,EAAO,YACpB,UAAA;AAAA,YAAA;AAAA,YACAF,EAAO,SAASA,EAAO,OAAOH,CAAI,IAAI,OAAOA,EAAKG,EAAO,GAAc,CAAC;AAAA,UAAA,EAAA,CAC3E;AAAA,QAAA,EAAA,GALSF,CAMX,CACD;AAAA,MAAA;AAAA,IAAA,EACH,GApBwBA,CAqB1B,CACD;AAAA,EAAA,GACH;AAEJ;"}
+{"version":3,"file":"DataCards.js","sources":["../../../../../src/components/Common/DataView/DataCards/DataCards.tsx"],"sourcesContent":["import styles from './DataCards.module.scss'\nimport type { useDataViewPropReturn } from '@/components/Common/DataView/useDataView'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport type DataCardsProps<T> = {\n  columns: useDataViewPropReturn<T>['columns']\n  data: useDataViewPropReturn<T>['data']\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  footer?: useDataViewPropReturn<T>['footer']\n}\n\nexport const DataCards = <T,>({\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  emptyState,\n  footer,\n}: DataCardsProps<T>) => {\n  const Components = useComponentContext()\n  return (\n    <div role=\"list\" data-testid=\"data-cards\">\n      {data.length === 0 && emptyState && (\n        <div role=\"listitem\">\n          <Components.Card>{emptyState()}</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            onSelect={\n              onSelect\n                ? (checked: boolean) => {\n                    onSelect(item, checked)\n                  }\n                : undefined\n            }\n          >\n            {columns.map((column, index) => (\n              <Flex key={index} flexDirection=\"column\" gap={0}>\n                <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>\n            {(() => {\n              const footerContent = footer()\n\n              // Footer content is always an object with column keys\n              return Object.entries(footerContent).map(([key, content]) => (\n                <div key={key}>{content}</div>\n              ))\n            })()}\n          </Components.Card>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["DataCards","data","columns","itemMenu","onSelect","emptyState","footer","Components","useComponentContext","jsxs","jsx","item","index","checked","column","Flex","styles","footerContent","key","content"],"mappings":";;;;AAcO,MAAMA,IAAY,CAAK;AAAA,EAC5B,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AACF,MAAyB;AACvB,QAAMC,IAAaC,EAAA;AACnB,SACE,gBAAAC,EAAC,OAAA,EAAI,MAAK,QAAO,eAAY,cAC1B,UAAA;AAAA,IAAAR,EAAK,WAAW,KAAKI,KACpB,gBAAAK,EAAC,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAA,EAACH,EAAW,MAAX,EAAiB,UAAAF,EAAA,GAAa,GACjC;AAAA,IAEDJ,EAAK,IAAI,CAACU,GAAMC,MACf,gBAAAF,EAAC,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAA;AAAA,MAACH,EAAW;AAAA,MAAX;AAAA,QACC,MAAMJ,KAAYA,EAASQ,CAAI;AAAA,QAC/B,UACEP,IACI,CAACS,MAAqB;AACpB,UAAAT,EAASO,GAAME,CAAO;AAAA,QACxB,IACA;AAAA,QAGL,UAAAX,EAAQ,IAAI,CAACY,GAAQF,wBACnBG,GAAA,EAAiB,eAAc,UAAS,KAAK,GAC5C,UAAA;AAAA,UAAA,gBAAAL,EAAC,MAAA,EAAG,WAAWM,EAAO,aAAc,YAAO,OAAM;AAAA,UACjD,gBAAAP,EAAC,OAAA,EAAI,WAAWO,EAAO,YACpB,UAAA;AAAA,YAAA;AAAA,YACAF,EAAO,SAASA,EAAO,OAAOH,CAAI,IAAI,OAAOA,EAAKG,EAAO,GAAc,CAAC;AAAA,UAAA,EAAA,CAC3E;AAAA,QAAA,EAAA,GALSF,CAMX,CACD;AAAA,MAAA;AAAA,IAAA,EACH,GApBwBA,CAqB1B,CACD;AAAA,IACAN,uBACE,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAI,EAACH,EAAW,MAAX,EACG,WAAA,MAAM;AACN,YAAMU,IAAgBX,EAAA;AAGtB,aAAO,OAAO,QAAQW,CAAa,EAAE,IAAI,CAAC,CAACC,GAAKC,CAAO,MACrD,gBAAAT,EAAC,OAAA,EAAe,UAAAS,EAAA,GAAND,CAAc,CACzB;AAAA,IACH,GAAA,GACF,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/Common/DataView/DataTable/DataTable.d.ts

@@ -6,5 +6,6 @@ export type DataTableProps<T> = {
     itemMenu?: useDataViewPropReturn<T>['itemMenu'];
     onSelect?: useDataViewPropReturn<T>['onSelect'];
     emptyState?: useDataViewPropReturn<T>['emptyState'];
+    footer?: useDataViewPropReturn<T>['footer'];
 };
-export declare const DataTable: <T>({ label, data, columns, itemMenu, onSelect, emptyState, }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTable: <T>({ label, data, columns, itemMenu, onSelect, emptyState, footer, }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,86 +1,104 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useTranslation as C } from "react-i18next";
+import { jsx as l } from "react/jsx-runtime";
+import { useTranslation as $ } from "react-i18next";
 import { useComponentContext as g } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { VisuallyHidden as k } from "../../VisuallyHidden/VisuallyHidden.js";
-function u(n, t) {
-  if (t.render)
-    return t.render(n);
-  if (t.key) {
-    const o = t.key;
-    return String(n[o] ?? "");
+import { VisuallyHidden as b } from "../../VisuallyHidden/VisuallyHidden.js";
+function D(a, r) {
+  if (r.render)
+    return r.render(a);
+  if (r.key) {
+    const n = r.key;
+    return String(a[n] ?? "");
   }
   return "";
 }
-const T = ({
-  label: n,
-  data: t,
-  columns: o,
-  itemMenu: l,
-  onSelect: i,
-  emptyState: d
+const x = ({
+  label: a,
+  data: r,
+  columns: n,
+  itemMenu: s,
+  onSelect: c,
+  emptyState: f,
+  footer: k
 }) => {
-  const c = g(), { t: y } = C("common"), p = [
-    ...i ? [
+  const p = g(), { t: d } = $("common"), h = [
+    ...c ? [
       {
         key: "select-header",
-        content: /* @__PURE__ */ s(k, { children: y("table.selectRowHeader") })
+        content: /* @__PURE__ */ l(b, { children: d("table.selectRowHeader") })
       }
     ] : [],
-    ...o.map((e, r) => ({
-      key: typeof e.key == "string" ? e.key : `header-${r}`,
-      content: e.title
+    ...n.map((t, e) => ({
+      key: typeof t.key == "string" ? t.key : `header-${e}`,
+      content: t.title
     })),
-    ...l ? [
+    ...s ? [
       {
         key: "actions-header",
-        content: /* @__PURE__ */ s(k, { children: y("table.actionsColumnHeader") })
+        content: /* @__PURE__ */ l(b, { children: d("table.actionsColumnHeader") })
       }
     ] : []
-  ], b = t.map((e, r) => {
-    const f = [
-      ...i ? [
+  ], u = r.map((t, e) => {
+    const i = [
+      ...c ? [
         {
-          key: `select-${r}`,
-          content: /* @__PURE__ */ s(
-            c.Checkbox,
+          key: `select-${e}`,
+          content: /* @__PURE__ */ l(
+            p.Checkbox,
             {
-              onChange: (a) => {
-                i(e, a);
+              onChange: (o) => {
+                c(t, o);
               },
-              label: y("table.selectRowLabel"),
+              label: d("table.selectRowLabel"),
               shouldVisuallyHideLabel: !0
             }
           )
         }
       ] : [],
-      ...o.map((a, h) => ({
-        key: typeof a.key == "string" ? a.key : `cell-${h}`,
-        content: u(e, a)
+      ...n.map((o, y) => ({
+        key: typeof o.key == "string" ? o.key : `cell-${y}`,
+        content: D(t, o)
       })),
-      ...l ? [
+      ...s ? [
         {
-          key: `menu-${r}`,
-          content: l(e)
+          key: `menu-${e}`,
+          content: s(t)
         }
       ] : []
     ];
     return {
-      key: `row-${r}`,
-      data: f
+      key: `row-${e}`,
+      data: i
     };
-  });
-  return /* @__PURE__ */ s(
-    c.Table,
+  }), C = (() => {
+    if (!k) return;
+    const t = k(), e = [];
+    return c && e.push({
+      key: "footer-select",
+      content: ""
+    }), n.forEach((i, o) => {
+      const y = typeof i.key == "string" ? i.key : `column-${o}`;
+      e.push({
+        key: `footer-${y}`,
+        content: t[y] || ""
+      });
+    }), s && e.push({
+      key: "footer-actions",
+      content: ""
+    }), e;
+  })();
+  return /* @__PURE__ */ l(
+    p.Table,
     {
-      "aria-label": n,
+      "aria-label": a,
       "data-testid": "data-table",
-      headers: p,
-      rows: b,
-      emptyState: d ? d() : void 0
+      headers: h,
+      rows: u,
+      footer: C,
+      emptyState: f ? f() : void 0
     }
   );
 };
 export {
-  T as DataTable
+  x as DataTable
 };
 //# sourceMappingURL=DataTable.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["../../../../../src/components/Common/DataView/DataTable/DataTable.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { useDataViewPropReturn } from '../useDataView'\nimport type { TableData, TableRow } from '../../UI/Table/TableTypes'\nimport { VisuallyHidden } from '../../VisuallyHidden'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport type DataTableProps<T> = {\n  label: string\n  columns: useDataViewPropReturn<T>['columns']\n  data: useDataViewPropReturn<T>['data']\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n}\n\nfunction getCellContent<T>(\n  item: T,\n  column: { key?: string | keyof T; render?: (item: T) => React.ReactNode },\n) {\n  if (column.render) {\n    return column.render(item)\n  }\n\n  if (column.key) {\n    const key = column.key as keyof T\n    return String(item[key] ?? '')\n  }\n\n  return ''\n}\n\nexport const DataTable = <T,>({\n  label,\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  emptyState,\n}: DataTableProps<T>) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation('common')\n\n  const headers: TableData[] = [\n    ...(onSelect\n      ? [\n          {\n            key: 'select-header',\n            content: <VisuallyHidden>{t('table.selectRowHeader')}</VisuallyHidden>,\n          },\n        ]\n      : []),\n    ...columns.map((column, index) => ({\n      key: typeof column.key === 'string' ? column.key : `header-${index}`,\n      content: column.title,\n    })),\n    ...(itemMenu\n      ? [\n          {\n            key: 'actions-header',\n            content: <VisuallyHidden>{t('table.actionsColumnHeader')}</VisuallyHidden>,\n          },\n        ]\n      : []),\n  ]\n\n  const rows: TableRow[] = data.map((item, rowIndex) => {\n    const rowData: TableData[] = [\n      ...(onSelect\n        ? [\n            {\n              key: `select-${rowIndex}`,\n              content: (\n                <Components.Checkbox\n                  onChange={(checked: boolean) => {\n                    onSelect(item, checked)\n                  }}\n                  label={t('table.selectRowLabel')}\n                  shouldVisuallyHideLabel\n                />\n              ),\n            },\n          ]\n        : []),\n      ...columns.map((column, colIndex) => {\n        return {\n          key: typeof column.key === 'string' ? column.key : `cell-${colIndex}`,\n          content: getCellContent(item, column),\n        }\n      }),\n      ...(itemMenu\n        ? [\n            {\n              key: `menu-${rowIndex}`,\n              content: itemMenu(item),\n            },\n          ]\n        : []),\n    ]\n\n    return {\n      key: `row-${rowIndex}`,\n      data: rowData,\n    }\n  })\n\n  return (\n    <Components.Table\n      aria-label={label}\n      data-testid=\"data-table\"\n      headers={headers}\n      rows={rows}\n      emptyState={emptyState ? emptyState() : undefined}\n    />\n  )\n}\n"],"names":["getCellContent","item","column","key","DataTable","label","data","columns","itemMenu","onSelect","emptyState","Components","useComponentContext","t","useTranslation","headers","jsx","VisuallyHidden","index","rows","rowIndex","rowData","checked","colIndex"],"mappings":";;;;AAeA,SAASA,EACPC,GACAC,GACA;AACA,MAAIA,EAAO;AACT,WAAOA,EAAO,OAAOD,CAAI;AAG3B,MAAIC,EAAO,KAAK;AACd,UAAMC,IAAMD,EAAO;AACnB,WAAO,OAAOD,EAAKE,CAAG,KAAK,EAAE;AAAA,EAC/B;AAEA,SAAO;AACT;AAEO,MAAMC,IAAY,CAAK;AAAA,EAC5B,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACF,MAAyB;AACvB,QAAMC,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAe,QAAQ,GAE/BC,IAAuB;AAAA,IAC3B,GAAIN,IACA;AAAA,MACE;AAAA,QACE,KAAK;AAAA,QACL,SAAS,gBAAAO,EAACC,GAAA,EAAgB,UAAAJ,EAAE,uBAAuB,EAAA,CAAE;AAAA,MAAA;AAAA,IACvD,IAEF,CAAA;AAAA,IACJ,GAAGN,EAAQ,IAAI,CAACL,GAAQgB,OAAW;AAAA,MACjC,KAAK,OAAOhB,EAAO,OAAQ,WAAWA,EAAO,MAAM,UAAUgB,CAAK;AAAA,MAClE,SAAShB,EAAO;AAAA,IAAA,EAChB;AAAA,IACF,GAAIM,IACA;AAAA,MACE;AAAA,QACE,KAAK;AAAA,QACL,SAAS,gBAAAQ,EAACC,GAAA,EAAgB,UAAAJ,EAAE,2BAA2B,EAAA,CAAE;AAAA,MAAA;AAAA,IAC3D,IAEF,CAAA;AAAA,EAAC,GAGDM,IAAmBb,EAAK,IAAI,CAACL,GAAMmB,MAAa;AACpD,UAAMC,IAAuB;AAAA,MAC3B,GAAIZ,IACA;AAAA,QACE;AAAA,UACE,KAAK,UAAUW,CAAQ;AAAA,UACvB,SACE,gBAAAJ;AAAA,YAACL,EAAW;AAAA,YAAX;AAAA,cACC,UAAU,CAACW,MAAqB;AAC9B,gBAAAb,EAASR,GAAMqB,CAAO;AAAA,cACxB;AAAA,cACA,OAAOT,EAAE,sBAAsB;AAAA,cAC/B,yBAAuB;AAAA,YAAA;AAAA,UAAA;AAAA,QACzB;AAAA,MAEJ,IAEF,CAAA;AAAA,MACJ,GAAGN,EAAQ,IAAI,CAACL,GAAQqB,OACf;AAAA,QACL,KAAK,OAAOrB,EAAO,OAAQ,WAAWA,EAAO,MAAM,QAAQqB,CAAQ;AAAA,QACnE,SAASvB,EAAeC,GAAMC,CAAM;AAAA,MAAA,EAEvC;AAAA,MACD,GAAIM,IACA;AAAA,QACE;AAAA,UACE,KAAK,QAAQY,CAAQ;AAAA,UACrB,SAASZ,EAASP,CAAI;AAAA,QAAA;AAAA,MACxB,IAEF,CAAA;AAAA,IAAC;AAGP,WAAO;AAAA,MACL,KAAK,OAAOmB,CAAQ;AAAA,MACpB,MAAMC;AAAA,IAAA;AAAA,EAEV,CAAC;AAED,SACE,gBAAAL;AAAA,IAACL,EAAW;AAAA,IAAX;AAAA,MACC,cAAYN;AAAA,MACZ,eAAY;AAAA,MACZ,SAAAU;AAAA,MACA,MAAAI;AAAA,MACA,YAAYT,IAAaA,MAAe;AAAA,IAAA;AAAA,EAAA;AAG9C;"}
+{"version":3,"file":"DataTable.js","sources":["../../../../../src/components/Common/DataView/DataTable/DataTable.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { useDataViewPropReturn } from '../useDataView'\nimport type { TableData, TableRow } from '../../UI/Table/TableTypes'\nimport { VisuallyHidden } from '../../VisuallyHidden'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport type DataTableProps<T> = {\n  label: string\n  columns: useDataViewPropReturn<T>['columns']\n  data: useDataViewPropReturn<T>['data']\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  footer?: useDataViewPropReturn<T>['footer']\n}\n\nfunction getCellContent<T>(\n  item: T,\n  column: { key?: string | keyof T; render?: (item: T) => React.ReactNode },\n) {\n  if (column.render) {\n    return column.render(item)\n  }\n\n  if (column.key) {\n    const key = column.key as keyof T\n    return String(item[key] ?? '')\n  }\n\n  return ''\n}\n\nexport const DataTable = <T,>({\n  label,\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  emptyState,\n  footer,\n}: DataTableProps<T>) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation('common')\n\n  const headers: TableData[] = [\n    ...(onSelect\n      ? [\n          {\n            key: 'select-header',\n            content: <VisuallyHidden>{t('table.selectRowHeader')}</VisuallyHidden>,\n          },\n        ]\n      : []),\n    ...columns.map((column, index) => ({\n      key: typeof column.key === 'string' ? column.key : `header-${index}`,\n      content: column.title,\n    })),\n    ...(itemMenu\n      ? [\n          {\n            key: 'actions-header',\n            content: <VisuallyHidden>{t('table.actionsColumnHeader')}</VisuallyHidden>,\n          },\n        ]\n      : []),\n  ]\n\n  const rows: TableRow[] = data.map((item, rowIndex) => {\n    const rowData: TableData[] = [\n      ...(onSelect\n        ? [\n            {\n              key: `select-${rowIndex}`,\n              content: (\n                <Components.Checkbox\n                  onChange={(checked: boolean) => {\n                    onSelect(item, checked)\n                  }}\n                  label={t('table.selectRowLabel')}\n                  shouldVisuallyHideLabel\n                />\n              ),\n            },\n          ]\n        : []),\n      ...columns.map((column, colIndex) => {\n        return {\n          key: typeof column.key === 'string' ? column.key : `cell-${colIndex}`,\n          content: getCellContent(item, column),\n        }\n      }),\n      ...(itemMenu\n        ? [\n            {\n              key: `menu-${rowIndex}`,\n              content: itemMenu(item),\n            },\n          ]\n        : []),\n    ]\n\n    return {\n      key: `row-${rowIndex}`,\n      data: rowData,\n    }\n  })\n\n  const buildFooterData = () => {\n    if (!footer) return undefined\n\n    const footerContent = footer()\n    const footerCells: TableData[] = []\n\n    // Add select column footer (empty)\n    if (onSelect) {\n      footerCells.push({\n        key: 'footer-select',\n        content: '',\n      })\n    }\n\n    // Add data column footers\n    columns.forEach((column, index) => {\n      const columnKey = typeof column.key === 'string' ? column.key : `column-${index}`\n      footerCells.push({\n        key: `footer-${columnKey}`,\n        content: footerContent[columnKey] || '',\n      })\n    })\n\n    // Add actions column footer (empty)\n    if (itemMenu) {\n      footerCells.push({\n        key: 'footer-actions',\n        content: '',\n      })\n    }\n\n    return footerCells\n  }\n\n  const footerData = buildFooterData()\n\n  return (\n    <Components.Table\n      aria-label={label}\n      data-testid=\"data-table\"\n      headers={headers}\n      rows={rows}\n      footer={footerData}\n      emptyState={emptyState ? emptyState() : undefined}\n    />\n  )\n}\n"],"names":["getCellContent","item","column","key","DataTable","label","data","columns","itemMenu","onSelect","emptyState","footer","Components","useComponentContext","t","useTranslation","headers","jsx","VisuallyHidden","index","rows","rowIndex","rowData","checked","colIndex","footerData","footerContent","footerCells","columnKey"],"mappings":"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"}

package/dist/components/Common/DataView/DataView.d.ts

@@ -8,6 +8,7 @@ export type DataViewProps<T> = {
     itemMenu?: useDataViewPropReturn<T>['itemMenu'];
     onSelect?: useDataViewPropReturn<T>['onSelect'];
     breakAt?: BreakpointKey;
+    footer?: useDataViewPropReturn<T>['footer'];
     isFetching?: boolean;
 };
-export declare const DataView: <T>({ pagination, isFetching, breakAt, ...dataViewProps }: DataViewProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataView: <T>({ pagination, isFetching, breakAt, footer, ...dataViewProps }: DataViewProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,35 +1,36 @@
-import { jsxs as f, jsx as n } from "react/jsx-runtime";
-import { useRef as p, useMemo as d } from "react";
-import { PaginationControl as u } from "../PaginationControl/PaginationControl.js";
-import C from "./DataView.module.scss.js";
-import { DataTable as D } from "./DataTable/DataTable.js";
-import { DataCards as b } from "./DataCards/DataCards.js";
-import { useContainerBreakpoints as k } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
-const R = ({
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import { useRef as d, useMemo as u } from "react";
+import { PaginationControl as C } from "../PaginationControl/PaginationControl.js";
+import D from "./DataView.module.scss.js";
+import { DataTable as b } from "./DataTable/DataTable.js";
+import { DataCards as k } from "./DataCards/DataCards.js";
+import { useContainerBreakpoints as w } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
+const V = ({
   pagination: t,
   isFetching: s,
   breakAt: a = "small",
-  ...i
+  footer: i,
+  ...m
 }) => {
-  const e = p(null), o = k({
+  const e = d(null), o = w({
     ref: e
-  }), m = o.length > 0, r = !o.includes(a), c = d(() => r ? b : D, [r]);
-  return /* @__PURE__ */ f(
+  }), c = o.length > 0, r = !o.includes(a), l = u(() => r ? k : b, [r]);
+  return /* @__PURE__ */ p(
     "div",
     {
       "data-testid": "data-view",
-      className: C.dataViewContainer,
-      ref: (l) => {
-        e.current = l;
+      className: D.dataViewContainer,
+      ref: (f) => {
+        e.current = f;
       },
       children: [
-        m && /* @__PURE__ */ n(c, { ...i }),
-        t && /* @__PURE__ */ n(u, { ...t, isFetching: s })
+        c && /* @__PURE__ */ n(l, { ...m, footer: i }),
+        t && /* @__PURE__ */ n(C, { ...t, isFetching: s })
       ]
     }
   );
 };
 export {
-  R as DataView
+  V as DataView
 };
 //# sourceMappingURL=DataView.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataView.js","sources":["../../../../src/components/Common/DataView/DataView.tsx"],"sourcesContent":["import { useMemo, useRef } from 'react'\nimport { PaginationControl } from '../PaginationControl/PaginationControl'\nimport styles from './DataView.module.scss'\nimport { DataTable } from './DataTable/DataTable'\nimport type { useDataViewPropReturn } from './useDataView'\nimport { DataCards } from './DataCards/DataCards'\nimport type { BreakpointKey } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\nimport useContainerBreakpoints from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\n\nexport type DataViewProps<T> = {\n  columns: useDataViewPropReturn<T>['columns']\n  data: T[]\n  pagination?: useDataViewPropReturn<T>['pagination']\n  label: string\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  breakAt?: BreakpointKey\n  isFetching?: boolean\n}\n\nexport const DataView = <T,>({\n  pagination,\n  isFetching,\n  breakAt = 'small',\n  ...dataViewProps\n}: DataViewProps<T>) => {\n  const containerRef = useRef<HTMLElement | null>(null)\n  const breakpoints = useContainerBreakpoints({\n    ref: containerRef,\n  })\n\n  // Wait for breakpoints to be detected before rendering\n  const isBreakpointsDetected = breakpoints.length > 0\n  const isMobile = !breakpoints.includes(breakAt)\n\n  const Component = useMemo(() => {\n    return isMobile ? DataCards : DataTable\n  }, [isMobile])\n\n  return (\n    <div\n      data-testid=\"data-view\"\n      className={styles.dataViewContainer}\n      ref={ref => {\n        containerRef.current = ref\n      }}\n    >\n      {isBreakpointsDetected && <Component {...dataViewProps} />}\n      {pagination && <PaginationControl {...pagination} isFetching={isFetching} />}\n    </div>\n  )\n}\n"],"names":["DataView","pagination","isFetching","breakAt","dataViewProps","containerRef","useRef","breakpoints","useContainerBreakpoints","isBreakpointsDetected","isMobile","Component","useMemo","DataCards","DataTable","jsxs","styles","ref","jsx","PaginationControl"],"mappings":";;;;;;;AAoBO,MAAMA,IAAW,CAAK;AAAA,EAC3B,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,GAAGC;AACL,MAAwB;AACtB,QAAMC,IAAeC,EAA2B,IAAI,GAC9CC,IAAcC,EAAwB;AAAA,IAC1C,KAAKH;AAAA,EAAA,CACN,GAGKI,IAAwBF,EAAY,SAAS,GAC7CG,IAAW,CAACH,EAAY,SAASJ,CAAO,GAExCQ,IAAYC,EAAQ,MACjBF,IAAWG,IAAYC,GAC7B,CAACJ,CAAQ,CAAC;AAEb,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAWC,EAAO;AAAA,MAClB,KAAK,CAAAC,MAAO;AACV,QAAAZ,EAAa,UAAUY;AAAA,MACzB;AAAA,MAEC,UAAA;AAAA,QAAAR,KAAyB,gBAAAS,EAACP,GAAA,EAAW,GAAGP,EAAA,CAAe;AAAA,QACvDH,KAAc,gBAAAiB,EAACC,GAAA,EAAmB,GAAGlB,GAAY,YAAAC,EAAA,CAAwB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhF;"}
+{"version":3,"file":"DataView.js","sources":["../../../../src/components/Common/DataView/DataView.tsx"],"sourcesContent":["import { useMemo, useRef } from 'react'\nimport { PaginationControl } from '../PaginationControl/PaginationControl'\nimport styles from './DataView.module.scss'\nimport { DataTable } from './DataTable/DataTable'\nimport type { useDataViewPropReturn } from './useDataView'\nimport { DataCards } from './DataCards/DataCards'\nimport type { BreakpointKey } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\nimport useContainerBreakpoints from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\n\nexport type DataViewProps<T> = {\n  columns: useDataViewPropReturn<T>['columns']\n  data: T[]\n  pagination?: useDataViewPropReturn<T>['pagination']\n  label: string\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  breakAt?: BreakpointKey\n  footer?: useDataViewPropReturn<T>['footer']\n  isFetching?: boolean\n}\n\nexport const DataView = <T,>({\n  pagination,\n  isFetching,\n  breakAt = 'small',\n  footer,\n  ...dataViewProps\n}: DataViewProps<T>) => {\n  const containerRef = useRef<HTMLElement | null>(null)\n  const breakpoints = useContainerBreakpoints({\n    ref: containerRef,\n  })\n\n  // Wait for breakpoints to be detected before rendering\n  const isBreakpointsDetected = breakpoints.length > 0\n  const isMobile = !breakpoints.includes(breakAt)\n\n  const Component = useMemo(() => {\n    return isMobile ? DataCards : DataTable\n  }, [isMobile])\n\n  return (\n    <div\n      data-testid=\"data-view\"\n      className={styles.dataViewContainer}\n      ref={ref => {\n        containerRef.current = ref\n      }}\n    >\n      {isBreakpointsDetected && <Component {...dataViewProps} footer={footer} />}\n      {pagination && <PaginationControl {...pagination} isFetching={isFetching} />}\n    </div>\n  )\n}\n"],"names":["DataView","pagination","isFetching","breakAt","footer","dataViewProps","containerRef","useRef","breakpoints","useContainerBreakpoints","isBreakpointsDetected","isMobile","Component","useMemo","DataCards","DataTable","jsxs","styles","ref","jsx","PaginationControl"],"mappings":";;;;;;;AAqBO,MAAMA,IAAW,CAAK;AAAA,EAC3B,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,QAAAC;AAAA,EACA,GAAGC;AACL,MAAwB;AACtB,QAAMC,IAAeC,EAA2B,IAAI,GAC9CC,IAAcC,EAAwB;AAAA,IAC1C,KAAKH;AAAA,EAAA,CACN,GAGKI,IAAwBF,EAAY,SAAS,GAC7CG,IAAW,CAACH,EAAY,SAASL,CAAO,GAExCS,IAAYC,EAAQ,MACjBF,IAAWG,IAAYC,GAC7B,CAACJ,CAAQ,CAAC;AAEb,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAWC,EAAO;AAAA,MAClB,KAAK,CAAAC,MAAO;AACV,QAAAZ,EAAa,UAAUY;AAAA,MACzB;AAAA,MAEC,UAAA;AAAA,QAAAR,KAAyB,gBAAAS,EAACP,GAAA,EAAW,GAAGP,GAAe,QAAAD,EAAA,CAAgB;AAAA,QACvEH,KAAc,gBAAAkB,EAACC,GAAA,EAAmB,GAAGnB,GAAY,YAAAC,EAAA,CAAwB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhF;"}

package/dist/components/Common/DataView/useDataView.d.ts

@@ -8,6 +8,7 @@ type DataViewColumn<T> = {
     title: string | React.ReactNode;
     render: (item: T) => React.ReactNode;
 };
+type FooterKeys<T> = keyof T | string;
 export type useDataViewProp<T> = {
     columns: DataViewColumn<T>[];
     data: T[];
@@ -15,6 +16,7 @@ export type useDataViewProp<T> = {
     itemMenu?: (item: T) => React.ReactNode;
     onSelect?: (item: T, checked: boolean) => void;
     emptyState?: () => React.ReactNode;
+    footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>;
     isFetching?: boolean;
 };
 export type useDataViewPropReturn<T> = {
@@ -24,7 +26,8 @@ export type useDataViewPropReturn<T> = {
     itemMenu?: (item: T) => React.ReactNode;
     onSelect?: (item: T, checked: boolean) => void;
     emptyState?: () => React.ReactNode;
+    footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>;
     isFetching?: boolean;
 };
-export declare const useDataView: <T>({ columns, data, itemMenu, onSelect, pagination, emptyState, isFetching, }: useDataViewProp<T>) => useDataViewPropReturn<T>;
+export declare const useDataView: <T>({ columns, data, itemMenu, onSelect, pagination, emptyState, footer, isFetching, }: useDataViewProp<T>) => useDataViewPropReturn<T>;
 export {};

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

@@ -1,22 +1,24 @@
-import { useMemo as u } from "react";
-const d = ({
+import { useMemo as a } from "react";
+const x = ({
   columns: r,
-  data: o,
-  itemMenu: s,
+  data: s,
+  itemMenu: o,
   onSelect: w,
   pagination: V,
-  emptyState: e,
-  isFetching: p
-}) => u(() => ({
+  emptyState: p,
+  footer: u,
+  isFetching: P
+}) => a(() => ({
   pagination: V,
-  data: o,
+  data: s,
   columns: r,
-  itemMenu: s,
+  itemMenu: o,
   onSelect: w,
-  emptyState: e,
-  isFetching: p
-}), [V, o, r, s, w, e, p]);
+  emptyState: p,
+  footer: u,
+  isFetching: P
+}), [V, s, r, o, w, p, u, P]);
 export {
-  d as useDataView
+  x as useDataView
 };
 //# sourceMappingURL=useDataView.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useDataView.js","sources":["../../../../src/components/Common/DataView/useDataView.ts"],"sourcesContent":["import { useMemo } from 'react'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\n\ntype DataViewColumn<T> =\n  | {\n      key: keyof T\n      title: string | React.ReactNode\n      render?: (item: T) => React.ReactNode\n    }\n  | {\n      key?: string\n      title: string | React.ReactNode\n      render: (item: T) => React.ReactNode\n    }\n\nexport type useDataViewProp<T> = {\n  columns: DataViewColumn<T>[]\n  data: T[]\n  pagination?: PaginationControlProps\n  itemMenu?: (item: T) => React.ReactNode\n  onSelect?: (item: T, checked: boolean) => void\n  emptyState?: () => React.ReactNode\n  isFetching?: boolean\n}\n\nexport type useDataViewPropReturn<T> = {\n  pagination?: PaginationControlProps\n  data: T[]\n  columns: DataViewColumn<T>[]\n  itemMenu?: (item: T) => React.ReactNode\n  onSelect?: (item: T, checked: boolean) => void\n  emptyState?: () => React.ReactNode\n  isFetching?: boolean\n}\n\nexport const useDataView = <T>({\n  columns,\n  data,\n  itemMenu,\n  onSelect,\n  pagination,\n  emptyState,\n  isFetching,\n}: useDataViewProp<T>): useDataViewPropReturn<T> => {\n  const dataViewProps = useMemo(() => {\n    return {\n      pagination,\n      data,\n      columns,\n      itemMenu,\n      onSelect,\n      emptyState,\n      isFetching,\n    }\n  }, [pagination, data, columns, itemMenu, onSelect, emptyState, isFetching])\n\n  return dataViewProps\n}\n"],"names":["useDataView","columns","data","itemMenu","onSelect","pagination","emptyState","isFetching","useMemo"],"mappings":";AAmCO,MAAMA,IAAc,CAAI;AAAA,EAC7B,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AACF,MACwBC,EAAQ,OACrB;AAAA,EACL,YAAAH;AAAA,EACA,MAAAH;AAAA,EACA,SAAAD;AAAA,EACA,UAAAE;AAAA,EACA,UAAAC;AAAA,EACA,YAAAE;AAAA,EACA,YAAAC;AAAA,IAED,CAACF,GAAYH,GAAMD,GAASE,GAAUC,GAAUE,GAAYC,CAAU,CAAC;"}
+{"version":3,"file":"useDataView.js","sources":["../../../../src/components/Common/DataView/useDataView.ts"],"sourcesContent":["import { useMemo } from 'react'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\n\ntype DataViewColumn<T> =\n  | {\n      key: keyof T\n      title: string | React.ReactNode\n      render?: (item: T) => React.ReactNode\n    }\n  | {\n      key?: string\n      title: string | React.ReactNode\n      render: (item: T) => React.ReactNode\n    }\n\n// Type for footer object keys - allows data keys and custom string keys\ntype FooterKeys<T> = keyof T | string\n\nexport type useDataViewProp<T> = {\n  columns: DataViewColumn<T>[]\n  data: T[]\n  pagination?: PaginationControlProps\n  itemMenu?: (item: T) => React.ReactNode\n  onSelect?: (item: T, checked: boolean) => void\n  emptyState?: () => React.ReactNode\n  footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>\n  isFetching?: boolean\n}\n\nexport type useDataViewPropReturn<T> = {\n  pagination?: PaginationControlProps\n  data: T[]\n  columns: DataViewColumn<T>[]\n  itemMenu?: (item: T) => React.ReactNode\n  onSelect?: (item: T, checked: boolean) => void\n  emptyState?: () => React.ReactNode\n  footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>\n  isFetching?: boolean\n}\n\nexport const useDataView = <T>({\n  columns,\n  data,\n  itemMenu,\n  onSelect,\n  pagination,\n  emptyState,\n  footer,\n  isFetching,\n}: useDataViewProp<T>): useDataViewPropReturn<T> => {\n  const dataViewProps = useMemo(() => {\n    return {\n      pagination,\n      data,\n      columns,\n      itemMenu,\n      onSelect,\n      emptyState,\n      footer,\n      isFetching,\n    }\n  }, [pagination, data, columns, itemMenu, onSelect, emptyState, footer, isFetching])\n\n  return dataViewProps\n}\n"],"names":["useDataView","columns","data","itemMenu","onSelect","pagination","emptyState","footer","isFetching","useMemo"],"mappings":";AAwCO,MAAMA,IAAc,CAAI;AAAA,EAC7B,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AACF,MACwBC,EAAQ,OACrB;AAAA,EACL,YAAAJ;AAAA,EACA,MAAAH;AAAA,EACA,SAAAD;AAAA,EACA,UAAAE;AAAA,EACA,UAAAC;AAAA,EACA,YAAAE;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,IAED,CAACH,GAAYH,GAAMD,GAASE,GAAUC,GAAUE,GAAYC,GAAQC,CAAU,CAAC;"}