@fattureincloud/fic-design-system 0.10.1 → 0.10.2-tmp

package/dist/components/newTable/components/cell/customCell/CustomCell.d.ts

@@ -8,6 +8,8 @@ declare type Props<CellProps> = {
     rowSize?: RowSize;
     actionColumnWidth: number;
     onRowClick?: (row: Row<CellProps>) => void;
+    fixedWidthCells: boolean;
+    columnsBreakpointWidth: string;
 } & CustomCellProps & AccessorColumnDef<CellProps> & ActionColumnDef<CellProps> & AdditionalColumnDef<CellProps>;
-declare const CustomCell: <CellProps>({ content, isEditable, tag, unitSymbol, headline, leadingIcon, avatar, actionType, row, rowSize, onActionChange, isToggled, hover, onChange, trailingMicroTag, minWidth, rowActions, context, onRowClick, maxWidth, align, disableClick, actionColumnWidth, }: Props<CellProps>) => JSX.Element;
+declare const CustomCell: <CellProps>({ content, isEditable, tag, unitSymbol, headline, leadingIcon, avatar, actionType, row, rowSize, onActionChange, isToggled, hover, onChange, trailingMicroTag, minWidth, rowActions, context, onRowClick, maxWidth, align, disableClick, actionColumnWidth, fixedWidthCells, columnsBreakpointWidth, }: Props<CellProps>) => JSX.Element;
 export default CustomCell;

package/dist/components/newTable/components/cell/styled.d.ts

@@ -3,6 +3,8 @@ export declare const Td: import("styled-components").StyledComponent<"div", impo
     minWidth?: number | undefined;
     maxWidth?: number | undefined;
     align?: "center" | "left" | "right" | undefined;
+    fixedWidthCells: boolean;
+    columnsBreakpointWidth: string;
 }, never>;
 export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const LeadingIconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/newTable/components/header/Header.d.ts

@@ -17,6 +17,8 @@ interface HeaderProps<T> {
     onChangeTableSettings?: onChangeTableSettings;
     isLoading: boolean;
     actionColumnWidth: number;
+    fixedWidthCells: boolean;
+    columnsBreakpointWidth: string;
 }
-declare const Header: <T>({ headerGroup, headerSize, onSort, forceHideSettings, rowSelection, setRowSelection, preSettedTableSettings, onChangeTableSettings, notRemovableColumns, isLoading, actionColumnWidth, }: HeaderProps<T>) => JSX.Element;
+declare const Header: <T>({ headerGroup, headerSize, onSort, forceHideSettings, rowSelection, setRowSelection, preSettedTableSettings, onChangeTableSettings, notRemovableColumns, isLoading, actionColumnWidth, fixedWidthCells, columnsBreakpointWidth, }: HeaderProps<T>) => JSX.Element;
 export default Header;

package/dist/components/newTable/components/header/headerCell/HeaderCell.d.ts

@@ -15,6 +15,8 @@ interface HeaderCellProps<T> {
     onChangeTableSettings?: onChangeTableSettings;
     isLoading: boolean;
     actionColumnWidth: number;
+    fixedWidthCells: boolean;
+    columnsBreakpointWidth: string;
 }
-declare const HeaderCell: <T>({ header, headerSize, onSort, customSorted, setCustomSorted, forceHideSettings, rowSelection, setRowSelection, notRemovableColumns, dimensionRow, onChangeTableSettings, isLoading, actionColumnWidth, }: HeaderCellProps<T>) => JSX.Element;
+declare const HeaderCell: <T>({ header, headerSize, onSort, customSorted, setCustomSorted, forceHideSettings, rowSelection, setRowSelection, notRemovableColumns, dimensionRow, onChangeTableSettings, isLoading, actionColumnWidth, fixedWidthCells, columnsBreakpointWidth, }: HeaderCellProps<T>) => JSX.Element;
 export default HeaderCell;

package/dist/components/newTable/components/header/headerCell/styled.d.ts

@@ -6,6 +6,9 @@ export declare const Th: import("styled-components").StyledComponent<"div", impo
     maxWidth?: number | undefined;
     sortable: boolean;
     isActionColumn: boolean;
+    isCheckboxColumn: boolean;
+    fixedWidthCells: boolean;
+    columnsBreakpointWidth: string;
 }, never>;
 export declare const TextHeaderCellWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const ActionCell: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

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

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

@@ -4,3 +4,4 @@ export declare const ScrollableContent: import("styled-components").StyledCompon
 export declare const TableWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const SortIndicator: import("styled-components").StyledComponent<({ onClick, isDisabled, ...props }: import("../icon").IconProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
 export declare const PaginationContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const HeaderBodyWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -52,8 +52,9 @@ export interface TableProps<T> {
     notRemovableColumns?: string[];
     onChangeTableSettings?: onChangeTableSettings;
     actionColumnWidth?: number;
-    disableScrollX?: boolean;
     resetPageIndex?: boolean;
+    columnsBreakpointWidth?: string;
+    tableBreakpoint?: number;
 }
 export declare type onChangeTableSettings = (key: keyof PreSettedTableSettings, valueChange: Pick<PreSettedTableSettings, 'orderColumns' | 'dimensionRow' | 'notVisibleColumns'>) => void;
 export interface PreSettedTableSettings {

package/dist/index.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);
+    }
+}