@kwiz/fluentui 1.0.183 → 1.0.184
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.
|
@@ -8,6 +8,7 @@ interface iProps {
|
|
|
8
8
|
/** single line fit, when overflow - more button will trigger this handler */
|
|
9
9
|
useOverflow?: boolean;
|
|
10
10
|
renderOverflowMenuButton?: (props: iOverflowV2Props<iCardProps>) => JSX.Element;
|
|
11
|
+
autoFocusOnFirst?: boolean;
|
|
11
12
|
}
|
|
12
13
|
export declare const CardList: React.FunctionComponent<React.PropsWithChildren<iProps>>;
|
|
13
14
|
export {};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { makeStyles, tokens } from '@fluentui/react-components';
|
|
3
|
+
import { useAutoFocusEX } from '../helpers';
|
|
3
4
|
import { KnownClassNames } from '../styles';
|
|
4
5
|
import { CardEX } from './card';
|
|
5
6
|
import { Centered } from './centered';
|
|
@@ -21,8 +22,9 @@ const useStyles = makeStyles({
|
|
|
21
22
|
});
|
|
22
23
|
export const CardList = (props) => {
|
|
23
24
|
const classes = useStyles();
|
|
25
|
+
const autoFocus = useAutoFocusEX();
|
|
24
26
|
return (!props.useOverflow
|
|
25
|
-
? _jsxs(Horizontal, { main: true, wrap: true, css: [KnownClassNames.cardList, classes.rootStyle], children: [props.backfill && _jsx("div", { className: classes.backfill, children: _jsx(Centered, { children: props.backfill }) }), props.cards.map((card, idx) => _jsx(CardEX, Object.assign({}, card), `i${idx}`))] })
|
|
27
|
+
? _jsxs(Horizontal, { main: true, wrap: true, css: [KnownClassNames.cardList, classes.rootStyle], children: [props.backfill && _jsx("div", { className: classes.backfill, children: _jsx(Centered, { children: props.backfill }) }), props.cards.map((card, idx) => _jsx(CardEX, Object.assign({}, card, { ref: (props.autoFocusOnFirst && idx === 0) ? autoFocus.set : undefined }), `i${idx}`))] })
|
|
26
28
|
: _jsx(KWIZOverflowV2, { root: { css: [classes.rootStyle, classes.overflowStyle] }, items: props.cards, renderItem: (card) => _jsx(CardEX, Object.assign({}, card)), renderOverflowMenuButton: props.renderOverflowMenuButton, children: props.backfill && _jsx("div", { className: classes.backfill, children: _jsx(Centered, { children: props.backfill }) }) }));
|
|
27
29
|
};
|
|
28
30
|
//# sourceMappingURL=card-list.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card-list.js","sourceRoot":"","sources":["../../src/controls/card-list.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAc,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAoB,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEnE,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,QAAQ,EAAE;QACN,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC;QAC1D,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,CAAC,CAAC;KACb;IACD,SAAS,EAAE;QACP,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,CAAC;KACZ;IACD,aAAa,EAAE;QACX,OAAO,EAAE,MAAM,CAAC,oBAAoB;KACvC;CACJ,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"card-list.js","sourceRoot":"","sources":["../../src/controls/card-list.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEhE,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAc,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAoB,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEnE,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,QAAQ,EAAE;QACN,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC;QAC1D,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,CAAC,CAAC;KACb;IACD,SAAS,EAAE;QACP,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,CAAC;KACZ;IACD,aAAa,EAAE;QACX,OAAO,EAAE,MAAM,CAAC,oBAAoB;KACvC;CACJ,CAAC,CAAC;AAUH,MAAM,CAAC,MAAM,QAAQ,GAA6D,CAAC,KAAK,EAAE,EAAE;IACxF,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,MAAM,SAAS,GAAG,cAAc,EAAE,CAAC;IACnC,OAAO,CAAC,CAAC,KAAK,CAAC,WAAW;QACtB,CAAC,CAAC,MAAC,UAAU,IAAC,IAAI,QAAC,IAAI,QAAC,GAAG,EAAE,CAAC,eAAe,CAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,CAAC,aACrE,KAAK,CAAC,QAAQ,IAAI,cAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,YAC/C,KAAC,QAAQ,cACJ,KAAK,CAAC,QAAQ,GACR,GACT,EAEL,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,KAAC,MAAM,oBAAqB,IAAI,IAAE,GAAG,EAAE,CAAC,KAAK,CAAC,gBAAgB,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,KAA3F,IAAI,GAAG,EAAE,CAAsF,CAAC,IACpI;QACb,CAAC,CAAC,KAAC,cAAc,IAAC,IAAI,EAAE,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,aAAa,CAAC,EAAE,EACvE,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,UAAU,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,KAAC,MAAM,oBAAM,IAAI,EAAI,EAC3C,wBAAwB,EAAE,KAAK,CAAC,wBAAwB,YAC1D,KAAK,CAAC,QAAQ,IAAI,cAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,YAChD,KAAC,QAAQ,cACJ,KAAK,CAAC,QAAQ,GACR,GACT,GAAkB,CAC3B,CAAC;AACN,CAAC,CAAA"}
|
package/dist/controls/card.d.ts
CHANGED
|
@@ -11,4 +11,4 @@ export interface iCardProps {
|
|
|
11
11
|
footer?: JSX.Element;
|
|
12
12
|
onClick: React.MouseEventHandler<HTMLDivElement>;
|
|
13
13
|
}
|
|
14
|
-
export declare const CardEX: React.
|
|
14
|
+
export declare const CardEX: (props: iCardProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element | null;
|
package/dist/controls/card.js
CHANGED
|
@@ -2,6 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
2
2
|
import { Card, CardFooter, cardFooterClassNames, CardHeader, CardPreview, InfoLabel, Label, labelClassNames, makeStyles, tokens } from '@fluentui/react-components';
|
|
3
3
|
import { MoreVerticalRegular } from '@fluentui/react-icons';
|
|
4
4
|
import { isNotEmptyArray, isNotEmptyString, isNullOrEmptyArray, isNullOrUndefined, stopEvent } from '@kwiz/common';
|
|
5
|
+
import React from 'react';
|
|
5
6
|
import { useKWIZFluentContext } from '../helpers/context-internal';
|
|
6
7
|
import { MenuEx } from './menu';
|
|
7
8
|
const useStyles = makeStyles({
|
|
@@ -48,16 +49,16 @@ const useStyles = makeStyles({
|
|
|
48
49
|
}
|
|
49
50
|
}
|
|
50
51
|
});
|
|
51
|
-
export const CardEX = (props) => {
|
|
52
|
+
export const CardEX = React.forwardRef((props, ref) => {
|
|
52
53
|
var _a, _b;
|
|
53
54
|
const ctx = useKWIZFluentContext();
|
|
54
55
|
const classes = useStyles();
|
|
55
56
|
const hasDescription = isNotEmptyString(props.description);
|
|
56
57
|
const hasActions = isNotEmptyArray(props.menuItems) || !isNullOrUndefined(props.footer);
|
|
57
|
-
return (_jsxs(Card, { className: classes.card, onClick: props.onClick, children: [_jsx(CardPreview, { children: _jsxs("div", { className: hasDescription ? classes.previewContent : classes.previewContentNoDescription, children: [_jsx(props.icon, { className: classes.cardIcon }), !hasDescription && _jsxs(_Fragment, { children: [_jsx("br", {}), _jsx(Label, { children: props.title })] })] }) }), hasDescription && _jsx(CardHeader, { header: isNullOrUndefined(props.titleInfo)
|
|
58
|
+
return (_jsxs(Card, { className: classes.card, onClick: props.onClick, ref: ref, children: [_jsx(CardPreview, { children: _jsxs("div", { className: hasDescription ? classes.previewContent : classes.previewContentNoDescription, children: [_jsx(props.icon, { className: classes.cardIcon }), !hasDescription && _jsxs(_Fragment, { children: [_jsx("br", {}), _jsx(Label, { children: props.title })] })] }) }), hasDescription && _jsx(CardHeader, { header: isNullOrUndefined(props.titleInfo)
|
|
58
59
|
? _jsx(Label, { title: props.title, className: classes.cardLabels, children: props.title })
|
|
59
60
|
: _jsx(InfoLabel, { title: props.title, infoButton: { onClick: e => stopEvent(e) }, className: classes.cardInfoLabel, info: props.titleInfo, children: props.title }), description: _jsx(Label, { className: classes.cardLabels, size: 'small', title: props.description || "", children: props.description || "" }) }), hasActions && _jsx(CardFooter, { action: isNullOrEmptyArray(props.menuItems)
|
|
60
61
|
? undefined
|
|
61
62
|
: _jsx(MenuEx, { trigger: { title: ((_b = (_a = ctx.strings) === null || _a === void 0 ? void 0 : _a.btn_more_dots) === null || _b === void 0 ? void 0 : _b.call(_a).toLowerCase()) || 'more...', icon: _jsx(MoreVerticalRegular, {}) }, items: props.menuItems }), children: props.footer })] }));
|
|
62
|
-
};
|
|
63
|
+
});
|
|
63
64
|
//# sourceMappingURL=card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/controls/card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,oBAAoB,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAkB,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpL,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/controls/card.tsx"],"names":[],"mappings":"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"}
|