@workday/canvas-kit-react 7.0.0-alpha.95-next.21 → 7.0.0

package/menu/lib/MenuTarget.tsx

@@ -26,7 +26,7 @@ const useMenuTargetBase = createElemPropsHook(useMenuModel)(model => {
         case 'ArrowDown': // IE11
         case 'Up':
         case 'ArrowUp': // IE11
-          model.events.show({event});
+          model.events.show(event);
       }
     },
   };

package/modal/lib/hooks/useCloseOnOverlayClick.ts

@@ -34,7 +34,7 @@ export const useCloseOnOverlayClick = createElemPropsHook(usePopupModel)(model =
         elements[elements.length - 1] === model.state.stackRef.current &&
         elementsBetweenDialogAnBody.some(element => element === event.target)
       ) {
-        model.events.hide({event});
+        model.events.hide(event);
       }
     },
     [model.state.stackRef, model.events]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "7.0.0-alpha.95-next.21+da657912",
+  "version": "7.0.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -48,9 +48,9 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.95-next.21+da657912",
-    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.95-next.21+da657912",
-    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.95-next.21+da657912",
+    "@workday/canvas-kit-labs-react": "^7.0.0",
+    "@workday/canvas-kit-popup-stack": "^7.0.0",
+    "@workday/canvas-kit-preview-react": "^7.0.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.4",
     "chroma-js": "^2.1.0",
@@ -69,5 +69,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "da657912adb9b86971737b33838e6f8f22d3264a"
+  "gitHead": "5f2a5c83ce927fa64ac24447f5391e467f51a406"
 }

package/popup/lib/hooks/useCloseOnEscape.ts

@@ -19,7 +19,7 @@ export const useCloseOnEscape = createElemPropsHook(usePopupModel)(model => {
         (event.key === 'Esc' || event.key === 'Escape') &&
         PopupStack.isTopmost(model.state.stackRef.current!)
       ) {
-        model.events.hide({event});
+        model.events.hide(event);
       }
     },
     [model.state.stackRef, model.events]

package/popup/lib/hooks/useCloseOnFullscreenExit.ts

@@ -14,7 +14,7 @@ export const useCloseOnFullscreenExit = createElemPropsHook(usePopupModel)(model
   const handler = React.useCallback(
     event => {
       if (!screenfull.isFullscreen) {
-        model.events.hide({event});
+        model.events.hide(event);
       }
     },
     [model.events]

package/popup/lib/hooks/useCloseOnOutsideClick.ts

@@ -32,7 +32,7 @@ export const useCloseOnOutsideClick = createElemPropsHook(usePopupModel)(model =
         // because the target is outside `ref.current`
         !PopupStack.contains(model.state.stackRef.current, event.target as HTMLElement)
       ) {
-        model.events.hide({event});
+        model.events.hide(event);
       }
     },
     [model.state.stackRef, model.events]

package/popup/lib/hooks/useDisableBodyScroll.ts

@@ -24,6 +24,8 @@ export const useDisableBodyScroll = createElemPropsHook(usePopupModel)(model =>
     const overflow = document.body.style.overflow;
 
     document.body.style.overflow = 'hidden';
+    document.body.style.overflowY = 'hidden';
+    document.body.style.overflowX = 'hidden';
 
     return () => {
       document.body.style.overflow = overflow;

package/popup/lib/hooks/useFocusRedirect.ts

@@ -30,12 +30,12 @@ export const useFocusRedirect = createElemPropsHook(usePopupModel)(model => {
         if (event.getModifierState('Shift') && document.activeElement === firstFocusableElement) {
           event.preventDefault();
 
-          model.events.hide({event});
+          model.events.hide(event);
         } else if (
           !event.getModifierState('Shift') &&
           document.activeElement === lastFocusableElement
         ) {
-          model.events.hide({event});
+          model.events.hide(event);
         }
       }
     },

package/popup/lib/hooks/usePopupCloseButton.ts

@@ -7,8 +7,6 @@ import {usePopupModel} from './usePopupModel';
  */
 export const usePopupCloseButton = createElemPropsHook(usePopupModel)(({events}) => {
   return {
-    onClick: (event: React.MouseEvent) => {
-      events.hide({event});
-    },
+    onClick: events.hide,
   };
 });

package/popup/lib/hooks/usePopupTarget.ts

@@ -13,14 +13,14 @@ export const usePopupTarget = createElemPropsHook(usePopupModel)(({events, state
       // `state.targetRef` manually. This ensures that custom target components don't need to handle
       // ref forwarding since ref forwarding is only really needed to programmatically open popups
       // around a target _before_ a user clicks. In that rare case, ref forwarding is required.
-      if (!state.targetRef.current) {
+      if (!(state.targetRef.current instanceof Element)) {
         (state.targetRef as React.MutableRefObject<any>).current = event.currentTarget;
       }
 
       if (state.visibility !== 'hidden') {
-        events.hide({event});
+        events.hide(event);
       } else {
-        events.show({event});
+        events.show(event);
       }
     },
   };

package/popup/lib/hooks/usePopupTargetContext.ts

@@ -18,9 +18,9 @@ export const usePopupTargetContext = createElemPropsHook(usePopupModel)(({events
       }
 
       if (state.visibility !== 'hidden') {
-        events.hide({event});
+        events.hide(event);
       } else {
-        events.show({event});
+        events.show(event);
       }
 
       // Prevent the default context menu from showing to avoid double menus

package/table/lib/TableRow.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import styled, {CSSObject} from '@emotion/styled';
 import {rgba} from 'polished';
 import {colors, space, spaceNumbers, statusColors} from '@workday/canvas-kit-react/tokens';
+import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
 import {borderColor, borderWidth, cellBorder} from './Table';
 
 export enum TableRowState {
@@ -91,7 +92,7 @@ function makeBorderlessStyle(_bgColor: string): CSSObject {
   };
 }
 
-const Row = styled('tr')<TableRowProps>(
+const StyledTableRow = styled('tr')<TableRowProps>(
   {
     'th, td': {
       backgroundColor: colors.frenchVanilla100,
@@ -191,16 +192,22 @@ const Row = styled('tr')<TableRowProps>(
   }
 );
 
-export default class TableRow extends React.Component<TableRowProps> {
-  public static State = TableRowState;
-
-  public render() {
-    const {state, header, children, ...elemProps} = this.props;
-
+const TableRow = createComponent('tr')({
+  displayName: 'TableRow',
+  Component: (
+    {state, header, children, ...elemProps}: TableRowProps & StyledType,
+    ref,
+    Element
+  ) => {
     return (
-      <Row state={state} header={header} {...elemProps}>
+      <StyledTableRow as={Element} ref={ref} state={state} header={header} {...elemProps}>
         {children}
-      </Row>
+      </StyledTableRow>
     );
-  }
-}
+  },
+  subComponents: {
+    State: TableRowState,
+  },
+});
+
+export default TableRow;

package/tabs/lib/Tabs.tsx

@@ -44,9 +44,5 @@ export const Tabs = createContainer()({
     Menu,
   },
 })<TabsProps>(({children}, _, model) => {
-  return (
-    <>
-      <Menu model={model.menu}>{children}</Menu>
-    </>
-  );
+  return <Menu model={model.menu}>{children}</Menu>;
 });

package/tabs/lib/TabsItem.tsx

@@ -181,6 +181,7 @@ export const useTabsItem = composeHooks(
       return {
         type: 'button',
         role: 'tab',
+        id: `${state.id}-${name}`,
         'aria-selected': selected,
         'aria-controls': `tabpanel-${state.id}-${name}`,
       };