first commit

This commit is contained in:
Stefan Hacker
2026-04-03 09:38:48 +02:00
commit 37ad745546
47450 changed files with 3120798 additions and 0 deletions
@@ -0,0 +1,94 @@
import * as React from 'react';
import { DirectionalHint } from '../../common/DirectionalHint';
import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities';
import type { IStyle, ITheme } from '../../Styling';
import type { ICalloutProps } from '../../Callout';
/**
* Interface containing props common for all types of cards.
*/
export interface IBaseCardProps<TComponent, TStyles, TStyleProps> extends React.HTMLAttributes<HTMLDivElement> {
/**
* Optional callback to access the TComponent interface. Use this instead of ref for accessing
* the public methods and properties of the component.
*/
componentRef?: IRefObject<TComponent>;
/**
* Additional CSS class(es) to apply to the Card content wrapper div.
*/
className?: string;
/**
* How the element should be positioned
* @defaultvalue DirectionalHint.bottomLeftEdge
*/
directionalHint?: DirectionalHint;
/**
* Make callout content show on the set side
* @defaultvalue true
*/
directionalHintFixed?: boolean;
/**
* Focus on first element by default on card or not
*/
firstFocus?: boolean;
/**
* The gap between the card and the target
* @defaultvalue 0
*/
gapSpace?: number;
/**
* Callback upon focus or mouse enter event
*/
onEnter?: (ev?: any) => void;
/**
* Callback upon blur or mouse leave event
*/
onLeave?: (ev?: any) => void;
/**
* Item to be returned with onRender functions
*/
renderData?: any;
/**
* Custom styles for this component
*/
styles?: IStyleFunctionOrObject<TStyleProps, {
[P in keyof TStyles]: IStyle;
}>;
/**
* Element to anchor the card to.
*/
targetElement?: HTMLElement;
/**
* Theme provided by HOC.
*/
theme?: ITheme;
/**
* Trap focus or not
*/
trapFocus?: boolean;
/**
* Custom overriding props to Callout
*/
calloutProps?: ICalloutProps;
}
/**
* Interface containing styleProps common for all types of cards.
*/
export interface IBaseCardStyleProps {
/**
* ClassName to inject into wrapper div of the content.
*/
className?: string;
/**
* Theme provided by High-Order Component.
*/
theme: ITheme;
}
/**
* Interface containing style sections common for all types of cards.
*/
export interface IBaseCardStyles {
/**
* Style for the root element in the default enabled, non-toggled state.
*/
root?: IStyle;
}
@@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=BaseCard.types.js.map
@@ -0,0 +1 @@
{"version":3,"file":"BaseCard.types.js","sourceRoot":"../src/","sources":["components/HoverCard/BaseCard.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport type { IRefObject, IStyleFunctionOrObject } from '../../Utilities';\nimport type { IStyle, ITheme } from '../../Styling';\nimport type { ICalloutProps } from '../../Callout';\n\n/**\n * Interface containing props common for all types of cards.\n */\nexport interface IBaseCardProps<TComponent, TStyles, TStyleProps> extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Optional callback to access the TComponent interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n */\n componentRef?: IRefObject<TComponent>;\n\n /**\n * Additional CSS class(es) to apply to the Card content wrapper div.\n */\n className?: string;\n\n /**\n * How the element should be positioned\n * @defaultvalue DirectionalHint.bottomLeftEdge\n */\n directionalHint?: DirectionalHint;\n\n /**\n * Make callout content show on the set side\n * @defaultvalue true\n */\n directionalHintFixed?: boolean;\n\n /**\n * Focus on first element by default on card or not\n */\n firstFocus?: boolean;\n\n /**\n * The gap between the card and the target\n * @defaultvalue 0\n */\n gapSpace?: number;\n\n /**\n * Callback upon focus or mouse enter event\n */\n onEnter?: (ev?: any) => void;\n\n /**\n * Callback upon blur or mouse leave event\n */\n onLeave?: (ev?: any) => void;\n\n /**\n * Item to be returned with onRender functions\n */\n renderData?: any;\n\n /**\n * Custom styles for this component\n */\n styles?: IStyleFunctionOrObject<TStyleProps, { [P in keyof TStyles]: IStyle }>;\n\n /**\n * Element to anchor the card to.\n */\n targetElement?: HTMLElement;\n\n /**\n * Theme provided by HOC.\n */\n theme?: ITheme;\n\n /**\n * Trap focus or not\n */\n trapFocus?: boolean;\n\n /**\n * Custom overriding props to Callout\n */\n calloutProps?: ICalloutProps;\n}\n\n/**\n * Interface containing styleProps common for all types of cards.\n */\nexport interface IBaseCardStyleProps {\n /**\n * ClassName to inject into wrapper div of the content.\n */\n className?: string;\n\n /**\n * Theme provided by High-Order Component.\n */\n theme: ITheme;\n}\n\n/**\n * Interface containing style sections common for all types of cards.\n */\nexport interface IBaseCardStyles {\n /**\n * Style for the root element in the default enabled, non-toggled state.\n */\n root?: IStyle;\n}\n"]}
@@ -0,0 +1,7 @@
import type { IBaseCardProps } from '../BaseCard.types';
import type { JSXElement } from '@fluentui/utilities';
export interface ICardCalloutProps extends Omit<IBaseCardProps<{}, {}, {}>, 'content'> {
finalHeight?: number;
content?: JSXElement;
}
export declare const CardCallout: (props: ICardCalloutProps) => JSXElement | null;
@@ -0,0 +1,15 @@
import { __assign } from "tslib";
import * as React from 'react';
import { divProperties, getNativeProps } from '../../../Utilities';
import { DirectionalHint } from '../../../common/DirectionalHint';
import { Callout, FocusTrapCallout } from '../../../Callout';
export var CardCallout = function (props) {
var _a = props.gapSpace, gapSpace = _a === void 0 ? 0 : _a, _b = props.directionalHint, directionalHint = _b === void 0 ? DirectionalHint.bottomLeftEdge : _b, directionalHintFixed = props.directionalHintFixed, targetElement = props.targetElement, firstFocus = props.firstFocus, trapFocus = props.trapFocus, onLeave = props.onLeave, className = props.className, finalHeight = props.finalHeight, content = props.content, calloutProps = props.calloutProps;
var mergedCalloutProps = __assign(__assign(__assign({}, getNativeProps(props, divProperties)), { className: className, target: targetElement, isBeakVisible: false, directionalHint: directionalHint, directionalHintFixed: directionalHintFixed, finalHeight: finalHeight, minPagePadding: 24, onDismiss: onLeave, gapSpace: gapSpace }), calloutProps);
return (React.createElement(React.Fragment, null, trapFocus ? (React.createElement(FocusTrapCallout, __assign({}, mergedCalloutProps, { focusTrapProps: {
forceFocusInsideTrap: false,
isClickableOutsideFocusTrap: true,
disableFirstFocus: !firstFocus,
} }), content)) : (React.createElement(Callout, __assign({}, mergedCalloutProps), content))));
};
//# sourceMappingURL=CardCallout.js.map
@@ -0,0 +1 @@
{"version":3,"file":"CardCallout.js","sourceRoot":"../src/","sources":["components/HoverCard/CardCallout/CardCallout.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAY7D,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,KAAwB;IAEhD,IAAA,KAWE,KAAK,SAXK,EAAZ,QAAQ,mBAAG,CAAC,KAAA,EACZ,KAUE,KAAK,gBAVyC,EAAhD,eAAe,mBAAG,eAAe,CAAC,cAAc,KAAA,EAChD,oBAAoB,GASlB,KAAK,qBATa,EACpB,aAAa,GAQX,KAAK,cARM,EACb,UAAU,GAOR,KAAK,WAPG,EACV,SAAS,GAMP,KAAK,UANE,EACT,OAAO,GAKL,KAAK,QALA,EACP,SAAS,GAIP,KAAK,UAJE,EACT,WAAW,GAGT,KAAK,YAHI,EACX,OAAO,GAEL,KAAK,QAFA,EACP,YAAY,GACV,KAAK,aADK,CACJ;IAEV,IAAM,kBAAkB,kCACnB,cAAc,CAAC,KAAK,EAAE,aAAa,CAAC,KACvC,SAAS,WAAA,EACT,MAAM,EAAE,aAAa,EACrB,aAAa,EAAE,KAAK,EACpB,eAAe,iBAAA,EACf,oBAAoB,sBAAA,EACpB,WAAW,aAAA,EACX,cAAc,EAAE,EAAE,EAClB,SAAS,EAAE,OAAO,EAClB,QAAQ,UAAA,KACL,YAAY,CAChB,CAAC;IAEF,OAAO,CACL,0CACG,SAAS,CAAC,CAAC,CAAC,CACX,oBAAC,gBAAgB,eACX,kBAAkB,IACtB,cAAc,EAAE;YACd,oBAAoB,EAAE,KAAK;YAC3B,2BAA2B,EAAE,IAAI;YACjC,iBAAiB,EAAE,CAAC,UAAU;SAC/B,KAEA,OAAO,CACS,CACpB,CAAC,CAAC,CAAC,CACF,oBAAC,OAAO,eAAK,kBAAkB,GAAG,OAAO,CAAW,CACrD,CACA,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport { divProperties, getNativeProps } from '../../../Utilities';\nimport { DirectionalHint } from '../../../common/DirectionalHint';\nimport { Callout, FocusTrapCallout } from '../../../Callout';\nimport type { IBaseCardProps } from '../BaseCard.types';\nimport type { ICalloutProps } from '../../../Callout';\n\nimport type { JSXElement } from '@fluentui/utilities';\n\nexport interface ICardCalloutProps extends Omit<IBaseCardProps<{}, {}, {}>, 'content'> {\n finalHeight?: number;\n\n content?: JSXElement;\n}\n\nexport const CardCallout = (props: ICardCalloutProps): JSXElement | null => {\n const {\n gapSpace = 0,\n directionalHint = DirectionalHint.bottomLeftEdge,\n directionalHintFixed,\n targetElement,\n firstFocus,\n trapFocus,\n onLeave,\n className,\n finalHeight,\n content,\n calloutProps,\n } = props;\n\n const mergedCalloutProps: ICalloutProps = {\n ...getNativeProps(props, divProperties),\n className,\n target: targetElement,\n isBeakVisible: false,\n directionalHint,\n directionalHintFixed,\n finalHeight,\n minPagePadding: 24,\n onDismiss: onLeave,\n gapSpace,\n ...calloutProps,\n };\n\n return (\n <>\n {trapFocus ? (\n <FocusTrapCallout\n {...mergedCalloutProps}\n focusTrapProps={{\n forceFocusInsideTrap: false,\n isClickableOutsideFocusTrap: true,\n disableFirstFocus: !firstFocus,\n }}\n >\n {content}\n </FocusTrapCallout>\n ) : (\n <Callout {...mergedCalloutProps}>{content}</Callout>\n )}\n </>\n );\n};\n"]}
@@ -0,0 +1,25 @@
import * as React from 'react';
import type { IExpandingCardProps } from './ExpandingCard.types';
import type { JSXElement } from '@fluentui/utilities';
export interface IExpandingCardState {
firstFrameRendered: boolean;
needsScroll: boolean;
}
export declare class ExpandingCardBase extends React.Component<IExpandingCardProps, IExpandingCardState> {
static defaultProps: {
compactCardHeight: number;
expandedCardHeight: number;
directionalHintFixed: boolean;
};
private _classNames;
private _expandedElem;
private _async;
constructor(props: IExpandingCardProps);
componentDidMount(): void;
componentWillUnmount(): void;
render(): JSXElement;
private _onKeyDown;
private _onRenderCompactCard;
private _onRenderExpandedCard;
private _checkNeedsScroll;
}
@@ -0,0 +1,82 @@
import { __assign, __extends } from "tslib";
import * as React from 'react';
import { classNamesFunction, KeyCodes, Async, initializeComponentRef } from '../../Utilities';
import { ExpandingCardMode } from './ExpandingCard.types';
import { CardCallout } from './CardCallout/CardCallout';
var getClassNames = classNamesFunction();
var ExpandingCardBase = /** @class */ (function (_super) {
__extends(ExpandingCardBase, _super);
function ExpandingCardBase(props) {
var _this = _super.call(this, props) || this;
_this._expandedElem = React.createRef();
_this._onKeyDown = function (ev) {
// eslint-disable-next-line @typescript-eslint/no-deprecated
if (ev.which === KeyCodes.escape) {
_this.props.onLeave && _this.props.onLeave(ev);
}
};
_this._onRenderCompactCard = function () {
return React.createElement("div", { className: _this._classNames.compactCard }, _this.props.onRenderCompactCard(_this.props.renderData));
};
_this._onRenderExpandedCard = function () {
// firstFrameRendered helps in initially setting height of expanded card to 1px, even if mode prop is set to
// ExpandingCardMode.expanded on first render. This is to make sure transition animation takes place.
!_this.state.firstFrameRendered &&
_this._async.requestAnimationFrame(function () {
_this.setState({
firstFrameRendered: true,
});
});
return (React.createElement("div", { className: _this._classNames.expandedCard, ref: _this._expandedElem },
React.createElement("div", { className: _this._classNames.expandedCardScroll }, _this.props.onRenderExpandedCard && _this.props.onRenderExpandedCard(_this.props.renderData))));
};
_this._checkNeedsScroll = function () {
var expandedCardHeight = _this.props.expandedCardHeight;
_this._async.requestAnimationFrame(function () {
if (_this._expandedElem.current && _this._expandedElem.current.scrollHeight >= expandedCardHeight) {
_this.setState({
needsScroll: true,
});
}
});
};
_this._async = new Async(_this);
initializeComponentRef(_this);
_this.state = {
firstFrameRendered: false,
needsScroll: false,
};
return _this;
}
ExpandingCardBase.prototype.componentDidMount = function () {
this._checkNeedsScroll();
};
ExpandingCardBase.prototype.componentWillUnmount = function () {
this._async.dispose();
};
ExpandingCardBase.prototype.render = function () {
var _a = this.props, styles = _a.styles, compactCardHeight = _a.compactCardHeight, expandedCardHeight = _a.expandedCardHeight, theme = _a.theme, mode = _a.mode, className = _a.className;
var _b = this.state, needsScroll = _b.needsScroll, firstFrameRendered = _b.firstFrameRendered;
var finalHeight = compactCardHeight + expandedCardHeight;
this._classNames = getClassNames(styles, {
theme: theme,
compactCardHeight: compactCardHeight,
className: className,
expandedCardHeight: expandedCardHeight,
needsScroll: needsScroll,
expandedCardFirstFrameRendered: mode === ExpandingCardMode.expanded && firstFrameRendered,
});
var content = (React.createElement("div", { onMouseEnter: this.props.onEnter, onMouseLeave: this.props.onLeave, onKeyDown: this._onKeyDown },
this._onRenderCompactCard(),
this._onRenderExpandedCard()));
return (React.createElement(CardCallout, __assign({}, this.props, { content: content, finalHeight: finalHeight, className: this._classNames.root })));
};
ExpandingCardBase.defaultProps = {
compactCardHeight: 156,
expandedCardHeight: 384,
directionalHintFixed: true,
};
return ExpandingCardBase;
}(React.Component));
export { ExpandingCardBase };
//# sourceMappingURL=ExpandingCard.base.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
import * as React from 'react';
import type { IExpandingCardProps } from './ExpandingCard.types';
export declare const ExpandingCard: React.FunctionComponent<IExpandingCardProps>;
@@ -0,0 +1,7 @@
import { styled } from '../../Utilities';
import { getStyles } from './ExpandingCard.styles';
import { ExpandingCardBase } from './ExpandingCard.base';
export var ExpandingCard = styled(ExpandingCardBase, getStyles, undefined, {
scope: 'ExpandingCard',
});
//# sourceMappingURL=ExpandingCard.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ExpandingCard.js","sourceRoot":"../src/","sources":["components/HoverCard/ExpandingCard.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGzD,MAAM,CAAC,IAAM,aAAa,GAAiD,MAAM,CAI/E,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE;IACzC,KAAK,EAAE,eAAe;CACvB,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { getStyles } from './ExpandingCard.styles';\nimport { ExpandingCardBase } from './ExpandingCard.base';\nimport type { IExpandingCardProps, IExpandingCardStyles, IExpandingCardStyleProps } from './ExpandingCard.types';\n\nexport const ExpandingCard: React.FunctionComponent<IExpandingCardProps> = styled<\n IExpandingCardProps,\n IExpandingCardStyleProps,\n IExpandingCardStyles\n>(ExpandingCardBase, getStyles, undefined, {\n scope: 'ExpandingCard',\n});\n"]}
@@ -0,0 +1,2 @@
import type { IExpandingCardStyles, IExpandingCardStyleProps } from './ExpandingCard.types';
export declare function getStyles(props: IExpandingCardStyleProps): IExpandingCardStyles;
@@ -0,0 +1,69 @@
import { getGlobalClassNames, HighContrastSelector } from '../../Styling';
var GlobalClassNames = {
root: 'ms-ExpandingCard-root',
compactCard: 'ms-ExpandingCard-compactCard',
expandedCard: 'ms-ExpandingCard-expandedCard',
expandedCardScroll: 'ms-ExpandingCard-expandedCardScrollRegion',
};
export function getStyles(props) {
var _a;
var theme = props.theme, needsScroll = props.needsScroll, expandedCardFirstFrameRendered = props.expandedCardFirstFrameRendered, compactCardHeight = props.compactCardHeight, expandedCardHeight = props.expandedCardHeight, className = props.className;
var palette = theme.palette;
var classNames = getGlobalClassNames(GlobalClassNames, theme);
return {
root: [
classNames.root,
{
width: 320,
pointerEvents: 'none',
selectors: (_a = {},
_a[HighContrastSelector] = {
border: '1px solid WindowText',
},
_a),
},
className,
],
compactCard: [
classNames.compactCard,
{
pointerEvents: 'auto',
position: 'relative',
height: compactCardHeight,
},
],
expandedCard: [
classNames.expandedCard,
{
height: 1,
overflowY: 'hidden',
pointerEvents: 'auto',
transition: 'height 0.467s cubic-bezier(0.5, 0, 0, 1)',
selectors: {
':before': {
content: '""',
position: 'relative',
display: 'block',
top: 0,
left: 24,
width: 272,
height: 1,
backgroundColor: palette.neutralLighter,
},
},
},
expandedCardFirstFrameRendered && {
height: expandedCardHeight,
},
],
expandedCardScroll: [
classNames.expandedCardScroll,
needsScroll && {
height: '100%',
boxSizing: 'border-box',
overflowY: 'auto',
},
],
};
}
//# sourceMappingURL=ExpandingCard.styles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ExpandingCard.styles.js","sourceRoot":"../src/","sources":["components/HoverCard/ExpandingCard.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAG1E,IAAM,gBAAgB,GAAG;IACvB,IAAI,EAAE,uBAAuB;IAC7B,WAAW,EAAE,8BAA8B;IAC3C,YAAY,EAAE,+BAA+B;IAC7C,kBAAkB,EAAE,2CAA2C;CAChE,CAAC;AAEF,MAAM,UAAU,SAAS,CAAC,KAA+B;;IAC/C,IAAA,KAAK,GACX,KAAK,MADM,EAAE,WAAW,GACxB,KAAK,YADmB,EAAE,8BAA8B,GACxD,KAAK,+BADmD,EAAE,iBAAiB,GAC3E,KAAK,kBADsE,EAAE,kBAAkB,GAC/F,KAAK,mBAD0F,EAAE,SAAS,GAC1G,KAAK,UADqG,CACpG;IAEA,IAAA,OAAO,GAAK,KAAK,QAAV,CAAW;IAC1B,IAAM,UAAU,GAAG,mBAAmB,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;IAEhE,OAAO;QACL,IAAI,EAAE;YACJ,UAAU,CAAC,IAAI;YACf;gBACE,KAAK,EAAE,GAAG;gBACV,aAAa,EAAE,MAAM;gBACrB,SAAS;oBACP,GAAC,oBAAoB,IAAG;wBACtB,MAAM,EAAE,sBAAsB;qBAC/B;uBACF;aACF;YACD,SAAS;SACV;QACD,WAAW,EAAE;YACX,UAAU,CAAC,WAAW;YACtB;gBACE,aAAa,EAAE,MAAM;gBACrB,QAAQ,EAAE,UAAU;gBACpB,MAAM,EAAE,iBAAiB;aAC1B;SACF;QACD,YAAY,EAAE;YACZ,UAAU,CAAC,YAAY;YACvB;gBACE,MAAM,EAAE,CAAC;gBACT,SAAS,EAAE,QAAQ;gBACnB,aAAa,EAAE,MAAM;gBACrB,UAAU,EAAE,0CAA0C;gBACtD,SAAS,EAAE;oBACT,SAAS,EAAE;wBACT,OAAO,EAAE,IAAI;wBACb,QAAQ,EAAE,UAAU;wBACpB,OAAO,EAAE,OAAO;wBAChB,GAAG,EAAE,CAAC;wBACN,IAAI,EAAE,EAAE;wBACR,KAAK,EAAE,GAAG;wBACV,MAAM,EAAE,CAAC;wBACT,eAAe,EAAE,OAAO,CAAC,cAAc;qBACxC;iBACF;aACF;YACD,8BAA8B,IAAI;gBAChC,MAAM,EAAE,kBAAkB;aAC3B;SACF;QACD,kBAAkB,EAAE;YAClB,UAAU,CAAC,kBAAkB;YAC7B,WAAW,IAAI;gBACb,MAAM,EAAE,MAAM;gBACd,SAAS,EAAE,YAAY;gBACvB,SAAS,EAAE,MAAM;aAClB;SACF;KACF,CAAC;AACJ,CAAC","sourcesContent":["import { getGlobalClassNames, HighContrastSelector } from '../../Styling';\nimport type { IExpandingCardStyles, IExpandingCardStyleProps } from './ExpandingCard.types';\n\nconst GlobalClassNames = {\n root: 'ms-ExpandingCard-root',\n compactCard: 'ms-ExpandingCard-compactCard',\n expandedCard: 'ms-ExpandingCard-expandedCard',\n expandedCardScroll: 'ms-ExpandingCard-expandedCardScrollRegion',\n};\n\nexport function getStyles(props: IExpandingCardStyleProps): IExpandingCardStyles {\n const { theme, needsScroll, expandedCardFirstFrameRendered, compactCardHeight, expandedCardHeight, className } =\n props;\n\n const { palette } = theme;\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n return {\n root: [\n classNames.root,\n {\n width: 320,\n pointerEvents: 'none',\n selectors: {\n [HighContrastSelector]: {\n border: '1px solid WindowText',\n },\n },\n },\n className,\n ],\n compactCard: [\n classNames.compactCard,\n {\n pointerEvents: 'auto',\n position: 'relative',\n height: compactCardHeight,\n },\n ],\n expandedCard: [\n classNames.expandedCard,\n {\n height: 1,\n overflowY: 'hidden',\n pointerEvents: 'auto',\n transition: 'height 0.467s cubic-bezier(0.5, 0, 0, 1)',\n selectors: {\n ':before': {\n content: '\"\"',\n position: 'relative',\n display: 'block',\n top: 0,\n left: 24,\n width: 272,\n height: 1,\n backgroundColor: palette.neutralLighter,\n },\n },\n },\n expandedCardFirstFrameRendered && {\n height: expandedCardHeight,\n },\n ],\n expandedCardScroll: [\n classNames.expandedCardScroll,\n needsScroll && {\n height: '100%',\n boxSizing: 'border-box',\n overflowY: 'auto',\n },\n ],\n };\n}\n"]}
@@ -0,0 +1,88 @@
import type { IBaseCardProps, IBaseCardStyles, IBaseCardStyleProps } from './BaseCard.types';
import type { IRenderFunction } from '../../Utilities';
import type { IStyle } from '../../Styling';
/**
* {@docCategory HoverCard}
*/
export interface IExpandingCard {
}
/**
* ExpandingCard component props.
* {@docCategory HoverCard}
*/
export interface IExpandingCardProps extends IBaseCardProps<IExpandingCard, IExpandingCardStyles, IExpandingCardStyleProps> {
/**
* Height of compact card
* @defaultvalue 156
*/
compactCardHeight?: number;
/**
* Height of expanded card
* @defaultvalue 384
*/
expandedCardHeight?: number;
/**
* Use to open the card in expanded format and not wait for the delay
* @defaultvalue ExpandingCardMode.compact
*/
mode?: ExpandingCardMode;
/**
* Render function to populate compact content area
*/
onRenderCompactCard?: IRenderFunction<any>;
/**
* Render function to populate expanded content area
*/
onRenderExpandedCard?: IRenderFunction<any>;
}
/**
* {@docCategory HoverCard}
*/
export declare enum ExpandingCardMode {
/**
* To have top compact card only
*/
compact = 0,
/**
* To have both top compact and bottom expanded card
*/
expanded = 1
}
/**
* {@docCategory HoverCard}
*/
export interface IExpandingCardStyleProps extends IBaseCardStyleProps {
/**
* Height of the compact section of the card.
*/
compactCardHeight?: number;
/**
* Boolean flag that expanded card is in Expanded.mode === expanded && first frame was rendered.
*/
expandedCardFirstFrameRendered?: boolean;
/**
* Height of the expanded section of the card.
*/
expandedCardHeight?: number;
/**
* Whether the content of the expanded card overflows vertically.
*/
needsScroll?: boolean;
}
/**
* {@docCategory HoverCard}
*/
export interface IExpandingCardStyles extends IBaseCardStyles {
/**
* Style for the main card element.
*/
compactCard?: IStyle;
/**
* Base Style for the expanded card content.
*/
expandedCard?: IStyle;
/**
* Style for the expanded card scroll content.
*/
expandedCardScroll?: IStyle;
}
@@ -0,0 +1,15 @@
/**
* {@docCategory HoverCard}
*/
export var ExpandingCardMode;
(function (ExpandingCardMode) {
/**
* To have top compact card only
*/
ExpandingCardMode[ExpandingCardMode["compact"] = 0] = "compact";
/**
* To have both top compact and bottom expanded card
*/
ExpandingCardMode[ExpandingCardMode["expanded"] = 1] = "expanded";
})(ExpandingCardMode || (ExpandingCardMode = {}));
//# sourceMappingURL=ExpandingCard.types.js.map
@@ -0,0 +1 @@
{"version":3,"file":"ExpandingCard.types.js","sourceRoot":"../src/","sources":["components/HoverCard/ExpandingCard.types.ts"],"names":[],"mappings":"AA4CA;;GAEG;AACH,MAAM,CAAN,IAAY,iBAUX;AAVD,WAAY,iBAAiB;IAC3B;;OAEG;IACH,+DAAW,CAAA;IAEX;;OAEG;IACH,iEAAY,CAAA;AACd,CAAC,EAVW,iBAAiB,KAAjB,iBAAiB,QAU5B","sourcesContent":["import type { IBaseCardProps, IBaseCardStyles, IBaseCardStyleProps } from './BaseCard.types';\nimport type { IRenderFunction } from '../../Utilities';\nimport type { IStyle } from '../../Styling';\n\n/**\n * {@docCategory HoverCard}\n */\nexport interface IExpandingCard {}\n\n/**\n * ExpandingCard component props.\n * {@docCategory HoverCard}\n */\nexport interface IExpandingCardProps\n extends IBaseCardProps<IExpandingCard, IExpandingCardStyles, IExpandingCardStyleProps> {\n /**\n * Height of compact card\n * @defaultvalue 156\n */\n compactCardHeight?: number;\n\n /**\n * Height of expanded card\n * @defaultvalue 384\n */\n expandedCardHeight?: number;\n\n /**\n * Use to open the card in expanded format and not wait for the delay\n * @defaultvalue ExpandingCardMode.compact\n */\n mode?: ExpandingCardMode;\n\n /**\n * Render function to populate compact content area\n */\n onRenderCompactCard?: IRenderFunction<any>;\n\n /**\n * Render function to populate expanded content area\n */\n onRenderExpandedCard?: IRenderFunction<any>;\n}\n\n/**\n * {@docCategory HoverCard}\n */\nexport enum ExpandingCardMode {\n /**\n * To have top compact card only\n */\n compact = 0,\n\n /**\n * To have both top compact and bottom expanded card\n */\n expanded = 1,\n}\n\n/**\n * {@docCategory HoverCard}\n */\nexport interface IExpandingCardStyleProps extends IBaseCardStyleProps {\n /**\n * Height of the compact section of the card.\n */\n compactCardHeight?: number;\n\n /**\n * Boolean flag that expanded card is in Expanded.mode === expanded && first frame was rendered.\n */\n expandedCardFirstFrameRendered?: boolean;\n\n /**\n * Height of the expanded section of the card.\n */\n expandedCardHeight?: number;\n\n /**\n * Whether the content of the expanded card overflows vertically.\n */\n needsScroll?: boolean;\n}\n\n/**\n * {@docCategory HoverCard}\n */\nexport interface IExpandingCardStyles extends IBaseCardStyles {\n /**\n * Style for the main card element.\n */\n compactCard?: IStyle;\n\n /**\n * Base Style for the expanded card content.\n */\n expandedCard?: IStyle;\n\n /**\n * Style for the expanded card scroll content.\n */\n expandedCardScroll?: IStyle;\n}\n"]}
@@ -0,0 +1,52 @@
import * as React from 'react';
import { KeyCodes } from '../../Utilities';
import { OpenCardMode, HoverCardType } from './HoverCard.types';
import { ExpandingCardMode } from './ExpandingCard.types';
import type { IHoverCardProps, IHoverCard } from './HoverCard.types';
import type { JSXElement } from '@fluentui/utilities';
export interface IHoverCardState {
isHoverCardVisible?: boolean;
mode?: ExpandingCardMode;
openMode?: OpenCardMode;
}
export declare class HoverCardBase extends React.Component<IHoverCardProps, IHoverCardState> implements IHoverCard {
static defaultProps: {
cardOpenDelay: number;
cardDismissDelay: number;
expandedCardOpenDelay: number;
instantOpenOnClick: boolean;
setInitialFocus: boolean;
openHotKey: KeyCodes;
type: HoverCardType;
};
private _hoverCard;
private _dismissTimerId;
private _openTimerId;
private _currentMouseTarget;
private _nativeDismissEvent;
private _childDismissEvent;
private _classNames;
private _async;
private _events;
constructor(props: IHoverCardProps);
componentDidMount(): void;
componentWillUnmount(): void;
componentDidUpdate(prevProps: IHoverCardProps, prevState: IHoverCardState): void;
dismiss: (withTimeOut?: boolean) => void;
render(): JSXElement;
private _getTargetElement;
private _shouldBlockHoverCard;
private _cardOpen;
private _executeCardOpen;
/**
* Hide HoverCard
* How we dismiss the card depends on where the callback is coming from.
* This is provided by the `isNativeEvent` argument.
* true: Event is coming from event listeners set up in componentDidMount.
* false: Event is coming from the `onLeave` prop from the HoverCard component.
*/
private _cardDismiss;
private _setDismissedState;
private _instantOpenAsExpanded;
private _setEventListeners;
}
+222
View File
@@ -0,0 +1,222 @@
import { __assign, __extends } from "tslib";
import * as React from 'react';
import { divProperties, getNativeProps, getId, KeyCodes, getDocument, classNamesFunction, initializeComponentRef, EventGroup, Async, } from '../../Utilities';
import { OpenCardMode, HoverCardType } from './HoverCard.types';
import { ExpandingCard } from './ExpandingCard';
import { ExpandingCardMode } from './ExpandingCard.types';
import { PlainCard } from './PlainCard/PlainCard';
var getClassNames = classNamesFunction();
var HoverCardBase = /** @class */ (function (_super) {
__extends(HoverCardBase, _super);
// Constructor
function HoverCardBase(props) {
var _this = _super.call(this, props) || this;
// The wrapping div that gets the hover events
_this._hoverCard = React.createRef();
_this.dismiss = function (withTimeOut) {
_this._async.clearTimeout(_this._openTimerId);
_this._async.clearTimeout(_this._dismissTimerId);
if (!withTimeOut) {
_this._setDismissedState();
}
else {
_this._dismissTimerId = _this._async.setTimeout(function () {
_this._setDismissedState();
}, _this.props.cardDismissDelay);
}
};
// Show HoverCard
_this._cardOpen = function (ev) {
// eslint-disable-next-line @typescript-eslint/no-deprecated
if (_this._shouldBlockHoverCard() || (ev.type === 'keydown' && !(ev.which === _this.props.openHotKey))) {
return;
}
_this._async.clearTimeout(_this._dismissTimerId);
if (ev.type === 'mouseenter') {
_this._currentMouseTarget = ev.currentTarget;
}
_this._executeCardOpen(ev);
};
_this._executeCardOpen = function (ev) {
_this._async.clearTimeout(_this._openTimerId);
_this._openTimerId = _this._async.setTimeout(function () {
_this.setState(function (prevState) {
if (!prevState.isHoverCardVisible) {
return {
isHoverCardVisible: true,
mode: ExpandingCardMode.compact,
openMode: ev.type === 'keydown' ? OpenCardMode.hotKey : OpenCardMode.hover,
};
}
return prevState;
});
}, _this.props.cardOpenDelay);
};
/**
* Hide HoverCard
* How we dismiss the card depends on where the callback is coming from.
* This is provided by the `isNativeEvent` argument.
* true: Event is coming from event listeners set up in componentDidMount.
* false: Event is coming from the `onLeave` prop from the HoverCard component.
*/
_this._cardDismiss = function (isNativeEvent, ev) {
if (isNativeEvent) {
// We expect these to be MouseEvents, If not, return.
if (!(ev instanceof MouseEvent)) {
return;
}
// eslint-disable-next-line @typescript-eslint/no-deprecated
if (ev.type === 'keydown' && ev.which !== KeyCodes.escape) {
return;
}
// Dismiss if not sticky and currentTarget is the same element that mouse last entered
// eslint-disable-next-line @typescript-eslint/no-deprecated
if (!_this.props.sticky && (_this._currentMouseTarget === ev.currentTarget || ev.which === KeyCodes.escape)) {
_this.dismiss(true);
}
}
else {
// If this is a mouseleave event and the component is sticky, do not dismiss.
if (_this.props.sticky &&
!(ev instanceof MouseEvent) &&
ev.nativeEvent instanceof MouseEvent &&
ev.type === 'mouseleave') {
return;
}
_this.dismiss(true);
}
};
_this._setDismissedState = function () {
_this.setState({
isHoverCardVisible: false,
mode: ExpandingCardMode.compact,
openMode: OpenCardMode.hover,
});
};
_this._instantOpenAsExpanded = function (ev) {
_this._async.clearTimeout(_this._dismissTimerId);
_this.setState(function (prevState) {
if (!prevState.isHoverCardVisible) {
return {
isHoverCardVisible: true,
mode: ExpandingCardMode.expanded,
};
}
return prevState;
});
};
_this._setEventListeners = function () {
var _a = _this.props, trapFocus = _a.trapFocus, instantOpenOnClick = _a.instantOpenOnClick, eventListenerTarget = _a.eventListenerTarget;
var target = eventListenerTarget
? _this._getTargetElement(eventListenerTarget)
: _this._getTargetElement(_this.props.target);
var nativeEventDismiss = _this._nativeDismissEvent;
// target can be undefined if ref isn't available, only assign
// events when defined to avoid throwing exception.
if (target) {
_this._events.on(target, 'mouseenter', _this._cardOpen);
_this._events.on(target, 'mouseleave', nativeEventDismiss);
if (trapFocus) {
_this._events.on(target, 'keydown', _this._cardOpen);
}
else {
_this._events.on(target, 'focus', _this._cardOpen);
_this._events.on(target, 'blur', nativeEventDismiss);
}
if (instantOpenOnClick) {
_this._events.on(target, 'click', _this._instantOpenAsExpanded);
}
else {
_this._events.on(target, 'mousedown', nativeEventDismiss);
_this._events.on(target, 'keydown', nativeEventDismiss);
}
}
};
initializeComponentRef(_this);
_this._async = new Async(_this);
_this._events = new EventGroup(_this);
_this._nativeDismissEvent = _this._cardDismiss.bind(_this, true);
_this._childDismissEvent = _this._cardDismiss.bind(_this, false);
_this.state = {
isHoverCardVisible: false,
mode: ExpandingCardMode.compact,
openMode: OpenCardMode.hover,
};
return _this;
}
HoverCardBase.prototype.componentDidMount = function () {
this._setEventListeners();
};
HoverCardBase.prototype.componentWillUnmount = function () {
this._async.dispose();
this._events.dispose();
};
HoverCardBase.prototype.componentDidUpdate = function (prevProps, prevState) {
var _this = this;
if (prevProps.target !== this.props.target) {
this._events.off();
this._setEventListeners();
}
if (prevState.isHoverCardVisible !== this.state.isHoverCardVisible) {
if (this.state.isHoverCardVisible) {
this._async.setTimeout(function () {
_this.setState({
mode: ExpandingCardMode.expanded,
}, function () {
_this.props.onCardExpand && _this.props.onCardExpand();
});
}, this.props.expandedCardOpenDelay);
this.props.onCardVisible && this.props.onCardVisible();
}
else {
this.setState({
mode: ExpandingCardMode.compact,
});
this.props.onCardHide && this.props.onCardHide();
}
}
};
// Render
HoverCardBase.prototype.render = function () {
var _a = this.props, expandingCardProps = _a.expandingCardProps, children = _a.children, id = _a.id, _b = _a.setAriaDescribedBy, setAriaDescribedBy = _b === void 0 ? true : _b, customStyles = _a.styles, theme = _a.theme, className = _a.className, type = _a.type, plainCardProps = _a.plainCardProps, trapFocus = _a.trapFocus, setInitialFocus = _a.setInitialFocus;
var _c = this.state, isHoverCardVisible = _c.isHoverCardVisible, mode = _c.mode, openMode = _c.openMode;
var hoverCardId = id || getId('hoverCard');
this._classNames = getClassNames(customStyles, {
theme: theme,
className: className,
});
// Common props for both card types.
var commonCardProps = __assign(__assign({}, getNativeProps(this.props, divProperties)), { id: hoverCardId, trapFocus: !!trapFocus, firstFocus: setInitialFocus || openMode === OpenCardMode.hotKey, targetElement: this._getTargetElement(this.props.target), onEnter: this._cardOpen, onLeave: this._childDismissEvent });
var finalExpandedCardProps = __assign(__assign(__assign({}, expandingCardProps), commonCardProps), { mode: mode });
var finalPlainCardProps = __assign(__assign({}, plainCardProps), commonCardProps);
return (React.createElement("div", { className: this._classNames.host, ref: this._hoverCard, "aria-describedby": setAriaDescribedBy && isHoverCardVisible ? hoverCardId : undefined, "data-is-focusable": !this.props.target },
children,
isHoverCardVisible &&
(type === HoverCardType.expanding ? (React.createElement(ExpandingCard, __assign({}, finalExpandedCardProps))) : (React.createElement(PlainCard, __assign({}, finalPlainCardProps))))));
};
HoverCardBase.prototype._getTargetElement = function (target) {
switch (typeof target) {
case 'string':
return getDocument().querySelector(target);
case 'object':
return target;
default:
return this._hoverCard.current || undefined;
}
};
HoverCardBase.prototype._shouldBlockHoverCard = function () {
return !!(this.props.shouldBlockHoverCard && this.props.shouldBlockHoverCard());
};
HoverCardBase.defaultProps = {
cardOpenDelay: 500,
cardDismissDelay: 100,
expandedCardOpenDelay: 1500,
instantOpenOnClick: false,
setInitialFocus: false,
openHotKey: KeyCodes.c,
type: HoverCardType.expanding,
};
return HoverCardBase;
}(React.Component));
export { HoverCardBase };
//# sourceMappingURL=HoverCard.base.js.map
File diff suppressed because one or more lines are too long
+3
View File
@@ -0,0 +1,3 @@
import * as React from 'react';
import type { IHoverCardProps } from './HoverCard.types';
export declare const HoverCard: React.FunctionComponent<IHoverCardProps>;
+7
View File
@@ -0,0 +1,7 @@
import { styled } from '../../Utilities';
import { getStyles } from './HoverCard.styles';
import { HoverCardBase } from './HoverCard.base';
export var HoverCard = styled(HoverCardBase, getStyles, undefined, {
scope: 'HoverCard',
});
//# sourceMappingURL=HoverCard.js.map
@@ -0,0 +1 @@
{"version":3,"file":"HoverCard.js","sourceRoot":"../src/","sources":["components/HoverCard/HoverCard.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,MAAM,CAAC,IAAM,SAAS,GAA6C,MAAM,CAIvE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE;IACrC,KAAK,EAAE,WAAW;CACnB,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { getStyles } from './HoverCard.styles';\nimport { HoverCardBase } from './HoverCard.base';\nimport type { IHoverCardProps, IHoverCardStyles, IHoverCardStyleProps } from './HoverCard.types';\n\nexport const HoverCard: React.FunctionComponent<IHoverCardProps> = styled<\n IHoverCardProps,\n IHoverCardStyleProps,\n IHoverCardStyles\n>(HoverCardBase, getStyles, undefined, {\n scope: 'HoverCard',\n});\n"]}
@@ -0,0 +1,2 @@
import type { IHoverCardStyles, IHoverCardStyleProps } from './HoverCard.types';
export declare function getStyles(props: IHoverCardStyleProps): IHoverCardStyles;
@@ -0,0 +1,12 @@
import { getGlobalClassNames } from '../../Styling';
var GlobalClassNames = {
host: 'ms-HoverCard-host',
};
export function getStyles(props) {
var className = props.className, theme = props.theme;
var classNames = getGlobalClassNames(GlobalClassNames, theme);
return {
host: [classNames.host, className],
};
}
//# sourceMappingURL=HoverCard.styles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"HoverCard.styles.js","sourceRoot":"../src/","sources":["components/HoverCard/HoverCard.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAGpD,IAAM,gBAAgB,GAAG;IACvB,IAAI,EAAE,mBAAmB;CAC1B,CAAC;AAEF,MAAM,UAAU,SAAS,CAAC,KAA2B;IAC3C,IAAA,SAAS,GAAY,KAAK,UAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IAEnC,IAAM,UAAU,GAAG,mBAAmB,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;IAEhE,OAAO;QACL,IAAI,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC;KACnC,CAAC;AACJ,CAAC","sourcesContent":["import { getGlobalClassNames } from '../../Styling';\nimport type { IHoverCardStyles, IHoverCardStyleProps } from './HoverCard.types';\n\nconst GlobalClassNames = {\n host: 'ms-HoverCard-host',\n};\n\nexport function getStyles(props: IHoverCardStyleProps): IHoverCardStyles {\n const { className, theme } = props;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n return {\n host: [classNames.host, className],\n };\n}\n"]}
@@ -0,0 +1,178 @@
import * as React from 'react';
import { KeyCodes } from '../../Utilities';
import type { IExpandingCardProps } from './ExpandingCard.types';
import type { IStyle, ITheme } from '../../Styling';
import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities';
import type { IPlainCardProps } from './PlainCard/PlainCard.types';
/**
* {@docCategory HoverCard}
*/
export interface IHoverCard {
/**
* Public `dismiss` method to be used through `componentRef` of the HoverCard.
* Boolean argument controls if the dismiss happens with a timeout delay.
*/
dismiss: (withTimeOut?: boolean) => void;
}
/**
* HoverCard component props.
* {@docCategory HoverCard}
*/
export interface IHoverCardProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* Optional callback to access the IHoverCardHost interface. Use this instead of ref for accessing
* the public methods and properties of the component.
*/
componentRef?: IRefObject<IHoverCard>;
/**
* Additional CSS class(es) to apply to the HoverCard root element.
*/
className?: string;
/**
* Length of card dismiss delay. A min number is necessary for pointer to hop between target and card
* @defaultvalue 100
*/
cardDismissDelay?: number;
/**
* Length of compact card delay
* @defaultvalue 500
*/
cardOpenDelay?: number;
/**
* Time in ms when expanded card should open after compact card
* @defaultvalue 1500
*/
expandedCardOpenDelay?: number;
/**
* Additional ExpandingCard props to pass through HoverCard like renderers, target. gapSpace etc.
* Used along with 'type' prop set to HoverCardType.expanding.
* Reference detail properties in ICardProps and IExpandingCardProps.
*/
expandingCardProps?: IExpandingCardProps;
/**
* Enables instant open of the full card upon click
* @defaultvalue false
*/
instantOpenOnClick?: boolean;
/**
* Callback when card becomes visible
*/
onCardVisible?: () => void;
/**
* Callback when card hides
*/
onCardHide?: () => void;
/**
* HotKey used for opening the HoverCard when tabbed to target.
* @defaultvalue 'KeyCodes.c'
*/
openHotKey?: KeyCodes;
/**
* Additional PlainCard props to pass through HoverCard like renderers, target, gapSpace etc.
* Used along with 'type' prop set to HoverCardType.plain.
* See for more details ICardProps and IPlainCardProps interfaces.
*/
plainCardProps?: IPlainCardProps;
/**
* Whether or not to mark the container as described by the hover card.
* If not specified, the caller should mark as element as described by the hover card id.
*/
setAriaDescribedBy?: boolean;
/**
* Callback when visible card is expanded.
*/
onCardExpand?: () => void;
/**
* Set to true to set focus on the first focusable element in the card. Works in pair with the 'trapFocus' prop.
* @defaultvalue false
*/
setInitialFocus?: boolean;
/**
* Should block hover card or not
*/
shouldBlockHoverCard?: () => void;
/**
* If true disables Card dismiss upon mouse leave, so that card sticks around.
* @defaultvalue false
*/
sticky?: boolean;
/**
* Custom styles for this component
*/
styles?: IStyleFunctionOrObject<IHoverCardStyleProps, IHoverCardStyles>;
/**
* Optional target element to tag hover card on. If not provided and using HoverCard as a wrapper, don't set the
* 'data-is-focusable=true' attribute to the root of the wrapped child.
* If no target is given, HoverCard will use its root as a target and become the focusable element with a
* focus listener attached to it.
*/
target?: HTMLElement | string | null;
/**
* This prop is to separate the target to anchor hover card from the target to attach event listener.
* If set, this prop separates the target to anchor the hover card from the target to attach the event listener.
* When no `eventListenerTarget` given, HoverCard will use `target` prop or its root to set event listener.
*/
eventListenerTarget?: HTMLElement | string | null;
/**
* Theme provided by higher order component.
*/
theme?: ITheme;
/**
* Set to true if you want to render the content of the HoverCard in a FocusTrapZone for accessibility reasons.
* Optionally 'setInitialFocus' prop can be set to true to move focus inside the FocusTrapZone.
*/
trapFocus?: boolean;
/**
* Type of the hover card to render.
* @defaultvalue HoverCardType.expanding
*/
type?: HoverCardType;
}
/**
* {@docCategory HoverCard}
*/
export declare enum OpenCardMode {
/**
* Open card by hover
*/
hover = 0,
/**
* Open card by hot key
*/
hotKey = 1
}
/**
* {@docCategory HoverCard}
*/
export declare enum HoverCardType {
/**
* Plain card consisting of one part responsive to the size of content.
*/
plain = "PlainCard",
/**
* File card consisting of two parts: compact and expanded. Has some default sizes if not specified.
*/
expanding = "ExpandingCard"
}
/**
* {@docCategory HoverCard}
*/
export interface IHoverCardStyleProps {
/**
* Theme provided by High-Order Component.
*/
theme: ITheme;
/**
* Optional className(s) for the host div of HoverCard.
*/
className?: string;
}
/**
* {@docCategory HoverCard}
*/
export interface IHoverCardStyles {
/**
* Style for the host element in the default enabled, non-toggled state.
*/
host?: IStyle;
}
@@ -0,0 +1,29 @@
/**
* {@docCategory HoverCard}
*/
export var OpenCardMode;
(function (OpenCardMode) {
/**
* Open card by hover
*/
OpenCardMode[OpenCardMode["hover"] = 0] = "hover";
/**
* Open card by hot key
*/
OpenCardMode[OpenCardMode["hotKey"] = 1] = "hotKey";
})(OpenCardMode || (OpenCardMode = {}));
/**
* {@docCategory HoverCard}
*/
export var HoverCardType;
(function (HoverCardType) {
/**
* Plain card consisting of one part responsive to the size of content.
*/
HoverCardType["plain"] = "PlainCard";
/**
* File card consisting of two parts: compact and expanded. Has some default sizes if not specified.
*/
HoverCardType["expanding"] = "ExpandingCard";
})(HoverCardType || (HoverCardType = {}));
//# sourceMappingURL=HoverCard.types.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,9 @@
import * as React from 'react';
import type { IPlainCardProps } from './PlainCard.types';
import type { JSXElement } from '@fluentui/utilities';
export declare class PlainCardBase extends React.Component<IPlainCardProps, {}> {
private _classNames;
constructor(props: IPlainCardProps);
render(): JSXElement;
private _onKeyDown;
}
@@ -0,0 +1,31 @@
import { __assign, __extends } from "tslib";
import * as React from 'react';
import { classNamesFunction, initializeComponentRef, KeyCodes } from '../../../Utilities';
import { CardCallout } from '../CardCallout/CardCallout';
var getClassNames = classNamesFunction();
var PlainCardBase = /** @class */ (function (_super) {
__extends(PlainCardBase, _super);
function PlainCardBase(props) {
var _this = _super.call(this, props) || this;
_this._onKeyDown = function (ev) {
// eslint-disable-next-line @typescript-eslint/no-deprecated
if (ev.which === KeyCodes.escape) {
_this.props.onLeave && _this.props.onLeave(ev);
}
};
initializeComponentRef(_this);
return _this;
}
PlainCardBase.prototype.render = function () {
var _a = this.props, styles = _a.styles, theme = _a.theme, className = _a.className;
this._classNames = getClassNames(styles, {
theme: theme,
className: className,
});
var content = (React.createElement("div", { onMouseEnter: this.props.onEnter, onMouseLeave: this.props.onLeave, onKeyDown: this._onKeyDown }, this.props.onRenderPlainCard(this.props.renderData)));
return React.createElement(CardCallout, __assign({}, this.props, { content: content, className: this._classNames.root }));
};
return PlainCardBase;
}(React.Component));
export { PlainCardBase };
//# sourceMappingURL=PlainCard.base.js.map
@@ -0,0 +1 @@
{"version":3,"file":"PlainCard.base.js","sourceRoot":"../src/","sources":["components/HoverCard/PlainCard/PlainCard.base.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC1F,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAKzD,IAAM,aAAa,GAAG,kBAAkB,EAA0C,CAAC;AAEnF;IAAmC,iCAAoC;IAGrE,uBAAY,KAAsB;QAChC,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;QAsBP,gBAAU,GAAG,UAAC,EAAoC;YACxD,4DAA4D;YAC5D,IAAI,EAAE,CAAC,KAAK,KAAK,QAAQ,CAAC,MAAM,EAAE,CAAC;gBACjC,KAAI,CAAC,KAAK,CAAC,OAAO,IAAI,KAAI,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YAC/C,CAAC;QACH,CAAC,CAAC;QAzBA,sBAAsB,CAAC,KAAI,CAAC,CAAC;;IAC/B,CAAC;IAEM,8BAAM,GAAb;QACQ,IAAA,KAA+B,IAAI,CAAC,KAAK,EAAvC,MAAM,YAAA,EAAE,KAAK,WAAA,EAAE,SAAS,eAAe,CAAC;QAEhD,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,MAAO,EAAE;YACxC,KAAK,EAAE,KAAM;YACb,SAAS,WAAA;SACV,CAAC,CAAC;QAEH,IAAM,OAAO,GAAe,CAC1B,6BAAK,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,IAChG,IAAI,CAAC,KAAK,CAAC,iBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CACjD,CACP,CAAC;QAEF,OAAO,oBAAC,WAAW,eAAK,IAAI,CAAC,KAAK,IAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC;IAC7F,CAAC;IAQH,oBAAC;AAAD,CAAC,AAhCD,CAAmC,KAAK,CAAC,SAAS,GAgCjD","sourcesContent":["import * as React from 'react';\n\nimport { classNamesFunction, initializeComponentRef, KeyCodes } from '../../../Utilities';\nimport { CardCallout } from '../CardCallout/CardCallout';\nimport type { IPlainCardProps, IPlainCardStyles, IPlainCardStyleProps } from './PlainCard.types';\n\nimport type { JSXElement } from '@fluentui/utilities';\n\nconst getClassNames = classNamesFunction<IPlainCardStyleProps, IPlainCardStyles>();\n\nexport class PlainCardBase extends React.Component<IPlainCardProps, {}> {\n private _classNames: { [key in keyof IPlainCardStyles]: string };\n\n constructor(props: IPlainCardProps) {\n super(props);\n\n initializeComponentRef(this);\n }\n\n public render(): JSXElement {\n const { styles, theme, className } = this.props;\n\n this._classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n });\n\n const content: JSXElement = (\n <div onMouseEnter={this.props.onEnter} onMouseLeave={this.props.onLeave} onKeyDown={this._onKeyDown}>\n {this.props.onRenderPlainCard!(this.props.renderData)}\n </div>\n );\n\n return <CardCallout {...this.props} content={content} className={this._classNames.root} />;\n }\n\n private _onKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n if (ev.which === KeyCodes.escape) {\n this.props.onLeave && this.props.onLeave(ev);\n }\n };\n}\n"]}
@@ -0,0 +1,3 @@
import * as React from 'react';
import type { IPlainCardProps } from './PlainCard.types';
export declare const PlainCard: React.FunctionComponent<IPlainCardProps>;
@@ -0,0 +1,7 @@
import { styled } from '../../../Utilities';
import { getStyles } from './PlainCard.styles';
import { PlainCardBase } from './PlainCard.base';
export var PlainCard = styled(PlainCardBase, getStyles, undefined, {
scope: 'PlainCard',
});
//# sourceMappingURL=PlainCard.js.map
@@ -0,0 +1 @@
{"version":3,"file":"PlainCard.js","sourceRoot":"../src/","sources":["components/HoverCard/PlainCard/PlainCard.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,MAAM,CAAC,IAAM,SAAS,GAA6C,MAAM,CAIvE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE;IACrC,KAAK,EAAE,WAAW;CACnB,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../../Utilities';\nimport { getStyles } from './PlainCard.styles';\nimport { PlainCardBase } from './PlainCard.base';\nimport type { IPlainCardProps, IPlainCardStyles, IPlainCardStyleProps } from './PlainCard.types';\n\nexport const PlainCard: React.FunctionComponent<IPlainCardProps> = styled<\n IPlainCardProps,\n IPlainCardStyleProps,\n IPlainCardStyles\n>(PlainCardBase, getStyles, undefined, {\n scope: 'PlainCard',\n});\n"]}
@@ -0,0 +1,2 @@
import type { IPlainCardStyles, IPlainCardStyleProps } from './PlainCard.types';
export declare function getStyles(props: IPlainCardStyleProps): IPlainCardStyles;
@@ -0,0 +1,24 @@
import { getGlobalClassNames, HighContrastSelector } from '../../../Styling';
var GlobalClassNames = {
root: 'ms-PlainCard-root',
};
export function getStyles(props) {
var _a;
var theme = props.theme, className = props.className;
var classNames = getGlobalClassNames(GlobalClassNames, theme);
return {
root: [
classNames.root,
{
pointerEvents: 'auto',
selectors: (_a = {},
_a[HighContrastSelector] = {
border: '1px solid WindowText',
},
_a),
},
className,
],
};
}
//# sourceMappingURL=PlainCard.styles.js.map
@@ -0,0 +1 @@
{"version":3,"file":"PlainCard.styles.js","sourceRoot":"../src/","sources":["components/HoverCard/PlainCard/PlainCard.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAG7E,IAAM,gBAAgB,GAAG;IACvB,IAAI,EAAE,mBAAmB;CAC1B,CAAC;AAEF,MAAM,UAAU,SAAS,CAAC,KAA2B;;IAC3C,IAAA,KAAK,GAAgB,KAAK,MAArB,EAAE,SAAS,GAAK,KAAK,UAAV,CAAW;IAEnC,IAAM,UAAU,GAAG,mBAAmB,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;IAEhE,OAAO;QACL,IAAI,EAAE;YACJ,UAAU,CAAC,IAAI;YACf;gBACE,aAAa,EAAE,MAAM;gBACrB,SAAS;oBACP,GAAC,oBAAoB,IAAG;wBACtB,MAAM,EAAE,sBAAsB;qBAC/B;uBACF;aACF;YACD,SAAS;SACV;KACF,CAAC;AACJ,CAAC","sourcesContent":["import { getGlobalClassNames, HighContrastSelector } from '../../../Styling';\nimport type { IPlainCardStyles, IPlainCardStyleProps } from './PlainCard.types';\n\nconst GlobalClassNames = {\n root: 'ms-PlainCard-root',\n};\n\nexport function getStyles(props: IPlainCardStyleProps): IPlainCardStyles {\n const { theme, className } = props;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n return {\n root: [\n classNames.root,\n {\n pointerEvents: 'auto',\n selectors: {\n [HighContrastSelector]: {\n border: '1px solid WindowText',\n },\n },\n },\n className,\n ],\n };\n}\n"]}
@@ -0,0 +1,27 @@
import type { IBaseCardProps, IBaseCardStyles, IBaseCardStyleProps } from '../BaseCard.types';
import type { IRenderFunction } from '../../../Utilities';
/**
* {@docCategory HoverCard}
*/
export interface IPlainCard {
}
/**
* PlainCard component props.
* {@docCategory HoverCard}
*/
export interface IPlainCardProps extends IBaseCardProps<IPlainCard, IPlainCardStyles, IPlainCardStyleProps> {
/**
* Render function to populate compact content area
*/
onRenderPlainCard?: IRenderFunction<any>;
}
/**
* {@docCategory HoverCard}
*/
export interface IPlainCardStyleProps extends IBaseCardStyleProps {
}
/**
* {@docCategory HoverCard}
*/
export interface IPlainCardStyles extends IBaseCardStyles {
}
@@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=PlainCard.types.js.map
@@ -0,0 +1 @@
{"version":3,"file":"PlainCard.types.js","sourceRoot":"../src/","sources":["components/HoverCard/PlainCard/PlainCard.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { IBaseCardProps, IBaseCardStyles, IBaseCardStyleProps } from '../BaseCard.types';\nimport type { IRenderFunction } from '../../../Utilities';\n\n/**\n * {@docCategory HoverCard}\n */\nexport interface IPlainCard {}\n\n/**\n * PlainCard component props.\n * {@docCategory HoverCard}\n */\nexport interface IPlainCardProps extends IBaseCardProps<IPlainCard, IPlainCardStyles, IPlainCardStyleProps> {\n /**\n * Render function to populate compact content area\n */\n onRenderPlainCard?: IRenderFunction<any>;\n}\n\n/**\n * {@docCategory HoverCard}\n */\nexport interface IPlainCardStyleProps extends IBaseCardStyleProps {}\n\n/**\n * {@docCategory HoverCard}\n */\nexport interface IPlainCardStyles extends IBaseCardStyles {}\n"]}
+9
View File
@@ -0,0 +1,9 @@
export * from './HoverCard';
export * from './HoverCard.base';
export * from './HoverCard.types';
export * from './ExpandingCard';
export * from './ExpandingCard.base';
export * from './ExpandingCard.types';
export * from './PlainCard/PlainCard';
export * from './PlainCard/PlainCard.base';
export * from './PlainCard/PlainCard.types';
+10
View File
@@ -0,0 +1,10 @@
export * from './HoverCard';
export * from './HoverCard.base';
export * from './HoverCard.types';
export * from './ExpandingCard';
export * from './ExpandingCard.base';
export * from './ExpandingCard.types';
export * from './PlainCard/PlainCard';
export * from './PlainCard/PlainCard.base';
export * from './PlainCard/PlainCard.types';
//# sourceMappingURL=index.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/HoverCard/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './HoverCard';\nexport * from './HoverCard.base';\nexport * from './HoverCard.types';\nexport * from './ExpandingCard';\nexport * from './ExpandingCard.base';\nexport * from './ExpandingCard.types';\nexport * from './PlainCard/PlainCard';\nexport * from './PlainCard/PlainCard.base';\nexport * from './PlainCard/PlainCard.types';\n"]}