@gusto/embedded-react-sdk 0.42.0 → 0.44.0

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

@@ -1,10 +1,10 @@
-import { jsx as l } from "react/jsx-runtime";
-import { useId as w, useState as T } from "react";
-import { useTranslation as F } from "react-i18next";
-import { useSelectionState as S } from "../useSelectionState.js";
-import { useComponentContext as j } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { VisuallyHidden as p } from "../../VisuallyHidden/VisuallyHidden.js";
-function A(c, n) {
+import { jsx as a } from "react/jsx-runtime";
+import { useId as P, useState as V } from "react";
+import { useTranslation as T } from "react-i18next";
+import { useSelectionState as F } from "../useSelectionState.js";
+import { useComponentContext as S } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { VisuallyHidden as h } from "../../VisuallyHidden/VisuallyHidden.js";
+function j(c, n) {
   if (n.render)
     return n.render(c);
   if (n.key) {
@@ -13,32 +13,54 @@ function A(c, n) {
   }
   return "";
 }
-const J = ({
+const B = ({
   label: c,
   data: n,
   columns: s,
   itemMenu: d,
-  onSelect: a,
+  onSelect: r,
   onSelectAll: C,
   getIsItemSelected: u,
-  emptyState: b,
-  footer: k,
-  isWithinBox: R,
-  selectionMode: h = "multiple"
+  emptyState: f,
+  footer: b,
+  isWithinBox: g,
+  selectionMode: k = "multiple"
 }) => {
-  const y = j(), { t: i } = F("common"), $ = w(), [g, m] = T(null), { allSelected: H } = S(n, u), L = [
-    ...a ? [
+  const p = S(), { t: i } = T("common"), R = P(), [D, $] = V(null), { allSelected: m } = F(n, u), H = [
+    ...r ? [
       {
         key: "select-header",
-        content: h === "multiple" && u ? /* @__PURE__ */ l(
-          y.Checkbox,
-          {
-            value: H,
-            onChange: (e) => C?.(e, n),
-            label: i("table.selectAllRowsLabel"),
-            shouldVisuallyHideLabel: !0
-          }
-        ) : /* @__PURE__ */ l(p, { children: i("table.selectRowHeader") })
+        content: k === "multiple" && u ? (
+          // Stop propagation so the surrounding react-aria-components
+          // <Column> press handler doesn't intercept the checkbox click
+          // and desync the controlled DOM state. The inner <input> is
+          // the actual interactive element; this span is a propagation
+          // shield, not a click target itself.
+          // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+          /* @__PURE__ */ a(
+            "span",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+              },
+              onPointerDown: (e) => {
+                e.stopPropagation();
+              },
+              onMouseDown: (e) => {
+                e.stopPropagation();
+              },
+              children: /* @__PURE__ */ a(
+                p.Checkbox,
+                {
+                  value: m,
+                  onChange: (e) => C?.(e, n),
+                  label: i("table.selectAllRowsLabel"),
+                  shouldVisuallyHideLabel: !0
+                }
+              )
+            }
+          )
+        ) : /* @__PURE__ */ a(h, { children: i("table.selectRowHeader") })
       }
     ] : [],
     ...s.map((e, t) => ({
@@ -48,50 +70,50 @@ const J = ({
     ...d ? [
       {
         key: "actions-header",
-        content: /* @__PURE__ */ l(p, { children: i("table.actionsColumnHeader") })
+        content: /* @__PURE__ */ a(h, { children: i("table.actionsColumnHeader") })
       }
     ] : []
-  ], v = (e, t) => {
-    m(t), a?.(e, !0);
-  }, D = (e, t) => {
-    if (h === "single") {
-      const o = u?.(e) ?? g === t;
-      return /* @__PURE__ */ l(
-        y.Radio,
+  ], L = (e, t) => {
+    $(t), r?.(e, !0);
+  }, v = (e, t) => {
+    if (k === "single") {
+      const o = u?.(e) ?? D === t;
+      return /* @__PURE__ */ a(
+        p.Radio,
         {
-          name: $,
+          name: R,
           value: o,
           onChange: () => {
-            v(e, t);
+            L(e, t);
           },
           label: i("table.selectRowLabel"),
           shouldVisuallyHideLabel: !0
         }
       );
     }
-    const r = u?.(e) ?? !1;
-    return /* @__PURE__ */ l(
-      y.Checkbox,
+    const l = u?.(e) ?? !1;
+    return /* @__PURE__ */ a(
+      p.Checkbox,
       {
-        value: r,
+        value: l,
         onChange: (o) => {
-          a?.(e, o);
+          r?.(e, o);
         },
         label: i("table.selectRowLabel"),
         shouldVisuallyHideLabel: !0
       }
     );
-  }, x = n.map((e, t) => {
-    const r = [
-      ...a ? [
+  }, w = n.map((e, t) => {
+    const l = [
+      ...r ? [
         {
           key: `select-${t}`,
-          content: D(e, t)
+          content: v(e, t)
         }
       ] : [],
-      ...s.map((o, f) => ({
-        key: typeof o.key == "string" ? o.key : `cell-${f}`,
-        content: A(e, o)
+      ...s.map((o, y) => ({
+        key: typeof o.key == "string" ? o.key : `cell-${y}`,
+        content: j(e, o)
       })),
       ...d ? [
         {
@@ -102,40 +124,40 @@ const J = ({
     ];
     return {
       key: `row-${t}`,
-      data: r
+      data: l
     };
-  }), V = (() => {
-    if (!k) return;
-    const e = k(), t = [];
-    return a && t.push({
+  }), x = (() => {
+    if (!b) return;
+    const e = b(), t = [];
+    return r && t.push({
       key: "footer-select",
       content: ""
-    }), s.forEach((r, o) => {
-      const f = typeof r.key == "string" ? r.key : `column-${o}`;
+    }), s.forEach((l, o) => {
+      const y = typeof l.key == "string" ? l.key : `column-${o}`;
       t.push({
-        key: `footer-${f}`,
-        content: e[f] || ""
+        key: `footer-${y}`,
+        content: e[y] || ""
       });
     }), d && t.push({
       key: "footer-actions",
       content: ""
     }), t;
   })();
-  return /* @__PURE__ */ l(
-    y.Table,
+  return /* @__PURE__ */ a(
+    p.Table,
     {
       "aria-label": c,
       "data-testid": "data-table",
-      headers: L,
-      rows: x,
-      footer: V,
-      emptyState: b ? b() : void 0,
-      isWithinBox: R,
-      hasCheckboxColumn: !!a
+      headers: H,
+      rows: w,
+      footer: x,
+      emptyState: f ? f() : void 0,
+      isWithinBox: g,
+      hasCheckboxColumn: !!r
     }
   );
 };
 export {
-  J as DataTable
+  B as DataTable
 };
 //# sourceMappingURL=DataTable.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["../../../../../src/components/Common/DataView/DataTable/DataTable.tsx"],"sourcesContent":["import { useId, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { useDataViewPropReturn, SelectionMode } from '../useDataView'\nimport { useSelectionState } from '../useSelectionState'\nimport type { TableData, TableRow, TableProps } from '../../UI/Table/TableTypes'\nimport { VisuallyHidden } from '../../VisuallyHidden'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport type DataTableProps<T> = {\n  label: string\n  columns: useDataViewPropReturn<T>['columns']\n  data: useDataViewPropReturn<T>['data']\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  onSelectAll?: (checked: boolean, visibleData: T[]) => void\n  getIsItemSelected?: (item: T) => boolean\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  footer?: useDataViewPropReturn<T>['footer']\n  isWithinBox?: TableProps['isWithinBox']\n  selectionMode?: SelectionMode\n}\n\nfunction getCellContent<T>(\n  item: T,\n  column: { key?: string | keyof T; render?: (item: T) => React.ReactNode },\n) {\n  if (column.render) {\n    return column.render(item)\n  }\n\n  if (column.key) {\n    const key = column.key as keyof T\n    return String(item[key] ?? '')\n  }\n\n  return ''\n}\n\nexport const DataTable = <T,>({\n  label,\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  onSelectAll,\n  getIsItemSelected,\n  emptyState,\n  footer,\n  isWithinBox,\n  selectionMode = 'multiple',\n}: DataTableProps<T>) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation('common')\n  const radioGroupName = useId()\n  const [selectedRadioIndex, setSelectedRadioIndex] = useState<number | null>(null)\n  const { allSelected } = useSelectionState(data, getIsItemSelected)\n\n  const headers: TableData[] = [\n    ...(onSelect\n      ? [\n          {\n            key: 'select-header',\n            content:\n              selectionMode === 'multiple' && getIsItemSelected ? (\n                <Components.Checkbox\n                  value={allSelected}\n                  onChange={(checked: boolean) => onSelectAll?.(checked, data)}\n                  label={t('table.selectAllRowsLabel')}\n                  shouldVisuallyHideLabel\n                />\n              ) : (\n                <VisuallyHidden>{t('table.selectRowHeader')}</VisuallyHidden>\n              ),\n          },\n        ]\n      : []),\n    ...columns.map((column, index) => ({\n      key: typeof column.key === 'string' ? column.key : `header-${index}`,\n      content: column.title,\n    })),\n    ...(itemMenu\n      ? [\n          {\n            key: 'actions-header',\n            content: <VisuallyHidden>{t('table.actionsColumnHeader')}</VisuallyHidden>,\n          },\n        ]\n      : []),\n  ]\n\n  const handleRadioSelect = (item: T, rowIndex: number) => {\n    setSelectedRadioIndex(rowIndex)\n    onSelect?.(item, true)\n  }\n\n  const renderSelectionControl = (item: T, rowIndex: number) => {\n    if (selectionMode === 'single') {\n      const isSelected = getIsItemSelected?.(item) ?? selectedRadioIndex === rowIndex\n      return (\n        <Components.Radio\n          name={radioGroupName}\n          value={isSelected}\n          onChange={() => {\n            handleRadioSelect(item, rowIndex)\n          }}\n          label={t('table.selectRowLabel')}\n          shouldVisuallyHideLabel\n        />\n      )\n    }\n\n    const isSelected = getIsItemSelected?.(item) ?? false\n    return (\n      <Components.Checkbox\n        value={isSelected}\n        onChange={(checked: boolean) => {\n          onSelect?.(item, checked)\n        }}\n        label={t('table.selectRowLabel')}\n        shouldVisuallyHideLabel\n      />\n    )\n  }\n\n  const rows: TableRow[] = data.map((item, rowIndex) => {\n    const rowData: TableData[] = [\n      ...(onSelect\n        ? [\n            {\n              key: `select-${rowIndex}`,\n              content: renderSelectionControl(item, rowIndex),\n            },\n          ]\n        : []),\n      ...columns.map((column, colIndex) => {\n        return {\n          key: typeof column.key === 'string' ? column.key : `cell-${colIndex}`,\n          content: getCellContent(item, column),\n        }\n      }),\n      ...(itemMenu\n        ? [\n            {\n              key: `menu-${rowIndex}`,\n              content: itemMenu(item),\n            },\n          ]\n        : []),\n    ]\n\n    return {\n      key: `row-${rowIndex}`,\n      data: rowData,\n    }\n  })\n\n  const buildFooterData = () => {\n    if (!footer) return undefined\n\n    const footerContent = footer()\n    const footerCells: TableData[] = []\n\n    // Add select column footer (empty)\n    if (onSelect) {\n      footerCells.push({\n        key: 'footer-select',\n        content: '',\n      })\n    }\n\n    // Add data column footers\n    columns.forEach((column, index) => {\n      const columnKey = typeof column.key === 'string' ? column.key : `column-${index}`\n      footerCells.push({\n        key: `footer-${columnKey}`,\n        content: footerContent[columnKey] || '',\n      })\n    })\n\n    // Add actions column footer (empty)\n    if (itemMenu) {\n      footerCells.push({\n        key: 'footer-actions',\n        content: '',\n      })\n    }\n\n    return footerCells\n  }\n\n  const footerData = buildFooterData()\n\n  return (\n    <Components.Table\n      aria-label={label}\n      data-testid=\"data-table\"\n      headers={headers}\n      rows={rows}\n      footer={footerData}\n      emptyState={emptyState ? emptyState() : undefined}\n      isWithinBox={isWithinBox}\n      hasCheckboxColumn={!!onSelect}\n    />\n  )\n}\n"],"names":["getCellContent","item","column","key","DataTable","label","data","columns","itemMenu","onSelect","onSelectAll","getIsItemSelected","emptyState","footer","isWithinBox","selectionMode","Components","useComponentContext","t","useTranslation","radioGroupName","useId","selectedRadioIndex","setSelectedRadioIndex","useState","allSelected","useSelectionState","headers","jsx","checked","VisuallyHidden","index","handleRadioSelect","rowIndex","renderSelectionControl","isSelected","rows","rowData","colIndex","footerData","footerContent","footerCells","columnKey"],"mappings":"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"}
+{"version":3,"file":"DataTable.js","sources":["../../../../../src/components/Common/DataView/DataTable/DataTable.tsx"],"sourcesContent":["import { useId, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { useDataViewPropReturn, SelectionMode } from '../useDataView'\nimport { useSelectionState } from '../useSelectionState'\nimport type { TableData, TableRow, TableProps } from '../../UI/Table/TableTypes'\nimport { VisuallyHidden } from '../../VisuallyHidden'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport type DataTableProps<T> = {\n  label: string\n  columns: useDataViewPropReturn<T>['columns']\n  data: useDataViewPropReturn<T>['data']\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  onSelectAll?: (checked: boolean, visibleData: T[]) => void\n  getIsItemSelected?: (item: T) => boolean\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  footer?: useDataViewPropReturn<T>['footer']\n  isWithinBox?: TableProps['isWithinBox']\n  selectionMode?: SelectionMode\n}\n\nfunction getCellContent<T>(\n  item: T,\n  column: { key?: string | keyof T; render?: (item: T) => React.ReactNode },\n) {\n  if (column.render) {\n    return column.render(item)\n  }\n\n  if (column.key) {\n    const key = column.key as keyof T\n    return String(item[key] ?? '')\n  }\n\n  return ''\n}\n\nexport const DataTable = <T,>({\n  label,\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  onSelectAll,\n  getIsItemSelected,\n  emptyState,\n  footer,\n  isWithinBox,\n  selectionMode = 'multiple',\n}: DataTableProps<T>) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation('common')\n  const radioGroupName = useId()\n  const [selectedRadioIndex, setSelectedRadioIndex] = useState<number | null>(null)\n  const { allSelected } = useSelectionState(data, getIsItemSelected)\n\n  const headers: TableData[] = [\n    ...(onSelect\n      ? [\n          {\n            key: 'select-header',\n            content:\n              selectionMode === 'multiple' && getIsItemSelected ? (\n                // Stop propagation so the surrounding react-aria-components\n                // <Column> press handler doesn't intercept the checkbox click\n                // and desync the controlled DOM state. The inner <input> is\n                // the actual interactive element; this span is a propagation\n                // shield, not a click target itself.\n                // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n                <span\n                  onClick={e => {\n                    e.stopPropagation()\n                  }}\n                  onPointerDown={e => {\n                    e.stopPropagation()\n                  }}\n                  onMouseDown={e => {\n                    e.stopPropagation()\n                  }}\n                >\n                  <Components.Checkbox\n                    value={allSelected}\n                    onChange={(checked: boolean) => onSelectAll?.(checked, data)}\n                    label={t('table.selectAllRowsLabel')}\n                    shouldVisuallyHideLabel\n                  />\n                </span>\n              ) : (\n                <VisuallyHidden>{t('table.selectRowHeader')}</VisuallyHidden>\n              ),\n          },\n        ]\n      : []),\n    ...columns.map((column, index) => ({\n      key: typeof column.key === 'string' ? column.key : `header-${index}`,\n      content: column.title,\n    })),\n    ...(itemMenu\n      ? [\n          {\n            key: 'actions-header',\n            content: <VisuallyHidden>{t('table.actionsColumnHeader')}</VisuallyHidden>,\n          },\n        ]\n      : []),\n  ]\n\n  const handleRadioSelect = (item: T, rowIndex: number) => {\n    setSelectedRadioIndex(rowIndex)\n    onSelect?.(item, true)\n  }\n\n  const renderSelectionControl = (item: T, rowIndex: number) => {\n    if (selectionMode === 'single') {\n      const isSelected = getIsItemSelected?.(item) ?? selectedRadioIndex === rowIndex\n      return (\n        <Components.Radio\n          name={radioGroupName}\n          value={isSelected}\n          onChange={() => {\n            handleRadioSelect(item, rowIndex)\n          }}\n          label={t('table.selectRowLabel')}\n          shouldVisuallyHideLabel\n        />\n      )\n    }\n\n    const isSelected = getIsItemSelected?.(item) ?? false\n    return (\n      <Components.Checkbox\n        value={isSelected}\n        onChange={(checked: boolean) => {\n          onSelect?.(item, checked)\n        }}\n        label={t('table.selectRowLabel')}\n        shouldVisuallyHideLabel\n      />\n    )\n  }\n\n  const rows: TableRow[] = data.map((item, rowIndex) => {\n    const rowData: TableData[] = [\n      ...(onSelect\n        ? [\n            {\n              key: `select-${rowIndex}`,\n              content: renderSelectionControl(item, rowIndex),\n            },\n          ]\n        : []),\n      ...columns.map((column, colIndex) => {\n        return {\n          key: typeof column.key === 'string' ? column.key : `cell-${colIndex}`,\n          content: getCellContent(item, column),\n        }\n      }),\n      ...(itemMenu\n        ? [\n            {\n              key: `menu-${rowIndex}`,\n              content: itemMenu(item),\n            },\n          ]\n        : []),\n    ]\n\n    return {\n      key: `row-${rowIndex}`,\n      data: rowData,\n    }\n  })\n\n  const buildFooterData = () => {\n    if (!footer) return undefined\n\n    const footerContent = footer()\n    const footerCells: TableData[] = []\n\n    // Add select column footer (empty)\n    if (onSelect) {\n      footerCells.push({\n        key: 'footer-select',\n        content: '',\n      })\n    }\n\n    // Add data column footers\n    columns.forEach((column, index) => {\n      const columnKey = typeof column.key === 'string' ? column.key : `column-${index}`\n      footerCells.push({\n        key: `footer-${columnKey}`,\n        content: footerContent[columnKey] || '',\n      })\n    })\n\n    // Add actions column footer (empty)\n    if (itemMenu) {\n      footerCells.push({\n        key: 'footer-actions',\n        content: '',\n      })\n    }\n\n    return footerCells\n  }\n\n  const footerData = buildFooterData()\n\n  return (\n    <Components.Table\n      aria-label={label}\n      data-testid=\"data-table\"\n      headers={headers}\n      rows={rows}\n      footer={footerData}\n      emptyState={emptyState ? emptyState() : undefined}\n      isWithinBox={isWithinBox}\n      hasCheckboxColumn={!!onSelect}\n    />\n  )\n}\n"],"names":["getCellContent","item","column","key","DataTable","label","data","columns","itemMenu","onSelect","onSelectAll","getIsItemSelected","emptyState","footer","isWithinBox","selectionMode","Components","useComponentContext","t","useTranslation","radioGroupName","useId","selectedRadioIndex","setSelectedRadioIndex","useState","allSelected","useSelectionState","headers","jsx","checked","VisuallyHidden","index","handleRadioSelect","rowIndex","renderSelectionControl","isSelected","rows","rowData","colIndex","footerData","footerContent","footerCells","columnKey"],"mappings":"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"}

package/dist/components/Common/DateRangeFilter/DateRangeFilter.js

@@ -53,7 +53,7 @@ const k = (n) => n.toLocaleDateString("en-US", { month: "short", day: "numeric"
     /* @__PURE__ */ e(
       q,
       {
-        UNSTABLE_portalContainer: P.current,
+        UNSTABLE_portalContainer: P.current ?? void 0,
         isOpen: C,
         onOpenChange: (i) => {
           i || y();

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangeFilter.js","sources":["../../../../src/components/Common/DateRangeFilter/DateRangeFilter.tsx"],"sourcesContent":["import { useState, useRef, useCallback, useMemo } from 'react'\nimport { Dialog, Popover } from 'react-aria-components'\nimport styles from './DateRangeFilter.module.scss'\nimport type { DateRange } from '@/components/Common/UI/DateRangePicker/DateRangePickerTypes'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useTheme } from '@/contexts/ThemeProvider'\nimport FilterFunnelIcon from '@/assets/icons/filter-funnel.svg?react'\n\nconst formatFilterDate = (date: Date): string =>\n  date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })\n\ninterface DateRangeFilterProps {\n  startDate: Date | null\n  endDate: Date | null\n  onStartDateChange: (date: Date | null) => void\n  onEndDateChange: (date: Date | null) => void\n  onClear: () => void\n  startDateLabel: string\n  endDateLabel: string\n  applyLabel: string\n  cancelLabel: string\n  resetLabel: string\n  selectDatesLabel: string\n  triggerLabel: string\n  isFilterActive: boolean\n  maxEndDate?: Date\n  minStartDate?: Date\n}\n\nexport const DateRangeFilter = ({\n  startDate,\n  endDate,\n  onStartDateChange,\n  onEndDateChange,\n  onClear,\n  startDateLabel,\n  endDateLabel,\n  applyLabel,\n  cancelLabel,\n  resetLabel,\n  selectDatesLabel,\n  triggerLabel,\n  isFilterActive,\n  maxEndDate,\n  minStartDate,\n}: DateRangeFilterProps) => {\n  const { Button, DateRangePicker } = useComponentContext()\n  const { container } = useTheme()\n\n  const [isOpen, setIsOpen] = useState(false)\n  const [draftRange, setDraftRange] = useState<DateRange | null>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n\n  const handleOpen = useCallback(() => {\n    const range = startDate && endDate ? { start: startDate, end: endDate } : null\n    setDraftRange(range)\n    setIsOpen(true)\n  }, [startDate, endDate])\n\n  const handleClose = useCallback(() => {\n    setIsOpen(false)\n  }, [])\n\n  const handleApply = useCallback(() => {\n    if (draftRange) {\n      onStartDateChange(draftRange.start)\n      onEndDateChange(draftRange.end)\n    } else {\n      onClear()\n    }\n    setIsOpen(false)\n  }, [draftRange, onStartDateChange, onEndDateChange, onClear])\n\n  const handleReset = useCallback(() => {\n    setDraftRange(null)\n  }, [])\n\n  const handleRangeChange = useCallback((range: DateRange | null) => {\n    setDraftRange(range)\n  }, [])\n\n  const filterDateLabel = useMemo(() => {\n    if (!isFilterActive || !startDate || !endDate) return null\n    return `${formatFilterDate(startDate)} – ${formatFilterDate(endDate)}`\n  }, [isFilterActive, startDate, endDate])\n\n  const triggerButton = (\n    <Button\n      buttonRef={triggerRef}\n      aria-label={triggerLabel}\n      aria-haspopup=\"dialog\"\n      aria-expanded={isOpen}\n      onClick={handleOpen}\n      variant=\"secondary\"\n      icon={<FilterFunnelIcon />}\n      className={styles.triggerButton}\n    >\n      {filterDateLabel ?? selectDatesLabel}\n    </Button>\n  )\n\n  return (\n    <>\n      {triggerButton}\n\n      <Popover\n        UNSTABLE_portalContainer={container.current}\n        isOpen={isOpen}\n        onOpenChange={open => {\n          if (!open) handleClose()\n        }}\n        triggerRef={triggerRef}\n        placement=\"bottom end\"\n        offset={8}\n        shouldUpdatePosition\n      >\n        <Dialog className={styles.dialog} aria-label={`${startDateLabel} – ${endDateLabel}`}>\n          <div className={styles.popoverContent}>\n            <DateRangePicker\n              label={`${startDateLabel} – ${endDateLabel}`}\n              shouldVisuallyHideLabel\n              value={draftRange}\n              onChange={handleRangeChange}\n              startDateLabel={startDateLabel}\n              endDateLabel={endDateLabel}\n              minValue={minStartDate}\n              maxValue={maxEndDate}\n            />\n          </div>\n\n          <div className={styles.popoverFooter}>\n            <Flex gap={8} justifyContent=\"space-between\">\n              <Button variant=\"tertiary\" onClick={handleReset}>\n                {resetLabel}\n              </Button>\n              <Flex gap={8} justifyContent=\"flex-end\">\n                <Button variant=\"secondary\" onClick={handleClose}>\n                  {cancelLabel}\n                </Button>\n                <Button variant=\"primary\" onClick={handleApply}>\n                  {applyLabel}\n                </Button>\n              </Flex>\n            </Flex>\n          </div>\n        </Dialog>\n      </Popover>\n    </>\n  )\n}\n"],"names":["formatFilterDate","date","DateRangeFilter","startDate","endDate","onStartDateChange","onEndDateChange","onClear","startDateLabel","endDateLabel","applyLabel","cancelLabel","resetLabel","selectDatesLabel","triggerLabel","isFilterActive","maxEndDate","minStartDate","Button","DateRangePicker","useComponentContext","container","useTheme","isOpen","setIsOpen","useState","draftRange","setDraftRange","triggerRef","useRef","handleOpen","useCallback","handleClose","handleApply","handleReset","handleRangeChange","range","filterDateLabel","useMemo","triggerButton","jsx","FilterFunnelIcon","styles","jsxs","Fragment","Popover","open","Dialog","Flex"],"mappings":"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"}
+{"version":3,"file":"DateRangeFilter.js","sources":["../../../../src/components/Common/DateRangeFilter/DateRangeFilter.tsx"],"sourcesContent":["import { useState, useRef, useCallback, useMemo } from 'react'\nimport { Dialog, Popover } from 'react-aria-components'\nimport styles from './DateRangeFilter.module.scss'\nimport type { DateRange } from '@/components/Common/UI/DateRangePicker/DateRangePickerTypes'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useTheme } from '@/contexts/ThemeProvider'\nimport FilterFunnelIcon from '@/assets/icons/filter-funnel.svg?react'\n\nconst formatFilterDate = (date: Date): string =>\n  date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })\n\ninterface DateRangeFilterProps {\n  startDate: Date | null\n  endDate: Date | null\n  onStartDateChange: (date: Date | null) => void\n  onEndDateChange: (date: Date | null) => void\n  onClear: () => void\n  startDateLabel: string\n  endDateLabel: string\n  applyLabel: string\n  cancelLabel: string\n  resetLabel: string\n  selectDatesLabel: string\n  triggerLabel: string\n  isFilterActive: boolean\n  maxEndDate?: Date\n  minStartDate?: Date\n}\n\nexport const DateRangeFilter = ({\n  startDate,\n  endDate,\n  onStartDateChange,\n  onEndDateChange,\n  onClear,\n  startDateLabel,\n  endDateLabel,\n  applyLabel,\n  cancelLabel,\n  resetLabel,\n  selectDatesLabel,\n  triggerLabel,\n  isFilterActive,\n  maxEndDate,\n  minStartDate,\n}: DateRangeFilterProps) => {\n  const { Button, DateRangePicker } = useComponentContext()\n  const { container } = useTheme()\n\n  const [isOpen, setIsOpen] = useState(false)\n  const [draftRange, setDraftRange] = useState<DateRange | null>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n\n  const handleOpen = useCallback(() => {\n    const range = startDate && endDate ? { start: startDate, end: endDate } : null\n    setDraftRange(range)\n    setIsOpen(true)\n  }, [startDate, endDate])\n\n  const handleClose = useCallback(() => {\n    setIsOpen(false)\n  }, [])\n\n  const handleApply = useCallback(() => {\n    if (draftRange) {\n      onStartDateChange(draftRange.start)\n      onEndDateChange(draftRange.end)\n    } else {\n      onClear()\n    }\n    setIsOpen(false)\n  }, [draftRange, onStartDateChange, onEndDateChange, onClear])\n\n  const handleReset = useCallback(() => {\n    setDraftRange(null)\n  }, [])\n\n  const handleRangeChange = useCallback((range: DateRange | null) => {\n    setDraftRange(range)\n  }, [])\n\n  const filterDateLabel = useMemo(() => {\n    if (!isFilterActive || !startDate || !endDate) return null\n    return `${formatFilterDate(startDate)} – ${formatFilterDate(endDate)}`\n  }, [isFilterActive, startDate, endDate])\n\n  const triggerButton = (\n    <Button\n      buttonRef={triggerRef}\n      aria-label={triggerLabel}\n      aria-haspopup=\"dialog\"\n      aria-expanded={isOpen}\n      onClick={handleOpen}\n      variant=\"secondary\"\n      icon={<FilterFunnelIcon />}\n      className={styles.triggerButton}\n    >\n      {filterDateLabel ?? selectDatesLabel}\n    </Button>\n  )\n\n  return (\n    <>\n      {triggerButton}\n\n      <Popover\n        UNSTABLE_portalContainer={container.current ?? undefined}\n        isOpen={isOpen}\n        onOpenChange={open => {\n          if (!open) handleClose()\n        }}\n        triggerRef={triggerRef}\n        placement=\"bottom end\"\n        offset={8}\n        shouldUpdatePosition\n      >\n        <Dialog className={styles.dialog} aria-label={`${startDateLabel} – ${endDateLabel}`}>\n          <div className={styles.popoverContent}>\n            <DateRangePicker\n              label={`${startDateLabel} – ${endDateLabel}`}\n              shouldVisuallyHideLabel\n              value={draftRange}\n              onChange={handleRangeChange}\n              startDateLabel={startDateLabel}\n              endDateLabel={endDateLabel}\n              minValue={minStartDate}\n              maxValue={maxEndDate}\n            />\n          </div>\n\n          <div className={styles.popoverFooter}>\n            <Flex gap={8} justifyContent=\"space-between\">\n              <Button variant=\"tertiary\" onClick={handleReset}>\n                {resetLabel}\n              </Button>\n              <Flex gap={8} justifyContent=\"flex-end\">\n                <Button variant=\"secondary\" onClick={handleClose}>\n                  {cancelLabel}\n                </Button>\n                <Button variant=\"primary\" onClick={handleApply}>\n                  {applyLabel}\n                </Button>\n              </Flex>\n            </Flex>\n          </div>\n        </Dialog>\n      </Popover>\n    </>\n  )\n}\n"],"names":["formatFilterDate","date","DateRangeFilter","startDate","endDate","onStartDateChange","onEndDateChange","onClear","startDateLabel","endDateLabel","applyLabel","cancelLabel","resetLabel","selectDatesLabel","triggerLabel","isFilterActive","maxEndDate","minStartDate","Button","DateRangePicker","useComponentContext","container","useTheme","isOpen","setIsOpen","useState","draftRange","setDraftRange","triggerRef","useRef","handleOpen","useCallback","handleClose","handleApply","handleReset","handleRangeChange","range","filterDateLabel","useMemo","triggerButton","jsx","FilterFunnelIcon","styles","jsxs","Fragment","Popover","open","Dialog","Flex"],"mappings":"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"}

package/dist/components/Common/DetailViewLayout/DetailViewLayout.js

@@ -0,0 +1,52 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { useId as x } from "react";
+import l from "classnames";
+import a from "./DetailViewLayout.module.scss.js";
+import y from "../../../assets/icons/caret-left.svg.js";
+import { useComponentContext as C } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+function T({
+  title: t,
+  subtitle: r,
+  onBack: o,
+  backLabel: c,
+  actions: n,
+  tabs: s,
+  selectedTabId: m,
+  onTabChange: h,
+  children: p,
+  className: u
+}) {
+  const { Button: f, Heading: v, Text: g, Tabs: N } = C(), d = x();
+  return /* @__PURE__ */ i("section", { className: l(a.root, u), "aria-labelledby": d, children: [
+    o && /* @__PURE__ */ e(
+      f,
+      {
+        variant: "tertiary",
+        className: a.backButton,
+        icon: /* @__PURE__ */ e(y, { "aria-hidden": "true" }),
+        onClick: o,
+        children: c
+      }
+    ),
+    /* @__PURE__ */ i("div", { className: l(a.pageHeader, r && a.hasSubtitle), children: [
+      /* @__PURE__ */ i("div", { className: a.titleGroup, children: [
+        /* @__PURE__ */ e(v, { as: "h2", styledAs: "h2", id: d, children: t }),
+        r && /* @__PURE__ */ e(g, { variant: "supporting", children: r })
+      ] }),
+      n && /* @__PURE__ */ e("div", { className: a.actions, children: n })
+    ] }),
+    s !== void 0 ? /* @__PURE__ */ e(
+      N,
+      {
+        tabs: s,
+        selectedId: m,
+        onSelectionChange: h,
+        "aria-label": t
+      }
+    ) : p
+  ] });
+}
+export {
+  T as DetailViewLayout
+};
+//# sourceMappingURL=DetailViewLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DetailViewLayout.js","sources":["../../../../src/components/Common/DetailViewLayout/DetailViewLayout.tsx"],"sourcesContent":["import { useId } from 'react'\nimport classNames from 'classnames'\nimport type { DetailViewLayoutProps } from './DetailViewLayoutTypes'\nimport styles from './DetailViewLayout.module.scss'\nimport CaretLeftIcon from '@/assets/icons/caret-left.svg?react'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport function DetailViewLayout({\n  title,\n  subtitle,\n  onBack,\n  backLabel,\n  actions,\n  tabs,\n  selectedTabId,\n  onTabChange,\n  children,\n  className,\n}: DetailViewLayoutProps) {\n  const { Button, Heading, Text, Tabs } = useComponentContext()\n  const headingId = useId()\n\n  return (\n    <section className={classNames(styles.root, className)} aria-labelledby={headingId}>\n      {onBack && (\n        <Button\n          variant=\"tertiary\"\n          className={styles.backButton}\n          icon={<CaretLeftIcon aria-hidden=\"true\" />}\n          onClick={onBack}\n        >\n          {backLabel}\n        </Button>\n      )}\n\n      <div className={classNames(styles.pageHeader, subtitle && styles.hasSubtitle)}>\n        <div className={styles.titleGroup}>\n          <Heading as=\"h2\" styledAs=\"h2\" id={headingId}>\n            {title}\n          </Heading>\n          {subtitle && <Text variant=\"supporting\">{subtitle}</Text>}\n        </div>\n        {actions && <div className={styles.actions}>{actions}</div>}\n      </div>\n\n      {tabs !== undefined ? (\n        <Tabs\n          tabs={tabs}\n          selectedId={selectedTabId}\n          onSelectionChange={onTabChange}\n          aria-label={title}\n        />\n      ) : (\n        children\n      )}\n    </section>\n  )\n}\n"],"names":["DetailViewLayout","title","subtitle","onBack","backLabel","actions","tabs","selectedTabId","onTabChange","children","className","Button","Heading","Text","Tabs","useComponentContext","headingId","useId","jsxs","classNames","styles","jsx","CaretLeftIcon"],"mappings":";;;;;;AAOO,SAASA,EAAiB;AAAA,EAC/B,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAA0B;AACxB,QAAM,EAAE,QAAAC,GAAQ,SAAAC,GAAS,MAAAC,GAAM,MAAAC,EAAA,IAASC,EAAA,GAClCC,IAAYC,EAAA;AAElB,SACE,gBAAAC,EAAC,aAAQ,WAAWC,EAAWC,EAAO,MAAMV,CAAS,GAAG,mBAAiBM,GACtE,UAAA;AAAA,IAAAb,KACC,gBAAAkB;AAAA,MAACV;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAWS,EAAO;AAAA,QAClB,MAAM,gBAAAC,EAACC,GAAA,EAAc,eAAY,OAAA,CAAO;AAAA,QACxC,SAASnB;AAAA,QAER,UAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAIL,gBAAAc,EAAC,SAAI,WAAWC,EAAWC,EAAO,YAAYlB,KAAYkB,EAAO,WAAW,GAC1E,UAAA;AAAA,MAAA,gBAAAF,EAAC,OAAA,EAAI,WAAWE,EAAO,YACrB,UAAA;AAAA,QAAA,gBAAAC,EAACT,KAAQ,IAAG,MAAK,UAAS,MAAK,IAAII,GAChC,UAAAf,EAAA,CACH;AAAA,QACCC,KAAY,gBAAAmB,EAACR,GAAA,EAAK,SAAQ,cAAc,UAAAX,EAAA,CAAS;AAAA,MAAA,GACpD;AAAA,MACCG,KAAW,gBAAAgB,EAAC,OAAA,EAAI,WAAWD,EAAO,SAAU,UAAAf,EAAA,CAAQ;AAAA,IAAA,GACvD;AAAA,IAECC,MAAS,SACR,gBAAAe;AAAA,MAACP;AAAA,MAAA;AAAA,QACC,MAAAR;AAAA,QACA,YAAYC;AAAA,QACZ,mBAAmBC;AAAA,QACnB,cAAYP;AAAA,MAAA;AAAA,IAAA,IAGdQ;AAAA,EAAA,GAEJ;AAEJ;"}

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

@@ -0,0 +1,18 @@
+const t = "_root_qymm1_1", o = "_backButton_qymm1_8", e = "_pageHeader_qymm1_12", _ = "_hasSubtitle_qymm1_20", a = "_titleGroup_qymm1_24", s = "_actions_qymm1_32", c = {
+  root: t,
+  backButton: o,
+  pageHeader: e,
+  hasSubtitle: _,
+  titleGroup: a,
+  actions: s
+};
+export {
+  s as actions,
+  o as backButton,
+  c as default,
+  _ as hasSubtitle,
+  e as pageHeader,
+  t as root,
+  a as titleGroup
+};
+//# sourceMappingURL=DetailViewLayout.module.scss.js.map

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

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

package/dist/components/Common/Fields/hooks/FieldElementRegistryProvider.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { FieldElementRegistry } from './fieldElementRegistry';
+interface FieldElementRegistryProviderProps {
+    registry: FieldElementRegistry | null | undefined;
+    children: ReactNode;
+}
+/**
+ * Publishes a `FieldElementRegistry` via context so `useField` can populate it.
+ * `SDKFormProvider` wires this automatically; partners who build their own form
+ * surface can wrap with this provider directly to opt into cross-form focus.
+ */
+export declare function FieldElementRegistryProvider({ registry, children, }: FieldElementRegistryProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Common/Fields/hooks/FieldElementRegistryProvider.js

@@ -0,0 +1,12 @@
+import { jsx as t } from "react/jsx-runtime";
+import { FieldElementRegistryContext as i } from "./fieldElementRegistry.js";
+function n({
+  registry: e,
+  children: r
+}) {
+  return /* @__PURE__ */ t(i.Provider, { value: e ?? null, children: r });
+}
+export {
+  n as FieldElementRegistryProvider
+};
+//# sourceMappingURL=FieldElementRegistryProvider.js.map

package/dist/components/Common/Fields/hooks/FieldElementRegistryProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldElementRegistryProvider.js","sources":["../../../../../src/components/Common/Fields/hooks/FieldElementRegistryProvider.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { FieldElementRegistryContext, type FieldElementRegistry } from './fieldElementRegistry'\n\ninterface FieldElementRegistryProviderProps {\n  registry: FieldElementRegistry | null | undefined\n  children: ReactNode\n}\n\n/**\n * Publishes a `FieldElementRegistry` via context so `useField` can populate it.\n * `SDKFormProvider` wires this automatically; partners who build their own form\n * surface can wrap with this provider directly to opt into cross-form focus.\n */\nexport function FieldElementRegistryProvider({\n  registry,\n  children,\n}: FieldElementRegistryProviderProps) {\n  return (\n    <FieldElementRegistryContext.Provider value={registry ?? null}>\n      {children}\n    </FieldElementRegistryContext.Provider>\n  )\n}\n"],"names":["FieldElementRegistryProvider","registry","children","FieldElementRegistryContext"],"mappings":";;AAaO,SAASA,EAA6B;AAAA,EAC3C,UAAAC;AAAA,EACA,UAAAC;AACF,GAAsC;AACpC,2BACGC,EAA4B,UAA5B,EAAqC,OAAOF,KAAY,MACtD,UAAAC,GACH;AAEJ;"}

package/dist/components/Common/Fields/hooks/fieldElementRegistry.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Per-form map of registered field `name` → DOM element. Populated by `useField`
+ * via a ref callback, consumed by `composeSubmitHandler` to focus the visually
+ * first invalid field across multiple composed forms.
+ *
+ * Lives here (next to `useField`) rather than in `partner-hook-utils` so the
+ * established module-boundary direction (`partner-hook-utils` → `Common`) is
+ * preserved. Partner code consumes it via re-exports from `partner-hook-utils/form`.
+ */
+export interface FieldElementRegistry {
+    register: (name: string, element: HTMLElement | null) => void;
+    get: (name: string) => HTMLElement | null;
+    names: () => string[];
+}
+/**
+ * Creates a stable `FieldElementRegistry` scoped to the caller's lifetime.
+ * Intended to be called once per form hook (via `useHookFormInternals`).
+ */
+export declare function useFieldElementRegistry(): FieldElementRegistry;
+export declare const FieldElementRegistryContext: import('react').Context<FieldElementRegistry | null>;
+export declare function useFieldElementRegistryContext(): FieldElementRegistry | null;

package/dist/components/Common/Fields/hooks/fieldElementRegistry.js

@@ -0,0 +1,29 @@
+import { createContext as n, useRef as u, useContext as l } from "react";
+function s() {
+  const e = /* @__PURE__ */ new Map();
+  return {
+    register(t, r) {
+      r ? e.set(t, r) : e.delete(t);
+    },
+    get(t) {
+      return e.get(t) ?? null;
+    },
+    names() {
+      return Array.from(e.keys());
+    }
+  };
+}
+function c() {
+  const e = u(null);
+  return e.current === null && (e.current = s()), e.current;
+}
+const i = n(null);
+function f() {
+  return l(i);
+}
+export {
+  i as FieldElementRegistryContext,
+  c as useFieldElementRegistry,
+  f as useFieldElementRegistryContext
+};
+//# sourceMappingURL=fieldElementRegistry.js.map

package/dist/components/Common/Fields/hooks/fieldElementRegistry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldElementRegistry.js","sources":["../../../../../src/components/Common/Fields/hooks/fieldElementRegistry.ts"],"sourcesContent":["import { createContext, useContext, useRef } from 'react'\n\n/**\n * Per-form map of registered field `name` → DOM element. Populated by `useField`\n * via a ref callback, consumed by `composeSubmitHandler` to focus the visually\n * first invalid field across multiple composed forms.\n *\n * Lives here (next to `useField`) rather than in `partner-hook-utils` so the\n * established module-boundary direction (`partner-hook-utils` → `Common`) is\n * preserved. Partner code consumes it via re-exports from `partner-hook-utils/form`.\n */\nexport interface FieldElementRegistry {\n  register: (name: string, element: HTMLElement | null) => void\n  get: (name: string) => HTMLElement | null\n  names: () => string[]\n}\n\nfunction createFieldElementRegistry(): FieldElementRegistry {\n  const elements = new Map<string, HTMLElement>()\n  return {\n    register(name, element) {\n      if (element) {\n        elements.set(name, element)\n      } else {\n        elements.delete(name)\n      }\n    },\n    get(name) {\n      return elements.get(name) ?? null\n    },\n    names() {\n      return Array.from(elements.keys())\n    },\n  }\n}\n\n/**\n * Creates a stable `FieldElementRegistry` scoped to the caller's lifetime.\n * Intended to be called once per form hook (via `useHookFormInternals`).\n */\nexport function useFieldElementRegistry(): FieldElementRegistry {\n  const ref = useRef<FieldElementRegistry | null>(null)\n  if (ref.current === null) {\n    ref.current = createFieldElementRegistry()\n  }\n  return ref.current\n}\n\nexport const FieldElementRegistryContext = createContext<FieldElementRegistry | null>(null)\n\nexport function useFieldElementRegistryContext(): FieldElementRegistry | null {\n  return useContext(FieldElementRegistryContext)\n}\n"],"names":["createFieldElementRegistry","elements","name","element","useFieldElementRegistry","ref","useRef","FieldElementRegistryContext","createContext","useFieldElementRegistryContext","useContext"],"mappings":";AAiBA,SAASA,IAAmD;AAC1D,QAAMC,wBAAe,IAAA;AACrB,SAAO;AAAA,IACL,SAASC,GAAMC,GAAS;AACtB,MAAIA,IACFF,EAAS,IAAIC,GAAMC,CAAO,IAE1BF,EAAS,OAAOC,CAAI;AAAA,IAExB;AAAA,IACA,IAAIA,GAAM;AACR,aAAOD,EAAS,IAAIC,CAAI,KAAK;AAAA,IAC/B;AAAA,IACA,QAAQ;AACN,aAAO,MAAM,KAAKD,EAAS,KAAA,CAAM;AAAA,IACnC;AAAA,EAAA;AAEJ;AAMO,SAASG,IAAgD;AAC9D,QAAMC,IAAMC,EAAoC,IAAI;AACpD,SAAID,EAAI,YAAY,SAClBA,EAAI,UAAUL,EAAA,IAETK,EAAI;AACb;AAEO,MAAME,IAA8BC,EAA2C,IAAI;AAEnF,SAASC,IAA8D;AAC5E,SAAOC,EAAWH,CAA2B;AAC/C;"}

package/dist/components/Common/Fields/hooks/useField.js

@@ -1,53 +1,59 @@
-import { useFormContext as k, useController as w } from "react-hook-form";
-import y, { useMemo as D } from "react";
-import { createMarkup as E } from "../../../../helpers/formattedStrings.js";
-import { useForkRef as I } from "../../../../hooks/useForkRef/useForkRef.js";
-const R = (e) => !e || typeof e != "string" ? e : y.createElement("div", {
-  dangerouslySetInnerHTML: E(e)
+import { useFormContext as B, useController as M } from "react-hook-form";
+import w, { useCallback as D, useMemo as I } from "react";
+import { useFieldElementRegistryContext as S } from "./fieldElementRegistry.js";
+import { createMarkup as _ } from "../../../../helpers/formattedStrings.js";
+import { useForkRef as b } from "../../../../hooks/useForkRef/useForkRef.js";
+const q = (e) => !e || typeof e != "string" ? e : w.createElement("div", {
+  dangerouslySetInnerHTML: _(e)
 });
-function L({
+function A({
   name: e,
-  control: n,
-  rules: m = {},
-  defaultValue: d,
-  errorMessage: t,
-  isRequired: s = !1,
+  control: s,
+  rules: d = {},
+  defaultValue: g,
+  errorMessage: l,
+  isRequired: i = !1,
   onChange: p,
-  onBlur: h,
-  transform: l,
-  description: c,
-  inputRef: v
+  onBlur: C,
+  transform: c,
+  description: u,
+  inputRef: h
 }) {
-  const C = k(), a = n ?? C?.control;
-  if (!a)
+  const v = B(), f = s ?? v?.control;
+  if (!f)
     throw new Error("useField requires either a `control` prop or a FormProvider ancestor.");
-  const { field: r, fieldState: o } = w({
+  const { field: r, fieldState: t } = M({
     name: e,
-    control: a,
+    control: f,
     rules: {
-      required: s,
-      ...m
+      required: i,
+      ...d
     },
-    defaultValue: d
-  }), { value: g } = r, F = I(r.ref, v), x = (i) => {
-    const f = l ? l(i) : i;
-    r.onChange(f), p?.(f);
-  }, B = () => {
-    r.onBlur(), h?.();
-  }, u = n ? !!o.error || !!t : !!o.error, M = D(() => R(c), [c]);
+    defaultValue: g
+  }), { value: F } = r, n = S(), y = D(
+    (o) => {
+      n && n.register(e, o);
+    },
+    [n, e]
+  ), R = b(r.ref, h, y), x = (o) => {
+    const m = c ? c(o) : o;
+    r.onChange(m), p?.(m);
+  }, E = () => {
+    r.onBlur(), C?.();
+  }, a = s ? !!t.error || !!l : !!t.error, k = I(() => q(u), [u]);
   return {
     name: r.name,
-    value: g,
-    inputRef: F,
-    isInvalid: u,
-    errorMessage: u ? t ?? o.error?.message : void 0,
+    value: F,
+    inputRef: R,
+    isInvalid: a,
+    errorMessage: a ? l ?? t.error?.message : void 0,
     onChange: x,
-    onBlur: B,
-    isRequired: s,
-    description: M
+    onBlur: E,
+    isRequired: i,
+    description: k
   };
 }
 export {
-  L as useField
+  A as useField
 };
 //# sourceMappingURL=useField.js.map

package/dist/components/Common/Fields/hooks/useField.js.map

@@ -1 +1 @@
-{"version":3,"file":"useField.js","sources":["../../../../../src/components/Common/Fields/hooks/useField.ts"],"sourcesContent":["import type { Control, RegisterOptions } from 'react-hook-form'\nimport { useController, useFormContext } from 'react-hook-form'\nimport React, { useMemo, type Ref } from 'react'\nimport { createMarkup } from '@/helpers/formattedStrings'\nimport { useForkRef } from '@/hooks/useForkRef/useForkRef'\n\nexport type Transform<TValue> = (value: TValue) => TValue\n\nexport interface UseFieldProps<TValue = string, TRef = HTMLInputElement> {\n  name: string\n  control?: Control\n  rules?: RegisterOptions\n  defaultValue?: TValue\n  errorMessage?: string\n  isRequired?: boolean\n  onChange?: (value: TValue) => void\n  onBlur?: () => void\n  transform?: Transform<TValue>\n  description?: React.ReactNode\n  inputRef?: Ref<TRef>\n}\n\nconst processDescription = (description: React.ReactNode): React.ReactNode => {\n  if (!description || typeof description !== 'string') {\n    return description\n  }\n\n  // Use DOMPurify to sanitize the string and return a React element\n  return React.createElement('div', {\n    dangerouslySetInnerHTML: createMarkup(description),\n  })\n}\n\nexport function useField<TValue = string, TRef = HTMLInputElement>({\n  name,\n  control: controlProp,\n  rules = {},\n  defaultValue,\n  errorMessage,\n  isRequired = false,\n  onChange,\n  onBlur,\n  transform,\n  description,\n  inputRef,\n}: UseFieldProps<TValue, TRef>) {\n  // useFormContext returns null outside FormProvider at runtime despite its non-null type signature\n  const formContext = useFormContext() as ReturnType<typeof useFormContext> | null\n  const resolvedControl = controlProp ?? formContext?.control\n\n  if (!resolvedControl) {\n    throw new Error('useField requires either a `control` prop or a FormProvider ancestor.')\n  }\n\n  const { field, fieldState } = useController({\n    name,\n    control: resolvedControl,\n    rules: {\n      required: isRequired,\n      ...rules,\n    },\n    defaultValue,\n  })\n\n  const { value } = field\n\n  const ref = useForkRef(field.ref, inputRef)\n\n  const handleChange = (updatedValue: TValue) => {\n    const value = transform ? transform(updatedValue) : updatedValue\n    field.onChange(value)\n    onChange?.(value)\n  }\n\n  const handleBlur = () => {\n    field.onBlur()\n    onBlur?.()\n  }\n\n  // When control is explicitly provided (hook-based path),\n  // errorMessage is a resolved error and is authoritative.\n  // When control comes from context (legacy pre-built path),\n  // errorMessage is a static i18n template — only display it when RHF has an error.\n  const isInvalid = controlProp ? !!fieldState.error || !!errorMessage : !!fieldState.error\n\n  const processedDescription = useMemo(() => processDescription(description), [description])\n\n  return {\n    name: field.name,\n    value: value as TValue,\n    inputRef: ref,\n    isInvalid,\n    errorMessage: isInvalid ? (errorMessage ?? fieldState.error?.message) : undefined,\n    onChange: handleChange,\n    onBlur: handleBlur,\n    isRequired,\n    description: processedDescription,\n  }\n}\n"],"names":["processDescription","description","React","createMarkup","useField","name","controlProp","rules","defaultValue","errorMessage","isRequired","onChange","onBlur","transform","inputRef","formContext","useFormContext","resolvedControl","field","fieldState","useController","value","ref","useForkRef","handleChange","updatedValue","handleBlur","isInvalid","processedDescription","useMemo"],"mappings":";;;;AAsBA,MAAMA,IAAqB,CAACC,MACtB,CAACA,KAAe,OAAOA,KAAgB,WAClCA,IAIFC,EAAM,cAAc,OAAO;AAAA,EAChC,yBAAyBC,EAAaF,CAAW;AAAA,CAClD;AAGI,SAASG,EAAmD;AAAA,EACjE,MAAAC;AAAA,EACA,SAASC;AAAA,EACT,OAAAC,IAAQ,CAAA;AAAA,EACR,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAZ;AAAA,EACA,UAAAa;AACF,GAAgC;AAE9B,QAAMC,IAAcC,EAAA,GACdC,IAAkBX,KAAeS,GAAa;AAEpD,MAAI,CAACE;AACH,UAAM,IAAI,MAAM,uEAAuE;AAGzF,QAAM,EAAE,OAAAC,GAAO,YAAAC,EAAA,IAAeC,EAAc;AAAA,IAC1C,MAAAf;AAAA,IACA,SAASY;AAAA,IACT,OAAO;AAAA,MACL,UAAUP;AAAA,MACV,GAAGH;AAAA,IAAA;AAAA,IAEL,cAAAC;AAAA,EAAA,CACD,GAEK,EAAE,OAAAa,MAAUH,GAEZI,IAAMC,EAAWL,EAAM,KAAKJ,CAAQ,GAEpCU,IAAe,CAACC,MAAyB;AAC7C,UAAMJ,IAAQR,IAAYA,EAAUY,CAAY,IAAIA;AACpD,IAAAP,EAAM,SAASG,CAAK,GACpBV,IAAWU,CAAK;AAAA,EAClB,GAEMK,IAAa,MAAM;AACvB,IAAAR,EAAM,OAAA,GACNN,IAAA;AAAA,EACF,GAMMe,IAAYrB,IAAc,CAAC,CAACa,EAAW,SAAS,CAAC,CAACV,IAAe,CAAC,CAACU,EAAW,OAE9ES,IAAuBC,EAAQ,MAAM7B,EAAmBC,CAAW,GAAG,CAACA,CAAW,CAAC;AAEzF,SAAO;AAAA,IACL,MAAMiB,EAAM;AAAA,IACZ,OAAAG;AAAA,IACA,UAAUC;AAAA,IACV,WAAAK;AAAA,IACA,cAAcA,IAAalB,KAAgBU,EAAW,OAAO,UAAW;AAAA,IACxE,UAAUK;AAAA,IACV,QAAQE;AAAA,IACR,YAAAhB;AAAA,IACA,aAAakB;AAAA,EAAA;AAEjB;"}
+{"version":3,"file":"useField.js","sources":["../../../../../src/components/Common/Fields/hooks/useField.ts"],"sourcesContent":["import type { Control, RegisterOptions } from 'react-hook-form'\nimport { useController, useFormContext } from 'react-hook-form'\nimport React, { useCallback, useMemo, type Ref } from 'react'\nimport { useFieldElementRegistryContext } from './fieldElementRegistry'\nimport { createMarkup } from '@/helpers/formattedStrings'\nimport { useForkRef } from '@/hooks/useForkRef/useForkRef'\n\nexport type Transform<TValue> = (value: TValue) => TValue\n\nexport interface UseFieldProps<TValue = string, TRef = HTMLInputElement> {\n  name: string\n  control?: Control\n  rules?: RegisterOptions\n  defaultValue?: TValue\n  errorMessage?: string\n  isRequired?: boolean\n  onChange?: (value: TValue) => void\n  onBlur?: () => void\n  transform?: Transform<TValue>\n  description?: React.ReactNode\n  inputRef?: Ref<TRef>\n}\n\nconst processDescription = (description: React.ReactNode): React.ReactNode => {\n  if (!description || typeof description !== 'string') {\n    return description\n  }\n\n  // Use DOMPurify to sanitize the string and return a React element\n  return React.createElement('div', {\n    dangerouslySetInnerHTML: createMarkup(description),\n  })\n}\n\nexport function useField<TValue = string, TRef = HTMLInputElement>({\n  name,\n  control: controlProp,\n  rules = {},\n  defaultValue,\n  errorMessage,\n  isRequired = false,\n  onChange,\n  onBlur,\n  transform,\n  description,\n  inputRef,\n}: UseFieldProps<TValue, TRef>) {\n  // useFormContext returns null outside FormProvider at runtime despite its non-null type signature\n  const formContext = useFormContext() as ReturnType<typeof useFormContext> | null\n  const resolvedControl = controlProp ?? formContext?.control\n\n  if (!resolvedControl) {\n    throw new Error('useField requires either a `control` prop or a FormProvider ancestor.')\n  }\n\n  const { field, fieldState } = useController({\n    name,\n    control: resolvedControl,\n    rules: {\n      required: isRequired,\n      ...rules,\n    },\n    defaultValue,\n  })\n\n  const { value } = field\n\n  const fieldElementRegistry = useFieldElementRegistryContext()\n  const registryRef = useCallback(\n    (element: HTMLElement | null) => {\n      if (!fieldElementRegistry) return\n      fieldElementRegistry.register(name, element)\n    },\n    [fieldElementRegistry, name],\n  )\n\n  const ref = useForkRef(field.ref, inputRef, registryRef)\n\n  const handleChange = (updatedValue: TValue) => {\n    const value = transform ? transform(updatedValue) : updatedValue\n    field.onChange(value)\n    onChange?.(value)\n  }\n\n  const handleBlur = () => {\n    field.onBlur()\n    onBlur?.()\n  }\n\n  // When control is explicitly provided (hook-based path),\n  // errorMessage is a resolved error and is authoritative.\n  // When control comes from context (legacy pre-built path),\n  // errorMessage is a static i18n template — only display it when RHF has an error.\n  const isInvalid = controlProp ? !!fieldState.error || !!errorMessage : !!fieldState.error\n\n  const processedDescription = useMemo(() => processDescription(description), [description])\n\n  return {\n    name: field.name,\n    value: value as TValue,\n    inputRef: ref,\n    isInvalid,\n    errorMessage: isInvalid ? (errorMessage ?? fieldState.error?.message) : undefined,\n    onChange: handleChange,\n    onBlur: handleBlur,\n    isRequired,\n    description: processedDescription,\n  }\n}\n"],"names":["processDescription","description","React","createMarkup","useField","name","controlProp","rules","defaultValue","errorMessage","isRequired","onChange","onBlur","transform","inputRef","formContext","useFormContext","resolvedControl","field","fieldState","useController","value","fieldElementRegistry","useFieldElementRegistryContext","registryRef","useCallback","element","ref","useForkRef","handleChange","updatedValue","handleBlur","isInvalid","processedDescription","useMemo"],"mappings":";;;;;AAuBA,MAAMA,IAAqB,CAACC,MACtB,CAACA,KAAe,OAAOA,KAAgB,WAClCA,IAIFC,EAAM,cAAc,OAAO;AAAA,EAChC,yBAAyBC,EAAaF,CAAW;AAAA,CAClD;AAGI,SAASG,EAAmD;AAAA,EACjE,MAAAC;AAAA,EACA,SAASC;AAAA,EACT,OAAAC,IAAQ,CAAA;AAAA,EACR,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAZ;AAAA,EACA,UAAAa;AACF,GAAgC;AAE9B,QAAMC,IAAcC,EAAA,GACdC,IAAkBX,KAAeS,GAAa;AAEpD,MAAI,CAACE;AACH,UAAM,IAAI,MAAM,uEAAuE;AAGzF,QAAM,EAAE,OAAAC,GAAO,YAAAC,EAAA,IAAeC,EAAc;AAAA,IAC1C,MAAAf;AAAA,IACA,SAASY;AAAA,IACT,OAAO;AAAA,MACL,UAAUP;AAAA,MACV,GAAGH;AAAA,IAAA;AAAA,IAEL,cAAAC;AAAA,EAAA,CACD,GAEK,EAAE,OAAAa,MAAUH,GAEZI,IAAuBC,EAAA,GACvBC,IAAcC;AAAA,IAClB,CAACC,MAAgC;AAC/B,MAAKJ,KACLA,EAAqB,SAASjB,GAAMqB,CAAO;AAAA,IAC7C;AAAA,IACA,CAACJ,GAAsBjB,CAAI;AAAA,EAAA,GAGvBsB,IAAMC,EAAWV,EAAM,KAAKJ,GAAUU,CAAW,GAEjDK,IAAe,CAACC,MAAyB;AAC7C,UAAMT,IAAQR,IAAYA,EAAUiB,CAAY,IAAIA;AACpD,IAAAZ,EAAM,SAASG,CAAK,GACpBV,IAAWU,CAAK;AAAA,EAClB,GAEMU,IAAa,MAAM;AACvB,IAAAb,EAAM,OAAA,GACNN,IAAA;AAAA,EACF,GAMMoB,IAAY1B,IAAc,CAAC,CAACa,EAAW,SAAS,CAAC,CAACV,IAAe,CAAC,CAACU,EAAW,OAE9Ec,IAAuBC,EAAQ,MAAMlC,EAAmBC,CAAW,GAAG,CAACA,CAAW,CAAC;AAEzF,SAAO;AAAA,IACL,MAAMiB,EAAM;AAAA,IACZ,OAAAG;AAAA,IACA,UAAUM;AAAA,IACV,WAAAK;AAAA,IACA,cAAcA,IAAavB,KAAgBU,EAAW,OAAO,UAAW;AAAA,IACxE,UAAUU;AAAA,IACV,QAAQE;AAAA,IACR,YAAArB;AAAA,IACA,aAAauB;AAAA,EAAA;AAEjB;"}