@workday/canvas-kit-docs 5.2.11 → 5.3.0-next.18

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

@@ -1,22 +1,50 @@
 import React from 'react';
 import {space} from '@workday/canvas-kit-react/tokens';
 
-import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
+import {Tabs, useTabsModel, TabsModel} from '@workday/canvas-kit-react/tabs';
+import {SelectionModel} from '../../lib/selection';
 
 export default () => {
   const [tabs, setTabs] = React.useState([
-    {tab: 'Tab 1', name: 'tab-1'},
-    {tab: 'Tab 2', name: 'tab-2'},
-    {tab: 'Tab 3', name: 'tab-3'},
+    {tab: 'Tab 1', id: 'tab-1'},
+    {tab: 'Tab 2', id: 'tab-2'},
+    {tab: 'Tab 3', id: 'tab-3'},
   ]);
   const addedRef = React.useRef(tabs.length);
   const model = useTabsModel({
-    shouldActivate: ({data}) => data.tab !== 'last',
+    shouldSelect: ({data}) => data.id !== 'last',
   });
 
-  const onKeyDown = (e: React.KeyboardEvent<HTMLElement>, name: string) => {
-    if (e.key === 'Backspace') {
-      setTabs(tabs.filter(item => item.name !== name));
+  /**
+   * 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);
     }
   };
 
@@ -25,10 +53,10 @@ export default () => {
       <Tabs.List>
         {tabs.map((item, index) => (
           <Tabs.Item
-            key={item.name}
-            name={item.name}
+            key={item.id}
+            name={item.id}
             index={index}
-            onKeyDown={e => onKeyDown(e, item.name)}
+            onKeyDown={e => onKeyDown(e, item.id)}
           >
             {item.tab}
           </Tabs.Item>
@@ -40,7 +68,7 @@ export default () => {
           onClick={() => {
             addedRef.current += 1;
             setTabs(tabs =>
-              tabs.concat({tab: `Tab ${addedRef.current}`, name: `tab-${addedRef.current}`})
+              tabs.concat({tab: `Tab ${addedRef.current}`, id: `tab-${addedRef.current}`})
             );
             model.events.goTo({id: 'last'});
           }}
@@ -50,7 +78,7 @@ export default () => {
       </Tabs.List>
       <div style={{marginTop: space.m}}>
         {tabs.map((item, index) => (
-          <Tabs.Panel key={item.name} name={item.name}>
+          <Tabs.Panel key={item.id} name={item.id}>
             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({
-    onActivate({data, prevState}) {
-      console.log('Activated Tab', data, prevState);
+    onSelect({data, prevState}) {
+      console.log('Selected Tab', data, prevState);
     },
   });
 
@@ -27,10 +27,10 @@ export default () => {
       </Tabs>
       <SecondaryButton
         onClick={() => {
-          model.events.activate({tab: 'third'});
+          model.events.select({id: 'third'});
         }}
       >
-        Activate Third Tab
+        Select Third Tab
       </SecondaryButton>
     </>
   );

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

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import {space} from '@workday/canvas-kit-react/tokens';
+import {starIcon, searchIcon, selectIcon, shareIcon} from '@workday/canvas-system-icons-web';
+import {Tabs} from '@workday/canvas-kit-react/tabs';
+
+export default () => {
+  return (
+    <Tabs>
+      <Tabs.List>
+        <Tabs.Item hasIcon>
+          <Tabs.Item.Icon icon={starIcon} />
+          <Tabs.Item.Text>First Tab</Tabs.Item.Text>
+        </Tabs.Item>
+        <Tabs.Item hasIcon>
+          <Tabs.Item.Icon icon={searchIcon} />
+          <Tabs.Item.Text>Second Tab</Tabs.Item.Text>
+        </Tabs.Item>
+        <Tabs.Item hasIcon>
+          <Tabs.Item.Icon icon={selectIcon} />
+          <Tabs.Item.Text>Third Tab</Tabs.Item.Text>
+        </Tabs.Item>
+        <Tabs.Item hasIcon>
+          <Tabs.Item.Icon icon={shareIcon} />
+          <Tabs.Item.Text>Fourth Tab</Tabs.Item.Text>
+        </Tabs.Item>
+      </Tabs.List>
+      <div style={{marginTop: space.m}}>
+        <Tabs.Panel>Contents of First Tab</Tabs.Panel>
+        <Tabs.Panel>Contents of Second Tab</Tabs.Panel>
+        <Tabs.Panel>Contents of Third Tab</Tabs.Panel>
+        <Tabs.Panel>Contents of Fourth Tab</Tabs.Panel>
+      </div>
+    </Tabs>
+  );
+};

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

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
+import {HStack} from '@workday/canvas-kit-labs-react';
+import {SecondaryButton} from '../../../button';
+
+type MyTabItem = {
+  id: string;
+  text: React.ReactNode;
+  contents: string;
+};
+
+export default () => {
+  const [items] = React.useState<MyTabItem[]>([
+    {id: 'first', text: 'First Tab', contents: 'Contents of First Tab'},
+    {id: 'second', text: 'Second Tab', contents: 'Contents of Second Tab'},
+    {id: 'third', text: 'Third Tab', contents: 'Contents of Third Tab'},
+    {id: 'fourth', text: 'Fourth Tab', contents: 'Contents of Fourth Tab'},
+    {id: 'fifth', text: 'Fifth Tab', contents: 'Contents of Fifth Tab'},
+    {id: 'sixth', text: 'Sixth Tab', contents: 'Contents of Sixth Tab'},
+    {id: 'seventh', text: 'Seventh Tab', contents: 'Contents of Seventh Tab'},
+  ]);
+  const model = useTabsModel({
+    items,
+  });
+  const [containerWidth, setContainerWidth] = React.useState('100%');
+  return (
+    <div style={{width: containerWidth}}>
+      <Tabs model={model}>
+        <Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>
+          {(item: MyTabItem) => <Tabs.Item name={item.id}>{item.text}</Tabs.Item>}
+        </Tabs.List>
+        <Tabs.Menu.Popper>
+          <Tabs.Menu.Card maxWidth={300} maxHeight={200}>
+            <Tabs.Menu.List>
+              {(item: MyTabItem) => <Tabs.Menu.Item name={item.id}>{item.text}</Tabs.Menu.Item>}
+            </Tabs.Menu.List>
+          </Tabs.Menu.Card>
+        </Tabs.Menu.Popper>
+        <Tabs.Panels>
+          {(item: MyTabItem) => (
+            <Tabs.Panel marginTop="m" name={item.id}>
+              {item.contents}
+            </Tabs.Panel>
+          )}
+        </Tabs.Panels>
+      </Tabs>
+      <hr />
+      <h4>Change tab container size</h4>
+      <HStack spacing="xs">
+        <SecondaryButton onClick={() => setContainerWidth('100%')}>100%</SecondaryButton>
+        <SecondaryButton onClick={() => setContainerWidth('500px')}>500px</SecondaryButton>
+        <SecondaryButton onClick={() => setContainerWidth('235px')}>235px</SecondaryButton>
+        <SecondaryButton onClick={() => setContainerWidth('150px')}>150px</SecondaryButton>
+      </HStack>
+    </div>
+  );
+};

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.activeTab]}
+        {contents[model.state.selectedIds[0]]}
       </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-react
+yarn add @workday/canvas-kit-labs-react
 ```
 
 ## Usage

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "5.2.11",
+  "version": "5.3.0-next.18+6a7c92ab",
   "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.2.11"
+    "@workday/canvas-kit-react": "^5.3.0-next.18+6a7c92ab"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -57,5 +57,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "^3.8.3"
   },
-  "gitHead": "1fba31836daf2b965432b99a4bd857694fda7e0c"
+  "gitHead": "6a7c92ab26c236a362790dceab7a2f10d84fe9ae"
 }