@workday/canvas-kit-docs 6.0.0-alpha.0-next.33 → 6.0.0-alpha.0-next.39

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/dist/mdx/react/tooltip/Tooltip.mdx

@@ -3,6 +3,7 @@ import {Specifications} from '@workday/canvas-kit-docs';
 
 import Default from './examples/Default';
 import CustomContent from './examples/CustomContent';
+import DelayedTooltip from './examples/DelayedTooltip';
 import DescribeType from './examples/DescribeType';
 import Muted from './examples/Muted';
 import Placements from './examples/Placements';
@@ -87,6 +88,13 @@ a dialog instead.
 
 <ExampleCodeBlock code={CustomContent} />
 
+### Delayed Tooltip
+
+The default delay for showing and hiding a tooltip are 300ms and 100ms, respectively. You can
+control the length of the delay by providing custom `showDelay` and `hideDelay` in ms.
+
+<ExampleCodeBlock code={DelayedTooltip} />
+
 ### Placements
 
 The tooltip allows for a `placement` configuration. The tooltip uses

package/dist/mdx/react/tooltip/examples/DelayedTooltip.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+
+export default () => {
+  return (
+    <React.Fragment>
+      <Tooltip type="describe" title="Tooltip Text" showDelay={2000} hideDelay={1000}>
+        <SecondaryButton>
+          Tooltip appears after 2 seconds and disappears after 1 second
+        </SecondaryButton>
+      </Tooltip>
+    </React.Fragment>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "6.0.0-alpha.0-next.33+6766b20c",
+  "version": "6.0.0-alpha.0-next.39+ac7c09b9",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -35,7 +35,8 @@
     "build:specs": "node ./utils/build-specifications.js",
     "build:downlevel-dts": "yarn run downlevel-dts dist ts3.5/dist",
     "build": "npm-run-all --parallel build:cjs build:es6 build:mdx --sequential build:specs build:downlevel-dts",
-    "depcheck": "node ../../utils/check-dependencies-exist.js"
+    "depcheck": "node ../../utils/check-dependencies-exist.js",
+    "typecheck:src": "tsc -p . --noEmit --incremental false"
   },
   "publishConfig": {
     "access": "public"
@@ -49,7 +50,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^6.0.0-alpha.0-next.33+6766b20c"
+    "@workday/canvas-kit-react": "^6.0.0-alpha.0-next.39+ac7c09b9"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -57,5 +58,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "^3.8.3"
   },
-  "gitHead": "6766b20c35f85b44e1c32b95e88ab376bf09eb84"
+  "gitHead": "ac7c09b97add635f256ffc4103478fab55da55c2"
 }

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