@workday/canvas-kit-react 7.0.0-alpha.92-next.19 → 7.0.0-alpha.94-next.20

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.94-next.20+52c47b8b",
   "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.94-next.20+52c47b8b",
+    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.94-next.20+52c47b8b",
+    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.94-next.20+52c47b8b",
     "@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": "52c47b8bab9c662b97dd1895d23f55af197538ae"
 }

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