plataforma-fundacao-componentes 2.26.4 → 2.26.6
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/assets/icons/Bell16Icon.d.ts +3 -0
- package/dist/assets/icons/BellIcon.d.ts +3 -0
- package/dist/assets/icons/PercentLoaderIcon.d.ts +5 -3
- package/dist/assets/icons/Settings16Icon.d.ts +3 -0
- package/dist/components/button/Button.d.ts +1 -2
- package/dist/components/checkbox/Checkbox.d.ts +3 -3
- package/dist/components/container/Container.d.ts +3 -3
- package/dist/components/dropdownMenu/DropdownMenu.d.ts +5 -10
- package/dist/components/floatingPanel/FloatingPanel.d.ts +17 -11
- package/dist/components/fullHeightContainer/FullHeightContainer.d.ts +2 -8
- package/dist/components/fullHeightContainer/FullHeightContainer.stories.d.ts +4 -4
- package/dist/components/iconButton/IconButton.d.ts +2 -10
- package/dist/components/input/Input.d.ts +1 -14
- package/dist/components/itemDropdownDownload/ItemDropdownDownload.d.ts +2 -8
- package/dist/components/notification/Notification.d.ts +5 -12
- package/dist/components/notification/Notification.stories.d.ts +7 -8
- package/dist/components/notificationPanel/NotificationPanel.d.ts +21 -0
- package/dist/components/notificationPanel/NotificationPanel.stories.d.ts +6 -0
- package/dist/components/tooltipElement/TooltipElement.d.ts +4 -2
- package/dist/components/typography/Typography.d.ts +1 -0
- package/dist/components/typography/Typography.stories.d.ts +1 -0
- package/dist/components/videoModal/VideoModal.d.ts +4 -4
- package/dist/hooks/useEvent/useEvent.d.ts +6 -0
- package/dist/hooks/useFloatingPanel/useFloatingPanel.d.ts +20 -0
- package/dist/hooks/useFloatingPanel/useFloatingPanel.stories.d.ts +8 -0
- package/dist/hooks/useSystemInfo/useSystemInfo.d.ts +6 -0
- package/dist/hooks/useSystemInfo/useSystemInfo.stories.d.ts +6 -0
- package/dist/index.css +237 -206
- package/dist/index.d.ts +11 -3
- package/dist/index.js +789 -672
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +786 -674
- package/dist/index.modern.js.map +1 -1
- package/dist/libraries/Notification.d.ts +1 -0
- package/dist/libraries/System.d.ts +19 -0
- package/package.json +1 -1
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { SVGProps } from 'react';
|
|
2
2
|
import './PercentLoaderIcon.scss';
|
|
3
|
-
|
|
3
|
+
interface PercentLoaderIconProps extends SVGProps<SVGSVGElement> {
|
|
4
4
|
value?: string | number;
|
|
5
5
|
hideCheck?: boolean;
|
|
6
6
|
indefinido?: boolean;
|
|
7
|
-
}
|
|
7
|
+
}
|
|
8
|
+
export declare const PercentLoaderIcon: ({ value, hideCheck, indefinido, className, ...props }: PercentLoaderIconProps) => React.JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -14,6 +14,5 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
14
14
|
loading?: boolean;
|
|
15
15
|
loader?: ReactNode | ThreeDotsProps;
|
|
16
16
|
}
|
|
17
|
-
declare
|
|
18
|
-
declare const _default: React.MemoExoticComponent<typeof Button>;
|
|
17
|
+
declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>>;
|
|
19
18
|
export default _default;
|
|
@@ -24,8 +24,7 @@ declare function Checkbox({ value, tag, onChange, theme, className, error, type,
|
|
|
24
24
|
'tooltip-position'?: TooltipPosition | undefined;
|
|
25
25
|
'tooltip-text'?: string | undefined;
|
|
26
26
|
disabled?: boolean | undefined;
|
|
27
|
-
|
|
28
|
-
color?: string | undefined;
|
|
27
|
+
children?: React.ReactNode;
|
|
29
28
|
form?: string | undefined;
|
|
30
29
|
formAction?: string | undefined;
|
|
31
30
|
formEncType?: string | undefined;
|
|
@@ -44,6 +43,7 @@ declare function Checkbox({ value, tag, onChange, theme, className, error, type,
|
|
|
44
43
|
dir?: string | undefined;
|
|
45
44
|
draggable?: boolean | "true" | "false" | undefined;
|
|
46
45
|
hidden?: boolean | undefined;
|
|
46
|
+
id?: string | undefined;
|
|
47
47
|
lang?: string | undefined;
|
|
48
48
|
nonce?: string | undefined;
|
|
49
49
|
placeholder?: string | undefined;
|
|
@@ -69,6 +69,7 @@ declare function Checkbox({ value, tag, onChange, theme, className, error, type,
|
|
|
69
69
|
autoCapitalize?: string | undefined;
|
|
70
70
|
autoCorrect?: string | undefined;
|
|
71
71
|
autoSave?: string | undefined;
|
|
72
|
+
color?: string | undefined;
|
|
72
73
|
itemProp?: string | undefined;
|
|
73
74
|
itemScope?: boolean | undefined;
|
|
74
75
|
itemType?: string | undefined;
|
|
@@ -131,7 +132,6 @@ declare function Checkbox({ value, tag, onChange, theme, className, error, type,
|
|
|
131
132
|
"aria-valuemin"?: number | undefined;
|
|
132
133
|
"aria-valuenow"?: number | undefined;
|
|
133
134
|
"aria-valuetext"?: string | undefined;
|
|
134
|
-
children?: React.ReactNode;
|
|
135
135
|
dangerouslySetInnerHTML?: {
|
|
136
136
|
__html: string | TrustedHTML;
|
|
137
137
|
} | undefined;
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { CSSProperties } from 'react';
|
|
2
2
|
import { TooltipPosition } from '../../libraries/Tooltips';
|
|
3
3
|
import './Container.scss';
|
|
4
4
|
interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
5
|
'tooltip-position'?: TooltipPosition;
|
|
6
6
|
'tooltip-text'?: string;
|
|
7
7
|
fluid?: boolean;
|
|
8
|
-
position?: '
|
|
8
|
+
position?: CSSProperties['position'];
|
|
9
9
|
verticalPadding?: boolean;
|
|
10
10
|
hasMobileButton?: boolean;
|
|
11
11
|
hasHeader?: boolean;
|
|
12
12
|
hasAdvancedHeader?: boolean;
|
|
13
13
|
}
|
|
14
|
-
declare function Container(props: ContainerProps): React.JSX.Element;
|
|
14
|
+
declare function Container({ position, fluid, verticalPadding, hasMobileButton, hasHeader, hasAdvancedHeader, className, style, ...props }: ContainerProps): React.JSX.Element;
|
|
15
15
|
declare namespace Container {
|
|
16
16
|
var defaultProps: Partial<ContainerProps>;
|
|
17
17
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import React, { HTMLAttributes } from 'react';
|
|
1
|
+
import React, { ComponentProps, HTMLAttributes } from 'react';
|
|
2
|
+
import FloatingPanel from '../floatingPanel/FloatingPanel';
|
|
2
3
|
import './DropdownMenu.scss';
|
|
3
4
|
export interface DropdownMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
|
|
4
5
|
opened?: boolean;
|
|
@@ -6,13 +7,7 @@ export interface DropdownMenuProps extends Omit<HTMLAttributes<HTMLDivElement>,
|
|
|
6
7
|
content?: React.ReactNode;
|
|
7
8
|
closeOnOutClick?: boolean;
|
|
8
9
|
closeOnEsc?: boolean;
|
|
9
|
-
panelProps?:
|
|
10
|
+
panelProps?: Partial<ComponentProps<typeof FloatingPanel>>;
|
|
11
|
+
removePadding?: boolean;
|
|
10
12
|
}
|
|
11
|
-
|
|
12
|
-
declare namespace DropdownMenu {
|
|
13
|
-
var defaultProps: {
|
|
14
|
-
closeOnOutClick: boolean;
|
|
15
|
-
closeOnEsc: boolean;
|
|
16
|
-
};
|
|
17
|
-
}
|
|
18
|
-
export default DropdownMenu;
|
|
13
|
+
export default function DropdownMenu({ opened, setOpened, content, closeOnEsc, closeOnOutClick, children, panelProps, removePadding, ...props }: DropdownMenuProps): React.JSX.Element;
|
|
@@ -1,17 +1,23 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Placement } from '@floating-ui/react';
|
|
2
|
+
import React, { HTMLAttributes } from 'react';
|
|
2
3
|
import './FloatingPanel.scss';
|
|
3
|
-
export interface FloatingPanelProps {
|
|
4
|
+
export interface FloatingPanelProps extends HTMLAttributes<HTMLDivElement> {
|
|
5
|
+
/**
|
|
6
|
+
* store your ref in state, like:
|
|
7
|
+
* const [ref, setRef] = useState<HTMLDivElement>();
|
|
8
|
+
* and
|
|
9
|
+
* <div ref={(e) => setRef(e)} />
|
|
10
|
+
*/
|
|
11
|
+
statedAnchorRef: HTMLElement | undefined | null;
|
|
4
12
|
opened: boolean;
|
|
5
13
|
setOpened: (evt: boolean) => void;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
declare function FloatingPanel(props: FloatingPanelProps): React.JSX.Element;
|
|
13
|
-
declare namespace FloatingPanel {
|
|
14
|
-
var defaultProps: Partial<FloatingPanelProps>;
|
|
14
|
+
matchWidth?: boolean;
|
|
15
|
+
placement?: Placement;
|
|
16
|
+
fallbackPlacements?: Placement[];
|
|
17
|
+
offset?: number;
|
|
18
|
+
closeOnOutClick?: boolean;
|
|
19
|
+
closeOnEsc?: boolean;
|
|
15
20
|
}
|
|
21
|
+
declare function FloatingPanel({ opened, setOpened, className, statedAnchorRef, matchWidth, placement, closeOnEsc, closeOnOutClick, style, fallbackPlacements, offset, ...props }: FloatingPanelProps): React.JSX.Element;
|
|
16
22
|
declare const _default: React.MemoExoticComponent<typeof FloatingPanel>;
|
|
17
23
|
export default _default;
|
|
@@ -2,17 +2,11 @@ import React from 'react';
|
|
|
2
2
|
import './FullHeightContainer.scss';
|
|
3
3
|
interface FullHeightContainerProps {
|
|
4
4
|
header?: React.ReactNode;
|
|
5
|
-
|
|
5
|
+
footer?: React.ReactNode;
|
|
6
6
|
verticalPadding?: boolean;
|
|
7
7
|
horizontalPadding?: boolean;
|
|
8
8
|
children?: React.ReactNode;
|
|
9
9
|
}
|
|
10
|
-
declare function FullHeightContainer(props: FullHeightContainerProps): React.JSX.Element;
|
|
11
|
-
declare namespace FullHeightContainer {
|
|
12
|
-
var defaultProps: {
|
|
13
|
-
verticalPadding: boolean;
|
|
14
|
-
horizontalPadding: boolean;
|
|
15
|
-
};
|
|
16
|
-
}
|
|
10
|
+
declare function FullHeightContainer({ header, footer, ...props }: FullHeightContainerProps): React.JSX.Element;
|
|
17
11
|
declare const _default: React.MemoExoticComponent<typeof FullHeightContainer>;
|
|
18
12
|
export default _default;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export default
|
|
2
|
+
import FullHeightContainer from './FullHeightContainer';
|
|
3
|
+
import { Meta } from '@storybook/react';
|
|
4
|
+
declare const meta: Meta<typeof FullHeightContainer>;
|
|
5
|
+
export default meta;
|
|
6
6
|
export declare const FirstExample: () => React.JSX.Element;
|
|
7
7
|
export declare const NoContentExample: () => React.JSX.Element;
|
|
8
8
|
export declare const ContainerExample: () => React.JSX.Element;
|
|
@@ -2,7 +2,7 @@ import React, { ButtonHTMLAttributes } from 'react';
|
|
|
2
2
|
import { IconButtonType } from '../../libraries/IconButtonTheme';
|
|
3
3
|
import { TooltipPosition } from '../../libraries/Tooltips';
|
|
4
4
|
import './IconButton.scss';
|
|
5
|
-
export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
5
|
+
export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
|
|
6
6
|
'tooltip-position'?: TooltipPosition;
|
|
7
7
|
'tooltip-text'?: string;
|
|
8
8
|
icon?: string | React.ReactNode;
|
|
@@ -10,13 +10,5 @@ export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
|
|
|
10
10
|
disabled?: boolean;
|
|
11
11
|
className?: string;
|
|
12
12
|
}
|
|
13
|
-
declare
|
|
14
|
-
declare namespace IconButton {
|
|
15
|
-
var defaultProps: {
|
|
16
|
-
theme: string;
|
|
17
|
-
disabled: boolean;
|
|
18
|
-
icon: string;
|
|
19
|
-
};
|
|
20
|
-
}
|
|
21
|
-
declare const _default: React.MemoExoticComponent<typeof IconButton>;
|
|
13
|
+
declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>>;
|
|
22
14
|
export default _default;
|
|
@@ -14,18 +14,5 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
|
14
14
|
hideLabelAndHelperText?: boolean;
|
|
15
15
|
forceFocus?: boolean;
|
|
16
16
|
}
|
|
17
|
-
declare
|
|
18
|
-
declare namespace Input {
|
|
19
|
-
var defaultProps: {
|
|
20
|
-
value: string;
|
|
21
|
-
loading: boolean;
|
|
22
|
-
error: boolean;
|
|
23
|
-
helperText: string;
|
|
24
|
-
label: string;
|
|
25
|
-
placeholder: string;
|
|
26
|
-
type: string;
|
|
27
|
-
forceFocus: boolean;
|
|
28
|
-
};
|
|
29
|
-
}
|
|
30
|
-
declare const _default: React.MemoExoticComponent<typeof Input>;
|
|
17
|
+
declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLDivElement>>>;
|
|
31
18
|
export default _default;
|
|
@@ -12,14 +12,8 @@ export interface ItemDropdownDownloadProps extends ButtonHTMLAttributes<HTMLButt
|
|
|
12
12
|
setOpened: (val: boolean) => void;
|
|
13
13
|
closeOnOutClick: boolean;
|
|
14
14
|
closeOnEsc: boolean;
|
|
15
|
-
downloads
|
|
16
|
-
}
|
|
17
|
-
declare function ItemDropdownDownload(props: ItemDropdownDownloadProps): React.JSX.Element;
|
|
18
|
-
declare namespace ItemDropdownDownload {
|
|
19
|
-
var defaultProps: {
|
|
20
|
-
closeOnOutClick: boolean;
|
|
21
|
-
closeOnEsc: boolean;
|
|
22
|
-
};
|
|
15
|
+
downloads?: DownloadItem[];
|
|
23
16
|
}
|
|
17
|
+
declare function ItemDropdownDownload({ label, opened, setOpened, closeOnOutClick, closeOnEsc, downloads, ...props }: ItemDropdownDownloadProps): React.JSX.Element;
|
|
24
18
|
declare const _default: React.MemoExoticComponent<typeof ItemDropdownDownload>;
|
|
25
19
|
export default _default;
|
|
@@ -1,22 +1,15 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
2
|
import { NotificationPosition, NotificationType } from '../../libraries/Notification';
|
|
3
3
|
import './Notification.scss';
|
|
4
4
|
interface NotificationProps {
|
|
5
5
|
position?: NotificationPosition;
|
|
6
6
|
type?: NotificationType;
|
|
7
|
-
count?: number;
|
|
7
|
+
count?: number | boolean | ReactNode;
|
|
8
|
+
bordered?: boolean;
|
|
8
9
|
verticalOuter?: number;
|
|
9
10
|
horizontalOuter?: number;
|
|
10
11
|
className?: string;
|
|
11
12
|
children: React.ReactNode;
|
|
12
13
|
}
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
var defaultProps: {
|
|
16
|
-
type: NotificationType;
|
|
17
|
-
position: NotificationPosition;
|
|
18
|
-
verticalOuter: number;
|
|
19
|
-
horizontalOuter: number;
|
|
20
|
-
};
|
|
21
|
-
}
|
|
22
|
-
export default Notification;
|
|
14
|
+
export default function Notification({ className, bordered, position, type, verticalOuter, horizontalOuter, ...props }: NotificationProps): React.JSX.Element;
|
|
15
|
+
export {};
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
2
|
import Notification from './Notification';
|
|
3
|
-
declare const
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
export
|
|
8
|
-
export declare const
|
|
9
|
-
export declare const ExclamationPoint: () => React.JSX.Element;
|
|
3
|
+
declare const meta: Meta<typeof Notification>;
|
|
4
|
+
export default meta;
|
|
5
|
+
declare type Story = StoryObj<typeof Notification>;
|
|
6
|
+
export declare const CountNumber: Story;
|
|
7
|
+
export declare const CountBoolean: Story;
|
|
8
|
+
export declare const CountStringNode: Story;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React, { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
import './NotificationPanel.scss';
|
|
3
|
+
declare type Notification = {
|
|
4
|
+
alert?: boolean;
|
|
5
|
+
title: string;
|
|
6
|
+
text?: string;
|
|
7
|
+
date?: string;
|
|
8
|
+
onClick: HTMLAttributes<HTMLDivElement>['onClick'];
|
|
9
|
+
};
|
|
10
|
+
export interface NotificationPanelProps {
|
|
11
|
+
children: ReactNode;
|
|
12
|
+
opened: boolean;
|
|
13
|
+
setOpened: (opened: boolean) => void;
|
|
14
|
+
notifications?: Notification[];
|
|
15
|
+
title?: ReactNode;
|
|
16
|
+
settingsButton?: ReactNode;
|
|
17
|
+
paginator?: ReactNode;
|
|
18
|
+
loading?: boolean;
|
|
19
|
+
}
|
|
20
|
+
export default function NotificationPanel({ opened, setOpened, children: icon, notifications, title, settingsButton, loading, paginator, }: NotificationPanelProps): React.JSX.Element;
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import NotificationPanel from './NotificationPanel';
|
|
3
|
+
declare const meta: Meta<typeof NotificationPanel>;
|
|
4
|
+
export default meta;
|
|
5
|
+
declare type Story = StoryObj<typeof NotificationPanel>;
|
|
6
|
+
export declare const Primary: Story;
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { Placement } from '@floating-ui/react';
|
|
2
|
-
import React, { ReactNode } from 'react';
|
|
2
|
+
import React, { HTMLAttributes, ReactNode } from 'react';
|
|
3
|
+
import './TooltipElement.scss';
|
|
3
4
|
export interface iTooltip {
|
|
4
5
|
label?: ReactNode;
|
|
5
6
|
placement?: Placement;
|
|
6
7
|
fallbackPlacements?: Placement[];
|
|
7
8
|
children?: ReactNode;
|
|
9
|
+
wrapperProps?: HTMLAttributes<HTMLDivElement>;
|
|
8
10
|
}
|
|
9
|
-
export default function TooltipElement({ label, placement, fallbackPlacements, children, }: iTooltip): React.JSX.Element;
|
|
11
|
+
export default function TooltipElement({ label, placement, fallbackPlacements, wrapperProps, children, }: iTooltip): React.JSX.Element;
|
|
@@ -11,9 +11,7 @@ interface VideoModalProps extends Omit<ModalProps, omit> {
|
|
|
11
11
|
declare function VideoModal({ className, id, mobileOn, modalKey, onClose, preventEscExit, preventMaskExit, size, tag, urlVideo, videoPlayerProps, ...props }: VideoModalProps): React.DetailedReactHTMLElement<{
|
|
12
12
|
id: string;
|
|
13
13
|
className: string;
|
|
14
|
-
|
|
15
|
-
onClick?: ((event: React.MouseEvent<HTMLDialogElement, MouseEvent>) => void) | undefined;
|
|
16
|
-
onChange?: ((event: React.FormEvent<HTMLDialogElement>) => void) | undefined;
|
|
14
|
+
children?: React.ReactNode;
|
|
17
15
|
defaultChecked?: boolean | undefined;
|
|
18
16
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
19
17
|
suppressContentEditableWarning?: boolean | undefined;
|
|
@@ -49,6 +47,7 @@ declare function VideoModal({ className, id, mobileOn, modalKey, onClose, preven
|
|
|
49
47
|
autoCapitalize?: string | undefined;
|
|
50
48
|
autoCorrect?: string | undefined;
|
|
51
49
|
autoSave?: string | undefined;
|
|
50
|
+
color?: string | undefined;
|
|
52
51
|
itemProp?: string | undefined;
|
|
53
52
|
itemScope?: boolean | undefined;
|
|
54
53
|
itemType?: string | undefined;
|
|
@@ -112,7 +111,6 @@ declare function VideoModal({ className, id, mobileOn, modalKey, onClose, preven
|
|
|
112
111
|
"aria-valuemin"?: number | undefined;
|
|
113
112
|
"aria-valuenow"?: number | undefined;
|
|
114
113
|
"aria-valuetext"?: string | undefined;
|
|
115
|
-
children?: React.ReactNode;
|
|
116
114
|
dangerouslySetInnerHTML?: {
|
|
117
115
|
__html: string | TrustedHTML;
|
|
118
116
|
} | undefined;
|
|
@@ -132,6 +130,7 @@ declare function VideoModal({ className, id, mobileOn, modalKey, onClose, preven
|
|
|
132
130
|
onFocusCapture?: ((event: React.FocusEvent<HTMLDialogElement, Element>) => void) | undefined;
|
|
133
131
|
onBlur?: ((event: React.FocusEvent<HTMLDialogElement, Element>) => void) | undefined;
|
|
134
132
|
onBlurCapture?: ((event: React.FocusEvent<HTMLDialogElement, Element>) => void) | undefined;
|
|
133
|
+
onChange?: ((event: React.FormEvent<HTMLDialogElement>) => void) | undefined;
|
|
135
134
|
onChangeCapture?: ((event: React.FormEvent<HTMLDialogElement>) => void) | undefined;
|
|
136
135
|
onBeforeInput?: ((event: React.FormEvent<HTMLDialogElement>) => void) | undefined;
|
|
137
136
|
onBeforeInputCapture?: ((event: React.FormEvent<HTMLDialogElement>) => void) | undefined;
|
|
@@ -201,6 +200,7 @@ declare function VideoModal({ className, id, mobileOn, modalKey, onClose, preven
|
|
|
201
200
|
onWaitingCapture?: ((event: React.SyntheticEvent<HTMLDialogElement, Event>) => void) | undefined;
|
|
202
201
|
onAuxClick?: ((event: React.MouseEvent<HTMLDialogElement, MouseEvent>) => void) | undefined;
|
|
203
202
|
onAuxClickCapture?: ((event: React.MouseEvent<HTMLDialogElement, MouseEvent>) => void) | undefined;
|
|
203
|
+
onClick?: ((event: React.MouseEvent<HTMLDialogElement, MouseEvent>) => void) | undefined;
|
|
204
204
|
onClickCapture?: ((event: React.MouseEvent<HTMLDialogElement, MouseEvent>) => void) | undefined;
|
|
205
205
|
onContextMenu?: ((event: React.MouseEvent<HTMLDialogElement, MouseEvent>) => void) | undefined;
|
|
206
206
|
onContextMenuCapture?: ((event: React.MouseEvent<HTMLDialogElement, MouseEvent>) => void) | undefined;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { AnimationEvent, FormEvent, KeyboardEvent, MouseEvent, UIEvent, WheelEvent } from 'react';
|
|
2
|
+
export default function useEvent(events: {
|
|
3
|
+
target?: HTMLElement;
|
|
4
|
+
handler: (event: MouseEvent | KeyboardEvent | WheelEvent | UIEvent | Event | AnimationEvent | FormEvent) => void;
|
|
5
|
+
event: keyof DocumentEventMap;
|
|
6
|
+
}[]): void;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { Placement, UseFloatingOptions } from '@floating-ui/react';
|
|
3
|
+
export interface FloatingPanelProps {
|
|
4
|
+
stateOpened: [boolean, (v: boolean) => void];
|
|
5
|
+
matchWidth?: boolean;
|
|
6
|
+
offset?: number;
|
|
7
|
+
/**
|
|
8
|
+
* Utilize useState para essas refs!
|
|
9
|
+
*/
|
|
10
|
+
elements?: UseFloatingOptions['elements'];
|
|
11
|
+
placement?: Placement;
|
|
12
|
+
strategy?: UseFloatingOptions['strategy'];
|
|
13
|
+
fallbackPlacements?: Placement[];
|
|
14
|
+
}
|
|
15
|
+
export default function useFloatingPanel({ stateOpened, matchWidth, offset, placement, strategy, fallbackPlacements, elements, }: FloatingPanelProps): {
|
|
16
|
+
panelRef: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
|
|
17
|
+
panelStyles: import("react").CSSProperties;
|
|
18
|
+
anchorRef: ((node: Element | import("@floating-ui/dom").VirtualElement | null) => void) & ((node: Element | import("@floating-ui/dom").VirtualElement | null) => void);
|
|
19
|
+
isMounted: boolean;
|
|
20
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { FloatingPanelProps } from './useFloatingPanel';
|
|
3
|
+
declare const meta: Meta<FloatingPanelProps>;
|
|
4
|
+
export default meta;
|
|
5
|
+
declare type Story = StoryObj<Partial<FloatingPanelProps> & {
|
|
6
|
+
opened: boolean;
|
|
7
|
+
}>;
|
|
8
|
+
export declare const Primary: Story;
|