@fattureincloud/fic-design-system 0.11.1 → 0.12.0

package/dist/assets/index-7ee742e8.css

@@ -0,0 +1,154 @@
+:root {
+    --columns-breakpoint-width: 100px; /* default value */
+    --table-breakpoint: px100; /* relates to TableBreakpoints enum */
+}
+
+.Table-container {
+    container-type: inline-size;
+    container-name: var(--table-breakpoint);
+}
+
+/* width breakpoints corresponds to TableBreakpoints enum */
+@container px100 (width < 100px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px200 (width < 200px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px300 (width < 300px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px400 (width < 400px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px500 (width < 500px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px600 (width < 600px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px700 (width < 700px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px800 (width < 800px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px900 (width < 900px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px1000 (width < 1000px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px1100 (width < 1100px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px1200 (width < 1200px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}

package/dist/assets/index-9fc4893a.css

@@ -0,0 +1,155 @@
+:root {
+    --columns-breakpoint-width: 100px; /* default value */
+    --table-breakpoint: px100; /* relates to TableBreakpoints enum */
+}
+
+.Table-container {
+    container-type: inline-size;
+    container-name: var(--table-breakpoint);
+    background: red;
+}
+
+/* width breakpoints corresponds to TableBreakpoints enum */
+@container px100 (width < 100px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px200 (width < 200px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px300 (width < 300px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px400 (width < 400px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px500 (width < 500px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px600 (width < 600px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px700 (width < 700px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px800 (width < 800px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px900 (width < 900px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px1000 (width < 1000px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px1100 (width < 1100px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px1200 (width < 1200px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}

package/dist/assets/index.esm-bff8cd71.css

@@ -0,0 +1,155 @@
+:root {
+    --columns-breakpoint-width: 100px; /* default value */
+    --table-breakpoint: px100; /* relates to TableBreakpoints enum */
+}
+
+.Table-container {
+    container-type: inline-size;
+    container-name: var(--table-breakpoint);
+    background: red;
+}
+
+/* width breakpoints corresponds to TableBreakpoints enum */
+@container px100 (width < 100px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px200 (width < 200px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px300 (width < 300px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px400 (width < 400px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px500 (width < 500px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px600 (width < 600px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px700 (width < 700px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px800 (width < 800px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px900 (width < 900px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px1000 (width < 1000px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px1100 (width < 1100px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px1200 (width < 1200px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}

package/dist/assets/index.esm-c9d742c9.css

@@ -0,0 +1,154 @@
+:root {
+    --columns-breakpoint-width: 100px; /* default value */
+    --table-breakpoint: px100; /* relates to TableBreakpoints enum */
+}
+
+.Table-container {
+    container-type: inline-size;
+    container-name: var(--table-breakpoint);
+}
+
+/* width breakpoints corresponds to TableBreakpoints enum */
+@container px100 (width < 100px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px200 (width < 200px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px300 (width < 300px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px400 (width < 400px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px500 (width < 500px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px600 (width < 600px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px700 (width < 700px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px800 (width < 800px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px900 (width < 900px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px1000 (width < 1000px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px1100 (width < 1100px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}
+
+@container px1200 (width < 1200px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}

package/dist/components/modals/types.d.ts

@@ -31,6 +31,7 @@ export interface ModalPropsInterface {
     isConfirmModal?: boolean;
     sizeCloseX?: SizeProp;
     zIndex?: number;
+    disableInfoTooltip?: boolean;
 }
 export interface StyledModalBoxProps {
     isFullscreen?: boolean;

package/dist/components/newTable/Table.d.ts

@@ -27,8 +27,8 @@ import { TableProps } from './types';
  * @param {function} onPaginationChange Callback to handle server side pagination
  * @param {function} renderEmptyState Render a custom empty state for the table's body
  * @param {function} onRowClick Callback called after a click on a row, returns the row
- * @param {number} rowIdHighlight id of the row that will be highlighted
  * @param {number} actionColumnWidth used to determine the width of the action column
+ * @param {function} isRowHighlighted used to underline table rows
  */
-declare const Table: <T>({ data, columns, isSelectable, toggles, onTogglesChange, headerSize, isTogglesSortable, sortable, sortDescFirst, enableSettings, settingsDropdownConfig, rowActions, bulkActions, isLoading, allSelectedCTA, noPagination, pageSize: pageLength, listSize, paginationPreviousText, paginationNextText, onPaginationChange, uniqueId, onSort, renderEmptyState, onRowClick, bodyHeight, totalPages, rowIdHighlight, rowHighlightColor, rowSelection, onRowSelection, forceHideSettings, renderBulkActions, preSettedTableSettings, onChangeTableSettings, notRemovableColumns, rowSize, actionColumnWidth, disableScrollX, resetPageIndex, }: TableProps<T>) => JSX.Element;
+declare const Table: <T>({ data, columns, isSelectable, toggles, onTogglesChange, headerSize, isTogglesSortable, sortable, sortDescFirst, enableSettings, settingsDropdownConfig, rowActions, bulkActions, isLoading, allSelectedCTA, noPagination, pageSize: pageLength, listSize, paginationPreviousText, paginationNextText, onPaginationChange, uniqueId, onSort, renderEmptyState, onRowClick, bodyHeight, totalPages, rowHighlightColor, rowSelection, onRowSelection, forceHideSettings, renderBulkActions, preSettedTableSettings, onChangeTableSettings, notRemovableColumns, rowSize, actionColumnWidth, disableScrollX, resetPageIndex, isRowHighlighted, }: TableProps<T>) => JSX.Element;
 export default Table;

package/dist/components/newTable/components/body/Body.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Row } from '@tanstack/react-table';
 import { TableProps } from '../../types';
-interface BodyProps<T> extends Pick<TableProps<T>, 'rowSize' | 'bodyHeight' | 'rowIdHighlight' | 'rowHighlightColor'> {
+interface BodyProps<T> extends Pick<TableProps<T>, 'rowSize' | 'bodyHeight' | 'rowHighlightColor' | 'isRowHighlighted'> {
     rows: Row<T>[];
     isLoading?: boolean;
     onRowClick?: (row: Row<T>) => void;
@@ -9,5 +9,5 @@ interface BodyProps<T> extends Pick<TableProps<T>, 'rowSize' | 'bodyHeight' | 'r
     actionColumnWidth: number;
     disableScrollX?: boolean;
 }
-declare const Body: <T>({ rows, rowSize, isLoading, onRowClick, bodyHeight, rowIdHighlight, rowHighlightColor, pageIndex, actionColumnWidth, disableScrollX, }: BodyProps<T>) => JSX.Element;
+declare const Body: <T>({ rows, rowSize, isLoading, onRowClick, bodyHeight, rowHighlightColor, pageIndex, actionColumnWidth, disableScrollX, isRowHighlighted, }: BodyProps<T>) => JSX.Element;
 export default Body;

package/dist/components/newTable/components/row/Row.d.ts

@@ -6,9 +6,9 @@ interface TrProps<T> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLTa
     defaultRowSize?: RowSize;
     isLoading?: boolean;
     onRowClick?: (row: Row<T>) => void;
-    isRowHighlighted: boolean;
     rowHighlightColor?: TableProps<T>['rowHighlightColor'];
     actionColumnWidth: number;
+    isRowHighlighted?: (row: Row<T>) => boolean;
 }
-declare const Tr: <T>({ row, isLoading, onRowClick, isRowHighlighted, rowHighlightColor, defaultRowSize, actionColumnWidth, }: TrProps<T>) => JSX.Element;
+declare const Tr: <T>({ row, isLoading, onRowClick, rowHighlightColor, defaultRowSize, actionColumnWidth, isRowHighlighted, }: TrProps<T>) => JSX.Element;
 export default Tr;

package/dist/components/newTable/stories/types.d.ts

@@ -1,6 +1,7 @@
 import { CellProps } from '../types';
 export interface DataType {
     id: string;
+    rowStatus?: 'highlighted';
     customCell?: CellProps;
     supplier: CellProps;
     description: CellProps;

package/dist/components/newTable/types.d.ts

@@ -39,7 +39,7 @@ export interface TableProps<T> {
     onRowClick?: (row: Row<T>) => void;
     bodyHeight?: number;
     totalPages?: number;
-    rowIdHighlight?: number | string;
+    isRowHighlighted?: (row: Row<T>) => boolean;
     rowHighlightColor?: string;
     rowSelection?: string[];
     onRowSelection?: (e: string[]) => void;