@fattureincloud/fic-design-system 0.13.3 → 0.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/common/components/styled.d.ts +4 -0
- package/dist/common/hooks/useOutsideClick.d.ts +1 -1
- package/dist/common/types/misc.d.ts +1 -0
- package/dist/common/utils/dsUtils.d.ts +4 -1
- package/dist/components/accordion/accordion.d.ts +14 -0
- package/dist/components/accordion/accordion.stories.d.ts +6 -0
- package/dist/components/accordion/index.d.ts +2 -0
- package/dist/components/accordion/styled.d.ts +5 -0
- package/dist/components/accordion/types.d.ts +21 -0
- package/dist/components/buttons/button/Button.d.ts +4 -4
- package/dist/components/card/types.d.ts +1 -0
- package/dist/components/carousel/components/carouselMainMedia/styled.d.ts +3 -1
- package/dist/components/carousel/components/carouselThumbnails/styled.d.ts +3 -1
- package/dist/components/drawer/drawer.d.ts +2 -2
- package/dist/components/dropdown/DropdownImpl.d.ts +1 -1
- package/dist/components/dropdown/dropdown.stories.d.ts +1 -0
- package/dist/components/dropdown/styled.d.ts +2 -2
- package/dist/components/dropdown/types.d.ts +43 -33
- package/dist/components/form/inputText/components/UnitDropdown.d.ts +1 -1
- package/dist/components/form/select/components/LoadingIndicator.d.ts +3 -0
- package/dist/components/gridCard/GridCard.d.ts +4 -0
- package/dist/components/gridCard/gridCard.stories.d.ts +7 -0
- package/dist/components/gridCard/gridCardPalette.d.ts +3 -0
- package/dist/components/gridCard/index.d.ts +3 -0
- package/dist/components/gridCard/stories/data.d.ts +2 -0
- package/dist/components/gridCard/styled.d.ts +10 -0
- package/dist/components/gridCard/types.d.ts +21 -0
- package/dist/components/gridCard/utils.d.ts +2 -0
- package/dist/components/icon/utils.d.ts +1 -0
- package/dist/components/inlineMessage/styled.d.ts +1 -1
- package/dist/components/layout/sidebarItem/components/SidebarItemDropdown.d.ts +1 -1
- package/dist/components/layout/sidebarItem/styled.d.ts +1 -1
- package/dist/components/monthlyTab/styled.d.ts +1 -1
- package/dist/components/newTable/Table.d.ts +2 -2
- package/dist/components/newTable/components/action/settings/ColumnsSettings/styled.d.ts +2 -1
- package/dist/components/newTable/components/body/Body.d.ts +2 -2
- package/dist/components/newTable/components/cell/Cell.d.ts +5 -4
- package/dist/components/newTable/components/cell/customActionCell/CustomActionCell.d.ts +5 -4
- package/dist/components/newTable/components/cell/customActionCell/DropdownActionCell.d.ts +4 -3
- package/dist/components/newTable/components/cell/customActionCell/PrimaryActionCell.d.ts +3 -2
- package/dist/components/newTable/components/cell/customActionCell/styled.d.ts +1 -1
- package/dist/components/newTable/components/cell/customCell/CustomCell.d.ts +5 -4
- package/dist/components/newTable/components/header/Header.d.ts +5 -15
- package/dist/components/newTable/components/header/headerCell/ActionHeaderCell.d.ts +1 -1
- package/dist/components/newTable/components/row/Row.d.ts +2 -1
- package/dist/components/newTable/components/row/styled.d.ts +8 -5
- package/dist/components/newTable/types.d.ts +1 -1
- package/dist/components/pagination/Pagination.d.ts +2 -2
- package/dist/components/pagination/types.d.ts +7 -4
- package/dist/components/toast/components/ToastContent.d.ts +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.esm.js +9 -9
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +9 -9
- package/dist/index.js.map +1 -1
- package/dist/styles/theme.d.ts +2 -0
- package/dist/styles/types.d.ts +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare const FlexRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
2
|
+
gap?: number | undefined;
|
|
3
|
+
}, never>;
|
|
4
|
+
export declare const FlexColumn: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
declare const useOutsideClick: (ref: React.MutableRefObject<HTMLDivElement | null>, showComponent
|
|
2
|
+
declare const useOutsideClick: (ref: React.MutableRefObject<HTMLDivElement | null>, showComponent: boolean, closeAction: () => void, additionalRefs?: React.MutableRefObject<HTMLElement | null>[] | undefined) => void;
|
|
3
3
|
export default useOutsideClick;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Nullish } from '../types';
|
|
1
2
|
export declare const HEX_REGEX: RegExp;
|
|
2
3
|
export declare const isHexColor: (value: string) => boolean;
|
|
3
4
|
export declare const isNumber: (n: number | string | undefined) => boolean;
|
|
@@ -6,12 +7,14 @@ export declare const pixelToNumber: (s: string) => number;
|
|
|
6
7
|
export declare const generateRandomId: () => string;
|
|
7
8
|
export declare const stringToFloat: (n: string) => number;
|
|
8
9
|
export declare const isNumeric: (n: string) => boolean;
|
|
10
|
+
export declare const isset: <T>(value: Nullish<T>) => value is T;
|
|
9
11
|
/**
|
|
10
12
|
* Convert a number into italian currency value with euro symbol
|
|
11
13
|
* @param {number} number
|
|
12
14
|
* @returns {string} string
|
|
13
15
|
*/
|
|
14
16
|
export declare const currency: (number: number | string) => string;
|
|
15
|
-
export declare const isPaletteColor: (color: string) => color is "black" | "white" | "grey" | "blue" | "indigo" | "yellow" | "orange" | "red" | "green" | "fuchsia" | "pink" | "cyan" | "primary";
|
|
17
|
+
export declare const isPaletteColor: (color: string | null | undefined) => color is "black" | "white" | "grey" | "blue" | "indigo" | "yellow" | "orange" | "red" | "green" | "fuchsia" | "pink" | "cyan" | "primary";
|
|
16
18
|
export declare const isBWColor: (color: string) => color is "black" | "white";
|
|
17
19
|
export declare const isColor: (color: string) => color is "grey" | "blue" | "indigo" | "yellow" | "orange" | "red" | "green" | "fuchsia" | "pink" | "cyan" | "primary";
|
|
20
|
+
export declare const isBoolean: (value: unknown) => value is boolean;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { AccordionProps } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* @param open pass without setOpen to open by default
|
|
5
|
+
* @param setOpen pass only to control accordion opening/closing externally
|
|
6
|
+
* @param renderLateralActions
|
|
7
|
+
* @param renderTitle
|
|
8
|
+
* @param renderBody
|
|
9
|
+
* @param title
|
|
10
|
+
* @param lateralActions
|
|
11
|
+
* @constructor
|
|
12
|
+
*/
|
|
13
|
+
declare const Accordion: ({ open, setOpen, renderLateralActions, renderTitle, renderBody, title, lateralActions, }: AccordionProps) => JSX.Element;
|
|
14
|
+
export default Accordion;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { Meta, Story } from '@storybook/react';
|
|
2
|
+
import { ComponentProps } from 'react';
|
|
3
|
+
import { Accordion, AccordionProps } from '.';
|
|
4
|
+
export declare const Template: Story<AccordionProps>;
|
|
5
|
+
declare const AccordionStories: Meta<ComponentProps<typeof Accordion>>;
|
|
6
|
+
export default AccordionStories;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare const TitleContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
2
|
+
export declare const Title: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
3
|
+
export declare const ActionIcon: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
|
|
4
|
+
export declare const HeaderElement: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
5
|
+
export declare const Body: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare type AccordionProps = CommonAccordionProps & (OptionalAccordionProps | OptionalAccordionPropsRef);
|
|
3
|
+
interface CommonAccordionProps {
|
|
4
|
+
title?: string;
|
|
5
|
+
renderTitle?: () => JSX.Element;
|
|
6
|
+
renderBody: () => JSX.Element;
|
|
7
|
+
renderLateralActions?: JSX.Element;
|
|
8
|
+
lateralActions?: Array<{
|
|
9
|
+
icon: JSX.Element;
|
|
10
|
+
action: () => void;
|
|
11
|
+
}>;
|
|
12
|
+
}
|
|
13
|
+
interface OptionalAccordionProps {
|
|
14
|
+
open: boolean;
|
|
15
|
+
setOpen: (e: boolean) => void;
|
|
16
|
+
}
|
|
17
|
+
interface OptionalAccordionPropsRef {
|
|
18
|
+
open?: boolean;
|
|
19
|
+
setOpen?: never;
|
|
20
|
+
}
|
|
21
|
+
export {};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { ReactText } from 'react';
|
|
1
|
+
import React, { ReactText } from 'react';
|
|
2
2
|
import { IconProps } from '../../icon';
|
|
3
3
|
import { WrapperProps } from './types';
|
|
4
|
-
export interface ButtonProps extends Partial<WrapperProps> {
|
|
4
|
+
export interface ButtonProps extends Omit<Partial<WrapperProps>, 'ref'> {
|
|
5
5
|
text?: ReactText | JSX.Element;
|
|
6
6
|
iconLeft?: IconProps;
|
|
7
7
|
iconRight?: IconProps;
|
|
8
8
|
isLoading?: boolean;
|
|
9
9
|
}
|
|
10
|
-
declare const
|
|
11
|
-
export default
|
|
10
|
+
declare const _default: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
|
|
11
|
+
export default _default;
|
|
@@ -20,6 +20,7 @@ export declare enum CardElevation {
|
|
|
20
20
|
export declare type StyledCardProps = {
|
|
21
21
|
color?: CardColor;
|
|
22
22
|
elevation?: CardElevation;
|
|
23
|
+
outlined?: boolean;
|
|
23
24
|
type?: CardType;
|
|
24
25
|
};
|
|
25
26
|
export declare type CardProps = HTMLAttributes<HTMLDivElement> & StyledCardProps & {
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const Image: import("styled-components").StyledComponent<({ src, className, showVideoControls }: import("../common/media/Media").MediaProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
|
|
3
3
|
export declare const FullScreenButton: import("styled-components").StyledComponent<({ className, color, icon, isDisabled, onClick, type }: import("../../../buttons").IconButtonProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
|
|
4
|
-
export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
4
|
+
export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
5
|
+
gap?: number | undefined;
|
|
6
|
+
}, never>;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
2
|
+
export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
3
|
+
gap?: number | undefined;
|
|
4
|
+
}, never>;
|
|
3
5
|
export declare const CarouselThumbnailsWrapper: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {
|
|
4
6
|
mediaCount: number;
|
|
5
7
|
}, never>;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
2
|
export interface DrawerProps {
|
|
3
|
-
show
|
|
3
|
+
show: boolean;
|
|
4
4
|
title?: string;
|
|
5
5
|
renderHeader?: () => JSX.Element;
|
|
6
6
|
renderFooter?: () => JSX.Element;
|
|
7
|
-
actionClose
|
|
7
|
+
actionClose: () => void;
|
|
8
8
|
allowOutsideClickClose?: boolean;
|
|
9
9
|
children?: ReactNode;
|
|
10
10
|
fullscreen?: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { DropdownProps } from './types';
|
|
3
|
-
declare const DropdownImpl: ({ className, content, fullWidth,
|
|
3
|
+
declare const DropdownImpl: ({ className, content, disableArrowNavigation, emptyState, fullWidth, isDisabled, maxHeight, maxWidth, minWidthAsTrigger, offsetY, onClose, onOpen, open, outsideTriggers, placement, renderContent, renderTrigger, setOpen, sideButton, title, triggerStyles, withPadding, }: DropdownProps) => JSX.Element;
|
|
4
4
|
export default DropdownImpl;
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { Meta } from '@storybook/react';
|
|
3
3
|
import { DropdownProps } from './types';
|
|
4
4
|
export declare const Simple: () => JSX.Element;
|
|
5
|
+
export declare const WithExternalTrigger: () => JSX.Element;
|
|
5
6
|
export declare const WithKnobs: () => JSX.Element;
|
|
6
7
|
export declare const WithButton: () => JSX.Element;
|
|
7
8
|
declare const DropdownStories: Meta<DropdownProps>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const WithButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
3
|
-
export declare const LeftButton: import("styled-components").StyledComponent<(
|
|
4
|
-
export declare const RightButton: import("styled-components").StyledComponent<(
|
|
3
|
+
export declare const LeftButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../buttons").ButtonProps & import("react").RefAttributes<HTMLDivElement | HTMLAnchorElement>>, import("styled-components").DefaultTheme, {}, never>;
|
|
4
|
+
export declare const RightButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../buttons").ButtonProps & import("react").RefAttributes<HTMLDivElement | HTMLAnchorElement>>, import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Placement } from '@popperjs/core/lib/enums';
|
|
2
|
-
import React, { CSSProperties, MouseEventHandler, ReactNode } from 'react';
|
|
2
|
+
import React, { CSSProperties, Dispatch, MouseEventHandler, ReactNode, SetStateAction } from 'react';
|
|
3
3
|
import { ButtonProps } from '../buttons';
|
|
4
4
|
import { IconProps } from '../icon';
|
|
5
5
|
export declare type TitleProps = {
|
|
@@ -7,76 +7,86 @@ export declare type TitleProps = {
|
|
|
7
7
|
};
|
|
8
8
|
export declare type closeDropdownType = () => void;
|
|
9
9
|
export declare type renderContentType = (closeDropdown: closeDropdownType) => React.ReactNode;
|
|
10
|
-
|
|
10
|
+
declare type BaseProps = {
|
|
11
11
|
className?: string;
|
|
12
|
-
title?: string;
|
|
13
|
-
renderTrigger?: () => React.ReactNode;
|
|
14
|
-
triggerStyles?: CSSProperties;
|
|
15
12
|
content?: DropdownItemProps[];
|
|
16
|
-
renderContent?: renderContentType;
|
|
17
|
-
maxWidth?: string | number;
|
|
18
|
-
maxHeight?: string | number;
|
|
19
|
-
fullWidth?: boolean;
|
|
20
|
-
placement?: Placement;
|
|
21
|
-
minWidthAsTrigger?: boolean;
|
|
22
|
-
forceOpen?: boolean;
|
|
23
13
|
disableArrowNavigation?: boolean;
|
|
24
|
-
isDisabled?: boolean;
|
|
25
14
|
emptyState?: JSX.Element;
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
15
|
+
fullWidth?: boolean;
|
|
16
|
+
isDisabled?: boolean;
|
|
17
|
+
maxHeight?: string | number;
|
|
18
|
+
maxWidth?: string | number;
|
|
19
|
+
minWidthAsTrigger?: boolean;
|
|
29
20
|
offsetY?: number;
|
|
30
|
-
|
|
21
|
+
onClose?: (isOpen: boolean) => void;
|
|
22
|
+
onOpen?: (isOpen: boolean) => void;
|
|
23
|
+
placement?: Placement;
|
|
24
|
+
renderContent?: renderContentType;
|
|
25
|
+
renderTrigger?: () => React.ReactNode;
|
|
31
26
|
sideButton?: Pick<ButtonProps, 'text' | 'iconLeft' | 'iconRight' | 'onClick'>;
|
|
27
|
+
title?: string;
|
|
28
|
+
triggerStyles?: CSSProperties;
|
|
29
|
+
withPadding?: boolean;
|
|
30
|
+
};
|
|
31
|
+
declare type ControlledStateProps = BaseProps & {
|
|
32
|
+
open: boolean;
|
|
33
|
+
setOpen: Dispatch<SetStateAction<boolean>>;
|
|
34
|
+
outsideTriggers?: React.MutableRefObject<HTMLElement | null>[];
|
|
32
35
|
};
|
|
36
|
+
declare type UncontrolledStateProps = BaseProps & {
|
|
37
|
+
open?: never;
|
|
38
|
+
setOpen?: never;
|
|
39
|
+
outsideTriggers?: never;
|
|
40
|
+
};
|
|
41
|
+
export declare type DropdownProps = ControlledStateProps | UncontrolledStateProps;
|
|
33
42
|
export declare type DropdownItemType = 'default' | 'danger' | 'success' | 'warning' | 'link';
|
|
34
43
|
export interface DropdownItemProps {
|
|
35
|
-
text: string | JSX.Element;
|
|
36
|
-
className?: string;
|
|
37
|
-
icon?: IconProps;
|
|
38
44
|
active?: boolean;
|
|
39
|
-
shortcut?: string;
|
|
40
|
-
onClick?: MouseEventHandler;
|
|
41
|
-
maxWidth?: DropdownProps['maxWidth'];
|
|
42
|
-
fullWidth?: DropdownProps['fullWidth'];
|
|
43
45
|
children?: ReactNode;
|
|
46
|
+
className?: string;
|
|
47
|
+
fullWidth?: DropdownProps['fullWidth'];
|
|
48
|
+
icon?: IconProps;
|
|
44
49
|
isDisabled?: boolean;
|
|
45
|
-
type?: DropdownItemType;
|
|
46
|
-
onMouseEnter?: () => void;
|
|
47
50
|
label?: string;
|
|
51
|
+
maxWidth?: DropdownProps['maxWidth'];
|
|
52
|
+
onClick?: MouseEventHandler;
|
|
53
|
+
onMouseEnter?: () => void;
|
|
54
|
+
shortcut?: string;
|
|
55
|
+
text: string | JSX.Element;
|
|
56
|
+
type?: DropdownItemType;
|
|
48
57
|
}
|
|
49
58
|
export interface UserListItemProps {
|
|
50
|
-
img?: string;
|
|
51
|
-
placeholder?: string;
|
|
52
59
|
avatarSize?: number;
|
|
60
|
+
img?: string;
|
|
53
61
|
noText?: string;
|
|
54
|
-
text?: string;
|
|
55
|
-
renderText?: JSX.Element;
|
|
56
62
|
onClick?: () => void;
|
|
63
|
+
placeholder?: string;
|
|
64
|
+
renderText?: JSX.Element;
|
|
65
|
+
text?: string;
|
|
57
66
|
}
|
|
58
67
|
export interface Dropdown {
|
|
59
68
|
Container: React.FC<DropdownProps>;
|
|
60
69
|
Item: React.FC<DropdownItemProps>;
|
|
61
70
|
Separator: React.FC;
|
|
62
|
-
UserListItem: React.FC<UserListItemProps>;
|
|
63
71
|
Title: React.FC<TitleProps>;
|
|
72
|
+
UserListItem: React.FC<UserListItemProps>;
|
|
64
73
|
}
|
|
65
74
|
export interface DefaultDropdownProps {
|
|
66
75
|
closeDropdown: () => void;
|
|
67
76
|
componentId: string;
|
|
68
77
|
content: DropdownItemProps[];
|
|
69
78
|
disableArrowNavigation: boolean;
|
|
79
|
+
emptyState?: JSX.Element;
|
|
70
80
|
fullWidth: DropdownProps['fullWidth'];
|
|
71
81
|
maxWidth: DropdownProps['maxWidth'];
|
|
72
82
|
rowHasFocus: boolean;
|
|
73
83
|
setHighlightedItem: React.Dispatch<React.SetStateAction<number>>;
|
|
74
|
-
emptyState?: JSX.Element;
|
|
75
84
|
}
|
|
76
85
|
export interface DropdownTriggerProps {
|
|
77
|
-
title: string;
|
|
78
86
|
isDisabled?: boolean;
|
|
87
|
+
title: string;
|
|
79
88
|
}
|
|
80
89
|
export interface StyledItemProps extends Pick<DropdownItemProps, 'fullWidth' | 'maxWidth' | 'active' | 'isDisabled' | 'type'> {
|
|
81
90
|
rowHasFocus: boolean;
|
|
82
91
|
}
|
|
92
|
+
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { DropdownProps } from '../../../dropdown/types';
|
|
3
3
|
import { Unit } from './unitDropdown/UnitDropdownTrigger';
|
|
4
|
-
export interface UnitDropdownProps extends Pick<DropdownProps, 'renderContent' | 'placement' | 'className' | 'triggerStyles' | 'content' | 'maxWidth' | 'minWidthAsTrigger'
|
|
4
|
+
export interface UnitDropdownProps extends Pick<DropdownProps, 'renderContent' | 'placement' | 'className' | 'triggerStyles' | 'content' | 'maxWidth' | 'minWidthAsTrigger'> {
|
|
5
5
|
currentUnit: Unit;
|
|
6
6
|
}
|
|
7
7
|
declare const UnitDropdown: ({ currentUnit, ...dropdownProps }: UnitDropdownProps) => JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Meta, Story } from '@storybook/react';
|
|
2
|
+
import { ComponentProps } from 'react';
|
|
3
|
+
import { GridCard } from '.';
|
|
4
|
+
import { GridCardProps } from './types';
|
|
5
|
+
export declare const Template: Story<GridCardProps>;
|
|
6
|
+
declare const GridCardStories: Meta<ComponentProps<typeof GridCard>>;
|
|
7
|
+
export default GridCardStories;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const StyledGridCard: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("../card").StyledCardProps & {
|
|
3
|
+
children: import("react").ReactNode | import("react").ReactNode[];
|
|
4
|
+
} & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
|
|
5
|
+
export declare const GridCardContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
6
|
+
declare type GridCardItemProps = {
|
|
7
|
+
n: number;
|
|
8
|
+
};
|
|
9
|
+
export declare const GridCardItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridCardItemProps, never>;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { ComponentType } from '../../common/types';
|
|
3
|
+
import { paletteColor } from '../../styles/types';
|
|
4
|
+
import { IconProps } from '../icon';
|
|
5
|
+
export declare type GridCardProps = {
|
|
6
|
+
items: GridCardItem[];
|
|
7
|
+
maxElementsPerRow?: number;
|
|
8
|
+
};
|
|
9
|
+
export declare type GridCardPalette = {
|
|
10
|
+
[key in ComponentType]: {
|
|
11
|
+
background: paletteColor;
|
|
12
|
+
iconColor: paletteColor;
|
|
13
|
+
iconBackground: paletteColor;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
export declare type GridCardItem = {
|
|
17
|
+
type: ComponentType;
|
|
18
|
+
icon?: IconProps;
|
|
19
|
+
label?: string;
|
|
20
|
+
content: ReactNode;
|
|
21
|
+
};
|
|
@@ -4,5 +4,6 @@ import { IconColorPalette } from './iconPalette';
|
|
|
4
4
|
interface GetIconStylesParams extends IconProps {
|
|
5
5
|
theme: DefaultTheme;
|
|
6
6
|
}
|
|
7
|
+
export declare const isIconPaletteKey: (key: string, theme: DefaultTheme) => key is "black" | "white" | "grey" | "blue" | "indigo" | "yellow" | "orange" | "red" | "green" | "fuchsia" | "pink" | "cyan" | "primary";
|
|
7
8
|
export declare const getIconStyles: ({ theme, color }: GetIconStylesParams) => IconColorPalette;
|
|
8
9
|
export {};
|
|
@@ -8,4 +8,4 @@ export declare const StyledInlineMessageWrapper: import("styled-components").Sty
|
|
|
8
8
|
export declare const StyledIconContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledContentProps, never>;
|
|
9
9
|
export declare const StyledCloseIconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
10
10
|
export declare const StyledCloseIcon: import("styled-components").StyledComponent<({ onClick, isDisabled, ...props }: import("../icon").IconProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
|
|
11
|
-
export declare const ActionButton: import("styled-components").StyledComponent<(
|
|
11
|
+
export declare const ActionButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../buttons").ButtonProps & import("react").RefAttributes<HTMLDivElement | HTMLAnchorElement>>, import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { SidebarItemDropdownProps } from '../types';
|
|
3
|
-
declare const SidebarItemDropdown: ({ className, content
|
|
3
|
+
declare const SidebarItemDropdown: ({ className, content }: SidebarItemDropdownProps) => JSX.Element;
|
|
4
4
|
export default SidebarItemDropdown;
|
|
@@ -8,7 +8,7 @@ export interface WrapperProps {
|
|
|
8
8
|
withoutPadding: boolean;
|
|
9
9
|
}
|
|
10
10
|
export declare const sidebarItemHeight = 44;
|
|
11
|
-
export declare const Dropdown: import("styled-components").StyledComponent<({ className, content
|
|
11
|
+
export declare const Dropdown: import("styled-components").StyledComponent<({ className, content }: import("./types").SidebarItemDropdownProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
|
|
12
12
|
export declare const SidebarItemWrapper: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, SidebarItemStyles & WrapperProps, keyof SidebarItemStyles>;
|
|
13
13
|
export declare const Title: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
14
14
|
export declare const NoIcon: import("styled-components").StyledComponent<({ onClick, isDisabled, ...props }: import("../../icon").IconProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
3
3
|
export declare const MonthSelectionArea: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@viselect/react/dist/SelectionArea").SelectionAreaProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
4
|
-
export declare const SelectAllButton: import("styled-components").StyledComponent<(
|
|
4
|
+
export declare const SelectAllButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../buttons").ButtonProps & import("react").RefAttributes<HTMLDivElement | HTMLAnchorElement>>, import("styled-components").DefaultTheme, {}, never>;
|
|
5
5
|
export declare const TutorialText: import("styled-components").StyledComponent<({ children, type, ...otherProps }: import("../../common/components/typography/types").TextProps & import("react").HTMLAttributes<HTMLDivElement>) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -5,7 +5,7 @@ import { TableProps } from './types';
|
|
|
5
5
|
* @param {T[]} data Array of data to display
|
|
6
6
|
* @param {ColumnsType<T>[]} columns Columns configurations
|
|
7
7
|
* @param {boolean} isSelectable Allow to select rows
|
|
8
|
-
* @param {function}
|
|
8
|
+
* @param {function} onRowSelection Callback called when rows selection changes
|
|
9
9
|
* @param {function} onSort Callback called on column sort change
|
|
10
10
|
* @param {number[]} toggles Array of toggles index
|
|
11
11
|
* @param {function} onTogglesChange Callback called on toggles change
|
|
@@ -30,5 +30,5 @@ import { TableProps } from './types';
|
|
|
30
30
|
* @param {number} actionColumnWidth used to determine the width of the action column
|
|
31
31
|
* @param {function} isRowHighlighted used to underline table rows
|
|
32
32
|
*/
|
|
33
|
-
declare const Table: <T>({ data, columns, isSelectable, toggles, onTogglesChange, headerSize, isTogglesSortable, sortable, sortDescFirst, enableSettings, settingsDropdownConfig, rowActions, bulkActions, isLoading, allSelectedCTA, noPagination, pageSize: pageLength, listSize, paginationPreviousText, paginationNextText, onPaginationChange, uniqueId, onSort, renderEmptyState, onRowClick, bodyHeight, totalPages, rowHighlightColor, rowSelection, onRowSelection, forceHideSettings, renderBulkActions, preSettedTableSettings, onChangeTableSettings, notRemovableColumns, rowSize, actionColumnWidth, disableScrollX, resetPageIndex, isRowHighlighted, rowHighlightHideBorderBottom, }: TableProps<T>) => JSX.Element;
|
|
33
|
+
declare const Table: <T>({ data, columns, isSelectable, toggles, onTogglesChange, headerSize, isTogglesSortable, sortable, sortDescFirst, enableSettings, settingsDropdownConfig, rowActions, bulkActions, isLoading, allSelectedCTA, noPagination, pageSize: pageLength, listSize, paginationPreviousText, paginationNextText, onPaginationChange, uniqueId, onSort, renderEmptyState, onRowClick, bodyHeight, totalPages, rowHighlightColor, rowSelection, onRowSelection, forceHideSettings, renderBulkActions, preSettedTableSettings, onChangeTableSettings, notRemovableColumns, rowSize, actionColumnWidth, disableScrollX, resetPageIndex, isRowHighlighted, isRowDisabled, rowHighlightHideBorderBottom, }: TableProps<T>) => JSX.Element;
|
|
34
34
|
export default Table;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const CustomAccordion: import("styled-components").StyledComponent<({ open, setOpen, renderLateralActions, renderTitle, renderBody, title, lateralActions, }: import("../../../../../accordion").AccordionProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
|
|
2
3
|
export declare const Title: import("styled-components").StyledComponent<"h6", import("styled-components").DefaultTheme, {}, never>;
|
|
3
4
|
export declare const Body: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
4
5
|
export declare const Divider: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Row } from '@tanstack/react-table';
|
|
3
3
|
import { TableProps } from '../../types';
|
|
4
|
-
interface BodyProps<T> extends Pick<TableProps<T>, 'rowSize' | 'bodyHeight' | 'rowHighlightColor' | 'isRowHighlighted' | 'rowHighlightHideBorderBottom'> {
|
|
4
|
+
interface BodyProps<T> extends Pick<TableProps<T>, 'rowSize' | 'bodyHeight' | 'rowHighlightColor' | 'isRowHighlighted' | 'rowHighlightHideBorderBottom' | 'isRowDisabled'> {
|
|
5
5
|
rows: Row<T>[];
|
|
6
6
|
isLoading?: boolean;
|
|
7
7
|
onRowClick?: (row: Row<T>) => void;
|
|
@@ -9,5 +9,5 @@ interface BodyProps<T> extends Pick<TableProps<T>, 'rowSize' | 'bodyHeight' | 'r
|
|
|
9
9
|
actionColumnWidth: number;
|
|
10
10
|
disableScrollX?: boolean;
|
|
11
11
|
}
|
|
12
|
-
declare const Body: <T>({ rows, rowSize, isLoading, onRowClick, bodyHeight, rowHighlightColor, pageIndex, actionColumnWidth, disableScrollX, isRowHighlighted, rowHighlightHideBorderBottom, }: BodyProps<T>) => JSX.Element;
|
|
12
|
+
declare const Body: <T>({ rows, rowSize, isLoading, onRowClick, bodyHeight, rowHighlightColor, pageIndex, actionColumnWidth, disableScrollX, isRowHighlighted, isRowDisabled, rowHighlightHideBorderBottom, }: BodyProps<T>) => JSX.Element;
|
|
13
13
|
export default Body;
|
|
@@ -2,13 +2,14 @@
|
|
|
2
2
|
import { Cell as TCell, Row } from '@tanstack/react-table';
|
|
3
3
|
import { RowSize } from '../../types';
|
|
4
4
|
interface Props<T> {
|
|
5
|
+
actionColumnWidth: number;
|
|
5
6
|
cell: TCell<T, unknown>;
|
|
6
|
-
row: Row<T>;
|
|
7
7
|
hover?: boolean;
|
|
8
|
-
rowSize?: RowSize;
|
|
9
8
|
isLoading?: boolean;
|
|
9
|
+
disableRow: boolean;
|
|
10
10
|
onRowClick?: (row: Row<T>) => void;
|
|
11
|
-
|
|
11
|
+
row: Row<T>;
|
|
12
|
+
rowSize?: RowSize;
|
|
12
13
|
}
|
|
13
|
-
declare const Cell: <T>({ cell,
|
|
14
|
+
declare const Cell: <T>({ actionColumnWidth, cell, disableRow, hover, isLoading, onRowClick, row, rowSize, }: Props<T>) => JSX.Element;
|
|
14
15
|
export default Cell;
|
|
@@ -2,13 +2,14 @@
|
|
|
2
2
|
import { Column, Row } from '@tanstack/react-table';
|
|
3
3
|
import { ActionColumnDef, ActionType } from '../../../types';
|
|
4
4
|
interface Props<T> extends ActionColumnDef<T> {
|
|
5
|
-
|
|
5
|
+
actionColumnWidth: number;
|
|
6
6
|
actionType: ActionType;
|
|
7
|
-
isToggled?: boolean;
|
|
8
7
|
column: Column<T, unknown>;
|
|
8
|
+
disableRow: boolean;
|
|
9
|
+
isToggled?: boolean;
|
|
9
10
|
maxWidth?: number;
|
|
10
11
|
minWidth?: number;
|
|
11
|
-
|
|
12
|
+
row: Row<T>;
|
|
12
13
|
}
|
|
13
|
-
declare const CustomActionCell: <T>({ actionType,
|
|
14
|
+
declare const CustomActionCell: <T>({ actionColumnWidth, actionType, column, disableRow, isToggled, maxWidth, minWidth, onActionChange, row, rowActions, }: Props<T>) => JSX.Element;
|
|
14
15
|
export default CustomActionCell;
|
|
@@ -2,10 +2,11 @@
|
|
|
2
2
|
import { Row } from '@tanstack/react-table';
|
|
3
3
|
import { RowAction } from '../../../types';
|
|
4
4
|
interface Props<T> {
|
|
5
|
-
|
|
5
|
+
disableRow: boolean;
|
|
6
6
|
dropdown: RowAction<T>[];
|
|
7
|
-
onOpen?: (isOpen: boolean) => void;
|
|
8
7
|
onClose?: (isOpen: boolean) => void;
|
|
8
|
+
onOpen?: (isOpen: boolean) => void;
|
|
9
|
+
row: Row<T>;
|
|
9
10
|
}
|
|
10
|
-
declare const DropdownActionCell: <T>({ dropdown,
|
|
11
|
+
declare const DropdownActionCell: <T>({ disableRow, dropdown, onClose, onOpen, row }: Props<T>) => JSX.Element;
|
|
11
12
|
export default DropdownActionCell;
|
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
import { Row } from '@tanstack/react-table';
|
|
3
3
|
import { PrimaryAction } from '../../../types';
|
|
4
4
|
interface Props<T> {
|
|
5
|
-
|
|
5
|
+
disableRow: boolean;
|
|
6
6
|
primary: PrimaryAction<T>;
|
|
7
|
+
row: Row<T>;
|
|
7
8
|
}
|
|
8
|
-
declare const PrimaryActionCell: <T>({ primary, row }: Props<T>) => JSX.Element;
|
|
9
|
+
declare const PrimaryActionCell: <T>({ disableRow, primary, row }: Props<T>) => JSX.Element;
|
|
9
10
|
export default PrimaryActionCell;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const ActionCell: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
3
|
-
export declare const TextBtn: import("styled-components").StyledComponent<(
|
|
3
|
+
export declare const TextBtn: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../buttons").ButtonProps & import("react").RefAttributes<HTMLDivElement | HTMLAnchorElement>>, import("styled-components").DefaultTheme, {}, never>;
|
|
4
4
|
export declare const IconBtn: import("styled-components").StyledComponent<({ className, color, icon, isDisabled, onClick, type }: import("../../../../buttons").IconButtonProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -2,12 +2,13 @@
|
|
|
2
2
|
import { CellContext, Row } from '@tanstack/react-table';
|
|
3
3
|
import { AccessorColumnDef, ActionColumnDef, AdditionalColumnDef, CustomCellProps, RowSize } from '../../../types';
|
|
4
4
|
declare type Props<CellProps> = {
|
|
5
|
-
|
|
5
|
+
actionColumnWidth: number;
|
|
6
6
|
context: CellContext<CellProps, unknown>;
|
|
7
|
+
disableRow: boolean;
|
|
7
8
|
hover?: boolean;
|
|
8
|
-
rowSize?: RowSize;
|
|
9
|
-
actionColumnWidth: number;
|
|
10
9
|
onRowClick?: (row: Row<CellProps>) => void;
|
|
10
|
+
row: Row<CellProps>;
|
|
11
|
+
rowSize?: RowSize;
|
|
11
12
|
} & CustomCellProps & AccessorColumnDef<CellProps> & ActionColumnDef<CellProps> & AdditionalColumnDef<CellProps>;
|
|
12
|
-
declare const CustomCell: <CellProps>({
|
|
13
|
+
declare const CustomCell: <CellProps>({ actionColumnWidth, actionType, align, avatar, content, context, disableClick, disableRow, headline, hover, isEditable, isToggled, leadingIcon, maxWidth, minWidth, onActionChange, onChange, onRowClick, row, rowActions, rowSize, tag, trailingMicroTag, unitSymbol, }: Props<CellProps>) => JSX.Element;
|
|
13
14
|
export default CustomCell;
|
|
@@ -1,22 +1,12 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { HeaderGroup } from '@tanstack/react-table';
|
|
3
|
-
import {
|
|
4
|
-
interface HeaderProps<T> {
|
|
5
|
-
|
|
6
|
-
headerSize?: RowSize;
|
|
7
|
-
onSort?: OnSort<T>;
|
|
3
|
+
import { TableProps } from '../../types';
|
|
4
|
+
interface HeaderProps<T> extends Pick<TableProps<T>, 'isRowDisabled' | 'headerSize' | 'notRemovableColumns' | 'onChangeTableSettings' | 'onSort' | 'preSettedTableSettings' | 'rowSelection'> {
|
|
5
|
+
actionColumnWidth: number;
|
|
8
6
|
forceHideSettings: boolean;
|
|
9
|
-
|
|
10
|
-
setRowSelection?: (e: string[]) => void;
|
|
11
|
-
preSettedTableSettings?: {
|
|
12
|
-
orderColumns?: string[];
|
|
13
|
-
dimensionRow?: number;
|
|
14
|
-
notVisibleColumns?: string[];
|
|
15
|
-
};
|
|
16
|
-
notRemovableColumns?: string[];
|
|
17
|
-
onChangeTableSettings?: onChangeTableSettings;
|
|
7
|
+
headerGroup: HeaderGroup<T>[];
|
|
18
8
|
isLoading: boolean;
|
|
19
|
-
|
|
9
|
+
setRowSelection?: (e: string[]) => void;
|
|
20
10
|
}
|
|
21
11
|
declare const Header: <T>({ headerGroup, headerSize, onSort, forceHideSettings, rowSelection, setRowSelection, preSettedTableSettings, onChangeTableSettings, notRemovableColumns, isLoading, actionColumnWidth, }: HeaderProps<T>) => JSX.Element;
|
|
22
12
|
export default Header;
|