@gusto/embedded-react-sdk 0.38.0 → 0.40.0

package/CHANGELOG.md

@@ -1,5 +1,238 @@
 # Changelog
 
+## 0.40.0
+
+### Breaking Changes
+
+#### `composeSubmitHandler` now returns `{ handleSubmit, errorHandling }`
+
+`composeSubmitHandler` now returns an object with both the submit event handler
+and an aggregated `errorHandling` bag built from the forms it receives, instead
+of returning the submit handler directly. Partners who only need one shared error
+surface across multiple forms no longer have to call `composeErrorHandler`
+themselves.
+
+- **Before**: `const handleSubmit = composeSubmitHandler([formA, formB], onAllValid)`
+- **After**: `const { handleSubmit, errorHandling } = composeSubmitHandler([formA, formB], onAllValid)`
+
+For screens that also need to combine extra `@gusto/embedded-api` queries into
+the same error surface, pass the `composeSubmitHandler` result into
+`composeErrorHandler` alongside those queries:
+
+```tsx
+const submitResult = composeSubmitHandler([formA, formB], onAllValid)
+const errorHandling = composeErrorHandler([submitResult, extraQuery])
+```
+
+#### Hooks now exported from main entry point
+
+All form hooks have graduated from experimental to stable. They are now available
+directly from the main package entry:
+
+- **Before**: `import { useCompensationForm } from '@gusto/embedded-react-sdk/UNSTABLE_Hooks'`
+- **After**: `import { useCompensationForm } from '@gusto/embedded-react-sdk'`
+
+The `@gusto/embedded-react-sdk/UNSTABLE_Hooks` entry point has been removed. All hook
+exports are now available from the main package entry.
+
+**Find and replace**: Search your codebase for
+`from '@gusto/embedded-react-sdk/UNSTABLE_Hooks'`
+and replace with `from '@gusto/embedded-react-sdk'`.
+
+#### Prebuilt hook form components removed
+
+The following prebuilt components have been removed: `CompensationForm`,
+`EmployeeDetailsForm`, `WorkAddressForm`, `HomeAddressForm`, `PayScheduleForm`,
+`SignCompanyForm`, `SignEmployeeForm`, `SignEmployeeI9Form`. These were internal
+testing artifacts. Use the corresponding hooks directly (e.g., `useCompensationForm`)
+to build custom form UI.
+
+### Features & Enhancements
+
+#### Journey-based export namespaces
+
+Components are now organized into **journey-based namespaces** that group everything a partner needs for a specific integration use case. Three new namespaces are available:
+
+- **`EmployeeOnboarding`** -- all components for onboarding employees (flows, employee list, profile, compensation, taxes, payment method, deductions, documents, etc.)
+- **`EmployeeManagement`** -- components for steady-state employee management (employee list, dashboard, terminations, employee documents)
+- **`CompanyOnboarding`** -- all components for onboarding a company (flow, overview, document signing, bank account, locations, pay schedule, taxes, signatory management)
+- **`ContractorOnboarding`** -- all components for onboarding contractors (flow, contractor list, profile, address, payment method, new hire report, submit)
+
+```tsx
+// Recommended (journey namespace)
+import { EmployeeOnboarding } from '@gusto/embedded-react-sdk'
+;<EmployeeOnboarding.OnboardingFlow companyId={companyId} onEvent={handleEvent} />
+
+// Also works (journey namespace, management)
+import { EmployeeManagement } from '@gusto/embedded-react-sdk'
+;<EmployeeManagement.DashboardFlow employeeId={employeeId} onEvent={handleEvent} />
+
+// Also works (journey namespace, company)
+import { CompanyOnboarding } from '@gusto/embedded-react-sdk'
+;<CompanyOnboarding.OnboardingFlow companyId={companyId} onEvent={handleEvent} />
+
+// Also works (journey namespace, contractor)
+import { ContractorOnboarding } from '@gusto/embedded-react-sdk'
+;<ContractorOnboarding.OnboardingFlow companyId={companyId} onEvent={handleEvent} />
+```
+
+Each journey namespace is self-contained -- partners should not need to import from multiple namespaces to complete a single integration.
+
+### Deprecations
+
+#### `Employee.*`, `Company.*`, and `Contractor.*` umbrella namespaces
+
+The flat `Employee`, `Company`, and `Contractor` namespace exports are now **deprecated** in favor of the journey-based namespaces above. Existing imports continue to work without changes, but partners should migrate at their convenience:
+
+```tsx
+// Deprecated (still works)
+import { Employee } from '@gusto/embedded-react-sdk'
+;<Employee.OnboardingFlow companyId={companyId} onEvent={handleEvent} />
+
+// Recommended
+import { EmployeeOnboarding } from '@gusto/embedded-react-sdk'
+;<EmployeeOnboarding.OnboardingFlow companyId={companyId} onEvent={handleEvent} />
+```
+
+The `Employee`, `Company`, and `Contractor` umbrella namespaces will be removed in a future major version. The `Payroll` and `InformationRequests` namespaces are unaffected and remain the primary import path for those domains.
+
+#### `Employee.ManagementEmployeeList` removed
+
+`ManagementEmployeeList` is no longer exported from the `Employee` umbrella namespace. Use `EmployeeManagement.EmployeeList` instead:
+
+```tsx
+// Before
+import { Employee } from '@gusto/embedded-react-sdk'
+;<Employee.ManagementEmployeeList companyId={companyId} onEvent={handleEvent} />
+
+// After
+import { EmployeeManagement } from '@gusto/embedded-react-sdk'
+;<EmployeeManagement.EmployeeList companyId={companyId} onEvent={handleEvent} />
+```
+
+#### Internal restructuring: `EmployeeList` feature module
+
+The `Employee/EmployeeList/` directory has been restructured into a feature module layout (`Employee/employee-list/`) with `shared/`, `onboarding/`, and `management/` subdirectories. This is an internal change -- all public exports remain the same and no partner action is required.
+
+### Chores & Maintenance
+
+- Migrate Employee Profile to hook-based architecture
+
+## 0.39.0
+
+### Breaking Changes
+
+#### Box component adapter (`header`, `withPadding` props)
+
+The `Box` component now accepts a `header` prop (used for section titles and actions) and a `withPadding` prop. If you supply a custom **Box** via the [component adapter](./docs/component-adapter/component-adapter.md), update it to handle the new props:
+
+```tsx
+// Before
+Box: ({ children, footer, className }) => (
+  <div className={className}>
+    <div className="box-body">{children}</div>
+    {footer && <div className="box-footer">{footer}</div>}
+  </div>
+)
+
+// After
+Box: ({ children, header, footer, withPadding = true, className }) => (
+  <div className={className}>
+    {header && <div className="box-header">{header}</div>}
+    <div className="box-body" style={withPadding ? undefined : { padding: 0 }}>
+      {children}
+    </div>
+    {footer && <div className="box-footer">{footer}</div>}
+  </div>
+)
+```
+
+#### New `BoxHeader` component adapter
+
+A new **BoxHeader** component has been added to the component adapter. It renders a title, optional description, and optional action (e.g. an "Edit" button) inside `Box` headers. If you provide a custom component adapter, add a `BoxHeader` implementation:
+
+```tsx
+BoxHeader: ({ title, description, action, headingLevel = 'h3' }) => {
+  const Heading = headingLevel
+  return (
+    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+      <div>
+        <Heading>{title}</Heading>
+        {description && <p>{description}</p>}
+      </div>
+      {action && <div>{action}</div>}
+    </div>
+  )
+}
+```
+
+#### Table `variant` prop replaced with `isWithinBox`
+
+The Table component's `variant` prop has been replaced with `isWithinBox`. The SDK sets `isWithinBox={true}` on tables that are rendered inside a `Box` layout element, so your adapter can remove redundant borders, shadows, or background colors to avoid visual doubling. If you supply a custom **Table** via the component adapter, update your implementation:
+
+```tsx
+// Before: variant?: 'default' | 'minimal'
+Table: ({ variant = 'default', ...props }) => (
+  <table style={variant === 'minimal' ? { border: 'none' } : undefined} {...props} />
+)
+
+// After: isWithinBox?: boolean — true when the table is inside a Box
+Table: ({ isWithinBox = false, ...props }) => (
+  <table
+    style={
+      isWithinBox
+        ? { border: 'none', borderRadius: 0, boxShadow: 'none', background: 'transparent' }
+        : undefined
+    }
+    {...props}
+  />
+)
+```
+
+#### DescriptionList new `layout` and `showSeparators` props
+
+The `DescriptionList` component now accepts `layout` (`'stacked' | 'horizontal'`) and `showSeparators` (boolean) props. If you supply a custom **DescriptionList**, update it to handle these props for proper rendering in the Employee Dashboard and other views.
+
+### Features & Enhancements
+
+- Add Employee Dashboard component
+- Add Time Off policy management: PolicyList, SelectPolicyType, SelectHolidays, and PolicyConfigurationForm (presentation and functional components)
+- Wire PolicyConfigurationForm into TimeOff state machine
+- Add usePayScheduleForm unstable hook
+- Add useSignCompanyForm unstable hook
+- Add useSignEmployeeForm hook with I-9 preparer support
+- Add select-all header checkbox to DataView
+- Streamline schema composition with unified buildFormSchema pattern
+- Add holiday data helpers and i18n translations
+- Add full-screen token expired overlay with periodic health polling (SDK App)
+
+### Fixes
+
+- Fix table text styles in contractors and payroll
+- Fix date picker style improvements
+- Align datepicker styles with date range picker styles
+- Fix uncontrolled to controlled input warning
+- Fix minor style updates to popover and menu UI
+- Always show kebab menu in payroll list for consistent alignment
+- Dynamic payment processing copy based on company ACH speed
+- Use taxableAsScorp for Two Percent Shareholder visibility
+- Add spacing to file input wrapper for error message
+
+### Chores & Maintenance
+
+- Refactor Box to expose Header, Footer, Content as subcomponents
+- Migrate useWorkAddressForm and useEmployeeDetailsForm to buildFormSchema pattern
+- Move EmployeeTable to UNSTABLE_TimeOff/shared and remove TimeOffManagement
+- Remove legacy composeFormSchema, resolveRequiredFields, and deriveFieldsMetadata
+- Add tests and Storybook stories for PolicyList, SelectPolicyType, and PolicyConfigurationForm
+- Add component naming and organization RFC
+- Upgrade @gusto/embedded-api from 0.12.4 to 0.12.5
+- Upgrade react-aria-components from 1.13.0 to 1.16.0
+- Upgrade GitHub Actions to Node.js 24-compatible versions
+- Bump i18next from 26.0.3 to 26.0.4
+- Bump Storybook packages to 10.3.5
+- Bump various dev dependencies (vitest, msw, axios, typescript-eslint, ts-morph, prettier, dotenv, globals, and others)
+
 ## 0.38.0
 
 ### Features & Enhancements

package/dist/assets/icons/percent-circle.svg.js

@@ -0,0 +1,10 @@
+import * as e from "react";
+const i = ({
+  title: t,
+  titleId: l,
+  ...r
+}) => /* @__PURE__ */ e.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": l, ...r }, t ? /* @__PURE__ */ e.createElement("title", { id: l }, t) : null, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#clip0_425_425)" }, /* @__PURE__ */ e.createElement("path", { d: "M7.5 7.5H7.50834M12.5 12.5H12.5083M13.3333 6.66667L6.66667 13.3333M7.91667 7.5C7.91667 7.73012 7.73012 7.91667 7.5 7.91667C7.26989 7.91667 7.08334 7.73012 7.08334 7.5C7.08334 7.26988 7.26989 7.08333 7.5 7.08333C7.73012 7.08333 7.91667 7.26988 7.91667 7.5ZM12.9167 12.5C12.9167 12.7301 12.7301 12.9167 12.5 12.9167C12.2699 12.9167 12.0833 12.7301 12.0833 12.5C12.0833 12.2699 12.2699 12.0833 12.5 12.0833C12.7301 12.0833 12.9167 12.2699 12.9167 12.5ZM18.3333 10C18.3333 14.6024 14.6024 18.3333 10 18.3333C5.39763 18.3333 1.66667 14.6024 1.66667 10C1.66667 5.39763 5.39763 1.66667 10 1.66667C14.6024 1.66667 18.3333 5.39763 18.3333 10Z", stroke: "currentColor", strokeWidth: 1.66667, strokeLinecap: "round", strokeLinejoin: "round" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_425_425" }, /* @__PURE__ */ e.createElement("rect", { width: 20, height: 20, fill: "white" }))));
+export {
+  i as default
+};
+//# sourceMappingURL=percent-circle.svg.js.map

package/dist/assets/icons/percent-circle.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"percent-circle.svg.js","sources":["../../../src/assets/icons/percent-circle.svg?react"],"sourcesContent":["import * as React from \"react\";\nconst SvgPercentCircle = ({\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(\"g\", { clipPath: \"url(#clip0_425_425)\" }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M7.5 7.5H7.50834M12.5 12.5H12.5083M13.3333 6.66667L6.66667 13.3333M7.91667 7.5C7.91667 7.73012 7.73012 7.91667 7.5 7.91667C7.26989 7.91667 7.08334 7.73012 7.08334 7.5C7.08334 7.26988 7.26989 7.08333 7.5 7.08333C7.73012 7.08333 7.91667 7.26988 7.91667 7.5ZM12.9167 12.5C12.9167 12.7301 12.7301 12.9167 12.5 12.9167C12.2699 12.9167 12.0833 12.7301 12.0833 12.5C12.0833 12.2699 12.2699 12.0833 12.5 12.0833C12.7301 12.0833 12.9167 12.2699 12.9167 12.5ZM18.3333 10C18.3333 14.6024 14.6024 18.3333 10 18.3333C5.39763 18.3333 1.66667 14.6024 1.66667 10C1.66667 5.39763 5.39763 1.66667 10 1.66667C14.6024 1.66667 18.3333 5.39763 18.3333 10Z\", stroke: \"currentColor\", strokeWidth: 1.66667, strokeLinecap: \"round\", strokeLinejoin: \"round\" })), /* @__PURE__ */ React.createElement(\"defs\", null, /* @__PURE__ */ React.createElement(\"clipPath\", { id: \"clip0_425_425\" }, /* @__PURE__ */ React.createElement(\"rect\", { width: 20, height: 20, fill: \"white\" }))));\nexport default SvgPercentCircle;\n"],"names":["SvgPercentCircle","title","titleId","props","React"],"mappings":";AACK,MAACA,IAAmB,CAAC;AAAA,EACxB,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,KAAK,EAAE,UAAU,sBAAqB,GAAoB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,6nBAA6nB,QAAQ,gBAAgB,aAAa,SAAS,eAAe,SAAS,gBAAgB,QAAO,CAAE,CAAC,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,MAAsB,gBAAAA,EAAM,cAAc,YAAY,EAAE,IAAI,gBAAe,GAAoB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,OAAO,IAAI,QAAQ,IAAI,MAAM,QAAO,CAAE,CAAC,CAAC,CAAC;"}

package/dist/assets/icons/plus-circle.svg.js

@@ -3,7 +3,7 @@ const l = ({
   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: "M9.99984 6.66666V13.3333M6.6665 9.99999H13.3332M18.3332 9.99999C18.3332 14.6024 14.6022 18.3333 9.99984 18.3333C5.39746 18.3333 1.6665 14.6024 1.6665 9.99999C1.6665 5.39762 5.39746 1.66666 9.99984 1.66666C14.6022 1.66666 18.3332 5.39762 18.3332 9.99999Z", stroke: "#A4A7AE", strokeWidth: 1.66667, strokeLinecap: "round", strokeLinejoin: "round" }));
+}) => /* @__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: "M9.99984 6.66666V13.3333M6.6665 9.99999H13.3332M18.3332 9.99999C18.3332 14.6024 14.6022 18.3333 9.99984 18.3333C5.39746 18.3333 1.6665 14.6024 1.6665 9.99999C1.6665 5.39762 5.39746 1.66666 9.99984 1.66666C14.6022 1.66666 18.3332 5.39762 18.3332 9.99999Z", stroke: "currentColor", strokeWidth: 1.66667, strokeLinecap: "round", strokeLinejoin: "round" }));
 export {
   l as default
 };

package/dist/assets/icons/plus-circle.svg.js.map

@@ -1 +1 @@
-{"version":3,"file":"plus-circle.svg.js","sources":["../../../src/assets/icons/plus-circle.svg?react"],"sourcesContent":["import * as React from \"react\";\nconst SvgPlusCircle = ({\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: \"M9.99984 6.66666V13.3333M6.6665 9.99999H13.3332M18.3332 9.99999C18.3332 14.6024 14.6022 18.3333 9.99984 18.3333C5.39746 18.3333 1.6665 14.6024 1.6665 9.99999C1.6665 5.39762 5.39746 1.66666 9.99984 1.66666C14.6022 1.66666 18.3332 5.39762 18.3332 9.99999Z\", stroke: \"#A4A7AE\", strokeWidth: 1.66667, strokeLinecap: \"round\", strokeLinejoin: \"round\" }));\nexport default SvgPlusCircle;\n"],"names":["SvgPlusCircle","title","titleId","props","React"],"mappings":";AACK,MAACA,IAAgB,CAAC;AAAA,EACrB,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,iQAAiQ,QAAQ,WAAW,aAAa,SAAS,eAAe,SAAS,gBAAgB,SAAS,CAAC;"}
+{"version":3,"file":"plus-circle.svg.js","sources":["../../../src/assets/icons/plus-circle.svg?react"],"sourcesContent":["import * as React from \"react\";\nconst SvgPlusCircle = ({\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: \"M9.99984 6.66666V13.3333M6.6665 9.99999H13.3332M18.3332 9.99999C18.3332 14.6024 14.6022 18.3333 9.99984 18.3333C5.39746 18.3333 1.6665 14.6024 1.6665 9.99999C1.6665 5.39762 5.39746 1.66666 9.99984 1.66666C14.6022 1.66666 18.3332 5.39762 18.3332 9.99999Z\", stroke: \"currentColor\", strokeWidth: 1.66667, strokeLinecap: \"round\", strokeLinejoin: \"round\" }));\nexport default SvgPlusCircle;\n"],"names":["SvgPlusCircle","title","titleId","props","React"],"mappings":";AACK,MAACA,IAAgB,CAAC;AAAA,EACrB,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,iQAAiQ,QAAQ,gBAAgB,aAAa,SAAS,eAAe,SAAS,gBAAgB,SAAS,CAAC;"}

package/dist/components/Base/Base.js

@@ -7,13 +7,12 @@ 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 N = ({
+const $ = ({
   children: r,
   FallbackComponent: t = f,
   LoaderComponent: s,
@@ -142,7 +141,7 @@ const _ = ({
 ) });
 export {
   _ as BaseBoundaries,
-  N as BaseComponent,
+  $ 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,12 +1,14 @@
 import { useDataViewPropReturn, SelectionMode } from '../useDataView';
 export type DataCardsProps<T> = {
+    label: string;
     columns: useDataViewPropReturn<T>['columns'];
     data: useDataViewPropReturn<T>['data'];
     itemMenu?: useDataViewPropReturn<T>['itemMenu'];
-    onSelect?: useDataViewPropReturn<T>['onSelect'];
-    isItemSelected?: useDataViewPropReturn<T>['isItemSelected'];
+    onSelect?: (item: T, checked: boolean) => void;
+    onSelectAll?: (checked: boolean, visibleData: T[]) => void;
+    getIsItemSelected?: (item: T) => boolean;
     emptyState?: useDataViewPropReturn<T>['emptyState'];
     footer?: useDataViewPropReturn<T>['footer'];
     selectionMode?: SelectionMode;
 };
-export declare const DataCards: <T>({ data, columns, itemMenu, onSelect, isItemSelected, 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, }: DataCardsProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,67 +1,80 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { useId as N } from "react";
+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 a from "./DataCards.module.scss.js";
-import { Flex as C } from "../../Flex/Flex.js";
-import { useComponentContext as I } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-const V = ({
-  data: c,
-  columns: d,
-  itemMenu: m,
-  onSelect: s,
-  isItemSelected: v,
-  emptyState: u,
-  footer: h,
-  selectionMode: b = "multiple"
+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 = ({
+  label: x,
+  data: o,
+  columns: h,
+  itemMenu: u,
+  onSelect: c,
+  onSelectAll: g,
+  getIsItemSelected: d,
+  emptyState: p,
+  footer: f,
+  selectionMode: v = "multiple"
 }) => {
-  const i = I(), { t: p } = D("common"), x = N(), g = (r, t) => {
-    if (!s) return;
-    const l = v?.(r, t) ?? !1;
-    return b === "single" ? /* @__PURE__ */ e(
+  const i = j(), { t: m } = D("common"), N = w(), { allSelected: L } = T(o, d), R = (l, n) => {
+    if (!c) return;
+    const r = d?.(l) ?? !1;
+    return v === "single" ? /* @__PURE__ */ e(
       i.Radio,
       {
-        name: x,
-        value: l,
+        name: N,
+        value: r,
         onChange: () => {
-          s(r, !0);
+          c(l, !0);
         },
-        label: p("card.selectRowLabel"),
+        label: m("card.selectRowLabel"),
         shouldVisuallyHideLabel: !0
       }
     ) : /* @__PURE__ */ e(
       i.Checkbox,
       {
-        value: l,
-        onChange: (n) => {
-          s(r, n);
+        value: r,
+        onChange: (t) => {
+          c(l, t);
         },
-        label: p("card.selectRowLabel"),
+        label: m("card.selectRowLabel"),
         shouldVisuallyHideLabel: !0
       }
     );
   };
-  return /* @__PURE__ */ o("div", { role: "list", "data-testid": "data-cards", children: [
-    c.length === 0 && u && /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(i.Card, { children: u() }) }),
-    c.map((r, t) => /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(i.Card, { menu: m && m(r), action: g(r, t), children: d.map((l, n) => /* @__PURE__ */ o(C, { flexDirection: "column", gap: 0, children: [
-      l.title && /* @__PURE__ */ e("h5", { className: a.columnTitle, children: l.title }),
-      /* @__PURE__ */ o("div", { className: a.columnData, children: [
-        " ",
-        l.render ? l.render(r) : String(r[l.key])
-      ] })
-    ] }, n)) }) }, t)),
-    h && /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(i.Card, { children: (() => {
-      const r = h();
-      return Object.entries(r).map(([t, l]) => {
-        const n = t.startsWith("column-") ? parseInt(t.replace("column-", ""), 10) : -1, f = n >= 0 ? d[n]?.title : void 0;
-        return /* @__PURE__ */ o(C, { flexDirection: "column", gap: 0, children: [
-          f && /* @__PURE__ */ e("h5", { className: a.columnTitle, children: f }),
-          /* @__PURE__ */ e("div", { className: a.footerItem, children: l })
-        ] }, t);
-      });
-    })() }) })
+  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,
+      {
+        value: L,
+        onChange: (l) => g?.(l, o),
+        label: m("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();
+        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 })
+          ] }, n);
+        });
+      })() }) })
+    ] })
   ] });
 };
 export {
-  V as DataCards
+  O 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 { 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  isItemSelected?: useDataViewPropReturn<T>['isItemSelected']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  footer?: useDataViewPropReturn<T>['footer']\n  selectionMode?: SelectionMode\n}\n\nexport const DataCards = <T,>({\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  isItemSelected,\n  emptyState,\n  footer,\n  selectionMode = 'multiple',\n}: DataCardsProps<T>) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation('common')\n  const radioGroupName = useId()\n\n  const renderAction = (item: T, index: number) => {\n    if (!onSelect) return undefined\n\n    const isSelected = isItemSelected?.(item, index) ?? 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 role=\"list\" data-testid=\"data-cards\">\n      {data.length === 0 && emptyState && (\n        <div role=\"listitem\">\n          <Components.Card>{emptyState()}</Components.Card>\n        </div>\n      )}\n      {data.map((item, index) => (\n        <div role=\"listitem\" key={index}>\n          <Components.Card 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  )\n}\n"],"names":["DataCards","data","columns","itemMenu","onSelect","isItemSelected","emptyState","footer","selectionMode","Components","useComponentContext","t","useTranslation","radioGroupName","useId","renderAction","item","index","isSelected","jsx","checked","jsxs","column","colIndex","Flex","styles","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 { 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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"}

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

@@ -1,12 +1,14 @@
-const t = "_columnTitle_13axu_1", o = "_columnData_13axu_8", e = "_footerItem_13axu_13", a = {
-  columnTitle: t,
-  columnData: o,
+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
 };
 export {
-  o as columnData,
-  t as columnTitle,
-  a as default,
-  e as footerItem
+  l as columnData,
+  o as columnTitle,
+  n as default,
+  e as footerItem,
+  t as selectAllRow
 };
 //# 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":";;;;;;"}

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

@@ -6,9 +6,11 @@ export type DataTableProps<T> = {
     data: useDataViewPropReturn<T>['data'];
     itemMenu?: useDataViewPropReturn<T>['itemMenu'];
     onSelect?: useDataViewPropReturn<T>['onSelect'];
+    onSelectAll?: (checked: boolean, visibleData: T[]) => void;
+    getIsItemSelected?: (item: T) => boolean;
     emptyState?: useDataViewPropReturn<T>['emptyState'];
     footer?: useDataViewPropReturn<T>['footer'];
-    variant?: TableProps['variant'];
+    isWithinBox?: TableProps['isWithinBox'];
     selectionMode?: SelectionMode;
 };
-export declare const DataTable: <T>({ label, data, columns, itemMenu, onSelect, emptyState, footer, variant, selectionMode, }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTable: <T>({ label, data, columns, itemMenu, onSelect, onSelectAll, getIsItemSelected, emptyState, footer, isWithinBox, selectionMode, }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;