@workday/canvas-kit-docs 10.3.4 → 10.3.6

package/dist/es6/lib/docs.js

@@ -78745,6 +78745,30 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                   }
                 ],
                 "tags": {}
+              },
+              {
+                "kind": "property",
+                "name": "item",
+                "required": false,
+                "type": {
+                  "kind": "symbol",
+                  "name": "Item",
+                  "typeParameters": [
+                    {
+                      "kind": "primitive",
+                      "value": "any"
+                    }
+                  ],
+                  "value": "Item<T>"
+                },
+                "description": "",
+                "declarations": [
+                  {
+                    "name": "item",
+                    "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/useListItemAllowChildStrings.ts"
+                  }
+                ],
+                "tags": {}
               }
             ]
           },
@@ -101397,6 +101421,27 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "tags": {},
                 "declarations": []
               },
+              {
+                "kind": "property",
+                "name": "aria-activedescendant",
+                "required": true,
+                "type": {
+                  "kind": "union",
+                  "value": [
+                    {
+                      "kind": "primitive",
+                      "value": "null"
+                    },
+                    {
+                      "kind": "primitive",
+                      "value": "undefined"
+                    }
+                  ]
+                },
+                "description": "",
+                "tags": {},
+                "declarations": []
+              },
               {
                 "kind": "property",
                 "name": "id",
@@ -191589,6 +191634,23 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                       }
                     ],
                     "tags": {}
+                  },
+                  {
+                    "kind": "property",
+                    "name": "placeholder",
+                    "required": false,
+                    "type": {
+                      "kind": "primitive",
+                      "value": "string"
+                    },
+                    "description": "",
+                    "declarations": [
+                      {
+                        "name": "placeholder",
+                        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/hooks/useSelectInput.ts"
+                      }
+                    ],
+                    "tags": {}
                   }
                 ]
               },
@@ -191648,6 +191710,112 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "tags": {},
                 "declarations": []
               },
+              {
+                "kind": "property",
+                "name": "onChange",
+                "required": true,
+                "type": {
+                  "kind": "function",
+                  "parameters": [
+                    {
+                      "kind": "parameter",
+                      "name": "event",
+                      "type": {
+                        "kind": "symbol",
+                        "name": "React.ChangeEvent",
+                        "typeParameters": [
+                          {
+                            "kind": "symbol",
+                            "name": "HTMLInputElement",
+                            "value": "HTMLInputElement"
+                          }
+                        ],
+                        "value": "ChangeEvent<T>"
+                      },
+                      "required": true,
+                      "rest": false,
+                      "description": "",
+                      "declarations": [
+                        {
+                          "name": "event",
+                          "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/hooks/useSelectInput.ts"
+                        }
+                      ],
+                      "tags": {}
+                    }
+                  ],
+                  "members": [],
+                  "returnType": {
+                    "kind": "primitive",
+                    "value": "void"
+                  }
+                },
+                "description": "",
+                "tags": {},
+                "declarations": []
+              },
+              {
+                "kind": "property",
+                "name": "autoComplete",
+                "required": true,
+                "type": {
+                  "kind": "string",
+                  "value": "off"
+                },
+                "description": "",
+                "tags": {},
+                "declarations": []
+              },
+              {
+                "kind": "property",
+                "name": "onFocus",
+                "required": true,
+                "type": {
+                  "kind": "function",
+                  "parameters": [],
+                  "members": [],
+                  "returnType": {
+                    "kind": "primitive",
+                    "value": "void"
+                  }
+                },
+                "description": "",
+                "tags": {},
+                "declarations": []
+              },
+              {
+                "kind": "property",
+                "name": "textInputProps",
+                "required": true,
+                "type": {
+                  "kind": "object",
+                  "properties": [
+                    {
+                      "kind": "property",
+                      "name": "ref",
+                      "required": true,
+                      "type": {
+                        "kind": "symbol",
+                        "name": "RefObject",
+                        "typeParameters": [
+                          {
+                            "kind": "symbol",
+                            "name": "HTMLInputElement",
+                            "value": "any"
+                          }
+                        ],
+                        "value": "any"
+                      },
+                      "description": "",
+                      "tags": {},
+                      "declarations": []
+                    }
+                  ]
+                },
+                "description": "",
+                "tags": {},
+                "declarations": []
+              },
               {
                 "kind": "property",
                 "name": "ref",
@@ -191694,18 +191862,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "tags": {},
                 "declarations": []
               },
-              {
-                "kind": "property",
-                "name": "autoComplete",
-                "required": true,
-                "type": {
-                  "kind": "string",
-                  "value": "off"
-                },
-                "description": "",
-                "tags": {},
-                "declarations": []
-              },
               {
                 "kind": "property",
                 "name": "defaultValue",
@@ -198545,6 +198701,24 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           ],
           "tags": {}
         },
+        {
+          "kind": "property",
+          "name": "cs",
+          "required": false,
+          "type": {
+            "kind": "symbol",
+            "name": "CSToPropsInput",
+            "value": "CSToPropsInput"
+          },
+          "description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles}, or the result of {@link createVars} and\n{@link createModifiers}. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp} wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles} instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n   {...handleCsProp(elemProps, [\n     myStyles,\n     myModifiers({ size: 'medium' }),\n     myVars({ backgroundColor: 'red' })\n   ])}\n >\n   {children}\n </Element>\n)\n```",
+          "declarations": [
+            {
+              "name": "cs",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
+            }
+          ],
+          "tags": {}
+        },
         {
           "kind": "property",
           "name": "children",

package/dist/es6/lib/specs.js

@@ -4345,6 +4345,10 @@ module.exports = {specifications: [
                 "type": "it",
                 "name": "should not have any axe errors"
               },
+              {
+                "type": "it",
+                "name": "should not have an aria-activedescendant attribute"
+              },
               {
                 "type": "describe",
                 "name": "when the select button is clicked",
@@ -4587,6 +4591,10 @@ module.exports = {specifications: [
                     "type": "describe",
                     "name": "when the menu is closed WITHOUT selecting the newly focused option (\"Phone\")",
                     "children": [
+                      {
+                        "type": "it",
+                        "name": "should not have an aria-activedescendant attribute"
+                      },
                       {
                         "type": "describe",
                         "name": "when the menu is re-opened AFTER it has fully closed",
@@ -4946,6 +4954,22 @@ module.exports = {specifications: [
             ]
           }
         ]
+      },
+      {
+        "type": "describe",
+        "name": "given the \"FetchingDynamicItems\" story is rendered",
+        "children": [
+          {
+            "type": "describe",
+            "name": "when Get Items is clicked",
+            "children": [
+              {
+                "type": "it",
+                "name": "should change the value of the select to 456 (the id) after 1.5 seconds"
+              }
+            ]
+          }
+        ]
       }
     ]
   },

package/dist/mdx/preview-react/side-panel/examples/RightOrigin.tsx

@@ -35,9 +35,9 @@ const RightPanel = () => {
       {panelState === 'expanded' ? (
         expandedContent
       ) : (
-            <Text hidden {...labelProps}>
-              Tasks Panel
-            </Text>
+        <Text hidden {...labelProps}>
+          Tasks Panel
+        </Text>
       )}
     </StyledSidePanel>
   );

package/dist/mdx/preview-react/table/Table.mdx

@@ -4,6 +4,7 @@ import {Table} from '@workday/canvas-kit-preview-react/table';
 import Basic from './examples/Basic';
 import BasicWithHeading from './examples/BasicWithHeading';
 import FixedColumn from './examples/FixedColumn';
+import RightToLeft from './examples/RightToLeft';
 
 
 # Canvas Kit Table
@@ -29,6 +30,12 @@ customization of the title/heading of their table.
 
 <ExampleCodeBlock code={BasicWithHeading} />
 
+### Right to Left
+
+Table supports right-to-left languages when specified in the CanvasProvider theme.
+
+<ExampleCodeBlock code={RightToLeft} />
+
 ### Example with Caption
 
 Users are free to use a `caption` instead of a heading. A `caption` is not required but it is good

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
@@ -74,6 +77,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
@@ -190,18 +197,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 = [
@@ -216,6 +248,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

@@ -23,7 +23,7 @@ export default () => {
     <Flex flexDirection="column">
       <Select items={options}>
         <FormField label="Contact">
-          <Select.Input onChange={e => handleChange(e)} />
+          <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,23 +20,18 @@ 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 label="Contact">
           <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

@@ -24,11 +24,7 @@ export default () => {
           <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 (
@@ -26,13 +25,7 @@ export default () => {
           <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>
@@ -40,7 +33,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

@@ -24,9 +24,7 @@ export default () => {
           <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": "10.3.4",
+  "version": "10.3.6",
   "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": "^10.3.4",
-    "@workday/canvas-kit-preview-react": "^10.3.4",
-    "@workday/canvas-kit-react": "^10.3.4",
-    "@workday/canvas-kit-styling": "^10.3.4",
+    "@workday/canvas-kit-labs-react": "^10.3.6",
+    "@workday/canvas-kit-preview-react": "^10.3.6",
+    "@workday/canvas-kit-react": "^10.3.6",
+    "@workday/canvas-kit-styling": "^10.3.6",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.0.0",
     "markdown-to-jsx": "^6.10.3",
@@ -59,5 +59,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "86269e56ac2b18223ec4e6318a63123eabdeef40"
+  "gitHead": "eb4bb0dca899f228ce654f2bc8b251b0e082b59d"
 }