@workday/canvas-kit-react/dist/es6/menu/lib/MenuCard.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 { listBoxContainerStencil } from '@workday/canvas-kit-react/collection';
import { cornerShapeStencil, createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { getTransformFromPlacement } from '@workday/canvas-kit-react/popup';
import { calc, createStencil, cssVar, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
import { useMenuModel } from './useMenuModel';
export const menuCardStencil = createStencil({
    extends: cornerShapeStencil,
    vars: {
        minWidth: px2rem(1),
        transformOriginVertical: 'top',
        transformOriginHorizontal: 'left',
        maxHeight: '',
    },
    base: { name: "3migbw", styles: "--minWidth-menu-card-58e679:0.0625rem;--transformOriginVertical-menu-card-58e679:top;--transformOriginHorizontal-menu-card-58e679:left;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));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));color:var(--cnvs-sys-color-fg-strong);position:relative;display:flex;flex-direction:column;transition:transform ease-out 150ms;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));max-width:calc(100vw - var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem)));box-shadow:var(--cnvs-sys-depth-3);min-width:var(--minWidth-menu-card-58e679);max-height:var(--maxHeight-menu-card-58e679, 60vh);transform-origin:var(--transformOriginVertical-menu-card-58e679) var(--transformOriginHorizontal-menu-card-58e679);.wd-no-animation &{animation:none;}&:where(:has([data-part=\"list-box-container\"])){overflow:hidden;}& :where([data-part=\"list-box-container\"]){border-radius:var(--cnvs-sys-shape-lg, 0.75rem);min-height:0;}" }
}, "menu-card-58e679");
export const useMenuCard = createElemPropsHook(useMenuModel)(() => {
    return {};
});
export const MenuCard = createSubcomponent('div')({
    displayName: 'Menu.Card',
    modelHook: useMenuModel,
    elemPropsHook: useMenuCard,
})(({ minWidth, maxHeight, variant, ...elemProps }, Element, model) => {
    const transformOrigin = React.useMemo(() => {
        return getTransformFromPlacement(model.state.placement || 'bottom');
    }, [model.state.placement]);
    return (_jsx(Card, { as: Element, variant: variant, ...mergeStyles(elemProps, menuCardStencil({
            minWidth: typeof minWidth === 'number' ? px2rem(minWidth) : minWidth,
            maxHeight: typeof maxHeight === 'number' ? px2rem(maxHeight) : maxHeight,
            transformOriginVertical: transformOrigin.vertical,
            transformOriginHorizontal: transformOrigin.horizontal,
        })), children: elemProps.children }));
});