@workday/canvas-kit-docs 6.9.0-next.0 → 6.9.0-next.2

package/dist/mdx/react/pagination/pagination.mdx

@@ -163,7 +163,7 @@ Undocumented props are spread to the underlying `<div>` element.
 
 #### Usage
 
-`Pagination.JumpToFirstButton` is an `IconButton` that subscribes to the `Pagination` context. This
+`Pagination.JumpToFirstButton` is an `Button` that subscribes to the `Pagination` context. This
 allows it to know when to disable and set `currentPage` to the first page.
 
 ```tsx
@@ -176,14 +176,14 @@ Undocumented props are spread to the underlying `<button>` element. Note that yo
 `aria-label` to meet accessibility standards. We recommend setting it to `First` or the translated
 equivalent.
 
-`Pagination.JumpToFirstButton` supports all `IconButton` props.
+`Pagination.JumpToFirstButton` supports all `TertiaryButton` props.
 
 ### Pagination.StepToPreviousButton
 
 #### Usage
 
-`Pagination.StepToPreviousButton` is an `IconButton` that subscribes to the `Pagination` context.
-This allows it to know when to disable and decrement the `currentPage`.
+`Pagination.StepToPreviousButton` is an `TertiaryButton` that renders an icon that subscribes to the
+`Pagination` context. This allows it to know when to disable and decrement the `currentPage`.
 
 ```tsx
 <Pagination.StepToPreviousButton aria-label="Previous" />
@@ -195,14 +195,14 @@ Undocumented props are spread to the underlying `<button>` element. Note that yo
 `aria-label` to meet accessibility standards. We recommend setting it to `Previous` or the
 translated equivalent.
 
-`Pagination.StepToPreviousButton` supports all `IconButton` props.
+`Pagination.StepToPreviousButton` supports all `TertiaryButton` props.
 
 ### Pagination.StepToNextButton
 
 #### Usage
 
-`Pagination.StepToNextButton` is an `IconButton` that subscribes to the `Pagination` context. This
-allows it to know when to disable and increment the `currentPage`.
+`Pagination.StepToNextButton` is an `TertiaryButton` that subscribes to the `Pagination` context.
+This allows it to know when to disable and increment the `currentPage`.
 
 ```tsx
 <Pagination.StepToNextButton aria-label="Next" />
@@ -214,14 +214,14 @@ Undocumented props are spread to the underlying `<button>` element. Note that yo
 `aria-label` to meet accessibility standards. We recommend setting it to `Next` or the translated
 equivalent.
 
-`Pagination.StepToNextButton` supports all `IconButton` props.
+`Pagination.StepToNextButton` supports all `TertiaryButton` props.
 
 ### Pagination.JumpToLastButton
 
 #### Usage
 
-`Pagination.JumpToLastButton` is an `IconButton` that subscribes to the `Pagination` context. This
-allows it to know when to disable and set `currentPage` to the last page.
+`Pagination.JumpToLastButton` is an `TertiaryButton` that renders an icon that subscribes to the
+`Pagination` context. This allows it to know when to disable and set `currentPage` to the last page.
 
 ```tsx
 <Pagination.JumpToLastButton aria-label="Last" />
@@ -233,7 +233,7 @@ Undocumented props are spread to the underlying `<button>` element. Note that yo
 `aria-label` to meet accessibility standards. We recommend setting it to `Last` or the translated
 equivalent.
 
-`Pagination.JumpToLastButton` supports all `IconButton` props.
+`Pagination.JumpToLastButton` supports all `TertiaryButton` props.
 
 ### Pagination.PageList
 
@@ -285,8 +285,8 @@ Undocumented props are spread to the underlying `<li>` element.
 
 #### Usage
 
-`Pagination.PageButton` is an `IconButton` that subscribes to the `Pagination` context. This allows
-it to update the `currentPage` and set the `toggled` styling when it is the current item.
+`Pagination.PageButton` is a `Button` that subscribes to the `Pagination` context. This allows it to
+update the `currentPage` and set the `toggled` styling when it is the current item.
 
 `Pagination.PageButton` will render `pageNumber` as its children.
 
@@ -302,7 +302,7 @@ translated equivalent.
 
 <ArgsTable of={PageButtonComponent} />
 
-`Pagination.PageButton` also supports all `IconButton` props.
+`Pagination.PageButton` also supports all `Button` props.
 
 ### Pagination.GoToForm
 

package/dist/mdx/react/popup/Popup.mdx

@@ -214,7 +214,8 @@ container component isn't needed.
 A `Popup.Target` is any element that is meant to show the Popup. The default component rendered by
 this component is a `SecondaryButton` element. You can override this by passing the desired
 component via `as`. Many examples above use `as={DeleteButton}`. If you want to render an
-`IconButton` instead, use `as={IconButton}`. The behavior hook used is called `usePopupTarget`.
+`TertiaryButton` instead, use `as={TertiaryButton}`. The behavior hook used is called
+`usePopupTarget`.
 
 ```tsx
 const model = usePopupModel();

package/dist/mdx/react/popup/examples/Basic.tsx

@@ -9,7 +9,7 @@ import {
   useInitialFocus,
   useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
-import {HStack} from '@workday/canvas-kit-labs-react';
+import {HStack} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   const model = usePopupModel();

package/dist/mdx/react/popup/examples/FocusRedirect.tsx

@@ -10,7 +10,7 @@ import {
   useFocusRedirect,
   usePopupModel,
 } from '@workday/canvas-kit-react/popup';
-import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {HStack} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   const model = usePopupModel();
@@ -49,7 +49,8 @@ export default () => {
               <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                 Delete
               </Popup.CloseButton>
-              <Popup.CloseButton>Cancel</Popup.CloseButton>
+              {/* Disabled elements should not be focusable and focus should move to the next focusable element */}
+              <Popup.CloseButton disabled>Cancel</Popup.CloseButton>
             </HStack>
           </Popup.Card>
         </Popup.Popper>

package/dist/mdx/react/popup/examples/FocusTrap.tsx

@@ -10,7 +10,7 @@ import {
   useReturnFocus,
   usePopupModel,
 } from '@workday/canvas-kit-react/popup';
-import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {HStack} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   const model = usePopupModel();

package/dist/mdx/react/popup/examples/FullScreen.tsx

@@ -13,7 +13,7 @@ import {
   useTransferOnFullscreenExit,
   useTransferOnFullscreenEnter,
 } from '@workday/canvas-kit-react/popup';
-import {HStack, Flex} from '@workday/canvas-kit-labs-react/layout';
+import {HStack, Flex} from '@workday/canvas-kit-react/layout';
 import {useIsFullscreen} from '@workday/canvas-kit-react/common';
 import screenfull from 'screenfull';
 

package/dist/mdx/react/popup/examples/InitialFocus.tsx

@@ -8,6 +8,7 @@ import {
   useInitialFocus,
   useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
+import {HStack} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   const initialFocusRef = React.useRef(null);
@@ -29,11 +30,12 @@ export default () => {
           <Popup.Heading>Confirmation</Popup.Heading>
           <Popup.Body>
             <p id="popup-message">Your message has been sent!</p>
-
+          </Popup.Body>
+          <HStack spacing="s">
             <Popup.CloseButton ref={initialFocusRef} aria-describedby="popup-message">
               OK
             </Popup.CloseButton>
-          </Popup.Body>
+          </HStack>
         </Popup.Card>
       </Popup.Popper>
     </Popup>

package/dist/mdx/react/popup/examples/MultiplePopups.tsx

@@ -6,7 +6,7 @@ import {
   useCloseOnEscape,
   usePopupModel,
 } from '@workday/canvas-kit-react/popup';
-import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {HStack} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   const popup1 = usePopupModel();

package/dist/mdx/react/popup/examples/NestedPopups.tsx

@@ -10,7 +10,7 @@ import {
   useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {HStack} from '@workday/canvas-kit-labs-react/layout';
+import {HStack} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   const popup1 = usePopupModel();
@@ -37,24 +37,24 @@ export default () => {
             <Popup.CloseIcon aria-label="Close" size="small" />
             <Popup.Body>
               <p>Contents of Popup 1</p>
-              <Popup model={popup2}>
-                <Popup.Target>Open Popup 2</Popup.Target>
-                <Popup.Popper>
-                  <Popup.Card aria-label="Popup 2">
-                    <Popup.CloseIcon aria-label="Close" size="small" />
-                    <Popup.Body>
-                      <p>Contents of Popup 2</p>
-                      <HStack spacing="s">
-                        <Popup.CloseButton as={Popup.CloseButton} model={popup1}>
-                          Close Both (as)
-                        </Popup.CloseButton>
-                        <SecondaryButton {...closeBothProps}>Close Both (props)</SecondaryButton>
-                      </HStack>
-                    </Popup.Body>
-                  </Popup.Card>
-                </Popup.Popper>
-              </Popup>
             </Popup.Body>
+            <Popup model={popup2}>
+              <Popup.Target>Open Popup 2</Popup.Target>
+              <Popup.Popper>
+                <Popup.Card aria-label="Popup 2">
+                  <Popup.CloseIcon aria-label="Close" size="small" />
+                  <Popup.Body>
+                    <p>Contents of Popup 2</p>
+                  </Popup.Body>
+                  <HStack spacing="s">
+                    <Popup.CloseButton as={Popup.CloseButton} model={popup1}>
+                      Close Both (as)
+                    </Popup.CloseButton>
+                    <SecondaryButton {...closeBothProps}>Close Both (props)</SecondaryButton>
+                  </HStack>
+                </Popup.Card>
+              </Popup.Popper>
+            </Popup>
           </Popup.Card>
         </Popup.Popper>
       </Popup>

package/dist/mdx/react/popup/examples/RTL.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {SecondaryButton, DeleteButton} from '@workday/canvas-kit-react/button';
 import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
+import {HStack} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   return (
@@ -11,10 +12,12 @@ export default () => {
         <Popup.CloseIcon aria-label="סגור" />
         <Popup.Heading>למחוק פריט</Popup.Heading>
         <Popup.Body>
-          <p style={{marginBottom: '24px'}}>האם ברצונך למחוק פריט זה</p>
-          <DeleteButton style={{marginLeft: '16px'}}>לִמְחוֹק</DeleteButton>
-          <SecondaryButton>לְבַטֵל</SecondaryButton>
+          <p>האם ברצונך למחוק פריט זה</p>
         </Popup.Body>
+        <HStack spacing="s">
+          <DeleteButton>לִמְחוֹק</DeleteButton>
+          <SecondaryButton>לְבַטֵל</SecondaryButton>
+        </HStack>
       </Popup.Card>
     </CanvasProvider>
   );

package/dist/mdx/react/radio/Radio.mdx

@@ -5,6 +5,7 @@ import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 import Alert from './examples/Alert';
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
+import Inverse from './examples/Inverse';
 import Error from './examples/Error';
 import LabelPosition from './examples/LabelPosition';
 import NoValue from './examples/NoValue';
@@ -41,6 +42,12 @@ Set the `disabled` prop of the Radio Button to prevent users from interacting wi
 
 <ExampleCodeBlock code={Disabled} />
 
+### Inverse
+
+Radio with inverse variant
+
+<ExampleCodeBlock code={Inverse} />
+
 ### Radio Buttons with No Values
 
 The `value` prop may be omitted from Radio Buttons, in which case the `value` prop of the Radio

package/dist/mdx/react/radio/examples/Basic.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
+import styled from '@emotion/styled';
 
 export default () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -9,14 +10,22 @@ export default () => {
     setValue(value);
   };
 
+  const StyledFormField = styled(FormField)({
+    width: '161px',
+  });
+
   return (
-    <FormField label="Choose Your Pizza Crust" useFieldset={true}>
+    <StyledFormField label="Choose Your Pizza Crust" useFieldset={true}>
       <RadioGroup name="crust" onChange={handleChange} value={value}>
         <Radio label="Deep dish" value="deep-dish" />
         <Radio label="Thin" value="thin" />
         <Radio label="Gluten free" value="gluten-free" />
         <Radio label="Cauliflower" value="cauliflower" />
+        <Radio
+          label="My favorite pizza crust flavor is butter because it's the best thing to put on bread"
+          value="cauliflower"
+        />
       </RadioGroup>
-    </FormField>
+    </StyledFormField>
   );
 };

package/dist/mdx/react/radio/examples/Inverse.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
+import {Box} from '@workday/canvas-kit-react/layout';
+
+export default () => {
+  const [value, setValue] = React.useState<string | number>('deep-dish');
+
+  const handleChange = (value: string | number) => {
+    setValue(value);
+  };
+
+  return (
+    <Box backgroundColor="blueberry400" padding="s">
+      <RadioGroup name="crust" onChange={handleChange} value={value}>
+        <Radio variant="inverse" label="Deep dish" value="deep-dish" />
+        <Radio variant="inverse" label="Thin" value="thin" />
+        <Radio variant="inverse" label="Gluten free" value="gluten-free" />
+        <Radio variant="inverse" label="Cauliflower" value="cauliflower" />
+      </RadioGroup>
+    </Box>
+  );
+};

package/dist/mdx/react/segmented-control/SegmentedControl.mdx

@@ -19,8 +19,8 @@ yarn add @workday/canvas-kit-react
 
 ### Basic Example
 
-Here is a basic example of a Segmented Control with multiple nested `IconButton`s. **Note:** while
-managing state using a unique `value` for each `IconButton` child is encouraged, you can also use
+Here is a basic example of a Segmented Control with multiple nested `Button`s. **Note:** while
+managing state using a unique `value` for each `Button` child is encouraged, you can also use
 indexes and omit the `value` field. It is strongly recommended to not mix these two methods.
 
 <ExampleCodeBlock code={Basic} />

package/dist/mdx/react/segmented-control/examples/Basic.tsx

@@ -6,7 +6,6 @@ import {
   deviceTabletIcon,
   percentageIcon,
 } from '@workday/canvas-system-icons-web';
-import {IconButton} from '@workday/canvas-kit-react/button';
 import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 
 export default () => {
@@ -17,20 +16,23 @@ export default () => {
 
   return (
     <SegmentedControl value={value} onChange={handleToggle}>
-      <IconButton
+      <SegmentedControl.Button
         icon={listViewIcon}
         value="list-view"
-        aria-label="List View"
-        onClick={e => console.log('Existing IconButton onClick callback')}
+        onClick={e => console.log('Existing TertiaryButton onClick callback')}
+        id="test"
       />
-      <IconButton
-        icon={worksheetsIcon}
-        value="table-view"
-        aria-label="Table View"
-        disabled={true}
+      <SegmentedControl.Button icon={worksheetsIcon} value="table-view" disabled={true} />
+      <SegmentedControl.Button
+        icon={deviceTabletIcon}
+        value="device-view"
+        aria-label="Device View"
+      />
+      <SegmentedControl.Button
+        icon={percentageIcon}
+        value="percent-view"
+        aria-label="Percent View"
       />
-      <IconButton icon={deviceTabletIcon} value="device-view" aria-label="Device View" />
-      <IconButton icon={percentageIcon} value="percent-view" aria-label="Percent View" />
     </SegmentedControl>
   );
 };

package/dist/mdx/react/skeleton/examples/Basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Skeleton} from '@workday/canvas-kit-react/skeleton';
-import {Box, Flex} from '@workday/canvas-kit-labs-react';
+import {Box, Flex} from '@workday/canvas-kit-react/layout';
 import {borderRadius, space} from '@workday/canvas-kit-react/tokens';
 
 export default () => {

package/dist/mdx/react/skeleton/examples/Color.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {Skeleton} from '@workday/canvas-kit-react/skeleton';
-import {Box} from '@workday/canvas-kit-labs-react/common';
-import {Flex} from '@workday/canvas-kit-labs-react/layout';
+import {Box, Flex} from '@workday/canvas-kit-react/layout';
 import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
 
 export default () => {

package/dist/mdx/react/skeleton/examples/Simulation.tsx

@@ -1,6 +1,5 @@
-/** @jsx jsx */
 import React from 'react';
-import {jsx, keyframes} from '@emotion/core';
+import {keyframes} from '@emotion/react';
 
 import {
   Card,
@@ -9,13 +8,15 @@ import {
   SecondaryButton,
   SystemIconCircle,
   TextInput,
+  styled,
 } from '@workday/canvas-kit-react';
 
-import {Box, Flex} from '@workday/canvas-kit-labs-react';
+import {Box, Flex} from '@workday/canvas-kit-react/layout';
 
 import {Skeleton} from '@workday/canvas-kit-react/skeleton';
 import {borderRadius, space, type} from '@workday/canvas-kit-react/tokens';
 import {patternIcon} from '@workday/canvas-system-icons-web';
+import {StyledType} from '@workday/canvas-kit-react/common';
 
 const fadeOut = keyframes`
   from {
@@ -27,6 +28,10 @@ const fadeOut = keyframes`
   }
 `;
 
+const StyledSimulation = styled(Box)<StyledType>({
+  pointerEvents: 'none',
+});
+
 export default () => {
   const [loading, setLoading] = React.useState(true);
   const [loadTime, setLoadTime] = React.useState('3000');
@@ -74,7 +79,29 @@ export default () => {
       <Card>
         <Card.Body>
           <Box minHeight={180} position="relative">
-            {!loading && (
+            {loading ? (
+              <StyledSimulation
+                position="absolute"
+                top={0}
+                left={0}
+                width="100%"
+                animation={!loading ? `${fadeOut} 150ms ease-out forwards` : undefined}
+              >
+                <Skeleton>
+                  <Flex alignItems="center">
+                    <Skeleton.Shape
+                      width={space.xl}
+                      height={space.xl}
+                      borderRadius={borderRadius.circle}
+                    />
+                    <Box flex={1} marginLeft="xs">
+                      <Skeleton.Header />
+                    </Box>
+                  </Flex>
+                  <Skeleton.Text lineCount={3} />
+                </Skeleton>
+              </StyledSimulation>
+            ) : (
               <Box>
                 <Flex alignItems="center" display="inline-flex" marginBottom="s">
                   <SystemIconCircle icon={patternIcon} />
@@ -95,32 +122,6 @@ export default () => {
                 </p>
               </Box>
             )}
-
-            <Box
-              position="absolute"
-              top={0}
-              left={0}
-              width="100%"
-              css={{
-                pointerEvents: 'none',
-                animation: !loading ? `${fadeOut} 150ms ease-out` : undefined,
-                animationFillMode: !loading ? 'forwards' : undefined,
-              }}
-            >
-              <Skeleton>
-                <Flex alignItems="center">
-                  <Skeleton.Shape
-                    width={space.xl}
-                    height={space.xl}
-                    borderRadius={borderRadius.circle}
-                  />
-                  <Box flex={1} marginLeft="xs">
-                    <Skeleton.Header />
-                  </Box>
-                </Flex>
-                <Skeleton.Text lineCount={3} />
-              </Skeleton>
-            </Box>
           </Box>
         </Card.Body>
       </Card>

package/dist/mdx/react/status-indicator/StatusIndicator.mdx

@@ -3,6 +3,7 @@ import {StatusIndicator} from '@workday/canvas-kit-react/status-indicator';
 import Basic from './examples/Basic';
 import Icon from './examples/Icon';
 import Emphasis from './examples/Emphasis';
+import MaxWidth from './examples/MaxWidth';
 
 
 # Canvas Kit Status Indicator
@@ -54,6 +55,17 @@ label.
 
 <ExampleCodeBlock code={Icon} />
 
+### Max Width
+
+By default, the maximum width of a Status Indicator is `200px`. When the text in the StatusIndicator
+exceeds the max width, it will be truncated with an ellipsis. This maxWidth can be customized.
+
+Avoid truncation wherever possible by using shorter text in Status Indicators. In the case where
+truncation is necessary, you should use an `OverflowTooltip`. For the full text to be accessible
+when you do this, you should make the tooltip focusable with `tabIndex`.
+
+<ExampleCodeBlock code={MaxWidth} />
+
 ## Props
 
 Undocumented props are spread to the outermost element rendered by Status Indicator.

package/dist/mdx/react/status-indicator/examples/MaxWidth.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import {StatusIndicator} from '@workday/canvas-kit-react/status-indicator';
+import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
+import {space} from '@workday/canvas-kit-react/tokens';
+
+const StatusIndicators = styled('div')({
+  '& > *': {
+    margin: space.xxs,
+  },
+});
+
+export default () => {
+  return (
+    <StatusIndicators>
+      <StatusIndicator
+        label="Longer Than Normal Ellipsized Status"
+        type={StatusIndicator.Type.Blue}
+        maxWidth={250}
+      />
+      <OverflowTooltip>
+        <StatusIndicator
+          label="Overflow Tooltip On Hover/Focus Status"
+          type={StatusIndicator.Type.Green}
+          tabIndex={0}
+        />
+      </OverflowTooltip>
+    </StatusIndicators>
+  );
+};

package/dist/mdx/react/tabs/Tabs.mdx

@@ -75,9 +75,9 @@ trigger an event to change the active tab.
 
 ### Named Tabs
 
-`Tabs.Item` and `Tabs.Panel` both take an optional `name` attribute that is used for the
-`onActivate` callback. This example is identical to the Basic Example, but with named tabs for the
-`Tabs.Item` and `Tabs.Panel` subcomponents.
+`Tabs.Item` and `Tabs.Panel` both take an optional `data-id` attribute that is used for the
+`onActivate` callback. This example is identical to the Basic Example, but with tabs named using
+`data-id` for the `Tabs.Item` and `Tabs.Panel` subcomponents.
 
 <ExampleCodeBlock code={NamedTabs} />
 
@@ -95,9 +95,7 @@ Set the `disabled` prop of a `Tabs.Item` to `true` to disable it.
 
 ### Tab Icons
 
-Tabs can have icons. You must set `hasIcon` on the `Tabs.Item` and use the `Icon` and `Text`
-subcomponent. The `hasIcon` changes the `Tabs.Item` to change where overflow detection is from the
-`Tabs.Item` element to the `Tabs.Item.Text` element.
+Tabs can have icons. Use the `Icon` and `Text` subcomponents.
 
 <ExampleCodeBlock code={Icons} />
 
@@ -139,17 +137,15 @@ array.
 its subcomponents using React context. It does not represent a real element.
 
 ```tsx
-<Tabs onActivate={({data}) => console.log('Activated tab', data.tab)}>
-  {/* Child components */}
-</Tabs>
+<Tabs onSelect={data => console.log('Activated tab', data.id)}>{/* Child components */}</Tabs>
 ```
 
 Alternatively, you may pass in a model using the hoisted model pattern.
 
 ```tsx
 const model = useTabsModel({
-  onActivate({data}) {
-    console.log('Activated Tab', data.tab);
+  onSelect(data) {
+    console.log('Activated Tab', data.id);
   },
 });
 
@@ -184,11 +180,11 @@ Undocumented props are spread to the underlying `<div>` element.
 #### Usage
 
 `Tabs.Item` is a `<button role="tab">` element. Each `Tabs.Item` is associated with a `Tabs.Panel`
-either by a `name` attribute or by the position in the list. If a `name` is provided, it must match
-the name passed to the corresponding `Tabs.Panel` component.
+either by a `data-id` attribute or by the position in the list. If a `data-id` is provided, it must
+match the `data-id` passed to the corresponding `Tabs.Panel` component.
 
 ```tsx
-<Tabs.Item name="first">First Tab</Tabs.Item>
+<Tabs.Item data-id="first">First Tab</Tabs.Item>
 ```
 
 #### Props
@@ -202,11 +198,12 @@ Undocumented props are spread to the underlying `button` element.
 #### Usage
 
 `Tabs.Panel` is a `<div role="tabpanel">` element. It is focusable by default. Each `Tabs.Panel` is
-controlled by a `Tabs.Item` either by a `name` attribute or by the position in the list. If a `name`
-is provided, it must match the name passed to the corresponding `Tabs.Item` component.
+controlled by a `Tabs.Item` either by a `data-id` attribute or by the position in the list. If a
+`data-id` is provided, it must match the `data-id` passed to the corresponding `Tabs.Item`
+component.
 
 ```tsx
-<Tabs.Panel name="first">{/* Contents of the tab panel */}</Tabs.Panel>
+<Tabs.Panel data-id="first">{/* Contents of the tab panel */}</Tabs.Panel>
 ```
 
 #### Props

package/dist/mdx/react/tabs/TabsModel.splitprops.tsx

@@ -1,5 +1,9 @@
-import {TabsModelConfig, TabsState, TabsEvents} from '@workday/canvas-kit-react/tabs';
+import {useTabsModel} from '@workday/canvas-kit-react/tabs';
+
+type TabsModelConfig = Partial<typeof useTabsModel.defaultConfig> &
+  typeof useTabsModel.requiredConfig;
+type Model = ReturnType<typeof useTabsModel>;
 
 export const TabsModelConfigComponent = (_: TabsModelConfig) => <div />;
-export const TabsStateComponent = (_: TabsState) => <div />;
-export const TabsEventsComponent = (_: TabsEvents) => <div />;
+export const TabsStateComponent = (_: Model['state']) => <div />;
+export const TabsEventsComponent = (_: Model['events']) => <div />;