@workday/canvas-kit-docs 11.0.0-alpha.682-next.0 → 11.0.0-alpha.696-next.0

package/dist/mdx/preview-react/table/examples/FixedColumn.tsx

@@ -9,7 +9,7 @@ export default () => {
   const headingID = useUniqueId();
   const exampleData = [
     {
-      brand: 'Porsche',
+      make: 'Porsche',
       model: '992 911 GT3',
       year: '2022',
       price: 'Starts at $160,000',
@@ -20,7 +20,7 @@ export default () => {
       curbWeight: '3,164 lbs',
     },
     {
-      brand: 'BMW',
+      make: 'BMW',
       model: 'M5 Competition',
       year: '2018',
       price: 'Starts at $105,000',
@@ -31,18 +31,18 @@ export default () => {
       curbWeight: '4,345 lbs',
     },
     {
-      brand: 'Audi',
-      model: 'R8',
-      year: '2022',
-      price: 'Starts at $148,000',
-      engine: '5.2L V10',
-      transmission: 'Automatic',
-      horsepower: '562hp',
-      torque: '408 lb-ft',
-      curbWeight: '3,594 lbs',
+      make: 'Alfa Romeo',
+      model: '1750 GTV',
+      year: '1970',
+      price: '$30,000 - $55,000',
+      engine: '1.75L Inline 4',
+      transmission: 'Manual',
+      horsepower: '122hp',
+      torque: '137 lb-ft',
+      curbWeight: '2,140 lbs',
     },
     {
-      brand: 'Lotus',
+      make: 'Lotus',
       model: 'Emira',
       year: '2023',
       price: 'Starts at $78,000',
@@ -53,7 +53,7 @@ export default () => {
       curbWeight: '3520 lbs',
     },
     {
-      brand: 'Toyota',
+      make: 'Toyota',
       model: 'Supra',
       year: '1998',
       price: '$40,000 - $80,000',
@@ -64,7 +64,7 @@ export default () => {
       curbWeight: '3,599 lbs',
     },
     {
-      brand: 'Nissan',
+      make: 'Nissan',
       model: 'Skyline GT-R',
       year: '1994',
       price: '$45,000 - $90,000',
@@ -90,7 +90,7 @@ export default () => {
               backgroundColor="soap100"
               borderRight={`2px solid ${colors.soap400}`}
             >
-              Brand
+              Make
             </Table.Header>
             <Table.Header scope="col">Model</Table.Header>
             <Table.Header scope="col">Year</Table.Header>
@@ -99,7 +99,7 @@ export default () => {
             <Table.Header scope="col">Transmission</Table.Header>
             <Table.Header scope="col">Horsepower</Table.Header>
             <Table.Header scope="col">Torque</Table.Header>
-            <Table.Header scope="col">Tires</Table.Header>
+            <Table.Header scope="col">Curb Weight</Table.Header>
           </Table.Row>
         </Table.Head>
         <Table.Body>
@@ -113,7 +113,7 @@ export default () => {
                   backgroundColor="soap100"
                   borderRight={`2px solid ${colors.soap400}`}
                 >
-                  {item.brand}
+                  {item.make}
                 </Table.Header>
                 <Table.Cell>{item.model}</Table.Cell>
                 <Table.Cell>{item.year}</Table.Cell>

package/dist/mdx/preview-react/table/examples/RightToLeft.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import {Table} from '@workday/canvas-kit-preview-react/table';
+import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+
+export default () => {
+  return (
+    <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
+      <Table>
+        <Table.Caption>משקאות קפה וגדלים</Table.Caption>
+        <Table.Head>
+          <Table.Row>
+            <Table.Header scope="col" backgroundColor="soap100">
+              מַשׁקֶה
+            </Table.Header>
+            <Table.Header scope="col" backgroundColor="soap100">
+              גודל
+            </Table.Header>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>אספרסו</Table.Cell>
+            <Table.Cell>1 גר</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>מקיאטו</Table.Cell>
+            <Table.Cell>2 גרם אספרסו</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>גזירה</Table.Cell>
+            <Table.Cell>2 גרם אספרסו, 1 גרם חלב מוקצף</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+    </CanvasProvider>
+  );
+};

package/dist/mdx/react/select/Select.mdx

@@ -15,6 +15,9 @@ import Required from './examples/Required';
 import MenuHeight from './examples/MenuHeight';
 import HoistedModel from './examples/HoistedModel';
 import RefForwarding from './examples/RefForwarding';
+import FetchingDynamicItems from './examples/FetchingDynamicItems';
+import Placeholder from './examples/Placeholder';
+import InitialSelectedItem from './examples/InitialSelectedItem';
 
 
 # Canvas Kit Select
@@ -86,6 +89,10 @@ and provides direct access to its `state` and `events` outside of the `Select` c
 In this example, we set up external observation of the model state and create an external button to
 trigger an event to change the selected item.
 
+**Note: If your array of objects uses an `id` property and a `text` property there is no need to use
+the helper functions of `getId` or `getTextValue`. The collection system and the `Select` use these
+properties by default for keyboard navigation and selected the `id` based on the item clicked.**
+
 <ExampleCodeBlock code={HoistedModel} />
 
 ### Label Position Horizontal
@@ -199,18 +206,43 @@ Use the error state when the selection is no longer valid.
 
 <ExampleCodeBlock code={Error} />
 
+### Initial Selected Item
+
+You can set `initialSelectedIds` to the value that you want initially selected.
+
+<ExampleCodeBlock code={InitialSelectedItem} />
+
+### Placeholder
+
+You can change the placeholder text by passing in a string value to the `placeholder` attribute on
+the `Select.Input`.
+
+<ExampleCodeBlock code={Placeholder} />
+
+### Fetching Dynamic Items
+
+It's common to load items from a server call. Hoisting the `model` and setting your items on state
+allows you to pass those items to your `model`. You can leverage React state to set your items on
+load as well as displaying a placeholder indicating when items are loaded.
+
+**Note: In this case we need to use `getId` and `getTextValue` because our data doesn't have the
+properties of `id` or `text`. Using these helper functions sets the `serverId` to be `id` and
+`label` to be `text`.**
+
+<ExampleCodeBlock code={FetchingDynamicItems} />
+
 ### Complex
 
-When registering items in an array of objects, it's common to have an `id` that is different than
-the text value displayed in the UI. Typically, this `id` is used to send to the server. Use the `id`
-value to set the `data-id` property on `Select.Item` to ensure proper keyboard handling and
-type-ahead.
+When registering items in an array of objects, it's common to have the text that is displayed to the user be
+different than an id. In this example, `serverId` and `label` properties need to be remapped to
+`id` and `text` hence the usage of `getId` and `getTextValue`. If your object has the properties
+`text` and `id`, there would be no need for this.
 
 <ExampleCodeBlock code={Complex} />
 
-By default, the identifier and text value are `id` and `text` properties respectively. If your data
-object for each item is different, provide a `getId` or `getTextValue` function to the model config.
-For example:
+**Note: By default, the identifier and text value are `id` and `text` properties respectively. If
+your data object for each item is different, provide a `getId` or `getTextValue` function to the
+model config. For example:**
 
 ```jsx
 const items = [
@@ -225,6 +257,49 @@ const items = [
 </Select>;
 ```
 
+### When to use `getId`, or `getTextValue`
+
+- `getId`: This is an optional function to return the id of an item. If not provided, the default
+  function will return the `id` property from the object of each item. If you did not provide
+  `items`, do not override this function. Instead provide static
+  items via JSX. the list will create an internal array of items where `id` is the only property and
+  the default `getId` will return the desired result. **Note: If your array of objects has a
+  different property for `id`, like `serverId`, use this function to set the id.**
+
+  ```tsx
+  const options = [{text: 'Pizza', serverId: 'pizza-1'}, {text: 'Cheeseburger', serverId: 'cheeseburger'}]
+  <Select items={options} getId={(item) => item.serverId}>
+    <FormField label="Your Label">
+      <Select.Input onChange={e => handleChange(e)} id="contact-select" />
+      <Select.Popper>
+        <Select.Card>
+          <Select.List>{item => <Select.Item>{item.text}</Select.Item>}</Select.List>
+        </Select.Card>
+      </Select.Popper>
+    </FormField>
+  </Select>
+  ```
+
+- `getTextValue`: Optional function to return the text representation of an item. If not provided,
+  the default function will return the `text` property of the object of each item or an empty string
+  if there is no `text` property. If you did not provide `items`, do not override this function.
+  **Note: If your array of objects has a different property for `text`, like `label`, use this
+  function to set the text.**
+
+  ```tsx
+  const options = [{label: 'Pizza', id: 'pizza-1'}, {label: 'Cheeseburger', id: 'cheeseburger'}]
+  <Select items={options} getTextValue={(item) => item.label}>
+    <FormField label="Your Label">
+      <Select.Input onChange={e => handleChange(e)} id="contact-select" />
+      <Select.Popper>
+        <Select.Card>
+          <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>
+        </Select.Card>
+      </Select.Popper>
+    </FormField>
+  </Select>
+  ```
+
 ## Component API
 
 <SymbolDoc name="Select" fileName="/react/" />

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

@@ -24,7 +24,7 @@ export default () => {
       <Select items={options}>
         <FormField>
           <FormField.Label>Contact</FormField.Label>
-          <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />
+          <FormField.Input as={Select.Input} onChange={handleChange} />
           <Select.Popper>
             <Select.Card>
               <Select.List>

package/dist/mdx/react/select/examples/Complex.tsx

@@ -4,14 +4,14 @@ import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
 const options = [
-  {id: 'email', text: 'E-mail'},
-  {id: 'phone', text: 'Phone'},
-  {id: 'fax', text: 'Fax'},
-  {id: 'mail', text: 'Mail'},
-  {id: 'mobile', text: 'Mobile Phone'},
+  {serverId: 'email', label: 'E-mail'},
+  {serverId: 'phone', label: 'Phone'},
+  {serverId: 'fax', label: 'Fax'},
+  {serverId: 'mail', label: 'Mail'},
+  {serverId: 'mobile', label: 'Mobile Phone'},
   {
-    id: 'oasis',
-    text: 'The Ontologically Anthropocentric Sensory Immersive Simulation',
+    serverId: 'oasis',
+    label: 'The Ontologically Anthropocentric Sensory Immersive Simulation',
   },
 ];
 
@@ -20,24 +20,19 @@ export default () => {
   const [id, setId] = React.useState('');
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
-  };
-
-  const handleSelect = ({id}: {id: string}) => {
-    setId(id);
+    setId(event.target.value);
+    setValue(options.find(item => item.serverId === event.target.value)!.label);
   };
 
   return (
     <Flex flexDirection="column">
-      <Select items={options} onSelect={handleSelect}>
+      <Select items={options} getId={item => item.serverId} getTextValue={item => item.label}>
         <FormField>
           <FormField.Label>Contact</FormField.Label>
           <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />
           <Select.Popper>
             <Select.Card>
-              <Select.List>
-                {item => <Select.Item data-id={item.id}>{item.text}</Select.Item>}
-              </Select.List>
+              <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>
             </Select.Card>
           </Select.Popper>
         </FormField>

package/dist/mdx/react/select/examples/FetchingDynamicItems.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {useMount} from '@workday/canvas-kit-react/common';
+
+const movieListItems = [
+  {
+    label: 'The Lion King',
+    serverId: '123',
+    Year: '2019',
+    Runtime: '118 min',
+  },
+  {
+    label: 'Mowgli: Legend of the Jungle',
+    serverId: '234',
+    Year: '2018',
+    Runtime: '104 min',
+  },
+  {
+    label: 'Doctor Strange',
+    serverId: '345',
+    Year: '2016',
+    Runtime: '115 min',
+  },
+  {
+    label: 'John Wick',
+    Year: '2014',
+    serverId: '456',
+    Runtime: '101 min',
+  },
+  {
+    label: 'The Notebook',
+    serverId: '567',
+    Year: '2004',
+    Runtime: '123 min',
+  },
+];
+
+export default () => {
+  const [id, setId] = React.useState('456');
+  const [value, setValue] = React.useState('');
+  const [moviesLists, setMoviesList] = React.useState([]);
+  const [loadingStatus, setLoadingStatus] = React.useState<'idle' | 'loading' | 'success'>('idle');
+  const loadingRef = React.useRef<ReturnType<typeof setTimeout>>();
+
+  const model = useSelectModel({
+    items: moviesLists,
+    getTextValue: item => item.label,
+    getId: item => item.serverId,
+    initialSelectedIds: [id],
+  });
+
+  function loadItems() {
+    setLoadingStatus('loading');
+    loadingRef.current = setTimeout(() => {
+      setLoadingStatus('success');
+      setMoviesList(movieListItems);
+    }, 1500);
+  }
+
+  useMount(() => {
+    return () => {
+      clearTimeout(loadingRef.current);
+    };
+  });
+
+  return (
+    <Flex flexDirection="column" maxWidth={300}>
+      <div id="foo">Foo Bar</div>
+      <Select model={model}>
+        <FormField label="Choose a Film">
+          <Select.Input
+            onChange={e => {
+              setId(e.target.value);
+              setValue(model.navigation.getItem(e.target.value, model).textValue);
+            }}
+            placeholder={loadingStatus}
+          />
+          <Select.Popper>
+            <Select.Card>
+              <Select.List>
+                {item => {
+                  return <Select.Item>{item.label}</Select.Item>;
+                }}
+              </Select.List>
+            </Select.Card>
+          </Select.Popper>
+        </FormField>
+      </Select>
+      <div data-testid="selected-id">Selected Id: {id}</div>
+      <div data-testid="selected-value">Selected value: {value}</div>
+      <PrimaryButton
+        onClick={() => {
+          loadItems();
+        }}
+      >
+        Get Items
+      </PrimaryButton>
+    </Flex>
+  );
+};

package/dist/mdx/react/select/examples/Grow.tsx

@@ -25,11 +25,7 @@ export default () => {
           <FormField.Input grow as={Select.Input} />
           <Select.Popper>
             <Select.Card>
-              {model.state.items.length > 0 && (
-                <Select.List scrollMargin="10px">
-                  {item => <Select.Item>{item}</Select.Item>}
-                </Select.List>
-              )}
+              <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
             </Select.Card>
           </Select.Popper>
         </FormField>

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

@@ -5,18 +5,17 @@ import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
 import {BodyText} from '@workday/canvas-kit-react/text';
 
 const options = [
-  'E-mail',
-  'Phone',
-  'Fax (disabled)',
-  'Mail',
-  'Mobile Phone',
-  'The Ontologically Anthropocentric Sensory Immersive Simulation',
+  {text: 'E-mail', id: 'email-1'},
+  {text: 'Phone', id: 'phone-2'},
+  {text: 'Fax', id: 'fax-3'},
+  {text: 'Mail', id: 'mail-4'},
+  {text: 'Mobile Phone', id: 'mobile-phone-5'},
 ];
 
 export default () => {
   const model = useSelectModel({
     items: options,
-    nonInteractiveIds: ['Fax (disabled)'],
+    initialSelectedIds: ['fax-3'],
   });
 
   return (
@@ -27,13 +26,7 @@ export default () => {
           <FormField.Input as={Select.Input} />
           <Select.Popper>
             <Select.Card>
-              <Select.List>
-                {item => (
-                  <Select.Item aria-disabled={item === 'Fax (disabled)' ? true : undefined}>
-                    {item}
-                  </Select.Item>
-                )}
-              </Select.List>
+              <Select.List>{item => <Select.Item>{item.text}</Select.Item>}</Select.List>
             </Select.Card>
           </Select.Popper>
         </FormField>
@@ -41,7 +34,7 @@ export default () => {
       <BodyText size="small">Selected Value: {model.state.selectedIds[0]}</BodyText>
       <SecondaryButton
         onClick={() => {
-          model.events.select({id: 'Phone'});
+          model.events.select({id: 'phone-2'});
         }}
       >
         Select Phone Item

package/dist/mdx/react/select/examples/InitialSelectedItem.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-react/select';
+import {Flex} from '@workday/canvas-kit-react/layout';
+
+const options = [
+  {
+    id: 'b310c757b2d341f99d40d76f4d563c5b',
+    descriptor: 'Arabic',
+    languageCode: 'ar',
+    label: 'Arabic',
+    nativeLanguageName: 'العربية',
+  },
+  {
+    id: 'a675a6b6e22d100017d7fe2a784d1255',
+    descriptor: 'Bulgarian (Bulgaria)',
+    languageCode: 'bg_BG',
+    label: 'Bulgarian (Bulgaria)',
+    nativeLanguageName: 'български (Република България)',
+  },
+  {
+    id: 'da594226446c11de98360015c5e6daf6',
+    descriptor: 'English (United States)',
+    languageCode: 'en_US',
+    label: 'English (United States)',
+    nativeLanguageName: 'English',
+  },
+];
+
+export default () => {
+  const [value, setValue] = React.useState('English (United States)');
+  const [id, setId] = React.useState('da594226446c11de98360015c5e6daf6');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setId(event.target.value);
+    setValue(options.find(item => item.id === event.target.value).label);
+  };
+
+  return (
+    <Flex flexDirection="column">
+      <Select
+        items={options}
+        initialSelectedIds={['da594226446c11de98360015c5e6daf6']}
+        getId={item => item.id}
+        getTextValue={item => item.label}
+      >
+        <FormField label="Contact">
+          <Select.Input onChange={e => handleChange(e)} />
+          <Select.Popper>
+            <Select.Card>
+              <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>
+            </Select.Card>
+          </Select.Popper>
+        </FormField>
+      </Select>
+      <p>Id: {id}</p>
+      <p>Value: {value}</p>
+    </Flex>
+  );
+};

package/dist/mdx/react/select/examples/LabelPosition.tsx

@@ -25,9 +25,7 @@ export default () => {
           <FormField.Input as={Select.Input} />
           <Select.Popper>
             <Select.Card>
-              {model.state.items.length > 0 && (
-                <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
-              )}
+              <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
             </Select.Card>
           </Select.Popper>
         </FormField>

package/dist/mdx/react/select/examples/Placeholder.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-react/select';
+import {Flex} from '@workday/canvas-kit-react/layout';
+
+const options = [
+  'E-mail',
+  'Phone',
+  'Fax',
+  'Mail',
+  'Mobile Phone',
+  'The Ontologically Anthropocentric Sensory Immersive Simulation',
+];
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <Flex flexDirection="column">
+      <Select items={options}>
+        <FormField label="Contact">
+          <Select.Input placeholder="Make a Selection" onChange={e => handleChange(e)} />
+          <Select.Popper>
+            <Select.Card>
+              <Select.List>
+                {item => {
+                  return <Select.Item>{item}</Select.Item>;
+                }}
+              </Select.List>
+            </Select.Card>
+          </Select.Popper>
+        </FormField>
+      </Select>
+      Selected Value: {value}
+    </Flex>
+  );
+};

package/dist/mdx/react/select/examples/RefForwarding.tsx

@@ -22,6 +22,7 @@ export default () => {
 
   const handleClick = () => {
     if (ref && ref.current) {
+      console.log(ref);
       ref.current.focus();
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "11.0.0-alpha.682-next.0",
+  "version": "11.0.0-alpha.696-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^11.0.0-alpha.682-next.0",
-    "@workday/canvas-kit-preview-react": "^11.0.0-alpha.682-next.0",
-    "@workday/canvas-kit-react": "^11.0.0-alpha.682-next.0",
-    "@workday/canvas-kit-styling": "^11.0.0-alpha.682-next.0",
+    "@workday/canvas-kit-labs-react": "^11.0.0-alpha.696-next.0",
+    "@workday/canvas-kit-preview-react": "^11.0.0-alpha.696-next.0",
+    "@workday/canvas-kit-react": "^11.0.0-alpha.696-next.0",
+    "@workday/canvas-kit-styling": "^11.0.0-alpha.696-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.0.2",
     "markdown-to-jsx": "^6.10.3",
@@ -59,5 +59,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "2c256dd5658519e10bfd8e30d629ceb0a8260a71"
+  "gitHead": "2b897235cbf8b889cd1e7f750e8c905b56944368"
 }