UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

34 lines (33 loc) 2.4 kB
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)); });