@indico-data/design-system 2.49.0 → 2.51.0

package/lib/components/tanstackTable/index.d.ts

@@ -0,0 +1,2 @@
+export type { ColumnDef } from '@tanstack/react-table';
+export { TanstackTable } from './TanstakTable';

package/lib/components/tanstackTable/mock-data/mock-data.d.ts

@@ -0,0 +1,14 @@
+export type Person = {
+    firstName: string;
+    lastName: string;
+    age: number;
+    visits: number;
+    progress: number;
+    status: 'relationship' | 'complicated' | 'single';
+    subRows?: Person[];
+    id: string;
+    country: string;
+    city: string;
+    civility: string;
+};
+export declare const people: Person[];

package/lib/components/tanstackTable/mock-data/table-configuration.d.ts

@@ -0,0 +1,3 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { Person } from './mock-data';
+export declare const columns: ColumnDef<Person>[];

package/lib/components/tanstackTable/useTanstackTable.d.ts

@@ -0,0 +1,16 @@
+import { ColumnDef } from '@tanstack/react-table';
+type Props<T> = {
+    defaultColumns: ColumnDef<T>[];
+};
+export declare function useTanstackTable<T>({ defaultColumns }: Props<T>): {
+    columns: ColumnDef<T>[];
+    defaultData: never[];
+    rowSelection: {};
+    setRowSelection: import("react").Dispatch<import("react").SetStateAction<{}>>;
+    windowWidth: number;
+    formattedColumns: ColumnDef<T>[];
+    setFormattedColumns: import("react").Dispatch<import("react").SetStateAction<ColumnDef<T>[]>>;
+    isClickedRow: string[];
+    setIsClickedRow: import("react").Dispatch<import("react").SetStateAction<string[]>>;
+};
+export {};

package/lib/index.css

@@ -1962,6 +1962,253 @@ form {
   border-color: var(--pf-error-color);
 }
 
+:root [data-theme=light] {
+  --pf-tanstack-table-background-color: var(--pf-white-color);
+  --pf-tanstack-table-font-color: var(--pf-gray-color);
+  --pf-tanstack-table-border-color: var(--pf-gray-color-200);
+  --pf-tanstack-table-stripe-color: var(--pf-gray-color-100);
+  --pf-tanstack-table-hover-color: var(--pf-gray-color-200);
+  --pf-tanstack-table-disabled-color: var(--pf-gray-color-300);
+  --pf-tanstack-table-checked-color: var(--pf-secondary-color-950);
+  --pf-tanstack-table-clicked-color: var(--pf-secondary-color-100);
+  --pf-tanstack-table-highlighted-color: var(--pf-gray-color-200);
+  --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
+    0 8px 16px rgba(0, 0, 0, 0.2);
+  --pf-tanstack-table-font-size: var(--pf-font-size-body2);
+}
+
+:root [data-theme=dark],
+:root {
+  --pf-tanstack-table-background-color: var(--pf-primary-color-800);
+  --pf-tanstack-table-font-color: var(--pf-white-color);
+  --pf-tanstack-table-border-color: var(--pf-tertiary-color-800);
+  --pf-tanstack-table-stripe-color: var(--pf-primary-color-700);
+  --pf-tanstack-table-hover-color: var(--pf-primary-color-600);
+  --pf-tanstack-table-disabled-color: var(--pf-gray-color-900);
+  --pf-tanstack-table-disabled-button-color: var(--pf-primary-color-100);
+  --pf-tanstack-table-checked-color: var(--pf-secondary-color-950);
+  --pf-tanstack-table-clicked-color: var(--pf-primary-color);
+  --pf-tanstack-table-highlighted-color: var(--pf-primary-color);
+  --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4),
+    0 8px 16px rgba(0, 0, 0, 0.3);
+  --pf-tanstack-table-font-size: var(--pf-font-size-body2);
+  --pf-tanstack-table-pagination-background-color: var(--pf-primary-color-700);
+}
+
+.tanstack-table__action-bar-test {
+  left: 20% !important;
+}
+
+.tanstack-table__action-bar-docs {
+  bottom: unset !important;
+  top: 50% !important;
+  transform: translate(-50%, -50%) !important;
+}
+
+.tanstack-table__column.is-pinned {
+  opacity: 1;
+}
+.tanstack-table__column.is-not-pinned {
+  opacity: 0.3;
+}
+
+.tanstack-table__action-bar {
+  position: fixed;
+  bottom: 170px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 90;
+}
+.tanstack-table__action-bar__container {
+  display: flex;
+  align-items: center;
+  gap: var(--pf-size-2);
+}
+.tanstack-table__action-bar__text-container {
+  padding: var(--pf-padding-2);
+}
+.tanstack-table__action-bar__text-container span {
+  font-size: var(--pf-font-size-base);
+  font-weight: var(--pf-font-weight-medium);
+  line-height: var(--pf-line-height-lg);
+  color: var(--pf-white-color);
+}
+.tanstack-table__action-bar__button-container {
+  display: flex;
+  align-items: center;
+  gap: var(--pf-size-4);
+}
+
+.tanstack-table__no-results {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  position: sticky;
+  left: 0;
+  margin: var(--pf-margin-8) auto;
+}
+.tanstack-table__no-results__text {
+  font-size: var(--pf-line-height-md);
+  font-weight: var(--pf-font-weight-medium);
+  color: var(--pf-primary-color-50);
+}
+.tanstack-table__no-results__text span {
+  color: var(--pf-white-color);
+  cursor: pointer;
+}
+.tanstack-table__no-results__text span:hover {
+  text-decoration: underline;
+}
+
+.tanstack-table__outer-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+.tanstack-table__outer-container .tanstack-table__container {
+  position: relative;
+  display: block;
+  overflow: auto;
+  height: 100%;
+  scrollbar-width: thin;
+  scrollbar-color: var(--pf-tanstack-table-border-color) var(--pf-tanstack-table-background-color);
+}
+.tanstack-table__outer-container .tanstack-table__container::-webkit-scrollbar {
+  width: var(--pf-size-2);
+  height: var(--pf-size-2);
+  cursor: pointer;
+}
+.tanstack-table__outer-container .tanstack-table__container::-webkit-scrollbar-track {
+  background: var(--pf-tanstack-table-background-color);
+  border-radius: var(--pf-rounded);
+  cursor: pointer;
+}
+.tanstack-table__outer-container .tanstack-table__container::-webkit-scrollbar-thumb {
+  background: var(--pf-tanstack-table-border-color);
+  border-radius: var(--pf-rounded);
+  cursor: pointer;
+}
+.tanstack-table__outer-container .tanstack-table__container::-webkit-scrollbar-thumb:hover {
+  background: var(--pf-primary-color);
+}
+
+.tanstack-table {
+  border-collapse: separate;
+  margin: 0;
+  table-layout: auto;
+  border-spacing: 0;
+  border-radius: var(--pf-rounded-lg);
+  width: 100%;
+}
+.tanstack-table.is-loading {
+  border: var(--pf-border-thin) solid var(--pf-border-color);
+  height: 100%;
+  width: 100%;
+}
+.tanstack-table__thead {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  box-sizing: border-box;
+  background-color: var(--pf-tanstack-table-background-color);
+}
+.tanstack-table__thead tr:first-child th:first-child {
+  border-top-left-radius: var(--pf-rounded-lg);
+}
+.tanstack-table__thead tr:first-child th:last-child {
+  border-top-right-radius: var(--pf-rounded-lg);
+}
+.tanstack-table__thead__th {
+  color: var(--pf-tanstack-table-font-color);
+  background: var(--pf-tanstack-table-background-color);
+  font-size: var(--pf-tanstack-table-font-size);
+  font-weight: var(--pf-font-weight-medium);
+  box-sizing: border-box;
+  border-top: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+  border-bottom: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+  border-right: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 300px;
+  width: auto;
+  padding: 0 var(--pf-padding-2);
+  text-align: left;
+}
+.tanstack-table__thead__th:first-child {
+  border-left: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+}
+.tanstack-table__tbody tr:last-child td:first-child {
+  border-bottom-left-radius: var(--pf-rounded-lg);
+}
+.tanstack-table__tbody tr:last-child td:last-child {
+  border-bottom-right-radius: var(--pf-rounded-lg);
+}
+.tanstack-table__tbody__tr {
+  background: transparent;
+  width: 100%;
+}
+.tanstack-table__tbody__tr.is-selected td {
+  background: var(--pf-tanstack-table-checked-color);
+}
+.tanstack-table__tbody__tr.show-hover:hover td {
+  background-color: var(--pf-tanstack-table-hover-color);
+  cursor: pointer;
+}
+.tanstack-table__tbody__tr.is-clicked td {
+  background-color: var(--pf-tanstack-table-clicked-color);
+}
+.tanstack-table__tbody__td {
+  font-size: var(--pf-font-size-base);
+  font-weight: var(--pf-font-weight-medium);
+  color: var(--pf-tanstack-table-font-color);
+  background: var(--pf-tanstack-table-background-color);
+  border-right: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+  border-bottom: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+  box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 var(--pf-padding-2);
+  max-width: 300px;
+  width: auto;
+  text-align: left;
+}
+.tanstack-table__tbody__td:first-child {
+  border-left: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+}
+.tanstack-table__centered-row {
+  padding: var(--pf-padding-1) var(--pf-padding-2);
+  text-align: center;
+  vertical-align: middle;
+  height: 100%;
+  border: var(--pf-border-sm) solid var(--pf-border-color);
+  animation: none;
+}
+@keyframes shimmer {
+  0% {
+    background-color: var(--pf-primary-color-700) 40;
+  }
+  50% {
+    background-color: var(--pf-primary-color-700);
+  }
+  100% {
+    background-color: var(--pf-primary-color-700) 40;
+  }
+}
+.tanstack-table__centered-row.is-loading {
+  animation: shimmer 3s ease-in-out infinite;
+}
+.tanstack-table__centered-row svg {
+  margin: 0 auto;
+  display: block;
+}
+
 :root [data-theme=light] {
   --pf-pill-primary-background-color: var(--pf-primary-color);
   --pf-pill-primary-font-color: var(--pf-white-color);
@@ -4204,124 +4451,124 @@ p,
   border-color: var(--pf-secondary-color-900);
 }
 
-.border-gray {
-  border-color: var(--pf-gray-color);
+.border-tertiary {
+  border-color: var(--pf-tertiary-color);
 }
 
-.border-gray-100 {
-  border-color: var(--pf-gray-color-100);
+.border-tertiary-100 {
+  border-color: var(--pf-tertiary-color-100);
 }
 
-.border-gray-200 {
-  border-color: var(--pf-gray-color-200);
+.border-tertiary-200 {
+  border-color: var(--pf-tertiary-color-200);
 }
 
-.border-gray-300 {
-  border-color: var(--pf-gray-color-300);
+.border-tertiary-300 {
+  border-color: var(--pf-tertiary-color-300);
 }
 
-.border-gray-400 {
-  border-color: var(--pf-gray-color-400);
+.border-tertiary-400 {
+  border-color: var(--pf-tertiary-color-400);
 }
 
-.border-gray-500 {
-  border-color: var(--pf-gray-color-500);
+.border-tertiary-500 {
+  border-color: var(--pf-tertiary-color-500);
 }
 
-.border-gray-600 {
-  border-color: var(--pf-gray-color-600);
+.border-tertiary-600 {
+  border-color: var(--pf-tertiary-color-600);
 }
 
-.border-gray-700 {
-  border-color: var(--pf-gray-color-700);
+.border-tertiary-700 {
+  border-color: var(--pf-tertiary-color-700);
 }
 
-.border-gray-800 {
-  border-color: var(--pf-gray-color-800);
+.border-tertiary-800 {
+  border-color: var(--pf-tertiary-color-800);
 }
 
-.border-gray-900 {
-  border-color: var(--pf-gray-color-900);
+.border-tertiary-900 {
+  border-color: var(--pf-tertiary-color-900);
 }
 
-.border-steel {
-  border-color: var(--pf-steel-color);
+.border-gray {
+  border-color: var(--pf-gray-color);
 }
 
-.border-steel-100 {
-  border-color: var(--pf-steel-color-100);
+.border-gray-100 {
+  border-color: var(--pf-gray-color-100);
 }
 
-.border-steel-200 {
-  border-color: var(--pf-steel-color-200);
+.border-gray-200 {
+  border-color: var(--pf-gray-color-200);
 }
 
-.border-steel-300 {
-  border-color: var(--pf-steel-color-300);
+.border-gray-300 {
+  border-color: var(--pf-gray-color-300);
 }
 
-.border-steel-400 {
-  border-color: var(--pf-steel-color-400);
+.border-gray-400 {
+  border-color: var(--pf-gray-color-400);
 }
 
-.border-steel-500 {
-  border-color: var(--pf-steel-color-500);
+.border-gray-500 {
+  border-color: var(--pf-gray-color-500);
 }
 
-.border-steel-600 {
-  border-color: var(--pf-steel-color-600);
+.border-gray-600 {
+  border-color: var(--pf-gray-color-600);
 }
 
-.border-steel-700 {
-  border-color: var(--pf-steel-color-700);
+.border-gray-700 {
+  border-color: var(--pf-gray-color-700);
 }
 
-.border-steel-800 {
-  border-color: var(--pf-steel-color-800);
+.border-gray-800 {
+  border-color: var(--pf-gray-color-800);
 }
 
-.border-steel-900 {
-  border-color: var(--pf-steel-color-900);
+.border-gray-900 {
+  border-color: var(--pf-gray-color-900);
 }
 
-.border-green {
-  border-color: var(--pf-green-color);
+.border-red {
+  border-color: var(--pf-red-color);
 }
 
-.border-green-100 {
-  border-color: var(--pf-green-color-100);
+.border-red-100 {
+  border-color: var(--pf-red-color-100);
 }
 
-.border-green-200 {
-  border-color: var(--pf-green-color-200);
+.border-red-200 {
+  border-color: var(--pf-red-color-200);
 }
 
-.border-green-300 {
-  border-color: var(--pf-green-color-300);
+.border-red-300 {
+  border-color: var(--pf-red-color-300);
 }
 
-.border-green-400 {
-  border-color: var(--pf-green-color-400);
+.border-red-400 {
+  border-color: var(--pf-red-color-400);
 }
 
-.border-green-500 {
-  border-color: var(--pf-green-color-500);
+.border-red-500 {
+  border-color: var(--pf-red-color-500);
 }
 
-.border-green-600 {
-  border-color: var(--pf-green-color-600);
+.border-red-600 {
+  border-color: var(--pf-red-color-600);
 }
 
-.border-green-700 {
-  border-color: var(--pf-green-color-700);
+.border-red-700 {
+  border-color: var(--pf-red-color-700);
 }
 
-.border-green-800 {
-  border-color: var(--pf-green-color-800);
+.border-red-800 {
+  border-color: var(--pf-red-color-800);
 }
 
-.border-green-900 {
-  border-color: var(--pf-green-color-900);
+.border-red-900 {
+  border-color: var(--pf-red-color-900);
 }
 
 .border-orange {
@@ -4364,44 +4611,124 @@ p,
   border-color: var(--pf-orange-color-900);
 }
 
-.border-red {
-  border-color: var(--pf-red-color);
+.border-yellow {
+  border-color: var(--pf-yellow-color);
 }
 
-.border-red-100 {
-  border-color: var(--pf-red-color-100);
+.border-yellow-100 {
+  border-color: var(--pf-yellow-color-100);
 }
 
-.border-red-200 {
-  border-color: var(--pf-red-color-200);
+.border-yellow-200 {
+  border-color: var(--pf-yellow-color-200);
 }
 
-.border-red-300 {
-  border-color: var(--pf-red-color-300);
+.border-yellow-300 {
+  border-color: var(--pf-yellow-color-300);
 }
 
-.border-red-400 {
-  border-color: var(--pf-red-color-400);
+.border-yellow-400 {
+  border-color: var(--pf-yellow-color-400);
 }
 
-.border-red-500 {
-  border-color: var(--pf-red-color-500);
+.border-yellow-500 {
+  border-color: var(--pf-yellow-color-500);
 }
 
-.border-red-600 {
-  border-color: var(--pf-red-color-600);
+.border-yellow-600 {
+  border-color: var(--pf-yellow-color-600);
 }
 
-.border-red-700 {
-  border-color: var(--pf-red-color-700);
+.border-yellow-700 {
+  border-color: var(--pf-yellow-color-700);
 }
 
-.border-red-800 {
-  border-color: var(--pf-red-color-800);
+.border-yellow-800 {
+  border-color: var(--pf-yellow-color-800);
 }
 
-.border-red-900 {
-  border-color: var(--pf-red-color-900);
+.border-yellow-900 {
+  border-color: var(--pf-yellow-color-900);
+}
+
+.border-green {
+  border-color: var(--pf-green-color);
+}
+
+.border-green-100 {
+  border-color: var(--pf-green-color-100);
+}
+
+.border-green-200 {
+  border-color: var(--pf-green-color-200);
+}
+
+.border-green-300 {
+  border-color: var(--pf-green-color-300);
+}
+
+.border-green-400 {
+  border-color: var(--pf-green-color-400);
+}
+
+.border-green-500 {
+  border-color: var(--pf-green-color-500);
+}
+
+.border-green-600 {
+  border-color: var(--pf-green-color-600);
+}
+
+.border-green-700 {
+  border-color: var(--pf-green-color-700);
+}
+
+.border-green-800 {
+  border-color: var(--pf-green-color-800);
+}
+
+.border-green-900 {
+  border-color: var(--pf-green-color-900);
+}
+
+.border-purple {
+  border-color: var(--pf-purple-color);
+}
+
+.border-purple-100 {
+  border-color: var(--pf-purple-color-100);
+}
+
+.border-purple-200 {
+  border-color: var(--pf-purple-color-200);
+}
+
+.border-purple-300 {
+  border-color: var(--pf-purple-color-300);
+}
+
+.border-purple-400 {
+  border-color: var(--pf-purple-color-400);
+}
+
+.border-purple-500 {
+  border-color: var(--pf-purple-color-500);
+}
+
+.border-purple-600 {
+  border-color: var(--pf-purple-color-600);
+}
+
+.border-purple-700 {
+  border-color: var(--pf-purple-color-700);
+}
+
+.border-purple-800 {
+  border-color: var(--pf-purple-color-800);
+}
+
+.border-purple-900 {
+  border-color: var(--pf-purple-color-900);
 }
 
 .rounded {