feat(collection): Add support for string items (#2195)

Add support for string items in the collection system. This includes string items. `slugify` was added to support strings to be used as id and attributes in HTML. This can be used to support autocomplete where the items are most likely to be string.

[category:Components]

Co-authored-by: @alanbsmith <a.bax.smith@gmail.com>

modules/react/collection/lib/useCursorListModel.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {assert, createModelHook, Generic} from '@workday/canvas-kit-react/common';
 
-import {useBaseListModel, Item, defaultGetId as getId} from './useBaseListModel';
+import {useBaseListModel, Item} from './useBaseListModel';
 
 type NavigationInput = Pick<ReturnType<typeof useCursorListModel>, 'state'>;
 
@@ -365,7 +365,7 @@ export const useCursorListModel = createModelHook({
     registerItem(data: Parameters<typeof list.events.registerItem>[0]) {
       // point the cursor at the first item
       if (!initialCurrentRef.current) {
-        initialCurrentRef.current = getId(data.item);
+        initialCurrentRef.current = list.getId(data.item);
         setCursorId(initialCurrentRef.current);
       }
       list.events.registerItem(data);

modules/react/collection/lib/useListItemRegister.tsx

@@ -5,6 +5,7 @@ import {
   createElemPropsHook,
   useLocalRef,
   useForkRef,
+  slugify,
 } from '@workday/canvas-kit-react/common';
 
 import {Item} from './useBaseListModel';
@@ -26,7 +27,7 @@ import {useListModel} from './useListModel';
  */
 export const useListItemRegister = createElemPropsHook(useListModel)(
   (
-    {state, events, getId},
+    {state, events},
     ref?: React.Ref<HTMLElement>,
     elemProps: {
       'data-id'?: string;
@@ -64,7 +65,7 @@ export const useListItemRegister = createElemPropsHook(useListModel)(
 
       // TODO: Better lookup that using `items.find`. We need a more generic collection to handle seeing if an item already exists
       // bail early if item already exists. This happens if items were already provided.
-      if (state.items.find(item => getId(item) === itemId)) {
+      if (state.items.find(item => item.id === itemId)) {
         return;
       }
       events.registerItem({
@@ -89,6 +90,7 @@ export const useListItemRegister = createElemPropsHook(useListModel)(
       'aria-setsize': elemProps.virtual?.size,
       'aria-posinset': elemProps.virtual ? elemProps.item!.index + 1 : undefined,
       style,
+      id: slugify(`${state.id}-${localId}`),
     };
   }
 );

modules/react/common/lib/utils/index.ts

@@ -10,6 +10,7 @@ export * from './assert';
 export * from './useMount';
 export * from './components';
 export * from './models';
+export * from './slugify';
 export * from './elements';
 export * from './useConstant';
 export * from './useIsFullscreen';

modules/react/common/lib/utils/slugify.ts

@@ -0,0 +1,11 @@
+/**
+ * Function that takes a string and returns a "slug" which can be used in HTML
+ */
+export function slugify(input: string): string {
+  return input
+    .trim()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/[\s_-]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .toLowerCase();
+}

modules/react/common/spec/slugify.spec.ts

@@ -0,0 +1,39 @@
+import {slugify} from '../lib/utils/slugify';
+
+describe('slugify', () => {
+  it('should remove leading spaces', () => {
+    expect(slugify(' a')).toEqual('a');
+  });
+
+  it('should remove trailing spaces', () => {
+    expect(slugify('a ')).toEqual('a');
+  });
+
+  it('should lowercase all letters', () => {
+    expect(slugify('Ab')).toEqual('ab');
+  });
+
+  it('should add dashes for all spaces', () => {
+    expect(slugify('a b')).toEqual('a-b');
+  });
+
+  it('should remove all non-alphanumeric characters', () => {
+    expect(slugify('a.b')).toEqual('ab');
+  });
+
+  it('should collapse multiple spaces into a single dash', () => {
+    expect(slugify('a       b')).toEqual('a-b');
+  });
+
+  it('should remove leading dashes', () => {
+    expect(slugify('-ab')).toEqual('ab');
+  });
+
+  it('should remove trailing dashes', () => {
+    expect(slugify('ab-')).toEqual('ab');
+  });
+
+  it('should collapse spaces and dashes to a single dash', () => {
+    expect(slugify('a--  --b')).toEqual('a-b');
+  });
+});

modules/react/menu/lib/MenuItem.tsx

@@ -146,10 +146,10 @@ export const useMenuItem = composeHooks(
             });
           }
         }
-        // We only need to run when the ID has changed. If the static API is used, the first time
+        // We only need to run when the ID or cursorId has changed. If the static API is used, the first time
         // this is run, the id will be blank
         // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, [id]);
+      }, [id, model.state.cursorId]);
 
       return {
         ref: elementRef,

modules/react/tabs/lib/TabsPanel.tsx

@@ -8,6 +8,7 @@ import {
   ExtractProps,
   hideMouseFocus,
   StyledType,
+  slugify,
 } from '@workday/canvas-kit-react/common';
 import {Item} from '@workday/canvas-kit-react/collection';
 import {Box} from '@workday/canvas-kit-react/layout';
@@ -58,9 +59,9 @@ export const useTabsPanel = createElemPropsHook(useTabsModel)(
 
     return {
       role: 'tabpanel' as const,
-      'aria-labelledby': `${state.id}-${localId}`,
+      'aria-labelledby': slugify(`${state.id}-${localId}`),
       hidden: !!localId && localId !== state.selectedIds[0],
-      id: `tabpanel-${state.id}-${localId}`,
+      id: slugify(`tabpanel-${state.id}-${localId}`),
       tabIndex: 0 as const,
     };
   }