@workday/canvas-kit-docs 5.3.0 → 5.3.1

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

@@ -2,11 +2,9 @@ import {Tabs} from '@workday/canvas-kit-react/tabs';
 import {Specifications} from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
-import NamedTabs from './examples/NamedTabs';
+import NamedKeys from './examples/NamedKeys';
 import RightToLeft from './examples/RightToLeft';
-import OverflowTabs from './examples/OverflowTabs';
 import DisabledTab from './examples/DisabledTab';
-import Icons from './examples/Icons';
 import SinglePanel from './examples/SinglePanel';
 import AlternativeTabStop from './examples/AlternativeTabStop';
 import HoistedModel from './examples/HoistedModel';
@@ -40,26 +38,10 @@ yarn add @workday/canvas-kit-react
 in a variety of ways: `Tabs.List`, `Tabs.Item` and `Tabs.Panel`. It follows the
 [W3 Tabs specification](https://www.w3.org/TR/wai-aria-practices/#tabpanel).
 
-In this example, we set up a basic `Tabs` component with five tabs. This example uses a static API
-that does not support overflow.
+In this example, we set up a basic `Tabs` component with five tabs.
 
 <ExampleCodeBlock code={Basic} />
 
-### Overflow Tabs
-
-Tabs is a responsive component based on the width of its container. If the rendered tabs exceed the
-width of the `Tabs.List`, an overflow menu will be rendered. This only works against the dynamic API
-where you give the `TabsModel` an array of items to be rendered. The dynamic API handles the React
-`key` for you based on the item's identifier. The dynamic API requires either an `id` on each item
-object or a `getId` function that returns an identifier based on the item. The below example uses an
-`id` property on each item.
-
-The dynamic API takes in any object, but since nothing is known about your object, a
-[render prop](https://reactjs.org/docs/render-props.html) is necessary to instruct a list how it
-should render.
-
-<ExampleCodeBlock code={OverflowTabs} />
-
 ### Hoisted Model
 
 By default, `Tabs` will create and use its own [model](#model) internally. Alternatively, you may
@@ -73,13 +55,13 @@ trigger an event to change the active tab.
 
 <ExampleCodeBlock code={HoistedModel} />
 
-### Named Tabs
+### Named Keys
 
 `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
+`onActivate` callback. This example is identical to the Basic Example, but with named keys for the
 `Tabs.Item` and `Tabs.Panel` subcomponents.
 
-<ExampleCodeBlock code={NamedTabs} />
+<ExampleCodeBlock code={NamedKeys} />
 
 ### Right-to-Left (RTL)
 
@@ -93,14 +75,6 @@ Set the `disabled` prop of a `Tabs.Item` to `true` to disable it.
 
 <ExampleCodeBlock code={DisabledTab} />
 
-### 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.
-
-<ExampleCodeBlock code={Icons} />
-
 ### Alternative Tab Stop
 
 By default, tab panels are focusable for accessibility. If the contents of a tab panel have a

package/dist/mdx/react/tabs/examples/DisabledTab.tsx

@@ -8,7 +8,7 @@ export default () => {
     <Tabs>
       <Tabs.List>
         <Tabs.Item>First Tab</Tabs.Item>
-        <Tabs.Item aria-disabled>Disabled Tab</Tabs.Item>
+        <Tabs.Item disabled>Disabled Tab</Tabs.Item>
         <Tabs.Item>Third Tab</Tabs.Item>
       </Tabs.List>
       <div style={{marginTop: space.m}}>

package/dist/mdx/react/tabs/examples/DynamicTabs.tsx

@@ -1,50 +1,22 @@
 import React from 'react';
 import {space} from '@workday/canvas-kit-react/tokens';
 
-import {Tabs, useTabsModel, TabsModel} from '@workday/canvas-kit-react/tabs';
-import {SelectionModel} from '../../lib/selection';
+import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
 
 export default () => {
   const [tabs, setTabs] = React.useState([
-    {tab: 'Tab 1', id: 'tab-1'},
-    {tab: 'Tab 2', id: 'tab-2'},
-    {tab: 'Tab 3', id: 'tab-3'},
+    {tab: 'Tab 1', name: 'tab-1'},
+    {tab: 'Tab 2', name: 'tab-2'},
+    {tab: 'Tab 3', name: 'tab-3'},
   ]);
   const addedRef = React.useRef(tabs.length);
   const model = useTabsModel({
-    shouldSelect: ({data}) => data.id !== 'last',
+    shouldActivate: ({data}) => data.tab !== 'last',
   });
 
-  /**
-   * Helper function that should be called when an item is programmatically removed. The following
-   * side effects depend on state of the model:
-   * * **Item is focused**: Focus will be moved to next item in the list
-   * * **Item is selected**: Selection will be moved to the next item in the list
-   * @param id The id of the item that will be removed
-   */
-  const removeItem = (id: string, model: SelectionModel) => {
-    const index = model.state.items.findIndex(item => model.getId(item) === model.state.cursorId);
-    const nextIndex = index === model.state.items.length - 1 ? index - 1 : index + 1;
-    const nextId = model.getId(model.state.items[nextIndex]);
-    if (model.state.selectedIds[0] === id) {
-      // We're removing the currently selected item. Select next item
-      model.events.select({id: nextId});
-    }
-    if (model.state.cursorId === id) {
-      // We're removing the currently focused item. Focus next item
-      model.events.goTo({id: nextId});
-
-      // wait for stabilization of state
-      requestAnimationFrame(() => {
-        document.querySelector<HTMLElement>(`#${model.state.id}-${nextId}`)?.focus();
-      });
-    }
-  };
-
-  const onKeyDown = (e: React.KeyboardEvent<HTMLElement>, id: string) => {
-    if (e.key === 'Delete') {
-      setTabs(tabs.filter(item => item.id !== id));
-      removeItem(id, model);
+  const onKeyDown = (e: React.KeyboardEvent<HTMLElement>, name: string) => {
+    if (e.key === 'Backspace') {
+      setTabs(tabs.filter(item => item.name !== name));
     }
   };
 
@@ -53,10 +25,10 @@ export default () => {
       <Tabs.List>
         {tabs.map((item, index) => (
           <Tabs.Item
-            key={item.id}
-            name={item.id}
+            key={item.name}
+            name={item.name}
             index={index}
-            onKeyDown={e => onKeyDown(e, item.id)}
+            onKeyDown={e => onKeyDown(e, item.name)}
           >
             {item.tab}
           </Tabs.Item>
@@ -68,7 +40,7 @@ export default () => {
           onClick={() => {
             addedRef.current += 1;
             setTabs(tabs =>
-              tabs.concat({tab: `Tab ${addedRef.current}`, id: `tab-${addedRef.current}`})
+              tabs.concat({tab: `Tab ${addedRef.current}`, name: `tab-${addedRef.current}`})
             );
             model.events.goTo({id: 'last'});
           }}
@@ -78,7 +50,7 @@ export default () => {
       </Tabs.List>
       <div style={{marginTop: space.m}}>
         {tabs.map((item, index) => (
-          <Tabs.Panel key={item.id} name={item.id}>
+          <Tabs.Panel key={item.name} name={item.name}>
             Contents of {item.tab}
           </Tabs.Panel>
         ))}

package/dist/mdx/react/tabs/examples/HoistedModel.tsx

@@ -6,8 +6,8 @@ import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
 
 export default () => {
   const model = useTabsModel({
-    onSelect({data, prevState}) {
-      console.log('Selected Tab', data, prevState);
+    onActivate({data, prevState}) {
+      console.log('Activated Tab', data, prevState);
     },
   });
 
@@ -27,10 +27,10 @@ export default () => {
       </Tabs>
       <SecondaryButton
         onClick={() => {
-          model.events.select({id: 'third'});
+          model.events.activate({tab: 'third'});
         }}
       >
-        Select Third Tab
+        Activate Third Tab
       </SecondaryButton>
     </>
   );

package/dist/mdx/react/tabs/examples/SinglePanel.tsx

@@ -34,7 +34,7 @@ export default () => {
         </Tabs.Item>
       </Tabs.List>
       <Tabs.Panel style={{marginTop: space.m}} hidden={undefined} id="mytab-panel">
-        {contents[model.state.selectedIds[0]]}
+        {contents[model.state.activeTab]}
       </Tabs.Panel>
     </Tabs>
   );

package/dist/mdx/react/text-area/TextArea.mdx

@@ -23,7 +23,7 @@ Text Areas allow users to enter and edit multiple lines of text.
 ## Installation
 
 ```sh
-yarn add @workday/canvas-kit-labs-react
+yarn add @workday/canvas-kit-react
 ```
 
 ## Usage

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "5.3.0",
+  "version": "5.3.1",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,7 +49,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^5.3.0"
+    "@workday/canvas-kit-react": "^5.3.1"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -57,5 +57,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "^3.8.3"
   },
-  "gitHead": "0cf3030eb73935b5679f8c9bb79fb6178a721a4a"
+  "gitHead": "b60f3e21f949f6f514e63f3b5550e270220a22ae"
 }