@workday/canvas-kit-react 11.0.0-alpha.716-next.0 → 11.0.0-alpha.718-next.0

package/dist/es6/menu/index.d.ts

@@ -2,7 +2,7 @@ export { useMenuModel } from './lib/useMenuModel';
 export { Menu } from './lib/Menu';
 export { useMenuCard } from './lib/MenuCard';
 export { useMenuItem, StyledMenuItem, MenuItemProps } from './lib/MenuItem';
-export { useMenuList } from './lib/MenuList';
+export { useMenuList, menuListStencil } from './lib/MenuList';
 export { useMenuPopper } from './lib/MenuPopper';
 export { useMenuTarget, useMenuTargetContext } from './lib/MenuTarget';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAC,IAAI,EAAC,MAAM,YAAY,CAAC;AAEhC,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAC,WAAW,EAAE,cAAc,EAAE,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAC,aAAa,EAAE,oBAAoB,EAAC,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAC,IAAI,EAAC,MAAM,YAAY,CAAC;AAEhC,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAC,WAAW,EAAE,cAAc,EAAE,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EAAC,WAAW,EAAE,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAC,aAAa,EAAE,oBAAoB,EAAC,MAAM,kBAAkB,CAAC"}

package/dist/es6/menu/index.js

@@ -2,6 +2,6 @@ export { useMenuModel } from './lib/useMenuModel';
 export { Menu } from './lib/Menu';
 export { useMenuCard } from './lib/MenuCard';
 export { useMenuItem, StyledMenuItem } from './lib/MenuItem';
-export { useMenuList } from './lib/MenuList';
+export { useMenuList, menuListStencil } from './lib/MenuList';
 export { useMenuPopper } from './lib/MenuPopper';
 export { useMenuTarget, useMenuTargetContext } from './lib/MenuTarget';

package/dist/es6/menu/lib/MenuCard.d.ts

@@ -4,6 +4,15 @@ import { ExtractProps } from '@workday/canvas-kit-react/common';
 export interface MenuCardProps extends ExtractProps<typeof Card, never> {
     children?: React.ReactNode;
 }
+export declare const menuCardStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{
+    minWidth: string;
+    transformOriginVertical: string;
+    transformOriginHorizontal: string;
+}, never>, {
+    minWidth: string;
+    transformOriginVertical: string;
+    transformOriginHorizontal: string;
+}, never, never>;
 export declare const useMenuCard: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         stackRef: React.RefObject<HTMLDivElement>;

package/dist/es6/menu/lib/MenuCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuCard.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAKL,YAAY,EAEb,MAAM,kCAAkC,CAAC;AAK1C,MAAM,WAAW,aAAc,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA0BD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAEtB,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBnB,CAAC"}
+{"version":3,"file":"MenuCard.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAEL,YAAY,EAEb,MAAM,kCAAkC,CAAC;AAQ1C,MAAM,WAAW,aAAc,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe;;;;;;;;gBAwB1B,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAEtB,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBnB,CAAC"}

package/dist/es6/menu/lib/MenuCard.js

@@ -1,26 +1,19 @@
 import * as React from 'react';
 import { Card } from '@workday/canvas-kit-react/card';
-import { space, type } from '@workday/canvas-kit-react/tokens';
-import { styled, createSubcomponent, createElemPropsHook, } from '@workday/canvas-kit-react/common';
+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';
-const StyledCard = styled(Card)(type.levels.subtext.large, {
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-}, ({ transformOrigin }) => {
-    if (transformOrigin == null) {
-        return {};
-    }
-    return {
-        transition: `transform ease-out 150ms`,
-        transformOrigin: `${transformOrigin.vertical} ${transformOrigin.horizontal}`,
-        // Allow overriding of animation in special cases
-        '.wd-no-animation &': {
-            animation: 'none',
-        },
-    };
-});
+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: "fk6heg", styles: "--cnvs-menu-card-minWidth:0.0625rem;--cnvs-menu-card-transformOriginVertical:top;--cnvs-menu-card-transformOriginHorizontal:left;font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-100, 1.25rem);font-size:var(--cnvs-base-font-size-75, 0.875rem);letter-spacing:var(--cnvs-base-letter-spacing-150, 0.015rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));position:relative;display:flex;flex-direction:column;transition:transform ease-out 150ms;padding:var(--cnvs-sys-space-zero, 0);max-width:calc(100vw - var(--cnvs-sys-space-x8, calc(0.25rem * 8)));box-shadow:var(--cnvs-sys-depth-3, 0 0.1875rem 0.75rem 0 rgba(31,38,46,0.12),0 0.375rem 1.5rem 0 rgba(31,38,46,0.08));min-width:var(--cnvs-menu-card-minWidth);box-sizing:border-box;transform-origin:var(--cnvs-menu-card-transformOriginVertical) var(--cnvs-menu-card-transformOriginHorizontal);.wd-no-animation &{animation:none;}" }
+}, "menu-card");
 export const useMenuCard = createElemPropsHook(useMenuModel)(() => {
     return {};
 });
@@ -28,9 +21,13 @@ export const MenuCard = createSubcomponent('div')({
     displayName: 'Menu.Card',
     modelHook: useMenuModel,
     elemPropsHook: useMenuCard,
-})((elemProps, Element, model) => {
+})(({ minWidth, ...elemProps }, Element, model) => {
     const transformOrigin = React.useMemo(() => {
         return getTransformFromPlacement(model.state.placement || 'bottom');
     }, [model.state.placement]);
-    return (React.createElement(StyledCard, Object.assign({ as: Element, maxWidth: `calc(100vw - ${space.l})`, transformOrigin: transformOrigin, padding: "zero", depth: 3 }, elemProps), elemProps.children));
+    return (React.createElement(Card, Object.assign({ as: Element }, mergeStyles(elemProps, menuCardStencil({
+        minWidth: typeof minWidth === 'number' ? px2rem(minWidth) : minWidth,
+        transformOriginVertical: transformOrigin.vertical,
+        transformOriginHorizontal: transformOrigin.horizontal,
+    }))), elemProps.children));
 });

package/dist/es6/menu/lib/MenuList.d.ts

@@ -82,6 +82,16 @@ export declare const useMenuList: import("@workday/canvas-kit-react/common").Beh
     role: string;
     'aria-labelledby': string;
 }>;
+export declare const menuListStencil: import("@workday/canvas-kit-styling").Stencil<{
+    orientation: {
+        vertical: {
+            flexDirection: "column";
+        };
+        horizontal: {
+            flexDirection: "row";
+        };
+    };
+}, {}, never, never>;
 export declare const MenuList: import("@workday/canvas-kit-react/common").ElementComponentM<"div", MenuListProps<any>, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;

package/dist/es6/menu/lib/MenuList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAGL,YAAY,EAEb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,OAAO,EAAE,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAKxE,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,GAAG,CACpC,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC7D;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBnB,CAAC"}
+{"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,YAAY,EAEb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,OAAO,EAAE,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAQxE,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,GAAG,CACpC,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC7D;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASvB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;oBAiB1B,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBnB,CAAC"}

package/dist/es6/menu/lib/MenuList.js

@@ -1,19 +1,30 @@
 import * as React from 'react';
-import { commonColors } from '@workday/canvas-kit-react/tokens';
 import { createSubcomponent, createElemPropsHook, composeHooks, } from '@workday/canvas-kit-react/common';
 import { ListBox } from '@workday/canvas-kit-react/collection';
 import { useReturnFocus, useFocusRedirect } from '@workday/canvas-kit-react/popup';
 import { useMenuModel } from './useMenuModel';
+import { createStencil, cssVar } from '@workday/canvas-kit-styling';
+import { base, system } from '@workday/canvas-tokens-web';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
 export const useMenuList = composeHooks(createElemPropsHook(useMenuModel)(model => {
     return {
         role: 'menu',
         'aria-labelledby': model.state.id,
     };
 }), useReturnFocus, useFocusRedirect);
+export const menuListStencil = createStencil({
+    base: { name: "1xutlrd", styles: "background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));border-radius:var(--cnvs-sys-shape-zero, 0rem);padding:var(--cnvs-sys-space-zero, 0);gap:var(--cnvs-sys-space-zero, 0);" },
+    modifiers: {
+        modifiers: {
+            vertical: { name: "cgq59l", styles: "flex-direction:column;" },
+            horizontal: { name: "1l0z8uk", styles: "flex-direction:row;" }
+        }
+    }
+}, "menu-list");
 export const MenuList = createSubcomponent('div')({
     displayName: 'Menu.List',
     modelHook: useMenuModel,
     elemPropsHook: useMenuList,
 })(({ children, ...elemProps }, Element, model) => {
-    return (React.createElement(ListBox, Object.assign({ as: Element, model: model, background: commonColors.background, borderRadius: "zero", padding: "zero", marginY: "xxs", gap: "zero", overflowY: "auto", flexDirection: model.state.orientation === 'vertical' ? 'column' : 'row' }, elemProps), children));
+    return (React.createElement(ListBox, Object.assign({ as: Element, model: model, marginY: cssVar(system.space.x2), overflowY: "auto" }, mergeStyles(elemProps, menuListStencil({ orientation: model.state.orientation }))), children));
 });