@workday/canvas-kit-docs 9.0.0-alpha.415-next.17 → 9.0.0-alpha.417-next.19

package/dist/mdx/9.0-UPGRADE-GUIDE.mdx

@@ -384,6 +384,23 @@ knows where it needs to go, but the identifier may not be loaded yet. The mechan
 is private and should not breaking anything. If you created a custom navigation manager, the
 signature has been changed.
 
+The `useListModel` modelHook no longers sets the initial `cursorId` to the first item if no
+`initialCursorId` config option is set. This functionality has been moved to the
+`useListItemRovingFocus` elemProps hook. If you use `useListItemRovingFocus`, the behavior is
+unchanged. If you need the first item to be set as the `cursorId` and you do not use
+`useListItemRovingFocus`, you will have to add this functionality back to your collection logic.
+
+The logic to set the `cursorId` to the first item should go into an item elemProps hook that
+contains the following:
+
+```ts
+React.useEffect(() => {
+  if (!model.state.cursorId && model.state.items.length) {
+    model.events.goTo({id: model.state.items[0].id});
+  }
+}, [model.state.cursorId, model.state.items, model.events]);
+```
+
 ## Utility Updates
 
 ### useTheme and getTheme

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

@@ -5,6 +5,7 @@ import {ListBox} from '@workday/canvas-kit-react/collection';
 import Basic from './examples/Basic';
 import StringChildren from './examples/StringChildren';
 import DynamicItems from './examples/DynamicItems';
+import DataLoader from './examples/DataLoader';
 import BasicVirtual from './examples/BasicVirtual';
 import IdentifiedItems from './examples/IdentifiedItems';
 import RovingFocus from './examples/RovingFocus';
@@ -59,6 +60,19 @@ item, which could cause problems for popup menus. If your item count is low, pas
 
 <ExampleCodeBlock code={DynamicItems} />
 
+### DataLoader
+
+The collection system comes with a data loader to help with dynamic collections. You must provide
+`total`, `pageSize`, and an asynchronous `load` function. The loader will call the `load` function
+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.
+
+<ExampleCodeBlock code={DataLoader} />
+
 #### Roving Tabindex
 
 The list system also includes a cursor that extends the list. A cursor is mostly used for focusing
@@ -154,38 +168,15 @@ columns, but not rows. This is the default navigation manager for lists.
 
 ## Hooks
 
-### `useListItemRegister`
-
+<>
 <SymbolDoc name="useListItemRegister" fileName="/react/" />
-
-### `useListItemAllowChildStrings`
-
 <SymbolDoc name="useListItemAllowChildStrings" fileName="/react/" />
-
-### `useListItemRovingFocus`
-
 <SymbolDoc name="useListItemRovingFocus" fileName="/react/" />
-
-### `useListItemSelect`
-
 <SymbolDoc name="useListItemSelect" fileName="/react/" />
-
-### `useListRenderItems`
-
 <SymbolDoc name="useListRenderItems" fileName="/react/" />
-
-### `useListResetCursorOnBlur`
-
 <SymbolDoc name="useListResetCursorOnBlur" fileName="/react/" />
-
-### `useOverflowListItemMeasure`
-
 <SymbolDoc name="useOverflowListItemMeasure" fileName="/react/" />
-
-### `useOverflowListMeasure`
-
 <SymbolDoc name="useOverflowListMeasure" fileName="/react/" />
-
-### `useOverflowListTarget`
-
-<SymbolDoc name="useOverflowListTarget" fileName="/react/" />
+<SymbolDoc name="useOverflowListTarget" fileName="/react/" />
+<SymbolDoc name="useListLoader" fileName="/react/" />
+</>

package/dist/mdx/react/collection/examples/DataLoader.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+
+import {
+  ListBox,
+  useListLoader,
+  useListModel,
+  useListItemSelect,
+  useListItemRovingFocus,
+  LoadReturn,
+} from '@workday/canvas-kit-react/collection';
+import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {composeHooks} from '@workday/canvas-kit-react/common';
+
+function pickRandom<T>(arr: T[]): T {
+  return arr[Math.floor(Math.random() * arr.length)];
+}
+
+const useListItem = composeHooks(useListItemSelect, useListItemRovingFocus);
+
+const colors = ['Blue', 'Red', 'Purple', 'Green', 'Pink'];
+const fruits = ['Apple', 'Orange', 'Banana', 'Grape', 'Lemon', 'Lime'];
+const options = Array(1000)
+  .fill('')
+  .map((_, index) => {
+    return `${pickRandom(colors)} ${pickRandom(fruits)} ${index + 1}`;
+  });
+
+export default () => {
+  const [messages, setMessages] = React.useState<string[]>([]);
+
+  const {model, loader} = useListLoader(
+    {
+      getId: (item: string) => item,
+      getTextValue: (item: string) => item,
+      shouldVirtualize: true,
+      total: 1000,
+      pageSize: 20,
+      async load({pageNumber, pageSize}) {
+        setMessages(messages => messages.concat(`Page ${pageNumber} loading`));
+
+        // Return a promise, but use setTimeout to mock a delayed server response
+        return new Promise<LoadReturn<string>>(resolve => {
+          setTimeout(() => {
+            const start = (pageNumber - 1) * pageSize;
+            const end = start + pageSize;
+
+            const total = options.length;
+            const items = options.slice(start, end);
+
+            setMessages(messages => messages.concat(`Page ${pageNumber} loaded`));
+
+            resolve({
+              items,
+              total,
+            });
+          }, 500);
+        });
+      },
+    },
+    useListModel
+  );
+
+  return (
+    <Flex gap="xl">
+      <Flex flexDirection="column" gap="zero">
+        <p>Scroll or focus and use keys to navigate</p>
+        <ListBox model={model} maxHeight={400} width={300}>
+          {item => (
+            <ListBox.Item
+              as="button"
+              role="listitem"
+              elemPropsHook={useListItem}
+              height={20}
+              background="transparent"
+              border="none"
+            >
+              {item}
+            </ListBox.Item>
+          )}
+        </ListBox>
+      </Flex>
+      <Flex flexDirection="column" gap="zero">
+        <p>Events:</p>
+        <Box as="ul" maxHeight={400} overflowY="auto">
+          {messages.map(message => (
+            <li key={message}>{message}</li>
+          ))}
+        </Box>
+      </Flex>
+    </Flex>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "9.0.0-alpha.415-next.17+5fd436a0",
+  "version": "9.0.0-alpha.417-next.19+608e353d",
   "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.415-next.17+5fd436a0",
-    "@workday/canvas-kit-preview-react": "^9.0.0-alpha.415-next.17+5fd436a0",
-    "@workday/canvas-kit-react": "^9.0.0-alpha.415-next.17+5fd436a0",
+    "@workday/canvas-kit-labs-react": "^9.0.0-alpha.417-next.19+608e353d",
+    "@workday/canvas-kit-preview-react": "^9.0.0-alpha.417-next.19+608e353d",
+    "@workday/canvas-kit-react": "^9.0.0-alpha.417-next.19+608e353d",
     "@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": "5fd436a0c644d68c8a97fd0f52f4b32c1d5b2bec"
+  "gitHead": "608e353d22b266e70f71a58b8726ca4332d5cf0b"
 }