@fattureincloud/fic-design-system 0.7.6 → 0.7.8-tmp-scroll-table

package/dist/components/form/inputText/hooks/useCodeInputHooks.d.ts

@@ -7,5 +7,5 @@ declare type CodInputHooks = {
     setCurrentIndex: Dispatch<SetStateAction<number>>;
     values: (string | null)[];
 };
-declare const useCodeInputHooks: ({ fieldsCount, onChange, status, }: Omit<InputCodeProps, 'helper' | 'className'>) => CodInputHooks;
+declare const useCodeInputHooks: ({ allowLetters, fieldsCount, onChange, status, }: Omit<InputCodeProps, 'helper' | 'className'>) => CodInputHooks;
 export default useCodeInputHooks;

package/dist/components/form/inputText/types.d.ts

@@ -22,6 +22,7 @@ export declare type InputElementProps = CommonFormTypes & HTMLInputProps & {
     value?: number | string | null;
 };
 export declare type InputCodeProps = LabelProps & CommonFormTypes & Omit<HTMLInputProps, 'onChange'> & {
+    allowLetters?: boolean;
     fieldsCount: number;
     fieldsGap?: number;
     inputType?: 'code';

package/dist/components/modals/confirmationModal.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { buttonColors } from '../buttons/button/types';
 interface Props {
     title: string;
     type: 'success' | 'error' | 'warning' | 'info';
@@ -11,6 +12,7 @@ interface Props {
     isOpen: boolean;
     setIsOpen: (state: boolean) => void;
     isSmall?: boolean;
+    cancelColor?: buttonColors;
 }
 export declare const ConfirmationModal: (props: Props) => JSX.Element;
 export {};

package/dist/components/modals/stepModal/types.d.ts

@@ -8,6 +8,7 @@ export declare type StepModalCommonProps = {
     minHeight?: number;
     setIsOpen: (o: boolean) => void;
     setStep: (s: number) => void;
+    onActionClose?: () => void;
 };
 declare type StepModalComponent<T extends UknObj> = React.FunctionComponent<StepModalCommonProps & T>;
 declare type HasChildren = {

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

@@ -30,5 +30,5 @@ import { TableProps } from './types';
  * @param {function} renderEmptyState Render a custom empty state for the table's body
  * @param {function} onRowClick Callback called after a click on a row, returns the row
  */
-declare const Table: <T>({ data, columns, isSelectable, onRowSelectionChange, favorites, onFavoritesChange, toggles, onTogglesChange, rowSize, headerSize, isFavoritesSortable, isTogglesSortable, sortable, sortDescFirst, enableSettings, settingsDropdownConfig, rowActions, bulkActions, isLoading, allSelectedCTA, noPagination, pageSize: pageLength, listSize, paginationPreviousText, paginationNextText, onPaginationChange, uniqueId, onSort, renderEmptyState, onRowClick, }: TableProps<T>) => JSX.Element;
+declare const Table: <T>({ data, columns, isSelectable, onRowSelectionChange, favorites, onFavoritesChange, toggles, onTogglesChange, rowSize, headerSize, isFavoritesSortable, isTogglesSortable, sortable, sortDescFirst, enableSettings, settingsDropdownConfig, rowActions, bulkActions, isLoading, allSelectedCTA, noPagination, pageSize: pageLength, listSize, paginationPreviousText, paginationNextText, onPaginationChange, uniqueId, onSort, renderEmptyState, onRowClick, bodyHeight, totalPages, }: TableProps<T>) => JSX.Element;
 export default Table;

package/dist/components/newTable/components/body/Body.d.ts

@@ -1,11 +1,10 @@
 /// <reference types="react" />
 import { Row } from '@tanstack/react-table';
-import { CellProps } from 'react-table';
 import { TableProps } from '../../types';
-interface BodyProps<T> extends Pick<TableProps<T>, 'rowSize'> {
+interface BodyProps<T> extends Pick<TableProps<T>, 'rowSize' | 'bodyHeight'> {
     rows: Row<T>[];
     isLoading?: boolean;
-    onRowClick?: (row: Row<CellProps | T>) => void;
+    onRowClick?: (row: Row<T>) => void;
 }
-declare const Body: <T>({ rows, rowSize, isLoading, onRowClick }: BodyProps<T>) => JSX.Element;
+declare const Body: <T>({ rows, rowSize, isLoading, onRowClick, bodyHeight }: BodyProps<T>) => JSX.Element;
 export default Body;

package/dist/components/newTable/components/cell/customActionCell/CustomActionCell.d.ts

@@ -7,6 +7,8 @@ interface Props<T> extends ActionColumnDef<T> {
     isFavorite?: boolean;
     isToggled?: boolean;
     column: Column<T, unknown>;
+    maxWidth?: number;
+    minWidth?: number;
 }
-declare const CustomActionCell: <T>({ actionType, row, isFavorite, isToggled, onActionChange, rowActions, column, }: Props<T>) => JSX.Element;
+declare const CustomActionCell: <T>({ actionType, row, isFavorite, isToggled, onActionChange, rowActions, column, maxWidth, minWidth, }: Props<T>) => JSX.Element;
 export default CustomActionCell;

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

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

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

@@ -4,6 +4,6 @@ import { AccessorColumnDef, AdditionalColumnDef, CustomCellProps } from '../../.
 declare type CustomInputProps<CellProps> = {
     row: Row<CellProps>;
     hover?: boolean;
-} & CustomCellProps & Omit<AccessorColumnDef<CellProps>, 'isEditable'> & AdditionalColumnDef;
+} & CustomCellProps & Omit<AccessorColumnDef<CellProps>, 'isEditable'> & AdditionalColumnDef<CellProps>;
 declare const CustomInput: <CellProps>({ hover, onChange, row, unitSymbol, content, }: CustomInputProps<CellProps>) => JSX.Element;
 export default CustomInput;

package/dist/components/newTable/components/cell/hooks/useCellValues.d.ts

@@ -10,6 +10,7 @@ interface CellValues<T> {
     values: CustomCellProps;
     onActionChange?: (id: string) => void;
     minWidth?: number;
+    maxWidth?: number;
     rowActions?: RowActions<T>;
 }
 declare const useCellValues: <T>(cell: TCell<T, unknown>, row: Row<T>) => CellValues<T>;

package/dist/components/newTable/components/cell/loadingCell/LoadingCell.d.ts

@@ -2,6 +2,7 @@
 interface LoadingCellProps {
     isActionCell?: boolean;
     minWidth?: number;
+    maxWidth?: number;
 }
-declare const LoadingCell: ({ isActionCell, minWidth }: LoadingCellProps) => JSX.Element;
+declare const LoadingCell: ({ isActionCell, minWidth, maxWidth }: LoadingCellProps) => JSX.Element;
 export default LoadingCell;

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

@@ -1,6 +1,7 @@
-export declare const Td: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, {
+export declare const Td: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     cellHasOnClick: boolean;
     minWidth?: number | undefined;
+    maxWidth?: number | undefined;
 }, 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/headerCell/styled.d.ts

@@ -3,6 +3,7 @@ export declare const TextHeaderCell: import("styled-components").StyledComponent
 export declare const Th: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, {
     size?: RowSize | undefined;
     minWidth?: number | undefined;
+    maxWidth?: number | undefined;
     sortable: boolean;
 }, never>;
 export declare const TextHeaderCellWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/newTable/components/header/hooks/useHeaderValues.d.ts

@@ -8,6 +8,7 @@ interface HeaderValues<T> {
     isSorted: boolean;
     isSortedDesc: string | null;
     minWidth?: number;
+    maxWidth?: number;
     tooltip?: TooltipProps;
 }
 declare const useHeaderValues: <T>(header: Header<T, unknown>) => HeaderValues<T>;

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

@@ -1,5 +1,5 @@
 import { RowSize } from '../../types';
-export declare const TRow: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, {
+export declare const TRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     mouseHover?: boolean | undefined;
     size?: RowSize | undefined;
     selected?: boolean | undefined;

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

@@ -1,6 +1,7 @@
 import { CellProps } from '../types';
 export interface DataType {
     id: string;
+    customCell?: CellProps;
     supplier: CellProps;
     description: CellProps;
     payment: CellProps;

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

@@ -37,7 +37,9 @@ export interface TableProps<T> {
     paginationNextText?: string;
     onPaginationChange?: (pagination: PaginationState) => void;
     renderEmptyState?: () => JSX.Element;
-    onRowClick?: (row: Row<CellProps>) => void;
+    onRowClick?: (row: Row<T>) => void;
+    bodyHeight?: number;
+    totalPages?: number;
 }
 interface SettingsDropdownConfig {
     settingsTooltip?: TooltipProps;
@@ -85,26 +87,30 @@ export declare type ActionColumnDef<T> = {
     rowActions?: RowActions<T>;
     settingsDropdownConfig?: SettingsDropdownConfig;
 } & IdentifiedColumnDef<T, CellProps>;
-export declare type AdditionalColumnDef = {
+export declare type AdditionalColumnDef<T> = {
     unitSymbol?: string;
     minWidth?: number;
+    maxWidth?: number;
     headerTooltip?: TooltipProps;
+    customCell?: (row: Row<T>) => JSX.Element;
 };
 export declare type ColumnsType<T> = ({
     columnDefType: ColumnDefType.ACCESSOR;
-    columnDef: AccessorColumnDef<T> & AdditionalColumnDef;
+    columnDef: AccessorColumnDef<T> & AdditionalColumnDef<T>;
 } & BaseColumnsType<T>) | ({
     columnDefType: ColumnDefType.DISPLAY;
-    columnDef: DisplayColumnDef<T, unknown> & AdditionalColumnDef;
+    columnDef: DisplayColumnDef<T, unknown> & AdditionalColumnDef<T>;
 } & BaseColumnsType<T>) | ({
     columnDefType: ColumnDefType.ACTION;
-    columnDef: ActionColumnDef<T> & AdditionalColumnDef;
+    columnDef: ActionColumnDef<T> & AdditionalColumnDef<T>;
 } & BaseColumnsType<T>) | ({
     columnDefType: ColumnDefType.GROUP;
     columnDef: GroupColumnDef<T, unknown>;
 } & BaseColumnsType<T>);
 interface BaseColumnsType<T> {
     key: keyof T | Lowercase<keyof typeof ActionType>;
+    customCell?: () => JSX.Element;
+    maxWidth?: number;
 }
 interface CustomCellWithAvatar extends BasicCustomCell {
     avatar?: AvatarProps;

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

@@ -10,6 +10,7 @@ import { PaginationProps } from './types';
  * @param {number} currentPage Used to set the current page number
  * @param {string} prevText Define previous label text
  * @param {string} nextText Define next label text
+ * @param {number} totalPages Define number of pages
  */
 declare const Pagination: (props: PaginationProps) => JSX.Element;
 export default Pagination;

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

@@ -15,6 +15,7 @@ export declare type PaginationProps = {
     currentPage: number;
     prevText: string;
     nextText: string;
+    totalPages?: number;
 };
 declare type PaginationNumbersStatus = 'normal' | 'hover' | 'active';
 declare type PaginationButtonsStatus = 'normal' | 'disabled';

package/dist/index.css

@@ -0,0 +1,128 @@
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.DS-ReactTable .DS-rt-thead .DS-rt-th {
+  position: relative;
+}
+.DS-ReactTable .DS-rt-thead .DS-rt-td {
+  line-height: normal;
+  position: relative;
+}
+
+.DS-ReactTable .DS-rt-thead .DS-rt-resizable-header:last-child {
+  overflow: hidden;
+}
+.DS-ReactTable .DS-rt-thead .DS-rt-resizable-header-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.DS-ReactTable .DS-rt-thead.DS-header .DS-rt-th:after {
+  content: "";
+  display: block;
+  position: absolute;
+}
+
+.DS-ReactTable .DS-rt-tbody {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.DS-ReactTable .DS-rt-tbody .DS-rt-tr-group {
+  flex: none;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}

package/dist/index.esm.css

@@ -0,0 +1,128 @@
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.DS-ReactTable .DS-rt-thead .DS-rt-th {
+  position: relative;
+}
+.DS-ReactTable .DS-rt-thead .DS-rt-td {
+  line-height: normal;
+  position: relative;
+}
+
+.DS-ReactTable .DS-rt-thead .DS-rt-resizable-header:last-child {
+  overflow: hidden;
+}
+.DS-ReactTable .DS-rt-thead .DS-rt-resizable-header-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.DS-ReactTable .DS-rt-thead.DS-header .DS-rt-th:after {
+  content: "";
+  display: block;
+  position: absolute;
+}
+
+.DS-ReactTable .DS-rt-tbody {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.DS-ReactTable .DS-rt-tbody .DS-rt-tr-group {
+  flex: none;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}