require("./CardView.css");
var $230078a1c4ce81d8$exports = require("./Card.cjs");
var $a4f1585b527b9b7a$exports = require("./ImageCoordinator.cjs");
var $85bf454149fe9ddc$exports = require("./ActionBar.cjs");
var $150382364eecc4bc$exports = require("./useDOMRef.cjs");
var $ac757a4c2bd72aee$exports = require("../../icons/useSpectrumContextProps.cjs");
var $gDulG$reactjsxruntime = require("react/jsx-runtime");
var $gDulG$reactariacomponentsGridList = require("react-aria-components/GridList");
var $gDulG$reactariaCollection = require("react-aria/Collection");
var $gDulG$react = require("react");
var $gDulG$reactariacomponentsVirtualizer = require("react-aria-components/Virtualizer");
var $gDulG$reactariaprivateutilsuseEffectEvent = require("react-aria/private/utils/useEffectEvent");
var $gDulG$reactariaprivateutilsuseLayoutEffect = require("react-aria/private/utils/useLayoutEffect");
var $gDulG$reactariaprivateutilsuseResizeObserver = require("react-aria/private/utils/useResizeObserver");


function $parcel$export(e, n, v, s) {
  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}

$parcel$export(module.exports, "CardViewContext", () => $1aaf8931044a97bd$export$64992ac69f286e5c);
$parcel$export(module.exports, "CardView", () => $1aaf8931044a97bd$export$7e52c821f7b6f422);
/*
 * Copyright 2024 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */ 












const $1aaf8931044a97bd$var$layoutOptions = {
    XS: {
        compact: {
            minSpace: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(6, 6),
            minItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(100, 100),
            maxItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(140, 140)
        },
        regular: {
            minSpace: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(8, 8),
            minItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(100, 100),
            maxItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(140, 140)
        },
        spacious: {
            minSpace: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(12, 12),
            minItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(100, 100),
            maxItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(140, 140)
        }
    },
    S: {
        compact: {
            minSpace: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(8, 8),
            minItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(150, 150),
            maxItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(210, 210)
        },
        regular: {
            minSpace: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(12, 12),
            minItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(150, 150),
            maxItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(210, 210)
        },
        spacious: {
            minSpace: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(16, 16),
            minItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(150, 150),
            maxItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(210, 210)
        }
    },
    M: {
        compact: {
            minSpace: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(12, 12),
            minItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(200, 200),
            maxItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(280, 280)
        },
        regular: {
            minSpace: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(16, 16),
            minItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(200, 200),
            maxItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(280, 280)
        },
        spacious: {
            minSpace: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(20, 20),
            minItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(200, 200),
            maxItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(280, 280)
        }
    },
    L: {
        compact: {
            minSpace: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(16, 16),
            minItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(270, 270),
            maxItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(370, 370)
        },
        regular: {
            minSpace: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(20, 20),
            minItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(270, 270),
            maxItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(370, 370)
        },
        spacious: {
            minSpace: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(24, 24),
            minItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(270, 270),
            maxItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(370, 370)
        }
    },
    XL: {
        compact: {
            minSpace: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(20, 20),
            minItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(340, 340),
            maxItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(460, 460)
        },
        regular: {
            minSpace: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(24, 24),
            minItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(340, 340),
            maxItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(460, 460)
        },
        spacious: {
            minSpace: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(28, 28),
            minItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(340, 340),
            maxItemSize: new (0, $gDulG$reactariacomponentsVirtualizer.Size)(460, 460)
        }
    }
};
const $1aaf8931044a97bd$var$SIZES = [
    'XS',
    'S',
    'M',
    'L',
    'XL'
];
const $1aaf8931044a97bd$var$cardViewStyles = function anonymous(props, overrides) {
    let rules = " ";
    let height = false;
    let matches = String(overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
    for (let p of matches){
        if (p[1] === "F") height = true;
        rules += p[0];
    }
    if (props.isLoading) rules += ' Pc12';
    else rules += ' Pa12';
    if (props.isEmpty) rules += ' sd12';
    rules += ' _oa12';
    rules += ' _ta12';
    rules += ' eb12';
    rules += ' _Ca12';
    if (props.isEmpty) {
        if (props.isFocusVisible) rules += ' _Lf12';
    } else rules += ' _Le12';
    rules += ' Oh12';
    rules += ' Olc12';
    rules += ' _Mc12';
    rules += ' _Kb12';
    if (props.isActionBar) {
        if (!height) rules += ' Fb12';
    }
    return rules;
};
const $1aaf8931044a97bd$var$wrapperStyles = function anonymous(props, overrides) {
    let rules = " ";
    let position = false;
    let matches = String(overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
    for (let p of matches){
        if (p[1] === "_P") position = true;
        rules += p[0];
    }
    if (!position) rules += ' _Pc12';
    rules += ' _Nb12';
    rules += ' Pb12';
    return rules;
};
const $1aaf8931044a97bd$export$64992ac69f286e5c = /*#__PURE__*/ (0, $gDulG$react.createContext)(null);
const $1aaf8931044a97bd$export$7e52c821f7b6f422 = /*#__PURE__*/ (0, $gDulG$react.forwardRef)(function CardView(props, ref) {
    [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $1aaf8931044a97bd$export$64992ac69f286e5c);
    let { children: children, layout: layoutName = 'grid', size: sizeProp = 'M', density: density = 'regular', variant: variant = 'primary', selectionStyle: selectionStyle = 'checkbox', UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, loadingState: loadingState, onLoadMore: onLoadMore, items: items, renderEmptyState: renderEmptyStateProp, ...otherProps } = props;
    let domRef = (0, $150382364eecc4bc$exports.useDOMRef)(ref);
    let innerRef = (0, $gDulG$react.useRef)(null);
    let scrollRef = props.renderActionBar ? innerRef : domRef;
    // This calculates the maximum t-shirt size where at least two columns fit in the available width.
    let [maxSizeIndex, setMaxSizeIndex] = (0, $gDulG$react.useState)($1aaf8931044a97bd$var$SIZES.length - 1);
    let updateSize = (0, $gDulG$react.useCallback)(()=>{
        let w = scrollRef.current?.clientWidth ?? 0;
        let i = $1aaf8931044a97bd$var$SIZES.length - 1;
        while(i > 0){
            let opts = $1aaf8931044a97bd$var$layoutOptions[$1aaf8931044a97bd$var$SIZES[i]][density];
            if (w >= opts.minItemSize.width * 2 + opts.minSpace.width * 3) break;
            i--;
        }
        setMaxSizeIndex(i);
    }, [
        scrollRef,
        density
    ]);
    let updateSizeEvent = (0, $gDulG$reactariaprivateutilsuseEffectEvent.useEffectEvent)(updateSize);
    (0, $gDulG$reactariaprivateutilsuseResizeObserver.useResizeObserver)({
        ref: scrollRef,
        box: 'border-box',
        onResize: updateSize
    });
    (0, $gDulG$reactariaprivateutilsuseLayoutEffect.useLayoutEffect)(()=>{
        updateSizeEvent();
    }, []);
    // The actual rendered t-shirt size is the minimum between the size prop and the maximum possible size.
    let size = $1aaf8931044a97bd$var$SIZES[Math.min(maxSizeIndex, $1aaf8931044a97bd$var$SIZES.indexOf(sizeProp))];
    let layout = layoutName === 'waterfall' ? (0, $gDulG$reactariacomponentsVirtualizer.WaterfallLayout) : (0, $gDulG$reactariacomponentsVirtualizer.GridLayout);
    let options = $1aaf8931044a97bd$var$layoutOptions[size][density];
    let ctx = (0, $gDulG$react.useMemo)(()=>({
            size: size,
            variant: variant
        }), [
        size,
        variant
    ]);
    let { selectedKeys: selectedKeys, onSelectionChange: onSelectionChange, actionBar: actionBar, actionBarHeight: actionBarHeight } = (0, $85bf454149fe9ddc$exports.useActionBarContainer)({
        ...props,
        scrollRef: scrollRef
    });
    let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
    let renderer;
    let cardLoadingSentinel = /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $gDulG$reactariacomponentsGridList.GridListLoadMoreItem), {
        isLoading: isLoading,
        onLoadMore: onLoadMore
    });
    if (typeof children === 'function' && items) renderer = /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsxs)((0, $gDulG$reactjsxruntime.Fragment), {
        children: [
            /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $gDulG$reactariaCollection.Collection), {
                items: items,
                dependencies: props.dependencies,
                children: children
            }),
            cardLoadingSentinel
        ]
    });
    else renderer = /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsxs)((0, $gDulG$reactjsxruntime.Fragment), {
        children: [
            children,
            cardLoadingSentinel
        ]
    });
    // Wrap the renderEmptyState function so that it is not called when there is a skeleton loader.
    let renderEmptyState = renderEmptyStateProp ? (renderProps)=>{
        let collection = renderProps.state.collection;
        let firstKey = collection.getFirstKey();
        if (firstKey == null || collection.getItem(firstKey)?.type !== 'skeleton') return renderEmptyStateProp(renderProps);
    } : undefined;
    let cardViewCtx = (0, $gDulG$react.useMemo)(()=>({
            layout: layoutName,
            ElementType: (0, $gDulG$reactariacomponentsGridList.GridListItem)
        }), [
        layoutName
    ]);
    let cardView = /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $gDulG$reactariacomponentsVirtualizer.Virtualizer), {
        layout: layout,
        layoutOptions: options,
        children: /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $230078a1c4ce81d8$exports.InternalCardViewContext).Provider, {
            value: cardViewCtx,
            children: /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $230078a1c4ce81d8$exports.CardContext).Provider, {
                value: ctx,
                children: /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $a4f1585b527b9b7a$exports.ImageCoordinator), {
                    children: /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsx)((0, $gDulG$reactariacomponentsGridList.GridList), {
                        ref: scrollRef,
                        ...otherProps,
                        renderEmptyState: renderEmptyState,
                        items: items,
                        layout: "grid",
                        selectionBehavior: selectionStyle === 'highlight' ? 'replace' : 'toggle',
                        selectedKeys: selectedKeys,
                        defaultSelectedKeys: undefined,
                        onSelectionChange: onSelectionChange,
                        style: {
                            ...!props.renderActionBar ? UNSAFE_style : {},
                            // Add padding at the bottom when the action bar is visible so users can scroll to the last items.
                            // Also add scroll padding so keyboard navigating preserves the padding.
                            paddingBottom: actionBarHeight > 0 ? actionBarHeight + options.minSpace.height : 0,
                            scrollPadding: options.minSpace.height,
                            scrollPaddingBottom: actionBarHeight + options.minSpace.height
                        },
                        className: (renderProps)=>(!props.renderActionBar ? UNSAFE_className : '') + $1aaf8931044a97bd$var$cardViewStyles({
                                ...renderProps,
                                isLoading: props.loadingState === 'loading',
                                isActionBar: !!props.renderActionBar
                            }, !props.renderActionBar ? styles : undefined),
                        children: renderer
                    })
                })
            })
        })
    });
    // Add extra wrapper if there is an action bar so we can position relative to it.
    // ActionBar cannot be inside the GridList due to ARIA and focus management requirements.
    if (props.renderActionBar) return /*#__PURE__*/ (0, $gDulG$reactjsxruntime.jsxs)("div", {
        ref: domRef,
        className: UNSAFE_className + $1aaf8931044a97bd$var$wrapperStyles(null, styles),
        style: UNSAFE_style,
        children: [
            cardView,
            actionBar
        ]
    });
    return cardView;
});


//# sourceMappingURL=CardView.cjs.map
