@workday/canvas-kit-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

package/icon/lib/SystemIcon.tsx

@@ -3,50 +3,51 @@ import {iconColors} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
 import {Icon, IconProps} from './Icon';
-import {createComponent} from '@workday/canvas-kit-react/common';
+import {createComponent, getColor} from '@workday/canvas-kit-react/common';
+import {SystemPropValues} from '@workday/canvas-kit-react/layout';
 
 export interface SystemIconStyles {
   /**
    * The accent color of the SystemIcon. This overrides `color`.
    */
-  accent?: string;
+  accent?: SystemPropValues['color'];
   /**
    * The accent color of the SystemIcon on hover. This overrides `colorHover`.
    */
-  accentHover?: string;
+  accentHover?: SystemPropValues['color'];
   /**
    * The background color of the SystemIcon.
    * @default transparent
    */
-  background?: string;
+  background?: SystemPropValues['color'];
   /**
    * The background color of the SystemIcon on hover.
    * @default transparent
    */
-  backgroundHover?: string;
+  backgroundHover?: SystemPropValues['color'];
   /**
    * The color of the SystemIcon. This defines `accent` and `fill`. `color` may be overriden by `accent` and `fill`.
    * @default iconColors.standard
    */
-  color?: string;
+  color?: SystemPropValues['color'];
   /**
    * The hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overriden by `accentHover` and `fillHover`.
    * @default iconColors.hover
    */
-  colorHover?: string;
+  colorHover?: SystemPropValues['color'];
   /**
    * The fill color of the SystemIcon. This overrides `color`.
    */
-  fill?: string;
+  fill?: SystemPropValues['color'];
   /**
    * The fill color of the SystemIcon on hover. This overrides `colorHover`.
    */
-  fillHover?: string;
+  fillHover?: SystemPropValues['color'];
 }
 
 export interface SystemIconProps
   extends SystemIconStyles,
-    Omit<IconProps, 'src' | 'color' | 'fill' | 'type' | 'background'> {
+    Omit<IconProps, 'src' | 'fill' | 'type'> {
   /**
    * The icon to display from `@workday/canvas-system-icons-web`.
    */
@@ -55,7 +56,6 @@ export interface SystemIconProps
    * The size of the SystemIcon in `px`.
    */
   size?: number | string | undefined;
-  className?: string; //investigate more
 }
 
 export const systemIconStyles = ({
@@ -69,22 +69,22 @@ export const systemIconStyles = ({
   fillHover,
 }: SystemIconStyles): CSSObject => ({
   '& .wd-icon-fill': {
-    fill: fill || color,
+    fill: getColor(fill) || getColor(color),
   },
   ':hover .wd-icon-fill': {
-    fill: fillHover || colorHover,
+    fill: getColor(fillHover) || getColor(colorHover),
   },
   '& .wd-icon-accent, & .wd-icon-accent2': {
-    fill: accent || color,
+    fill: getColor(accent) || getColor(color),
   },
   ':hover .wd-icon-accent, :hover .wd-icon-accent2': {
-    fill: accentHover || colorHover,
+    fill: getColor(accentHover) || getColor(colorHover),
   },
   '& .wd-icon-background': {
-    fill: background,
+    fill: getColor(background),
   },
   ':hover .wd-icon-background': {
-    fill: backgroundHover,
+    fill: getColor(backgroundHover),
   },
 });
 

package/icon/lib/SystemIconCircle.tsx

@@ -4,7 +4,8 @@ import isPropValid from '@emotion/is-prop-valid';
 import {colors, borderRadius} from '@workday/canvas-kit-react/tokens';
 import {SystemIcon, SystemIconProps} from './SystemIcon';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {createComponent, pickForegroundColor} from '@workday/canvas-kit-react/common';
+import {createComponent, getColor, pickForegroundColor} from '@workday/canvas-kit-react/common';
+import {SystemPropValues} from '@workday/canvas-kit-react/layout';
 
 export enum SystemIconCircleSize {
   xs = 16,
@@ -20,7 +21,7 @@ export interface SystemIconCircleProps extends Pick<SystemIconProps, 'shouldMirr
    * The background color of the SystemIconCircle from `@workday/canvas-colors-web`.
    * @default colors.soap300
    */
-  background?: string;
+  background?: SystemPropValues['color'];
   /**
    * The icon to display from `@workday/canvas-accent-icons-web`.
    */
@@ -50,7 +51,7 @@ const Container = styled('div', {
     },
   },
   ({background}) => ({
-    background: background,
+    background: getColor(background),
   }),
   ({size}) => ({
     width: size,

package/index.ts

@@ -8,6 +8,7 @@ export * from './card';
 export * from './checkbox';
 export * from './collection';
 export * from './color-picker';
+export * from './combobox';
 export * from './common';
 export * from './dialog';
 export * from './disclosure';

package/layout/README.md

@@ -141,17 +141,11 @@ Default: `12`
 # Flex
 
 View the
-[documentation for Flex](http://workday.github.io/canvas-kit/?path=/docs/components-containers-layout-flex--usage)
-on Storybook.
-
-# Stack
-
-View the
-[documentation for Stack](http://workday.github.io/canvas-kit/?path=/docs/components-containers-layout-stack--basic-stack)
+[documentation for Flex](https://workday.github.io/canvas-kit/?path=/docs/components-containers-flex--basic)
 on Storybook.
 
 # Box
 
 View the
-[documentation for Stack](http://workday.github.io/canvas-kit/?path=/docs/components-containers-layout-box--as#box)
+[documentation for Box](https://workday.github.io/canvas-kit/?path=/docs/components-containers-box--basic)
 on Storybook.

package/layout/index.ts

@@ -1,7 +1,3 @@
-import {DeprecatedLayout} from './lib/Layout';
-import {DeprecatedColumn} from './lib/Column';
-
-export { DeprecatedLayout, DeprecatedColumn};
 export * from './lib/Box';
 export * from './lib/utils/background';
 export * from './lib/utils/border';
@@ -13,14 +9,14 @@ export * from './lib/utils/grid';
 export * from './lib/utils/gridItem';
 export * from './lib/utils/layout';
 export * from './lib/utils/other';
+export * from './lib/utils/systemProps';
 export * from './lib/utils/position';
 export {SpaceStyleProps, spaceStyleFnConfigs} from './lib/utils/space';
 export {AllStyleProps, CommonStyleProps} from './lib/utils/styleProps';
 export * from './lib/utils/text';
 export * from './lib/Flex';
 export * from './lib/Grid';
-export * from './lib/Stack';
 export type { FlexStyleProps } from './lib/utils/flex';
 export type { GridStyleProps } from './lib/utils/grid';
 export type { GridItemStyleProps, gridItemStyleFnConfigs } from './lib/utils/gridItem';
-export type { StackSpacing, StackDirection, StackStyleProps } from './lib/utils/stack';
+export * from './lib/utils/systemProps';

package/layout/lib/utils/border/color.ts

@@ -4,40 +4,40 @@ import {SystemPropValues} from '../systemProps';
 /** style props to set CSS border color properties */
 export type BorderColorStyleProps = {
   /**
-   * - sets [CSS border-color property]((https://developer.mozilla.org/en-US/docs/Web/CSS/border-color)
+   * - sets [CSS border-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color)
    * - system tokens: `color`
    */
   borderColor?: SystemPropValues['color'];
   /**
-   * - sets [CSS border-top-color property]((https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color)
+   * - sets [CSS border-top-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color)
    * - system tokens: `color`
    */
   borderTopColor?: SystemPropValues['color'];
   /**
-   * - sets [CSS border-right-color property]((https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color)
+   * - sets [CSS border-right-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color)
    * - no bidirectional support
    * - system tokens: `color`
    */
   borderRightColor?: SystemPropValues['color'];
   /**
-   * - sets [CSS border-bottom-color property]((https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color)
+   * - sets [CSS border-bottom-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color)
    * - system tokens: `color`
    */
   borderBottomColor?: SystemPropValues['color'];
   /**
-   * - sets [CSS border-left-color property]((https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color)
+   * - sets [CSS border-left-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color)
    * - no bidirectional support
    * - system tokens: `color`
    */
   borderLeftColor?: SystemPropValues['color'];
   /**
-   * - sets [CSS border-inline-start-color property ]((https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color)
+   * - sets [CSS border-inline-start-color property ](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color)
    * - bidirectional support
    * - system tokens: `color`
    */
   borderInlineStartColor?: SystemPropValues['color'];
   /**
-   * - sets [CSS border-inline-end-color property ]((https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color)
+   * - sets [CSS border-inline-end-color property ](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color)
    * - bidirectional support
    * - system tokens: `color`
    */

package/layout/lib/utils/layout.ts

@@ -5,7 +5,7 @@ import {SystemPropValues} from './systemProps';
 
 /** style props to for CSS layout properties */
 export type LayoutStyleProps = {
-  /** sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/displaydisplay) */
+  /** sets [CSS display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) */
   display?: Property.Display;
   /**
    * - sets [CSS height property](https://developer.mozilla.org/en-US/docs/Web/CSS/height)

package/layout/lib/utils/position.ts

@@ -30,6 +30,10 @@ export type PositionStyleProps = {
    * - no bidirectional support
    * */
   left?: number | string;
+  /**
+   * - sets [CSS inset property](https://developer.mozilla.org/en-US/docs/Web/CSS/inset)
+   */
+  inset?: number | string;
   /**
    * - sets [CSS inset-inline-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start)
    * - bidirectional support
@@ -73,6 +77,11 @@ export const positionStyleFnConfigs: StyleFnConfig[] = [
     properties: ['left'],
     system: 'none',
   },
+  {
+    name: 'inset',
+    properties: ['inset'],
+    system: 'none',
+  },
   {
     name: 'insetInlineStart',
     properties: ['insetInlineStart'],

package/menu/index.ts

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

package/menu/lib/Menu.tsx

@@ -18,9 +18,15 @@ export interface MenuProps {
 }
 
 /**
- * An accessible dropdown menu component. A dropdown menu usually contains a target element that
- * opens to a menu.
- * @example
+ * `Menu` is a combination of a popup and a list. It usually has some type of target element that
+ * expands/collapses the menu and a `menu` role and and several `menuitem` roles. Focus is managed
+ * using [roving tabindex](https://w3c.github.io/aria-practices/#kbd_roving_tabindex) for maximum
+ * compatibility. A `Menu` can have two modes: `single` and `multiple`. This mode determines both
+ * how many items can be selected as well as the default behavior when a `menuitem` is clicked. For
+ * the `single` mode, selecting a `menuitem` will select and close the menu. For the `multiple`
+ * mode, clicking a `menuitem` will toggle selection and will not close the menu.
+ *
+ * ```tsx
  * <Menu>
  *   <Menu.Target>Open</Menu.Target>
  *   <Menu.Popper>
@@ -32,11 +38,29 @@ export interface MenuProps {
  *     </Menu.Card>
  *   </Menu.Popper>
  * </Menu>
+ * ```
  */
 export const Menu = createContainer()({
   displayName: 'Menu',
   modelHook: useMenuModel,
   subComponents: {
+    /**
+     * `Menu.Target` is similar to all {@link PopupTarget Popup.Target} types. The component only
+     * provides behavior and no styling. The `as` prop is used to determine which component is
+     * rendered. This component should forward the `ref` and apply any additional props directly to
+     * an element. The default `as` is a {@link SecondaryButton}. Any Canvas Kit component should
+     * work with an `as`.
+     *
+     * An example changing to a {@link PrimaryButton}
+     *
+     * ```tsx
+     * <Menu.Target as={PrimaryButton}>Primary Button Text</Menu.Target>
+     * ```
+     *
+     * This element will apply `aria-haspopup` and `aria-expanded` to inform screen readers there's
+     * a popup associated with the element.
+     */
+    Target: MenuTarget,
     /**
      * The menu card is a non-semantic element used to give the dropdown menu its distinct visual
      * cue that the dropdown menu is floating above other content. A menu card usually contains a
@@ -47,7 +71,7 @@ export const Menu = createContainer()({
      * The menu list follows the Collections API. A list can either contain static items
      * or a render prop and `items` to the model.
      *
-     * @example
+     * ```tsx
      * const MyComponent = () => {
      *   const model = useMenuModel({
      *     items: [
@@ -59,27 +83,33 @@ export const Menu = createContainer()({
      *   return (
      *     <Menu model={model}>
      *       <Menu.List>
-     *         {(item) => <Menu.Item name={item.id}>{item.text}</Menu.Item>}
+     *         {(item) => <Menu.Item data-id={item.id}>{item.text}</Menu.Item>}
      *       </Menu.List>
      *     </Menu>
      *   )
      * }
+     * ```
      */
     List: MenuList,
     /**
-     * A menu item has an optional `name` prop that identifies the item in the menu list and will be
-     * passed to the optional `onSelect` callback of the menu model. A menu item can contain any
-     * HTML. If more complex HTML is provided, consider
+     * A `Menu.Item` has an optional `data-id` prop that identifies the item in the `Menu.List` and
+     * will be passed to the optional `onSelect` callback of the `Menu` model. A `Menu.Item` can
+     * contain any HTML. If more complex HTML is provided, add `data-text` to the `Menu.Item`
+     * component if using the static API. If you're using the dynamic API, pass `getTextValue` to
+     * the model.
      */
     Item: MenuItem,
     Divider: MenuDivider,
-    Target: MenuTarget,
+    /**
+     * A `Menu.TargetContext` is the same as a {@link MenuTarget Menu.Target}, except it adds a
+     * `context` event handler instead of a `click` handler to trigger context menus.
+     */
     TargetContext: MenuTargetContext,
     /**
-     * The "Popper" of a menu. The popper will appear around the `Menu.Target`. It renders a `div`
-     * element that is portalled to the `document.body` which is controlled by the `PopupStack. The
-     * `PopupStack` is not part of React. This means no extra props given to this component will be
-     * forwarded to the `div` element, but the `ref` will be forwarded.
+     * The "Popper" of a menu. The popper will appear around the {@link MenuTarget Menu.Target}. It
+     * renders a `div` element that is portalled to the `document.body` which is controlled by the
+     * {@link PopupStack}. The `PopupStack` is not part of React. This means no extra props given to
+     * this component will be forwarded to the `div` element, but the `ref` will be forwarded.
      */
     Popper: MenuPopper,
   },

package/menu/lib/MenuContextTarget.tsx

@@ -27,7 +27,7 @@ const useMenuTargetBase = createElemPropsHook(useMenuModel)(model => {
           model.events.show(event);
       }
     },
-  };
+  } as const;
 });
 
 export const useMenuTarget = composeHooks(useMenuTargetBase, usePopupTarget);

package/menu/lib/MenuItem.tsx

@@ -40,15 +40,14 @@ export interface MenuItemProps {
   'aria-disabled'?: boolean;
 }
 
-const StyledItem = styled(Box.as('button'))<StyledType>(
+export const StyledMenuItem = styled(Box.as('button'))<StyledType>(
   ({theme}) => {
     return {
       ...type.levels.subtext.large,
-      '& > *:not(style) ~ *:not(style)': {
-        marginLeft: space.xxs,
-      },
-      display: 'block',
+      display: 'grid',
+      alignItems: 'center',
       width: '100%',
+      gap: space.s,
       padding: `${space.xxs} ${space.s}`,
       boxSizing: 'border-box',
       cursor: 'pointer',
@@ -66,7 +65,7 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
           fill: iconColors.hover,
         },
       },
-      '&:focus': {
+      '&:focus, &.focus': {
         outline: 'none',
         backgroundColor: theme.canvas.palette.primary.main,
         color: typeColors.inverse,
@@ -90,20 +89,20 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
             fill: iconColors.hover,
           },
         },
-        '&:focus': {
+        '&:focus, &.focus': {
           '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
             fill: iconColors.hover,
           },
         },
       },
       backgroundColor: 'inherit',
-      '&:disabled, &[aria-disabled]': {
+      '&:disabled, &[aria-disabled=true]': {
         color: colors.licorice100,
         cursor: 'default',
         '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
           fill: iconColors.disabled,
         },
-        '&:focus': {
+        '&:focus, &.focus': {
           backgroundColor: colors.blueberry200,
           '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
             fill: iconColors.disabled,
@@ -134,7 +133,7 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
 export const useMenuItem = composeHooks(
   createElemPropsHook(useMenuModel)(
     (model, ref, elemProps: {'data-id': string} = {'data-id': ''}) => {
-      const {localRef, elementRef} = useLocalRef(ref);
+      const {localRef, elementRef} = useLocalRef(ref as React.Ref<HTMLElement>);
       const id = elemProps['data-id'];
 
       // focus on the item with the cursor
@@ -143,14 +142,11 @@ export const useMenuItem = composeHooks(
           if (model.state.cursorId === id) {
             // delay focus changes to allow PopperJS to position
             requestAnimationFrame(() => {
-              localRef.current.focus();
+              localRef.current?.focus();
             });
           }
         }
-        // We only need to run when the ID has changed. If the static API is used, the first time
-        // this is run, the id will be blank
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, [id]);
+      }, [id, localRef, model.state.cursorId, model.state.mode]);
 
       return {
         ref: elementRef,
@@ -158,7 +154,10 @@ export const useMenuItem = composeHooks(
         onClick:
           model.state.mode === 'single'
             ? (event: React.SyntheticEvent) => {
-                model.events.hide(event);
+                // only hide if the item isn't disabled
+                if (event.currentTarget.getAttribute('aria-disabled') !== 'true') {
+                  model.events.hide(event);
+                }
               }
             : undefined,
       };
@@ -174,15 +173,15 @@ export const MenuItem = createSubcomponent('button')({
   modelHook: useMenuModel,
   elemPropsHook: useMenuItem,
   subComponents: {
-    Icon: SystemIcon,
+    Icon: styled(SystemIcon)({alignSelf: 'start'}),
     Text: styled('span')({flexGrow: 1, alignSelf: 'center'}),
   },
 })<MenuItemProps>(({children, ...elemProps}, Element) => {
   return (
     <OverflowTooltip placement="left">
-      <StyledItem minHeight={space.xl} as={Element} {...elemProps}>
+      <StyledMenuItem minHeight={space.xl} as={Element} {...elemProps}>
         {children}
-      </StyledItem>
+      </StyledMenuItem>
     </OverflowTooltip>
   );
 });

package/menu/lib/MenuList.tsx

@@ -5,26 +5,31 @@ import {
   createSubcomponent,
   createElemPropsHook,
   ExtractProps,
+  composeHooks,
 } from '@workday/canvas-kit-react/common';
-import {ListBox} from '@workday/canvas-kit-react/collection';
-import {Stack} from '@workday/canvas-kit-react/layout';
+import {ListBox, ListProps} from '@workday/canvas-kit-react/collection';
+import {useReturnFocus, useFocusRedirect} from '@workday/canvas-kit-react/popup';
 
 import {useMenuModel} from './useMenuModel';
 
 export interface MenuListProps<T = any>
-  extends Omit<Partial<ExtractProps<typeof Stack, never>>, 'children'> {
+  extends Omit<ExtractProps<typeof ListBox, never>, 'children'> {
   /**
    * The label text of the MenuList.
    */
-  children: React.ReactNode | ((item: T) => React.ReactNode);
+  children: ListProps<T>['children'];
 }
 
-export const useMenuList = createElemPropsHook(useMenuModel)(model => {
-  return {
-    role: 'menu',
-    'aria-labelledby': model.state.id,
-  };
-});
+export const useMenuList = composeHooks(
+  createElemPropsHook(useMenuModel)(model => {
+    return {
+      role: 'menu',
+      'aria-labelledby': model.state.id,
+    };
+  }),
+  useReturnFocus,
+  useFocusRedirect
+);
 
 export const MenuList = createSubcomponent('div')({
   displayName: 'Menu.List',
@@ -39,7 +44,7 @@ export const MenuList = createSubcomponent('div')({
       borderRadius="zero"
       padding="zero"
       marginY="xxs"
-      spacing="zero"
+      gap="zero"
       overflowY="auto"
       flexDirection={model.state.orientation === 'vertical' ? 'column' : 'row'}
       {...elemProps}

package/menu/lib/MenuTarget.tsx

@@ -14,7 +14,7 @@ export interface MenuTargetProps {
   children?: React.ReactNode;
 }
 
-const useMenuTargetBase = createElemPropsHook(useMenuModel)(model => {
+export const useMenuTargetBase = createElemPropsHook(useMenuModel)(model => {
   return {
     id: model.state.id,
     'aria-haspopup': 'true',
@@ -27,7 +27,7 @@ const useMenuTargetBase = createElemPropsHook(useMenuModel)(model => {
           model.events.show(event);
       }
     },
-  };
+  } as const;
 });
 
 export const useMenuTarget = composeHooks(useMenuTargetBase, usePopupTarget);

package/menu/lib/useMenuModel.tsx

@@ -2,9 +2,7 @@ import {createModelHook} from '@workday/canvas-kit-react/common';
 import {
   useAlwaysCloseOnOutsideClick,
   useCloseOnEscape,
-  useFocusRedirect,
   usePopupModel,
-  useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
 import {
   multiSelectionManager,
@@ -18,16 +16,17 @@ export const useMenuModel = createModelHook({
     ...usePopupModel.defaultConfig,
     /** Determines the default selection manager used as well as if the menu closes when an item is selected */
     mode: 'single' as 'single' | 'multiple',
+    // don't virtualize menus by default to avoid oddities with card width
+
+    shouldVirtualize: false,
   },
   requiredConfig: {
     ...useListModel.requiredConfig,
     ...usePopupModel.requiredConfig,
   },
 })(config => {
-  // don't virtualize menus by default to avoid oddities with card width
   const list = useListModel(
     useListModel.mergeConfig(config, {
-      shouldVirtualize: false,
       selection: config.mode === 'single' ? singleSelectionManager : multiSelectionManager,
     })
   );
@@ -43,8 +42,6 @@ export const useMenuModel = createModelHook({
 
   useAlwaysCloseOnOutsideClick(popup);
   useCloseOnEscape(popup);
-  useReturnFocus(popup);
-  useFocusRedirect(popup);
 
   const state = {mode: config.mode, ...list.state, ...popup.state};
 
@@ -53,5 +50,5 @@ export const useMenuModel = createModelHook({
     ...popup.events,
   };
 
-  return {...list, state, events};
+  return {...list, ...popup, state, events};
 });