@indico-data/design-system 2.50.0 → 2.51.1

package/src/components/tanstackTable/styles/table.scss

@@ -0,0 +1,218 @@
+@import './_variables.scss';
+@import './test.scss';
+
+@import '../components/ActionBar/ActionBar.scss';
+@import '../components/NoResults/NoResults.scss';
+
+.tanstack-table__outer-container {
+  .tanstack-table__column--is-pinned {
+    opacity: 1;
+  }
+
+  .tanstack-table__column--is-not-pinned {
+    opacity: 0.3;
+  }
+
+  .tanstack-table__container {
+    height: calc(100vh - 70px);
+    grid-template-rows: auto 1fr auto;
+    grid-template-columns: 1fr;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    grid-template-columns: 1fr;
+    overflow-x: auto;
+    overflow-y: auto;
+    background-color: var(--pf-tanstack-table-background-color);
+    border-radius: var(--pf-rounded-lg);
+    border-left: var(--pf-border-sm) solid var(--pf-tanstack-table-border-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);
+
+    // Webkit scrollbar styles
+    &::-webkit-scrollbar {
+      width: var(--pf-size-2);
+      height: var(--pf-size-2);
+      cursor: pointer;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: var(--pf-tanstack-table-background-color);
+      border-radius: var(--pf-rounded);
+      cursor: pointer;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--pf-tanstack-table-border-color);
+      border-radius: var(--pf-rounded);
+      cursor: pointer;
+      &:hover {
+        background: var(--pf-primary-color);
+      }
+    }
+
+    // Firefox scrollbar styles
+    scrollbar-width: thin;
+    scrollbar-color: var(--pf-tanstack-table-border-color) var(--pf-tanstack-table-background-color);
+  }
+}
+
+.tanstack-table {
+  border-collapse: separate;
+  margin: 0;
+  table-layout: auto;
+  border-spacing: 0;
+  border-radius: var(--pf-rounded-lg);
+  width: 100%;
+
+  &.is-loading {
+    border: var(--pf-border-thin) solid var(--pf-border-color);
+    height: 100%;
+    width: 100%;
+  }
+
+  &__thead {
+    position: sticky;
+    top: 0;
+    z-index: 3;
+    box-sizing: border-box;
+
+    background-color: var(--pf-tanstack-table-background-color);
+
+    tr:first-child {
+      th {
+        &:first-child {
+          border-left: none;
+        }
+
+        &:last-child {
+          border-right: none;
+        }
+      }
+    }
+
+    &__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);
+
+      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;
+
+      &:first-child {
+        border-left: none;
+      }
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+  }
+
+  &__tbody {
+    tr:last-child {
+      border-bottom: none;
+    }
+
+    &__tr {
+      background: transparent;
+      width: 100%;
+      border-left: none;
+      border-right: none;
+
+      &.is-selected {
+        td {
+          background: var(--pf-tanstack-table-checked-color);
+        }
+      }
+
+      &.show-hover {
+        &:hover {
+          td {
+            background-color: var(--pf-tanstack-table-hover-color);
+            cursor: pointer;
+          }
+        }
+      }
+
+      &.is-clicked {
+        td {
+          background-color: var(--pf-tanstack-table-clicked-color);
+        }
+      }
+    }
+
+    &__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;
+
+      &:first-child {
+        border-left: none;
+      }
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+  }
+
+  &__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);
+
+    @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;
+      }
+    }
+
+    animation: none;
+
+    &.is-loading {
+      animation: shimmer 3s ease-in-out infinite;
+    }
+
+    svg {
+      margin: 0 auto;
+      display: block;
+    }
+  }
+}

package/src/components/tanstackTable/styles/test.scss

@@ -0,0 +1,19 @@
+.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;
+  }
+
+  &.is-not-pinned {
+    opacity: 0.3;
+  }
+}

package/src/components/tanstackTable/tanstack-table.d.ts

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import '@tanstack/react-table';
+
+declare module '@tanstack/react-table' {
+  interface ColumnMeta<TData extends RowData, TValue> {
+    styles: {
+      definedColumnSize?: boolean;
+      header?: {
+        hasNoPadding?: boolean;
+        textAlign?: 'left' | 'center' | 'right';
+      };
+      cell?: {
+        hasNoPadding?: boolean;
+        textAlign?: 'left' | 'center' | 'right';
+        preventRowSelection?: boolean;
+      };
+    };
+  }
+}

package/src/components/tanstackTable/useTanstackTable.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+
+import { ColumnDef } from '@tanstack/react-table';
+import { useEffect, useMemo } from 'react';
+
+type Props<T> = {
+  defaultColumns: ColumnDef<T>[];
+};
+
+export function useTanstackTable<T>({ defaultColumns }: Props<T>) {
+  const columns = useMemo<ColumnDef<T>[]>(() => defaultColumns, []);
+  const defaultData = useMemo(() => [], []);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const [rowSelection, setRowSelection] = useState({});
+  const [formattedColumns, setFormattedColumns] = useState<ColumnDef<T>[]>(columns);
+
+  // Tracks changes to browser width to allow for updating of column widths
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return {
+    columns,
+    defaultData,
+    rowSelection,
+    setRowSelection,
+    windowWidth,
+    formattedColumns,
+    setFormattedColumns,
+  };
+}

package/src/index.ts

@@ -28,6 +28,7 @@ export { Menu } from './components/menu';
 export { Pill } from './components/pill';
 export { Badge } from './components/badge';
 export { Modal } from './components/modal';
+export { TanstackTable } from './components/tanstackTable';
 
 // Utilities
 export { registerFontAwesomeIcons } from './setup/setupIcons';

package/src/legacy/components/loading-indicators/CirclePulse/CirclePulse.tsx

@@ -29,6 +29,7 @@ export function CirclePulse(props: Props): React.ReactElement {
         aria-hidden={true}
         className={className}
         data-cy={props['data-cy']}
+        data-testid={props['data-testid']}
         id={id}
         overallsize={returnSizeString(overallSize)}
         ripplesize={returnSizeString(rippleSize)}

package/src/styles/index.scss

@@ -24,6 +24,7 @@
 @import '../components/badge/styles/Badge.scss';
 @import '../components/modal/styles/Modal.scss';
 @import '../components/pagination/styles/Pagination.scss';
+@import '../components/tanstackTable/styles/table.scss';
 
 @import '../components/pill/styles/Pill.scss';
 @import 'sheets'; // Port to an sheets component when we build it

package/src/stylesAndAnimations/utilityClasses/UtilityClassesTable.tsx

@@ -101,8 +101,15 @@ export const UtilityClassesTable = () => {
 
       <Table
         columns={[
-          { name: 'Class Name', selector: (row) => row.className, sortable: true, width: '225px' },
           {
+            id: 'className',
+            name: 'Class Name',
+            selector: (row) => row.className,
+            sortable: true,
+            width: '225px',
+          },
+          {
+            id: 'cssApplied',
             name: 'CSS Applied',
             selector: (row) => formatCss(row.css),
             sortable: true,
@@ -119,6 +126,7 @@ export const UtilityClassesTable = () => {
             ),
           },
           {
+            id: 'resolvedCss',
             name: 'Resolved CSS',
             selector: (row) => formatCss(row.resolvedCss || ''),
             sortable: true,
@@ -134,7 +142,13 @@ export const UtilityClassesTable = () => {
               </pre>
             ),
           },
-          { name: 'Category', selector: (row) => row.category, sortable: true, width: '114px' },
+          {
+            id: 'category',
+            name: 'Category',
+            selector: (row) => row.category,
+            sortable: true,
+            width: '114px',
+          },
         ]}
         data={filteredData}
         dense