@workday/canvas-kit-docs 6.0.7 → 6.1.3

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

@@ -4,17 +4,28 @@ import {space} from '@workday/canvas-kit-react/tokens';
 import {Tabs, useTabsModel, TabsModel} from '@workday/canvas-kit-react/tabs';
 import {SelectionModel} from '../../lib/selection';
 
+type Tab = {
+  tab: string;
+  id: string;
+};
+
 export default () => {
-  const [tabs, setTabs] = React.useState([
+  const [tabs, setTabs] = React.useState<Tab[]>([
     {tab: 'Tab 1', id: 'tab-1'},
     {tab: 'Tab 2', id: 'tab-2'},
     {tab: 'Tab 3', id: 'tab-3'},
+    {tab: 'Add Tab', id: 'add'},
   ]);
-  const addedRef = React.useRef(tabs.length);
+  const addedRef = React.useRef(tabs.length - 1);
   const model = useTabsModel({
-    shouldSelect: ({data}) => data.id !== 'last',
+    items: tabs,
+    shouldSelect: ({data}) => data.id !== 'add',
   });
 
+  // A ref of the model for the render functions to work around the caching done to lists
+  const modelRef = React.useRef(model);
+  modelRef.current = model;
+
   /**
    * Helper function that should be called when an item is programmatically removed. The following
    * side effects depend on state of the model:
@@ -22,8 +33,9 @@ export default () => {
    * * **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 removeItem = <T extends unknown>(id: string, model: SelectionModel<T>) => {
     const index = model.state.items.findIndex(item => model.getId(item) === model.state.cursorId);
+    console.log('index', index, id, model.state.cursorId, model.state.items);
     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) {
@@ -41,48 +53,52 @@ export default () => {
     }
   };
 
-  const onKeyDown = (e: React.KeyboardEvent<HTMLElement>, id: string) => {
-    if (e.key === 'Delete') {
+  const onKeyDown = (id: string) => (e: React.KeyboardEvent<HTMLElement>) => {
+    if (e.key === 'Delete' && id !== 'add') {
       setTabs(tabs.filter(item => item.id !== id));
+      const model = modelRef.current;
       removeItem(id, model);
     }
   };
 
+  const onClick = (id: string) => (e: React.MouseEvent) => {
+    if (id === 'add') {
+      addedRef.current += 1;
+      setTabs(tabs => {
+        const newTabs = tabs.slice(0, tabs.length - 1);
+        const addTab = tabs.slice(-1);
+        return newTabs.concat(
+          {tab: `Tab ${addedRef.current}`, id: `tab-${addedRef.current}`},
+          addTab
+        );
+      });
+      model.events.goTo({id: 'add'});
+    }
+  };
+
   return (
     <Tabs model={model}>
-      <Tabs.List>
-        {tabs.map((item, index) => (
-          <Tabs.Item
-            key={item.id}
-            name={item.id}
-            index={index}
-            onKeyDown={e => onKeyDown(e, item.id)}
-          >
+      <Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>
+        {(item: Tab) => (
+          <Tabs.Item name={item.id} onKeyDown={onKeyDown(item.id)} onClick={onClick(item.id)}>
             {item.tab}
           </Tabs.Item>
-        ))}
-        <Tabs.Item
-          key={'last'}
-          index={tabs.length}
-          name={'last'}
-          onClick={() => {
-            addedRef.current += 1;
-            setTabs(tabs =>
-              tabs.concat({tab: `Tab ${addedRef.current}`, id: `tab-${addedRef.current}`})
-            );
-            model.events.goTo({id: 'last'});
-          }}
-        >
-          Add Tab
-        </Tabs.Item>
+        )}
       </Tabs.List>
-      <div style={{marginTop: space.m}}>
-        {tabs.map((item, index) => (
-          <Tabs.Panel key={item.id} name={item.id}>
+      <Tabs.Menu.Popper>
+        <Tabs.Menu.Card maxWidth={300} maxHeight={200}>
+          <Tabs.Menu.List>
+            {(item: Tab) => <Tabs.Menu.Item name={item.id}>{item.tab}</Tabs.Menu.Item>}
+          </Tabs.Menu.List>
+        </Tabs.Menu.Card>
+      </Tabs.Menu.Popper>
+      <Tabs.Panels>
+        {(item: Tab) => (
+          <Tabs.Panel marginTop="m" name={item.id}>
             Contents of {item.tab}
           </Tabs.Panel>
-        ))}
-      </div>
+        )}
+      </Tabs.Panels>
     </Tabs>
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "6.0.7",
+  "version": "6.1.3",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -50,7 +50,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^6.0.7"
+    "@workday/canvas-kit-react": "^6.1.3"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -58,5 +58,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "^3.8.3"
   },
-  "gitHead": "653e60db7580e9df9449e1e3791a199a8c5340f1"
+  "gitHead": "729934bb558b985af2b20a0444a4042c73adbaae"
 }

package/dist/mdx/labs-react/text-input/examples/Alert.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
-import {styled} from '@workday/canvas-kit-react/common';
-import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
-import {CSSProperties, space} from '@workday/canvas-kit-react/tokens';
-
-const StyledField = styled(TextInput.Field)<{alertStyles?: CSSProperties}>(
-  ({alertStyles}) => alertStyles
-);
-
-export default () => {
-  const [value, setValue] = React.useState('foo');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  const alertStyles = useThemedRing(
-    value.length < 3 ? 'error' : value.length < 5 ? 'alert' : 'success'
-  );
-
-  return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput>
-        <TextInput.Label>Password</TextInput.Label>
-        <StyledField
-          alertStyles={alertStyles}
-          onChange={handleChange}
-          value={value}
-          type="password"
-        />
-        <TextInput.Hint paddingTop={space.xxs}>
-          <strong>Password Strength: </strong>
-          {value.length < 3 ? (
-            <span>Weak</span>
-          ) : value.length < 5 ? (
-            <span>Average</span>
-          ) : (
-            <span>Strong</span>
-          )}
-        </TextInput.Hint>
-      </TextInput>
-    </VStack>
-  );
-};

package/dist/mdx/labs-react/text-input/examples/Basic.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput>
-        <TextInput.Label>Email</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} />
-      </TextInput>
-    </VStack>
-  );
-};

package/dist/mdx/labs-react/text-input/examples/Disabled.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput>
-        <TextInput.Label>Email</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} disabled />
-      </TextInput>
-    </VStack>
-  );
-};

package/dist/mdx/labs-react/text-input/examples/Grow.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <VStack spacing="xxxs">
-      <TextInput>
-        <TextInput.Label>Street Address</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} />
-      </TextInput>
-    </VStack>
-  );
-};

package/dist/mdx/labs-react/text-input/examples/LabelPosition.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {HStack} from '@workday/canvas-kit-labs-react/layout';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <HStack spacing="l" alignItems="center">
-      <TextInput>
-        <TextInput.Label>Email</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} />
-      </TextInput>
-    </HStack>
-  );
-};

package/dist/mdx/labs-react/text-input/examples/Password.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
-
-export default () => {
-  const [value, setValue] = React.useState('SuperSecret1');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput>
-        <TextInput.Label>Password</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} type="password" />
-      </TextInput>
-    </VStack>
-  );
-};

package/dist/mdx/labs-react/text-input/examples/Placeholder.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput>
-        <TextInput.Label>Email</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} placeholder="user@email.com" />
-      </TextInput>
-    </VStack>
-  );
-};

package/dist/mdx/labs-react/text-input/examples/Required.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput isRequired={true}>
-        <TextInput.Label>Email</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} />
-      </TextInput>
-    </VStack>
-  );
-};

package/dist/mdx/labs-react/text-input/examples/ThemedAlert.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
-import {CanvasProvider, PartialEmotionCanvasTheme, styled} from '@workday/canvas-kit-react/common';
-import {colors, CSSProperties, space} from '@workday/canvas-kit-react/tokens';
-
-export default () => {
-  const theme: PartialEmotionCanvasTheme = {
-    canvas: {
-      palette: {
-        common: {
-          focusOutline: colors.grapeSoda300,
-        },
-        alert: {
-          main: colors.kiwi500,
-          darkest: colors.kiwi600,
-        },
-      },
-    },
-  };
-  return (
-    <CanvasProvider theme={theme}>
-      <AlertInput />
-    </CanvasProvider>
-  );
-};
-
-const StyledField = styled(TextInput.Field)<{alertStyles?: CSSProperties}>(
-  ({alertStyles}) => alertStyles
-);
-
-const AlertInput = () => {
-  const [value, setValue] = React.useState('invalid@email');
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  const alertStyles = useThemedRing('alert');
-
-  return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput>
-        <TextInput.Label>Email</TextInput.Label>
-        <StyledField alertStyles={alertStyles} onChange={handleChange} value={value} />
-        <TextInput.Hint paddingTop={space.xxs}>Please enter a valid email.</TextInput.Hint>
-      </TextInput>
-    </VStack>
-  );
-};