@indico-data/design-system 2.47.3 → 2.49.0

package/lib/components/index.d.ts

@@ -20,3 +20,4 @@ export { SingleInputDatePicker } from './forms/date/inputDatePicker';
 export { InputDateRangePicker } from './forms/date/inputDateRangePicker';
 export { Modal } from './modal';
 export { Badge } from './badge';
+export { Pagination } from './pagination';

package/lib/components/pagination/Pagination.d.ts

@@ -0,0 +1,2 @@
+import { PaginationProps } from './types';
+export declare const Pagination: ({ totalPages, currentPage, onChange, className, ...rest }: PaginationProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/pagination/Pagination.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Pagination } from './Pagination';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof Pagination>;
+export declare const Default: Story;

package/lib/components/pagination/__tests__/Pagination.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export { Pagination } from './Pagination';

package/lib/components/pagination/types.d.ts

@@ -0,0 +1,6 @@
+export interface PaginationProps {
+    totalPages: number;
+    currentPage?: number;
+    className?: string;
+    onChange?: (value: number) => void;
+}

package/lib/components/table/Table.stories.d.ts

@@ -5,3 +5,4 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof Table<SampleDataRow>>;
 export declare const Default: Story;
+export declare const PinnedColumns: Story;

package/lib/components/table/__tests__/Table.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/table/components/HorizontalStickyHeader.d.ts

@@ -0,0 +1,10 @@
+interface HorizontalStickyHeaderProps {
+    children: React.ReactNode;
+    position: number;
+    onPinColumn?: (columnId: string) => void;
+    isPinned?: boolean;
+    forceUpdate?: number;
+    pinnedColumnIds: string[];
+}
+declare const HorizontalStickyHeader: ({ children, position, onPinColumn, isPinned, pinnedColumnIds, }: HorizontalStickyHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default HorizontalStickyHeader;

package/lib/components/table/components/TablePagination.d.ts

@@ -0,0 +1,9 @@
+interface TablePaginationProps {
+    rowsPerPage: number;
+    rowCount: number;
+    onChangePage: (page: number, perPage: number) => void;
+    currentPage: number;
+    totalEntriesText?: string;
+}
+export declare const TablePagination: ({ rowsPerPage, rowCount, onChangePage, currentPage, totalEntriesText, }: TablePaginationProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/table/components/__tests__/HorizontalStickyHeader.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/table/components/__tests__/TablePagination.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/table/components/helpers.d.ts

@@ -0,0 +1,6 @@
+import { CSSObject } from 'styled-components';
+export declare const getPreviousHeadersWidth: (position: number, pinnedColumnIds: string[]) => number;
+export declare const applyStickyStylesToTableHeader: (position: number, left: number) => Promise<void>;
+export declare const sortPinnedColumns: <T>(columns: T[], pinnedColumnIds: string[]) => T[];
+export declare const getPinnedColumnStyles: (isPinned: boolean, index: number, pinnedColumnIds: string[]) => CSSObject;
+export declare const clearStickyStyles: (header: HTMLElement) => void;

package/lib/components/table/hooks/usePinnedColumnsManager.d.ts

@@ -0,0 +1,8 @@
+import { TableColumn } from '../types';
+/**
+ * Hook to manage pinned columns in a table
+ * Handles initialization, toggling, positioning and resizing of pinned columns
+ */
+export declare const usePinnedColumnsManager: <T>(columns: TableColumn<T>[], canPinColumns: boolean, onPinnedColumnsChange?: (pinnedColumnIds: string[]) => void) => {
+    columnsWithPinning: TableColumn<T>[];
+};

package/lib/components/table/sampleData.d.ts

@@ -1,3 +1,4 @@
+import { TableColumn } from './types';
 export interface SampleDataRow {
     name: string;
     class: string;
@@ -5,5 +6,10 @@ export interface SampleDataRow {
     weapon: string;
     backstory: string;
     favoriteMeal: string;
+    homeland: string;
+    alignment: string;
+    specialAbility: string;
+    test: string;
 }
 export declare const sampleData: SampleDataRow[];
+export declare const columns: TableColumn<SampleDataRow>[];

package/lib/components/table/types.d.ts

@@ -1,11 +1,22 @@
-import { TableProps as RDTTableProps, Direction as RDTDirection, Alignment as RDTAlignment, TableColumn as RDTTableColumn } from 'react-data-table-component';
+import { Direction as RDTDirection, Alignment as RDTAlignment, TableColumn as RDTTableColumn, IDataTableProps } from 'react-data-table-component';
+import { CSSObject } from 'styled-components';
 export type Direction = `${RDTDirection}`;
 export type Alignment = `${RDTAlignment}`;
-export type TableColumn<T> = RDTTableColumn<T>;
-export type TableProps<T> = Omit<RDTTableProps<T>, 'disabled' | 'progressPending' | 'direction' | 'subHeaderAlign'> & {
+export interface PinnableColumn<T> extends RDTTableColumn<T> {
+    id: string;
+    isPinned?: boolean;
+    style?: CSSObject;
+    position?: number;
+}
+export type TableColumn<T> = PinnableColumn<T>;
+export interface TableProps<T> extends Omit<IDataTableProps<T>, 'paginationComponent' | 'direction' | 'subHeaderAlign'> {
+    columns: TableColumn<T>[];
     isDisabled?: boolean;
     isLoading?: boolean;
     direction?: Direction;
-    subHeaderAlign?: Alignment;
+    subHeaderAlign?: 'left' | 'right' | 'center';
     isFullHeight?: boolean;
-};
+    totalEntriesText?: string;
+    canPinColumns?: boolean;
+    onPinnedColumnsChange?: (pinnedColumnIds: any[]) => void;
+}

package/lib/components/table/utils/processColumns.d.ts

@@ -0,0 +1,2 @@
+import { TableColumn } from '../types';
+export declare const processColumns: <T>(columns: TableColumn<T>[], pinnedColumnIds: string[], togglePinnedColumn: (id: string) => void) => TableColumn<T>[];

package/lib/index.css

@@ -803,6 +803,9 @@ a:hover,
   --pf-table-highlighted-color: var(--pf-primary-color);
   --pf-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3);
   --pf-table-font-size: var(--pf-font-size-body2);
+  --pf-table-pagination-background-color: var(--pf-primary-color-700);
+  --pf-table-pinned-column-border-color: var(--pf-primary-color-100);
+  --pf-table-pinned-column-background-color: var(--pf-table-background-color);
 }
 
 .table-loading {
@@ -817,7 +820,7 @@ a:hover,
 
 .table {
   border-radius: var(--pf-rounded);
-  border: var(--pf-border-sm) solid var(--pf-table-border-color);
+  background-color: var(--pf-table-background-color);
   /* Striped: alternating background */
   /* Checked: Precedence over striped */
   /* Highlighted: Precedence over checked */
@@ -833,16 +836,47 @@ a:hover,
   color: var(--pf-table-font-color);
   border-radius: var(--pf-rounded) !important;
   border: var(--pf-border-sm) solid var(--pf-table-border-color);
+  height: 100%;
+  scrollbar-width: thin;
+  scrollbar-color: var(--pf-table-border-color) var(--pf-table-background-color);
+}
+.table-body::-webkit-scrollbar {
+  width: var(--pf-size-2);
+  height: var(--pf-size-2);
+  cursor: pointer;
+}
+.table-body::-webkit-scrollbar-track {
+  background: var(--pf-table-background-color);
+  border-radius: var(--pf-rounded);
+  cursor: pointer;
+}
+.table-body::-webkit-scrollbar-thumb {
+  background: var(--pf-table-border-color);
+  border-radius: var(--pf-rounded);
+  cursor: pointer;
+}
+.table-body::-webkit-scrollbar-thumb:hover {
+  background: var(--pf-primary-color);
+}
+.table .table__column__pin-action {
+  padding: 0;
+  padding-right: var(--pf-padding-1);
+}
+.table .table__column--is-pinned {
+  opacity: 1;
+}
+.table .table__column--is-not-pinned {
+  opacity: 0.3;
+}
+.table .table__header-cell {
+  display: flex;
+  align-items: center;
 }
 .table > *:nth-child(3) {
   margin-top: auto;
   background-color: transparent;
   border: none;
 }
-.table > *:nth-child(3) .rdt_Pagination {
-  background-color: transparent;
-  border: none;
-}
 .table .rdt_Table,
 .table .rdt_TableRow,
 .table .rdt_TableCol,
@@ -853,8 +887,7 @@ a:hover,
 .table .rdt_TableHead,
 .table .rdt_TableHeadRow,
 .table .rdt_TableBody,
-.table .rdt_ExpanderRow,
-.table .rdt_Pagination {
+.table .rdt_ExpanderRow {
   background-color: var(--pf-table-background-color);
   color: var(--pf-table-font-color);
 }
@@ -864,26 +897,26 @@ a:hover,
 .table button:disabled svg {
   fill: var(--pf-table-disabled-button-color);
 }
+.table .rdt_TableHead {
+  z-index: 3;
+}
 .table .rdt_TableHeader {
   border-radius: var(--pf-rounded) 0;
-  border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
-}
-.table .rdt_TableHeadRow > :first-child,
-.table .rdt_TableRow > :first-child {
-  padding-left: var(--pf-padding-4);
-  min-width: 60px;
-  justify-content: left;
+  border: var(--pf-border-sm) solid var(--pf-table-border-color);
+  border-bottom: none;
 }
 .table .rdt_TableRow {
   border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
   border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
 }
+.table .rdt_TableRow:hover {
+  border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
+  border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
+  outline-color: var(--pf-table-border-color);
+}
 .table .rdt_TableRow:hover .rdt_TableCell {
   background-color: var(--pf-table-hover-color) !important;
 }
-.table .rdt_TableRow:first-child .rdt_TableCell {
-  border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
-}
 .table .rdt_TableCell,
 .table .rdt_TableCol {
   font-size: var(--pf-table-font-size);
@@ -892,6 +925,10 @@ a:hover,
 .table .rdt_TableCol:not(:first-child) {
   border-left: var(--pf-border-sm) solid var(--pf-table-border-color);
 }
+.table .rdt_TableCell:not(:last-of-type),
+.table .rdt_TableCol:not(:last-of-type) {
+  border-bottom-width: 0;
+}
 .table .table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell {
   background-color: var(--pf-table-stripe-color);
 }
@@ -908,6 +945,13 @@ a:hover,
   background-color: var(--pf-table-highlighted-color) !important;
 }
 
+.table__pagination {
+  padding-bottom: var(--pf-padding-4);
+  padding-top: var(--pf-padding-4);
+  background-color: var(--pf-table-pagination-background-color);
+  padding-left: var(--pf-padding-4);
+}
+
 .input {
   padding: 10px;
 }
@@ -1901,6 +1945,23 @@ form {
   text-align: right;
 }
 
+.pagination .form-control {
+  margin-bottom: 0;
+}
+
+.pagination__current-page {
+  max-width: 50px;
+}
+
+.pagination__current-page-input {
+  text-align: center;
+  font-weight: var(--pf-font-weight-heavy);
+}
+
+.pagination .pagination__current-page-input.has-error {
+  border-color: var(--pf-error-color);
+}
+
 :root [data-theme=light] {
   --pf-pill-primary-background-color: var(--pf-primary-color);
   --pf-pill-primary-font-color: var(--pf-white-color);

package/lib/index.d.ts

@@ -4,7 +4,8 @@ export * from '@floating-ui/react-dom';
 import React$1, { CSSProperties, MouseEventHandler, ReactElement } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ContainerProps, RowProps, ColProps } from 'react-grid-system';
-import { TableProps as TableProps$1, Direction as Direction$1, Alignment as Alignment$1 } from 'react-data-table-component';
+import { IDataTableProps, Direction as Direction$1, TableColumn as TableColumn$1 } from 'react-data-table-component';
+import { CSSObject } from 'styled-components';
 import { Props as Props$7 } from 'react-select';
 import { DateRange, OnSelectHandler, Mode, CustomComponents, Matcher, Formatters, MonthChangeEventHandler, DayEventHandler } from 'react-day-picker';
 
@@ -184,14 +185,24 @@ type SelectOption = {
 };
 
 type Direction = `${Direction$1}`;
-type Alignment = `${Alignment$1}`;
-type TableProps<T> = Omit<TableProps$1<T>, 'disabled' | 'progressPending' | 'direction' | 'subHeaderAlign'> & {
+interface PinnableColumn<T> extends TableColumn$1<T> {
+    id: string;
+    isPinned?: boolean;
+    style?: CSSObject;
+    position?: number;
+}
+type TableColumn<T> = PinnableColumn<T>;
+interface TableProps<T> extends Omit<IDataTableProps<T>, 'paginationComponent' | 'direction' | 'subHeaderAlign'> {
+    columns: TableColumn<T>[];
     isDisabled?: boolean;
     isLoading?: boolean;
     direction?: Direction;
-    subHeaderAlign?: Alignment;
+    subHeaderAlign?: 'left' | 'right' | 'center';
     isFullHeight?: boolean;
-};
+    totalEntriesText?: string;
+    canPinColumns?: boolean;
+    onPinnedColumnsChange?: (pinnedColumnIds: any[]) => void;
+}
 
 type PillSize = 'sm' | 'md' | 'lg';
 type PillColor = SemanticColor | 'neutral';

package/lib/index.esm.css

@@ -803,6 +803,9 @@ a:hover,
   --pf-table-highlighted-color: var(--pf-primary-color);
   --pf-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3);
   --pf-table-font-size: var(--pf-font-size-body2);
+  --pf-table-pagination-background-color: var(--pf-primary-color-700);
+  --pf-table-pinned-column-border-color: var(--pf-primary-color-100);
+  --pf-table-pinned-column-background-color: var(--pf-table-background-color);
 }
 
 .table-loading {
@@ -817,7 +820,7 @@ a:hover,
 
 .table {
   border-radius: var(--pf-rounded);
-  border: var(--pf-border-sm) solid var(--pf-table-border-color);
+  background-color: var(--pf-table-background-color);
   /* Striped: alternating background */
   /* Checked: Precedence over striped */
   /* Highlighted: Precedence over checked */
@@ -833,16 +836,47 @@ a:hover,
   color: var(--pf-table-font-color);
   border-radius: var(--pf-rounded) !important;
   border: var(--pf-border-sm) solid var(--pf-table-border-color);
+  height: 100%;
+  scrollbar-width: thin;
+  scrollbar-color: var(--pf-table-border-color) var(--pf-table-background-color);
+}
+.table-body::-webkit-scrollbar {
+  width: var(--pf-size-2);
+  height: var(--pf-size-2);
+  cursor: pointer;
+}
+.table-body::-webkit-scrollbar-track {
+  background: var(--pf-table-background-color);
+  border-radius: var(--pf-rounded);
+  cursor: pointer;
+}
+.table-body::-webkit-scrollbar-thumb {
+  background: var(--pf-table-border-color);
+  border-radius: var(--pf-rounded);
+  cursor: pointer;
+}
+.table-body::-webkit-scrollbar-thumb:hover {
+  background: var(--pf-primary-color);
+}
+.table .table__column__pin-action {
+  padding: 0;
+  padding-right: var(--pf-padding-1);
+}
+.table .table__column--is-pinned {
+  opacity: 1;
+}
+.table .table__column--is-not-pinned {
+  opacity: 0.3;
+}
+.table .table__header-cell {
+  display: flex;
+  align-items: center;
 }
 .table > *:nth-child(3) {
   margin-top: auto;
   background-color: transparent;
   border: none;
 }
-.table > *:nth-child(3) .rdt_Pagination {
-  background-color: transparent;
-  border: none;
-}
 .table .rdt_Table,
 .table .rdt_TableRow,
 .table .rdt_TableCol,
@@ -853,8 +887,7 @@ a:hover,
 .table .rdt_TableHead,
 .table .rdt_TableHeadRow,
 .table .rdt_TableBody,
-.table .rdt_ExpanderRow,
-.table .rdt_Pagination {
+.table .rdt_ExpanderRow {
   background-color: var(--pf-table-background-color);
   color: var(--pf-table-font-color);
 }
@@ -864,26 +897,26 @@ a:hover,
 .table button:disabled svg {
   fill: var(--pf-table-disabled-button-color);
 }
+.table .rdt_TableHead {
+  z-index: 3;
+}
 .table .rdt_TableHeader {
   border-radius: var(--pf-rounded) 0;
-  border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
-}
-.table .rdt_TableHeadRow > :first-child,
-.table .rdt_TableRow > :first-child {
-  padding-left: var(--pf-padding-4);
-  min-width: 60px;
-  justify-content: left;
+  border: var(--pf-border-sm) solid var(--pf-table-border-color);
+  border-bottom: none;
 }
 .table .rdt_TableRow {
   border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
   border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
 }
+.table .rdt_TableRow:hover {
+  border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
+  border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
+  outline-color: var(--pf-table-border-color);
+}
 .table .rdt_TableRow:hover .rdt_TableCell {
   background-color: var(--pf-table-hover-color) !important;
 }
-.table .rdt_TableRow:first-child .rdt_TableCell {
-  border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
-}
 .table .rdt_TableCell,
 .table .rdt_TableCol {
   font-size: var(--pf-table-font-size);
@@ -892,6 +925,10 @@ a:hover,
 .table .rdt_TableCol:not(:first-child) {
   border-left: var(--pf-border-sm) solid var(--pf-table-border-color);
 }
+.table .rdt_TableCell:not(:last-of-type),
+.table .rdt_TableCol:not(:last-of-type) {
+  border-bottom-width: 0;
+}
 .table .table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell {
   background-color: var(--pf-table-stripe-color);
 }
@@ -908,6 +945,13 @@ a:hover,
   background-color: var(--pf-table-highlighted-color) !important;
 }
 
+.table__pagination {
+  padding-bottom: var(--pf-padding-4);
+  padding-top: var(--pf-padding-4);
+  background-color: var(--pf-table-pagination-background-color);
+  padding-left: var(--pf-padding-4);
+}
+
 .input {
   padding: 10px;
 }
@@ -1901,6 +1945,23 @@ form {
   text-align: right;
 }
 
+.pagination .form-control {
+  margin-bottom: 0;
+}
+
+.pagination__current-page {
+  max-width: 50px;
+}
+
+.pagination__current-page-input {
+  text-align: center;
+  font-weight: var(--pf-font-weight-heavy);
+}
+
+.pagination .pagination__current-page-input.has-error {
+  border-color: var(--pf-error-color);
+}
+
 :root [data-theme=light] {
   --pf-pill-primary-background-color: var(--pf-primary-color);
   --pf-pill-primary-font-color: var(--pf-white-color);