@workday/canvas-kit-react 9.0.0-alpha.414-next.16 → 9.0.0-alpha.416-next.18

package/collection/index.ts

@@ -10,7 +10,8 @@ export * from './lib/useListItemRovingFocus';
 export * from './lib/useListItemSelect';
 export * from './lib/useListModel';
 export * from './lib/useGridModel';
-export {ListBox} from './lib/ListBox';
+export * from './lib/useListItemAllowChildStrings';
+export {ListBox, ListBoxProps} from './lib/ListBox';
 export {
   singleSelectionManager,
   multiSelectionManager,

package/collection/lib/useCursorListModel.tsx

@@ -322,9 +322,6 @@ export const useCursorListModel = createModelHook({
   const pageSizeRef = React.useRef(config.pageSize);
   const columnCount = config.columnCount || 0;
   const list = useBaseListModel(config);
-  const initialCurrentRef = React.useRef(
-    config.initialCursorId || (config.items?.length ? list.state.items![0].id : '')
-  );
   const navigation = config.navigation;
   const cursorIndexRef = React.useRef(-1);
   const setCursor = (index: number) => {
@@ -358,18 +355,6 @@ export const useCursorListModel = createModelHook({
 
   const events = {
     ...list.events,
-    /**
-     * Register an item to the list. Takes in an identifier, a React.Ref and an optional index. This
-     * should be called on component mount
-     */
-    registerItem(data: Parameters<typeof list.events.registerItem>[0]) {
-      // point the cursor at the first item
-      if (!initialCurrentRef.current) {
-        initialCurrentRef.current = list.getId(data.item);
-        setCursorId(initialCurrentRef.current);
-      }
-      list.events.registerItem(data);
-    },
     /** Directly sets the cursor to the list item by its identifier. */
     goTo(data: {id: string}) {
       const index = state.items.findIndex(item => item.id === data.id);

package/collection/lib/useListItemAllowChildStrings.ts

@@ -0,0 +1,37 @@
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useListModel} from '@workday/canvas-kit-react/collection';
+
+/**
+ * This elemProps hook allows for children values to be considered identifiers if the children
+ * are strings. This can be useful for autocomplete or select components that allow string values.
+ * This hook must be defined _before_ {@link useListItemRegister} because it sets the `data-id`
+ * attribute if one hasn't been defined by the application.
+ *
+ * An example might look like:
+ * ```tsx
+ * const useMyListItem = composeHooks(
+ *   // any other hooks here
+ *   useListItemSelect,
+ *   useListItemRegister,
+ *   useListItemAllowChildStrings
+ * )
+ *
+ *
+ * <MyList onSelect={({id}) => {
+ *   console.log(id) // will be "First" or "Second"
+ * }}>
+ *   <MyList.Item>First</MyList.Item>
+ *   <MyList.Item>Second</MyList.Item>
+ * </MyList>
+ * ```
+ */
+export const useListItemAllowChildStrings = createElemPropsHook(useListModel)(
+  (_, __, elemProps: {'data-id'?: string; children?: React.ReactNode} = {}) => {
+    const props: {'data-id'?: string} = {};
+    if (!elemProps['data-id'] && typeof elemProps.children === 'string') {
+      props['data-id'] = elemProps.children;
+    }
+
+    return props;
+  }
+);

package/collection/lib/useListItemRovingFocus.tsx

@@ -47,6 +47,13 @@ export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [model.state.cursorId]);
 
+    // Roving focus must always have a focus stop to function correctly
+    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]);
+
     return {
       onKeyDown(event: React.KeyboardEvent) {
         const handled = keyboardEventToCursorEvents(event, model, isRTL);