@workday/canvas-kit-react 7.0.0-alpha.97-next.23 → 7.0.2

package/popup/lib/hooks/usePopupTarget.ts

@@ -13,7 +13,7 @@ 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;
       }
 

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}`,
       };