1 | import * as React from 'react';
|
2 | import { IExpandingCardProps } from './ExpandingCard.types';
|
3 | import { IStyle, ITheme } from '../../Styling';
|
4 | import { IRefObject, IStyleFunctionOrObject, KeyCodes } from '../../Utilities';
|
5 | import { IPlainCardProps } from './PlainCard/PlainCard.types';
|
6 | /**
|
7 | * {@docCategory HoverCard}
|
8 | */
|
9 | export interface IHoverCard {
|
10 | /**
|
11 | * Public `dismiss` method to be used through `componentRef` of the HoverCard.
|
12 | * Boolean argument controls if the dismiss happens with a timeout delay.
|
13 | */
|
14 | dismiss: (withTimeOut?: boolean) => void;
|
15 | }
|
16 | /**
|
17 | * HoverCard component props.
|
18 | * {@docCategory HoverCard}
|
19 | */
|
20 | export interface IHoverCardProps extends React.HTMLAttributes<HTMLDivElement> {
|
21 | /**
|
22 | * Optional callback to access the IHoverCardHost interface. Use this instead of ref for accessing
|
23 | * the public methods and properties of the component.
|
24 | */
|
25 | componentRef?: IRefObject<IHoverCard>;
|
26 | /**
|
27 | * Additional CSS class(es) to apply to the HoverCard root element.
|
28 | */
|
29 | className?: string;
|
30 | /**
|
31 | * Length of card dismiss delay. A min number is necessary for pointer to hop between target and card
|
32 | * @defaultvalue 100
|
33 | */
|
34 | cardDismissDelay?: number;
|
35 | /**
|
36 | * Length of compact card delay
|
37 | * @defaultvalue 500
|
38 | */
|
39 | cardOpenDelay?: number;
|
40 | /**
|
41 | * Time in ms when expanded card should open after compact card
|
42 | * @defaultvalue 1500
|
43 | */
|
44 | expandedCardOpenDelay?: number;
|
45 | /**
|
46 | * Additional ExpandingCard props to pass through HoverCard like renderers, target. gapSpace etc.
|
47 | * Used along with 'type' prop set to HoverCardType.expanding.
|
48 | * Reference detail properties in ICardProps and IExpandingCardProps.
|
49 | */
|
50 | expandingCardProps?: IExpandingCardProps;
|
51 | /**
|
52 | * Enables instant open of the full card upon click
|
53 | * @defaultvalue false
|
54 | */
|
55 | instantOpenOnClick?: boolean;
|
56 | /**
|
57 | * Callback when card becomes visible
|
58 | */
|
59 | onCardVisible?: () => void;
|
60 | /**
|
61 | * Callback when card hides
|
62 | */
|
63 | onCardHide?: () => void;
|
64 | /**
|
65 | * HotKey used for opening the HoverCard when tabbed to target.
|
66 | * @defaultvalue 'KeyCodes.c'
|
67 | */
|
68 | openHotKey?: KeyCodes;
|
69 | /**
|
70 | * Additional PlainCard props to pass through HoverCard like renderers, target, gapSpace etc.
|
71 | * Used along with 'type' prop set to HoverCardType.plain.
|
72 | * See for more details ICardProps and IPlainCardProps interfaces.
|
73 | */
|
74 | plainCardProps?: IPlainCardProps;
|
75 | /**
|
76 | * Whether or not to mark the container as described by the hover card.
|
77 | * If not specified, the caller should mark as element as described by the hover card id.
|
78 | */
|
79 | setAriaDescribedBy?: boolean;
|
80 | /**
|
81 | * Callback when visible card is expanded.
|
82 | */
|
83 | onCardExpand?: () => void;
|
84 | /**
|
85 | * Set to true to set focus on the first focusable element in the card. Works in pair with the 'trapFocus' prop.
|
86 | * @defaultvalue false
|
87 | */
|
88 | setInitialFocus?: boolean;
|
89 | /**
|
90 | * Should block hover card or not
|
91 | */
|
92 | shouldBlockHoverCard?: () => void;
|
93 | /**
|
94 | * If true disables Card dismiss upon mouse leave, so that card sticks around.
|
95 | * @defaultvalue false
|
96 | */
|
97 | sticky?: boolean;
|
98 | /**
|
99 | * Custom styles for this component
|
100 | */
|
101 | styles?: IStyleFunctionOrObject<IHoverCardStyleProps, IHoverCardStyles>;
|
102 | /**
|
103 | * Optional target element to tag hover card on. If not provided and using HoverCard as a wrapper, don't set the
|
104 | * 'data-is-focusable=true' attribute to the root of the wrapped child.
|
105 | * If no target is given, HoverCard will use its root as a target and become the focusable element with a
|
106 | * focus listener attached to it.
|
107 | */
|
108 | target?: HTMLElement | string | null;
|
109 | /**
|
110 | * This prop is to separate the target to anchor hover card from the target to attach event listener.
|
111 | * If set, this prop separates the target to anchor the hover card from the target to attach the event listener.
|
112 | * When no `eventListenerTarget` given, HoverCard will use `target` prop or its root to set event listener.
|
113 | */
|
114 | eventListenerTarget?: HTMLElement | string | null;
|
115 | /**
|
116 | * Theme provided by higher order component.
|
117 | */
|
118 | theme?: ITheme;
|
119 | /**
|
120 | * Set to true if you want to render the content of the HoverCard in a FocusTrapZone for accessibility reasons.
|
121 | * Optionally 'setInitialFocus' prop can be set to true to move focus inside the FocusTrapZone.
|
122 | */
|
123 | trapFocus?: boolean;
|
124 | /**
|
125 | * Type of the hover card to render.
|
126 | * @defaultvalue HoverCardType.expanding
|
127 | */
|
128 | type?: HoverCardType;
|
129 | }
|
130 | /**
|
131 | * {@docCategory HoverCard}
|
132 | */
|
133 | export declare enum OpenCardMode {
|
134 | /**
|
135 | * Open card by hover
|
136 | */
|
137 | hover = 0,
|
138 | /**
|
139 | * Open card by hot key
|
140 | */
|
141 | hotKey = 1
|
142 | }
|
143 | /**
|
144 | * {@docCategory HoverCard}
|
145 | */
|
146 | export declare enum HoverCardType {
|
147 | /**
|
148 | * Plain card consisting of one part responsive to the size of content.
|
149 | */
|
150 | plain = "PlainCard",
|
151 | /**
|
152 | * File card consisting of two parts: compact and expanded. Has some default sizes if not specified.
|
153 | */
|
154 | expanding = "ExpandingCard"
|
155 | }
|
156 | /**
|
157 | * {@docCategory HoverCard}
|
158 | */
|
159 | export interface IHoverCardStyleProps {
|
160 | /**
|
161 | * Theme provided by High-Order Component.
|
162 | */
|
163 | theme: ITheme;
|
164 | /**
|
165 | * Optional className(s) for the host div of HoverCard.
|
166 | */
|
167 | className?: string;
|
168 | }
|
169 | /**
|
170 | * {@docCategory HoverCard}
|
171 | */
|
172 | export interface IHoverCardStyles {
|
173 | /**
|
174 | * Style for the host element in the default enabled, non-toggled state.
|
175 | */
|
176 | host?: IStyle;
|
177 | }
|