@gusto/embedded-react-sdk 0.42.0 → 0.44.0

package/CHANGELOG.md

@@ -1,5 +1,132 @@
 # Changelog
 
+## 0.44.0
+
+### Breaking Changes
+
+#### `UNSTABLE_TimeOff` namespace renamed to `TimeOff`
+
+TimeOff components are now exported as `TimeOff.*` instead of `UNSTABLE_TimeOff.*`:
+
+```tsx
+// Before
+import { UNSTABLE_TimeOff } from '@gusto/embedded-react-sdk'
+;<UNSTABLE_TimeOff.TimeOffFlow companyId={companyId} onEvent={handleEvent} />
+
+// After
+import { TimeOff } from '@gusto/embedded-react-sdk'
+;<TimeOff.TimeOffFlow companyId={companyId} onEvent={handleEvent} />
+```
+
+#### `useCompensationForm` split into `useJobForm` + `useCompensationForm`
+
+The monolithic `useCompensationForm` has been decomposed into focused, steady-state hooks so partners can drive job and compensation lifecycles independently or together.
+
+- `useJobForm` / `useCurrentJobForm`: create | update routing, error handling, and POST/PUT/DELETE wiring for the Jobs API.
+- `useCompensationForm` / `useCurrentCompensationForm`: single create | update path covering both the onboarding stub-update case and steady-state effective-dated compensations, with optimistic-locking via version.
+
+`useCompensationForm.actions.onSubmit` changed from `(callbacks?, options?)` to `(options?)`. The `CompensationSubmitCallbacks` export is removed. Read the saved compensation from the awaited `HookSubmitResult`'s `data` field instead of wiring `onCompensationCreated` / `onCompensationUpdated`.
+
+#### `Employee.Profile` migrated to hook architecture with management variant
+
+`Employee.Profile` has been rebuilt on the hook architecture and now supports steady-state edit mode. `useEmployeeDetailsForm` props are now a discriminated union on `companyId`/`employeeId`. `EmployeeOnboarding.Profile` and `EmployeeManagement.Profile` each point to their dedicated variant.
+
+#### `Employee.FederalTaxes` split into onboarding + management variants
+
+The `isOnboarding` prop has been replaced with two journey-scoped components:
+
+- `EmployeeOnboarding.FederalTaxes` — Continue button, emits `EMPLOYEE_FEDERAL_TAXES_UPDATED` + `EMPLOYEE_FEDERAL_TAXES_DONE`.
+- `EmployeeManagement.FederalTaxes` — Cancel + Save, dismissible success alert, emits `CANCEL` or `EMPLOYEE_FEDERAL_TAXES_UPDATED` (no `_DONE`).
+
+`Employee.FederalTaxes` now resolves to the management variant (matching the WorkAddress/HomeAddress convention).
+
+### Features & Enhancements
+
+- Export `LocationForm` as standalone component
+- Add `useEmployeeStateTaxesForm` hook and migrate `Employee.StateTaxes`
+- Add `StateTaxes` management variant (onboarding/management split)
+- Display `setup_status`, `default_rates_applied`, and `ready_to_run_payroll` in `StateTaxesList`
+- Add time-off policy detail presentational and functional components with tests
+- Add `HolidayPolicyDetail` presentational and functional components
+- Add edit employee balance modal for time-off policy detail
+- Pre-fill carry-over balances when adding employees to a time-off policy
+- Surface `eligiblePaidTimeOff` via `Include.AllCompensations`
+- Focus visually first invalid field across composed forms
+- Update Company header styles with consistent spacing and supporting text variant
+
+### Fixes
+
+- Make sure to update for component adaptor
+- Use component context for dialog buttons
+- Workers comp rate inputs submit typed values (SDK-798)
+- Improve accessibility: add `aria-labelledby` and `aria-controls` attributes to Time Off form landmarks, PolicySettings switches, and balance inputs
+- Remove hardcoded colors in PolicySettings for theme compliance
+- Correct policy settings visibility for fixed accrual methods
+- Adjust day dropdown in policy reset date based on selected month
+- Hide job title column on time-off policy detail page
+- Use locale-aware date formatting in TimeOff components
+- Use server-side search for employee selection in time-off flows
+- Wire holiday policy edit, add-employees, and delete flows
+- Keep delete confirmation dialog open when deletion fails
+- Clear stale policyId when starting new create flow in TimeOff wizard
+- Rename policy list menu item from "Edit policy" to "View policy"
+- Improve error message when removing employees with pending time-off requests
+- Make reset date type optional for hourly accrual methods
+- Filter policy detail settings display by accrual method category
+- Hide Edit balance menu item for unlimited time-off policies
+- Emit SDK event on time off policy deletion
+- Reset edit balance modal state when switching employees
+- Use update mutation when editing existing time-off policies
+- Hide holiday pay option when company already has a policy
+- Filter time-off policy list to PTO, Sick, and Holiday only
+- Hide deactivated policies from time-off policy list
+- Display employee names in time-off policy detail
+- Hide job title and balance columns for unlimited time-off policies
+- Send `complete: false` when creating non-unlimited time-off policies
+- Scope time-off reassignment warning per policy type
+- Treat NaN as empty in form schema so required validation fires for cleared number inputs
+- Improve validation error for net pay in off-cycle payroll (SDK-735)
+- Reduce button padding and min-height to match input height
+- Apply max length to information request text response (SDK-423)
+
+### Chores & Maintenance
+
+- Rebuild `Employee.Compensation` around a state machine + presentation/connected split
+- Anchor `TimeOffPolicyType` to SDK `PolicyType` enum
+- Remove dead code (`SelectEmployees`, `ViewPolicyDetails`/`ViewPolicyEmployees` stubs, unused i18n keys)
+- Remove duplicate `contractorName` and clean up Street 2 labels
+- Update README with missing docs and fix stale links
+- Standardize workflows-overview structure and add missing components
+- Validate Storybook and SDK app builds in CI
+- Bump various dependencies (i18next, react-i18next, msw, lint-staged, vite-plugin-circular-dependency, react-router-dom, axios, typescript-eslint, globals, @commitlint/cli, react-hook-form, dompurify, @storybook/addon-docs, @storybook/addon-a11y, @storybook/addon-onboarding, @commitlint/config-conventional)
+
+## 0.43.0
+
+### Features & Enhancements
+
+- Add `portalContainer` prop to `GustoProvider` for overlay positioning control
+- Add contractor self-onboarding prototype
+- Wire `SelectEmployees` into `TimeOffFlow` and add E2E tests
+- Add `SelectEmployees` container for holiday pay policies (SDK-567)
+- Add `SelectEmployees` container for time-off/sick policies (SDK-565)
+- Wire `PolicySettings` into `TimeOff` state machine (SDK-579)
+- Add `SelectEmployees` presentational component (SDK-563)
+
+### Fixes
+
+- Remove duplicate `SelectEmployees` container story
+- Show full state names in state selects (I-9 preparer and home address)
+- Improve contractor form layout and typography consistency
+- Remove italic styling and normalize text size in company address list
+- Remove default garnishment selection in deductions form
+- Add `isWithinBox` support to `DataCards`
+- Respect set-only contract for mailing/filing address flags (SDK-169)
+
+### Chores & Maintenance
+
+- Bump various dependencies (pixelmatch, eslint-plugin-storybook, @storybook/react-vite, msw, axe-core)
+- Add empty sidebar categories for upcoming design prototypes
+
 ## 0.42.0
 
 ### Features & Enhancements

package/README.md

@@ -8,15 +8,19 @@ To install:
 npm add @gusto/embedded-react-sdk
 ```
 
-Examples at:
+## SDK Dev App
 
-https://codesandbox.io/p/sandbox/gusto-embedded-sdk-demo-employeelist-nzpslw
+A standalone development application for building and testing SDK components with live API data is available in [`sdk-app/`](sdk-app/). To get started:
 
-## Documentation
+```bash
+npm run sdk-app              # Demo environment (default)
+npm run sdk-app:staging      # Staging environment
+```
 
-Live documentation is available at: https://docs.gusto.com/embedded-payroll/docs/what-is-the-gep-react-sdk
+See the [SDK Dev App README](sdk-app/README.md) for full setup and usage details.
+
+## Documentation
 
-- [What is the GEP React SDK](docs/what-is-the-gep-react-sdk.md)
 - [Deciding to build with the SDK](docs/deciding-to-build-with-the-sdk/deciding-to-build-with-the-sdk.md)
   - [Build Pathways - SDK, Flows & APIs](docs/deciding-to-build-with-the-sdk/build-pathways-sdk-flows-api.md)
   - [Component Types](docs/deciding-to-build-with-the-sdk/component-types.md)
@@ -33,6 +37,8 @@ Live documentation is available at: https://docs.gusto.com/embedded-payroll/docs
   - [Routing](docs/integration-guide/routing.md)
   - [Request Interceptors](docs/integration-guide/request-interceptors.md)
   - [Customizing SDK UI](docs/integration-guide/customizing-sdk-ui.md)
+  - [Observability](docs/integration-guide/observability.md)
+  - [Observability Examples](docs/integration-guide/observability-examples.md)
 - [Theming](docs/theming/theming.md)
   - [Theming Guide](docs/theming/theming-guide.md)
   - [Theme Variables](docs/theming/theme-variables.md)
@@ -42,11 +48,19 @@ Live documentation is available at: https://docs.gusto.com/embedded-payroll/docs
   - [Setting up your Component Adapter](docs/component-adapter/setting-up-your-component-adapter.md)
   - [Component Inventory](docs/component-adapter/component-inventory.md)
   - [Component Adapter FAQ](docs/component-adapter/component-adapter-faq.md)
+- [Reference](docs/reference/endpoint-reference.md)
+  - [Endpoint Reference](docs/reference/endpoint-reference.md)
+  - [Jobs and Compensations](docs/reference/jobs-and-compensations.md)
+  - [Proxy Examples](docs/reference/proxy-examples.md)
 - [Workflows Overview](docs/workflows-overview/workflows-overview.md)
   - [Company Onboarding](docs/workflows-overview/company-onboarding.md)
   - [Contractor Onboarding](docs/workflows-overview/contractor-onboarding.md)
+  - [Contractor Payments](docs/workflows-overview/contractor-payments.md)
   - [Employee Onboarding](docs/workflows-overview/employee-onboarding/employee-onboarding.md)
     - [Employee Self-Onboarding](docs/workflows-overview/employee-onboarding/employee-self-onboarding.md)
+  - [Employee Dashboard](docs/workflows-overview/employee-dashboard.md)
+  - [Employee Termination](docs/workflows-overview/employee-termination.md)
+  - [Information Requests](docs/workflows-overview/information-requests.md)
   - [Run Payroll](docs/workflows-overview/run-payroll.md)
   - [Off-Cycle Payroll (Bonus & Correction)](docs/workflows-overview/off-cycle-payroll.md)
   - [Dismissal Payroll](docs/workflows-overview/dismissal-payroll.md)
@@ -54,4 +68,8 @@ Live documentation is available at: https://docs.gusto.com/embedded-payroll/docs
 - [Hooks (Experimental)](docs/hooks/hooks.md)
   - [useEmployeeDetailsForm](docs/hooks/useEmployeeDetailsForm.md)
   - [useCompensationForm](docs/hooks/useCompensationForm.md)
+  - [useFederalTaxesForm](docs/hooks/useFederalTaxesForm.md)
+  - [usePayScheduleForm](docs/hooks/usePayScheduleForm.md)
+  - [useSignCompanyForm](docs/hooks/useSignCompanyForm.md)
+  - [useSignEmployeeForm](docs/hooks/useSignEmployeeForm.md)
   - [useWorkAddressForm](docs/hooks/useWorkAddressForm.md)

package/dist/assets/icons/edit-02.svg.js

@@ -0,0 +1,10 @@
+import * as e from "react";
+const n = ({
+  title: t,
+  titleId: r,
+  ...o
+}) => /* @__PURE__ */ e.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", 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: "M14.9999 8.33228L11.6666 4.99895M2.08325 17.9156L4.90356 17.6023C5.24813 17.564 5.42042 17.5448 5.58146 17.4927C5.72433 17.4464 5.86029 17.3811 5.98566 17.2984C6.12696 17.2052 6.24954 17.0827 6.49469 16.8375L17.4999 5.83228C18.4204 4.91181 18.4204 3.41942 17.4999 2.49895C16.5795 1.57848 15.0871 1.57847 14.1666 2.49895L3.16136 13.5042C2.91621 13.7493 2.79363 13.8719 2.70045 14.0132C2.61778 14.1386 2.55243 14.2745 2.50618 14.4174C2.45405 14.5784 2.43491 14.7507 2.39662 15.0953L2.08325 17.9156Z", stroke: "currentColor", strokeWidth: 1.66667, strokeLinecap: "round", strokeLinejoin: "round" }));
+export {
+  n as default
+};
+//# sourceMappingURL=edit-02.svg.js.map

package/dist/assets/icons/edit-02.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit-02.svg.js","sources":["../../../src/assets/icons/edit-02.svg?react"],"sourcesContent":["import * as React from \"react\";\nconst SvgEdit02 = ({\n  title,\n  titleId,\n  ...props\n}) => /* @__PURE__ */ React.createElement(\"svg\", { width: 20, height: 20, viewBox: \"0 0 20 20\", fill: \"none\", 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: \"M14.9999 8.33228L11.6666 4.99895M2.08325 17.9156L4.90356 17.6023C5.24813 17.564 5.42042 17.5448 5.58146 17.4927C5.72433 17.4464 5.86029 17.3811 5.98566 17.2984C6.12696 17.2052 6.24954 17.0827 6.49469 16.8375L17.4999 5.83228C18.4204 4.91181 18.4204 3.41942 17.4999 2.49895C16.5795 1.57848 15.0871 1.57847 14.1666 2.49895L3.16136 13.5042C2.91621 13.7493 2.79363 13.8719 2.70045 14.0132C2.61778 14.1386 2.55243 14.2745 2.50618 14.4174C2.45405 14.5784 2.43491 14.7507 2.39662 15.0953L2.08325 17.9156Z\", stroke: \"currentColor\", strokeWidth: 1.66667, strokeLinecap: \"round\", strokeLinejoin: \"round\" }));\nexport default SvgEdit02;\n"],"names":["SvgEdit02","title","titleId","props","React"],"mappings":";AACK,MAACA,IAAY,CAAC;AAAA,EACjB,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MAAsB,gBAAAC,EAAM,cAAc,OAAO,EAAE,OAAO,IAAI,QAAQ,IAAI,SAAS,aAAa,MAAM,QAAQ,OAAO,8BAA8B,mBAAmBF,GAAS,GAAGC,EAAK,GAAIF,IAAwB,gBAAAG,EAAM,cAAc,SAAS,EAAE,IAAIF,KAAWD,CAAK,IAAI,MAAsB,gBAAAG,EAAM,cAAc,QAAQ,EAAE,GAAG,ofAAof,QAAQ,gBAAgB,aAAa,SAAS,eAAe,SAAS,gBAAgB,SAAS,CAAC;"}

package/dist/assets/icons/search-lg.svg.js

@@ -0,0 +1,10 @@
+import * as e from "react";
+const n = ({
+  title: t,
+  titleId: r,
+  ...o
+}) => /* @__PURE__ */ e.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", 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: "M17.5 17.5L14.5834 14.5833M16.6667 9.58333C16.6667 13.4954 13.4954 16.6667 9.58333 16.6667C5.67132 16.6667 2.5 13.4954 2.5 9.58333C2.5 5.67132 5.67132 2.5 9.58333 2.5C13.4954 2.5 16.6667 5.67132 16.6667 9.58333Z", stroke: "currentColor", strokeWidth: 1.66667, strokeLinecap: "round", strokeLinejoin: "round" }));
+export {
+  n as default
+};
+//# sourceMappingURL=search-lg.svg.js.map

package/dist/assets/icons/search-lg.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-lg.svg.js","sources":["../../../src/assets/icons/search-lg.svg?react"],"sourcesContent":["import * as React from \"react\";\nconst SvgSearchLg = ({\n  title,\n  titleId,\n  ...props\n}) => /* @__PURE__ */ React.createElement(\"svg\", { width: 20, height: 20, viewBox: \"0 0 20 20\", fill: \"none\", 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: \"M17.5 17.5L14.5834 14.5833M16.6667 9.58333C16.6667 13.4954 13.4954 16.6667 9.58333 16.6667C5.67132 16.6667 2.5 13.4954 2.5 9.58333C2.5 5.67132 5.67132 2.5 9.58333 2.5C13.4954 2.5 16.6667 5.67132 16.6667 9.58333Z\", stroke: \"currentColor\", strokeWidth: 1.66667, strokeLinecap: \"round\", strokeLinejoin: \"round\" }));\nexport default SvgSearchLg;\n"],"names":["SvgSearchLg","title","titleId","props","React"],"mappings":";AACK,MAACA,IAAc,CAAC;AAAA,EACnB,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MAAsB,gBAAAC,EAAM,cAAc,OAAO,EAAE,OAAO,IAAI,QAAQ,IAAI,SAAS,aAAa,MAAM,QAAQ,OAAO,8BAA8B,mBAAmBF,GAAS,GAAGC,EAAK,GAAIF,IAAwB,gBAAAG,EAAM,cAAc,SAAS,EAAE,IAAIF,KAAWD,CAAK,IAAI,MAAsB,gBAAAG,EAAM,cAAc,QAAQ,EAAE,GAAG,uNAAuN,QAAQ,gBAAgB,aAAa,SAAS,eAAe,SAAS,gBAAgB,SAAS,CAAC;"}

package/dist/components/Base/Base.js

@@ -7,12 +7,13 @@ import { FadeIn as I } from "../Common/FadeIn/FadeIn.js";
 import { BaseContext as R } from "./useBase.js";
 import { useBaseSubmit as x } from "./useBaseSubmit.js";
 import { componentEvents as D } from "../../shared/constants.js";
+import "classnames";
 import { InternalError as f } from "../Common/InternalError/InternalError.js";
 import { useComponentContext as g } from "../../contexts/ComponentAdapter/useComponentContext.js";
 import { useLoadingIndicator as d } from "../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
 import { useObservability as E } from "../../contexts/ObservabilityProvider/useObservability.js";
 import { normalizeToSDKError as F } from "../../types/sdkError.js";
-const $ = ({
+const N = ({
   children: r,
   FallbackComponent: t = f,
   LoaderComponent: s,
@@ -141,7 +142,7 @@ const _ = ({
 ) });
 export {
   _ as BaseBoundaries,
-  $ as BaseComponent,
+  N as BaseComponent,
   j as BaseLayout
 };
 //# 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, ErrorInfo } from 'react'\nimport { Suspense, useEffect, useRef } from 'react'\nimport type { FallbackProps } from 'react-error-boundary'\nimport { ErrorBoundary } from 'react-error-boundary'\nimport { useTranslation } from 'react-i18next'\nimport { QueryErrorResetBoundary } from '@tanstack/react-query'\nimport { FadeIn } from '../Common/FadeIn/FadeIn'\nimport { BaseContext, type OnEventType } from './useBase'\nimport { useBaseSubmit } from './useBaseSubmit'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport { InternalError } from '@/components/Common'\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'\nimport { useObservability } from '@/contexts/ObservabilityProvider/useObservability'\nimport { normalizeToSDKError, type SDKError } from '@/types/sdkError'\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\nexport interface BaseComponentInterface<\n  TResourceKey extends keyof Resources = keyof Resources,\n> extends CommonComponentInterface<TResourceKey> {\n  FallbackComponent?: BaseBoundariesProps['FallbackComponent']\n  LoaderComponent?: LoadingIndicatorContextProps['LoadingIndicator']\n  onEvent: OnEventType<EventType, unknown>\n}\n\ninterface InternalBaseComponentProps {\n  componentName?: string\n}\n\nexport const BaseComponent = <TResourceKey extends keyof Resources = keyof Resources>({\n  children,\n  FallbackComponent = InternalError,\n  LoaderComponent: LoadingIndicatorFromProps,\n  onEvent,\n  componentName,\n}: BaseComponentInterface<TResourceKey> & InternalBaseComponentProps) => {\n  const { error, baseSubmitHandler, setError } = useBaseSubmit(componentName)\n  const { observability } = useObservability()\n\n  const { LoadingIndicator: LoadingIndicatorFromContext } = useLoadingIndicator()\n  const LoaderComponent = LoadingIndicatorFromProps ?? LoadingIndicatorFromContext\n\n  const onErrorBoundaryError = (boundaryError: unknown, errorInfo: ErrorInfo) => {\n    onEvent(componentEvents.ERROR, boundaryError)\n\n    const sdkError = normalizeToSDKError(boundaryError)\n\n    observability?.onError?.({\n      ...sdkError,\n      timestamp: Date.now(),\n      componentName,\n      componentStack: errorInfo.componentStack ?? undefined,\n    })\n  }\n\n  return (\n    <BaseContext.Provider\n      value={{\n        error,\n        setError,\n        onEvent,\n        baseSubmitHandler,\n        LoadingIndicator: LoaderComponent,\n        componentName,\n      }}\n    >\n      <BaseBoundaries\n        FallbackComponent={FallbackComponent}\n        onErrorBoundaryError={onErrorBoundaryError}\n        componentName={componentName}\n      >\n        <BaseLayout error={error}>{children}</BaseLayout>\n      </BaseBoundaries>\n    </BaseContext.Provider>\n  )\n}\n\nexport interface BaseLayoutProps {\n  children?: ReactNode\n  error?: SDKError | SDKError[] | null\n  isLoading?: boolean\n}\n\nfunction SingleErrorContent({ error }: { error: SDKError }) {\n  const Components = useComponentContext()\n  const { t } = useTranslation()\n  const hasFieldErrors = error.fieldErrors.length > 0\n\n  return (\n    <Components.Alert label={t('status.errorEncountered')} status=\"error\">\n      {hasFieldErrors && (\n        <Components.UnorderedList\n          items={error.fieldErrors\n            .filter(fieldError => fieldError.message)\n            .map(fieldError => (\n              <span key={fieldError.field}>{fieldError.message}</span>\n            ))}\n        />\n      )}\n      {!hasFieldErrors && error.category === 'validation_error' && (\n        <Components.Text as=\"pre\">\n          {error.raw &&\n          typeof error.raw === 'object' &&\n          'pretty' in error.raw &&\n          typeof (error.raw as { pretty: unknown }).pretty === 'function'\n            ? (error.raw as { pretty: () => string }).pretty()\n            : error.message}\n        </Components.Text>\n      )}\n      {!hasFieldErrors && error.category !== 'validation_error' && (\n        <Components.Text>{error.message || t('errors.unknownError')}</Components.Text>\n      )}\n    </Components.Alert>\n  )\n}\n\nfunction MultipleErrorsContent({ errors }: { errors: SDKError[] }) {\n  const Components = useComponentContext()\n  const { t } = useTranslation()\n\n  return (\n    <Components.Alert label={t('status.multipleErrorsEncountered')} status=\"error\">\n      <Components.UnorderedList\n        items={errors\n          .filter(error => error.message || error.fieldErrors.length > 0)\n          .map((error, index) => {\n            const visibleFieldErrors = error.fieldErrors.filter(fieldError => fieldError.message)\n\n            if (visibleFieldErrors.length === 0) {\n              return <span key={index}>{error.message || t('errors.unknownError')}</span>\n            }\n\n            return (\n              <span key={index}>\n                {error.message || t('errors.unknownError')}\n                <Components.UnorderedList\n                  items={visibleFieldErrors.map(fieldError => (\n                    <span key={fieldError.field}>{fieldError.message}</span>\n                  ))}\n                />\n              </span>\n            )\n          })}\n      />\n    </Components.Alert>\n  )\n}\n\nexport const BaseLayout = ({ children, error, isLoading }: BaseLayoutProps) => {\n  const { LoadingIndicator } = useLoadingIndicator()\n\n  const errors = Array.isArray(error) ? error : error ? [error] : []\n  const hasErrors = errors.length > 0\n\n  if (isLoading && !hasErrors) {\n    return <LoadingIndicator />\n  }\n\n  const [firstError] = errors\n\n  return (\n    <FadeIn>\n      {errors.length > 1 && <MultipleErrorsContent errors={errors} />}\n      {errors.length === 1 && firstError && <SingleErrorContent error={firstError} />}\n      {children}\n    </FadeIn>\n  )\n}\n\ninterface LoaderWithMetricsProps {\n  LoaderComponent: LoadingIndicatorContextProps['LoadingIndicator']\n  observability: ReturnType<typeof useObservability>['observability']\n  componentName?: string\n}\n\nconst LoaderWithMetrics = ({\n  LoaderComponent,\n  observability,\n  componentName,\n}: LoaderWithMetricsProps) => {\n  const loadingStartTime = useRef(Date.now())\n  const observabilityRef = useRef(observability)\n  const componentNameRef = useRef(componentName)\n\n  useEffect(() => {\n    observabilityRef.current = observability\n    componentNameRef.current = componentName\n  }, [observability, componentName])\n\n  useEffect(() => {\n    return () => {\n      const duration = Date.now() - loadingStartTime.current\n      observabilityRef.current?.onMetric?.({\n        name: 'sdk.component.loading_duration',\n        value: duration,\n        unit: 'ms',\n        tags: componentNameRef.current ? { component: componentNameRef.current } : undefined,\n        timestamp: Date.now(),\n      })\n    }\n  }, [])\n\n  return <LoaderComponent />\n}\n\nfunction SuspenseFallback({ componentName }: { componentName?: string }) {\n  const { LoadingIndicator } = useLoadingIndicator()\n  const { observability } = useObservability()\n  return (\n    <LoaderWithMetrics\n      LoaderComponent={LoadingIndicator}\n      observability={observability}\n      componentName={componentName}\n    />\n  )\n}\n\nexport interface BaseBoundariesProps {\n  children?: ReactNode\n  FallbackComponent?: (props: FallbackProps) => JSX.Element\n  onErrorBoundaryError?: (error: unknown, info: ErrorInfo) => void\n  componentName?: string\n}\n\nexport const BaseBoundaries = ({\n  children,\n  FallbackComponent = InternalError,\n  onErrorBoundaryError,\n  componentName,\n}: BaseBoundariesProps) => {\n  return (\n    <QueryErrorResetBoundary>\n      {({ reset: resetQueries }) => (\n        <ErrorBoundary\n          FallbackComponent={FallbackComponent}\n          onReset={resetQueries}\n          onError={onErrorBoundaryError}\n        >\n          <Suspense fallback={<SuspenseFallback componentName={componentName} />}>\n            {children}\n          </Suspense>\n        </ErrorBoundary>\n      )}\n    </QueryErrorResetBoundary>\n  )\n}\n"],"names":["BaseComponent","children","FallbackComponent","InternalError","LoadingIndicatorFromProps","onEvent","componentName","error","baseSubmitHandler","setError","useBaseSubmit","observability","useObservability","LoadingIndicatorFromContext","useLoadingIndicator","LoaderComponent","onErrorBoundaryError","boundaryError","errorInfo","componentEvents","sdkError","normalizeToSDKError","jsx","BaseContext","BaseBoundaries","BaseLayout","SingleErrorContent","Components","useComponentContext","t","useTranslation","hasFieldErrors","jsxs","fieldError","MultipleErrorsContent","errors","index","visibleFieldErrors","isLoading","LoadingIndicator","hasErrors","firstError","FadeIn","LoaderWithMetrics","loadingStartTime","useRef","observabilityRef","componentNameRef","useEffect","duration","SuspenseFallback","QueryErrorResetBoundary","resetQueries","ErrorBoundary","Suspense"],"mappings":"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"}
+{"version":3,"file":"Base.js","sources":["../../../src/components/Base/Base.tsx"],"sourcesContent":["import type { ReactNode, JSX, ErrorInfo } from 'react'\nimport { Suspense, useEffect, useRef } from 'react'\nimport type { FallbackProps } from 'react-error-boundary'\nimport { ErrorBoundary } from 'react-error-boundary'\nimport { useTranslation } from 'react-i18next'\nimport { QueryErrorResetBoundary } from '@tanstack/react-query'\nimport { FadeIn } from '../Common/FadeIn/FadeIn'\nimport { BaseContext, type OnEventType } from './useBase'\nimport { useBaseSubmit } from './useBaseSubmit'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport { InternalError } from '@/components/Common'\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'\nimport { useObservability } from '@/contexts/ObservabilityProvider/useObservability'\nimport { normalizeToSDKError, type SDKError } from '@/types/sdkError'\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\nexport interface BaseComponentInterface<\n  TResourceKey extends keyof Resources = keyof Resources,\n> extends CommonComponentInterface<TResourceKey> {\n  FallbackComponent?: BaseBoundariesProps['FallbackComponent']\n  LoaderComponent?: LoadingIndicatorContextProps['LoadingIndicator']\n  onEvent: OnEventType<EventType, unknown>\n}\n\ninterface InternalBaseComponentProps {\n  componentName?: string\n}\n\nexport const BaseComponent = <TResourceKey extends keyof Resources = keyof Resources>({\n  children,\n  FallbackComponent = InternalError,\n  LoaderComponent: LoadingIndicatorFromProps,\n  onEvent,\n  componentName,\n}: BaseComponentInterface<TResourceKey> & InternalBaseComponentProps) => {\n  const { error, baseSubmitHandler, setError } = useBaseSubmit(componentName)\n  const { observability } = useObservability()\n\n  const { LoadingIndicator: LoadingIndicatorFromContext } = useLoadingIndicator()\n  const LoaderComponent = LoadingIndicatorFromProps ?? LoadingIndicatorFromContext\n\n  const onErrorBoundaryError = (boundaryError: unknown, errorInfo: ErrorInfo) => {\n    onEvent(componentEvents.ERROR, boundaryError)\n\n    const sdkError = normalizeToSDKError(boundaryError)\n\n    observability?.onError?.({\n      ...sdkError,\n      timestamp: Date.now(),\n      componentName,\n      componentStack: errorInfo.componentStack ?? undefined,\n    })\n  }\n\n  return (\n    <BaseContext.Provider\n      value={{\n        error,\n        setError,\n        onEvent,\n        baseSubmitHandler,\n        LoadingIndicator: LoaderComponent,\n        componentName,\n      }}\n    >\n      <BaseBoundaries\n        FallbackComponent={FallbackComponent}\n        onErrorBoundaryError={onErrorBoundaryError}\n        componentName={componentName}\n      >\n        <BaseLayout error={error}>{children}</BaseLayout>\n      </BaseBoundaries>\n    </BaseContext.Provider>\n  )\n}\n\nexport interface BaseLayoutProps {\n  children?: ReactNode\n  error?: SDKError | SDKError[] | null\n  isLoading?: boolean\n}\n\nfunction SingleErrorContent({ error }: { error: SDKError }) {\n  const Components = useComponentContext()\n  const { t } = useTranslation()\n  const hasFieldErrors = error.fieldErrors.length > 0\n\n  return (\n    <Components.Alert label={t('status.errorEncountered')} status=\"error\">\n      {hasFieldErrors && (\n        <Components.UnorderedList\n          items={error.fieldErrors\n            .filter(fieldError => fieldError.message)\n            .map(fieldError => (\n              <span key={fieldError.field}>{fieldError.message}</span>\n            ))}\n        />\n      )}\n      {!hasFieldErrors && error.category === 'validation_error' && (\n        <Components.Text as=\"pre\">\n          {error.raw &&\n          typeof error.raw === 'object' &&\n          'pretty' in error.raw &&\n          typeof (error.raw as { pretty: unknown }).pretty === 'function'\n            ? (error.raw as { pretty: () => string }).pretty()\n            : error.message}\n        </Components.Text>\n      )}\n      {!hasFieldErrors && error.category !== 'validation_error' && (\n        <Components.Text>{error.message || t('errors.unknownError')}</Components.Text>\n      )}\n    </Components.Alert>\n  )\n}\n\nfunction MultipleErrorsContent({ errors }: { errors: SDKError[] }) {\n  const Components = useComponentContext()\n  const { t } = useTranslation()\n\n  return (\n    <Components.Alert label={t('status.multipleErrorsEncountered')} status=\"error\">\n      <Components.UnorderedList\n        items={errors\n          .filter(error => error.message || error.fieldErrors.length > 0)\n          .map((error, index) => {\n            const visibleFieldErrors = error.fieldErrors.filter(fieldError => fieldError.message)\n\n            if (visibleFieldErrors.length === 0) {\n              return <span key={index}>{error.message || t('errors.unknownError')}</span>\n            }\n\n            return (\n              <span key={index}>\n                {error.message || t('errors.unknownError')}\n                <Components.UnorderedList\n                  items={visibleFieldErrors.map(fieldError => (\n                    <span key={fieldError.field}>{fieldError.message}</span>\n                  ))}\n                />\n              </span>\n            )\n          })}\n      />\n    </Components.Alert>\n  )\n}\n\nexport const BaseLayout = ({ children, error, isLoading }: BaseLayoutProps) => {\n  const { LoadingIndicator } = useLoadingIndicator()\n\n  const errors = Array.isArray(error) ? error : error ? [error] : []\n  const hasErrors = errors.length > 0\n\n  if (isLoading && !hasErrors) {\n    return <LoadingIndicator />\n  }\n\n  const [firstError] = errors\n\n  return (\n    <FadeIn>\n      {errors.length > 1 && <MultipleErrorsContent errors={errors} />}\n      {errors.length === 1 && firstError && <SingleErrorContent error={firstError} />}\n      {children}\n    </FadeIn>\n  )\n}\n\ninterface LoaderWithMetricsProps {\n  LoaderComponent: LoadingIndicatorContextProps['LoadingIndicator']\n  observability: ReturnType<typeof useObservability>['observability']\n  componentName?: string\n}\n\nconst LoaderWithMetrics = ({\n  LoaderComponent,\n  observability,\n  componentName,\n}: LoaderWithMetricsProps) => {\n  const loadingStartTime = useRef(Date.now())\n  const observabilityRef = useRef(observability)\n  const componentNameRef = useRef(componentName)\n\n  useEffect(() => {\n    observabilityRef.current = observability\n    componentNameRef.current = componentName\n  }, [observability, componentName])\n\n  useEffect(() => {\n    return () => {\n      const duration = Date.now() - loadingStartTime.current\n      observabilityRef.current?.onMetric?.({\n        name: 'sdk.component.loading_duration',\n        value: duration,\n        unit: 'ms',\n        tags: componentNameRef.current ? { component: componentNameRef.current } : undefined,\n        timestamp: Date.now(),\n      })\n    }\n  }, [])\n\n  return <LoaderComponent />\n}\n\nfunction SuspenseFallback({ componentName }: { componentName?: string }) {\n  const { LoadingIndicator } = useLoadingIndicator()\n  const { observability } = useObservability()\n  return (\n    <LoaderWithMetrics\n      LoaderComponent={LoadingIndicator}\n      observability={observability}\n      componentName={componentName}\n    />\n  )\n}\n\nexport interface BaseBoundariesProps {\n  children?: ReactNode\n  FallbackComponent?: (props: FallbackProps) => JSX.Element\n  onErrorBoundaryError?: (error: unknown, info: ErrorInfo) => void\n  componentName?: string\n}\n\nexport const BaseBoundaries = ({\n  children,\n  FallbackComponent = InternalError,\n  onErrorBoundaryError,\n  componentName,\n}: BaseBoundariesProps) => {\n  return (\n    <QueryErrorResetBoundary>\n      {({ reset: resetQueries }) => (\n        <ErrorBoundary\n          FallbackComponent={FallbackComponent}\n          onReset={resetQueries}\n          onError={onErrorBoundaryError}\n        >\n          <Suspense fallback={<SuspenseFallback componentName={componentName} />}>\n            {children}\n          </Suspense>\n        </ErrorBoundary>\n      )}\n    </QueryErrorResetBoundary>\n  )\n}\n"],"names":["BaseComponent","children","FallbackComponent","InternalError","LoadingIndicatorFromProps","onEvent","componentName","error","baseSubmitHandler","setError","useBaseSubmit","observability","useObservability","LoadingIndicatorFromContext","useLoadingIndicator","LoaderComponent","onErrorBoundaryError","boundaryError","errorInfo","componentEvents","sdkError","normalizeToSDKError","jsx","BaseContext","BaseBoundaries","BaseLayout","SingleErrorContent","Components","useComponentContext","t","useTranslation","hasFieldErrors","jsxs","fieldError","MultipleErrorsContent","errors","index","visibleFieldErrors","isLoading","LoadingIndicator","hasErrors","firstError","FadeIn","LoaderWithMetrics","loadingStartTime","useRef","observabilityRef","componentNameRef","useEffect","duration","SuspenseFallback","QueryErrorResetBoundary","resetQueries","ErrorBoundary","Suspense"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
 import { useDataViewPropReturn, SelectionMode } from '../useDataView';
+import { TableProps } from '../../UI/Table/TableTypes';
 export type DataCardsProps<T> = {
     label: string;
     columns: useDataViewPropReturn<T>['columns'];
@@ -10,5 +11,6 @@ export type DataCardsProps<T> = {
     emptyState?: useDataViewPropReturn<T>['emptyState'];
     footer?: useDataViewPropReturn<T>['footer'];
     selectionMode?: SelectionMode;
+    isWithinBox?: TableProps['isWithinBox'];
 };
-export declare const DataCards: <T>({ label, data, columns, itemMenu, onSelect, onSelectAll, getIsItemSelected, emptyState, footer, selectionMode, }: DataCardsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataCards: <T>({ label, data, columns, itemMenu, onSelect, onSelectAll, getIsItemSelected, emptyState, footer, selectionMode, isWithinBox, }: DataCardsProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,73 +1,83 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { useId as w } from "react";
-import { useTranslation as D } from "react-i18next";
-import s from "./DataCards.module.scss.js";
-import { useSelectionState as T } from "../useSelectionState.js";
-import { Flex as b } from "../../Flex/Flex.js";
-import { useComponentContext as j } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-const O = ({
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useId as D } from "react";
+import T from "classnames";
+import { useTranslation as j } from "react-i18next";
+import a from "./DataCards.module.scss.js";
+import { useSelectionState as A } from "../useSelectionState.js";
+import { Flex as N } from "../../Flex/Flex.js";
+import { useComponentContext as H } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+const E = ({
   label: x,
-  data: o,
+  data: s,
   columns: h,
-  itemMenu: u,
+  itemMenu: p,
   onSelect: c,
   onSelectAll: g,
-  getIsItemSelected: d,
-  emptyState: p,
-  footer: f,
-  selectionMode: v = "multiple"
+  getIsItemSelected: m,
+  emptyState: f,
+  footer: v,
+  selectionMode: C = "multiple",
+  isWithinBox: d
 }) => {
-  const i = j(), { t: m } = D("common"), N = w(), { allSelected: L } = T(o, d), R = (l, n) => {
+  const o = H(), { t: u } = j("common"), w = D(), { allSelected: L } = A(s, m), R = (l, n) => {
     if (!c) return;
-    const r = d?.(l) ?? !1;
-    return v === "single" ? /* @__PURE__ */ e(
-      i.Radio,
+    const r = m?.(l) ?? !1;
+    return C === "single" ? /* @__PURE__ */ e(
+      o.Radio,
       {
-        name: N,
+        name: w,
         value: r,
         onChange: () => {
           c(l, !0);
         },
-        label: m("card.selectRowLabel"),
+        label: u("card.selectRowLabel"),
         shouldVisuallyHideLabel: !0
       }
     ) : /* @__PURE__ */ e(
-      i.Checkbox,
+      o.Checkbox,
       {
         value: r,
-        onChange: (t) => {
-          c(l, t);
+        onChange: (i) => {
+          c(l, i);
         },
-        label: m("card.selectRowLabel"),
+        label: u("card.selectRowLabel"),
         shouldVisuallyHideLabel: !0
       }
     );
   };
-  return /* @__PURE__ */ a("div", { "data-testid": "data-cards", children: [
-    c && d && v === "multiple" && o.length > 0 && /* @__PURE__ */ e("div", { className: s.selectAllRow, children: /* @__PURE__ */ e(
-      i.Checkbox,
+  return /* @__PURE__ */ t("div", { className: T(a.root, d && a.withinBox), "data-testid": "data-cards", children: [
+    c && m && C === "multiple" && s.length > 0 && /* @__PURE__ */ e("div", { className: a.selectAllRow, children: /* @__PURE__ */ e(
+      o.Checkbox,
       {
         value: L,
-        onChange: (l) => g?.(l, o),
-        label: m("card.selectAllRowsLabel")
+        onChange: (l) => g?.(l, s),
+        label: u("card.selectAllRowsLabel")
       }
     ) }),
-    /* @__PURE__ */ a("div", { role: "list", "aria-label": x, children: [
-      o.length === 0 && p && /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(i.Card, { children: p() }) }),
-      o.map((l, n) => /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(i.Card, { menu: u && u(l), action: R(l), children: h.map((r, t) => /* @__PURE__ */ a(b, { flexDirection: "column", gap: 0, children: [
-        r.title && /* @__PURE__ */ e("h5", { className: s.columnTitle, children: r.title }),
-        /* @__PURE__ */ a("div", { className: s.columnData, children: [
-          " ",
-          r.render ? r.render(l) : String(l[r.key])
-        ] })
-      ] }, t)) }) }, n)),
-      f && /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(i.Card, { children: (() => {
-        const l = f();
+    /* @__PURE__ */ t("div", { role: "list", "aria-label": x, children: [
+      s.length === 0 && f && /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(o.Card, { className: d ? a.flushCard : void 0, children: f() }) }),
+      s.map((l, n) => /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(
+        o.Card,
+        {
+          menu: p && p(l),
+          action: R(l),
+          className: d ? a.flushCard : void 0,
+          children: h.map((r, i) => /* @__PURE__ */ t(N, { flexDirection: "column", gap: 0, children: [
+            r.title && /* @__PURE__ */ e("h5", { className: a.columnTitle, children: r.title }),
+            /* @__PURE__ */ t("div", { className: a.columnData, children: [
+              " ",
+              r.render ? r.render(l) : String(l[r.key])
+            ] })
+          ] }, i))
+        }
+      ) }, n)),
+      v && /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(o.Card, { className: d ? a.flushCard : void 0, children: (() => {
+        const l = v();
         return Object.entries(l).map(([n, r]) => {
-          const t = n.startsWith("column-") ? parseInt(n.replace("column-", ""), 10) : -1, C = t >= 0 ? h[t]?.title : void 0;
-          return /* @__PURE__ */ a(b, { flexDirection: "column", gap: 0, children: [
-            C && /* @__PURE__ */ e("h5", { className: s.columnTitle, children: C }),
-            /* @__PURE__ */ e("div", { className: s.footerItem, children: r })
+          const i = n.startsWith("column-") ? parseInt(n.replace("column-", ""), 10) : -1, b = i >= 0 ? h[i]?.title : void 0;
+          return /* @__PURE__ */ t(N, { flexDirection: "column", gap: 0, children: [
+            b && /* @__PURE__ */ e("h5", { className: a.columnTitle, children: b }),
+            /* @__PURE__ */ e("div", { className: a.footerItem, children: r })
           ] }, n);
         });
       })() }) })
@@ -75,6 +85,6 @@ const O = ({
   ] });
 };
 export {
-  O as DataCards
+  E as DataCards
 };
 //# sourceMappingURL=DataCards.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataCards.js","sources":["../../../../../src/components/Common/DataView/DataCards/DataCards.tsx"],"sourcesContent":["import { useId } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport styles from './DataCards.module.scss'\nimport type { useDataViewPropReturn, SelectionMode } from '@/components/Common/DataView/useDataView'\nimport { useSelectionState } from '@/components/Common/DataView/useSelectionState'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport type DataCardsProps<T> = {\n  label: string\n  columns: useDataViewPropReturn<T>['columns']\n  data: useDataViewPropReturn<T>['data']\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: (item: T, checked: boolean) => void\n  onSelectAll?: (checked: boolean, visibleData: T[]) => void\n  getIsItemSelected?: (item: T) => boolean\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  footer?: useDataViewPropReturn<T>['footer']\n  selectionMode?: SelectionMode\n}\n\nexport const DataCards = <T,>({\n  label,\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  onSelectAll,\n  getIsItemSelected,\n  emptyState,\n  footer,\n  selectionMode = 'multiple',\n}: DataCardsProps<T>) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation('common')\n  const radioGroupName = useId()\n  const { allSelected } = useSelectionState(data, getIsItemSelected)\n\n  const renderAction = (item: T, index: number) => {\n    if (!onSelect) return undefined\n\n    const isSelected = getIsItemSelected?.(item) ?? false\n\n    if (selectionMode === 'single') {\n      return (\n        <Components.Radio\n          name={radioGroupName}\n          value={isSelected}\n          onChange={() => {\n            onSelect(item, true)\n          }}\n          label={t('card.selectRowLabel')}\n          shouldVisuallyHideLabel\n        />\n      )\n    }\n\n    return (\n      <Components.Checkbox\n        value={isSelected}\n        onChange={(checked: boolean) => {\n          onSelect(item, checked)\n        }}\n        label={t('card.selectRowLabel')}\n        shouldVisuallyHideLabel\n      />\n    )\n  }\n\n  return (\n    <div data-testid=\"data-cards\">\n      {onSelect && getIsItemSelected && selectionMode === 'multiple' && data.length > 0 && (\n        <div className={styles.selectAllRow}>\n          <Components.Checkbox\n            value={allSelected}\n            onChange={(checked: boolean) => onSelectAll?.(checked, data)}\n            label={t('card.selectAllRowsLabel')}\n          />\n        </div>\n      )}\n      <div role=\"list\" aria-label={label}>\n        {data.length === 0 && emptyState && (\n          <div role=\"listitem\">\n            <Components.Card>{emptyState()}</Components.Card>\n          </div>\n        )}\n        {data.map((item, index) => (\n          <div role=\"listitem\" key={index}>\n            <Components.Card menu={itemMenu && itemMenu(item)} action={renderAction(item, index)}>\n              {columns.map((column, colIndex) => (\n                <Flex key={colIndex} flexDirection=\"column\" gap={0}>\n                  {column.title && <h5 className={styles.columnTitle}>{column.title}</h5>}\n                  <div className={styles.columnData}>\n                    {' '}\n                    {column.render ? column.render(item) : String(item[column.key as keyof T])}\n                  </div>\n                </Flex>\n              ))}\n            </Components.Card>\n          </div>\n        ))}\n        {footer && (\n          <div role=\"listitem\">\n            <Components.Card>\n              {(() => {\n                const footerContent = footer()\n\n                return Object.entries(footerContent).map(([key, content]) => {\n                  const columnIndex = key.startsWith('column-')\n                    ? parseInt(key.replace('column-', ''), 10)\n                    : -1\n                  const columnTitle = columnIndex >= 0 ? columns[columnIndex]?.title : undefined\n\n                  return (\n                    <Flex key={key} flexDirection=\"column\" gap={0}>\n                      {columnTitle && <h5 className={styles.columnTitle}>{columnTitle}</h5>}\n                      <div className={styles.footerItem}>{content}</div>\n                    </Flex>\n                  )\n                })\n              })()}\n            </Components.Card>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":["DataCards","label","data","columns","itemMenu","onSelect","onSelectAll","getIsItemSelected","emptyState","footer","selectionMode","Components","useComponentContext","t","useTranslation","radioGroupName","useId","allSelected","useSelectionState","renderAction","item","index","isSelected","jsx","checked","jsxs","styles","column","colIndex","Flex","footerContent","key","content","columnIndex","columnTitle"],"mappings":"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"}
+{"version":3,"file":"DataCards.js","sources":["../../../../../src/components/Common/DataView/DataCards/DataCards.tsx"],"sourcesContent":["import { useId } from 'react'\nimport cn from 'classnames'\nimport { useTranslation } from 'react-i18next'\nimport styles from './DataCards.module.scss'\nimport type { useDataViewPropReturn, SelectionMode } from '@/components/Common/DataView/useDataView'\nimport type { TableProps } from '@/components/Common/UI/Table/TableTypes'\nimport { useSelectionState } from '@/components/Common/DataView/useSelectionState'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport type DataCardsProps<T> = {\n  label: string\n  columns: useDataViewPropReturn<T>['columns']\n  data: useDataViewPropReturn<T>['data']\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: (item: T, checked: boolean) => void\n  onSelectAll?: (checked: boolean, visibleData: T[]) => void\n  getIsItemSelected?: (item: T) => boolean\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  footer?: useDataViewPropReturn<T>['footer']\n  selectionMode?: SelectionMode\n  isWithinBox?: TableProps['isWithinBox']\n}\n\nexport const DataCards = <T,>({\n  label,\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  onSelectAll,\n  getIsItemSelected,\n  emptyState,\n  footer,\n  selectionMode = 'multiple',\n  isWithinBox,\n}: DataCardsProps<T>) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation('common')\n  const radioGroupName = useId()\n  const { allSelected } = useSelectionState(data, getIsItemSelected)\n\n  const renderAction = (item: T, index: number) => {\n    if (!onSelect) return undefined\n\n    const isSelected = getIsItemSelected?.(item) ?? false\n\n    if (selectionMode === 'single') {\n      return (\n        <Components.Radio\n          name={radioGroupName}\n          value={isSelected}\n          onChange={() => {\n            onSelect(item, true)\n          }}\n          label={t('card.selectRowLabel')}\n          shouldVisuallyHideLabel\n        />\n      )\n    }\n\n    return (\n      <Components.Checkbox\n        value={isSelected}\n        onChange={(checked: boolean) => {\n          onSelect(item, checked)\n        }}\n        label={t('card.selectRowLabel')}\n        shouldVisuallyHideLabel\n      />\n    )\n  }\n\n  return (\n    <div className={cn(styles.root, isWithinBox && styles.withinBox)} data-testid=\"data-cards\">\n      {onSelect && getIsItemSelected && selectionMode === 'multiple' && data.length > 0 && (\n        <div className={styles.selectAllRow}>\n          <Components.Checkbox\n            value={allSelected}\n            onChange={(checked: boolean) => onSelectAll?.(checked, data)}\n            label={t('card.selectAllRowsLabel')}\n          />\n        </div>\n      )}\n      <div role=\"list\" aria-label={label}>\n        {data.length === 0 && emptyState && (\n          <div role=\"listitem\">\n            <Components.Card className={isWithinBox ? styles.flushCard : undefined}>\n              {emptyState()}\n            </Components.Card>\n          </div>\n        )}\n        {data.map((item, index) => (\n          <div role=\"listitem\" key={index}>\n            <Components.Card\n              menu={itemMenu && itemMenu(item)}\n              action={renderAction(item, index)}\n              className={isWithinBox ? styles.flushCard : undefined}\n            >\n              {columns.map((column, colIndex) => (\n                <Flex key={colIndex} flexDirection=\"column\" gap={0}>\n                  {column.title && <h5 className={styles.columnTitle}>{column.title}</h5>}\n                  <div className={styles.columnData}>\n                    {' '}\n                    {column.render ? column.render(item) : String(item[column.key as keyof T])}\n                  </div>\n                </Flex>\n              ))}\n            </Components.Card>\n          </div>\n        ))}\n        {footer && (\n          <div role=\"listitem\">\n            <Components.Card className={isWithinBox ? styles.flushCard : undefined}>\n              {(() => {\n                const footerContent = footer()\n\n                return Object.entries(footerContent).map(([key, content]) => {\n                  const columnIndex = key.startsWith('column-')\n                    ? parseInt(key.replace('column-', ''), 10)\n                    : -1\n                  const columnTitle = columnIndex >= 0 ? columns[columnIndex]?.title : undefined\n\n                  return (\n                    <Flex key={key} flexDirection=\"column\" gap={0}>\n                      {columnTitle && <h5 className={styles.columnTitle}>{columnTitle}</h5>}\n                      <div className={styles.footerItem}>{content}</div>\n                    </Flex>\n                  )\n                })\n              })()}\n            </Components.Card>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":["DataCards","label","data","columns","itemMenu","onSelect","onSelectAll","getIsItemSelected","emptyState","footer","selectionMode","isWithinBox","Components","useComponentContext","t","useTranslation","radioGroupName","useId","allSelected","useSelectionState","renderAction","item","index","isSelected","jsx","checked","jsxs","cn","styles","column","colIndex","Flex","footerContent","key","content","columnIndex","columnTitle"],"mappings":"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"}

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

@@ -1,14 +1,20 @@
-const t = "_selectAllRow_17nzu_1", o = "_columnTitle_17nzu_5", l = "_columnData_17nzu_12", e = "_footerItem_17nzu_17", n = {
-  selectAllRow: t,
-  columnTitle: o,
-  columnData: l,
-  footerItem: e
+const o = "_root_102z1_1", t = "_withinBox_102z1_1", l = "_selectAllRow_102z1_1", _ = "_flushCard_102z1_4", e = "_columnTitle_102z1_19", c = "_columnData_102z1_26", n = "_footerItem_102z1_31", s = {
+  root: o,
+  withinBox: t,
+  selectAllRow: l,
+  flushCard: _,
+  columnTitle: e,
+  columnData: c,
+  footerItem: n
 };
 export {
-  l as columnData,
-  o as columnTitle,
-  n as default,
-  e as footerItem,
-  t as selectAllRow
+  c as columnData,
+  e as columnTitle,
+  s as default,
+  _ as flushCard,
+  n as footerItem,
+  o as root,
+  l as selectAllRow,
+  t as withinBox
 };
 //# sourceMappingURL=DataCards.module.scss.js.map

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

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