@protonradio/proton-ui 0.11.24 → 0.11.25-beta.2

package/dist/components/DataTable/DataTable.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../node_modules/react/jsx-runtime.cjs.js"),D=require("react"),s=require("../Table/Table.cjs.js"),f=require("../Elevation/Elevation.cjs.js"),_=require("../Tombstone/Tombstone.cjs.js"),q=require("../Icon/Icon.cjs.js");;/* empty css                   */function B(r){const{columns:x,data:l=[],loading:j=!1,tombstoneComponent:u,error:a=!1,name:d,onRowClick:m,emptyMessage:T="Data Unavailable",errorMessage:C,loadingRows:g=5,"data-testid":c}=r,y="sortableColumns"in r?r.sortableColumns:[],b="sortedBy"in r?r.sortedBy:void 0,p="sortDirection"in r?r.sortDirection:void 0,h="onSort"in r?r.onSort:void 0,o=D.useMemo(()=>x.filter(e=>!e.hidden),[x]),S=e=>{if(!h)return;const n=b===e.id&&p==="ASC"?"DESC":"ASC";h(e.id,n)},v=e=>b!==e?"none":p==="ASC"?"ascending":"descending";if(a){const e=typeof a=="string"?a:C||"An error occurred";return t.jsxRuntimeExports.jsx(E,{columns:o,message:e,name:d,testId:c,isError:!0})}return j?t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable","data-testid":c,"aria-busy":"true","aria-label":`Loading ${d}...`,children:t.jsxRuntimeExports.jsxs(s.Table,{name:d,children:[t.jsxRuntimeExports.jsx(s.Table.Header,{children:o.map(e=>t.jsxRuntimeExports.jsx(s.Table.Column,{id:e.id,children:e.header},e.id))}),t.jsxRuntimeExports.jsx(s.Table.Body,{children:Array.from({length:g}).map((e,i)=>t.jsxRuntimeExports.jsx(s.Table.Row,{children:o.map(n=>t.jsxRuntimeExports.jsx(s.Table.Cell,{children:u||t.jsxRuntimeExports.jsx(_.Tombstone,{height:"1rem",width:i%3===0?"80%":i%3===1?"60%":"90%"})},n.id))},`loading-${i}`))})]})}):!l||l.length===0?t.jsxRuntimeExports.jsx(E,{columns:o,message:T,name:d,testId:c}):t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable","data-testid":c,children:t.jsxRuntimeExports.jsxs(s.Table,{name:d,children:[t.jsxRuntimeExports.jsx(s.Table.Header,{children:o.map(e=>{const i=y.includes(e.id),n=v(e.id);return t.jsxRuntimeExports.jsx(s.Table.Column,{id:e.id,...i&&{"aria-sort":n},children:t.jsxRuntimeExports.jsxs("span",{className:"proton-DataTable__header-content",children:[e.header,i&&t.jsxRuntimeExports.jsx("button",{className:"proton-DataTable__sort-button",onClick:()=>S(e),"aria-label":`Sort by ${e.header}: ${n}`,type:"button",children:t.jsxRuntimeExports.jsx(q.Icon,{id:"chevron-up",size:12,color:n==="ascending"?"var(--proton-color__primary)":"currentColor"})})]})},e.id)})}),t.jsxRuntimeExports.jsx(s.Table.Body,{children:l.map((e,i)=>{const n=((e==null?void 0:e.id)||(e==null?void 0:e.key))??i;return t.jsxRuntimeExports.jsx(s.Table.Row,{onClick:m?()=>m(e):void 0,children:o.map(R=>t.jsxRuntimeExports.jsx(s.Table.Cell,{children:R.cell(e)},R.id))},n)})})]})})}const E=({columns:r,message:x,name:l,testId:j,isError:u=!1})=>t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable","data-testid":j,children:t.jsxRuntimeExports.jsxs(s.Table,{name:l,children:[t.jsxRuntimeExports.jsx(s.Table.Header,{children:r==null?void 0:r.map(a=>t.jsxRuntimeExports.jsx(s.Table.Column,{id:a.id,children:a.header},a.id))}),t.jsxRuntimeExports.jsx(s.Table.Body,{children:t.jsxRuntimeExports.jsx(s.Table.Row,{children:t.jsxRuntimeExports.jsx(s.Table.Cell,{colSpan:(r==null?void 0:r.length)||1,children:t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable__message-cell",role:u?"alert":"status","aria-live":"polite",children:t.jsxRuntimeExports.jsx(f.Elevation,{children:t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable__empty-cell",children:x})})})})})})]})});exports.DataTable=B;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../node_modules/react/jsx-runtime.cjs.js"),x=require("react"),n=require("../Table/Table.cjs.js"),z=require("../Elevation/Elevation.cjs.js"),F=require("../Tombstone/Tombstone.cjs.js"),L=require("../Icon/Icon.cjs.js");;/* empty css                   */function P(r){const{columns:R,data:o=[],loading:f=!1,tombstoneComponent:T,error:l=!1,name:m,onRowClick:d,emptyMessage:M="Data Unavailable",errorMessage:N,loadingRows:A=5,"data-testid":b}=r,H="sortableColumns"in r?r.sortableColumns:[],D="sortedBy"in r?r.sortedBy:void 0,v="sortDirection"in r?r.sortDirection:void 0,k="onSort"in r?r.onSort:void 0,u=x.useMemo(()=>R.filter(e=>!e.hidden),[R]),$=x.useRef(o),K=x.useRef(d),p=x.useRef(new Map),_=x.useRef("");$.current=o,K.current=d;const E=x.useMemo(()=>o?o.map((e,a)=>((e==null?void 0:e.id)||(e==null?void 0:e.key))??a).join(","):"",[o]);x.useMemo(()=>{if(!d||!o){p.current.clear();return}E!==_.current&&(p.current.clear(),o.forEach((e,a)=>{const s=String((e==null?void 0:e.id)||(e==null?void 0:e.key)||a),h=(()=>{const c=s,y=a;return()=>{console.log(`[DataTable Handler] Handler for key "${c}" (index ${y}) called`);const g=$.current,q=K.current;if(!g||!q)return;const C=g.find((i,S)=>String((i==null?void 0:i.id)||(i==null?void 0:i.key)||S)===c);C?(console.log(`[DataTable Handler] Found row for key "${c}":`,C),q(C)):console.warn(`[DataTable] Row not found for key: ${c}`,{availableKeys:g.map((i,S)=>String((i==null?void 0:i.id)||(i==null?void 0:i.key)||S)),capturedKey:c})}})();console.log(`[DataTable] Creating handler for rowKey: "${s}", index: ${a}`),p.current.set(s,h)}),_.current=E)},[E,d,o]);const j=p.current,I=e=>{if(!k)return;const s=D===e.id&&v==="ASC"?"DESC":"ASC";k(e.id,s)},w=e=>D!==e?"none":v==="ASC"?"ascending":"descending";if(l){const e=typeof l=="string"?l:N||"An error occurred";return t.jsxRuntimeExports.jsx(B,{columns:u,message:e,name:m,testId:b,isError:!0})}return f?t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable","data-testid":b,"aria-busy":"true","aria-label":`Loading ${m}...`,children:t.jsxRuntimeExports.jsxs(n.Table,{name:m,children:[t.jsxRuntimeExports.jsx(n.Table.Header,{children:u.map(e=>t.jsxRuntimeExports.jsx(n.Table.Column,{id:e.id,children:e.header},e.id))}),t.jsxRuntimeExports.jsx(n.Table.Body,{children:Array.from({length:A}).map((e,a)=>t.jsxRuntimeExports.jsx(n.Table.Row,{children:u.map(s=>t.jsxRuntimeExports.jsx(n.Table.Cell,{children:T||t.jsxRuntimeExports.jsx(F.Tombstone,{height:"1rem",width:a%3===0?"80%":a%3===1?"60%":"90%"})},s.id))},`loading-${a}`))})]})}):!o||o.length===0?t.jsxRuntimeExports.jsx(B,{columns:u,message:M,name:m,testId:b}):t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable","data-testid":b,children:t.jsxRuntimeExports.jsxs(n.Table,{name:m,children:[t.jsxRuntimeExports.jsx(n.Table.Header,{children:u.map(e=>{const a=H.includes(e.id),s=w(e.id);return t.jsxRuntimeExports.jsx(n.Table.Column,{id:e.id,...a&&{"aria-sort":s},children:t.jsxRuntimeExports.jsxs("span",{className:"proton-DataTable__header-content",children:[e.header,a&&t.jsxRuntimeExports.jsx("button",{className:"proton-DataTable__sort-button",onClick:()=>I(e),"aria-label":`Sort by ${e.header}: ${s}`,type:"button",children:t.jsxRuntimeExports.jsx(L.Icon,{id:"chevron-up",size:12,color:s==="ascending"?"var(--proton-color__primary)":"currentColor"})})]})},e.id)})}),t.jsxRuntimeExports.jsx(n.Table.Body,{children:o.map((e,a)=>{const s=String((e==null?void 0:e.id)||(e==null?void 0:e.key)||a),h=j==null?void 0:j.get(s);!h&&d&&console.warn(`[DataTable] Handler not found for key: ${s}`,{availableKeys:Array.from((j==null?void 0:j.keys())||[]),requestedKey:s,keyType:typeof s});const c=h||(d?()=>d(e):void 0);return t.jsxRuntimeExports.jsx(n.Table.Row,{onClick:c,children:u.map(y=>t.jsxRuntimeExports.jsx(n.Table.Cell,{children:y.cell(e)},y.id))},s)})})]})})}const B=({columns:r,message:R,name:o,testId:f,isError:T=!1})=>t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable","data-testid":f,children:t.jsxRuntimeExports.jsxs(n.Table,{name:o,children:[t.jsxRuntimeExports.jsx(n.Table.Header,{children:r==null?void 0:r.map(l=>t.jsxRuntimeExports.jsx(n.Table.Column,{id:l.id,children:l.header},l.id))}),t.jsxRuntimeExports.jsx(n.Table.Body,{children:t.jsxRuntimeExports.jsx(n.Table.Row,{children:t.jsxRuntimeExports.jsx(n.Table.Cell,{colSpan:(r==null?void 0:r.length)||1,children:t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable__message-cell",role:T?"alert":"status","aria-live":"polite",children:t.jsxRuntimeExports.jsx(z.Elevation,{children:t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable__empty-cell",children:R})})})})})})]})});exports.DataTable=P;
 //# sourceMappingURL=DataTable.cjs.js.map

package/dist/components/DataTable/DataTable.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.cjs.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["\"use client\";\n\nimport { AriaAttributes, ReactNode, useMemo } from \"react\";\nimport { Table } from \"../Table/Table\";\nimport { Elevation } from \"../Elevation/Elevation\";\nimport { Tombstone } from \"../Tombstone/Tombstone\";\nimport { Icon } from \"../Icon/Icon\";\nimport \"./DataTable.css\";\n\nexport type SortDirection = \"ASC\" | \"DESC\";\n\ntype SortingConfig<T> =\n  | {\n      /** When sorting is enabled, all these props must be provided together. */\n      sortableColumns: string[];\n      sortedBy: string;\n      sortDirection: SortDirection;\n      onSort: (columnId: string, direction: SortDirection) => void;\n    }\n  | {\n      /** When no sorting is needed, none of these props should be provided */\n      sortableColumns?: never;\n      sortedBy?: never;\n      sortDirection?: never;\n      onSort?: never;\n    };\n\nexport interface DataTableColumn<T> {\n  /** id for the column */\n  id: string;\n  /** Header text or component */\n  header: ReactNode;\n  /** Function to render cell content from row data */\n  cell: (row: T) => ReactNode;\n  /** Whether this column should be hidden */\n  hidden?: boolean;\n}\n\ninterface BaseDataTableProps<T = any> {\n  /** Array of column definitions\n   * - {@link DataTableColumn}\n   */\n  columns: DataTableColumn<T>[];\n  /** Array of data objects to display. Can be empty array for loading/empty states */\n  data?: T[] | null;\n  /** Loading state */\n  loading?: boolean;\n  /** Tombstone component to use when loading */\n  tombstoneComponent?: ReactNode;\n  /** Error state */\n  error?: boolean | string;\n  /** Table name/caption for accessibility. This provides essential context for screen readers. */\n  name: string;\n  /** Callback when a row is clicked */\n  onRowClick?: (row: T) => void;\n  /** Custom empty state message */\n  emptyMessage?: string;\n  /** Custom error message */\n  errorMessage?: string;\n  /** Number of skeleton rows to show in loading state */\n  loadingRows?: number;\n  /** Test ID for testing purposes */\n  \"data-testid\"?: string;\n}\n\nexport type DataTableProps<T = any> = BaseDataTableProps<T> & SortingConfig<T>;\n\n/**\n * DataTable is a declarative wrapper around the base Table component that provides:\n *\n * API:\n *  - {@link DataTableProps}\n *  - {@link SortingConfig}\n */\nexport function DataTable<T = any>(props: DataTableProps<T>) {\n  const {\n    columns,\n    data = [],\n    loading = false,\n    tombstoneComponent,\n    error = false,\n    name,\n    onRowClick,\n    emptyMessage = \"Data Unavailable\",\n    errorMessage,\n    loadingRows = 5,\n    \"data-testid\": testId,\n  } = props;\n\n  const sortableColumns =\n    \"sortableColumns\" in props ? props.sortableColumns : [];\n  const sortedBy = \"sortedBy\" in props ? props.sortedBy : undefined;\n  const sortDirection =\n    \"sortDirection\" in props ? props.sortDirection : undefined;\n  const onSort = \"onSort\" in props ? props.onSort : undefined;\n\n  const visibleColumns = useMemo(\n    () => columns.filter((col) => !col.hidden),\n    [columns]\n  );\n\n  const handleSortClick = (column: DataTableColumn<T>) => {\n    if (!onSort) return;\n\n    const isCurrentlySorted = sortedBy === column.id;\n    const newDirection =\n      isCurrentlySorted && sortDirection === \"ASC\" ? \"DESC\" : \"ASC\";\n\n    onSort(column.id, newDirection);\n  };\n\n  const getSortState = (columnId: string): AriaAttributes[\"aria-sort\"] => {\n    if (sortedBy !== columnId) return \"none\";\n    return sortDirection === \"ASC\" ? \"ascending\" : \"descending\";\n  };\n\n  if (error) {\n    const message =\n      typeof error === \"string\" ? error : errorMessage || \"An error occurred\";\n    return (\n      <EmptyState\n        columns={visibleColumns}\n        message={message}\n        name={name}\n        testId={testId}\n        isError\n      />\n    );\n  }\n\n  if (loading) {\n    return (\n      <div\n        className=\"proton-DataTable\"\n        data-testid={testId}\n        aria-busy=\"true\"\n        aria-label={`Loading ${name}...`}\n      >\n        <Table name={name}>\n          <Table.Header>\n            {visibleColumns.map((column) => (\n              <Table.Column key={column.id} id={column.id}>\n                {column.header}\n              </Table.Column>\n            ))}\n          </Table.Header>\n          <Table.Body>\n            {Array.from({ length: loadingRows }).map((_, index) => (\n              <Table.Row key={`loading-${index}`}>\n                {visibleColumns.map((column) => (\n                  <Table.Cell key={column.id}>\n                    {tombstoneComponent || (\n                      <Tombstone\n                        height=\"1rem\"\n                        width={\n                          // cascading tombstone widths\n                          index % 3 === 0\n                            ? \"80%\"\n                            : index % 3 === 1\n                              ? \"60%\"\n                              : \"90%\"\n                        }\n                      />\n                    )}\n                  </Table.Cell>\n                ))}\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </div>\n    );\n  }\n\n  if (!data || data.length === 0) {\n    return (\n      <EmptyState\n        columns={visibleColumns}\n        message={emptyMessage}\n        name={name}\n        testId={testId}\n      />\n    );\n  }\n\n  return (\n    <div className=\"proton-DataTable\" data-testid={testId}>\n      <Table name={name}>\n        <Table.Header>\n          {visibleColumns.map((column) => {\n            const isSortable = sortableColumns.includes(column.id);\n            const sortState = getSortState(column.id);\n\n            return (\n              <Table.Column\n                key={column.id}\n                id={column.id}\n                {...(isSortable && { \"aria-sort\": sortState })}\n              >\n                <span className=\"proton-DataTable__header-content\">\n                  {column.header}\n                  {isSortable && (\n                    <button\n                      className=\"proton-DataTable__sort-button\"\n                      onClick={() => handleSortClick(column)}\n                      aria-label={`Sort by ${column.header}: ${sortState}`}\n                      type=\"button\"\n                    >\n                      <Icon\n                        id={\"chevron-up\"}\n                        size={12}\n                        color={\n                          sortState === \"ascending\"\n                            ? \"var(--proton-color__primary)\"\n                            : \"currentColor\"\n                        }\n                      />\n                    </button>\n                  )}\n                </span>\n              </Table.Column>\n            );\n          })}\n        </Table.Header>\n        <Table.Body>\n          {data.map((row, index) => {\n            // Generate a key from the row data or use index as fallback\n            const rowKey = ((row as any)?.id || (row as any)?.key) ?? index;\n\n            return (\n              <Table.Row\n                key={rowKey}\n                onClick={onRowClick ? () => onRowClick(row) : undefined}\n              >\n                {visibleColumns.map((column) => (\n                  <Table.Cell key={column.id}>{column.cell(row)}</Table.Cell>\n                ))}\n              </Table.Row>\n            );\n          })}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n\nconst EmptyState = ({\n  columns,\n  message,\n  name,\n  testId,\n  isError = false,\n}: Partial<DataTableProps> & {\n  testId?: string;\n  message: string;\n  isError?: boolean;\n}) => {\n  return (\n    <div className=\"proton-DataTable\" data-testid={testId}>\n      <Table name={name}>\n        <Table.Header>\n          {columns?.map((column) => (\n            <Table.Column key={column.id} id={column.id}>\n              {column.header}\n            </Table.Column>\n          ))}\n        </Table.Header>\n        <Table.Body>\n          <Table.Row>\n            <Table.Cell colSpan={columns?.length || 1}>\n              <div\n                className=\"proton-DataTable__message-cell\"\n                role={isError ? \"alert\" : \"status\"}\n                aria-live=\"polite\"\n              >\n                <Elevation>\n                  <div className=\"proton-DataTable__empty-cell\">{message}</div>\n                </Elevation>\n              </div>\n            </Table.Cell>\n          </Table.Row>\n        </Table.Body>\n      </Table>\n    </div>\n  );\n};\n"],"names":["DataTable","props","columns","data","loading","tombstoneComponent","error","name","onRowClick","emptyMessage","errorMessage","loadingRows","testId","sortableColumns","sortedBy","sortDirection","onSort","visibleColumns","useMemo","col","handleSortClick","column","newDirection","getSortState","columnId","message","jsx","EmptyState","jsxs","Table","_","index","Tombstone","isSortable","sortState","Icon","row","rowKey","isError","Elevation"],"mappings":"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"}
+{"version":3,"file":"DataTable.cjs.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["\"use client\";\n\nimport { AriaAttributes, ReactNode, useMemo, useRef } from \"react\";\nimport { Table } from \"../Table/Table\";\nimport { Elevation } from \"../Elevation/Elevation\";\nimport { Tombstone } from \"../Tombstone/Tombstone\";\nimport { Icon } from \"../Icon/Icon\";\nimport \"./DataTable.css\";\n\nexport type SortDirection = \"ASC\" | \"DESC\";\n\ntype SortingConfig<T> =\n  | {\n      /** When sorting is enabled, all these props must be provided together. */\n      sortableColumns: string[];\n      sortedBy: string;\n      sortDirection: SortDirection;\n      onSort: (columnId: string, direction: SortDirection) => void;\n    }\n  | {\n      /** When no sorting is needed, none of these props should be provided */\n      sortableColumns?: never;\n      sortedBy?: never;\n      sortDirection?: never;\n      onSort?: never;\n    };\n\nexport interface DataTableColumn<T> {\n  /** id for the column */\n  id: string;\n  /** Header text or component */\n  header: ReactNode;\n  /** Function to render cell content from row data */\n  cell: (row: T) => ReactNode;\n  /** Whether this column should be hidden */\n  hidden?: boolean;\n}\n\ninterface BaseDataTableProps<T = any> {\n  /** Array of column definitions\n   * - {@link DataTableColumn}\n   */\n  columns: DataTableColumn<T>[];\n  /** Array of data objects to display. Can be empty array for loading/empty states */\n  data?: T[] | null;\n  /** Loading state */\n  loading?: boolean;\n  /** Tombstone component to use when loading */\n  tombstoneComponent?: ReactNode;\n  /** Error state */\n  error?: boolean | string;\n  /** Table name/caption for accessibility. This provides essential context for screen readers. */\n  name: string;\n  /** Callback when a row is clicked */\n  onRowClick?: (row: T) => void;\n  /** Custom empty state message */\n  emptyMessage?: string;\n  /** Custom error message */\n  errorMessage?: string;\n  /** Number of skeleton rows to show in loading state */\n  loadingRows?: number;\n  /** Test ID for testing purposes */\n  \"data-testid\"?: string;\n}\n\nexport type DataTableProps<T = any> = BaseDataTableProps<T> & SortingConfig<T>;\n\n/**\n * DataTable is a declarative wrapper around the base Table component that provides:\n *\n * API:\n *  - {@link DataTableProps}\n *  - {@link SortingConfig}\n */\nexport function DataTable<T = any>(props: DataTableProps<T>) {\n  const {\n    columns,\n    data = [],\n    loading = false,\n    tombstoneComponent,\n    error = false,\n    name,\n    onRowClick,\n    emptyMessage = \"Data Unavailable\",\n    errorMessage,\n    loadingRows = 5,\n    \"data-testid\": testId,\n  } = props;\n\n  const sortableColumns =\n    \"sortableColumns\" in props ? props.sortableColumns : [];\n  const sortedBy = \"sortedBy\" in props ? props.sortedBy : undefined;\n  const sortDirection =\n    \"sortDirection\" in props ? props.sortDirection : undefined;\n  const onSort = \"onSort\" in props ? props.onSort : undefined;\n\n  const visibleColumns = useMemo(\n    () => columns.filter((col) => !col.hidden),\n    [columns]\n  );\n\n  // Create stable onClick handlers for each row to enable proper memoization\n  // Handlers look up the row by key at call time using refs, so they don't need to be recreated when data changes\n  // This ensures rows only re-render when their data actually changes, not when onClick handlers change\n  const dataRef = useRef(data);\n  const onRowClickRef = useRef(onRowClick);\n  const handlersRef = useRef<Map<string | number, () => void>>(new Map());\n  const previousRowKeysRef = useRef<string>(\"\");\n  \n  // Keep data ref up to date\n  dataRef.current = data;\n  onRowClickRef.current = onRowClick;\n\n  // Get current row keys as a stable string\n  const currentRowKeys = useMemo(() => {\n    if (!data) return \"\";\n    return data.map((r, i) => ((r as any)?.id || (r as any)?.key) ?? i).join(\",\");\n  }, [data]);\n\n  // Only update handlers when row keys change (rows added/removed), not when data changes\n  useMemo(() => {\n    if (!onRowClick || !data) {\n      handlersRef.current.clear();\n      return;\n    }\n\n    // Only recreate handlers if row keys changed\n    if (currentRowKeys !== previousRowKeysRef.current) {\n      handlersRef.current.clear();\n      \n      data.forEach((row, index) => {\n        // Normalize key to string for consistent Map storage\n        const rowKey = String((row as any)?.id || (row as any)?.key || index);\n        // Handler looks up row by key at call time, so it always gets current data\n        // Use IIFE to properly capture rowKey in closure for each iteration\n        const handler = (() => {\n          const capturedRowKey = rowKey;\n          const capturedIndex = index;\n          return () => {\n            console.log(`[DataTable Handler] Handler for key \"${capturedRowKey}\" (index ${capturedIndex}) called`);\n            const currentData = dataRef.current;\n            const currentOnRowClick = onRowClickRef.current;\n            if (!currentData || !currentOnRowClick) return;\n            \n            // Find row by matching the key - normalize to string for comparison\n            // Use same logic as when creating the key: String((r as any)?.id || (r as any)?.key || i)\n            const currentRow = currentData.find((r, i) => {\n              const rKey = String((r as any)?.id || (r as any)?.key || i);\n              return rKey === capturedRowKey;\n            });\n            if (currentRow) {\n              console.log(`[DataTable Handler] Found row for key \"${capturedRowKey}\":`, currentRow);\n              currentOnRowClick(currentRow);\n            } else {\n              // Debug: log if row not found\n              console.warn(`[DataTable] Row not found for key: ${capturedRowKey}`, {\n                availableKeys: currentData.map((r, i) => String((r as any)?.id || (r as any)?.key || i)),\n                capturedKey: capturedRowKey,\n              });\n            }\n          };\n        })();\n        console.log(`[DataTable] Creating handler for rowKey: \"${rowKey}\", index: ${index}`);\n        handlersRef.current.set(rowKey, handler);\n      });\n      \n      previousRowKeysRef.current = currentRowKeys;\n    }\n  }, [currentRowKeys, onRowClick, data]);\n\n  const stableOnClickHandlers = handlersRef.current;\n\n  const handleSortClick = (column: DataTableColumn<T>) => {\n    if (!onSort) return;\n\n    const isCurrentlySorted = sortedBy === column.id;\n    const newDirection =\n      isCurrentlySorted && sortDirection === \"ASC\" ? \"DESC\" : \"ASC\";\n\n    onSort(column.id, newDirection);\n  };\n\n  const getSortState = (columnId: string): AriaAttributes[\"aria-sort\"] => {\n    if (sortedBy !== columnId) return \"none\";\n    return sortDirection === \"ASC\" ? \"ascending\" : \"descending\";\n  };\n\n  if (error) {\n    const message =\n      typeof error === \"string\" ? error : errorMessage || \"An error occurred\";\n    return (\n      <EmptyState\n        columns={visibleColumns}\n        message={message}\n        name={name}\n        testId={testId}\n        isError\n      />\n    );\n  }\n\n  if (loading) {\n    return (\n      <div\n        className=\"proton-DataTable\"\n        data-testid={testId}\n        aria-busy=\"true\"\n        aria-label={`Loading ${name}...`}\n      >\n        <Table name={name}>\n          <Table.Header>\n            {visibleColumns.map((column) => (\n              <Table.Column key={column.id} id={column.id}>\n                {column.header}\n              </Table.Column>\n            ))}\n          </Table.Header>\n          <Table.Body>\n            {Array.from({ length: loadingRows }).map((_, index) => (\n              <Table.Row key={`loading-${index}`}>\n                {visibleColumns.map((column) => (\n                  <Table.Cell key={column.id}>\n                    {tombstoneComponent || (\n                      <Tombstone\n                        height=\"1rem\"\n                        width={\n                          // cascading tombstone widths\n                          index % 3 === 0\n                            ? \"80%\"\n                            : index % 3 === 1\n                              ? \"60%\"\n                              : \"90%\"\n                        }\n                      />\n                    )}\n                  </Table.Cell>\n                ))}\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </div>\n    );\n  }\n\n  if (!data || data.length === 0) {\n    return (\n      <EmptyState\n        columns={visibleColumns}\n        message={emptyMessage}\n        name={name}\n        testId={testId}\n      />\n    );\n  }\n\n  return (\n    <div className=\"proton-DataTable\" data-testid={testId}>\n      <Table name={name}>\n        <Table.Header>\n          {visibleColumns.map((column) => {\n            const isSortable = sortableColumns.includes(column.id);\n            const sortState = getSortState(column.id);\n\n            return (\n              <Table.Column\n                key={column.id}\n                id={column.id}\n                {...(isSortable && { \"aria-sort\": sortState })}\n              >\n                <span className=\"proton-DataTable__header-content\">\n                  {column.header}\n                  {isSortable && (\n                    <button\n                      className=\"proton-DataTable__sort-button\"\n                      onClick={() => handleSortClick(column)}\n                      aria-label={`Sort by ${column.header}: ${sortState}`}\n                      type=\"button\"\n                    >\n                      <Icon\n                        id={\"chevron-up\"}\n                        size={12}\n                        color={\n                          sortState === \"ascending\"\n                            ? \"var(--proton-color__primary)\"\n                            : \"currentColor\"\n                        }\n                      />\n                    </button>\n                  )}\n                </span>\n              </Table.Column>\n            );\n          })}\n        </Table.Header>\n        <Table.Body>\n          {data.map((row, index) => {\n            // Generate a key from the row data or use index as fallback\n            // Normalize to string to match how we store handlers\n            const rowKey = String((row as any)?.id || (row as any)?.key || index);\n            \n            // Get handler for this specific row key\n            const handler = stableOnClickHandlers?.get(rowKey);\n            \n            // Debug: log handler retrieval\n            if (!handler && onRowClick) {\n              console.warn(`[DataTable] Handler not found for key: ${rowKey}`, {\n                availableKeys: Array.from(stableOnClickHandlers?.keys() || []),\n                requestedKey: rowKey,\n                keyType: typeof rowKey,\n              });\n            }\n            \n            // Fallback: if handler doesn't exist, create one on the fly (shouldn't happen)\n            const onClickHandler = handler || (onRowClick ? () => onRowClick(row) : undefined);\n\n            return (\n              <Table.Row\n                key={rowKey}\n                onClick={onClickHandler}\n              >\n                {visibleColumns.map((column) => (\n                  <Table.Cell key={column.id}>{column.cell(row)}</Table.Cell>\n                ))}\n              </Table.Row>\n            );\n          })}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n\nconst EmptyState = ({\n  columns,\n  message,\n  name,\n  testId,\n  isError = false,\n}: Partial<DataTableProps> & {\n  testId?: string;\n  message: string;\n  isError?: boolean;\n}) => {\n  return (\n    <div className=\"proton-DataTable\" data-testid={testId}>\n      <Table name={name}>\n        <Table.Header>\n          {columns?.map((column) => (\n            <Table.Column key={column.id} id={column.id}>\n              {column.header}\n            </Table.Column>\n          ))}\n        </Table.Header>\n        <Table.Body>\n          <Table.Row>\n            <Table.Cell colSpan={columns?.length || 1}>\n              <div\n                className=\"proton-DataTable__message-cell\"\n                role={isError ? \"alert\" : \"status\"}\n                aria-live=\"polite\"\n              >\n                <Elevation>\n                  <div className=\"proton-DataTable__empty-cell\">{message}</div>\n                </Elevation>\n              </div>\n            </Table.Cell>\n          </Table.Row>\n        </Table.Body>\n      </Table>\n    </div>\n  );\n};\n"],"names":["DataTable","props","columns","data","loading","tombstoneComponent","error","name","onRowClick","emptyMessage","errorMessage","loadingRows","testId","sortableColumns","sortedBy","sortDirection","onSort","visibleColumns","useMemo","col","dataRef","useRef","onRowClickRef","handlersRef","previousRowKeysRef","currentRowKeys","r","i","row","index","rowKey","handler","capturedRowKey","capturedIndex","currentData","currentOnRowClick","currentRow","stableOnClickHandlers","handleSortClick","column","newDirection","getSortState","columnId","message","jsx","EmptyState","jsxs","Table","_","Tombstone","isSortable","sortState","Icon","onClickHandler","isError","Elevation"],"mappings":"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"}

package/dist/components/DataTable/DataTable.es.js

@@ -1,96 +1,121 @@
 import { j as t } from "../../node_modules/react/jsx-runtime.es.js";
-import { useMemo as T } from "react";
-import { Table as r } from "../Table/Table.es.js";
-import { Elevation as N } from "../Elevation/Elevation.es.js";
-import { Tombstone as B } from "../Tombstone/Tombstone.es.js";
-import { Icon as R } from "../Icon/Icon.es.js";
+import { useMemo as T, useRef as p } from "react";
+import { Table as n } from "../Table/Table.es.js";
+import { Elevation as F } from "../Elevation/Elevation.es.js";
+import { Tombstone as L } from "../Tombstone/Tombstone.es.js";
+import { Icon as U } from "../Icon/Icon.es.js";
 /* empty css                 */
-function z(i) {
+function Z(a) {
   const {
-    columns: c,
-    data: d = [],
-    loading: j = !1,
-    tombstoneComponent: m,
-    error: n = !1,
-    name: l,
-    onRowClick: x,
-    emptyMessage: g = "Data Unavailable",
-    errorMessage: S,
-    loadingRows: u = 5,
-    "data-testid": h
-  } = i, v = "sortableColumns" in i ? i.sortableColumns : [], b = "sortedBy" in i ? i.sortedBy : void 0, C = "sortDirection" in i ? i.sortDirection : void 0, p = "onSort" in i ? i.onSort : void 0, o = T(
-    () => c.filter((e) => !e.hidden),
-    [c]
-  ), D = (e) => {
-    if (!p) return;
-    const s = b === e.id && C === "ASC" ? "DESC" : "ASC";
-    p(e.id, s);
-  }, _ = (e) => b !== e ? "none" : C === "ASC" ? "ascending" : "descending";
-  if (n) {
-    const e = typeof n == "string" ? n : S || "An error occurred";
+    columns: f,
+    data: i = [],
+    loading: g = !1,
+    tombstoneComponent: C,
+    error: d = !1,
+    name: y,
+    onRowClick: l,
+    emptyMessage: H = "Data Unavailable",
+    errorMessage: M,
+    loadingRows: I = 5,
+    "data-testid": m
+  } = a, q = "sortableColumns" in a ? a.sortableColumns : [], k = "sortedBy" in a ? a.sortedBy : void 0, K = "sortDirection" in a ? a.sortDirection : void 0, _ = "onSort" in a ? a.onSort : void 0, h = T(
+    () => f.filter((e) => !e.hidden),
+    [f]
+  ), $ = p(i), N = p(l), j = p(/* @__PURE__ */ new Map()), A = p("");
+  $.current = i, N.current = l;
+  const S = T(() => i ? i.map((e, o) => ((e == null ? void 0 : e.id) || (e == null ? void 0 : e.key)) ?? o).join(",") : "", [i]);
+  T(() => {
+    if (!l || !i) {
+      j.current.clear();
+      return;
+    }
+    S !== A.current && (j.current.clear(), i.forEach((e, o) => {
+      const r = String((e == null ? void 0 : e.id) || (e == null ? void 0 : e.key) || o), x = /* @__PURE__ */ (() => {
+        const c = r, b = o;
+        return () => {
+          console.log(`[DataTable Handler] Handler for key "${c}" (index ${b}) called`);
+          const D = $.current, B = N.current;
+          if (!D || !B) return;
+          const v = D.find((s, R) => String((s == null ? void 0 : s.id) || (s == null ? void 0 : s.key) || R) === c);
+          v ? (console.log(`[DataTable Handler] Found row for key "${c}":`, v), B(v)) : console.warn(`[DataTable] Row not found for key: ${c}`, {
+            availableKeys: D.map((s, R) => String((s == null ? void 0 : s.id) || (s == null ? void 0 : s.key) || R)),
+            capturedKey: c
+          });
+        };
+      })();
+      console.log(`[DataTable] Creating handler for rowKey: "${r}", index: ${o}`), j.current.set(r, x);
+    }), A.current = S);
+  }, [S, l, i]);
+  const u = j.current, w = (e) => {
+    if (!_) return;
+    const r = k === e.id && K === "ASC" ? "DESC" : "ASC";
+    _(e.id, r);
+  }, z = (e) => k !== e ? "none" : K === "ASC" ? "ascending" : "descending";
+  if (d) {
+    const e = typeof d == "string" ? d : M || "An error occurred";
     return /* @__PURE__ */ t.jsx(
-      f,
+      E,
       {
-        columns: o,
+        columns: h,
         message: e,
-        name: l,
-        testId: h,
+        name: y,
+        testId: m,
         isError: !0
       }
     );
   }
-  return j ? /* @__PURE__ */ t.jsx(
+  return g ? /* @__PURE__ */ t.jsx(
     "div",
     {
       className: "proton-DataTable",
-      "data-testid": h,
+      "data-testid": m,
       "aria-busy": "true",
-      "aria-label": `Loading ${l}...`,
-      children: /* @__PURE__ */ t.jsxs(r, { name: l, children: [
-        /* @__PURE__ */ t.jsx(r.Header, { children: o.map((e) => /* @__PURE__ */ t.jsx(r.Column, { id: e.id, children: e.header }, e.id)) }),
-        /* @__PURE__ */ t.jsx(r.Body, { children: Array.from({ length: u }).map((e, a) => /* @__PURE__ */ t.jsx(r.Row, { children: o.map((s) => /* @__PURE__ */ t.jsx(r.Cell, { children: m || /* @__PURE__ */ t.jsx(
-          B,
+      "aria-label": `Loading ${y}...`,
+      children: /* @__PURE__ */ t.jsxs(n, { name: y, children: [
+        /* @__PURE__ */ t.jsx(n.Header, { children: h.map((e) => /* @__PURE__ */ t.jsx(n.Column, { id: e.id, children: e.header }, e.id)) }),
+        /* @__PURE__ */ t.jsx(n.Body, { children: Array.from({ length: I }).map((e, o) => /* @__PURE__ */ t.jsx(n.Row, { children: h.map((r) => /* @__PURE__ */ t.jsx(n.Cell, { children: C || /* @__PURE__ */ t.jsx(
+          L,
           {
             height: "1rem",
             width: (
               // cascading tombstone widths
-              a % 3 === 0 ? "80%" : a % 3 === 1 ? "60%" : "90%"
+              o % 3 === 0 ? "80%" : o % 3 === 1 ? "60%" : "90%"
             )
           }
-        ) }, s.id)) }, `loading-${a}`)) })
+        ) }, r.id)) }, `loading-${o}`)) })
       ] })
     }
-  ) : !d || d.length === 0 ? /* @__PURE__ */ t.jsx(
-    f,
+  ) : !i || i.length === 0 ? /* @__PURE__ */ t.jsx(
+    E,
     {
-      columns: o,
-      message: g,
-      name: l,
-      testId: h
+      columns: h,
+      message: H,
+      name: y,
+      testId: m
     }
-  ) : /* @__PURE__ */ t.jsx("div", { className: "proton-DataTable", "data-testid": h, children: /* @__PURE__ */ t.jsxs(r, { name: l, children: [
-    /* @__PURE__ */ t.jsx(r.Header, { children: o.map((e) => {
-      const a = v.includes(e.id), s = _(e.id);
+  ) : /* @__PURE__ */ t.jsx("div", { className: "proton-DataTable", "data-testid": m, children: /* @__PURE__ */ t.jsxs(n, { name: y, children: [
+    /* @__PURE__ */ t.jsx(n.Header, { children: h.map((e) => {
+      const o = q.includes(e.id), r = z(e.id);
       return /* @__PURE__ */ t.jsx(
-        r.Column,
+        n.Column,
         {
           id: e.id,
-          ...a && { "aria-sort": s },
+          ...o && { "aria-sort": r },
           children: /* @__PURE__ */ t.jsxs("span", { className: "proton-DataTable__header-content", children: [
             e.header,
-            a && /* @__PURE__ */ t.jsx(
+            o && /* @__PURE__ */ t.jsx(
               "button",
               {
                 className: "proton-DataTable__sort-button",
-                onClick: () => D(e),
-                "aria-label": `Sort by ${e.header}: ${s}`,
+                onClick: () => w(e),
+                "aria-label": `Sort by ${e.header}: ${r}`,
                 type: "button",
                 children: /* @__PURE__ */ t.jsx(
-                  R,
+                  U,
                   {
                     id: "chevron-up",
                     size: 12,
-                    color: s === "ascending" ? "var(--proton-color__primary)" : "currentColor"
+                    color: r === "ascending" ? "var(--proton-color__primary)" : "currentColor"
                   }
                 )
               }
@@ -100,38 +125,44 @@ function z(i) {
         e.id
       );
     }) }),
-    /* @__PURE__ */ t.jsx(r.Body, { children: d.map((e, a) => {
-      const s = ((e == null ? void 0 : e.id) || (e == null ? void 0 : e.key)) ?? a;
+    /* @__PURE__ */ t.jsx(n.Body, { children: i.map((e, o) => {
+      const r = String((e == null ? void 0 : e.id) || (e == null ? void 0 : e.key) || o), x = u == null ? void 0 : u.get(r);
+      !x && l && console.warn(`[DataTable] Handler not found for key: ${r}`, {
+        availableKeys: Array.from((u == null ? void 0 : u.keys()) || []),
+        requestedKey: r,
+        keyType: typeof r
+      });
+      const c = x || (l ? () => l(e) : void 0);
       return /* @__PURE__ */ t.jsx(
-        r.Row,
+        n.Row,
         {
-          onClick: x ? () => x(e) : void 0,
-          children: o.map((y) => /* @__PURE__ */ t.jsx(r.Cell, { children: y.cell(e) }, y.id))
+          onClick: c,
+          children: h.map((b) => /* @__PURE__ */ t.jsx(n.Cell, { children: b.cell(e) }, b.id))
         },
-        s
+        r
       );
     }) })
   ] }) });
 }
-const f = ({
-  columns: i,
-  message: c,
-  name: d,
-  testId: j,
-  isError: m = !1
-}) => /* @__PURE__ */ t.jsx("div", { className: "proton-DataTable", "data-testid": j, children: /* @__PURE__ */ t.jsxs(r, { name: d, children: [
-  /* @__PURE__ */ t.jsx(r.Header, { children: i == null ? void 0 : i.map((n) => /* @__PURE__ */ t.jsx(r.Column, { id: n.id, children: n.header }, n.id)) }),
-  /* @__PURE__ */ t.jsx(r.Body, { children: /* @__PURE__ */ t.jsx(r.Row, { children: /* @__PURE__ */ t.jsx(r.Cell, { colSpan: (i == null ? void 0 : i.length) || 1, children: /* @__PURE__ */ t.jsx(
+const E = ({
+  columns: a,
+  message: f,
+  name: i,
+  testId: g,
+  isError: C = !1
+}) => /* @__PURE__ */ t.jsx("div", { className: "proton-DataTable", "data-testid": g, children: /* @__PURE__ */ t.jsxs(n, { name: i, children: [
+  /* @__PURE__ */ t.jsx(n.Header, { children: a == null ? void 0 : a.map((d) => /* @__PURE__ */ t.jsx(n.Column, { id: d.id, children: d.header }, d.id)) }),
+  /* @__PURE__ */ t.jsx(n.Body, { children: /* @__PURE__ */ t.jsx(n.Row, { children: /* @__PURE__ */ t.jsx(n.Cell, { colSpan: (a == null ? void 0 : a.length) || 1, children: /* @__PURE__ */ t.jsx(
     "div",
     {
       className: "proton-DataTable__message-cell",
-      role: m ? "alert" : "status",
+      role: C ? "alert" : "status",
       "aria-live": "polite",
-      children: /* @__PURE__ */ t.jsx(N, { children: /* @__PURE__ */ t.jsx("div", { className: "proton-DataTable__empty-cell", children: c }) })
+      children: /* @__PURE__ */ t.jsx(F, { children: /* @__PURE__ */ t.jsx("div", { className: "proton-DataTable__empty-cell", children: f }) })
     }
   ) }) }) })
 ] }) });
 export {
-  z as DataTable
+  Z as DataTable
 };
 //# sourceMappingURL=DataTable.es.js.map

package/dist/components/DataTable/DataTable.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.es.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["\"use client\";\n\nimport { AriaAttributes, ReactNode, useMemo } from \"react\";\nimport { Table } from \"../Table/Table\";\nimport { Elevation } from \"../Elevation/Elevation\";\nimport { Tombstone } from \"../Tombstone/Tombstone\";\nimport { Icon } from \"../Icon/Icon\";\nimport \"./DataTable.css\";\n\nexport type SortDirection = \"ASC\" | \"DESC\";\n\ntype SortingConfig<T> =\n  | {\n      /** When sorting is enabled, all these props must be provided together. */\n      sortableColumns: string[];\n      sortedBy: string;\n      sortDirection: SortDirection;\n      onSort: (columnId: string, direction: SortDirection) => void;\n    }\n  | {\n      /** When no sorting is needed, none of these props should be provided */\n      sortableColumns?: never;\n      sortedBy?: never;\n      sortDirection?: never;\n      onSort?: never;\n    };\n\nexport interface DataTableColumn<T> {\n  /** id for the column */\n  id: string;\n  /** Header text or component */\n  header: ReactNode;\n  /** Function to render cell content from row data */\n  cell: (row: T) => ReactNode;\n  /** Whether this column should be hidden */\n  hidden?: boolean;\n}\n\ninterface BaseDataTableProps<T = any> {\n  /** Array of column definitions\n   * - {@link DataTableColumn}\n   */\n  columns: DataTableColumn<T>[];\n  /** Array of data objects to display. Can be empty array for loading/empty states */\n  data?: T[] | null;\n  /** Loading state */\n  loading?: boolean;\n  /** Tombstone component to use when loading */\n  tombstoneComponent?: ReactNode;\n  /** Error state */\n  error?: boolean | string;\n  /** Table name/caption for accessibility. This provides essential context for screen readers. */\n  name: string;\n  /** Callback when a row is clicked */\n  onRowClick?: (row: T) => void;\n  /** Custom empty state message */\n  emptyMessage?: string;\n  /** Custom error message */\n  errorMessage?: string;\n  /** Number of skeleton rows to show in loading state */\n  loadingRows?: number;\n  /** Test ID for testing purposes */\n  \"data-testid\"?: string;\n}\n\nexport type DataTableProps<T = any> = BaseDataTableProps<T> & SortingConfig<T>;\n\n/**\n * DataTable is a declarative wrapper around the base Table component that provides:\n *\n * API:\n *  - {@link DataTableProps}\n *  - {@link SortingConfig}\n */\nexport function DataTable<T = any>(props: DataTableProps<T>) {\n  const {\n    columns,\n    data = [],\n    loading = false,\n    tombstoneComponent,\n    error = false,\n    name,\n    onRowClick,\n    emptyMessage = \"Data Unavailable\",\n    errorMessage,\n    loadingRows = 5,\n    \"data-testid\": testId,\n  } = props;\n\n  const sortableColumns =\n    \"sortableColumns\" in props ? props.sortableColumns : [];\n  const sortedBy = \"sortedBy\" in props ? props.sortedBy : undefined;\n  const sortDirection =\n    \"sortDirection\" in props ? props.sortDirection : undefined;\n  const onSort = \"onSort\" in props ? props.onSort : undefined;\n\n  const visibleColumns = useMemo(\n    () => columns.filter((col) => !col.hidden),\n    [columns]\n  );\n\n  const handleSortClick = (column: DataTableColumn<T>) => {\n    if (!onSort) return;\n\n    const isCurrentlySorted = sortedBy === column.id;\n    const newDirection =\n      isCurrentlySorted && sortDirection === \"ASC\" ? \"DESC\" : \"ASC\";\n\n    onSort(column.id, newDirection);\n  };\n\n  const getSortState = (columnId: string): AriaAttributes[\"aria-sort\"] => {\n    if (sortedBy !== columnId) return \"none\";\n    return sortDirection === \"ASC\" ? \"ascending\" : \"descending\";\n  };\n\n  if (error) {\n    const message =\n      typeof error === \"string\" ? error : errorMessage || \"An error occurred\";\n    return (\n      <EmptyState\n        columns={visibleColumns}\n        message={message}\n        name={name}\n        testId={testId}\n        isError\n      />\n    );\n  }\n\n  if (loading) {\n    return (\n      <div\n        className=\"proton-DataTable\"\n        data-testid={testId}\n        aria-busy=\"true\"\n        aria-label={`Loading ${name}...`}\n      >\n        <Table name={name}>\n          <Table.Header>\n            {visibleColumns.map((column) => (\n              <Table.Column key={column.id} id={column.id}>\n                {column.header}\n              </Table.Column>\n            ))}\n          </Table.Header>\n          <Table.Body>\n            {Array.from({ length: loadingRows }).map((_, index) => (\n              <Table.Row key={`loading-${index}`}>\n                {visibleColumns.map((column) => (\n                  <Table.Cell key={column.id}>\n                    {tombstoneComponent || (\n                      <Tombstone\n                        height=\"1rem\"\n                        width={\n                          // cascading tombstone widths\n                          index % 3 === 0\n                            ? \"80%\"\n                            : index % 3 === 1\n                              ? \"60%\"\n                              : \"90%\"\n                        }\n                      />\n                    )}\n                  </Table.Cell>\n                ))}\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </div>\n    );\n  }\n\n  if (!data || data.length === 0) {\n    return (\n      <EmptyState\n        columns={visibleColumns}\n        message={emptyMessage}\n        name={name}\n        testId={testId}\n      />\n    );\n  }\n\n  return (\n    <div className=\"proton-DataTable\" data-testid={testId}>\n      <Table name={name}>\n        <Table.Header>\n          {visibleColumns.map((column) => {\n            const isSortable = sortableColumns.includes(column.id);\n            const sortState = getSortState(column.id);\n\n            return (\n              <Table.Column\n                key={column.id}\n                id={column.id}\n                {...(isSortable && { \"aria-sort\": sortState })}\n              >\n                <span className=\"proton-DataTable__header-content\">\n                  {column.header}\n                  {isSortable && (\n                    <button\n                      className=\"proton-DataTable__sort-button\"\n                      onClick={() => handleSortClick(column)}\n                      aria-label={`Sort by ${column.header}: ${sortState}`}\n                      type=\"button\"\n                    >\n                      <Icon\n                        id={\"chevron-up\"}\n                        size={12}\n                        color={\n                          sortState === \"ascending\"\n                            ? \"var(--proton-color__primary)\"\n                            : \"currentColor\"\n                        }\n                      />\n                    </button>\n                  )}\n                </span>\n              </Table.Column>\n            );\n          })}\n        </Table.Header>\n        <Table.Body>\n          {data.map((row, index) => {\n            // Generate a key from the row data or use index as fallback\n            const rowKey = ((row as any)?.id || (row as any)?.key) ?? index;\n\n            return (\n              <Table.Row\n                key={rowKey}\n                onClick={onRowClick ? () => onRowClick(row) : undefined}\n              >\n                {visibleColumns.map((column) => (\n                  <Table.Cell key={column.id}>{column.cell(row)}</Table.Cell>\n                ))}\n              </Table.Row>\n            );\n          })}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n\nconst EmptyState = ({\n  columns,\n  message,\n  name,\n  testId,\n  isError = false,\n}: Partial<DataTableProps> & {\n  testId?: string;\n  message: string;\n  isError?: boolean;\n}) => {\n  return (\n    <div className=\"proton-DataTable\" data-testid={testId}>\n      <Table name={name}>\n        <Table.Header>\n          {columns?.map((column) => (\n            <Table.Column key={column.id} id={column.id}>\n              {column.header}\n            </Table.Column>\n          ))}\n        </Table.Header>\n        <Table.Body>\n          <Table.Row>\n            <Table.Cell colSpan={columns?.length || 1}>\n              <div\n                className=\"proton-DataTable__message-cell\"\n                role={isError ? \"alert\" : \"status\"}\n                aria-live=\"polite\"\n              >\n                <Elevation>\n                  <div className=\"proton-DataTable__empty-cell\">{message}</div>\n                </Elevation>\n              </div>\n            </Table.Cell>\n          </Table.Row>\n        </Table.Body>\n      </Table>\n    </div>\n  );\n};\n"],"names":["DataTable","props","columns","data","loading","tombstoneComponent","error","name","onRowClick","emptyMessage","errorMessage","loadingRows","testId","sortableColumns","sortedBy","sortDirection","onSort","visibleColumns","useMemo","col","handleSortClick","column","newDirection","getSortState","columnId","message","jsx","EmptyState","jsxs","Table","_","index","Tombstone","isSortable","sortState","Icon","row","rowKey","isError","Elevation"],"mappings":"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"}
+{"version":3,"file":"DataTable.es.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["\"use client\";\n\nimport { AriaAttributes, ReactNode, useMemo, useRef } from \"react\";\nimport { Table } from \"../Table/Table\";\nimport { Elevation } from \"../Elevation/Elevation\";\nimport { Tombstone } from \"../Tombstone/Tombstone\";\nimport { Icon } from \"../Icon/Icon\";\nimport \"./DataTable.css\";\n\nexport type SortDirection = \"ASC\" | \"DESC\";\n\ntype SortingConfig<T> =\n  | {\n      /** When sorting is enabled, all these props must be provided together. */\n      sortableColumns: string[];\n      sortedBy: string;\n      sortDirection: SortDirection;\n      onSort: (columnId: string, direction: SortDirection) => void;\n    }\n  | {\n      /** When no sorting is needed, none of these props should be provided */\n      sortableColumns?: never;\n      sortedBy?: never;\n      sortDirection?: never;\n      onSort?: never;\n    };\n\nexport interface DataTableColumn<T> {\n  /** id for the column */\n  id: string;\n  /** Header text or component */\n  header: ReactNode;\n  /** Function to render cell content from row data */\n  cell: (row: T) => ReactNode;\n  /** Whether this column should be hidden */\n  hidden?: boolean;\n}\n\ninterface BaseDataTableProps<T = any> {\n  /** Array of column definitions\n   * - {@link DataTableColumn}\n   */\n  columns: DataTableColumn<T>[];\n  /** Array of data objects to display. Can be empty array for loading/empty states */\n  data?: T[] | null;\n  /** Loading state */\n  loading?: boolean;\n  /** Tombstone component to use when loading */\n  tombstoneComponent?: ReactNode;\n  /** Error state */\n  error?: boolean | string;\n  /** Table name/caption for accessibility. This provides essential context for screen readers. */\n  name: string;\n  /** Callback when a row is clicked */\n  onRowClick?: (row: T) => void;\n  /** Custom empty state message */\n  emptyMessage?: string;\n  /** Custom error message */\n  errorMessage?: string;\n  /** Number of skeleton rows to show in loading state */\n  loadingRows?: number;\n  /** Test ID for testing purposes */\n  \"data-testid\"?: string;\n}\n\nexport type DataTableProps<T = any> = BaseDataTableProps<T> & SortingConfig<T>;\n\n/**\n * DataTable is a declarative wrapper around the base Table component that provides:\n *\n * API:\n *  - {@link DataTableProps}\n *  - {@link SortingConfig}\n */\nexport function DataTable<T = any>(props: DataTableProps<T>) {\n  const {\n    columns,\n    data = [],\n    loading = false,\n    tombstoneComponent,\n    error = false,\n    name,\n    onRowClick,\n    emptyMessage = \"Data Unavailable\",\n    errorMessage,\n    loadingRows = 5,\n    \"data-testid\": testId,\n  } = props;\n\n  const sortableColumns =\n    \"sortableColumns\" in props ? props.sortableColumns : [];\n  const sortedBy = \"sortedBy\" in props ? props.sortedBy : undefined;\n  const sortDirection =\n    \"sortDirection\" in props ? props.sortDirection : undefined;\n  const onSort = \"onSort\" in props ? props.onSort : undefined;\n\n  const visibleColumns = useMemo(\n    () => columns.filter((col) => !col.hidden),\n    [columns]\n  );\n\n  // Create stable onClick handlers for each row to enable proper memoization\n  // Handlers look up the row by key at call time using refs, so they don't need to be recreated when data changes\n  // This ensures rows only re-render when their data actually changes, not when onClick handlers change\n  const dataRef = useRef(data);\n  const onRowClickRef = useRef(onRowClick);\n  const handlersRef = useRef<Map<string | number, () => void>>(new Map());\n  const previousRowKeysRef = useRef<string>(\"\");\n  \n  // Keep data ref up to date\n  dataRef.current = data;\n  onRowClickRef.current = onRowClick;\n\n  // Get current row keys as a stable string\n  const currentRowKeys = useMemo(() => {\n    if (!data) return \"\";\n    return data.map((r, i) => ((r as any)?.id || (r as any)?.key) ?? i).join(\",\");\n  }, [data]);\n\n  // Only update handlers when row keys change (rows added/removed), not when data changes\n  useMemo(() => {\n    if (!onRowClick || !data) {\n      handlersRef.current.clear();\n      return;\n    }\n\n    // Only recreate handlers if row keys changed\n    if (currentRowKeys !== previousRowKeysRef.current) {\n      handlersRef.current.clear();\n      \n      data.forEach((row, index) => {\n        // Normalize key to string for consistent Map storage\n        const rowKey = String((row as any)?.id || (row as any)?.key || index);\n        // Handler looks up row by key at call time, so it always gets current data\n        // Use IIFE to properly capture rowKey in closure for each iteration\n        const handler = (() => {\n          const capturedRowKey = rowKey;\n          const capturedIndex = index;\n          return () => {\n            console.log(`[DataTable Handler] Handler for key \"${capturedRowKey}\" (index ${capturedIndex}) called`);\n            const currentData = dataRef.current;\n            const currentOnRowClick = onRowClickRef.current;\n            if (!currentData || !currentOnRowClick) return;\n            \n            // Find row by matching the key - normalize to string for comparison\n            // Use same logic as when creating the key: String((r as any)?.id || (r as any)?.key || i)\n            const currentRow = currentData.find((r, i) => {\n              const rKey = String((r as any)?.id || (r as any)?.key || i);\n              return rKey === capturedRowKey;\n            });\n            if (currentRow) {\n              console.log(`[DataTable Handler] Found row for key \"${capturedRowKey}\":`, currentRow);\n              currentOnRowClick(currentRow);\n            } else {\n              // Debug: log if row not found\n              console.warn(`[DataTable] Row not found for key: ${capturedRowKey}`, {\n                availableKeys: currentData.map((r, i) => String((r as any)?.id || (r as any)?.key || i)),\n                capturedKey: capturedRowKey,\n              });\n            }\n          };\n        })();\n        console.log(`[DataTable] Creating handler for rowKey: \"${rowKey}\", index: ${index}`);\n        handlersRef.current.set(rowKey, handler);\n      });\n      \n      previousRowKeysRef.current = currentRowKeys;\n    }\n  }, [currentRowKeys, onRowClick, data]);\n\n  const stableOnClickHandlers = handlersRef.current;\n\n  const handleSortClick = (column: DataTableColumn<T>) => {\n    if (!onSort) return;\n\n    const isCurrentlySorted = sortedBy === column.id;\n    const newDirection =\n      isCurrentlySorted && sortDirection === \"ASC\" ? \"DESC\" : \"ASC\";\n\n    onSort(column.id, newDirection);\n  };\n\n  const getSortState = (columnId: string): AriaAttributes[\"aria-sort\"] => {\n    if (sortedBy !== columnId) return \"none\";\n    return sortDirection === \"ASC\" ? \"ascending\" : \"descending\";\n  };\n\n  if (error) {\n    const message =\n      typeof error === \"string\" ? error : errorMessage || \"An error occurred\";\n    return (\n      <EmptyState\n        columns={visibleColumns}\n        message={message}\n        name={name}\n        testId={testId}\n        isError\n      />\n    );\n  }\n\n  if (loading) {\n    return (\n      <div\n        className=\"proton-DataTable\"\n        data-testid={testId}\n        aria-busy=\"true\"\n        aria-label={`Loading ${name}...`}\n      >\n        <Table name={name}>\n          <Table.Header>\n            {visibleColumns.map((column) => (\n              <Table.Column key={column.id} id={column.id}>\n                {column.header}\n              </Table.Column>\n            ))}\n          </Table.Header>\n          <Table.Body>\n            {Array.from({ length: loadingRows }).map((_, index) => (\n              <Table.Row key={`loading-${index}`}>\n                {visibleColumns.map((column) => (\n                  <Table.Cell key={column.id}>\n                    {tombstoneComponent || (\n                      <Tombstone\n                        height=\"1rem\"\n                        width={\n                          // cascading tombstone widths\n                          index % 3 === 0\n                            ? \"80%\"\n                            : index % 3 === 1\n                              ? \"60%\"\n                              : \"90%\"\n                        }\n                      />\n                    )}\n                  </Table.Cell>\n                ))}\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </div>\n    );\n  }\n\n  if (!data || data.length === 0) {\n    return (\n      <EmptyState\n        columns={visibleColumns}\n        message={emptyMessage}\n        name={name}\n        testId={testId}\n      />\n    );\n  }\n\n  return (\n    <div className=\"proton-DataTable\" data-testid={testId}>\n      <Table name={name}>\n        <Table.Header>\n          {visibleColumns.map((column) => {\n            const isSortable = sortableColumns.includes(column.id);\n            const sortState = getSortState(column.id);\n\n            return (\n              <Table.Column\n                key={column.id}\n                id={column.id}\n                {...(isSortable && { \"aria-sort\": sortState })}\n              >\n                <span className=\"proton-DataTable__header-content\">\n                  {column.header}\n                  {isSortable && (\n                    <button\n                      className=\"proton-DataTable__sort-button\"\n                      onClick={() => handleSortClick(column)}\n                      aria-label={`Sort by ${column.header}: ${sortState}`}\n                      type=\"button\"\n                    >\n                      <Icon\n                        id={\"chevron-up\"}\n                        size={12}\n                        color={\n                          sortState === \"ascending\"\n                            ? \"var(--proton-color__primary)\"\n                            : \"currentColor\"\n                        }\n                      />\n                    </button>\n                  )}\n                </span>\n              </Table.Column>\n            );\n          })}\n        </Table.Header>\n        <Table.Body>\n          {data.map((row, index) => {\n            // Generate a key from the row data or use index as fallback\n            // Normalize to string to match how we store handlers\n            const rowKey = String((row as any)?.id || (row as any)?.key || index);\n            \n            // Get handler for this specific row key\n            const handler = stableOnClickHandlers?.get(rowKey);\n            \n            // Debug: log handler retrieval\n            if (!handler && onRowClick) {\n              console.warn(`[DataTable] Handler not found for key: ${rowKey}`, {\n                availableKeys: Array.from(stableOnClickHandlers?.keys() || []),\n                requestedKey: rowKey,\n                keyType: typeof rowKey,\n              });\n            }\n            \n            // Fallback: if handler doesn't exist, create one on the fly (shouldn't happen)\n            const onClickHandler = handler || (onRowClick ? () => onRowClick(row) : undefined);\n\n            return (\n              <Table.Row\n                key={rowKey}\n                onClick={onClickHandler}\n              >\n                {visibleColumns.map((column) => (\n                  <Table.Cell key={column.id}>{column.cell(row)}</Table.Cell>\n                ))}\n              </Table.Row>\n            );\n          })}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n\nconst EmptyState = ({\n  columns,\n  message,\n  name,\n  testId,\n  isError = false,\n}: Partial<DataTableProps> & {\n  testId?: string;\n  message: string;\n  isError?: boolean;\n}) => {\n  return (\n    <div className=\"proton-DataTable\" data-testid={testId}>\n      <Table name={name}>\n        <Table.Header>\n          {columns?.map((column) => (\n            <Table.Column key={column.id} id={column.id}>\n              {column.header}\n            </Table.Column>\n          ))}\n        </Table.Header>\n        <Table.Body>\n          <Table.Row>\n            <Table.Cell colSpan={columns?.length || 1}>\n              <div\n                className=\"proton-DataTable__message-cell\"\n                role={isError ? \"alert\" : \"status\"}\n                aria-live=\"polite\"\n              >\n                <Elevation>\n                  <div className=\"proton-DataTable__empty-cell\">{message}</div>\n                </Elevation>\n              </div>\n            </Table.Cell>\n          </Table.Row>\n        </Table.Body>\n      </Table>\n    </div>\n  );\n};\n"],"names":["DataTable","props","columns","data","loading","tombstoneComponent","error","name","onRowClick","emptyMessage","errorMessage","loadingRows","testId","sortableColumns","sortedBy","sortDirection","onSort","visibleColumns","useMemo","col","dataRef","useRef","onRowClickRef","handlersRef","previousRowKeysRef","currentRowKeys","r","i","row","index","rowKey","handler","capturedRowKey","capturedIndex","currentData","currentOnRowClick","currentRow","stableOnClickHandlers","handleSortClick","column","newDirection","getSortState","columnId","message","jsx","EmptyState","jsxs","Table","_","Tombstone","isSortable","sortState","Icon","onClickHandler","isError","Elevation"],"mappings":"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"}

package/dist/components/Input/SearchInput/SearchInput.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../node_modules/react/jsx-runtime.cjs.js"),c=require("react");;/* empty css                     */const E=require("../BaseInput/Input.cjs.js"),S=require("../../../utils/string.cjs.js"),v=({name:o="search",placeholder:a="Search...",autoComplete:x,isClearable:p=!0,isDisabled:d=!1,error:h,defaultValue:j,value:m,"data-testid":u="proton-SearchInput",onChange:r,onClear:s})=>{const i=c.useRef(null),[l,n]=c.useState(m??j??""),f=e=>{n(e),r==null||r(e)},R=()=>{var e;n(""),r==null||r(""),s==null||s(),(e=i.current)==null||e.focus()};return t.jsxRuntimeExports.jsx("div",{className:"proton-SearchInput__wrapper","data-testid":u,role:"search",children:t.jsxRuntimeExports.jsx(E.Input,{type:"search",onChange:f,value:l,name:o,placeholder:a,autoComplete:x,error:h,ref:i,isDisabled:d,prefix:t.jsxRuntimeExports.jsxs("svg",{"aria-hidden":"true",width:"2.8em",height:"1.6em",viewBox:"0 0 24 24",onClick:()=>{var e;return(e=i.current)==null?void 0:e.focus()},children:[t.jsxRuntimeExports.jsx("title",{children:"Magnifying Glass"}),t.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-1a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm5.25-.75 4.5 4.5-1.25 1.25-4.5-4.5 1.25-1.25Z"})]}),suffix:p&&l.length>0?t.jsxRuntimeExports.jsx("button",{type:"button",className:S.csx("proton-SearchInput__button","proton-Input__descriptor","proton-Input__suffix"),"data-testid":`${u}-clear`,onClick:R,"aria-label":"Clear search",children:t.jsxRuntimeExports.jsxs("svg",{"aria-hidden":"true",viewBox:"0 0 50 50",width:"2.2em",height:"1.2em",children:[t.jsxRuntimeExports.jsx("title",{children:"Clear"}),t.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"m37.304 11.282l1.414 1.414l-26.022 26.02l-1.414-1.413z"}),t.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"m12.696 11.282l26.022 26.02l-1.414 1.415l-26.022-26.02z"})]})}):null})})};exports.SearchInput=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../node_modules/react/jsx-runtime.cjs.js"),c=require("react");;/* empty css                     */const E=require("../BaseInput/Input.cjs.js"),v=require("../../../utils/string.cjs.js"),S=({name:p="search",placeholder:a="Search...",autoComplete:o,isClearable:d=!0,isDisabled:h=!1,error:j,defaultValue:m,value:s,"data-testid":x="proton-SearchInput",onChange:r,onClear:i})=>{const u=c.useRef(null),[l,n]=c.useState(s??m??"");c.useEffect(()=>{s!==void 0&&n(s)},[s]);const f=e=>{n(e),r==null||r(e)},R=()=>{var e;n(""),r==null||r(""),i==null||i(),(e=u.current)==null||e.focus()};return t.jsxRuntimeExports.jsx("div",{className:"proton-SearchInput__wrapper","data-testid":x,role:"search",children:t.jsxRuntimeExports.jsx(E.Input,{type:"search",onChange:f,value:l,name:p,placeholder:a,autoComplete:o,error:j,ref:u,isDisabled:h,prefix:t.jsxRuntimeExports.jsxs("svg",{"aria-hidden":"true",width:"2.8em",height:"1.6em",viewBox:"0 0 24 24",onClick:()=>{var e;return(e=u.current)==null?void 0:e.focus()},children:[t.jsxRuntimeExports.jsx("title",{children:"Magnifying Glass"}),t.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-1a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm5.25-.75 4.5 4.5-1.25 1.25-4.5-4.5 1.25-1.25Z"})]}),suffix:d&&l.length>0?t.jsxRuntimeExports.jsx("button",{type:"button",className:v.csx("proton-SearchInput__button","proton-Input__descriptor","proton-Input__suffix"),"data-testid":`${x}-clear`,onClick:R,"aria-label":"Clear search",children:t.jsxRuntimeExports.jsxs("svg",{"aria-hidden":"true",viewBox:"0 0 50 50",width:"2.2em",height:"1.2em",children:[t.jsxRuntimeExports.jsx("title",{children:"Clear"}),t.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"m37.304 11.282l1.414 1.414l-26.022 26.02l-1.414-1.413z"}),t.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"m12.696 11.282l26.022 26.02l-1.414 1.415l-26.022-26.02z"})]})}):null})})};exports.SearchInput=S;
 //# sourceMappingURL=SearchInput.cjs.js.map

package/dist/components/Input/SearchInput/SearchInput.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.cjs.js","sources":["../../../../src/components/Input/SearchInput/SearchInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef, useState } from \"react\";\nimport \"./SearchInput.css\";\nimport { csx } from \"../../../utils\";\nimport { Input, type BaseInputProps } from \"../BaseInput/Input\";\n\nexport interface SearchInputProps\n  extends Omit<\n    BaseInputProps,\n    | \"prefix\"\n    | \"suffix\"\n    | \"value\"\n    | \"onChange\"\n    | \"description\"\n    | \"descriptionPosition\"\n    | \"label\"\n  > {\n  /** The initial value of the input. */\n  defaultValue?: string;\n\n  /** Should the clear button be shown when there is text? */\n  isClearable?: boolean;\n\n  /** Called when the input value changes. */\n  onChange?: (value: string) => void;\n\n  /** Called when the clear button is clicked. */\n  onClear?: () => void;\n\n  /** The current value of the input (for controlled usage) */\n  value?: string;\n}\n\n/**\n * A search input component with optional clear functionality and URL parameter sync.\n *\n * API:\n *  - {@link SearchInputProps}\n *  - extends {@link BaseInputProps}\n */\nexport const SearchInput = ({\n  name = \"search\",\n  placeholder = \"Search...\",\n  autoComplete,\n  isClearable = true,\n  isDisabled = false,\n  error,\n  defaultValue,\n  value: controlledValue,\n  \"data-testid\": testId = \"proton-SearchInput\",\n  onChange,\n  onClear,\n}: SearchInputProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [value, setValue] = useState(controlledValue ?? defaultValue ?? \"\");\n\n  const handleChange = (newValue: string) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  const handleClear = () => {\n    setValue(\"\");\n    onChange?.(\"\");\n    onClear?.();\n    inputRef.current?.focus();\n  };\n\n  return (\n    <div\n      className=\"proton-SearchInput__wrapper\"\n      data-testid={testId}\n      role=\"search\"\n    >\n      <Input\n        type=\"search\"\n        onChange={handleChange}\n        value={value}\n        name={name}\n        placeholder={placeholder}\n        autoComplete={autoComplete}\n        error={error}\n        ref={inputRef}\n        isDisabled={isDisabled}\n        prefix={\n          <svg\n            aria-hidden=\"true\"\n            width=\"2.8em\"\n            height=\"1.6em\"\n            viewBox=\"0 0 24 24\"\n            onClick={() => inputRef.current?.focus()}\n          >\n            <title>Magnifying Glass</title>\n            <path\n              fill=\"currentColor\"\n              d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-1a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm5.25-.75 4.5 4.5-1.25 1.25-4.5-4.5 1.25-1.25Z\"\n            />\n          </svg>\n        }\n        suffix={\n          isClearable && value.length > 0 ? (\n            <button\n              type=\"button\"\n              className={csx(\n                \"proton-SearchInput__button\",\n                \"proton-Input__descriptor\",\n                \"proton-Input__suffix\"\n              )}\n              data-testid={`${testId}-clear`}\n              onClick={handleClear}\n              aria-label=\"Clear search\"\n            >\n              <svg\n                aria-hidden=\"true\"\n                viewBox=\"0 0 50 50\"\n                width=\"2.2em\"\n                height=\"1.2em\"\n              >\n                <title>Clear</title>\n                <path\n                  fill=\"currentColor\"\n                  d=\"m37.304 11.282l1.414 1.414l-26.022 26.02l-1.414-1.413z\"\n                />\n                <path\n                  fill=\"currentColor\"\n                  d=\"m12.696 11.282l26.022 26.02l-1.414 1.415l-26.022-26.02z\"\n                />\n              </svg>\n            </button>\n          ) : null\n        }\n      />\n    </div>\n  );\n};\n"],"names":["SearchInput","name","placeholder","autoComplete","isClearable","isDisabled","error","defaultValue","controlledValue","testId","onChange","onClear","inputRef","useRef","value","setValue","useState","handleChange","newValue","handleClear","_a","jsx","Input","jsxs","csx"],"mappings":"gSAyCaA,EAAc,CAAC,CAC1B,KAAAC,EAAO,SACP,YAAAC,EAAc,YACd,aAAAC,EACA,YAAAC,EAAc,GACd,WAAAC,EAAa,GACb,MAAAC,EACA,aAAAC,EACA,MAAOC,EACP,cAAeC,EAAS,qBACxB,SAAAC,EACA,QAAAC,CACF,IAAwB,CAChB,MAAAC,EAAWC,SAAyB,IAAI,EACxC,CAACC,EAAOC,CAAQ,EAAIC,EAAS,SAAAR,GAAmBD,GAAgB,EAAE,EAElEU,EAAgBC,GAAqB,CACzCH,EAASG,CAAQ,EACjBR,GAAA,MAAAA,EAAWQ,EAAQ,EAGfC,EAAc,IAAM,OACxBJ,EAAS,EAAE,EACXL,GAAA,MAAAA,EAAW,IACDC,GAAA,MAAAA,KACVS,EAAAR,EAAS,UAAT,MAAAQ,EAAkB,OAAM,EAIxB,OAAAC,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,8BACV,cAAaZ,EACb,KAAK,SAEL,SAAAY,EAAA,kBAAA,IAACC,EAAA,MAAA,CACC,KAAK,SACL,SAAUL,EACV,MAAAH,EACA,KAAAb,EACA,YAAAC,EACA,aAAAC,EACA,MAAAG,EACA,IAAKM,EACL,WAAAP,EACA,OACEkB,EAAA,kBAAA,KAAC,MAAA,CACC,cAAY,OACZ,MAAM,QACN,OAAO,QACP,QAAQ,YACR,QAAS,IAAM,OAAA,OAAAH,EAAAR,EAAS,UAAT,YAAAQ,EAAkB,SAEjC,SAAA,CAAAC,EAAAA,kBAAAA,IAAC,SAAM,SAAgB,kBAAA,CAAA,EACvBA,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,4HAAA,CACJ,CAAA,CAAA,CACF,EAEF,OACEjB,GAAeU,EAAM,OAAS,EAC5BO,EAAA,kBAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAWG,EAAA,IACT,6BACA,2BACA,sBACF,EACA,cAAa,GAAGf,CAAM,SACtB,QAASU,EACT,aAAW,eAEX,SAAAI,EAAA,kBAAA,KAAC,MAAA,CACC,cAAY,OACZ,QAAQ,YACR,MAAM,QACN,OAAO,QAEP,SAAA,CAAAF,EAAAA,kBAAAA,IAAC,SAAM,SAAK,OAAA,CAAA,EACZA,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,wDAAA,CACJ,EACAA,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,yDAAA,CACJ,CAAA,CAAA,CACF,CAAA,CAAA,EAEA,IAAA,CAER,CAAA,CAAA,CAGN"}
+{"version":3,"file":"SearchInput.cjs.js","sources":["../../../../src/components/Input/SearchInput/SearchInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport \"./SearchInput.css\";\nimport { csx } from \"../../../utils\";\nimport { Input, type BaseInputProps } from \"../BaseInput/Input\";\n\nexport interface SearchInputProps\n  extends Omit<\n    BaseInputProps,\n    | \"prefix\"\n    | \"suffix\"\n    | \"value\"\n    | \"onChange\"\n    | \"description\"\n    | \"descriptionPosition\"\n    | \"label\"\n  > {\n  /** The initial value of the input. */\n  defaultValue?: string;\n\n  /** Should the clear button be shown when there is text? */\n  isClearable?: boolean;\n\n  /** Called when the input value changes. */\n  onChange?: (value: string) => void;\n\n  /** Called when the clear button is clicked. */\n  onClear?: () => void;\n\n  /** The current value of the input (for controlled usage) */\n  value?: string;\n}\n\n/**\n * A search input component with optional clear functionality and URL parameter sync.\n *\n * API:\n *  - {@link SearchInputProps}\n *  - extends {@link BaseInputProps}\n */\nexport const SearchInput = ({\n  name = \"search\",\n  placeholder = \"Search...\",\n  autoComplete,\n  isClearable = true,\n  isDisabled = false,\n  error,\n  defaultValue,\n  value: controlledValue,\n  \"data-testid\": testId = \"proton-SearchInput\",\n  onChange,\n  onClear,\n}: SearchInputProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [value, setValue] = useState(controlledValue ?? defaultValue ?? \"\");\n\n  // Sync with controlled value\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      setValue(controlledValue);\n    }\n  }, [controlledValue]);\n\n  const handleChange = (newValue: string) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  const handleClear = () => {\n    setValue(\"\");\n    onChange?.(\"\");\n    onClear?.();\n    inputRef.current?.focus();\n  };\n\n  return (\n    <div\n      className=\"proton-SearchInput__wrapper\"\n      data-testid={testId}\n      role=\"search\"\n    >\n      <Input\n        type=\"search\"\n        onChange={handleChange}\n        value={value}\n        name={name}\n        placeholder={placeholder}\n        autoComplete={autoComplete}\n        error={error}\n        ref={inputRef}\n        isDisabled={isDisabled}\n        prefix={\n          <svg\n            aria-hidden=\"true\"\n            width=\"2.8em\"\n            height=\"1.6em\"\n            viewBox=\"0 0 24 24\"\n            onClick={() => inputRef.current?.focus()}\n          >\n            <title>Magnifying Glass</title>\n            <path\n              fill=\"currentColor\"\n              d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-1a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm5.25-.75 4.5 4.5-1.25 1.25-4.5-4.5 1.25-1.25Z\"\n            />\n          </svg>\n        }\n        suffix={\n          isClearable && value.length > 0 ? (\n            <button\n              type=\"button\"\n              className={csx(\n                \"proton-SearchInput__button\",\n                \"proton-Input__descriptor\",\n                \"proton-Input__suffix\"\n              )}\n              data-testid={`${testId}-clear`}\n              onClick={handleClear}\n              aria-label=\"Clear search\"\n            >\n              <svg\n                aria-hidden=\"true\"\n                viewBox=\"0 0 50 50\"\n                width=\"2.2em\"\n                height=\"1.2em\"\n              >\n                <title>Clear</title>\n                <path\n                  fill=\"currentColor\"\n                  d=\"m37.304 11.282l1.414 1.414l-26.022 26.02l-1.414-1.413z\"\n                />\n                <path\n                  fill=\"currentColor\"\n                  d=\"m12.696 11.282l26.022 26.02l-1.414 1.415l-26.022-26.02z\"\n                />\n              </svg>\n            </button>\n          ) : null\n        }\n      />\n    </div>\n  );\n};\n"],"names":["SearchInput","name","placeholder","autoComplete","isClearable","isDisabled","error","defaultValue","controlledValue","testId","onChange","onClear","inputRef","useRef","value","setValue","useState","useEffect","handleChange","newValue","handleClear","_a","jsx","Input","jsxs","csx"],"mappings":"gSAyCaA,EAAc,CAAC,CAC1B,KAAAC,EAAO,SACP,YAAAC,EAAc,YACd,aAAAC,EACA,YAAAC,EAAc,GACd,WAAAC,EAAa,GACb,MAAAC,EACA,aAAAC,EACA,MAAOC,EACP,cAAeC,EAAS,qBACxB,SAAAC,EACA,QAAAC,CACF,IAAwB,CAChB,MAAAC,EAAWC,SAAyB,IAAI,EACxC,CAACC,EAAOC,CAAQ,EAAIC,EAAS,SAAAR,GAAmBD,GAAgB,EAAE,EAGxEU,EAAAA,UAAU,IAAM,CACVT,IAAoB,QACtBO,EAASP,CAAe,CAC1B,EACC,CAACA,CAAe,CAAC,EAEd,MAAAU,EAAgBC,GAAqB,CACzCJ,EAASI,CAAQ,EACjBT,GAAA,MAAAA,EAAWS,EAAQ,EAGfC,EAAc,IAAM,OACxBL,EAAS,EAAE,EACXL,GAAA,MAAAA,EAAW,IACDC,GAAA,MAAAA,KACVU,EAAAT,EAAS,UAAT,MAAAS,EAAkB,OAAM,EAIxB,OAAAC,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,8BACV,cAAab,EACb,KAAK,SAEL,SAAAa,EAAA,kBAAA,IAACC,EAAA,MAAA,CACC,KAAK,SACL,SAAUL,EACV,MAAAJ,EACA,KAAAb,EACA,YAAAC,EACA,aAAAC,EACA,MAAAG,EACA,IAAKM,EACL,WAAAP,EACA,OACEmB,EAAA,kBAAA,KAAC,MAAA,CACC,cAAY,OACZ,MAAM,QACN,OAAO,QACP,QAAQ,YACR,QAAS,IAAM,OAAA,OAAAH,EAAAT,EAAS,UAAT,YAAAS,EAAkB,SAEjC,SAAA,CAAAC,EAAAA,kBAAAA,IAAC,SAAM,SAAgB,kBAAA,CAAA,EACvBA,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,4HAAA,CACJ,CAAA,CAAA,CACF,EAEF,OACElB,GAAeU,EAAM,OAAS,EAC5BQ,EAAA,kBAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAWG,EAAA,IACT,6BACA,2BACA,sBACF,EACA,cAAa,GAAGhB,CAAM,SACtB,QAASW,EACT,aAAW,eAEX,SAAAI,EAAA,kBAAA,KAAC,MAAA,CACC,cAAY,OACZ,QAAQ,YACR,MAAM,QACN,OAAO,QAEP,SAAA,CAAAF,EAAAA,kBAAAA,IAAC,SAAM,SAAK,OAAA,CAAA,EACZA,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,wDAAA,CACJ,EACAA,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,yDAAA,CACJ,CAAA,CAAA,CACF,CAAA,CAAA,EAEA,IAAA,CAER,CAAA,CAAA,CAGN"}

package/dist/components/Input/SearchInput/SearchInput.es.js

@@ -1,45 +1,49 @@
 import { j as t } from "../../../node_modules/react/jsx-runtime.es.js";
-import { useRef as _, useState as v } from "react";
+import { useRef as v, useState as _, useEffect as I } from "react";
 /* empty css                   */
-import { Input as I } from "../BaseInput/Input.es.js";
-import { csx as S } from "../../../utils/string.es.js";
-const k = ({
-  name: o = "search",
-  placeholder: u = "Search...",
-  autoComplete: p,
-  isClearable: n = !0,
-  isDisabled: d = !1,
-  error: h,
+import { Input as S } from "../BaseInput/Input.es.js";
+import { csx as b } from "../../../utils/string.es.js";
+const z = ({
+  name: u = "search",
+  placeholder: o = "Search...",
+  autoComplete: d,
+  isClearable: f = !0,
+  isDisabled: h = !1,
+  error: n,
   defaultValue: m,
-  value: f,
-  "data-testid": l = "proton-SearchInput",
+  value: s,
+  "data-testid": a = "proton-SearchInput",
   onChange: e,
-  onClear: s
+  onClear: i
 }) => {
-  const i = _(null), [a, c] = v(f ?? m ?? ""), x = (r) => {
-    c(r), e == null || e(r);
+  const c = v(null), [p, l] = _(s ?? m ?? "");
+  I(() => {
+    s !== void 0 && l(s);
+  }, [s]);
+  const x = (r) => {
+    l(r), e == null || e(r);
   }, j = () => {
     var r;
-    c(""), e == null || e(""), s == null || s(), (r = i.current) == null || r.focus();
+    l(""), e == null || e(""), i == null || i(), (r = c.current) == null || r.focus();
   };
   return /* @__PURE__ */ t.jsx(
     "div",
     {
       className: "proton-SearchInput__wrapper",
-      "data-testid": l,
+      "data-testid": a,
       role: "search",
       children: /* @__PURE__ */ t.jsx(
-        I,
+        S,
         {
           type: "search",
           onChange: x,
-          value: a,
-          name: o,
-          placeholder: u,
-          autoComplete: p,
-          error: h,
-          ref: i,
-          isDisabled: d,
+          value: p,
+          name: u,
+          placeholder: o,
+          autoComplete: d,
+          error: n,
+          ref: c,
+          isDisabled: h,
           prefix: /* @__PURE__ */ t.jsxs(
             "svg",
             {
@@ -49,7 +53,7 @@ const k = ({
               viewBox: "0 0 24 24",
               onClick: () => {
                 var r;
-                return (r = i.current) == null ? void 0 : r.focus();
+                return (r = c.current) == null ? void 0 : r.focus();
               },
               children: [
                 /* @__PURE__ */ t.jsx("title", { children: "Magnifying Glass" }),
@@ -63,16 +67,16 @@ const k = ({
               ]
             }
           ),
-          suffix: n && a.length > 0 ? /* @__PURE__ */ t.jsx(
+          suffix: f && p.length > 0 ? /* @__PURE__ */ t.jsx(
             "button",
             {
               type: "button",
-              className: S(
+              className: b(
                 "proton-SearchInput__button",
                 "proton-Input__descriptor",
                 "proton-Input__suffix"
               ),
-              "data-testid": `${l}-clear`,
+              "data-testid": `${a}-clear`,
               onClick: j,
               "aria-label": "Clear search",
               children: /* @__PURE__ */ t.jsxs(
@@ -109,6 +113,6 @@ const k = ({
   );
 };
 export {
-  k as SearchInput
+  z as SearchInput
 };
 //# sourceMappingURL=SearchInput.es.js.map

package/dist/components/Input/SearchInput/SearchInput.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.es.js","sources":["../../../../src/components/Input/SearchInput/SearchInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef, useState } from \"react\";\nimport \"./SearchInput.css\";\nimport { csx } from \"../../../utils\";\nimport { Input, type BaseInputProps } from \"../BaseInput/Input\";\n\nexport interface SearchInputProps\n  extends Omit<\n    BaseInputProps,\n    | \"prefix\"\n    | \"suffix\"\n    | \"value\"\n    | \"onChange\"\n    | \"description\"\n    | \"descriptionPosition\"\n    | \"label\"\n  > {\n  /** The initial value of the input. */\n  defaultValue?: string;\n\n  /** Should the clear button be shown when there is text? */\n  isClearable?: boolean;\n\n  /** Called when the input value changes. */\n  onChange?: (value: string) => void;\n\n  /** Called when the clear button is clicked. */\n  onClear?: () => void;\n\n  /** The current value of the input (for controlled usage) */\n  value?: string;\n}\n\n/**\n * A search input component with optional clear functionality and URL parameter sync.\n *\n * API:\n *  - {@link SearchInputProps}\n *  - extends {@link BaseInputProps}\n */\nexport const SearchInput = ({\n  name = \"search\",\n  placeholder = \"Search...\",\n  autoComplete,\n  isClearable = true,\n  isDisabled = false,\n  error,\n  defaultValue,\n  value: controlledValue,\n  \"data-testid\": testId = \"proton-SearchInput\",\n  onChange,\n  onClear,\n}: SearchInputProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [value, setValue] = useState(controlledValue ?? defaultValue ?? \"\");\n\n  const handleChange = (newValue: string) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  const handleClear = () => {\n    setValue(\"\");\n    onChange?.(\"\");\n    onClear?.();\n    inputRef.current?.focus();\n  };\n\n  return (\n    <div\n      className=\"proton-SearchInput__wrapper\"\n      data-testid={testId}\n      role=\"search\"\n    >\n      <Input\n        type=\"search\"\n        onChange={handleChange}\n        value={value}\n        name={name}\n        placeholder={placeholder}\n        autoComplete={autoComplete}\n        error={error}\n        ref={inputRef}\n        isDisabled={isDisabled}\n        prefix={\n          <svg\n            aria-hidden=\"true\"\n            width=\"2.8em\"\n            height=\"1.6em\"\n            viewBox=\"0 0 24 24\"\n            onClick={() => inputRef.current?.focus()}\n          >\n            <title>Magnifying Glass</title>\n            <path\n              fill=\"currentColor\"\n              d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-1a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm5.25-.75 4.5 4.5-1.25 1.25-4.5-4.5 1.25-1.25Z\"\n            />\n          </svg>\n        }\n        suffix={\n          isClearable && value.length > 0 ? (\n            <button\n              type=\"button\"\n              className={csx(\n                \"proton-SearchInput__button\",\n                \"proton-Input__descriptor\",\n                \"proton-Input__suffix\"\n              )}\n              data-testid={`${testId}-clear`}\n              onClick={handleClear}\n              aria-label=\"Clear search\"\n            >\n              <svg\n                aria-hidden=\"true\"\n                viewBox=\"0 0 50 50\"\n                width=\"2.2em\"\n                height=\"1.2em\"\n              >\n                <title>Clear</title>\n                <path\n                  fill=\"currentColor\"\n                  d=\"m37.304 11.282l1.414 1.414l-26.022 26.02l-1.414-1.413z\"\n                />\n                <path\n                  fill=\"currentColor\"\n                  d=\"m12.696 11.282l26.022 26.02l-1.414 1.415l-26.022-26.02z\"\n                />\n              </svg>\n            </button>\n          ) : null\n        }\n      />\n    </div>\n  );\n};\n"],"names":["SearchInput","name","placeholder","autoComplete","isClearable","isDisabled","error","defaultValue","controlledValue","testId","onChange","onClear","inputRef","useRef","value","setValue","useState","handleChange","newValue","handleClear","_a","jsx","Input","jsxs","csx"],"mappings":";;;;;AAyCO,MAAMA,IAAc,CAAC;AAAA,EAC1B,MAAAC,IAAO;AAAA,EACP,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAOC;AAAA,EACP,eAAeC,IAAS;AAAA,EACxB,UAAAC;AAAA,EACA,SAAAC;AACF,MAAwB;AAChB,QAAAC,IAAWC,EAAyB,IAAI,GACxC,CAACC,GAAOC,CAAQ,IAAIC,EAASR,KAAmBD,KAAgB,EAAE,GAElEU,IAAe,CAACC,MAAqB;AACzC,IAAAH,EAASG,CAAQ,GACjBR,KAAA,QAAAA,EAAWQ;AAAA,EAAQ,GAGfC,IAAc,MAAM;;AACxB,IAAAJ,EAAS,EAAE,GACXL,KAAA,QAAAA,EAAW,KACDC,KAAA,QAAAA,MACVS,IAAAR,EAAS,YAAT,QAAAQ,EAAkB;AAAA,EAAM;AAIxB,SAAAC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAaZ;AAAA,MACb,MAAK;AAAA,MAEL,UAAAY,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAUL;AAAA,UACV,OAAAH;AAAA,UACA,MAAAb;AAAA,UACA,aAAAC;AAAA,UACA,cAAAC;AAAA,UACA,OAAAG;AAAA,UACA,KAAKM;AAAA,UACL,YAAAP;AAAA,UACA,QACEkB,gBAAAA,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,OAAM;AAAA,cACN,QAAO;AAAA,cACP,SAAQ;AAAA,cACR,SAAS,MAAM;;AAAA,wBAAAH,IAAAR,EAAS,YAAT,gBAAAQ,EAAkB;AAAA;AAAA,cAEjC,UAAA;AAAA,gBAAAC,gBAAAA,EAAAA,IAAC,WAAM,UAAgB,mBAAA,CAAA;AAAA,gBACvBA,gBAAAA,EAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,GAAE;AAAA,kBAAA;AAAA,gBACJ;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,UAEF,QACEjB,KAAeU,EAAM,SAAS,IAC5BO,gBAAAA,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAWG;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cACA,eAAa,GAAGf,CAAM;AAAA,cACtB,SAASU;AAAA,cACT,cAAW;AAAA,cAEX,UAAAI,gBAAAA,EAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,SAAQ;AAAA,kBACR,OAAM;AAAA,kBACN,QAAO;AAAA,kBAEP,UAAA;AAAA,oBAAAF,gBAAAA,EAAAA,IAAC,WAAM,UAAK,QAAA,CAAA;AAAA,oBACZA,gBAAAA,EAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,GAAE;AAAA,sBAAA;AAAA,oBACJ;AAAA,oBACAA,gBAAAA,EAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,GAAE;AAAA,sBAAA;AAAA,oBACJ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UAAA,IAEA;AAAA,QAAA;AAAA,MAER;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"SearchInput.es.js","sources":["../../../../src/components/Input/SearchInput/SearchInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport \"./SearchInput.css\";\nimport { csx } from \"../../../utils\";\nimport { Input, type BaseInputProps } from \"../BaseInput/Input\";\n\nexport interface SearchInputProps\n  extends Omit<\n    BaseInputProps,\n    | \"prefix\"\n    | \"suffix\"\n    | \"value\"\n    | \"onChange\"\n    | \"description\"\n    | \"descriptionPosition\"\n    | \"label\"\n  > {\n  /** The initial value of the input. */\n  defaultValue?: string;\n\n  /** Should the clear button be shown when there is text? */\n  isClearable?: boolean;\n\n  /** Called when the input value changes. */\n  onChange?: (value: string) => void;\n\n  /** Called when the clear button is clicked. */\n  onClear?: () => void;\n\n  /** The current value of the input (for controlled usage) */\n  value?: string;\n}\n\n/**\n * A search input component with optional clear functionality and URL parameter sync.\n *\n * API:\n *  - {@link SearchInputProps}\n *  - extends {@link BaseInputProps}\n */\nexport const SearchInput = ({\n  name = \"search\",\n  placeholder = \"Search...\",\n  autoComplete,\n  isClearable = true,\n  isDisabled = false,\n  error,\n  defaultValue,\n  value: controlledValue,\n  \"data-testid\": testId = \"proton-SearchInput\",\n  onChange,\n  onClear,\n}: SearchInputProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [value, setValue] = useState(controlledValue ?? defaultValue ?? \"\");\n\n  // Sync with controlled value\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      setValue(controlledValue);\n    }\n  }, [controlledValue]);\n\n  const handleChange = (newValue: string) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  const handleClear = () => {\n    setValue(\"\");\n    onChange?.(\"\");\n    onClear?.();\n    inputRef.current?.focus();\n  };\n\n  return (\n    <div\n      className=\"proton-SearchInput__wrapper\"\n      data-testid={testId}\n      role=\"search\"\n    >\n      <Input\n        type=\"search\"\n        onChange={handleChange}\n        value={value}\n        name={name}\n        placeholder={placeholder}\n        autoComplete={autoComplete}\n        error={error}\n        ref={inputRef}\n        isDisabled={isDisabled}\n        prefix={\n          <svg\n            aria-hidden=\"true\"\n            width=\"2.8em\"\n            height=\"1.6em\"\n            viewBox=\"0 0 24 24\"\n            onClick={() => inputRef.current?.focus()}\n          >\n            <title>Magnifying Glass</title>\n            <path\n              fill=\"currentColor\"\n              d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-1a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm5.25-.75 4.5 4.5-1.25 1.25-4.5-4.5 1.25-1.25Z\"\n            />\n          </svg>\n        }\n        suffix={\n          isClearable && value.length > 0 ? (\n            <button\n              type=\"button\"\n              className={csx(\n                \"proton-SearchInput__button\",\n                \"proton-Input__descriptor\",\n                \"proton-Input__suffix\"\n              )}\n              data-testid={`${testId}-clear`}\n              onClick={handleClear}\n              aria-label=\"Clear search\"\n            >\n              <svg\n                aria-hidden=\"true\"\n                viewBox=\"0 0 50 50\"\n                width=\"2.2em\"\n                height=\"1.2em\"\n              >\n                <title>Clear</title>\n                <path\n                  fill=\"currentColor\"\n                  d=\"m37.304 11.282l1.414 1.414l-26.022 26.02l-1.414-1.413z\"\n                />\n                <path\n                  fill=\"currentColor\"\n                  d=\"m12.696 11.282l26.022 26.02l-1.414 1.415l-26.022-26.02z\"\n                />\n              </svg>\n            </button>\n          ) : null\n        }\n      />\n    </div>\n  );\n};\n"],"names":["SearchInput","name","placeholder","autoComplete","isClearable","isDisabled","error","defaultValue","controlledValue","testId","onChange","onClear","inputRef","useRef","value","setValue","useState","useEffect","handleChange","newValue","handleClear","_a","jsx","Input","jsxs","csx"],"mappings":";;;;;AAyCO,MAAMA,IAAc,CAAC;AAAA,EAC1B,MAAAC,IAAO;AAAA,EACP,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAOC;AAAA,EACP,eAAeC,IAAS;AAAA,EACxB,UAAAC;AAAA,EACA,SAAAC;AACF,MAAwB;AAChB,QAAAC,IAAWC,EAAyB,IAAI,GACxC,CAACC,GAAOC,CAAQ,IAAIC,EAASR,KAAmBD,KAAgB,EAAE;AAGxE,EAAAU,EAAU,MAAM;AACd,IAAIT,MAAoB,UACtBO,EAASP,CAAe;AAAA,EAC1B,GACC,CAACA,CAAe,CAAC;AAEd,QAAAU,IAAe,CAACC,MAAqB;AACzC,IAAAJ,EAASI,CAAQ,GACjBT,KAAA,QAAAA,EAAWS;AAAA,EAAQ,GAGfC,IAAc,MAAM;;AACxB,IAAAL,EAAS,EAAE,GACXL,KAAA,QAAAA,EAAW,KACDC,KAAA,QAAAA,MACVU,IAAAT,EAAS,YAAT,QAAAS,EAAkB;AAAA,EAAM;AAIxB,SAAAC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAab;AAAA,MACb,MAAK;AAAA,MAEL,UAAAa,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAUL;AAAA,UACV,OAAAJ;AAAA,UACA,MAAAb;AAAA,UACA,aAAAC;AAAA,UACA,cAAAC;AAAA,UACA,OAAAG;AAAA,UACA,KAAKM;AAAA,UACL,YAAAP;AAAA,UACA,QACEmB,gBAAAA,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,OAAM;AAAA,cACN,QAAO;AAAA,cACP,SAAQ;AAAA,cACR,SAAS,MAAM;;AAAA,wBAAAH,IAAAT,EAAS,YAAT,gBAAAS,EAAkB;AAAA;AAAA,cAEjC,UAAA;AAAA,gBAAAC,gBAAAA,EAAAA,IAAC,WAAM,UAAgB,mBAAA,CAAA;AAAA,gBACvBA,gBAAAA,EAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,GAAE;AAAA,kBAAA;AAAA,gBACJ;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,UAEF,QACElB,KAAeU,EAAM,SAAS,IAC5BQ,gBAAAA,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAWG;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cACA,eAAa,GAAGhB,CAAM;AAAA,cACtB,SAASW;AAAA,cACT,cAAW;AAAA,cAEX,UAAAI,gBAAAA,EAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,SAAQ;AAAA,kBACR,OAAM;AAAA,kBACN,QAAO;AAAA,kBAEP,UAAA;AAAA,oBAAAF,gBAAAA,EAAAA,IAAC,WAAM,UAAK,QAAA,CAAA;AAAA,oBACZA,gBAAAA,EAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,GAAE;AAAA,sBAAA;AAAA,oBACJ;AAAA,oBACAA,gBAAAA,EAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,GAAE;AAAA,sBAAA;AAAA,oBACJ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UAAA,IAEA;AAAA,QAAA;AAAA,MAER;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Table/Collection/collectionParser.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),t=require("./CompoundComponents.cjs.js");function i(a,o){return a.type===o}function b(a){const o=[],c=[];return n.Children.forEach(a,s=>{if(n.isValidElement(s)){if(i(s,t.TableHeader)){const l=s.props;n.Children.forEach(l.children,e=>{if(n.isValidElement(e)&&i(e,t.TableColumn)){const r=e.props;o.push({key:r.id,header:r.children,isHidden:l.isHidden||!1,ariaSort:r["aria-sort"]})}})}if(i(s,t.TableBody)){const l=s.props;n.Children.forEach(l.children,e=>{if(n.isValidElement(e)&&i(e,t.TableRow)){const r=e.props,u=[];let f=0;n.Children.forEach(r.children,p=>{var y;if(n.isValidElement(p)&&i(p,t.TableCell)){const d=p.props,m=d.columnKey||((y=o[f])==null?void 0:y.key);m&&u.push({columnKey:m,value:d.children,colSpan:d.colSpan}),f++}}),c.push({key:e.key||r.key||String(c.length),cells:u,onClick:r.onClick})}})}}}),{columns:o,rows:c}}exports.parseTableChildren=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),t=require("./CompoundComponents.cjs.js");function i(a,o){return a.type===o}function b(a){const o=[],c=[];return n.Children.forEach(a,s=>{if(n.isValidElement(s)){if(i(s,t.TableHeader)){const l=s.props;n.Children.forEach(l.children,e=>{if(n.isValidElement(e)&&i(e,t.TableColumn)){const r=e.props;o.push({key:r.id,header:r.children,isHidden:l.isHidden||!1,ariaSort:r["aria-sort"]})}})}if(i(s,t.TableBody)){const l=s.props;n.Children.forEach(l.children,e=>{if(n.isValidElement(e)&&i(e,t.TableRow)){const r=e.props,d=[];let f=0;n.Children.forEach(r.children,p=>{var y;if(n.isValidElement(p)&&i(p,t.TableCell)){const u=p.props,m=u.columnKey||((y=o[f])==null?void 0:y.key);m&&d.push({columnKey:m,value:u.children,colSpan:u.colSpan}),f++}}),c.push({key:e.key||r.key||String(c.length),cells:d,onClick:r.onClick})}})}}}),{columns:o,rows:c}}exports.parseTableChildren=b;
 //# sourceMappingURL=collectionParser.cjs.js.map

package/dist/components/Table/Collection/collectionParser.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"collectionParser.cjs.js","sources":["../../../../src/components/Table/Collection/collectionParser.ts"],"sourcesContent":["import {\n  Children,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  ComponentType,\n} from \"react\";\n\nimport {\n  TableHeader,\n  TableColumn as TableColumnComp,\n  TableBody,\n  TableRow as TableRowComp,\n  TableCell as TableCellComp,\n  type TableHeaderProps,\n  type TableColumnProps,\n  type TableBodyProps,\n  type TableRowProps,\n  type TableCellProps,\n} from \"./CompoundComponents\";\nimport type {\n  TableColumnData,\n  TableData,\n  TableRowData,\n  TableCellData,\n} from \"../types\";\n\nfunction isComponentType(\n  element: ReactElement,\n  componentType: ComponentType<any>\n): boolean {\n  return element.type === componentType;\n}\n\n/**\n * Parses JSX table structure into collection data format\n */\nexport function parseTableChildren(children: ReactNode): TableData {\n  const columns: TableColumnData[] = [];\n  const rows: TableRowData[] = [];\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) return;\n\n    // Parse columns from header\n    if (isComponentType(child, TableHeader)) {\n      const headerProps = child.props as TableHeaderProps;\n\n      Children.forEach(headerProps.children, (columnChild) => {\n        if (\n          isValidElement(columnChild) &&\n          isComponentType(columnChild, TableColumnComp)\n        ) {\n          const columnProps = columnChild.props as TableColumnProps;\n          columns.push({\n            key: columnProps.id,\n            header: columnProps.children,\n            isHidden: headerProps.isHidden || false,\n            ariaSort: columnProps[\"aria-sort\"],\n          });\n        }\n      });\n    }\n\n    // Parse rows from body\n    if (isComponentType(child, TableBody)) {\n      const bodyProps = child.props as TableBodyProps;\n      Children.forEach(bodyProps.children, (rowChild) => {\n        if (\n          isValidElement(rowChild) &&\n          isComponentType(rowChild, TableRowComp)\n        ) {\n          const rowProps = rowChild.props as TableRowProps;\n          const cells: TableCellData[] = [];\n\n          let cellIndex = 0;\n          Children.forEach(rowProps.children, (cellChild) => {\n            if (\n              isValidElement(cellChild) &&\n              isComponentType(cellChild, TableCellComp)\n            ) {\n              const cellProps = cellChild.props as TableCellProps;\n\n              // Map cell to column by index if no explicit columnKey\n              const columnKey = cellProps.columnKey || columns[cellIndex]?.key;\n\n              if (columnKey) {\n                cells.push({\n                  columnKey,\n                  value: cellProps.children,\n                  colSpan: cellProps.colSpan,\n                });\n              }\n              cellIndex++;\n            }\n          });\n\n          rows.push({\n            key:\n              (rowChild.key as string) || rowProps.key || String(rows.length),\n            cells,\n            onClick: rowProps.onClick,\n          });\n        }\n      });\n    }\n  });\n\n  return { columns, rows };\n}\n"],"names":["isComponentType","element","componentType","parseTableChildren","children","columns","rows","Children","child","isValidElement","TableHeader","headerProps","columnChild","TableColumnComp","columnProps","TableBody","bodyProps","rowChild","TableRowComp","rowProps","cells","cellIndex","cellChild","TableCellComp","cellProps","columnKey","_a"],"mappings":"kJA2BA,SAASA,EACPC,EACAC,EACS,CACT,OAAOD,EAAQ,OAASC,CAC1B,CAKO,SAASC,EAAmBC,EAAgC,CACjE,MAAMC,EAA6B,CAAA,EAC7BC,EAAuB,CAAA,EAEpBC,OAAAA,EAAAA,SAAA,QAAQH,EAAWI,GAAU,CAChC,GAACC,EAAAA,eAAeD,CAAK,EAGrB,IAAAR,EAAgBQ,EAAOE,EAAAA,WAAW,EAAG,CACvC,MAAMC,EAAcH,EAAM,MAE1BD,EAAAA,SAAS,QAAQI,EAAY,SAAWC,GAAgB,CACtD,GACEH,EAAAA,eAAeG,CAAW,GAC1BZ,EAAgBY,EAAaC,EAAe,WAAA,EAC5C,CACA,MAAMC,EAAcF,EAAY,MAChCP,EAAQ,KAAK,CACX,IAAKS,EAAY,GACjB,OAAQA,EAAY,SACpB,SAAUH,EAAY,UAAY,GAClC,SAAUG,EAAY,WAAW,CAAA,CAClC,CACH,CAAA,CACD,CACH,CAGI,GAAAd,EAAgBQ,EAAOO,EAAAA,SAAS,EAAG,CACrC,MAAMC,EAAYR,EAAM,MACxBD,EAAAA,SAAS,QAAQS,EAAU,SAAWC,GAAa,CACjD,GACER,EAAAA,eAAeQ,CAAQ,GACvBjB,EAAgBiB,EAAUC,EAAY,QAAA,EACtC,CACA,MAAMC,EAAWF,EAAS,MACpBG,EAAyB,CAAA,EAE/B,IAAIC,EAAY,EAChBd,EAAAA,SAAS,QAAQY,EAAS,SAAWG,GAAc,OACjD,GACEb,EAAAA,eAAea,CAAS,GACxBtB,EAAgBsB,EAAWC,EAAa,SAAA,EACxC,CACA,MAAMC,EAAYF,EAAU,MAGtBG,EAAYD,EAAU,aAAaE,EAAArB,EAAQgB,CAAS,IAAjB,YAAAK,EAAoB,KAEzDD,GACFL,EAAM,KAAK,CACT,UAAAK,EACA,MAAOD,EAAU,SACjB,QAASA,EAAU,OAAA,CACpB,EAEHH,GACF,CAAA,CACD,EAEDf,EAAK,KAAK,CACR,IACGW,EAAS,KAAkBE,EAAS,KAAO,OAAOb,EAAK,MAAM,EAChE,MAAAc,EACA,QAASD,EAAS,OAAA,CACnB,CACH,CAAA,CACD,CACH,EAAA,CACD,EAEM,CAAE,QAAAd,EAAS,KAAAC,EACpB"}
+{"version":3,"file":"collectionParser.cjs.js","sources":["../../../../src/components/Table/Collection/collectionParser.ts"],"sourcesContent":["import {\n  Children,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  ComponentType,\n} from \"react\";\n\nimport {\n  TableHeader,\n  TableColumn as TableColumnComp,\n  TableBody,\n  TableRow as TableRowComp,\n  TableCell as TableCellComp,\n  type TableHeaderProps,\n  type TableColumnProps,\n  type TableBodyProps,\n  type TableRowProps,\n  type TableCellProps,\n} from \"./CompoundComponents\";\nimport type {\n  TableColumnData,\n  TableData,\n  TableRowData,\n  TableCellData,\n} from \"../types\";\n\nfunction isComponentType(\n  element: ReactElement,\n  componentType: ComponentType<any>\n): boolean {\n  return element.type === componentType;\n}\n\n/**\n * Parses JSX table structure into collection data format\n */\nexport function parseTableChildren(children: ReactNode): TableData {\n  const columns: TableColumnData[] = [];\n  const rows: TableRowData[] = [];\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) return;\n\n    // Parse columns from header\n    if (isComponentType(child, TableHeader)) {\n      const headerProps = child.props as TableHeaderProps;\n\n      Children.forEach(headerProps.children, (columnChild) => {\n        if (\n          isValidElement(columnChild) &&\n          isComponentType(columnChild, TableColumnComp)\n        ) {\n          const columnProps = columnChild.props as TableColumnProps;\n          columns.push({\n            key: columnProps.id,\n            header: columnProps.children,\n            isHidden: headerProps.isHidden || false,\n            ariaSort: columnProps[\"aria-sort\"],\n          });\n        }\n      });\n    }\n\n    // Parse rows from body\n    if (isComponentType(child, TableBody)) {\n      const bodyProps = child.props as TableBodyProps;\n      Children.forEach(bodyProps.children, (rowChild) => {\n        if (!isValidElement(rowChild)) return;\n\n        // Check if it's a Table.Row\n        if (isComponentType(rowChild, TableRowComp)) {\n          const rowProps = rowChild.props as TableRowProps;\n          const cells: TableCellData[] = [];\n\n          let cellIndex = 0;\n          Children.forEach(rowProps.children, (cellChild) => {\n            if (\n              isValidElement(cellChild) &&\n              isComponentType(cellChild, TableCellComp)\n            ) {\n              const cellProps = cellChild.props as TableCellProps;\n\n              // Map cell to column by index if no explicit columnKey\n              const columnKey = cellProps.columnKey || columns[cellIndex]?.key;\n\n              if (columnKey) {\n                cells.push({\n                  columnKey,\n                  value: cellProps.children,\n                  colSpan: cellProps.colSpan,\n                });\n              }\n              cellIndex++;\n            }\n          });\n\n          rows.push({\n            key:\n              (rowChild.key as string) || rowProps.key || String(rows.length),\n            cells,\n            onClick: rowProps.onClick,\n          });\n        }\n      });\n    }\n  });\n\n  return { columns, rows };\n}\n"],"names":["isComponentType","element","componentType","parseTableChildren","children","columns","rows","Children","child","isValidElement","TableHeader","headerProps","columnChild","TableColumnComp","columnProps","TableBody","bodyProps","rowChild","TableRowComp","rowProps","cells","cellIndex","cellChild","TableCellComp","cellProps","columnKey","_a"],"mappings":"kJA2BA,SAASA,EACPC,EACAC,EACS,CACT,OAAOD,EAAQ,OAASC,CAC1B,CAKO,SAASC,EAAmBC,EAAgC,CACjE,MAAMC,EAA6B,CAAA,EAC7BC,EAAuB,CAAA,EAEpBC,OAAAA,EAAAA,SAAA,QAAQH,EAAWI,GAAU,CAChC,GAACC,EAAAA,eAAeD,CAAK,EAGrB,IAAAR,EAAgBQ,EAAOE,EAAAA,WAAW,EAAG,CACvC,MAAMC,EAAcH,EAAM,MAE1BD,EAAAA,SAAS,QAAQI,EAAY,SAAWC,GAAgB,CACtD,GACEH,EAAAA,eAAeG,CAAW,GAC1BZ,EAAgBY,EAAaC,EAAe,WAAA,EAC5C,CACA,MAAMC,EAAcF,EAAY,MAChCP,EAAQ,KAAK,CACX,IAAKS,EAAY,GACjB,OAAQA,EAAY,SACpB,SAAUH,EAAY,UAAY,GAClC,SAAUG,EAAY,WAAW,CAAA,CAClC,CACH,CAAA,CACD,CACH,CAGI,GAAAd,EAAgBQ,EAAOO,EAAAA,SAAS,EAAG,CACrC,MAAMC,EAAYR,EAAM,MACxBD,EAAAA,SAAS,QAAQS,EAAU,SAAWC,GAAa,CAC7C,GAACR,EAAAA,eAAeQ,CAAQ,GAGxBjB,EAAgBiB,EAAUC,EAAAA,QAAY,EAAG,CAC3C,MAAMC,EAAWF,EAAS,MACpBG,EAAyB,CAAA,EAE/B,IAAIC,EAAY,EAChBd,EAAAA,SAAS,QAAQY,EAAS,SAAWG,GAAc,OACjD,GACEb,EAAAA,eAAea,CAAS,GACxBtB,EAAgBsB,EAAWC,EAAa,SAAA,EACxC,CACA,MAAMC,EAAYF,EAAU,MAGtBG,EAAYD,EAAU,aAAaE,EAAArB,EAAQgB,CAAS,IAAjB,YAAAK,EAAoB,KAEzDD,GACFL,EAAM,KAAK,CACT,UAAAK,EACA,MAAOD,EAAU,SACjB,QAASA,EAAU,OAAA,CACpB,EAEHH,GACF,CAAA,CACD,EAEDf,EAAK,KAAK,CACR,IACGW,EAAS,KAAkBE,EAAS,KAAO,OAAOb,EAAK,MAAM,EAChE,MAAAc,EACA,QAASD,EAAS,OAAA,CACnB,CACH,CAAA,CACD,CACH,EAAA,CACD,EAEM,CAAE,QAAAd,EAAS,KAAAC,EACpB"}

package/dist/components/Table/Collection/collectionParser.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"collectionParser.es.js","sources":["../../../../src/components/Table/Collection/collectionParser.ts"],"sourcesContent":["import {\n  Children,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  ComponentType,\n} from \"react\";\n\nimport {\n  TableHeader,\n  TableColumn as TableColumnComp,\n  TableBody,\n  TableRow as TableRowComp,\n  TableCell as TableCellComp,\n  type TableHeaderProps,\n  type TableColumnProps,\n  type TableBodyProps,\n  type TableRowProps,\n  type TableCellProps,\n} from \"./CompoundComponents\";\nimport type {\n  TableColumnData,\n  TableData,\n  TableRowData,\n  TableCellData,\n} from \"../types\";\n\nfunction isComponentType(\n  element: ReactElement,\n  componentType: ComponentType<any>\n): boolean {\n  return element.type === componentType;\n}\n\n/**\n * Parses JSX table structure into collection data format\n */\nexport function parseTableChildren(children: ReactNode): TableData {\n  const columns: TableColumnData[] = [];\n  const rows: TableRowData[] = [];\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) return;\n\n    // Parse columns from header\n    if (isComponentType(child, TableHeader)) {\n      const headerProps = child.props as TableHeaderProps;\n\n      Children.forEach(headerProps.children, (columnChild) => {\n        if (\n          isValidElement(columnChild) &&\n          isComponentType(columnChild, TableColumnComp)\n        ) {\n          const columnProps = columnChild.props as TableColumnProps;\n          columns.push({\n            key: columnProps.id,\n            header: columnProps.children,\n            isHidden: headerProps.isHidden || false,\n            ariaSort: columnProps[\"aria-sort\"],\n          });\n        }\n      });\n    }\n\n    // Parse rows from body\n    if (isComponentType(child, TableBody)) {\n      const bodyProps = child.props as TableBodyProps;\n      Children.forEach(bodyProps.children, (rowChild) => {\n        if (\n          isValidElement(rowChild) &&\n          isComponentType(rowChild, TableRowComp)\n        ) {\n          const rowProps = rowChild.props as TableRowProps;\n          const cells: TableCellData[] = [];\n\n          let cellIndex = 0;\n          Children.forEach(rowProps.children, (cellChild) => {\n            if (\n              isValidElement(cellChild) &&\n              isComponentType(cellChild, TableCellComp)\n            ) {\n              const cellProps = cellChild.props as TableCellProps;\n\n              // Map cell to column by index if no explicit columnKey\n              const columnKey = cellProps.columnKey || columns[cellIndex]?.key;\n\n              if (columnKey) {\n                cells.push({\n                  columnKey,\n                  value: cellProps.children,\n                  colSpan: cellProps.colSpan,\n                });\n              }\n              cellIndex++;\n            }\n          });\n\n          rows.push({\n            key:\n              (rowChild.key as string) || rowProps.key || String(rows.length),\n            cells,\n            onClick: rowProps.onClick,\n          });\n        }\n      });\n    }\n  });\n\n  return { columns, rows };\n}\n"],"names":["isComponentType","element","componentType","parseTableChildren","children","columns","rows","Children","child","isValidElement","TableHeader","headerProps","columnChild","TableColumnComp","columnProps","TableBody","bodyProps","rowChild","TableRowComp","rowProps","cells","cellIndex","cellChild","TableCellComp","cellProps","columnKey","_a"],"mappings":";;AA2BA,SAASA,EACPC,GACAC,GACS;AACT,SAAOD,EAAQ,SAASC;AAC1B;AAKO,SAASC,EAAmBC,GAAgC;AACjE,QAAMC,IAA6B,CAAA,GAC7BC,IAAuB,CAAA;AAEpB,SAAAC,EAAA,QAAQH,GAAU,CAACI,MAAU;AAChC,QAACC,EAAeD,CAAK,GAGrB;AAAA,UAAAR,EAAgBQ,GAAOE,CAAW,GAAG;AACvC,cAAMC,IAAcH,EAAM;AAE1B,QAAAD,EAAS,QAAQI,EAAY,UAAU,CAACC,MAAgB;AACtD,cACEH,EAAeG,CAAW,KAC1BZ,EAAgBY,GAAaC,CAAe,GAC5C;AACA,kBAAMC,IAAcF,EAAY;AAChC,YAAAP,EAAQ,KAAK;AAAA,cACX,KAAKS,EAAY;AAAA,cACjB,QAAQA,EAAY;AAAA,cACpB,UAAUH,EAAY,YAAY;AAAA,cAClC,UAAUG,EAAY,WAAW;AAAA,YAAA,CAClC;AAAA,UACH;AAAA,QAAA,CACD;AAAA,MACH;AAGI,UAAAd,EAAgBQ,GAAOO,CAAS,GAAG;AACrC,cAAMC,IAAYR,EAAM;AACxB,QAAAD,EAAS,QAAQS,EAAU,UAAU,CAACC,MAAa;AACjD,cACER,EAAeQ,CAAQ,KACvBjB,EAAgBiB,GAAUC,CAAY,GACtC;AACA,kBAAMC,IAAWF,EAAS,OACpBG,IAAyB,CAAA;AAE/B,gBAAIC,IAAY;AAChB,YAAAd,EAAS,QAAQY,EAAS,UAAU,CAACG,MAAc;;AACjD,kBACEb,EAAea,CAAS,KACxBtB,EAAgBsB,GAAWC,CAAa,GACxC;AACA,sBAAMC,IAAYF,EAAU,OAGtBG,IAAYD,EAAU,eAAaE,IAAArB,EAAQgB,CAAS,MAAjB,gBAAAK,EAAoB;AAE7D,gBAAID,KACFL,EAAM,KAAK;AAAA,kBACT,WAAAK;AAAA,kBACA,OAAOD,EAAU;AAAA,kBACjB,SAASA,EAAU;AAAA,gBAAA,CACpB,GAEHH;AAAA,cACF;AAAA,YAAA,CACD,GAEDf,EAAK,KAAK;AAAA,cACR,KACGW,EAAS,OAAkBE,EAAS,OAAO,OAAOb,EAAK,MAAM;AAAA,cAChE,OAAAc;AAAA,cACA,SAASD,EAAS;AAAA,YAAA,CACnB;AAAA,UACH;AAAA,QAAA,CACD;AAAA,MACH;AAAA;AAAA,EAAA,CACD,GAEM,EAAE,SAAAd,GAAS,MAAAC;AACpB;"}
+{"version":3,"file":"collectionParser.es.js","sources":["../../../../src/components/Table/Collection/collectionParser.ts"],"sourcesContent":["import {\n  Children,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  ComponentType,\n} from \"react\";\n\nimport {\n  TableHeader,\n  TableColumn as TableColumnComp,\n  TableBody,\n  TableRow as TableRowComp,\n  TableCell as TableCellComp,\n  type TableHeaderProps,\n  type TableColumnProps,\n  type TableBodyProps,\n  type TableRowProps,\n  type TableCellProps,\n} from \"./CompoundComponents\";\nimport type {\n  TableColumnData,\n  TableData,\n  TableRowData,\n  TableCellData,\n} from \"../types\";\n\nfunction isComponentType(\n  element: ReactElement,\n  componentType: ComponentType<any>\n): boolean {\n  return element.type === componentType;\n}\n\n/**\n * Parses JSX table structure into collection data format\n */\nexport function parseTableChildren(children: ReactNode): TableData {\n  const columns: TableColumnData[] = [];\n  const rows: TableRowData[] = [];\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) return;\n\n    // Parse columns from header\n    if (isComponentType(child, TableHeader)) {\n      const headerProps = child.props as TableHeaderProps;\n\n      Children.forEach(headerProps.children, (columnChild) => {\n        if (\n          isValidElement(columnChild) &&\n          isComponentType(columnChild, TableColumnComp)\n        ) {\n          const columnProps = columnChild.props as TableColumnProps;\n          columns.push({\n            key: columnProps.id,\n            header: columnProps.children,\n            isHidden: headerProps.isHidden || false,\n            ariaSort: columnProps[\"aria-sort\"],\n          });\n        }\n      });\n    }\n\n    // Parse rows from body\n    if (isComponentType(child, TableBody)) {\n      const bodyProps = child.props as TableBodyProps;\n      Children.forEach(bodyProps.children, (rowChild) => {\n        if (!isValidElement(rowChild)) return;\n\n        // Check if it's a Table.Row\n        if (isComponentType(rowChild, TableRowComp)) {\n          const rowProps = rowChild.props as TableRowProps;\n          const cells: TableCellData[] = [];\n\n          let cellIndex = 0;\n          Children.forEach(rowProps.children, (cellChild) => {\n            if (\n              isValidElement(cellChild) &&\n              isComponentType(cellChild, TableCellComp)\n            ) {\n              const cellProps = cellChild.props as TableCellProps;\n\n              // Map cell to column by index if no explicit columnKey\n              const columnKey = cellProps.columnKey || columns[cellIndex]?.key;\n\n              if (columnKey) {\n                cells.push({\n                  columnKey,\n                  value: cellProps.children,\n                  colSpan: cellProps.colSpan,\n                });\n              }\n              cellIndex++;\n            }\n          });\n\n          rows.push({\n            key:\n              (rowChild.key as string) || rowProps.key || String(rows.length),\n            cells,\n            onClick: rowProps.onClick,\n          });\n        }\n      });\n    }\n  });\n\n  return { columns, rows };\n}\n"],"names":["isComponentType","element","componentType","parseTableChildren","children","columns","rows","Children","child","isValidElement","TableHeader","headerProps","columnChild","TableColumnComp","columnProps","TableBody","bodyProps","rowChild","TableRowComp","rowProps","cells","cellIndex","cellChild","TableCellComp","cellProps","columnKey","_a"],"mappings":";;AA2BA,SAASA,EACPC,GACAC,GACS;AACT,SAAOD,EAAQ,SAASC;AAC1B;AAKO,SAASC,EAAmBC,GAAgC;AACjE,QAAMC,IAA6B,CAAA,GAC7BC,IAAuB,CAAA;AAEpB,SAAAC,EAAA,QAAQH,GAAU,CAACI,MAAU;AAChC,QAACC,EAAeD,CAAK,GAGrB;AAAA,UAAAR,EAAgBQ,GAAOE,CAAW,GAAG;AACvC,cAAMC,IAAcH,EAAM;AAE1B,QAAAD,EAAS,QAAQI,EAAY,UAAU,CAACC,MAAgB;AACtD,cACEH,EAAeG,CAAW,KAC1BZ,EAAgBY,GAAaC,CAAe,GAC5C;AACA,kBAAMC,IAAcF,EAAY;AAChC,YAAAP,EAAQ,KAAK;AAAA,cACX,KAAKS,EAAY;AAAA,cACjB,QAAQA,EAAY;AAAA,cACpB,UAAUH,EAAY,YAAY;AAAA,cAClC,UAAUG,EAAY,WAAW;AAAA,YAAA,CAClC;AAAA,UACH;AAAA,QAAA,CACD;AAAA,MACH;AAGI,UAAAd,EAAgBQ,GAAOO,CAAS,GAAG;AACrC,cAAMC,IAAYR,EAAM;AACxB,QAAAD,EAAS,QAAQS,EAAU,UAAU,CAACC,MAAa;AAC7C,cAACR,EAAeQ,CAAQ,KAGxBjB,EAAgBiB,GAAUC,CAAY,GAAG;AAC3C,kBAAMC,IAAWF,EAAS,OACpBG,IAAyB,CAAA;AAE/B,gBAAIC,IAAY;AAChB,YAAAd,EAAS,QAAQY,EAAS,UAAU,CAACG,MAAc;;AACjD,kBACEb,EAAea,CAAS,KACxBtB,EAAgBsB,GAAWC,CAAa,GACxC;AACA,sBAAMC,IAAYF,EAAU,OAGtBG,IAAYD,EAAU,eAAaE,IAAArB,EAAQgB,CAAS,MAAjB,gBAAAK,EAAoB;AAE7D,gBAAID,KACFL,EAAM,KAAK;AAAA,kBACT,WAAAK;AAAA,kBACA,OAAOD,EAAU;AAAA,kBACjB,SAASA,EAAU;AAAA,gBAAA,CACpB,GAEHH;AAAA,cACF;AAAA,YAAA,CACD,GAEDf,EAAK,KAAK;AAAA,cACR,KACGW,EAAS,OAAkBE,EAAS,OAAO,OAAOb,EAAK,MAAM;AAAA,cAChE,OAAAc;AAAA,cACA,SAASD,EAAS;AAAA,YAAA,CACnB;AAAA,UACH;AAAA,QAAA,CACD;AAAA,MACH;AAAA;AAAA,EAAA,CACD,GAEM,EAAE,SAAAd,GAAS,MAAAC;AACpB;"}

package/dist/components/Table/Table.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../node_modules/react/jsx-runtime.cjs.js"),p=require("react"),x=require("./Collection/collectionParser.cjs.js"),t=require("./Collection/CompoundComponents.cjs.js"),b=require("./Collection/useTableCollection.cjs.js");;/* empty css               */const m=({children:i,name:c})=>{const d=p.useMemo(()=>x.parseTableChildren(i),[i]),a=b.useTableCollection(d);return o.jsxRuntimeExports.jsxs("table",{className:"proton-Table",role:"table","aria-rowcount":a.getTotalRowCount,"aria-colcount":a.columns.length,"aria-label":c,children:[o.jsxRuntimeExports.jsx("caption",{className:"proton-Table__caption",children:c}),o.jsxRuntimeExports.jsx("thead",{className:"proton-Table__rowGroup--header",role:"rowgroup",style:a.isHeaderHidden?{display:"none"}:void 0,children:o.jsxRuntimeExports.jsx("tr",{className:"proton-Table__header-row",role:"row","aria-rowindex":1,children:a.columns.map((e,s)=>o.jsxRuntimeExports.jsx("th",{className:"proton-Table__header",role:"columnheader",scope:"col","aria-colindex":s+1,"aria-sort":e.ariaSort,children:e.header},e.key))})}),o.jsxRuntimeExports.jsx("tbody",{className:"proton-Table__body",role:"rowgroup",children:a.rows.map((e,s)=>o.jsxRuntimeExports.jsx("tr",{className:"proton-Table__row",role:"row","aria-rowindex":a.getRowAriaIndex(s),onClick:e==null?void 0:e.onClick,tabIndex:e!=null&&e.onClick?0:void 0,onKeyDown:e!=null&&e.onClick?l=>{var r;(l.key==="Enter"||l.key===" ")&&(l.preventDefault(),(r=e.onClick)==null||r.call(e))}:void 0,children:a.columns.map((l,r)=>{const n=e.cells.find(u=>u.columnKey===l.key);return o.jsxRuntimeExports.jsx("td",{className:"proton-Table__cell",role:"cell","aria-colindex":r+1,colSpan:n==null?void 0:n.colSpan,children:(n==null?void 0:n.value)||""},l.key)})},e.key))})]})},T=Object.assign(m,{Header:t.TableHeader,Column:t.TableColumn,Body:t.TableBody,Row:t.TableRow,Cell:t.TableCell});exports.Table=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../node_modules/react/jsx-runtime.cjs.js"),i=require("react"),c=require("./Collection/collectionParser.cjs.js"),a=require("./Collection/CompoundComponents.cjs.js"),u=require("./Collection/useTableCollection.cjs.js"),d=require("./TableRow.cjs.js");;/* empty css               */const b=({children:t,name:s})=>{const n=i.useMemo(()=>c.parseTableChildren(t),[t]),e=u.useTableCollection(n);return o.jsxRuntimeExports.jsxs("table",{className:"proton-Table",role:"table","aria-rowcount":e.getTotalRowCount,"aria-colcount":e.columns.length,"aria-label":s,children:[o.jsxRuntimeExports.jsx("caption",{className:"proton-Table__caption",children:s}),o.jsxRuntimeExports.jsx("thead",{className:"proton-Table__rowGroup--header",role:"rowgroup",style:e.isHeaderHidden?{display:"none"}:void 0,children:o.jsxRuntimeExports.jsx("tr",{className:"proton-Table__header-row",role:"row","aria-rowindex":1,children:e.columns.map((r,l)=>o.jsxRuntimeExports.jsx("th",{className:"proton-Table__header",role:"columnheader",scope:"col","aria-colindex":l+1,"aria-sort":r.ariaSort,children:r.header},r.key))})}),o.jsxRuntimeExports.jsx("tbody",{className:"proton-Table__body",role:"rowgroup",children:e.rows.map((r,l)=>o.jsxRuntimeExports.jsx(d.TableRow,{row:r,columns:e.columns,rowIndex:l,getRowAriaIndex:e.getRowAriaIndex},r.key))})]})},p=Object.assign(b,{Header:a.TableHeader,Column:a.TableColumn,Body:a.TableBody,Row:a.TableRow,Cell:a.TableCell});exports.Table=p;
 //# sourceMappingURL=Table.cjs.js.map

package/dist/components/Table/Table.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.cjs.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import { ReactElement, useMemo } from \"react\";\nimport { parseTableChildren } from \"./Collection/collectionParser\";\nimport {\n  TableHeader,\n  TableColumn,\n  TableBody,\n  TableRow,\n  TableCell,\n  TableHeaderProps,\n  TableColumnProps,\n  TableBodyProps,\n  TableRowProps,\n  TableCellProps,\n} from \"./Collection/CompoundComponents\";\nimport { useTableCollection } from \"./Collection/useTableCollection\";\nimport type {\n  TableData,\n  TableColumnData,\n  TableRowData,\n  TableCellData,\n} from \"./types\";\nimport \"./Table.css\";\n\nexport type { TableColumnData, TableCellData, TableRowData, TableData };\n\nexport interface TableProps {\n  children: [ReactElement<TableHeaderProps>, ReactElement<TableBodyProps>];\n  /** Table name/caption for accessibility. Provides essential context for screen readers about table content. */\n  name: string;\n}\n\nconst TableComponent = ({ children, name }: TableProps) => {\n  const tableData: TableData = useMemo(\n    () => parseTableChildren(children),\n    [children]\n  );\n  const collection = useTableCollection(tableData);\n\n  return (\n    <table\n      className=\"proton-Table\"\n      role=\"table\"\n      aria-rowcount={collection.getTotalRowCount}\n      aria-colcount={collection.columns.length}\n      aria-label={name}\n    >\n      <caption className=\"proton-Table__caption\">{name}</caption>\n\n      {/* Header */}\n      <thead\n        className=\"proton-Table__rowGroup--header\"\n        role=\"rowgroup\"\n        style={collection.isHeaderHidden ? { display: \"none\" } : undefined}\n      >\n        <tr className=\"proton-Table__header-row\" role=\"row\" aria-rowindex={1}>\n          {collection.columns.map((column, index) => (\n            <th\n              key={column.key}\n              className=\"proton-Table__header\"\n              role=\"columnheader\"\n              scope=\"col\"\n              aria-colindex={index + 1}\n              aria-sort={column.ariaSort}\n            >\n              {column.header}\n            </th>\n          ))}\n        </tr>\n      </thead>\n\n      {/* Body */}\n      <tbody className=\"proton-Table__body\" role=\"rowgroup\">\n        {collection.rows.map((row, rowIndex) => (\n          <tr\n            key={row.key}\n            className=\"proton-Table__row\"\n            role=\"row\"\n            aria-rowindex={collection.getRowAriaIndex(rowIndex)}\n            onClick={row?.onClick}\n            tabIndex={row?.onClick ? 0 : undefined}\n            onKeyDown={\n              row?.onClick\n                ? (e) => {\n                    if (e.key === \"Enter\" || e.key === \" \") {\n                      // Enable keyboard navigation\n                      e.preventDefault();\n                      row.onClick?.();\n                    }\n                  }\n                : undefined\n            }\n          >\n            {collection.columns.map((column, colIndex) => {\n              const cell = row.cells.find((c) => c.columnKey === column.key);\n              return (\n                <td\n                  key={column.key}\n                  className=\"proton-Table__cell\"\n                  role=\"cell\"\n                  aria-colindex={colIndex + 1}\n                  colSpan={cell?.colSpan}\n                >\n                  {cell?.value || \"\"}\n                </td>\n              );\n            })}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\n/**\n * Base Table component that renders data in rows and columns using collections.\n *\n * - Built-in keyboard navigation for interactive rows.\n * - Full ARIA table semantics with proper roles, labels, and indices.\n *\n * API:\n *  - {@link TableProps}\n *\n * @example\n * ```tsx\n * <Table caption=\"Employee Directory\">\n *   <Table.Header>\n *     <Table.Column id=\"name\">Name</Table.Column>\n *   </Table.Header>\n *   <Table.Body>\n *     <Table.Row key=\"1\">\n *       <Table.Cell>Joe</Table.Cell>\n *     </Table.Row>\n *   </Table.Body>\n * </Table>\n * ```\n */\nconst Table = Object.assign(TableComponent, {\n  /** Table header: {@link TableHeaderProps} */\n  Header: TableHeader,\n  /** Table column: {@link TableColumnProps} */\n  Column: TableColumn,\n  /** Table body: {@link TableBodyProps} */\n  Body: TableBody,\n  /** Table row: {@link TableRowProps} */\n  Row: TableRow,\n  /** Table cell: {@link TableCellProps} */\n  Cell: TableCell,\n});\n\nexport { Table };\nexport type {\n  TableHeaderProps,\n  TableColumnProps,\n  TableBodyProps,\n  TableRowProps,\n  TableCellProps,\n};\n"],"names":["TableComponent","children","name","tableData","useMemo","parseTableChildren","collection","useTableCollection","jsxs","jsx","column","index","row","rowIndex","e","_a","colIndex","cell","c","Table","TableHeader","TableColumn","TableBody","TableRow","TableCell"],"mappings":"0VA+BA,MAAMA,EAAiB,CAAC,CAAE,SAAAC,EAAU,KAAAC,KAAuB,CACzD,MAAMC,EAAuBC,EAAA,QAC3B,IAAMC,EAAAA,mBAAmBJ,CAAQ,EACjC,CAACA,CAAQ,CAAA,EAELK,EAAaC,qBAAmBJ,CAAS,EAG7C,OAAAK,EAAA,kBAAA,KAAC,QAAA,CACC,UAAU,eACV,KAAK,QACL,gBAAeF,EAAW,iBAC1B,gBAAeA,EAAW,QAAQ,OAClC,aAAYJ,EAEZ,SAAA,CAACO,EAAA,kBAAA,IAAA,UAAA,CAAQ,UAAU,wBAAyB,SAAKP,EAAA,EAGjDO,EAAA,kBAAA,IAAC,QAAA,CACC,UAAU,iCACV,KAAK,WACL,MAAOH,EAAW,eAAiB,CAAE,QAAS,MAAW,EAAA,OAEzD,SAACG,EAAA,kBAAA,IAAA,KAAA,CAAG,UAAU,2BAA2B,KAAK,MAAM,gBAAe,EAChE,SAAWH,EAAA,QAAQ,IAAI,CAACI,EAAQC,IAC/BF,EAAA,kBAAA,IAAC,KAAA,CAEC,UAAU,uBACV,KAAK,eACL,MAAM,MACN,gBAAeE,EAAQ,EACvB,YAAWD,EAAO,SAEjB,SAAOA,EAAA,MAAA,EAPHA,EAAO,GASf,CAAA,EACH,CAAA,CACF,EAGAD,EAAAA,kBAAAA,IAAC,QAAM,CAAA,UAAU,qBAAqB,KAAK,WACxC,SAAAH,EAAW,KAAK,IAAI,CAACM,EAAKC,IACzBJ,EAAA,kBAAA,IAAC,KAAA,CAEC,UAAU,oBACV,KAAK,MACL,gBAAeH,EAAW,gBAAgBO,CAAQ,EAClD,QAASD,GAAA,YAAAA,EAAK,QACd,SAAUA,GAAA,MAAAA,EAAK,QAAU,EAAI,OAC7B,UACEA,GAAA,MAAAA,EAAK,QACAE,GAAM,QACDA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,OAEjCA,EAAE,eAAe,GACjBC,EAAAH,EAAI,UAAJ,MAAAG,EAAA,KAAAH,GAGJ,EAAA,OAGL,SAAWN,EAAA,QAAQ,IAAI,CAACI,EAAQM,IAAa,CACtC,MAAAC,EAAOL,EAAI,MAAM,KAAMM,GAAMA,EAAE,YAAcR,EAAO,GAAG,EAE3D,OAAAD,EAAA,kBAAA,IAAC,KAAA,CAEC,UAAU,qBACV,KAAK,OACL,gBAAeO,EAAW,EAC1B,QAASC,GAAA,YAAAA,EAAM,QAEd,2BAAM,QAAS,EAAA,EANXP,EAAO,GAAA,CAOd,CAEH,CAAA,EA/BIE,EAAI,GAiCZ,CAAA,EACH,CAAA,CAAA,CAAA,CAGN,EAyBMO,EAAQ,OAAO,OAAOnB,EAAgB,CAE1C,OAAQoB,EAAA,YAER,OAAQC,EAAA,YAER,KAAMC,EAAA,UAEN,IAAKC,EAAA,SAEL,KAAMC,EAAA,SACR,CAAC"}
+{"version":3,"file":"Table.cjs.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import { ReactElement, useMemo } from \"react\";\nimport { parseTableChildren } from \"./Collection/collectionParser\";\nimport {\n  TableHeader,\n  TableColumn,\n  TableBody,\n  TableRow,\n  TableCell,\n  TableHeaderProps,\n  TableColumnProps,\n  TableBodyProps,\n  TableRowProps,\n  TableCellProps,\n} from \"./Collection/CompoundComponents\";\nimport { useTableCollection } from \"./Collection/useTableCollection\";\nimport { TableRow as MemoizedTableRow } from \"./TableRow\";\nimport type {\n  TableData,\n  TableColumnData,\n  TableRowData,\n  TableCellData,\n} from \"./types\";\nimport \"./Table.css\";\n\nexport type { TableColumnData, TableCellData, TableRowData, TableData };\n\nexport interface TableProps {\n  children: [ReactElement<TableHeaderProps>, ReactElement<TableBodyProps>];\n  /** Table name/caption for accessibility. Provides essential context for screen readers about table content. */\n  name: string;\n}\n\nconst TableComponent = ({ children, name }: TableProps) => {\n  const tableData: TableData = useMemo(\n    () => parseTableChildren(children),\n    [children]\n  );\n  const collection = useTableCollection(tableData);\n\n  return (\n    <table\n      className=\"proton-Table\"\n      role=\"table\"\n      aria-rowcount={collection.getTotalRowCount}\n      aria-colcount={collection.columns.length}\n      aria-label={name}\n    >\n      <caption className=\"proton-Table__caption\">{name}</caption>\n\n      {/* Header */}\n      <thead\n        className=\"proton-Table__rowGroup--header\"\n        role=\"rowgroup\"\n        style={collection.isHeaderHidden ? { display: \"none\" } : undefined}\n      >\n        <tr className=\"proton-Table__header-row\" role=\"row\" aria-rowindex={1}>\n          {collection.columns.map((column, index) => (\n            <th\n              key={column.key}\n              className=\"proton-Table__header\"\n              role=\"columnheader\"\n              scope=\"col\"\n              aria-colindex={index + 1}\n              aria-sort={column.ariaSort}\n            >\n              {column.header}\n            </th>\n          ))}\n        </tr>\n      </thead>\n\n      {/* Body */}\n      <tbody className=\"proton-Table__body\" role=\"rowgroup\">\n        {collection.rows.map((row, rowIndex) => (\n          <MemoizedTableRow\n            key={row.key}\n            row={row}\n            columns={collection.columns}\n            rowIndex={rowIndex}\n            getRowAriaIndex={collection.getRowAriaIndex}\n          />\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\n/**\n * Base Table component that renders data in rows and columns using collections.\n *\n * - Built-in keyboard navigation for interactive rows.\n * - Full ARIA table semantics with proper roles, labels, and indices.\n * - Rows are memoized by default for optimal performance.\n *\n * API:\n *  - {@link TableProps}\n *\n * @example\n * ```tsx\n * <Table name=\"Employee Directory\">\n *   <Table.Header>\n *     <Table.Column id=\"name\">Name</Table.Column>\n *   </Table.Header>\n *   <Table.Body>\n *     <Table.Row key=\"1\">\n *       <Table.Cell>Joe</Table.Cell>\n *     </Table.Row>\n *   </Table.Body>\n * </Table>\n * ```\n */\nconst Table = Object.assign(TableComponent, {\n  /** Table header: {@link TableHeaderProps} */\n  Header: TableHeader,\n  /** Table column: {@link TableColumnProps} */\n  Column: TableColumn,\n  /** Table body: {@link TableBodyProps} */\n  Body: TableBody,\n  /** Table row: {@link TableRowProps} */\n  Row: TableRow,\n  /** Table cell: {@link TableCellProps} */\n  Cell: TableCell,\n});\n\nexport { Table };\nexport type {\n  TableHeaderProps,\n  TableColumnProps,\n  TableBodyProps,\n  TableRowProps,\n  TableCellProps,\n};\n"],"names":["TableComponent","children","name","tableData","useMemo","parseTableChildren","collection","useTableCollection","jsxs","jsx","column","index","row","rowIndex","MemoizedTableRow","Table","TableHeader","TableColumn","TableBody","TableRow","TableCell"],"mappings":"yXAgCA,MAAMA,EAAiB,CAAC,CAAE,SAAAC,EAAU,KAAAC,KAAuB,CACzD,MAAMC,EAAuBC,EAAA,QAC3B,IAAMC,EAAAA,mBAAmBJ,CAAQ,EACjC,CAACA,CAAQ,CAAA,EAELK,EAAaC,qBAAmBJ,CAAS,EAG7C,OAAAK,EAAA,kBAAA,KAAC,QAAA,CACC,UAAU,eACV,KAAK,QACL,gBAAeF,EAAW,iBAC1B,gBAAeA,EAAW,QAAQ,OAClC,aAAYJ,EAEZ,SAAA,CAACO,EAAA,kBAAA,IAAA,UAAA,CAAQ,UAAU,wBAAyB,SAAKP,EAAA,EAGjDO,EAAA,kBAAA,IAAC,QAAA,CACC,UAAU,iCACV,KAAK,WACL,MAAOH,EAAW,eAAiB,CAAE,QAAS,MAAW,EAAA,OAEzD,SAACG,EAAA,kBAAA,IAAA,KAAA,CAAG,UAAU,2BAA2B,KAAK,MAAM,gBAAe,EAChE,SAAWH,EAAA,QAAQ,IAAI,CAACI,EAAQC,IAC/BF,EAAA,kBAAA,IAAC,KAAA,CAEC,UAAU,uBACV,KAAK,eACL,MAAM,MACN,gBAAeE,EAAQ,EACvB,YAAWD,EAAO,SAEjB,SAAOA,EAAA,MAAA,EAPHA,EAAO,GASf,CAAA,EACH,CAAA,CACF,EAGAD,EAAAA,kBAAAA,IAAC,QAAM,CAAA,UAAU,qBAAqB,KAAK,WACxC,SAAAH,EAAW,KAAK,IAAI,CAACM,EAAKC,IACzBJ,EAAA,kBAAA,IAACK,EAAA,SAAA,CAEC,IAAAF,EACA,QAASN,EAAW,QACpB,SAAAO,EACA,gBAAiBP,EAAW,eAAA,EAJvBM,EAAI,GAMZ,CAAA,EACH,CAAA,CAAA,CAAA,CAGN,EA0BMG,EAAQ,OAAO,OAAOf,EAAgB,CAE1C,OAAQgB,EAAA,YAER,OAAQC,EAAA,YAER,KAAMC,EAAA,UAEN,IAAKC,EAAA,SAEL,KAAMC,EAAA,SACR,CAAC"}

package/dist/components/Table/Table.es.js

@@ -1,89 +1,71 @@
-import { j as a } from "../../node_modules/react/jsx-runtime.es.js";
-import { useMemo as p } from "react";
-import { parseTableChildren as m } from "./Collection/collectionParser.es.js";
-import { TableHeader as b, TableColumn as T, TableBody as u, TableRow as x, TableCell as h } from "./Collection/CompoundComponents.es.js";
-import { useTableCollection as y } from "./Collection/useTableCollection.es.js";
+import { j as e } from "../../node_modules/react/jsx-runtime.es.js";
+import { useMemo as n } from "react";
+import { parseTableChildren as i } from "./Collection/collectionParser.es.js";
+import { TableHeader as c, TableColumn as m, TableBody as d, TableRow as p, TableCell as b } from "./Collection/CompoundComponents.es.js";
+import { useTableCollection as T } from "./Collection/useTableCollection.es.js";
+import { TableRow as u } from "./TableRow.es.js";
 /* empty css             */
-const _ = ({ children: s, name: i }) => {
-  const c = p(
-    () => m(s),
-    [s]
-  ), o = y(c);
-  return /* @__PURE__ */ a.jsxs(
+const h = ({ children: l, name: t }) => {
+  const s = n(
+    () => i(l),
+    [l]
+  ), o = T(s);
+  return /* @__PURE__ */ e.jsxs(
     "table",
     {
       className: "proton-Table",
       role: "table",
       "aria-rowcount": o.getTotalRowCount,
       "aria-colcount": o.columns.length,
-      "aria-label": i,
+      "aria-label": t,
       children: [
-        /* @__PURE__ */ a.jsx("caption", { className: "proton-Table__caption", children: i }),
-        /* @__PURE__ */ a.jsx(
+        /* @__PURE__ */ e.jsx("caption", { className: "proton-Table__caption", children: t }),
+        /* @__PURE__ */ e.jsx(
           "thead",
           {
             className: "proton-Table__rowGroup--header",
             role: "rowgroup",
             style: o.isHeaderHidden ? { display: "none" } : void 0,
-            children: /* @__PURE__ */ a.jsx("tr", { className: "proton-Table__header-row", role: "row", "aria-rowindex": 1, children: o.columns.map((e, t) => /* @__PURE__ */ a.jsx(
+            children: /* @__PURE__ */ e.jsx("tr", { className: "proton-Table__header-row", role: "row", "aria-rowindex": 1, children: o.columns.map((a, r) => /* @__PURE__ */ e.jsx(
               "th",
               {
                 className: "proton-Table__header",
                 role: "columnheader",
                 scope: "col",
-                "aria-colindex": t + 1,
-                "aria-sort": e.ariaSort,
-                children: e.header
+                "aria-colindex": r + 1,
+                "aria-sort": a.ariaSort,
+                children: a.header
               },
-              e.key
+              a.key
             )) })
           }
         ),
-        /* @__PURE__ */ a.jsx("tbody", { className: "proton-Table__body", role: "rowgroup", children: o.rows.map((e, t) => /* @__PURE__ */ a.jsx(
-          "tr",
+        /* @__PURE__ */ e.jsx("tbody", { className: "proton-Table__body", role: "rowgroup", children: o.rows.map((a, r) => /* @__PURE__ */ e.jsx(
+          u,
           {
-            className: "proton-Table__row",
-            role: "row",
-            "aria-rowindex": o.getRowAriaIndex(t),
-            onClick: e == null ? void 0 : e.onClick,
-            tabIndex: e != null && e.onClick ? 0 : void 0,
-            onKeyDown: e != null && e.onClick ? (l) => {
-              var r;
-              (l.key === "Enter" || l.key === " ") && (l.preventDefault(), (r = e.onClick) == null || r.call(e));
-            } : void 0,
-            children: o.columns.map((l, r) => {
-              const n = e.cells.find((d) => d.columnKey === l.key);
-              return /* @__PURE__ */ a.jsx(
-                "td",
-                {
-                  className: "proton-Table__cell",
-                  role: "cell",
-                  "aria-colindex": r + 1,
-                  colSpan: n == null ? void 0 : n.colSpan,
-                  children: (n == null ? void 0 : n.value) || ""
-                },
-                l.key
-              );
-            })
+            row: a,
+            columns: o.columns,
+            rowIndex: r,
+            getRowAriaIndex: o.getRowAriaIndex
           },
-          e.key
+          a.key
         )) })
       ]
     }
   );
-}, v = Object.assign(_, {
+}, g = Object.assign(h, {
   /** Table header: {@link TableHeaderProps} */
-  Header: b,
+  Header: c,
   /** Table column: {@link TableColumnProps} */
-  Column: T,
+  Column: m,
   /** Table body: {@link TableBodyProps} */
-  Body: u,
+  Body: d,
   /** Table row: {@link TableRowProps} */
-  Row: x,
+  Row: p,
   /** Table cell: {@link TableCellProps} */
-  Cell: h
+  Cell: b
 });
 export {
-  v as Table
+  g as Table
 };
 //# sourceMappingURL=Table.es.js.map

package/dist/components/Table/Table.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.es.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import { ReactElement, useMemo } from \"react\";\nimport { parseTableChildren } from \"./Collection/collectionParser\";\nimport {\n  TableHeader,\n  TableColumn,\n  TableBody,\n  TableRow,\n  TableCell,\n  TableHeaderProps,\n  TableColumnProps,\n  TableBodyProps,\n  TableRowProps,\n  TableCellProps,\n} from \"./Collection/CompoundComponents\";\nimport { useTableCollection } from \"./Collection/useTableCollection\";\nimport type {\n  TableData,\n  TableColumnData,\n  TableRowData,\n  TableCellData,\n} from \"./types\";\nimport \"./Table.css\";\n\nexport type { TableColumnData, TableCellData, TableRowData, TableData };\n\nexport interface TableProps {\n  children: [ReactElement<TableHeaderProps>, ReactElement<TableBodyProps>];\n  /** Table name/caption for accessibility. Provides essential context for screen readers about table content. */\n  name: string;\n}\n\nconst TableComponent = ({ children, name }: TableProps) => {\n  const tableData: TableData = useMemo(\n    () => parseTableChildren(children),\n    [children]\n  );\n  const collection = useTableCollection(tableData);\n\n  return (\n    <table\n      className=\"proton-Table\"\n      role=\"table\"\n      aria-rowcount={collection.getTotalRowCount}\n      aria-colcount={collection.columns.length}\n      aria-label={name}\n    >\n      <caption className=\"proton-Table__caption\">{name}</caption>\n\n      {/* Header */}\n      <thead\n        className=\"proton-Table__rowGroup--header\"\n        role=\"rowgroup\"\n        style={collection.isHeaderHidden ? { display: \"none\" } : undefined}\n      >\n        <tr className=\"proton-Table__header-row\" role=\"row\" aria-rowindex={1}>\n          {collection.columns.map((column, index) => (\n            <th\n              key={column.key}\n              className=\"proton-Table__header\"\n              role=\"columnheader\"\n              scope=\"col\"\n              aria-colindex={index + 1}\n              aria-sort={column.ariaSort}\n            >\n              {column.header}\n            </th>\n          ))}\n        </tr>\n      </thead>\n\n      {/* Body */}\n      <tbody className=\"proton-Table__body\" role=\"rowgroup\">\n        {collection.rows.map((row, rowIndex) => (\n          <tr\n            key={row.key}\n            className=\"proton-Table__row\"\n            role=\"row\"\n            aria-rowindex={collection.getRowAriaIndex(rowIndex)}\n            onClick={row?.onClick}\n            tabIndex={row?.onClick ? 0 : undefined}\n            onKeyDown={\n              row?.onClick\n                ? (e) => {\n                    if (e.key === \"Enter\" || e.key === \" \") {\n                      // Enable keyboard navigation\n                      e.preventDefault();\n                      row.onClick?.();\n                    }\n                  }\n                : undefined\n            }\n          >\n            {collection.columns.map((column, colIndex) => {\n              const cell = row.cells.find((c) => c.columnKey === column.key);\n              return (\n                <td\n                  key={column.key}\n                  className=\"proton-Table__cell\"\n                  role=\"cell\"\n                  aria-colindex={colIndex + 1}\n                  colSpan={cell?.colSpan}\n                >\n                  {cell?.value || \"\"}\n                </td>\n              );\n            })}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\n/**\n * Base Table component that renders data in rows and columns using collections.\n *\n * - Built-in keyboard navigation for interactive rows.\n * - Full ARIA table semantics with proper roles, labels, and indices.\n *\n * API:\n *  - {@link TableProps}\n *\n * @example\n * ```tsx\n * <Table caption=\"Employee Directory\">\n *   <Table.Header>\n *     <Table.Column id=\"name\">Name</Table.Column>\n *   </Table.Header>\n *   <Table.Body>\n *     <Table.Row key=\"1\">\n *       <Table.Cell>Joe</Table.Cell>\n *     </Table.Row>\n *   </Table.Body>\n * </Table>\n * ```\n */\nconst Table = Object.assign(TableComponent, {\n  /** Table header: {@link TableHeaderProps} */\n  Header: TableHeader,\n  /** Table column: {@link TableColumnProps} */\n  Column: TableColumn,\n  /** Table body: {@link TableBodyProps} */\n  Body: TableBody,\n  /** Table row: {@link TableRowProps} */\n  Row: TableRow,\n  /** Table cell: {@link TableCellProps} */\n  Cell: TableCell,\n});\n\nexport { Table };\nexport type {\n  TableHeaderProps,\n  TableColumnProps,\n  TableBodyProps,\n  TableRowProps,\n  TableCellProps,\n};\n"],"names":["TableComponent","children","name","tableData","useMemo","parseTableChildren","collection","useTableCollection","jsxs","jsx","column","index","row","rowIndex","e","_a","colIndex","cell","c","Table","TableHeader","TableColumn","TableBody","TableRow","TableCell"],"mappings":";;;;;;AA+BA,MAAMA,IAAiB,CAAC,EAAE,UAAAC,GAAU,MAAAC,QAAuB;AACzD,QAAMC,IAAuBC;AAAA,IAC3B,MAAMC,EAAmBJ,CAAQ;AAAA,IACjC,CAACA,CAAQ;AAAA,EAAA,GAELK,IAAaC,EAAmBJ,CAAS;AAG7C,SAAAK,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,iBAAeF,EAAW;AAAA,MAC1B,iBAAeA,EAAW,QAAQ;AAAA,MAClC,cAAYJ;AAAA,MAEZ,UAAA;AAAA,QAACO,gBAAAA,EAAA,IAAA,WAAA,EAAQ,WAAU,yBAAyB,UAAKP,GAAA;AAAA,QAGjDO,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,OAAOH,EAAW,iBAAiB,EAAE,SAAS,OAAW,IAAA;AAAA,YAEzD,UAACG,gBAAAA,EAAA,IAAA,MAAA,EAAG,WAAU,4BAA2B,MAAK,OAAM,iBAAe,GAChE,UAAWH,EAAA,QAAQ,IAAI,CAACI,GAAQC,MAC/BF,gBAAAA,EAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,WAAU;AAAA,gBACV,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,iBAAeE,IAAQ;AAAA,gBACvB,aAAWD,EAAO;AAAA,gBAEjB,UAAOA,EAAA;AAAA,cAAA;AAAA,cAPHA,EAAO;AAAA,YASf,CAAA,GACH;AAAA,UAAA;AAAA,QACF;AAAA,QAGAD,gBAAAA,EAAAA,IAAC,SAAM,EAAA,WAAU,sBAAqB,MAAK,YACxC,UAAAH,EAAW,KAAK,IAAI,CAACM,GAAKC,MACzBJ,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,iBAAeH,EAAW,gBAAgBO,CAAQ;AAAA,YAClD,SAASD,KAAA,gBAAAA,EAAK;AAAA,YACd,UAAUA,KAAA,QAAAA,EAAK,UAAU,IAAI;AAAA,YAC7B,WACEA,KAAA,QAAAA,EAAK,UACD,CAACE,MAAM;;AACL,eAAIA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SAEjCA,EAAE,eAAe,IACjBC,IAAAH,EAAI,YAAJ,QAAAG,EAAA,KAAAH;AAAA,YAGJ,IAAA;AAAA,YAGL,UAAWN,EAAA,QAAQ,IAAI,CAACI,GAAQM,MAAa;AACtC,oBAAAC,IAAOL,EAAI,MAAM,KAAK,CAACM,MAAMA,EAAE,cAAcR,EAAO,GAAG;AAE3D,qBAAAD,gBAAAA,EAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAU;AAAA,kBACV,MAAK;AAAA,kBACL,iBAAeO,IAAW;AAAA,kBAC1B,SAASC,KAAA,gBAAAA,EAAM;AAAA,kBAEd,kCAAM,UAAS;AAAA,gBAAA;AAAA,gBANXP,EAAO;AAAA,cAAA;AAAA,YAOd,CAEH;AAAA,UAAA;AAAA,UA/BIE,EAAI;AAAA,QAiCZ,CAAA,GACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAyBMO,IAAQ,OAAO,OAAOnB,GAAgB;AAAA;AAAA,EAE1C,QAAQoB;AAAA;AAAA,EAER,QAAQC;AAAA;AAAA,EAER,MAAMC;AAAA;AAAA,EAEN,KAAKC;AAAA;AAAA,EAEL,MAAMC;AACR,CAAC;"}
+{"version":3,"file":"Table.es.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import { ReactElement, useMemo } from \"react\";\nimport { parseTableChildren } from \"./Collection/collectionParser\";\nimport {\n  TableHeader,\n  TableColumn,\n  TableBody,\n  TableRow,\n  TableCell,\n  TableHeaderProps,\n  TableColumnProps,\n  TableBodyProps,\n  TableRowProps,\n  TableCellProps,\n} from \"./Collection/CompoundComponents\";\nimport { useTableCollection } from \"./Collection/useTableCollection\";\nimport { TableRow as MemoizedTableRow } from \"./TableRow\";\nimport type {\n  TableData,\n  TableColumnData,\n  TableRowData,\n  TableCellData,\n} from \"./types\";\nimport \"./Table.css\";\n\nexport type { TableColumnData, TableCellData, TableRowData, TableData };\n\nexport interface TableProps {\n  children: [ReactElement<TableHeaderProps>, ReactElement<TableBodyProps>];\n  /** Table name/caption for accessibility. Provides essential context for screen readers about table content. */\n  name: string;\n}\n\nconst TableComponent = ({ children, name }: TableProps) => {\n  const tableData: TableData = useMemo(\n    () => parseTableChildren(children),\n    [children]\n  );\n  const collection = useTableCollection(tableData);\n\n  return (\n    <table\n      className=\"proton-Table\"\n      role=\"table\"\n      aria-rowcount={collection.getTotalRowCount}\n      aria-colcount={collection.columns.length}\n      aria-label={name}\n    >\n      <caption className=\"proton-Table__caption\">{name}</caption>\n\n      {/* Header */}\n      <thead\n        className=\"proton-Table__rowGroup--header\"\n        role=\"rowgroup\"\n        style={collection.isHeaderHidden ? { display: \"none\" } : undefined}\n      >\n        <tr className=\"proton-Table__header-row\" role=\"row\" aria-rowindex={1}>\n          {collection.columns.map((column, index) => (\n            <th\n              key={column.key}\n              className=\"proton-Table__header\"\n              role=\"columnheader\"\n              scope=\"col\"\n              aria-colindex={index + 1}\n              aria-sort={column.ariaSort}\n            >\n              {column.header}\n            </th>\n          ))}\n        </tr>\n      </thead>\n\n      {/* Body */}\n      <tbody className=\"proton-Table__body\" role=\"rowgroup\">\n        {collection.rows.map((row, rowIndex) => (\n          <MemoizedTableRow\n            key={row.key}\n            row={row}\n            columns={collection.columns}\n            rowIndex={rowIndex}\n            getRowAriaIndex={collection.getRowAriaIndex}\n          />\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\n/**\n * Base Table component that renders data in rows and columns using collections.\n *\n * - Built-in keyboard navigation for interactive rows.\n * - Full ARIA table semantics with proper roles, labels, and indices.\n * - Rows are memoized by default for optimal performance.\n *\n * API:\n *  - {@link TableProps}\n *\n * @example\n * ```tsx\n * <Table name=\"Employee Directory\">\n *   <Table.Header>\n *     <Table.Column id=\"name\">Name</Table.Column>\n *   </Table.Header>\n *   <Table.Body>\n *     <Table.Row key=\"1\">\n *       <Table.Cell>Joe</Table.Cell>\n *     </Table.Row>\n *   </Table.Body>\n * </Table>\n * ```\n */\nconst Table = Object.assign(TableComponent, {\n  /** Table header: {@link TableHeaderProps} */\n  Header: TableHeader,\n  /** Table column: {@link TableColumnProps} */\n  Column: TableColumn,\n  /** Table body: {@link TableBodyProps} */\n  Body: TableBody,\n  /** Table row: {@link TableRowProps} */\n  Row: TableRow,\n  /** Table cell: {@link TableCellProps} */\n  Cell: TableCell,\n});\n\nexport { Table };\nexport type {\n  TableHeaderProps,\n  TableColumnProps,\n  TableBodyProps,\n  TableRowProps,\n  TableCellProps,\n};\n"],"names":["TableComponent","children","name","tableData","useMemo","parseTableChildren","collection","useTableCollection","jsxs","jsx","column","index","row","rowIndex","MemoizedTableRow","Table","TableHeader","TableColumn","TableBody","TableRow","TableCell"],"mappings":";;;;;;;AAgCA,MAAMA,IAAiB,CAAC,EAAE,UAAAC,GAAU,MAAAC,QAAuB;AACzD,QAAMC,IAAuBC;AAAA,IAC3B,MAAMC,EAAmBJ,CAAQ;AAAA,IACjC,CAACA,CAAQ;AAAA,EAAA,GAELK,IAAaC,EAAmBJ,CAAS;AAG7C,SAAAK,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,iBAAeF,EAAW;AAAA,MAC1B,iBAAeA,EAAW,QAAQ;AAAA,MAClC,cAAYJ;AAAA,MAEZ,UAAA;AAAA,QAACO,gBAAAA,EAAA,IAAA,WAAA,EAAQ,WAAU,yBAAyB,UAAKP,GAAA;AAAA,QAGjDO,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,OAAOH,EAAW,iBAAiB,EAAE,SAAS,OAAW,IAAA;AAAA,YAEzD,UAACG,gBAAAA,EAAA,IAAA,MAAA,EAAG,WAAU,4BAA2B,MAAK,OAAM,iBAAe,GAChE,UAAWH,EAAA,QAAQ,IAAI,CAACI,GAAQC,MAC/BF,gBAAAA,EAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,WAAU;AAAA,gBACV,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,iBAAeE,IAAQ;AAAA,gBACvB,aAAWD,EAAO;AAAA,gBAEjB,UAAOA,EAAA;AAAA,cAAA;AAAA,cAPHA,EAAO;AAAA,YASf,CAAA,GACH;AAAA,UAAA;AAAA,QACF;AAAA,QAGAD,gBAAAA,EAAAA,IAAC,SAAM,EAAA,WAAU,sBAAqB,MAAK,YACxC,UAAAH,EAAW,KAAK,IAAI,CAACM,GAAKC,MACzBJ,gBAAAA,EAAA;AAAA,UAACK;AAAAA,UAAA;AAAA,YAEC,KAAAF;AAAA,YACA,SAASN,EAAW;AAAA,YACpB,UAAAO;AAAA,YACA,iBAAiBP,EAAW;AAAA,UAAA;AAAA,UAJvBM,EAAI;AAAA,QAMZ,CAAA,GACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GA0BMG,IAAQ,OAAO,OAAOf,GAAgB;AAAA;AAAA,EAE1C,QAAQgB;AAAA;AAAA,EAER,QAAQC;AAAA;AAAA,EAER,MAAMC;AAAA;AAAA,EAEN,KAAKC;AAAA;AAAA,EAEL,MAAMC;AACR,CAAC;"}

package/dist/components/Table/TableRow.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../../node_modules/react/jsx-runtime.cjs.js"),s=require("react");function f(e,l){if(e===l)return!0;if(typeof e=="string"||typeof e=="number")return e===l;if(typeof l=="string"||typeof l=="number")return!1;if(e==null||l==null)return e===l;const n=i(e),r=i(l);return n!==null&&r!==null&&n===r}function i(e){if(typeof e=="string"||typeof e=="number")return String(e);if(e==null)return null;if(Array.isArray(e)){const l=e.map(i).filter(n=>n!==null);return l.length>0?l.join(""):null}if(s.isValidElement(e)){if(typeof e.props.children=="string"||typeof e.props.children=="number")return String(e.props.children);if(Array.isArray(e.props.children)){const l=e.props.children.map(i).filter(n=>n!==null);return l.length>0?l.join(""):null}return i(e.props.children)}return null}const y=({row:e,columns:l,rowIndex:n,getRowAriaIndex:r})=>(console.log(`[TableRow] Rendering row: ${e.key}`,{cells:e.cells.map(t=>({columnKey:t.columnKey,value:typeof t.value=="string"?t.value:"ReactNode"}))}),c.jsxRuntimeExports.jsx("tr",{className:"proton-Table__row",role:"row","aria-rowindex":r(n),onClick:e==null?void 0:e.onClick,tabIndex:e!=null&&e.onClick?0:void 0,onKeyDown:e!=null&&e.onClick?t=>{var a;(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),(a=e.onClick)==null||a.call(e))}:void 0,children:l.map((t,a)=>{const u=e.cells.find(o=>o.columnKey===t.key);return c.jsxRuntimeExports.jsx("td",{className:"proton-Table__cell",role:"cell","aria-colindex":a+1,colSpan:u==null?void 0:u.colSpan,children:(u==null?void 0:u.value)||""},t.key)})},e.key));function m(e,l){if(e.row.key!==l.row.key||e.rowIndex!==l.rowIndex)return!1;if(e.row.onClick!==l.row.onClick)return console.log(`[TableRow Comparison] Row ${e.row.key} onClick changed:`,`prev=${e.row.onClick}`,`next=${l.row.onClick}`),!1;if(e.columns.length!==l.columns.length)return!1;for(let n=0;n<e.columns.length;n++)if(e.columns[n].key!==l.columns[n].key)return!1;if(e.row.cells.length!==l.row.cells.length)return!1;for(let n=0;n<e.row.cells.length;n++){const r=e.row.cells[n],t=l.row.cells[n];if(r.columnKey!==t.columnKey||r.colSpan!==t.colSpan)return!1;if(!f(r.value,t.value)){const u=i(r.value),o=i(t.value);return console.log(`[TableRow Comparison] Cell ${r.columnKey} changed:`,`prev="${u}"`,`next="${o}"`,`refs equal: ${r.value===t.value}`),!1}}return e.getRowAriaIndex===l.getRowAriaIndex}const g=s.memo(y,m);exports.TableRow=g;
+//# sourceMappingURL=TableRow.cjs.js.map

package/dist/components/Table/TableRow.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.cjs.js","sources":["../../../src/components/Table/TableRow.tsx"],"sourcesContent":["import { memo, ReactNode, isValidElement } from \"react\";\nimport type { TableRowData, TableColumnData } from \"./types\";\n\n/**\n * Compares two ReactNodes for equality.\n * For primitives (string, number), compares by value.\n * For React elements, compares by reference (new JSX = different).\n * This allows memoization to work when cell content is primitive values\n * wrapped in new JSX elements.\n */\nfunction areReactNodesEqual(prev: ReactNode, next: ReactNode): boolean {\n  // Same reference - definitely equal\n  if (prev === next) return true;\n\n  // Handle primitives\n  if (typeof prev === \"string\" || typeof prev === \"number\") {\n    return prev === next;\n  }\n\n  if (typeof next === \"string\" || typeof next === \"number\") {\n    return false; // prev is not primitive but next is\n  }\n\n  // Handle null/undefined\n  if (prev == null || next == null) {\n    return prev === next;\n  }\n\n  // For React elements, we need to compare more deeply\n  // Extract text content from simple elements for comparison\n  const prevText = extractTextContent(prev);\n  const nextText = extractTextContent(next);\n\n  // If we can extract text content and it's the same, consider them equal\n  if (prevText !== null && nextText !== null && prevText === nextText) {\n    return true;\n  }\n\n  // Fall back to reference comparison for complex JSX\n  return false;\n}\n\n/**\n * Extracts text content from a ReactNode.\n * Returns null if the node is too complex to extract text from.\n */\nfunction extractTextContent(node: ReactNode): string | null {\n  if (typeof node === \"string\" || typeof node === \"number\") {\n    return String(node);\n  }\n\n  if (node == null) {\n    return null;\n  }\n\n  if (Array.isArray(node)) {\n    const texts = node.map(extractTextContent).filter((t) => t !== null);\n    return texts.length > 0 ? texts.join(\"\") : null;\n  }\n\n  if (isValidElement(node)) {\n    // For simple elements, extract children text\n    if (typeof node.props.children === \"string\" || typeof node.props.children === \"number\") {\n      return String(node.props.children);\n    }\n\n    if (Array.isArray(node.props.children)) {\n      const texts = node.props.children\n        .map(extractTextContent)\n        .filter((t) => t !== null);\n      return texts.length > 0 ? texts.join(\"\") : null;\n    }\n\n    // Recursively extract from children\n    return extractTextContent(node.props.children);\n  }\n\n  return null;\n}\n\ninterface TableRowProps {\n  row: TableRowData;\n  columns: TableColumnData[];\n  rowIndex: number;\n  getRowAriaIndex: (index: number) => number;\n}\n\nconst TableRowComponent = ({\n  row,\n  columns,\n  rowIndex,\n  getRowAriaIndex,\n}: TableRowProps) => {\n  // Track re-renders for debugging (visible in Storybook console)\n  console.log(`[TableRow] Rendering row: ${row.key}`, {\n    cells: row.cells.map((c) => ({\n      columnKey: c.columnKey,\n      value: typeof c.value === \"string\" ? c.value : \"ReactNode\",\n    })),\n  });\n  \n  return (\n    <tr\n      key={row.key}\n      className=\"proton-Table__row\"\n      role=\"row\"\n      aria-rowindex={getRowAriaIndex(rowIndex)}\n      onClick={row?.onClick}\n      tabIndex={row?.onClick ? 0 : undefined}\n      onKeyDown={\n        row?.onClick\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                // Enable keyboard navigation\n                e.preventDefault();\n                row.onClick?.();\n              }\n            }\n          : undefined\n      }\n    >\n      {columns.map((column, colIndex) => {\n        const cell = row.cells.find((c) => c.columnKey === column.key);\n        return (\n          <td\n            key={column.key}\n            className=\"proton-Table__cell\"\n            role=\"cell\"\n            aria-colindex={colIndex + 1}\n            colSpan={cell?.colSpan}\n          >\n            {cell?.value || \"\"}\n          </td>\n        );\n      })}\n    </tr>\n  );\n};\n\n/**\n * Custom comparison function for memoization.\n\n * Without this function, React.memo uses shallow comparison (prevProps === nextProps).\n * When the parent re-renders, parseTableChildren creates NEW objects even if the data\n * is identical. Shallow comparison sees different object references and re-renders ALL rows.\n * \n * With this function, we compare actual data values (keys, cell values) rather than\n * object references. If the data is the same, we skip re-render - only rows with\n * changed data will re-render.\n * \n * Note: ReactNode values are compared by reference, which means if the JSX\n * changes (even if the rendered output is the same), it will be considered different.\n * This is expected behavior - if cell content changes, the row should re-render.\n */\nfunction areRowPropsEqual(\n  prevProps: TableRowProps,\n  nextProps: TableRowProps\n): boolean {\n  // Compare row key\n  if (prevProps.row.key !== nextProps.row.key) return false;\n\n  // Compare row index\n  if (prevProps.rowIndex !== nextProps.rowIndex) return false;\n\n  // Compare onClick handler reference (if it changes, we want to re-render)\n  if (prevProps.row.onClick !== nextProps.row.onClick) {\n    console.log(\n      `[TableRow Comparison] Row ${prevProps.row.key} onClick changed:`,\n      `prev=${prevProps.row.onClick}`,\n      `next=${nextProps.row.onClick}`\n    );\n    return false;\n  }\n\n  // Compare columns array - check length and keys (columns should be stable)\n  if (prevProps.columns.length !== nextProps.columns.length) return false;\n  for (let i = 0; i < prevProps.columns.length; i++) {\n    if (prevProps.columns[i].key !== nextProps.columns[i].key) return false;\n  }\n\n  // Compare cells - check if cell values have changed\n  if (prevProps.row.cells.length !== nextProps.row.cells.length) return false;\n  \n  for (let i = 0; i < prevProps.row.cells.length; i++) {\n    const prevCell = prevProps.row.cells[i];\n    const nextCell = nextProps.row.cells[i];\n    \n    if (\n      prevCell.columnKey !== nextCell.columnKey ||\n      prevCell.colSpan !== nextCell.colSpan\n    ) {\n      return false;\n    }\n\n    // Compare cell values - handle ReactNode comparison intelligently\n    const cellsEqual = areReactNodesEqual(prevCell.value, nextCell.value);\n    if (!cellsEqual) {\n      // Debug: log why cells are considered different (for Storybook debugging)\n      const prevText = extractTextContent(prevCell.value);\n      const nextText = extractTextContent(nextCell.value);\n      console.log(\n        `[TableRow Comparison] Cell ${prevCell.columnKey} changed:`,\n        `prev=\"${prevText}\"`,\n        `next=\"${nextText}\"`,\n        `refs equal: ${prevCell.value === nextCell.value}`\n      );\n      return false;\n    }\n  }\n\n  // getRowAriaIndex should be stable (memoized in useTableCollection)\n  if (prevProps.getRowAriaIndex !== nextProps.getRowAriaIndex) return false;\n\n  return true;\n}\n\n// Memoize with custom comparison - only re-renders if actual row data changes\nexport const TableRow = memo(TableRowComponent, areRowPropsEqual);\n"],"names":["areReactNodesEqual","prev","next","prevText","extractTextContent","nextText","node","texts","t","isValidElement","TableRowComponent","row","columns","rowIndex","getRowAriaIndex","c","jsx","e","_a","column","colIndex","cell","areRowPropsEqual","prevProps","nextProps","i","prevCell","nextCell","TableRow","memo"],"mappings":"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"}

package/dist/components/Table/TableRow.es.js

@@ -0,0 +1,105 @@
+import { j as c } from "../../node_modules/react/jsx-runtime.es.js";
+import { memo as f, isValidElement as s } from "react";
+function m(l, e) {
+  if (l === e) return !0;
+  if (typeof l == "string" || typeof l == "number")
+    return l === e;
+  if (typeof e == "string" || typeof e == "number")
+    return !1;
+  if (l == null || e == null)
+    return l === e;
+  const n = u(l), r = u(e);
+  return n !== null && r !== null && n === r;
+}
+function u(l) {
+  if (typeof l == "string" || typeof l == "number")
+    return String(l);
+  if (l == null)
+    return null;
+  if (Array.isArray(l)) {
+    const e = l.map(u).filter((n) => n !== null);
+    return e.length > 0 ? e.join("") : null;
+  }
+  if (s(l)) {
+    if (typeof l.props.children == "string" || typeof l.props.children == "number")
+      return String(l.props.children);
+    if (Array.isArray(l.props.children)) {
+      const e = l.props.children.map(u).filter((n) => n !== null);
+      return e.length > 0 ? e.join("") : null;
+    }
+    return u(l.props.children);
+  }
+  return null;
+}
+const y = ({
+  row: l,
+  columns: e,
+  rowIndex: n,
+  getRowAriaIndex: r
+}) => (console.log(`[TableRow] Rendering row: ${l.key}`, {
+  cells: l.cells.map((t) => ({
+    columnKey: t.columnKey,
+    value: typeof t.value == "string" ? t.value : "ReactNode"
+  }))
+}), /* @__PURE__ */ c.jsx(
+  "tr",
+  {
+    className: "proton-Table__row",
+    role: "row",
+    "aria-rowindex": r(n),
+    onClick: l == null ? void 0 : l.onClick,
+    tabIndex: l != null && l.onClick ? 0 : void 0,
+    onKeyDown: l != null && l.onClick ? (t) => {
+      var a;
+      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), (a = l.onClick) == null || a.call(l));
+    } : void 0,
+    children: e.map((t, a) => {
+      const i = l.cells.find((o) => o.columnKey === t.key);
+      return /* @__PURE__ */ c.jsx(
+        "td",
+        {
+          className: "proton-Table__cell",
+          role: "cell",
+          "aria-colindex": a + 1,
+          colSpan: i == null ? void 0 : i.colSpan,
+          children: (i == null ? void 0 : i.value) || ""
+        },
+        t.key
+      );
+    })
+  },
+  l.key
+));
+function g(l, e) {
+  if (l.row.key !== e.row.key || l.rowIndex !== e.rowIndex) return !1;
+  if (l.row.onClick !== e.row.onClick)
+    return console.log(
+      `[TableRow Comparison] Row ${l.row.key} onClick changed:`,
+      `prev=${l.row.onClick}`,
+      `next=${e.row.onClick}`
+    ), !1;
+  if (l.columns.length !== e.columns.length) return !1;
+  for (let n = 0; n < l.columns.length; n++)
+    if (l.columns[n].key !== e.columns[n].key) return !1;
+  if (l.row.cells.length !== e.row.cells.length) return !1;
+  for (let n = 0; n < l.row.cells.length; n++) {
+    const r = l.row.cells[n], t = e.row.cells[n];
+    if (r.columnKey !== t.columnKey || r.colSpan !== t.colSpan)
+      return !1;
+    if (!m(r.value, t.value)) {
+      const i = u(r.value), o = u(t.value);
+      return console.log(
+        `[TableRow Comparison] Cell ${r.columnKey} changed:`,
+        `prev="${i}"`,
+        `next="${o}"`,
+        `refs equal: ${r.value === t.value}`
+      ), !1;
+    }
+  }
+  return l.getRowAriaIndex === e.getRowAriaIndex;
+}
+const C = f(y, g);
+export {
+  C as TableRow
+};
+//# sourceMappingURL=TableRow.es.js.map

package/dist/components/Table/TableRow.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.es.js","sources":["../../../src/components/Table/TableRow.tsx"],"sourcesContent":["import { memo, ReactNode, isValidElement } from \"react\";\nimport type { TableRowData, TableColumnData } from \"./types\";\n\n/**\n * Compares two ReactNodes for equality.\n * For primitives (string, number), compares by value.\n * For React elements, compares by reference (new JSX = different).\n * This allows memoization to work when cell content is primitive values\n * wrapped in new JSX elements.\n */\nfunction areReactNodesEqual(prev: ReactNode, next: ReactNode): boolean {\n  // Same reference - definitely equal\n  if (prev === next) return true;\n\n  // Handle primitives\n  if (typeof prev === \"string\" || typeof prev === \"number\") {\n    return prev === next;\n  }\n\n  if (typeof next === \"string\" || typeof next === \"number\") {\n    return false; // prev is not primitive but next is\n  }\n\n  // Handle null/undefined\n  if (prev == null || next == null) {\n    return prev === next;\n  }\n\n  // For React elements, we need to compare more deeply\n  // Extract text content from simple elements for comparison\n  const prevText = extractTextContent(prev);\n  const nextText = extractTextContent(next);\n\n  // If we can extract text content and it's the same, consider them equal\n  if (prevText !== null && nextText !== null && prevText === nextText) {\n    return true;\n  }\n\n  // Fall back to reference comparison for complex JSX\n  return false;\n}\n\n/**\n * Extracts text content from a ReactNode.\n * Returns null if the node is too complex to extract text from.\n */\nfunction extractTextContent(node: ReactNode): string | null {\n  if (typeof node === \"string\" || typeof node === \"number\") {\n    return String(node);\n  }\n\n  if (node == null) {\n    return null;\n  }\n\n  if (Array.isArray(node)) {\n    const texts = node.map(extractTextContent).filter((t) => t !== null);\n    return texts.length > 0 ? texts.join(\"\") : null;\n  }\n\n  if (isValidElement(node)) {\n    // For simple elements, extract children text\n    if (typeof node.props.children === \"string\" || typeof node.props.children === \"number\") {\n      return String(node.props.children);\n    }\n\n    if (Array.isArray(node.props.children)) {\n      const texts = node.props.children\n        .map(extractTextContent)\n        .filter((t) => t !== null);\n      return texts.length > 0 ? texts.join(\"\") : null;\n    }\n\n    // Recursively extract from children\n    return extractTextContent(node.props.children);\n  }\n\n  return null;\n}\n\ninterface TableRowProps {\n  row: TableRowData;\n  columns: TableColumnData[];\n  rowIndex: number;\n  getRowAriaIndex: (index: number) => number;\n}\n\nconst TableRowComponent = ({\n  row,\n  columns,\n  rowIndex,\n  getRowAriaIndex,\n}: TableRowProps) => {\n  // Track re-renders for debugging (visible in Storybook console)\n  console.log(`[TableRow] Rendering row: ${row.key}`, {\n    cells: row.cells.map((c) => ({\n      columnKey: c.columnKey,\n      value: typeof c.value === \"string\" ? c.value : \"ReactNode\",\n    })),\n  });\n  \n  return (\n    <tr\n      key={row.key}\n      className=\"proton-Table__row\"\n      role=\"row\"\n      aria-rowindex={getRowAriaIndex(rowIndex)}\n      onClick={row?.onClick}\n      tabIndex={row?.onClick ? 0 : undefined}\n      onKeyDown={\n        row?.onClick\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                // Enable keyboard navigation\n                e.preventDefault();\n                row.onClick?.();\n              }\n            }\n          : undefined\n      }\n    >\n      {columns.map((column, colIndex) => {\n        const cell = row.cells.find((c) => c.columnKey === column.key);\n        return (\n          <td\n            key={column.key}\n            className=\"proton-Table__cell\"\n            role=\"cell\"\n            aria-colindex={colIndex + 1}\n            colSpan={cell?.colSpan}\n          >\n            {cell?.value || \"\"}\n          </td>\n        );\n      })}\n    </tr>\n  );\n};\n\n/**\n * Custom comparison function for memoization.\n\n * Without this function, React.memo uses shallow comparison (prevProps === nextProps).\n * When the parent re-renders, parseTableChildren creates NEW objects even if the data\n * is identical. Shallow comparison sees different object references and re-renders ALL rows.\n * \n * With this function, we compare actual data values (keys, cell values) rather than\n * object references. If the data is the same, we skip re-render - only rows with\n * changed data will re-render.\n * \n * Note: ReactNode values are compared by reference, which means if the JSX\n * changes (even if the rendered output is the same), it will be considered different.\n * This is expected behavior - if cell content changes, the row should re-render.\n */\nfunction areRowPropsEqual(\n  prevProps: TableRowProps,\n  nextProps: TableRowProps\n): boolean {\n  // Compare row key\n  if (prevProps.row.key !== nextProps.row.key) return false;\n\n  // Compare row index\n  if (prevProps.rowIndex !== nextProps.rowIndex) return false;\n\n  // Compare onClick handler reference (if it changes, we want to re-render)\n  if (prevProps.row.onClick !== nextProps.row.onClick) {\n    console.log(\n      `[TableRow Comparison] Row ${prevProps.row.key} onClick changed:`,\n      `prev=${prevProps.row.onClick}`,\n      `next=${nextProps.row.onClick}`\n    );\n    return false;\n  }\n\n  // Compare columns array - check length and keys (columns should be stable)\n  if (prevProps.columns.length !== nextProps.columns.length) return false;\n  for (let i = 0; i < prevProps.columns.length; i++) {\n    if (prevProps.columns[i].key !== nextProps.columns[i].key) return false;\n  }\n\n  // Compare cells - check if cell values have changed\n  if (prevProps.row.cells.length !== nextProps.row.cells.length) return false;\n  \n  for (let i = 0; i < prevProps.row.cells.length; i++) {\n    const prevCell = prevProps.row.cells[i];\n    const nextCell = nextProps.row.cells[i];\n    \n    if (\n      prevCell.columnKey !== nextCell.columnKey ||\n      prevCell.colSpan !== nextCell.colSpan\n    ) {\n      return false;\n    }\n\n    // Compare cell values - handle ReactNode comparison intelligently\n    const cellsEqual = areReactNodesEqual(prevCell.value, nextCell.value);\n    if (!cellsEqual) {\n      // Debug: log why cells are considered different (for Storybook debugging)\n      const prevText = extractTextContent(prevCell.value);\n      const nextText = extractTextContent(nextCell.value);\n      console.log(\n        `[TableRow Comparison] Cell ${prevCell.columnKey} changed:`,\n        `prev=\"${prevText}\"`,\n        `next=\"${nextText}\"`,\n        `refs equal: ${prevCell.value === nextCell.value}`\n      );\n      return false;\n    }\n  }\n\n  // getRowAriaIndex should be stable (memoized in useTableCollection)\n  if (prevProps.getRowAriaIndex !== nextProps.getRowAriaIndex) return false;\n\n  return true;\n}\n\n// Memoize with custom comparison - only re-renders if actual row data changes\nexport const TableRow = memo(TableRowComponent, areRowPropsEqual);\n"],"names":["areReactNodesEqual","prev","next","prevText","extractTextContent","nextText","node","texts","t","isValidElement","TableRowComponent","row","columns","rowIndex","getRowAriaIndex","c","jsx","e","_a","column","colIndex","cell","areRowPropsEqual","prevProps","nextProps","i","prevCell","nextCell","TableRow","memo"],"mappings":";;AAUA,SAASA,EAAmBC,GAAiBC,GAA0B;AAEjE,MAAAD,MAASC,EAAa,QAAA;AAG1B,MAAI,OAAOD,KAAS,YAAY,OAAOA,KAAS;AAC9C,WAAOA,MAASC;AAGlB,MAAI,OAAOA,KAAS,YAAY,OAAOA,KAAS;AACvC,WAAA;AAIL,MAAAD,KAAQ,QAAQC,KAAQ;AAC1B,WAAOD,MAASC;AAKZ,QAAAC,IAAWC,EAAmBH,CAAI,GAClCI,IAAWD,EAAmBF,CAAI;AAGxC,SAAIC,MAAa,QAAQE,MAAa,QAAQF,MAAaE;AAM7D;AAMA,SAASD,EAAmBE,GAAgC;AAC1D,MAAI,OAAOA,KAAS,YAAY,OAAOA,KAAS;AAC9C,WAAO,OAAOA,CAAI;AAGpB,MAAIA,KAAQ;AACH,WAAA;AAGL,MAAA,MAAM,QAAQA,CAAI,GAAG;AACjB,UAAAC,IAAQD,EAAK,IAAIF,CAAkB,EAAE,OAAO,CAACI,MAAMA,MAAM,IAAI;AACnE,WAAOD,EAAM,SAAS,IAAIA,EAAM,KAAK,EAAE,IAAI;AAAA,EAC7C;AAEI,MAAAE,EAAeH,CAAI,GAAG;AAEpB,QAAA,OAAOA,EAAK,MAAM,YAAa,YAAY,OAAOA,EAAK,MAAM,YAAa;AACrE,aAAA,OAAOA,EAAK,MAAM,QAAQ;AAGnC,QAAI,MAAM,QAAQA,EAAK,MAAM,QAAQ,GAAG;AAChC,YAAAC,IAAQD,EAAK,MAAM,SACtB,IAAIF,CAAkB,EACtB,OAAO,CAACI,MAAMA,MAAM,IAAI;AAC3B,aAAOD,EAAM,SAAS,IAAIA,EAAM,KAAK,EAAE,IAAI;AAAA,IAC7C;AAGO,WAAAH,EAAmBE,EAAK,MAAM,QAAQ;AAAA,EAC/C;AAEO,SAAA;AACT;AASA,MAAMI,IAAoB,CAAC;AAAA,EACzB,KAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC;AACF,OAEE,QAAQ,IAAI,6BAA6BH,EAAI,GAAG,IAAI;AAAA,EAClD,OAAOA,EAAI,MAAM,IAAI,CAACI,OAAO;AAAA,IAC3B,WAAWA,EAAE;AAAA,IACb,OAAO,OAAOA,EAAE,SAAU,WAAWA,EAAE,QAAQ;AAAA,EAAA,EAC/C;AAAA,CACH,GAGCC,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IAEC,WAAU;AAAA,IACV,MAAK;AAAA,IACL,iBAAeF,EAAgBD,CAAQ;AAAA,IACvC,SAASF,KAAA,gBAAAA,EAAK;AAAA,IACd,UAAUA,KAAA,QAAAA,EAAK,UAAU,IAAI;AAAA,IAC7B,WACEA,KAAA,QAAAA,EAAK,UACD,CAACM,MAAM;;AACL,OAAIA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SAEjCA,EAAE,eAAe,IACjBC,IAAAP,EAAI,YAAJ,QAAAO,EAAA,KAAAP;AAAA,IAGJ,IAAA;AAAA,IAGL,UAAQC,EAAA,IAAI,CAACO,GAAQC,MAAa;AAC3B,YAAAC,IAAOV,EAAI,MAAM,KAAK,CAACI,MAAMA,EAAE,cAAcI,EAAO,GAAG;AAE3D,aAAAH,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UACV,MAAK;AAAA,UACL,iBAAeI,IAAW;AAAA,UAC1B,SAASC,KAAA,gBAAAA,EAAM;AAAA,UAEd,kCAAM,UAAS;AAAA,QAAA;AAAA,QANXF,EAAO;AAAA,MAAA;AAAA,IAOd,CAEH;AAAA,EAAA;AAAA,EA/BIR,EAAI;AAAA;AAmDf,SAASW,EACPC,GACAC,GACS;AAKT,MAHID,EAAU,IAAI,QAAQC,EAAU,IAAI,OAGpCD,EAAU,aAAaC,EAAU,SAAiB,QAAA;AAGtD,MAAID,EAAU,IAAI,YAAYC,EAAU,IAAI;AAClC,mBAAA;AAAA,MACN,6BAA6BD,EAAU,IAAI,GAAG;AAAA,MAC9C,QAAQA,EAAU,IAAI,OAAO;AAAA,MAC7B,QAAQC,EAAU,IAAI,OAAO;AAAA,IAAA,GAExB;AAIT,MAAID,EAAU,QAAQ,WAAWC,EAAU,QAAQ,OAAe,QAAA;AAClE,WAASC,IAAI,GAAGA,IAAIF,EAAU,QAAQ,QAAQE;AACxC,QAAAF,EAAU,QAAQE,CAAC,EAAE,QAAQD,EAAU,QAAQC,CAAC,EAAE,IAAY,QAAA;AAIhE,MAAAF,EAAU,IAAI,MAAM,WAAWC,EAAU,IAAI,MAAM,OAAe,QAAA;AAEtE,WAASC,IAAI,GAAGA,IAAIF,EAAU,IAAI,MAAM,QAAQE,KAAK;AACnD,UAAMC,IAAWH,EAAU,IAAI,MAAME,CAAC,GAChCE,IAAWH,EAAU,IAAI,MAAMC,CAAC;AAEtC,QACEC,EAAS,cAAcC,EAAS,aAChCD,EAAS,YAAYC,EAAS;AAEvB,aAAA;AAKT,QAAI,CADe3B,EAAmB0B,EAAS,OAAOC,EAAS,KAAK,GACnD;AAET,YAAAxB,IAAWC,EAAmBsB,EAAS,KAAK,GAC5CrB,IAAWD,EAAmBuB,EAAS,KAAK;AAC1C,qBAAA;AAAA,QACN,8BAA8BD,EAAS,SAAS;AAAA,QAChD,SAASvB,CAAQ;AAAA,QACjB,SAASE,CAAQ;AAAA,QACjB,eAAeqB,EAAS,UAAUC,EAAS,KAAK;AAAA,MAAA,GAE3C;AAAA,IACT;AAAA,EACF;AAGA,SAAIJ,EAAU,oBAAoBC,EAAU;AAG9C;AAGa,MAAAI,IAAWC,EAAKnB,GAAmBY,CAAgB;"}

package/dist/index.d.ts

@@ -1058,13 +1058,14 @@ declare interface SwitchProps {
  *
  * - Built-in keyboard navigation for interactive rows.
  * - Full ARIA table semantics with proper roles, labels, and indices.
+ * - Rows are memoized by default for optimal performance.
  *
  * API:
  *  - {@link TableProps}
  *
  * @example
  * ```tsx
- * <Table caption="Employee Directory">
+ * <Table name="Employee Directory">
  *   <Table.Header>
  *     <Table.Column id="name">Name</Table.Column>
  *   </Table.Header>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protonradio/proton-ui",
-  "version": "0.11.24",
+  "version": "0.11.25-beta.2",
   "description": "",
   "main": "./dist/proton-ui.umd.js",
   "module": "./dist/proton-ui.es.js",