@kwiz/fluentui/dist/controls/card-list.js

KWIZ common controls for FluentUI

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { makeStyles, tokens } from '@fluentui/react-components';
import { useAutoFocusEX } from '../helpers';
import { KnownClassNames } from '../styles';
import { CardEX } from './card';
import { Centered } from './centered';
import { Horizontal } from './horizontal';
import { KWIZOverflowV2 } from './kwizoverflow2';
const useStyles = makeStyles({
    backfill: {
        position: "absolute", top: 0, bottom: 0, left: 0, right: 0,
        display: "flex",
        zIndex: -1
    },
    rootStyle: {
        position: "relative",
        zIndex: 0
    },
    overflowStyle: {
        padding: tokens.spacingHorizontalXXS
    }
});
export const CardList = (props) => {
    const classes = useStyles();
    const autoFocus = useAutoFocusEX();
    return (!props.useOverflow
        ? _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}`))] })
        : _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 }) }) }));
};
//# sourceMappingURL=card-list.js.map