bugfix: dataDisplay/CoreTable related CoreComponents prop sanitization

package/components/dataDisplay/CoreTable.js

@@ -4,36 +4,24 @@ import React from "react";
 
 import { NativeTable } from "@wrappid/native";
 
-import { getUUID } from "../../utils/appUtils";
 import { sanitizeComponentProps } from "../../utils/componentUtil";
 
+/**
+ * CoreTable component is used to display data in a tabular format.
+ * @todo implement React.useID 
+ * @param {*} props 
+ * @returns 
+ */
 export default function CoreTable(props) {
-  let _uuid = getUUID();
-  // eslint-disable-next-line no-unused-vars
-  let containerId = props?.coreId ? "tc_" + props.coreId : "tc_" + _uuid;
-
   props = sanitizeComponentProps(CoreTable, props);
 
-  const {
-    children,
-    component,
-    padding,
-    size,
-    stickyHeader,
-  } = props;
-
   return (
-    <NativeTable 
-      component={component}
-      padding={padding}
-      size={size}
-      stickyHeader={stickyHeader}
-    >
-      {children}
-    </NativeTable>
+    <NativeTable {...props} />
   );
 }
 
+CoreTable.displayName = "CoreTable";
+
 CoreTable.validProps = [
   {
     description: "The content of the table, normally TableHead and TableBody.",

package/components/dataDisplay/CoreTableBody.js

@@ -4,6 +4,24 @@ import React from "react";
 // eslint-disable-next-line import/no-unresolved
 import { NativeTableBody } from "@wrappid/native";
 
+import { sanitizeComponentProps } from "../../utils/componentUtil";
+
 export default function CoreTableBody(props) {
-  return <NativeTableBody {...props}>{props.children}</NativeTableBody>;
+  props = sanitizeComponentProps(CoreTableBody, props);
+  return <NativeTableBody {...props} />;
 }
+
+CoreTableBody.displayName = "CoreTableBody";
+CoreTableBody.validProps = [
+  {
+    description: "The content of the component, normally CoreTableRow.",
+    name       : "children",
+    types      : [{ type: "node" }]
+  },
+  {
+    description: "The component used for the root node. Either a string to use a HTML element or a component.",
+    name       : "component",
+    types      : [{ type: "elementType" }]
+  }
+];
+CoreTableBody.invalidProps = [];

package/components/dataDisplay/CoreTableCell.js

@@ -4,6 +4,99 @@ import React from "react";
 // eslint-disable-next-line import/no-unresolved
 import { NativeTableCell } from "@wrappid/native";
 
+import { sanitizeComponentProps } from "../../utils/componentUtil";
+
 export default function CoreTableCell(props) {
+  props = sanitizeComponentProps(CoreTableCell, props);
   return <NativeTableCell {...props} />;
 }
+
+CoreTableCell.displayName = "CoreTableCell";
+
+CoreTableCell.validProps = [
+  {
+    description: "Set the text-align on the table cell content. Monetary or generally number fields should be right aligned as that allows you to add them up quickly in your head without having to worry about decimals.",
+    name       : "align",
+    types      : [
+      {
+        default    : "inherit",
+        type       : "string",
+        validValues: [
+          "left",
+          "center",
+          "right",
+          "justify",
+          "inherit"
+        ]
+      }
+    ]
+  },
+  {
+    description: "The content of the component.",
+    name       : "children",
+    types      : [{ type: "node" }]
+  },
+  {
+    description: "The component used for the root node. Either a string to use a HTML element or a component.",
+    name       : "component",
+    types      : [{ type: "elementType" }]
+  },
+  {
+    description: "Set the padding applied to the cell. By default, the Table parent component set the padding to 16px. Set padding to 'checkbox' to have padding for the checkbox.",
+    name       : "padding",
+    types      : [
+      {
+        default    : "normal",
+        type       : "string",
+        validValues: ["normal", "checkbox", "none"]
+      }
+    ]
+  },
+  {
+    description: "Set the scope attribute.",
+    name       : "scope",
+    types      : [{ type: "string" }]
+  },
+  {
+    description: "Specify the size of the cell. The prop defaults to the value ('medium') inherited from the parent CoreTable component.",
+    name       : "size",
+    types      : [
+      {
+        default    : "medium",
+        type       : "string",
+        validValues: ["small", "medium"]
+      }
+    ]
+  },
+  {
+    description: "Set aria-sort direction.",
+    name       : "sortDirection",
+    types      : [
+      {
+        type       : "string",
+        validValues: ["asc", "desc", "false"]
+      },
+      {
+        default      : false,
+        isDefaultType: true,
+        type         : "boolean",
+        validValues  : [false]
+      }
+    ]
+  },
+  {
+    description: "Specify the cell type. The prop defaults to the value inherited from the parent CoreTableHead, CoreTableBody, or CoreTableFooter components.",
+    name       : "variant",
+    types      : [
+      {
+        default    : "body",
+        type       : "string",
+        validValues: ["body", "footer", "head"]
+      }
+    ]
+  }
+
+];
+
+CoreTableCell.invalidProps = [];
+

package/components/dataDisplay/CoreTableContainer.js

@@ -4,6 +4,25 @@ import React from "react";
 // eslint-disable-next-line import/no-unresolved
 import { NativeTableContainer } from "@wrappid/native";
 
+import { sanitizeComponentProps } from "../../utils/componentUtil";
+
 export default function CoreTableContainer(props) {
-  return <NativeTableContainer {...props}>{props.children}</NativeTableContainer>;
+  props = sanitizeComponentProps(CoreTableContainer, props);
+  return <NativeTableContainer {...props} />;
 }
+
+CoreTableContainer.displayName = "CoreTableContainer";
+CoreTableContainer.validProps = [
+  {
+    description: "The content of the component, normally CoreTable.",
+    name       : "children",
+    types      : [{ type: "node" }]
+  },
+  {
+    description: "The component used for the root node. Either a string to use a HTML element or a component.",
+    name       : "component",
+    types      : [{ type: "elementType" }]
+  }
+];
+
+CoreTableContainer.invalidProps = [];

package/components/dataDisplay/CoreTableFooter.js

@@ -4,6 +4,24 @@ import React from "react";
 // eslint-disable-next-line import/no-unresolved
 import { NativeTableFooter } from "@wrappid/native";
 
+import { sanitizeComponentProps } from "../../utils/componentUtil";
+
 export default function CoreTableFooter(props) {
-  return <NativeTableFooter {...props}>{props.children}</NativeTableFooter>;
+  props = sanitizeComponentProps(CoreTableFooter, props);
+  return <NativeTableFooter {...props} />;
 }
+CoreTableFooter.displayName = "CoreTableFooter";
+CoreTableFooter.validProps = [
+  {
+    description: "The content of the component, normally CoreTableRow.",
+    name       : "children",
+    types      : [{ type: "node" }]
+  },
+  {
+    description: "The component used for the root node. Either a string to use a HTML element or a component.",
+    name       : "component",
+    types      : [{ type: "elementType" }]
+  }
+];
+
+CoreTableFooter.invalidProps = [];

package/components/dataDisplay/CoreTableHead.js

@@ -4,6 +4,25 @@ import React from "react";
 // eslint-disable-next-line import/no-unresolved
 import { NativeTableHead } from "@wrappid/native";
 
+import { sanitizeComponentProps } from "../../utils/componentUtil";
+
 export default function CoreTableHead(props) {
+  props = sanitizeComponentProps(CoreTableHead, props);
   return <NativeTableHead {...props}>{props.children}</NativeTableHead>;
 }
+
+CoreTableHead.displayName = "CoreTableHead";
+CoreTableHead.validProps = [
+  {
+    description: "The content of the component, normally CoreTableRow.",
+    name       : "children",
+    types      : [{ type: "node" }]
+  },
+  {
+    description: "The component used for the root node. Either a string to use a HTML element or a component.",
+    name       : "component",
+    types      : [{ type: "elementType" }]
+  }
+];
+
+CoreTableHead.invalidProps = [];