@workday/canvas-kit-docs 9.0.0-alpha.419-next.21 → 9.0.0-alpha.420-next.22

package/dist/es6/lib/specs.js

@@ -207,6 +207,302 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "Autocomplete.spec.ts",
+    "children": [
+      {
+        "type": "describe",
+        "name": "Autocomplete",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given the 'Autocomplete' story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should have aria-haspopup set to true"
+              },
+              {
+                "type": "it",
+                "name": "should have aria-expanded set to false"
+              },
+              {
+                "type": "it",
+                "name": "should not have an aria-activedescendant attribute"
+              },
+              {
+                "type": "it",
+                "name": "should have an aria-autocomplete attribute set to \"list\""
+              },
+              {
+                "type": "it",
+                "name": "should not set aria-owns"
+              },
+              {
+                "type": "it",
+                "name": "should not show menu"
+              },
+              {
+                "type": "it",
+                "name": "should not show the clear button"
+              },
+              {
+                "type": "describe",
+                "name": "when the combobox is opened",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should set the aria-owns to reference the listbox element"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should show menu"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should not have activedescendant set"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should not have aria-selected=true on any elements"
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the user types a printable character \"b\"",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should clear activedescendant"
+                      },
+                      {
+                        "type": "it",
+                        "name": "should not set aria-selected to the first option"
+                      }
+                    ]
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when a value is entered",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should have the value entered as the value"
+                      },
+                      {
+                        "type": "describe",
+                        "name": "when escape key is pressed",
+                        "children": [
+                          {
+                            "type": "it",
+                            "name": "should clear the combobox"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should close the listbox"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should keep focus on the combobox"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should not show the clear button"
+                          }
+                        ]
+                      },
+                      {
+                        "type": "describe",
+                        "name": "when the clear button is clicked",
+                        "children": [
+                          {
+                            "type": "it",
+                            "name": "should clear the combobox"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should close the listbox"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should keep focus on the combobox"
+                          }
+                        ]
+                      },
+                      {
+                        "type": "describe",
+                        "name": "when down arrow key is pressed",
+                        "children": [
+                          {
+                            "type": "it",
+                            "name": "should have activedecendant set to the first option"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should set aria-selected to the first option"
+                          },
+                          {
+                            "type": "describe",
+                            "name": "when the user presses the enter key",
+                            "children": [
+                              {
+                                "type": "it",
+                                "name": "should set the combobox value to the option text value"
+                              },
+                              {
+                                "type": "it",
+                                "name": "should close the listbox"
+                              },
+                              {
+                                "type": "describe",
+                                "name": "when the use hits the \"2\" key",
+                                "children": [
+                                  {
+                                    "type": "it",
+                                    "name": "should open the listbox"
+                                  },
+                                  {
+                                    "type": "it",
+                                    "name": "should change the combobox value to reflect the key entered"
+                                  },
+                                  {
+                                    "type": "it",
+                                    "name": "should change the filtered results"
+                                  }
+                                ]
+                              }
+                            ]
+                          },
+                          {
+                            "type": "describe",
+                            "name": "when the user presses metaKey + enter key",
+                            "children": [
+                              {
+                                "type": "it",
+                                "name": "should not set the combobox value to the option text value"
+                              },
+                              {
+                                "type": "it",
+                                "name": "should not close the listbox"
+                              }
+                            ]
+                          }
+                        ]
+                      },
+                      {
+                        "type": "describe",
+                        "name": "when the user clicks on the first option",
+                        "children": [
+                          {
+                            "type": "it",
+                            "name": "should set the combobox value to the option text value"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should close the listbox"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should keep focus on combobox"
+                          },
+                          {
+                            "type": "describe",
+                            "name": "when the user clicks on the combobox",
+                            "children": [
+                              {
+                                "type": "it",
+                                "name": "should open the listbox again"
+                              }
+                            ]
+                          }
+                        ]
+                      },
+                      {
+                        "type": "describe",
+                        "name": "when down arrow key is pressed two times",
+                        "children": [
+                          {
+                            "type": "it",
+                            "name": "should have activedecendant set to the second option"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should set aria-selected to the second option"
+                          }
+                        ]
+                      },
+                      {
+                        "type": "describe",
+                        "name": "when the value is \"Red Apple 1\"",
+                        "children": [
+                          {
+                            "type": "describe",
+                            "name": "when the value is \"Red Apple 1\" and down arrow key is pressed six times",
+                            "children": [
+                              {
+                                "type": "it",
+                                "name": "should have activedecendant set to the first option"
+                              },
+                              {
+                                "type": "it",
+                                "name": "should set aria-selected to the first option"
+                              }
+                            ]
+                          },
+                          {
+                            "type": "describe",
+                            "name": "when up arrow key is pressed",
+                            "children": [
+                              {
+                                "type": "it",
+                                "name": "should have activedecendant set to the last option"
+                              },
+                              {
+                                "type": "it",
+                                "name": "should set aria-selected to the last option"
+                              }
+                            ]
+                          },
+                          {
+                            "type": "describe",
+                            "name": "when up arrow key is pressed two times",
+                            "children": [
+                              {
+                                "type": "it",
+                                "name": "should have activedecendant set to the third option"
+                              },
+                              {
+                                "type": "it",
+                                "name": "should set aria-selected to the third option"
+                              }
+                            ]
+                          },
+                          {
+                            "type": "describe",
+                            "name": "when up arrow key is pressed four times",
+                            "children": [
+                              {
+                                "type": "it",
+                                "name": "should have activedecendant set to the first option"
+                              },
+                              {
+                                "type": "it",
+                                "name": "should set aria-selected to the first option"
+                              }
+                            ]
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "Avatar.spec.ts",

package/dist/es6/lib/widgets/enhancedComponent.js

@@ -55,7 +55,7 @@ registerWidget('enhancedComponent', ({ value, doc, meta }) => {
         value.styleComponent ? (React.createElement(React.Fragment, null,
             React.createElement(Heading, { headingOffset: 1 }, "Layout Component"),
             React.createElement(MDX, { as: "p" },
-                React.createElement("code", null, value.displayName),
+                React.createElement("code", null, value.displayName || parentComponentName),
                 " supports all props from the",
                 React.createElement("code", null,
                     React.createElement(ParentComponentJSDocContext.Provider, { value: defaultJSDoc },

package/dist/mdx/react/collection/Collection.mdx

@@ -67,9 +67,9 @@ The collection system comes with a data loader to help with dynamic collections.
 when the user navigates the collection and needs more data. This example shows how to hook up a
 simple data loader and mocks a `load` function to simulate an asynchronous response.
 
-The data loader also takes a model argument to know which model to create. The loader configures
-the model to handle asynchronous keyboard navigation and will return the configured model to you
-to pass along to the collection component.
+The data loader also takes a model argument to know which model to create. The loader configures the
+model to handle asynchronous keyboard navigation and will return the configured model to you to pass
+along to the collection component.
 
 <ExampleCodeBlock code={DataLoader} />
 
@@ -106,9 +106,9 @@ uses `ListBox` and creates a custom `SelectableItem` elemProps hook and componen
 
 Sometimes it is desired to allow the string children to be the identifiers for each item. This could
 be useful for autocomplete components where the item's text is the desired identifier. Normally, if
-no `data-id` is provided to the item, the system will choose the registration index. This would be `'0'`, `'1'`, and so on.
-By passing `useListItemAllowChildStrings` to an item component, it will change this behavior to use the child text if no
-`data-id` is provided.
+no `data-id` is provided to the item, the system will choose the registration index. This would be
+`'0'`, `'1'`, and so on. By passing `useListItemAllowChildStrings` to an item component, it will
+change this behavior to use the child text if no `data-id` is provided.
 
 <ExampleCodeBlock code={StringChildren} />
 
@@ -141,10 +141,8 @@ cursor wraps around columns and rows when an edge of a column or row is encounte
 
 ### ListBox
 
-<>
 <SymbolDoc name="ListBox" fileName="/react/" />
 <SymbolDoc name="useGridModel" fileName="/react/" />
-</>
 
 ### Navigation Manager
 
@@ -168,7 +166,6 @@ columns, but not rows. This is the default navigation manager for lists.
 
 ## Hooks
 
-<>
 <SymbolDoc name="useListItemRegister" fileName="/react/" />
 <SymbolDoc name="useListItemAllowChildStrings" fileName="/react/" />
 <SymbolDoc name="useListItemRovingFocus" fileName="/react/" />
@@ -178,5 +175,4 @@ columns, but not rows. This is the default navigation manager for lists.
 <SymbolDoc name="useOverflowListItemMeasure" fileName="/react/" />
 <SymbolDoc name="useOverflowListMeasure" fileName="/react/" />
 <SymbolDoc name="useOverflowListTarget" fileName="/react/" />
-<SymbolDoc name="useListLoader" fileName="/react/" />
-</>
+<SymbolDoc name="useListLoader" fileName="/react/" />

package/dist/mdx/react/combobox/Combobox.mdx

@@ -0,0 +1,47 @@
+import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+
+import {Combobox} from '@workday/canvas-kit-react/combobox';
+import Autocomplete from './examples/Autocomplete';
+
+
+# Combobox
+
+Combobox is an _abstract_ compound component - it should not be used on its own, but used as a base
+to create combobox components. The Combobox system provides components, models, loaders, and
+elemProps hooks.
+
+The term "Combobox" is based on the
+[Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) as defined in the ARIA
+Authoring Practices Guide (APG):
+
+> A [combobox](https://w3c.github.io/aria/#combobox) is an input widget with an associated popup
+> that enables users to select a value for the combobox from a collection of possible values.
+
+Examples of a "combobox" would be date pickers, autocomplete, and select components.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-react
+```
+
+## Usage
+
+### Autocomplete
+
+This example shows an Autocomplete example using `FormField`, `InputGroup`, and the `Combobox`
+components to make an autocomplete form field. It uses `useComboboxLoader` to make mock API calls
+using `setTimeout`. Your application may use
+[fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API),
+[WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API), or other means of
+communicating with a server.
+
+<ExampleCodeBlock code={Autocomplete} />
+
+## Component API
+
+<SymbolDoc name="Combobox" fileName="/react/" hideDescription />
+
+## Hooks
+
+<SymbolDoc name="useComboboxLoader" fileName="/react/" />

package/dist/mdx/react/combobox/examples/Autocomplete.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+
+import {
+  createElemPropsHook,
+  createSubcomponent,
+  composeHooks,
+  ExtractProps,
+} from '@workday/canvas-kit-react/common';
+import {LoadReturn} from '@workday/canvas-kit-react/collection';
+import {
+  Combobox,
+  useComboboxModel,
+  useComboboxLoader,
+  useComboboxInput,
+} from '@workday/canvas-kit-react/combobox';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
+import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
+import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
+
+const colors = ['Red', 'Blue', 'Purple', 'Green', 'Pink'];
+const fruits = ['Apple', 'Orange', 'Banana', 'Grape', 'Lemon', 'Lime'];
+const options = Array(1000)
+  .fill('')
+  .map((_, index) => {
+    return `${colors[index % colors.length]} ${fruits[index % fruits.length]} ${index + 1}`;
+  });
+
+const useAutocompleteInput = composeHooks(
+  createElemPropsHook(useComboboxModel)(model => {
+    console.log('model', model);
+    return {
+      onKeyPress(event: React.KeyboardEvent) {
+        model.events.show(event);
+      },
+    };
+  }),
+  useComboboxInput
+);
+
+const AutoCompleteInput = createSubcomponent(TextInput)({
+  modelHook: useComboboxModel,
+  elemPropsHook: useAutocompleteInput,
+})<ExtractProps<typeof Combobox.Input, never>>((elemProps, Element) => {
+  return <Combobox.Input as={Element} {...elemProps} />;
+});
+
+export default () => {
+  const {model, loader} = useComboboxLoader(
+    {
+      // You can start with any number that makes sense.
+      total: 0,
+
+      // Pick whatever number makes sense for your API
+      pageSize: 20,
+
+      // A load function that will be called by the loader. You must return a promise that returns
+      // an object like `{items: [], total: 0}`. The `items` will be merged into the loader's cache
+      async load({pageNumber, pageSize, filter}) {
+        return new Promise<LoadReturn<string>>(resolve => {
+          // simulate a server response by resolving after a period of time
+          setTimeout(() => {
+            // simulate paging and filtering based on pre-computed items
+            const start = (pageNumber - 1) * pageSize;
+            const end = start + pageSize;
+            const filteredItems = options.filter(item => {
+              if (filter === '' || typeof filter !== 'string') {
+                return true;
+              }
+              return item.toLowerCase().includes(filter.toLowerCase());
+            });
+
+            const total = filteredItems.length;
+            const items = filteredItems.slice(start, end);
+
+            resolve({
+              items,
+              total,
+            });
+          }, 300);
+        });
+      },
+      onShow() {
+        // The `shouldLoad` cancels while the combobox menu is hidden, so let's load when it is
+        // visible
+        loader.load();
+      },
+    },
+    useComboboxModel
+  );
+
+  return (
+    <FormField orientation="horizontal" hasError isRequired>
+      <FormField.Label>Fruit</FormField.Label>
+      <Combobox model={model} onChange={event => console.log('input', event.currentTarget.value)}>
+        <InputGroup>
+          <InputGroup.Input as={FormField.Input.as(AutoCompleteInput)} />
+          <InputGroup.InnerEnd
+            pointerEvents="none"
+            style={{opacity: loader.isLoading ? 1 : 0, transition: 'opacity 100ms ease'}}
+            width={20}
+            data-loading={loader.isLoading}
+          >
+            <LoadingDots style={{display: 'flex', transform: 'scale(0.3)'}} />
+          </InputGroup.InnerEnd>
+          <InputGroup.InnerEnd>
+            <InputGroup.ClearButton data-testid="clear" />
+          </InputGroup.InnerEnd>
+        </InputGroup>
+        <Combobox.Menu.Popper>
+          <Combobox.Menu.Card>
+            {model.state.items.length === 0 && (
+              <StyledMenuItem as="span">No Results Found</StyledMenuItem>
+            )}
+            {model.state.items.length > 0 && (
+              <Combobox.Menu.List maxHeight={200}>
+                {item => <Combobox.Menu.Item>{item}</Combobox.Menu.Item>}
+              </Combobox.Menu.List>
+            )}
+          </Combobox.Menu.Card>
+        </Combobox.Menu.Popper>
+      </Combobox>
+    </FormField>
+  );
+};

package/dist/mdx/react/menu/Menu.mdx

@@ -49,6 +49,13 @@ using roving tabindex. Below is table of supported keyboard shortcuts and associ
 
 ### Icons
 
+Menu supports more complex children, including icons, but the text of the item will no longer be
+known. In this case, add a `data-text` attribute to inform the collection system what the text of
+the item is. The text is used for components that filter based on text. For example, a Select
+component will jump to an item based on the keys the user types. If the user types "C", the
+component will jump to the first item that starts with a "C". This functionality requires knowledge
+about the text of the item.
+
 <ExampleCodeBlock code={Icons} />
 
 ## Component API

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

@@ -16,25 +16,25 @@ export default () => {
       <Menu.Popper>
         <Menu.Card>
           <Menu.List>
-            <Menu.Item>
+            <Menu.Item data-text="First Item">
               <Menu.Item.Icon icon={uploadCloudIcon} />
               <Menu.Item.Text>First Item</Menu.Item.Text>
             </Menu.Item>
-            <Menu.Item>
+            <Menu.Item data-text="Second Item (with a really really really long label)">
               <Menu.Item.Icon icon={setupIcon} />
               <Menu.Item.Text>Second Item (with a really really really long label)</Menu.Item.Text>
             </Menu.Item>
-            <Menu.Item aria-disabled>
+            <Menu.Item aria-disabled data-text="Third Item">
               <Menu.Item.Icon icon={uploadCloudIcon} />
               <Menu.Item.Text>Third Item</Menu.Item.Text>
               <Menu.Item.Icon icon={taskContactIcon} />
             </Menu.Item>
-            <Menu.Item>
+            <Menu.Item data-text="User">
               <Menu.Item.Icon icon={userIcon} />
               <Menu.Item.Text></Menu.Item.Text>
             </Menu.Item>
             <Menu.Divider />
-            <Menu.Item>
+            <Menu.Item data-text="Fifth Item (with divider)">
               <Menu.Item.Icon icon={taskContactIcon} />
               <Menu.Item.Text>Fifth Item (with divider)</Menu.Item.Text>
             </Menu.Item>

package/lib/widgets/enhancedComponent.tsx

@@ -70,7 +70,7 @@ registerWidget<EnhancedComponentValue>('enhancedComponent', ({value, doc, meta})
         <>
           <Heading headingOffset={1}>Layout Component</Heading>
           <MDX as="p">
-            <code>{value.displayName}</code> supports all props from the
+            <code>{value.displayName || parentComponentName}</code> supports all props from the
             <code>
               <ParentComponentJSDocContext.Provider value={defaultJSDoc}>
                 <SymbolDialog value={value.styleComponent} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "9.0.0-alpha.419-next.21+2436a0cd",
+  "version": "9.0.0-alpha.420-next.22+87587db5",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,9 +44,9 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^9.0.0-alpha.419-next.21+2436a0cd",
-    "@workday/canvas-kit-preview-react": "^9.0.0-alpha.419-next.21+2436a0cd",
-    "@workday/canvas-kit-react": "^9.0.0-alpha.419-next.21+2436a0cd",
+    "@workday/canvas-kit-labs-react": "^9.0.0-alpha.420-next.22+87587db5",
+    "@workday/canvas-kit-preview-react": "^9.0.0-alpha.420-next.22+87587db5",
+    "@workday/canvas-kit-react": "^9.0.0-alpha.420-next.22+87587db5",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "markdown-to-jsx": "^6.10.3",
     "ts-node": "^10.9.1"
@@ -57,5 +57,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "2436a0cd3dc23fd2d4f6350af6f76a9591f83e30"
+  "gitHead": "87587db5b8bc197a9b1a544d8851b884848647e9"
 }