@fattureincloud/fic-design-system 0.4.16 → 0.4.19

package/dist/common/hooks/useUpDownKeyNavigation.d.ts

@@ -0,0 +1,13 @@
+import { Dispatch, SetStateAction } from 'react';
+declare type Callback = (index: number) => void;
+declare type ReturnType = [number, Dispatch<SetStateAction<number>>, boolean];
+/**
+ * Manage the Up and Down key to scroll through lists/table rows/dropdown options
+ *
+ * @param selector A pattern used to select a single element and put the focus on it, must contain ":id"
+ * @param onClick Called when the user press enter and an index is selected
+ * @param maxIndex Max number of selectable items
+ * @param initialIndex Starting index, default -1 meaning that nothing is selected (can be 0 to preselected the first item)
+ */
+declare const useUpDownKeyNavigation: (containerSelector: string, rowSelector: string, isDisabled: boolean, onClick: Callback, maxIndex: number, initialIndex?: number) => ReturnType;
+export default useUpDownKeyNavigation;

package/dist/common/utils/dsUtils.d.ts

@@ -0,0 +1,3 @@
+export declare const isNumber: (n: number | string | undefined) => boolean;
+export declare const parseDimension: (d: number | string) => string;
+export declare const generateRandomId: () => string;

package/dist/components/dropdown/DropdownImpl.d.ts

@@ -1,3 +1,3 @@
 import { DropdownProps } from './types';
-declare const DropdownImpl: (props: DropdownProps) => JSX.Element;
+declare const DropdownImpl: ({ className, content, fullWidth, maxWidth, minWidthAsTrigger, placement, renderContent, renderTrigger, triggerStyles, title, forceOpen, disableArrowNavigation, maxHeight, isSmall, }: DropdownProps) => JSX.Element;
 export default DropdownImpl;

package/dist/components/dropdown/components/DefaultDropdown.d.ts

@@ -1,9 +1,14 @@
+import React from 'react';
 import { DropdownItemProps, DropdownProps } from '../types';
 interface Props {
+    closeDropdown: () => void;
+    componentId: string;
     content: DropdownItemProps[];
+    disableArrowNavigation: boolean;
     fullWidth: DropdownProps['fullWidth'];
     maxWidth: DropdownProps['maxWidth'];
-    closeDropdown: () => void;
+    rowHasFocus: boolean;
+    setHighlightedItem: React.Dispatch<React.SetStateAction<number>>;
 }
-declare const DefaultDropdown: ({ closeDropdown, content, fullWidth, maxWidth }: Props) => JSX.Element;
+declare const DefaultDropdown: ({ closeDropdown, componentId, content, fullWidth, maxWidth, rowHasFocus, setHighlightedItem, }: Props) => JSX.Element;
 export default DefaultDropdown;

package/dist/components/dropdown/components/Item.d.ts

@@ -1,9 +1,11 @@
-/// <reference types="react" />
 import { DropdownItemProps } from '../types';
 import { DropdownItemStyles } from '../utils';
-declare const Item: ({ active, className, icon, onClick, shortcut, text, isDisabled, ...rest }: DropdownItemProps) => JSX.Element;
+declare const Item: ({ active, className, componentId, icon, isDisabled, onClick, rowHasFocus, shortcut, text, ...rest }: DropdownItemProps & {
+    componentId?: string | undefined;
+    rowHasFocus?: boolean | undefined;
+}) => JSX.Element;
 export interface StyledItemProps extends Pick<DropdownItemProps, 'fullWidth' | 'maxWidth' | 'active' | 'isDisabled' | 'type'> {
-    hasAction: boolean;
+    rowHasFocus: boolean;
 }
 export declare const StyledItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, DropdownItemStyles & StyledItemProps, keyof DropdownItemStyles>;
 export default Item;

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

@@ -19,6 +19,9 @@ export declare type DropdownProps = {
     placement?: Placement;
     minWidthAsTrigger?: boolean;
     forceOpen?: boolean;
+    disableArrowNavigation?: boolean;
+    isSmall?: boolean;
+    maxHeight?: number;
 };
 export declare type DropdownItemType = 'default' | 'danger' | 'success' | 'warning' | 'link';
 export interface DropdownItemProps {
@@ -33,6 +36,7 @@ export interface DropdownItemProps {
     children?: React.ReactChild;
     isDisabled?: boolean;
     type?: DropdownItemType;
+    onMouseEnter?: () => void;
 }
 export interface UserListItemProps {
     img?: string;

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

@@ -9,7 +9,6 @@ export interface DropdownItemStyles {
     background: paletteColor;
     color: paletteColor;
     hoverBackground: paletteColor;
-    cursor: string;
 }
-export declare const getDropdownItemStyles: ({ theme, isDisabled, active, hasAction, type, }: GetDropdownItemStylesParams) => DropdownItemStyles;
+export declare const getDropdownItemStyles: ({ theme, isDisabled, active, type, }: GetDropdownItemStylesParams) => DropdownItemStyles;
 export {};

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

@@ -2,10 +2,12 @@
 interface Props {
     title: string;
     type: 'success' | 'error' | 'warning' | 'info';
-    description: string;
-    question: string;
+    description: string | JSX.Element;
+    question?: string;
     actionText: string;
+    cancelText?: string;
     onAction: () => void;
+    onCancel?: () => void;
     isOpen: boolean;
     setIsOpen: (state: boolean) => void;
     isSmall?: boolean;

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

@@ -24,6 +24,7 @@ export interface TableProps<T extends TableData> extends UseTableOptions<T> {
     bodyHeight?: number | string;
     headerHeight?: number | string;
     rowHeight?: number | string;
+    disableArrowNavigation?: boolean;
 }
 /**
  * Component Props:
@@ -45,9 +46,10 @@ export interface TableProps<T extends TableData> extends UseTableOptions<T> {
  * @param {boolean} isLoading Apply loading style to all cells
  * @param {object} actions Configuration to render actions column
  * @param {function} renderActions Used to customize actions column
- * @param {number|string} bodyHeight Set tbody height, default 300px (if number is provided is considered as measure in pixels)
- * @param {number|string} headerHeight Set thead and th height, default 40px (if number is provided is considered as measure in pixels)
- * @param {number|string} rowHeight Set row height, default 40px (if number is provided is considered as measure in pixels)
+ * @param {number|string} bodyHeight Set tbody height, default 300px
+ * @param {number|string} headerHeight Set thead and th height, default 40px
+ * @param {number|string} rowHeight Set row height, default 40px
+ * @param {boolean} disableArrowNavigation Used to turn off Up/Down row selection and Enter click
  */
-declare const Table: <T extends TableData>({ actions, bodyHeight, columns, data, EmptyPage, Footer, globalFilter: externalGlobalFilter, headerHeight, hideHeader, isLoading, manualPagination, noPagination, onRowClick, onScroll, onSelectionChange, onSort, preSelectAllRows, renderActions, rowHeight, selectableRows, sortable, withCheckbox, pageSize, }: TableProps<T>) => JSX.Element;
+declare const Table: <T extends TableData>({ actions, bodyHeight, columns, data, EmptyPage, Footer, globalFilter: externalGlobalFilter, headerHeight, hideHeader, isLoading, manualPagination, noPagination, onRowClick, onScroll, onSelectionChange, onSort, preSelectAllRows, renderActions, rowHeight, selectableRows, sortable, withCheckbox, pageSize, disableArrowNavigation, }: TableProps<T>) => JSX.Element;
 export default Table;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Row, UseTableInstanceProps } from 'react-table';
 import { TableData } from '../../types';
 interface Props<T extends TableData> {
@@ -6,8 +7,11 @@ interface Props<T extends TableData> {
     selectedRowsIds: string[];
     isLoading: boolean;
     onRowClick?: (row: Row<T>) => void;
-    rowHeight?: number | string;
+    rowHasFocus: boolean;
+    rowHeight: number | string;
     selectableRows?: boolean;
+    setHighlightedRow: React.Dispatch<React.SetStateAction<number>>;
+    tableId: string;
 }
-declare const TableBody: <T extends TableData>({ isLoading, onRowClick, prepareRow, rowHeight, rows, selectableRows, selectedRowsIds, }: Props<T>) => JSX.Element;
+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/TableBodyTr.d.ts

@@ -2,6 +2,7 @@ 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/tableParts/styled.d.ts

@@ -4,7 +4,7 @@ interface THeadProps {
 }
 export declare const THead: import("styled-components").StyledComponent<"thead", import("styled-components").DefaultTheme, THeadProps, never>;
 interface TableBodyProps {
-    bodyHeight?: number | string;
+    bodyHeight: number | string;
 }
 export declare const TBody: import("styled-components").StyledComponent<"tbody", import("styled-components").DefaultTheme, TableBodyProps, never>;
 export interface TrProps {

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/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/utils.d.ts

@@ -12,6 +12,5 @@ export interface TableBodyTrStyles {
     hoverBackground: paletteColor;
 }
 export declare const getTableBodyTrStyles: ({ theme, isDisabled, isSelected, }: GetTableBodyTrStylesParams) => TableBodyTrStyles;
-export declare const isNumber: (n: number | string | undefined) => boolean;
 export declare const getIdsFromRows: <T extends TableData>(rows: Row<T>[] | undefined) => string[];
 export {};

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import Spinner from 'common/components/Spinner';
 import { Accordion } from './components/accordions';
 import { Avatar } from './components/avatar';
 import { Badge, BadgeProps } from './components/badge';
@@ -39,4 +40,4 @@ import { Tooltip, TooltipPalette, TooltipProps } from './components/tooltip';
 import { autocompleteYellow } from './styles/defaultPalette/colors/others';
 import { Theme } from './styles/theme';
 import { Palette, paletteColor } from './styles/types';
-export { autocompleteYellow, paletteColor, Avatar, Banner, BannerProps, Button, ButtonProps, IconButton, IconButtonProps, Icon, IconProps, IconPalette, IconBackground, IconBackgroundPalette, Table, TableProps, TableData, useTableValues, Row, Column, TablePalette, RowActions, ManualPagination, OnSelectionChange, OnSort, Checkbox, useCheckboxValue, CheckboxProps, CheckboxPalette, checkboxStatus, Select, CreatableSelect, AsyncSelect, AsyncCreatableSelect, SelectProps, AsyncSelectProps, AsyncCreatableSelectProps, useSelectSimpleValue, isSimpleValue, simpleValue, CreatableSelectProps, useSelectValue, useSelectMultiValues, SelectPalette, SelectComponentsType, OptionType, PageEmptySet, Modal, ModalBody, ModalSearchable, Tooltip, TooltipProps, TooltipPalette, Accordion, Progressbar, Drawer, Chip, RadioButton, RadioButtonGroup, InlineMessage, Badge, BadgeProps, Dropdown, DropdownItemProps, DropdownPalette, closeDropdownType, renderContentType, DropdownTabs, ScrollableTabs, SidebarItem, sidebarItemHeight, SidebarItemPalette, SidebarItemProps, CustomSidebarItemProps, TabsItem, Stepper, StepperProps, StepperPalette, Tip, ShortcutTip, ThemeProvider, Theme, Palette, GroupedList, ItemType, GroupType, WithBadge, Pagination, Toast, ToastProps, ConfirmationModal, MicroTag, MicroTagProps, MicroTagPalette, Tag, TagProps, TagPalette, InputText, InputTextProps, InputTextPalette, UnitDropdownProps, DatePickerProps, DatePickerPalette, DatePicker, useFormattedDate, timeConversionOptions, InputHelper, InputHelperProps, InputHelperPalette, TextArea, TextAreaProps, TextAreaPalette, FileUploader, FileUploaderProps, FileUploaderPalette, FileRejection, fileUploaderOnDrop, };
+export { autocompleteYellow, paletteColor, Avatar, Banner, BannerProps, Button, ButtonProps, IconButton, IconButtonProps, Icon, IconProps, IconPalette, IconBackground, IconBackgroundPalette, Table, TableProps, TableData, useTableValues, Row, Column, TablePalette, RowActions, ManualPagination, OnSelectionChange, OnSort, Checkbox, useCheckboxValue, CheckboxProps, CheckboxPalette, checkboxStatus, Select, CreatableSelect, AsyncSelect, AsyncCreatableSelect, SelectProps, AsyncSelectProps, AsyncCreatableSelectProps, useSelectSimpleValue, isSimpleValue, simpleValue, CreatableSelectProps, useSelectValue, useSelectMultiValues, SelectPalette, SelectComponentsType, OptionType, PageEmptySet, Modal, ModalBody, ModalSearchable, Tooltip, TooltipProps, TooltipPalette, Accordion, Progressbar, Drawer, Chip, RadioButton, RadioButtonGroup, InlineMessage, Badge, BadgeProps, Dropdown, DropdownItemProps, DropdownPalette, closeDropdownType, renderContentType, DropdownTabs, ScrollableTabs, SidebarItem, sidebarItemHeight, SidebarItemPalette, SidebarItemProps, CustomSidebarItemProps, TabsItem, Stepper, StepperProps, StepperPalette, Tip, ShortcutTip, ThemeProvider, Theme, Palette, GroupedList, ItemType, GroupType, WithBadge, Pagination, Toast, ToastProps, ConfirmationModal, MicroTag, MicroTagProps, MicroTagPalette, Tag, TagProps, TagPalette, InputText, InputTextProps, InputTextPalette, UnitDropdownProps, DatePickerProps, DatePickerPalette, DatePicker, useFormattedDate, timeConversionOptions, InputHelper, InputHelperProps, InputHelperPalette, TextArea, TextAreaProps, TextAreaPalette, FileUploader, FileUploaderProps, FileUploaderPalette, FileRejection, fileUploaderOnDrop, Spinner, };