@gusto/embedded-react-sdk 0.7.0 → 0.8.1

package/dist/components/Base/Base.js

@@ -0,0 +1,78 @@
+import { jsx as a, jsxs as b } from "react/jsx-runtime";
+import { useState as u, useCallback as h, Suspense as x } from "react";
+import { ErrorBoundary as v } from "react-error-boundary";
+import { useTranslation as A } from "react-i18next";
+import { APIError as S } from "@gusto/embedded-api/models/errors/apierror";
+import { SDKValidationError as _ } from "@gusto/embedded-api/models/errors/sdkvalidationerror";
+import { UnprocessableEntityErrorObject as d } from "@gusto/embedded-api/models/errors/unprocessableentityerrorobject";
+import { FadeIn as j } from "../Common/FadeIn/FadeIn.js";
+import { BaseContext as B } from "./useBase.js";
+import { componentEvents as I } from "../../shared/constants.js";
+import { useAsyncError as K } from "../Common/hooks/useAsyncError.js";
+import { Loading as P } from "../Common/Loading/Loading.js";
+import { InternalError as R } from "../Common/InternalError/InternalError.js";
+import { snakeCaseToCamelCase as w } from "../../helpers/formattedStrings.js";
+import { useComponentContext as M } from "../../contexts/ComponentAdapter/useComponentContext.js";
+const O = (t) => t.map((e) => e.message ? /* @__PURE__ */ a("li", { children: e.message }, e.key) : null), y = (t, e) => {
+  const n = e ? e + "." : "";
+  if (t.category === "invalid_attribute_value" || t.category === "invalid_operation")
+    return [
+      {
+        key: w(n + t.errorKey),
+        message: t.message ?? ""
+      }
+    ];
+  if (t.category === "nested_errors" && t.errors !== void 0) {
+    let o = "";
+    return t.metadata?.key && typeof t.metadata.key == "string" ? o = t.metadata.key : t.metadata?.state && typeof t.metadata.state == "string" ? o = t.metadata.state : t.errorKey && (o = t.errorKey), t.errors.flatMap((l) => y(l, n + o));
+  }
+  return [];
+}, Y = ({
+  children: t,
+  FallbackComponent: e = R,
+  LoaderComponent: n = P,
+  onEvent: o
+}) => {
+  const [l, i] = u(null), [m, p] = u(null), f = K(), { t: E } = A(), g = M(), k = (r) => {
+    i(r), r instanceof d && Array.isArray(r.errors) && p(r.errors.flatMap((c) => y(c)));
+  }, C = h(
+    async (r, c) => {
+      i(null), p(null);
+      try {
+        await c(r);
+      } catch (s) {
+        s instanceof S || s instanceof _ || s instanceof d ? k(s) : f(s);
+      }
+    },
+    [i, f]
+  );
+  return /* @__PURE__ */ a(
+    B.Provider,
+    {
+      value: {
+        fieldErrors: m,
+        setError: i,
+        onEvent: o,
+        throwError: f,
+        baseSubmitHandler: C
+      },
+      children: /* @__PURE__ */ b(
+        v,
+        {
+          FallbackComponent: e,
+          onError: (r) => {
+            o(I.ERROR, r);
+          },
+          children: [
+            (l || m) && /* @__PURE__ */ a(g.Alert, { label: E("status.errorEncountered"), status: "error", children: m && /* @__PURE__ */ a("ul", { children: O(m) }) }),
+            /* @__PURE__ */ a(x, { fallback: /* @__PURE__ */ a(n, {}), children: /* @__PURE__ */ a(j, { children: t }) })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  Y as BaseComponent
+};
+//# sourceMappingURL=Base.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Base.js","sources":["../../../src/components/Base/Base.tsx"],"sourcesContent":["import type { ReactNode, FC, 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 { FadeIn } from '../Common/FadeIn/FadeIn'\nimport { BaseContext, type FieldError, type KnownErrors, type OnEventType } from './useBase'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport { InternalError, Loading, useAsyncError } from '@/components/Common'\nimport { snakeCaseToCamelCase } from '@/helpers/formattedStrings'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport interface CommonComponentInterface {\n  children?: ReactNode\n  className?: string\n  defaultValues?: unknown\n}\n\n// Base component wrapper with error and suspense handling\nexport interface BaseComponentInterface {\n  FallbackComponent?: (props: FallbackProps) => JSX.Element\n  LoaderComponent?: () => JSX.Element\n  onEvent: OnEventType<EventType, unknown>\n  children?: ReactNode\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: FC<BaseComponentInterface> = ({\n  children,\n  FallbackComponent = InternalError,\n  LoaderComponent = Loading,\n  onEvent,\n}) => {\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 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,\n        onEvent,\n        throwError,\n        baseSubmitHandler,\n      }}\n    >\n      <ErrorBoundary\n        FallbackComponent={FallbackComponent}\n        onError={err => {\n          onEvent(componentEvents.ERROR, err)\n        }}\n      >\n        {(error || fieldErrors) && (\n          <Components.Alert label={t('status.errorEncountered')} status=\"error\">\n            {fieldErrors && <ul>{renderErrorList(fieldErrors)}</ul>}\n          </Components.Alert>\n        )}\n        <Suspense fallback={<LoaderComponent />}>\n          <FadeIn>{children}</FadeIn>\n        </Suspense>\n      </ErrorBoundary>\n    </BaseContext.Provider>\n  )\n}\n"],"names":["renderErrorList","errorList","errorFromList","jsx","getFieldErrors","error","parentKey","keyPrefix","snakeCaseToCamelCase","keySuffix","err","BaseComponent","children","FallbackComponent","InternalError","LoaderComponent","Loading","onEvent","setError","useState","fieldErrors","setFieldErrors","throwError","useAsyncError","t","useTranslation","Components","useComponentContext","processError","UnprocessableEntityErrorObject","baseSubmitHandler","useCallback","data","componentHandler","APIError","SDKValidationError","BaseContext","jsxs","ErrorBoundary","componentEvents","Suspense","FadeIn"],"mappings":";;;;;;;;;;;;;;;AA+BA,MAAMA,IAAkB,CAACC,MAChBA,EAAU,IAAI,CAAiBC,MAChCA,EAAc,UACR,gBAAAC,EAAA,MAAA,EAA4B,UAAcD,EAAA,QAAA,GAAlCA,EAAc,GAA4B,IAErD,IACR,GAKGE,IAAiB,CACrBC,GACAC,MACuC;AACjC,QAAAC,IAAYD,IAAYA,IAAY,MAAM;AAChD,MAAID,EAAM,aAAa,6BAA6BA,EAAM,aAAa;AAC9D,WAAA;AAAA,MACL;AAAA,QACE,KAAKG,EAAqBD,IAAYF,EAAM,QAAQ;AAAA,QACpD,SAASA,EAAM,WAAW;AAAA,MAAA;AAAA,IAE9B;AAEF,MAAIA,EAAM,aAAa,mBAAmBA,EAAM,WAAW,QAAW;AAEpE,QAAII,IAAY;AAEhB,WAAIJ,EAAM,UAAU,OAAO,OAAOA,EAAM,SAAS,OAAQ,WAEvDI,IAAYJ,EAAM,SAAS,MAElBA,EAAM,UAAU,SAAS,OAAOA,EAAM,SAAS,SAAU,WAElEI,IAAYJ,EAAM,SAAS,QAClBA,EAAM,aACfI,IAAYJ,EAAM,WAEbA,EAAM,OAAO,QAAQ,CAAAK,MAAON,EAAeM,GAAKH,IAAYE,CAAS,CAAC;AAAA,EAAA;AAE/E,SAAO,CAAC;AACV,GAIaE,IAA4C,CAAC;AAAA,EACxD,UAAAC;AAAA,EACA,mBAAAC,IAAoBC;AAAA,EACpB,iBAAAC,IAAkBC;AAAA,EAClB,SAAAC;AACF,MAAM;AACJ,QAAM,CAACZ,GAAOa,CAAQ,IAAIC,EAA6B,IAAI,GACrD,CAACC,GAAaC,CAAc,IAAIF,EAA8B,IAAI,GAClEG,IAAaC,EAAc,GAC3B,EAAE,GAAAC,EAAE,IAAIC,EAAe,GACvBC,IAAaC,EAAoB,GAEjCC,IAAe,CAACvB,MAAuB;AAC3C,IAAAa,EAASb,CAAK,GAEVA,aAAiBwB,KAAkC,MAAM,QAAQxB,EAAM,MAAM,KAC/EgB,EAAehB,EAAM,OAAO,QAAQ,OAAOD,EAAeM,CAAG,CAAC,CAAC;AAAA,EAEnE,GAEMoB,IAAoBC;AAAA,IACxB,OAAWC,GAASC,MAAuC;AACzD,MAAAf,EAAS,IAAI,GACbG,EAAe,IAAI;AACf,UAAA;AACF,cAAMY,EAAiBD,CAAI;AAAA,eACpBtB,GAAK;AACZ,QACEA,aAAewB,KACfxB,aAAeyB,KACfzB,aAAemB,IAEfD,EAAalB,CAAG,MACAA,CAAG;AAAA,MAAA;AAAA,IAEzB;AAAA,IACA,CAACQ,GAAUI,CAAU;AAAA,EACvB;AAGE,SAAA,gBAAAnB;AAAA,IAACiC,EAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,aAAAhB;AAAA,QACA,UAAAF;AAAA,QACA,SAAAD;AAAA,QACA,YAAAK;AAAA,QACA,mBAAAQ;AAAA,MACF;AAAA,MAEA,UAAA,gBAAAO;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,mBAAAzB;AAAA,UACA,SAAS,CAAOH,MAAA;AACN,YAAAO,EAAAsB,EAAgB,OAAO7B,CAAG;AAAA,UACpC;AAAA,UAEE,UAAA;AAAA,aAAAL,KAASe,MACR,gBAAAjB,EAAAuB,EAAW,OAAX,EAAiB,OAAOF,EAAE,yBAAyB,GAAG,QAAO,SAC3D,UAAeJ,KAAA,gBAAAjB,EAAC,QAAI,UAAgBH,EAAAoB,CAAW,EAAE,CAAA,GACpD;AAAA,YAEF,gBAAAjB,EAACqC,KAAS,UAAU,gBAAArC,EAACY,KAAgB,GACnC,UAAA,gBAAAZ,EAACsC,GAAQ,EAAA,UAAA7B,EAAS,CAAA,EACpB,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ;"}

package/dist/components/Base/createCompoundContext.d.ts

@@ -0,0 +1 @@
+export declare function createCompoundContext<T>(contextName: string, defaultValue?: T | null): readonly [() => NonNullable<T>, import('react').Provider<T | null>];

package/dist/components/Base/createCompoundContext.js

@@ -0,0 +1,14 @@
+import { createContext as r, useContext as u } from "react";
+function i(e, n = null) {
+  const t = r(n);
+  return [() => {
+    const o = u(t);
+    if (!o)
+      throw new Error(`${e} must be used within its Provider.`);
+    return o;
+  }, t.Provider];
+}
+export {
+  i as createCompoundContext
+};
+//# sourceMappingURL=createCompoundContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createCompoundContext.js","sources":["../../../src/components/Base/createCompoundContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport function createCompoundContext<T>(contextName: string, defaultValue: T | null = null) {\n  const context = createContext<T | null>(defaultValue)\n\n  const useCompoundContext = () => {\n    const ctx = useContext(context)\n    if (!ctx) {\n      throw new Error(`${contextName} must be used within its Provider.`)\n    }\n    return ctx\n  }\n\n  return [useCompoundContext, context.Provider] as const\n}\n"],"names":["createCompoundContext","contextName","defaultValue","context","createContext","ctx","useContext"],"mappings":";AAEgB,SAAAA,EAAyBC,GAAqBC,IAAyB,MAAM;AACrF,QAAAC,IAAUC,EAAwBF,CAAY;AAU7C,SAAA,CARoB,MAAM;AACzB,UAAAG,IAAMC,EAAWH,CAAO;AAC9B,QAAI,CAACE;AACH,YAAM,IAAI,MAAM,GAAGJ,CAAW,oCAAoC;AAE7D,WAAAI;AAAA,EACT,GAE4BF,EAAQ,QAAQ;AAC9C;"}

package/dist/components/Base/index.d.ts

@@ -0,0 +1,3 @@
+export { BaseComponent, type BaseComponentInterface, type CommonComponentInterface } from './Base';
+export { createCompoundContext } from './createCompoundContext';
+export { useBase } from './useBase';

package/dist/components/Base/useBase.d.ts

@@ -0,0 +1,20 @@
+import { APIError } from '@gusto/embedded-api/models/errors/apierror';
+import { SDKValidationError } from '@gusto/embedded-api/models/errors/sdkvalidationerror';
+import { UnprocessableEntityErrorObject } from '@gusto/embedded-api/models/errors/unprocessableentityerrorobject';
+import { EventType } from '../../shared/constants';
+export type OnEventType<K, T> = (type: K, data?: T) => void;
+export type KnownErrors = APIError | SDKValidationError | UnprocessableEntityErrorObject;
+export type FieldError = {
+    key: string;
+    message: string;
+};
+interface BaseContextProps {
+    fieldErrors: FieldError[] | null;
+    setError: (err: KnownErrors) => void;
+    onEvent: OnEventType<EventType, unknown>;
+    throwError: (e: unknown) => void;
+    baseSubmitHandler: <T>(formData: T, componentHandler: (payload: T) => Promise<void>) => Promise<void>;
+}
+export declare const BaseContext: import('react').Context<BaseContextProps | undefined>;
+export declare const useBase: () => BaseContextProps;
+export {};

package/dist/components/Base/useBase.js

@@ -0,0 +1,12 @@
+import { createContext as t, useContext as o } from "react";
+const r = t(void 0), n = () => {
+  const e = o(r);
+  if (!e)
+    throw new Error("useBase must be used within a BaseProvider");
+  return e;
+};
+export {
+  r as BaseContext,
+  n as useBase
+};
+//# sourceMappingURL=useBase.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useBase.js","sources":["../../../src/components/Base/useBase.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { APIError } from '@gusto/embedded-api/models/errors/apierror'\nimport type { SDKValidationError } from '@gusto/embedded-api/models/errors/sdkvalidationerror'\nimport type { UnprocessableEntityErrorObject } from '@gusto/embedded-api/models/errors/unprocessableentityerrorobject'\nimport { type EventType } from '@/shared/constants'\n\nexport type OnEventType<K, T> = (type: K, data?: T) => void\n\nexport type KnownErrors = APIError | SDKValidationError | UnprocessableEntityErrorObject\n\nexport type FieldError = {\n  key: string\n  message: string\n}\n\ninterface BaseContextProps {\n  fieldErrors: FieldError[] | null\n  setError: (err: KnownErrors) => void\n  onEvent: OnEventType<EventType, unknown>\n  throwError: (e: unknown) => void\n  baseSubmitHandler: <T>(\n    formData: T,\n    componentHandler: (payload: T) => Promise<void>,\n  ) => Promise<void>\n}\n\nexport const BaseContext = createContext<BaseContextProps | undefined>(undefined)\n\nexport const useBase = () => {\n  const context = useContext(BaseContext)\n  if (!context) {\n    throw new Error('useBase must be used within a BaseProvider')\n  }\n  return context\n}\n"],"names":["BaseContext","createContext","useBase","context","useContext"],"mappings":";AA0Ba,MAAAA,IAAcC,EAA4C,MAAS,GAEnEC,IAAU,MAAM;AACrB,QAAAC,IAAUC,EAAWJ,CAAW;AACtC,MAAI,CAACG;AACG,UAAA,IAAI,MAAM,4CAA4C;AAEvD,SAAAA;AACT;"}

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

@@ -0,0 +1,7 @@
+import { GridProps } from '../Grid/Grid';
+interface ActionsLayoutProps {
+    children: React.ReactNode;
+    justifyContent?: GridProps['justifyContent'];
+}
+export declare const ActionsLayout: ({ children, justifyContent }: ActionsLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Common/ActionsLayout/ActionsLayout.js

@@ -0,0 +1,22 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Children as n } from "react";
+import { Grid as a } from "../Grid/Grid.js";
+const p = ({ children: r, justifyContent: o = "end" }) => {
+  const t = n.toArray(r).filter(Boolean);
+  return /* @__PURE__ */ e(
+    a,
+    {
+      gridTemplateColumns: {
+        base: "1fr",
+        small: `repeat(${t.length}, max-content)`
+      },
+      justifyContent: o,
+      gap: 12,
+      children: r
+    }
+  );
+};
+export {
+  p as ActionsLayout
+};
+//# sourceMappingURL=ActionsLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionsLayout.js","sources":["../../../../src/components/Common/ActionsLayout/ActionsLayout.tsx"],"sourcesContent":["import { Children } from 'react'\nimport { Grid, type GridProps } from '../Grid/Grid'\n\ninterface ActionsLayoutProps {\n  children: React.ReactNode\n  justifyContent?: GridProps['justifyContent']\n}\n\nexport const ActionsLayout = ({ children, justifyContent = 'end' }: ActionsLayoutProps) => {\n  const childrenArray = Children.toArray(children).filter(Boolean)\n  return (\n    <Grid\n      gridTemplateColumns={{\n        base: '1fr',\n        small: `repeat(${childrenArray.length}, max-content)`,\n      }}\n      justifyContent={justifyContent}\n      gap={12}\n    >\n      {children}\n    </Grid>\n  )\n}\n"],"names":["ActionsLayout","children","justifyContent","childrenArray","Children","jsx","Grid"],"mappings":";;;AAQO,MAAMA,IAAgB,CAAC,EAAE,UAAAC,GAAU,gBAAAC,IAAiB,YAAgC;AACzF,QAAMC,IAAgBC,EAAS,QAAQH,CAAQ,EAAE,OAAO,OAAO;AAE7D,SAAA,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,qBAAqB;AAAA,QACnB,MAAM;AAAA,QACN,OAAO,UAAUH,EAAc,MAAM;AAAA,MACvC;AAAA,MACA,gBAAAD;AAAA,MACA,KAAK;AAAA,MAEJ,UAAAD;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/components/Common/ActionsLayout/index.d.ts

@@ -0,0 +1 @@
+export * from './ActionsLayout';

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

@@ -0,0 +1,9 @@
+export interface AlertProps {
+    variant?: 'info' | 'success' | 'warning' | 'error';
+    label: string;
+    children?: React.ReactNode;
+    icon?: React.ComponentType<React.SVGProps<SVGSVGElement> & {
+        title?: string;
+    }>;
+}
+export declare function Alert({ label, children, variant, icon }: AlertProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,36 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import s from "./DataCards.module.scss.js";
+import { Flex as h } from "../../Flex/Flex.js";
+import { useComponentContext as x } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+const D = ({
+  data: n,
+  columns: a,
+  itemMenu: o,
+  onSelect: d,
+  emptyState: c
+}) => {
+  const l = x();
+  return /* @__PURE__ */ i("div", { role: "list", "data-testid": "data-cards", children: [
+    n.length === 0 && /* @__PURE__ */ t(l.Card, { children: c?.() }),
+    n.map((e, m) => /* @__PURE__ */ t("div", { role: "listitem", children: /* @__PURE__ */ t(
+      l.Card,
+      {
+        menu: o && o(e),
+        onSelect: d ? (r) => {
+          d(e, r);
+        } : void 0,
+        children: a.map((r, p) => /* @__PURE__ */ i(h, { flexDirection: "column", gap: 0, children: [
+          /* @__PURE__ */ t("h5", { className: s.columnTitle, children: r.title }),
+          /* @__PURE__ */ i("div", { className: s.columnData, children: [
+            " ",
+            r.render ? r.render(e) : String(e[r.key])
+          ] })
+        ] }, p))
+      }
+    ) }, m))
+  ] });
+};
+export {
+  D as DataCards
+};
+//# sourceMappingURL=DataCards.js.map

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

@@ -0,0 +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 && <Components.Card>{emptyState?.()}</Components.Card>}\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,EAAoB;AACvC,SACG,gBAAAC,EAAA,OAAA,EAAI,MAAK,QAAO,eAAY,cAC1B,UAAA;AAAA,IAAAP,EAAK,WAAW,KAAK,gBAAAQ,EAACH,EAAW,MAAX,EAAiB,iBAAe;AAAA,IACtDL,EAAK,IAAI,CAACS,GAAMC,MACd,gBAAAF,EAAA,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,QAAA,IAExB;AAAA,QAGL,UAAAV,EAAQ,IAAI,CAACW,GAAQF,wBACnBG,GAAiB,EAAA,eAAc,UAAS,KAAK,GAC5C,UAAA;AAAA,UAAA,gBAAAL,EAAC,MAAG,EAAA,WAAWM,EAAO,aAAc,YAAO,OAAM;AAAA,UAChD,gBAAAP,EAAA,OAAA,EAAI,WAAWO,EAAO,YACpB,UAAA;AAAA,YAAA;AAAA,YACAF,EAAO,SAASA,EAAO,OAAOH,CAAI,IAAI,OAAOA,EAAKG,EAAO,GAAc,CAAC;AAAA,UAAA,EAC3E,CAAA;AAAA,QAAA,EAAA,GALSF,CAMX,CACD;AAAA,MAAA;AAAA,IACH,EAAA,GApBwBA,CAqB1B,CACD;AAAA,EAAA,GACH;AAEJ;"}

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

@@ -0,0 +1,10 @@
+const t = "_columnTitle_1djp5_1", l = "_columnData_1djp5_8", o = {
+  columnTitle: t,
+  columnData: l
+};
+export {
+  l as columnData,
+  t as columnTitle,
+  o as default
+};
+//# sourceMappingURL=DataCards.module.scss.js.map

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

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

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

@@ -0,0 +1 @@
+export * from './DataCards';

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

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

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

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

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

@@ -0,0 +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;AACF,WAAAA,EAAO,OAAOD,CAAI;AAG3B,MAAIC,EAAO,KAAK;AACd,UAAMC,IAAMD,EAAO;AACnB,WAAO,OAAOD,EAAKE,CAAG,KAAK,EAAE;AAAA,EAAA;AAGxB,SAAA;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,EAAoB,GACjC,EAAE,GAAAC,EAAA,IAAMC,EAAe,QAAQ,GAE/BC,IAAuB;AAAA,IAC3B,GAAIN,IACA;AAAA,MACE;AAAA,QACE,KAAK;AAAA,QACL,SAAS,gBAAAO,EAACC,GAAgB,EAAA,UAAAJ,EAAE,uBAAuB,EAAE,CAAA;AAAA,MAAA;AAAA,IACvD,IAEF,CAAC;AAAA,IACL,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,GAAgB,EAAA,UAAAJ,EAAE,2BAA2B,EAAE,CAAA;AAAA,MAAA;AAAA,IAC3D,IAEF,CAAA;AAAA,EACN,GAEMM,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,CAAC;AAAA,MACL,GAAGN,EAAQ,IAAI,CAACL,GAAQqB,OACf;AAAA,QACL,KAAK,OAAOrB,EAAO,OAAQ,WAAWA,EAAO,MAAM,QAAQqB,CAAQ;AAAA,QACnE,SAASvB,EAAeC,GAAMC,CAAM;AAAA,MACtC,EACD;AAAA,MACD,GAAIM,IACA;AAAA,QACE;AAAA,UACE,KAAK,QAAQY,CAAQ;AAAA,UACrB,SAASZ,EAASP,CAAI;AAAA,QAAA;AAAA,MACxB,IAEF,CAAA;AAAA,IACN;AAEO,WAAA;AAAA,MACL,KAAK,OAAOmB,CAAQ;AAAA,MACpB,MAAMC;AAAA,IACR;AAAA,EAAA,CACD;AAGC,SAAA,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,EAC1C;AAEJ;"}

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

@@ -0,0 +1,12 @@
+import { useDataViewPropReturn } from './useDataView';
+import { BreakpointKey } from '../../../hooks/useContainerBreakpoints/useContainerBreakpoints';
+export type DataViewProps<T> = {
+    columns: useDataViewPropReturn<T>['columns'];
+    data: T[];
+    pagination?: useDataViewPropReturn<T>['pagination'];
+    label: string;
+    itemMenu?: useDataViewPropReturn<T>['itemMenu'];
+    onSelect?: useDataViewPropReturn<T>['onSelect'];
+    breakAt?: BreakpointKey;
+};
+export declare const DataView: <T>({ pagination, breakAt, ...dataViewProps }: DataViewProps<T>) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +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}\n\nexport const DataView = <T,>({\n  pagination,\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  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      <Component {...dataViewProps} />\n      {pagination && <PaginationControl {...pagination} />}\n    </div>\n  )\n}\n"],"names":["DataView","pagination","breakAt","dataViewProps","containerRef","useRef","isMobile","useContainerBreakpoints","Component","useMemo","DataCards","DataTable","jsxs","styles","ref","jsx","PaginationControl"],"mappings":";;;;;;;AAmBO,MAAMA,IAAW,CAAK;AAAA,EAC3B,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,GAAGC;AACL,MAAwB;AAChB,QAAAC,IAAeC,EAA2B,IAAI,GAK9CC,IAAW,CAJGC,EAAwB;AAAA,IAC1C,KAAKH;AAAA,EAAA,CACN,EAE6B,SAASF,CAAO,GAExCM,IAAYC,EAAQ,MACjBH,IAAWI,IAAYC,GAC7B,CAACL,CAAQ,CAAC;AAGX,SAAA,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAWC,EAAO;AAAA,MAClB,KAAK,CAAOC,MAAA;AACV,QAAAV,EAAa,UAAUU;AAAA,MACzB;AAAA,MAEA,UAAA;AAAA,QAAC,gBAAAC,EAAAP,GAAA,EAAW,GAAGL,GAAe;AAAA,QAC7BF,KAAc,gBAAAc,EAACC,GAAmB,EAAA,GAAGf,EAAY,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACpD;AAEJ;"}

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

@@ -0,0 +1,8 @@
+const a = "_dataViewContainer_oq55x_1", t = {
+  dataViewContainer: a
+};
+export {
+  a as dataViewContainer,
+  t as default
+};
+//# sourceMappingURL=DataView.module.scss.js.map

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

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

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

@@ -0,0 +1,4 @@
+export * from './DataView';
+export * from './DataCards/';
+export * from './DataTable/DataTable';
+export * from './useDataView';

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

@@ -0,0 +1,28 @@
+import { PaginationControlProps } from '../PaginationControl/PaginationControlTypes';
+type DataViewColumn<T> = {
+    key: keyof T;
+    title: string | React.ReactNode;
+    render?: (item: T) => React.ReactNode;
+} | {
+    key?: string;
+    title: string | React.ReactNode;
+    render: (item: T) => React.ReactNode;
+};
+export type useDataViewProp<T> = {
+    columns: DataViewColumn<T>[];
+    data: T[];
+    pagination?: PaginationControlProps;
+    itemMenu?: (item: T) => React.ReactNode;
+    onSelect?: (item: T, checked: boolean) => void;
+    emptyState?: () => React.ReactNode;
+};
+export type useDataViewPropReturn<T> = {
+    pagination?: PaginationControlProps;
+    data: T[];
+    columns: DataViewColumn<T>[];
+    itemMenu?: (item: T) => React.ReactNode;
+    onSelect?: (item: T, checked: boolean) => void;
+    emptyState?: () => React.ReactNode;
+};
+export declare const useDataView: <T>({ columns, data, itemMenu, onSelect, pagination, emptyState, }: useDataViewProp<T>) => useDataViewPropReturn<T>;
+export {};

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

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

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

@@ -0,0 +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}\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}\n\nexport const useDataView = <T>({\n  columns,\n  data,\n  itemMenu,\n  onSelect,\n  pagination,\n  emptyState,\n}: useDataViewProp<T>): useDataViewPropReturn<T> => {\n  const dataViewProps = useMemo(() => {\n    return {\n      pagination,\n      data,\n      columns,\n      itemMenu,\n      onSelect,\n      emptyState,\n    }\n  }, [pagination, data, columns, itemMenu, onSelect, emptyState])\n\n  return dataViewProps\n}\n"],"names":["useDataView","columns","data","itemMenu","onSelect","pagination","emptyState","useMemo"],"mappings":";AAiCO,MAAMA,IAAc,CAAI;AAAA,EAC7B,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AACF,MACwBC,EAAQ,OACrB;AAAA,EACL,YAAAF;AAAA,EACA,MAAAH;AAAA,EACA,SAAAD;AAAA,EACA,UAAAE;AAAA,EACA,UAAAC;AAAA,EACA,YAAAE;AACF,IACC,CAACD,GAAYH,GAAMD,GAASE,GAAUC,GAAUE,CAAU,CAAC;"}

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

@@ -0,0 +1,26 @@
+export interface FormData {
+    uuid: string;
+    title?: string;
+    description?: string;
+    requires_signing?: boolean;
+}
+interface DocumentListProps {
+    forms: FormData[];
+    canSign?: boolean;
+    onRequestSign?: (form: FormData) => void;
+    withError?: boolean;
+    label: string;
+    columnLabels: {
+        form: string;
+        action: string;
+    };
+    statusLabels: {
+        signCta: string;
+        notSigned: string;
+        complete: string;
+    };
+    emptyStateLabel: string;
+    errorLabel: string;
+}
+declare function DocumentList({ forms, canSign, onRequestSign, withError, label, columnLabels, statusLabels, emptyStateLabel, errorLabel, }: DocumentListProps): import("react/jsx-runtime").JSX.Element;
+export { DocumentList };

package/dist/components/Common/DocumentList/DocumentList.js

@@ -0,0 +1,40 @@
+import { jsxs as f, jsx as t, Fragment as h } from "react/jsx-runtime";
+import { EmptyData as g } from "../EmptyData/EmptyData.js";
+import i from "./DocumentList.module.scss.js";
+import { useComponentContext as C } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useDataView as v } from "../DataView/useDataView.js";
+import { DataView as x } from "../DataView/DataView.js";
+function j({
+  forms: s,
+  canSign: a = !0,
+  onRequestSign: c,
+  withError: m = !1,
+  label: d,
+  columnLabels: o,
+  statusLabels: n,
+  emptyStateLabel: l,
+  errorLabel: p
+}) {
+  const r = C(), { ...u } = v({
+    data: s,
+    columns: [
+      {
+        title: o.form,
+        render: (e) => /* @__PURE__ */ f(h, { children: [
+          /* @__PURE__ */ t("div", { className: i.formTitle, children: e.title }),
+          /* @__PURE__ */ t("div", { className: i.formDescription, children: e.description })
+        ] })
+      },
+      {
+        title: o.action,
+        render: (e) => /* @__PURE__ */ t("div", { className: i.statusCell, children: e.requires_signing ? a ? /* @__PURE__ */ t(r.Button, { variant: "secondary", onClick: () => c?.(e), children: n.signCta }) : /* @__PURE__ */ t(r.Badge, { status: "warning", children: n.notSigned }) : /* @__PURE__ */ t(r.Badge, { status: "success", children: n.complete }) })
+      }
+    ],
+    emptyState: () => m ? /* @__PURE__ */ t(r.Text, { className: i.documentListError, children: p }) : /* @__PURE__ */ t(g, { title: l })
+  });
+  return /* @__PURE__ */ t("div", { className: i.documentList, children: /* @__PURE__ */ t(x, { label: d, ...u }) });
+}
+export {
+  j as DocumentList
+};
+//# sourceMappingURL=DocumentList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentList.js","sources":["../../../../src/components/Common/DocumentList/DocumentList.tsx"],"sourcesContent":["import { DataView, useDataView } from '../DataView'\nimport { EmptyData } from '../EmptyData/EmptyData'\nimport styles from './DocumentList.module.scss'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport interface FormData {\n  uuid: string\n  title?: string\n  description?: string\n  requires_signing?: boolean\n}\n\ninterface DocumentListProps {\n  forms: FormData[]\n  canSign?: boolean\n  onRequestSign?: (form: FormData) => void\n  withError?: boolean\n  label: string\n  columnLabels: {\n    form: string\n    action: string\n  }\n  statusLabels: {\n    signCta: string\n    notSigned: string\n    complete: string\n  }\n  emptyStateLabel: string\n  errorLabel: string\n}\n\nfunction DocumentList({\n  forms,\n  canSign = true,\n  onRequestSign,\n  withError = false,\n  label,\n  columnLabels,\n  statusLabels,\n  emptyStateLabel,\n  errorLabel,\n}: DocumentListProps) {\n  const Components = useComponentContext()\n  const { ...dataViewProps } = useDataView({\n    data: forms,\n    columns: [\n      {\n        title: columnLabels.form,\n        render: (form: FormData) => (\n          <>\n            <div className={styles.formTitle}>{form.title}</div>\n            <div className={styles.formDescription}>{form.description}</div>\n          </>\n        ),\n      },\n      {\n        title: columnLabels.action,\n        render: (form: FormData) => (\n          <div className={styles.statusCell}>\n            {form.requires_signing ? (\n              canSign ? (\n                <Components.Button variant=\"secondary\" onClick={() => onRequestSign?.(form)}>\n                  {statusLabels.signCta}\n                </Components.Button>\n              ) : (\n                <Components.Badge status=\"warning\">{statusLabels.notSigned}</Components.Badge>\n              )\n            ) : (\n              <Components.Badge status=\"success\">{statusLabels.complete}</Components.Badge>\n            )}\n          </div>\n        ),\n      },\n    ],\n    emptyState: () =>\n      withError ? (\n        <Components.Text className={styles.documentListError}>{errorLabel}</Components.Text>\n      ) : (\n        <EmptyData title={emptyStateLabel} />\n      ),\n  })\n\n  return (\n    <div className={styles.documentList}>\n      <DataView label={label} {...dataViewProps} />\n    </div>\n  )\n}\n\nexport { DocumentList }\n"],"names":["DocumentList","forms","canSign","onRequestSign","withError","label","columnLabels","statusLabels","emptyStateLabel","errorLabel","Components","useComponentContext","dataViewProps","useDataView","form","jsxs","Fragment","jsx","styles","EmptyData","DataView"],"mappings":";;;;;;AA+BA,SAASA,EAAa;AAAA,EACpB,OAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,eAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC;AACF,GAAsB;AACpB,QAAMC,IAAaC,EAAoB,GACjC,EAAE,GAAGC,EAAc,IAAIC,EAAY;AAAA,IACvC,MAAMZ;AAAA,IACN,SAAS;AAAA,MACP;AAAA,QACE,OAAOK,EAAa;AAAA,QACpB,QAAQ,CAACQ,MAEL,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,UAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWC,EAAO,WAAY,YAAK,OAAM;AAAA,4BAC7C,OAAI,EAAA,WAAWA,EAAO,iBAAkB,YAAK,YAAY,CAAA;AAAA,QAAA,EAC5D,CAAA;AAAA,MAEJ;AAAA,MACA;AAAA,QACE,OAAOZ,EAAa;AAAA,QACpB,QAAQ,CAACQ,wBACN,OAAI,EAAA,WAAWI,EAAO,YACpB,UAAAJ,EAAK,mBACJZ,IACE,gBAAAe,EAACP,EAAW,QAAX,EAAkB,SAAQ,aAAY,SAAS,MAAMP,IAAgBW,CAAI,GACvE,UAAAP,EAAa,SAChB,IAEA,gBAAAU,EAACP,EAAW,OAAX,EAAiB,QAAO,WAAW,UAAAH,EAAa,UAAU,CAAA,IAG7D,gBAAAU,EAACP,EAAW,OAAX,EAAiB,QAAO,WAAW,UAAAH,EAAa,UAAS,EAE9D,CAAA;AAAA,MAAA;AAAA,IAGN;AAAA,IACA,YAAY,MACVH,IACE,gBAAAa,EAACP,EAAW,MAAX,EAAgB,WAAWQ,EAAO,mBAAoB,UAAWT,EAAA,CAAA,IAEjE,gBAAAQ,EAAAE,GAAA,EAAU,OAAOX,EAAiB,CAAA;AAAA,EAAA,CAExC;AAGC,SAAA,gBAAAS,EAAC,OAAI,EAAA,WAAWC,EAAO,cACrB,4BAACE,GAAS,EAAA,OAAAf,GAAe,GAAGO,EAAA,CAAe,EAC7C,CAAA;AAEJ;"}