@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
37 lines (36 loc) • 2.59 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import { Card } from '@workday/canvas-kit-react/card';
import { createSubcomponent, createElemPropsHook, } from '@workday/canvas-kit-react/common';
import { getTransformFromPlacement } from '@workday/canvas-kit-react/popup';
import { system } from '@workday/canvas-tokens-web';
import { useMenuModel } from './useMenuModel';
import { createStencil, calc, px2rem } from '@workday/canvas-kit-styling';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
export const menuCardStencil = createStencil({
vars: {
minWidth: px2rem(1),
transformOriginVertical: 'top',
transformOriginHorizontal: 'left',
maxHeight: '',
},
base: { name: "3n866s", styles: "--minWidth-menu-card-379062:0.0625rem;--transformOriginVertical-menu-card-379062:top;--transformOriginHorizontal-menu-card-379062:left;box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);position:relative;display:flex;flex-direction:column;transition:transform ease-out 150ms;padding:var(--cnvs-sys-space-zero);max-width:calc(100vw - var(--cnvs-sys-space-x8));box-shadow:var(--cnvs-sys-depth-3);min-width:var(--minWidth-menu-card-379062);max-height:var(--maxHeight-menu-card-379062);transform-origin:var(--transformOriginVertical-menu-card-379062) var(--transformOriginHorizontal-menu-card-379062);.wd-no-animation &{animation:none;}" }
}, "menu-card-379062");
export const useMenuCard = createElemPropsHook(useMenuModel)(() => {
return {};
});
export const MenuCard = createSubcomponent('div')({
displayName: 'Menu.Card',
modelHook: useMenuModel,
elemPropsHook: useMenuCard,
})(({ minWidth, maxHeight, ...elemProps }, Element, model) => {
const transformOrigin = React.useMemo(() => {
return getTransformFromPlacement(model.state.placement || 'bottom');
}, [model.state.placement]);
return (_jsx(Card, { as: Element, ...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 }));
});