@workday/canvas-kit-react 7.0.0-alpha.92-next.19 → 7.0.0-alpha.96-next.22

package/icon/lib/Svg.tsx

@@ -2,7 +2,7 @@ import {CSSObject} from '@emotion/styled';
 import * as React from 'react';
 import {CanvasIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {validateIconType} from './utils';
-import {createComponent, styled} from '@workday/canvas-kit-react/common';
+import {createComponent, styled, StyledType} from '@workday/canvas-kit-react/common';
 import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
 
 export interface SvgProps extends BoxProps {
@@ -16,7 +16,9 @@ export interface SvgProps extends BoxProps {
   shouldMirror?: boolean;
 }
 
-const StyledIconSpan = styled(Box.as('span'))<Pick<SvgProps, 'shouldMirror' | 'styles'>>(
+const StyledIconSpan = styled(Box.as('span'))<
+  StyledType & Pick<SvgProps, 'shouldMirror' | 'styles'>
+>(
   {
     display: 'inline-block',
     '> svg': {display: 'block'},
@@ -37,7 +39,14 @@ export const Svg = createComponent('span')({
       return null;
     }
 
-    return <StyledIconSpan dangerouslySetInnerHTML={{__html: src.svg}} {...elemProps} ref={ref} />;
+    return (
+      <StyledIconSpan
+        as={Element}
+        dangerouslySetInnerHTML={{__html: src.svg}}
+        {...elemProps}
+        ref={ref}
+      />
+    );
   },
 });
 

package/layout/lib/Stack.tsx

@@ -40,7 +40,9 @@ export const Stack = createComponent('div')({
     return (
       <StyledStack as={Element} ref={ref} flexDirection="row" {...elemProps}>
         {shouldWrapChildren
-          ? validChildren.map(child => <StackItem>{child}</StackItem>)
+          ? validChildren.map((child, index) => (
+              <StackItem key={child.props.id || index}>{child}</StackItem>
+            ))
           : validChildren}
       </StyledStack>
     );

package/menu/lib/Menu.tsx

@@ -26,8 +26,8 @@ export interface MenuProps {
  *   <Menu.Popper>
  *     <Menu.Card>
  *       <Menu.List>
- *         <Menu.Item name="first">First Item</Menu.Item>
- *         <Menu.Item name="second">Second Item</Menu.Item>
+ *         <Menu.Item data-id="first">First Item</Menu.Item>
+ *         <Menu.Item data-id="second">Second Item</Menu.Item>
  *       </Menu.List>
  *     </Menu.Card>
  *   </Menu.Popper>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "7.0.0-alpha.92-next.19+e2cad878",
+  "version": "7.0.0-alpha.96-next.22+29ac2599",
   "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.92-next.19+e2cad878",
-    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.92-next.19+e2cad878",
-    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.92-next.19+e2cad878",
+    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.96-next.22+29ac2599",
+    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.96-next.22+29ac2599",
+    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.96-next.22+29ac2599",
     "@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": "e2cad87834c40633618cb65a95a0271b1256e214"
+  "gitHead": "29ac25992f1ca92c4cc885813c271120511038b5"
 }

package/tabs/lib/Tabs.tsx

@@ -36,7 +36,7 @@ export const Tabs = createContainer()({
      * <Tabs.Menu.Popper>
      *   <Tabs.Menu.Card>
      *     <Tabs.Menu.List>
-     *       {(item: MyTabItem) => <Tabs.Menu.Item name={item.id}>{item.text}</Tabs.Menu.Item>}
+     *       {(item: MyTabItem) => <Tabs.Menu.Item data-id={item.id}>{item.text}</Tabs.Menu.Item>}
      *     </Tabs.Menu.List>
      *   </Tabs.Menu.Card>
      * </Tabs.Menu.Popper>

package/tabs/lib/TabsList.tsx

@@ -24,7 +24,7 @@ export interface TabListProps<T = unknown> extends Partial<ExtractProps<typeof S
    *
    * @example
    * <Tabs.List>
-   *   {(item) => <Tabs.Item key={item.id} name={item.name}>{item.text}</Tabs.Item>}
+   *   {(item) => <Tabs.Item>{item.text}</Tabs.Item>}
    * </Tabs.List>
    */
   children: ((item: T) => React.ReactNode) | React.ReactNode;

package/tabs/lib/TabsOverflowButton.tsx

@@ -22,13 +22,11 @@ export interface OverflowButtonProps {
 }
 
 export const useTabsOverflowButton = composeHooks(
-  createElemPropsHook(useTabsModel)(
-    (model, _?: React.Ref<HTMLButtonElement>, elemProps: {name?: string} = {}) => {
-      return {
-        'aria-haspopup': true,
-      };
-    }
-  ),
+  createElemPropsHook(useTabsModel)(() => {
+    return {
+      'aria-haspopup': true,
+    };
+  }),
   useOverflowListTarget,
   subModelHook((m: ReturnType<typeof useTabsModel>) => m.menu, useMenuTarget)
 );

package/tabs/lib/TabsPanel.tsx

@@ -9,6 +9,7 @@ import {
   hideMouseFocus,
   StyledType,
 } from '@workday/canvas-kit-react/common';
+import {Item} from '@workday/canvas-kit-react/collection';
 import {Box} from '@workday/canvas-kit-react/layout';
 
 import {useTabsModel} from './useTabsModel';
@@ -37,26 +38,29 @@ export interface TabPanelProps<T = unknown> extends ExtractProps<typeof Box, nev
 const StyledTabsPanel = styled(Box)<StyledType>(hideMouseFocus);
 
 export const useTabsPanel = createElemPropsHook(useTabsModel)(
-  ({state, events}, _?: React.Ref<HTMLElement>, elemProps: {'data-id'?: string} = {}) => {
-    const name = elemProps['data-id'];
-    const [tabName, setTabName] = React.useState(elemProps['data-id'] || '');
+  (
+    {state, events},
+    _?: React.Ref<HTMLElement>,
+    elemProps: {'data-id'?: string; item?: Item<any>} = {}
+  ) => {
+    const [localId, setLocalId] = React.useState(elemProps['data-id'] || elemProps.item?.id || '');
 
     useMountLayout(() => {
-      const index = state.panelIndexRef.current;
-      const tabName = name || String(index);
-      events.registerPanel({item: {id: tabName}, textValue: ''});
-      setTabName(tabName);
+      const defaultId = state.panelIndexRef.current;
+      const itemId = localId || String(defaultId);
+      events.registerPanel({item: {id: itemId}, textValue: ''});
+      setLocalId(itemId);
 
       return () => {
-        events.unregisterPanel({id: tabName});
+        events.unregisterPanel({id: itemId});
       };
     });
 
     return {
       role: 'tabpanel',
-      'aria-labelledby': `${state.id}-${tabName}`,
-      hidden: !!tabName && tabName !== state.selectedIds[0],
-      id: `tabpanel-${state.id}-${tabName}`,
+      'aria-labelledby': `${state.id}-${localId}`,
+      hidden: !!localId && localId !== state.selectedIds[0],
+      id: `tabpanel-${state.id}-${localId}`,
       tabIndex: 0,
     };
   }