@fattureincloud/fic-design-system 0.11.0 → 0.11.1

package/dist/components/table/components/pagination/PaginationButtons.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { UsePaginationInstanceProps } from 'react-table';
+import { TableData } from '../../types';
+interface Props<T extends TableData> {
+    pageCount: number;
+    pageIndex: number;
+    gotoPage: UsePaginationInstanceProps<T>['gotoPage'];
+}
+declare const PaginationButtons: <T extends TableData>({ pageCount, pageIndex, gotoPage }: Props<T>) => JSX.Element;
+export default PaginationButtons;

package/dist/components/table/components/pagination/utils.d.ts

@@ -0,0 +1,14 @@
+import { DefaultTheme } from 'styled-components';
+import { paletteColor } from '../../../../styles/types';
+import { PageButtonWrapperProps } from './PageButton';
+interface GetPageButtonParams extends PageButtonWrapperProps {
+    theme: DefaultTheme;
+}
+export interface PageButtonStyles {
+    color: paletteColor;
+    background: paletteColor;
+    hoverColor: paletteColor;
+    hoverBackground: paletteColor;
+}
+export declare const getPageButtonStyles: ({ theme, isActive }: GetPageButtonParams) => PageButtonStyles;
+export {};

package/dist/components/table/components/tableBody/TableBody.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Row, UseTableInstanceProps } from 'react-table';
+import { TableData } from '../../types';
+interface Props<T extends TableData> {
+    rows: Row<T>[];
+    prepareRow: UseTableInstanceProps<T>['prepareRow'];
+    selectedRowsIds: string[];
+    isLoading: boolean;
+    onRowClick?: (row: Row<T>) => void;
+    rowHasFocus: boolean;
+    rowHeight: number | string;
+    selectableRows?: boolean;
+    setHighlightedRow: React.Dispatch<React.SetStateAction<number>>;
+    tableId: string;
+}
+declare const TableBody: <T extends TableData>({ isLoading, onRowClick, prepareRow, rowHasFocus, rowHeight, rows, selectableRows, selectedRowsIds, setHighlightedRow, tableId, }: Props<T>) => JSX.Element;
+export default TableBody;

package/dist/components/table/components/tableBody/TableBodyLoader.d.ts

@@ -0,0 +1,7 @@
+import { ColumnInstance } from 'react-table';
+import { TableData } from '../../types';
+interface Props<T extends TableData> {
+    allColumns: ColumnInstance<T>[];
+}
+declare const TableBodyLoader: <T extends TableData>({ allColumns }: Props<T>) => JSX.Element;
+export default TableBodyLoader;

package/dist/components/table/components/tableBody/TableBodyTr.d.ts

@@ -0,0 +1,8 @@
+import { TableBodyTrStyles } from '../../utils';
+export interface TableBodyTrProps {
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    rowHasFocus: boolean;
+}
+declare const TableBodyTr: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, import("../tableParts/styled").TrProps & TableBodyTrStyles & TableBodyTrProps, keyof TableBodyTrStyles>;
+export default TableBodyTr;

package/dist/components/table/components/tableBody/styled.d.ts

@@ -0,0 +1,3 @@
+import { TableBodyTrStyles } from '../../utils';
+import { TableBodyTrProps } from '../TableBody';
+export declare const TableBodyTr: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, import("../tableParts/styled").TrProps & TableBodyTrStyles & TableBodyTrProps, keyof TableBodyTrStyles>;

package/dist/components/table/components/tableHeader/SortIndicator.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface Props {
+    isSorted: boolean;
+    isSortedDesc?: boolean;
+}
+declare const SortIndicator: ({ isSorted, isSortedDesc }: Props) => JSX.Element;
+export default SortIndicator;

package/dist/components/table/components/tableHeader/TableHeader.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { HeaderGroup, SortingRule } from 'react-table';
+import { TableData } from '../../types';
+interface Props<T extends TableData> {
+    scrollBar: number;
+    headerGroups: HeaderGroup<T>[];
+    headerHeight?: number | string;
+    selectedRowsIds?: string[];
+    sortBy: SortingRule<T>[];
+}
+declare const TableHeader: <T extends TableData>({ headerHeight, headerGroups, scrollBar }: Props<T>) => JSX.Element;
+export default TableHeader;

package/dist/components/table/components/tableParts/TableTd.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare type alignType = 'left' | 'center' | 'right';
+interface Props extends React.HTMLAttributes<HTMLTableDataCellElement> {
+    align?: alignType;
+    isLoading?: boolean;
+}
+export declare const TableTd: import("styled-components").StyledComponent<({ children, align, isLoading, ...rest }: Props) => JSX.Element, import("styled-components").DefaultTheme, Props, never>;
+export default TableTd;

package/dist/components/table/components/tableParts/TableTh.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type Props = React.HTMLAttributes<HTMLTableHeaderCellElement>;
+export declare const TableTh: import("styled-components").StyledComponent<({ children, ...rest }: Props) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export default TableTh;

package/dist/components/table/components/tableParts/styled.d.ts

@@ -0,0 +1,17 @@
+export declare const TableWrapper: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, {}, never>;
+interface THeadProps {
+    scrollBar: number;
+}
+export declare const THead: import("styled-components").StyledComponent<"thead", import("styled-components").DefaultTheme, THeadProps, never>;
+interface TableBodyProps {
+    bodyHeight: number | string;
+}
+export declare const TBody: import("styled-components").StyledComponent<"tbody", import("styled-components").DefaultTheme, TableBodyProps, never>;
+export interface TrProps {
+    isHeader?: boolean;
+    rowHeight?: number | string;
+    headerHeight?: number | string;
+}
+export declare const TableTr: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, TrProps, never>;
+export declare const TFoot: import("styled-components").StyledComponent<"tfoot", import("styled-components").DefaultTheme, {}, never>;
+export {};

package/dist/components/table/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_BODY_HEIGHT = 300;
+export declare const DEFAULT_ROW_HEIGHT = 40;

package/dist/components/table/hooks/useCheckboxesComponents.d.ts

@@ -0,0 +1,4 @@
+import { Hooks } from 'react-table';
+import { TableData } from '../types';
+declare const useCheckboxesComponents: <T extends TableData>(hooks: Hooks<T>) => void;
+export default useCheckboxesComponents;

package/dist/components/table/hooks/useRowsSelection.d.ts

@@ -0,0 +1,4 @@
+import { Row } from 'react-table';
+import { OnSelectionChange, TableData } from '../types';
+declare const useRowsSelection: <T extends TableData>(selectedFlatRows: Row<T>[], preSelectAllRows: boolean, onSelectionChange: OnSelectionChange<T> | undefined, allRows: Row<T>[]) => string[];
+export default useRowsSelection;

package/dist/components/table/hooks/useTableHooks.d.ts

@@ -0,0 +1,6 @@
+import { PluginHook } from 'react-table';
+import { TableProps } from '../Table';
+import { TableData } from '../types';
+declare type Props<T extends TableData> = Pick<TableProps<T>, 'actions' | 'withCheckbox' | 'renderActions' | 'selectableRows' | 'actionsHeader'>;
+declare const useTableHooks: <T extends TableData>({ actions, renderActions, withCheckbox, selectableRows, actionsHeader, }: Props<T>) => PluginHook<T>[];
+export default useTableHooks;

package/dist/components/table/hooks/useTableValues.d.ts

@@ -0,0 +1,14 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Row } from 'react-table';
+import { TableData } from '../types';
+interface Props {
+    initialFilter?: string;
+}
+interface ReturnType<DataType extends TableData> {
+    filter: string;
+    setFilter: Dispatch<SetStateAction<string>>;
+    selection: Row<DataType>[];
+    setSelection: Dispatch<SetStateAction<Row<DataType>[]>>;
+}
+declare const useTableValues: <DataType extends TableData>({ initialFilter }?: Props) => ReturnType<DataType>;
+export default useTableValues;

package/dist/components/table/index.d.ts

@@ -0,0 +1,7 @@
+import { Column, Row } from 'react-table';
+import useTableValues from './hooks/useTableValues';
+import Table from './Table';
+import { TableProps } from './Table';
+import tablePalette, { TablePalette } from './tablePalette';
+import { ManualPagination, OnSelectionChange, OnSort, RowActions, TableData } from './types';
+export { Table, TableProps, TableData, tablePalette, useTableValues, TablePalette, RowActions, ManualPagination, OnSelectionChange, OnSort, Row, Column, };

package/dist/components/table/stories/columns.d.ts

@@ -0,0 +1,3 @@
+import { Column } from 'react-table';
+import { DataType } from './components/types';
+export declare const columns: Column<DataType>[];

package/dist/components/table/stories/components/CustomPerson.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CustomPersonData } from './types';
+interface Props {
+    value: CustomPersonData;
+}
+declare const CustomPerson: ({ value: { img, name, role } }: Props) => JSX.Element;
+export default CustomPerson;

package/dist/components/table/stories/components/Role.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const rolesArray: readonly ["master", "admin", undefined];
+export declare type roleType = typeof rolesArray[number];
+interface Props {
+    role: roleType;
+}
+declare const Role: ({ role }: Props) => JSX.Element | null;
+export default Role;

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

@@ -0,0 +1,14 @@
+import { roleType } from './Role';
+export interface CustomPersonData {
+    img: string;
+    name: string;
+    role?: roleType;
+}
+export interface DataType {
+    person: CustomPersonData;
+    name: string;
+    address: string;
+    date: string;
+    order: number;
+    isDisabled?: boolean;
+}

package/dist/components/table/stories/data.d.ts

@@ -0,0 +1,2 @@
+import { DataType } from './components/types';
+export declare const getRandomUsers: (n: number) => DataType[];

package/dist/components/table/table.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, Story } from '@storybook/react';
+import { DataType } from './stories/components/types';
+import { TableProps } from './Table';
+export declare const Template: Story<TableProps<DataType>>;
+declare const TableStories: Meta<TableProps<DataType>>;
+export default TableStories;

package/dist/components/table/tablePalette.d.ts

@@ -0,0 +1,33 @@
+import { colorsPalette } from '../../common/types/colorsPalette';
+import { ButtonProps, IconButtonProps } from '../buttons';
+import { DropdownItemType } from '../dropdown/types';
+declare type TableHeaderPalette = colorsPalette;
+declare type rowStatus = 'normal' | 'hover' | 'selected' | 'disabled';
+declare type TableRowsPalette = {
+    [k in rowStatus]: colorsPalette;
+};
+interface SelectedRowsCountPalette extends colorsPalette {
+    resetButtonColor: ButtonProps['color'];
+}
+declare type paginationItemStatus = 'normal' | 'hover' | 'active';
+declare type PaginationPalette = {
+    numbers: {
+        [k in paginationItemStatus]: colorsPalette;
+    };
+    buttons: ButtonProps['color'];
+};
+declare type ActionsPalette = {
+    colors: {
+        [k in DropdownItemType]: ButtonProps['color'];
+    };
+    dropdownTriggerColor: IconButtonProps['color'];
+};
+export interface TablePalette {
+    header: TableHeaderPalette;
+    rows: TableRowsPalette;
+    selectedRowsCount: SelectedRowsCountPalette;
+    actions: ActionsPalette;
+    pagination: PaginationPalette;
+}
+declare const tablePalette: TablePalette;
+export default tablePalette;

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

@@ -0,0 +1,28 @@
+import { Row, SortingRule } from 'react-table';
+import { DropdownItemType } from '../dropdown/types';
+import { IconProps } from '../icon';
+export interface TableData {
+    isDisabled?: boolean;
+}
+export interface CustomColumn {
+    align?: 'left' | 'center' | 'right';
+}
+export interface RowActions<T extends TableData> {
+    primary?: RowAction<T>;
+    dropdown?: RowAction<T>[];
+}
+export interface RowAction<T extends TableData> {
+    icon?: IconProps;
+    type?: DropdownItemType;
+    text: string;
+    onClick: (row: Row<T>) => void;
+    isDisabled?: boolean;
+}
+interface ManualPaginationConfig {
+    pageCount: number;
+    setCurrentPage: (page: number) => void;
+}
+export declare type ManualPagination = ManualPaginationConfig | undefined;
+export declare type OnSort<T extends TableData> = (sortBy: Array<SortingRule<T>>) => void;
+export declare type OnSelectionChange<T extends TableData> = (rows: Row<T>[], addedRows: Row<T>[], removedRows: Row<T>[]) => void;
+export {};

package/dist/components/table/utils.d.ts

@@ -0,0 +1,16 @@
+import { Row, TableData } from 'index';
+import { DefaultTheme } from 'styled-components';
+import { paletteColor } from '../../styles/types';
+import { TableBodyTrProps } from './components/tableBody/TableBodyTr';
+interface GetTableBodyTrStylesParams extends TableBodyTrProps {
+    theme: DefaultTheme;
+}
+export interface TableBodyTrStyles {
+    background: paletteColor;
+    color: paletteColor;
+    hoverColor: paletteColor;
+    hoverBackground: paletteColor;
+}
+export declare const getTableBodyTrStyles: ({ theme, isDisabled, isSelected, }: GetTableBodyTrStylesParams) => TableBodyTrStyles;
+export declare const getIdsFromRows: <T extends TableData>(rows: Row<T>[] | undefined) => string[];
+export {};

package/dist/components/tip/components/styledTip.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledTip: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledLeftIcon: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCloseIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/toast/ToastContainer.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ToastContainerProps } from './typings/toast';
+export declare const ToastContainer: import("styled-components").StyledComponent<import("react").FC<import("react-toastify").ToastContainerProps>, import("styled-components").DefaultTheme, {
+    hideProgressBar: true;
+    newestOnTop: true;
+    closeOnClick: false;
+    draggable: false;
+    rtl: false;
+} & ToastContainerProps, "draggable" | "rtl" | "closeOnClick" | "newestOnTop" | "hideProgressBar">;

package/dist/components/toast/typings/toast.d.ts

@@ -0,0 +1,34 @@
+import React, { ReactNode } from 'react';
+import { ToastPosition } from 'react-toastify/dist/types';
+import { IconProps } from '../../icon';
+export declare type toastType = 'standard' | 'error' | 'info' | 'warning' | 'success';
+export declare type toastLibraryType = 'dark' | 'error' | 'info' | 'warning' | 'success';
+export declare const typeMap: Record<toastType, toastLibraryType>;
+export interface ToastProps {
+    type?: toastType;
+    content?: ReactNode;
+    icon?: IconProps;
+    actionLabel?: string;
+    onActionClick?: () => void;
+    autoClose?: false;
+}
+export interface ToastContentProps {
+    title: ReactNode;
+    content?: ReactNode;
+    icon: IconProps;
+    actionLabel?: string;
+    onActionClick?: () => void;
+}
+export interface ToastInterface {
+    Container: React.FC<ToastContainerProps>;
+    show: (title: ReactNode, options: ToastProps) => string | undefined;
+    dismiss: (toastId: string | undefined) => void;
+    success: (title: ReactNode, options?: ToastProps) => string | undefined;
+    error: (title: ReactNode, options?: ToastProps) => string | undefined;
+    info: (title: ReactNode, options?: ToastProps) => string | undefined;
+    warning: (title: ReactNode, options?: ToastProps) => string | undefined;
+    standard: (title: ReactNode, options?: ToastProps) => string | undefined;
+}
+export interface ToastContainerProps {
+    position: ToastPosition;
+}

package/dist/index.css

@@ -1,154 +1,128 @@
-:root {
-    --columns-breakpoint-width: 100px; /* default value */
-    --table-breakpoint: px100; /* relates to TableBreakpoints enum */
+.DS-ReactTable {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  overflow: hidden;
 }
 
-.Table-container {
-    container-type: inline-size;
-    container-name: var(--table-breakpoint);
+.DS-ReactTable .DS-rt-table {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  width: 100%;
+  border-collapse: collapse;
+  overflow-x: auto;
+  overflow-y: hidden;
 }
 
-/* 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);
-    }
+.DS-ReactTable .DS-rt-thead {
+  -webkit-box-flex: 1;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: default;
 }
 
-@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);
-    }
+.DS-ReactTable .DS-rt-thead .DS-rt-th {
+  position: relative;
 }
-
-@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);
-    }
+.DS-ReactTable .DS-rt-thead .DS-rt-td {
+  line-height: normal;
+  position: relative;
 }
 
-@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);
-    }
+.DS-ReactTable .DS-rt-thead .DS-rt-resizable-header:last-child {
+  overflow: hidden;
 }
-
-@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);
-    }
+.DS-ReactTable .DS-rt-thead .DS-rt-resizable-header-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-@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);
-    }
+.DS-ReactTable .DS-rt-thead.DS-header .DS-rt-th:after {
+  content: "";
+  display: block;
+  position: absolute;
 }
 
-@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);
-    }
+.DS-ReactTable .DS-rt-tbody {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
 }
 
-@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);
-    }
+.DS-ReactTable .DS-rt-tbody .DS-rt-tr-group {
+  flex: none;
 }
 
-@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);
-    }
+.DS-ReactTable .DS-rt-tr-group {
+  -webkit-box-flex: 1;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  cursor: pointer;
 }
 
-@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);
-    }
+.DS-ReactTable .DS-rt-tr {
+  flex: 1 0 auto;
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
 }
 
-@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);
-    }
+.DS-ReactTable .DS-rt-th {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  white-space: nowrap;
+  vertical-align: middle;
+  align-self: center;
+  overflow: hidden;
 }
 
-@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);
-    }
-}
+.DS-ReactTable .DS-rt-td {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  align-self: center;
+  overflow: hidden;
+}