@workday/canvas-kit-react/dist/es6/popup/lib/PopupCard.js

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import { Card } from '@workday/canvas-kit-react/card';
import { createSubcomponent, getTransformOrigin, } from '@workday/canvas-kit-react/common';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { calc, createStencil, createVars, cssVar, keyframes, px2rem, } from '@workday/canvas-kit-styling';
import { base, system } from '@workday/canvas-tokens-web';
import { getTransformFromPlacement } from './getTransformFromPlacement';
import { usePopupCard, usePopupModel } from './hooks';
const translateVars = createVars({ id: "77342a", args: ["positionX", "positionY"] });
/**
 * Keyframe for the dots loading animation.
 */
const fadeIn = keyframes({ name: "23at2h", styles: "0%{opacity:1;transform:translate(var(--positionX-77342a), var(--positionY-77342a));}100%{opacity:1;transform:translate(0);}" });
function getSpace(value) {
    // TODO (deprecated tokens): Revisit tokens after removal of style props
    const spaceMap = {
        zero: system.legacy.gap.none,
        xxxs: system.legacy.gap.xs,
        xxs: system.legacy.gap.sm,
        xs: px2rem(12),
        s: system.legacy.gap.md,
        m: system.legacy.gap.lg,
        l: system.legacy.gap.xl,
        xl: px2rem(40),
        xxl: system.legacy.gap.xxl,
        xxxl: px2rem(80),
    };
    if (value && value in spaceMap) {
        return spaceMap[value];
    }
    else {
        return value;
    }
}
function getMaxHeight(margin) {
    // set the default margin offset to 40px
    let marginOffset = base.legacy.size500;
    if (margin) {
        // parse the margin prop
        if (typeof margin === 'string') {
            const marginValues = margin.split(' ');
            const marginTop = getSpace(marginValues[0]);
            // If provided, use the specific margin-bottom in the shorthand, otherwise use the margin-top value
            const marginBottom = getSpace(marginValues[2]) || marginTop;
            marginOffset = `(${marginTop} + ${marginBottom})`;
        }
        else {
            // if margin is a number, double it to get the offset
            marginOffset = `${margin * 2}px`;
        }
    }
    return `calc(100dvh - ${marginOffset})`;
}
export const popupCardStencil = createStencil({
    vars: {
        maxHeight: '',
        transformOriginHorizontal: '',
        transformOriginVertical: '',
    },
    base: { name: "2ts81p", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));color:var(--cnvs-sys-color-fg-default);position:relative;max-width:calc(100vw - var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem)));gap:var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));box-shadow:var(--cnvs-sys-depth-4);min-height:0;padding:var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));border-radius:var(--cnvs-sys-shape-xxxl, 2rem);max-height:var(--maxHeight-popup-card-b9f0ce);overflow-y:auto;animation-name:animation-23at2h;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--transformOriginVertical-popup-card-b9f0ce) var(--transformOriginHorizontal-popup-card-b9f0ce);.wd-no-animation &{animation:none;}@media screen and (max-width: 768px){transform-origin:bottom center;padding:var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));}" }
}, "popup-card-b9f0ce");
export const PopupCard = createSubcomponent('div')({
    displayName: 'Popup.Card',
    modelHook: usePopupModel,
    elemPropsHook: usePopupCard,
})(({ children, ref, variant, ...elemProps }, Element, model) => {
    const transformOrigin = React.useMemo(() => {
        return getTransformFromPlacement(model.state.placement || 'bottom');
    }, [model.state.placement]);
    const translate = getTransformOrigin(transformOrigin, system.legacy.gap.sm);
    const cardMaxHeight = getMaxHeight(elemProps.margin);
    return (_jsx(Card, { as: Element, ref: ref, variant: variant, ...mergeStyles(elemProps, [
            popupCardStencil({
                transformOriginHorizontal: transformOrigin.horizontal,
                transformOriginVertical: transformOrigin.vertical,
                maxHeight: cardMaxHeight,
            }),
            translateVars({ positionX: translate.x, positionY: translate.y }),
        ]), children: children }));
});