@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
34 lines (33 loc) • 2.4 kB
JavaScript
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, base } 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',
},
base: { name: "d5h42s", styles: "--minWidth-menu-card-07ca6c:0.0625rem;--transformOriginVertical-menu-card-07ca6c:top;--transformOriginHorizontal-menu-card-07ca6c: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-base-palette-black-pepper-300);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-07ca6c);transform-origin:var(--transformOriginVertical-menu-card-07ca6c) var(--transformOriginHorizontal-menu-card-07ca6c);.wd-no-animation &{animation:none;}" }
}, "menu-card-07ca6c");
export const useMenuCard = createElemPropsHook(useMenuModel)(() => {
return {};
});
export const MenuCard = createSubcomponent('div')({
displayName: 'Menu.Card',
modelHook: useMenuModel,
elemPropsHook: useMenuCard,
})(({ minWidth, ...elemProps }, Element, model) => {
const transformOrigin = React.useMemo(() => {
return getTransformFromPlacement(model.state.placement || 'bottom');
}, [model.state.placement]);
return (React.createElement(Card, { as: Element, ...mergeStyles(elemProps, menuCardStencil({
minWidth: typeof minWidth === 'number' ? px2rem(minWidth) : minWidth,
transformOriginVertical: transformOrigin.vertical,
transformOriginHorizontal: transformOrigin.horizontal,
})) }, elemProps.children));
});