@hyphen/hyphen-components 9.0.0-beta.0 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/css/utilities.css +1 -1
  2. package/dist/css/utilities.css.map +1 -1
  3. package/dist/hyphen-components.cjs.development.js +11 -2
  4. package/dist/hyphen-components.cjs.development.js.map +1 -1
  5. package/dist/hyphen-components.cjs.production.min.js +2 -2
  6. package/dist/hyphen-components.cjs.production.min.js.map +1 -1
  7. package/dist/hyphen-components.esm.js +11 -2
  8. package/dist/hyphen-components.esm.js.map +1 -1
  9. package/dist/index.d.ts +10 -10
  10. package/package.json +2 -2
  11. package/src/components/Box/Box.mdx +3 -0
  12. package/src/components/Button/Button.mdx +13 -1
  13. package/src/components/Table/Table.mdx +20 -0
  14. package/src/components/Table/Table.tsx +7 -7
  15. package/src/components/Table/TableBody/TableBody.test.tsx +89 -1
  16. package/src/components/Table/TableBody/TableBody.tsx +23 -8
  17. package/src/components/Table/TableHead/TableHead.tsx +6 -6
  18. package/src/components/Table/TableHead/TableHeaderCell/TableHeaderCell.tsx +6 -6
  19. package/src/components/Table/common/TableRow/TableRow.test.tsx +1 -1
  20. package/src/components/Table/common/TableRow/TableRow.tsx +11 -9
  21. package/src/docs/GetStarted.mdx +7 -0
  22. package/src/docs/PolymorphicComposition.mdx +184 -0
  23. package/src/lib/getColumnKeys.ts +5 -3
  24. package/src/types/index.ts +4 -4
package/dist/hyphen-components.esm.js CHANGED
@@ -5177,7 +5177,8 @@ var TableRow = ({
5177
5177
  const getCellClassName = (column) => {
5178
5178
  if (column.cellClassName) {
5179
5179
  if (typeof column.cellClassName === "function") {
5180
- return column.cellClassName(column, row, rowIndex);
5180
+ const cellValue = column.dataKey && row ? row[column.dataKey] : void 0;
5181
+ return column.cellClassName(cellValue, row, rowIndex);
5181
5182
  }
5182
5183
  return column.cellClassName;
5183
5184
  }
@@ -5224,6 +5225,7 @@ var TableRow = ({
5224
5225
  var TableBody = ({
5225
5226
  columns,
5226
5227
  rows,
5228
+ rowKey,
5227
5229
  align = "left",
5228
5230
  className = "",
5229
5231
  emptyCellPlaceholder = "",
@@ -5241,6 +5243,13 @@ var TableBody = ({
5241
5243
  },
5242
5244
  className
5243
5245
  );
5246
+ const getRowKey = (row, rowIndex) => {
5247
+ const keyValue = row?.[rowKey];
5248
+ if (typeof keyValue === "string" || typeof keyValue === "number" || typeof keyValue === "bigint") {
5249
+ return `row-key-${String(keyValue)}`;
5250
+ }
5251
+ return `row-index-${rowIndex}`;
5252
+ };
5244
5253
  return /* @__PURE__ */ React62.createElement("tbody", { className: tableBodyClasses }, rows.map((row, rowIndex) => /* @__PURE__ */ React62.createElement(
5245
5254
  TableRow,
5246
5255
  {
@@ -5248,7 +5257,7 @@ var TableBody = ({
5248
5257
  row,
5249
5258
  rowIndex,
5250
5259
  align,
5251
- key: rowIndex,
5260
+ key: getRowKey(row, rowIndex),
5252
5261
  emptyCellPlaceholder,
5253
5262
  truncateOverflow,
5254
5263
  isBorderless,