fix: Add useselectcard

modules/react/collection/lib/useListItemRegister.tsx

@@ -94,7 +94,7 @@ export const useListItemRegister = createElemPropsHook(useListModel)(
       disabled: elemProps.disabled || state.nonInteractiveIds.includes(localId) ? true : undefined,
       item: null, // remove `item` from prop list
       virtual: null, // remove `virtual` from prop list
-      'aria-setsize': state.items.length || elemProps.virtual?.size,
+      'aria-setsize': elemProps.virtual?.size,
       'aria-posinset': elemProps.virtual ? elemProps.item!.index + 1 : undefined,
       style,
       id: slugify(`${state.id}-${localId}`),

modules/react/combobox/lib/useComboboxModel.tsx

@@ -43,6 +43,7 @@ export const useComboboxModel = createModelHook({
   defaultConfig: {
     ...useInputModel.defaultConfig,
     ...useMenuModel.defaultConfig,
+    shouldVirtualize: true,
   },
 
   requiredConfig: {
@@ -54,7 +55,6 @@ export const useComboboxModel = createModelHook({
 
   const menu = useMenuModel(
     useMenuModel.mergeConfig(config, {
-      shouldVirtualize: true,
       onSelect({id}) {
         dispatchInputEvent(menu.state.targetRef.current, id);
       },

modules/react/select/lib/Select.tsx

@@ -13,6 +13,7 @@ import {caretDownSmallIcon} from '@workday/canvas-system-icons-web';
 import {useSelectModel, useSelectItem} from './hooks';
 import {useSelectInput} from './hooks/useSelectInput';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
+import {useSelectCard} from './hooks/useSelectCard';
 
 export interface SelectInputProps extends ExtractProps<typeof TextInput> {
   /**
@@ -63,6 +64,17 @@ export const SelectItem = createSubcomponent('li')({
   );
 });
 
+export const SelectCard = createSubcomponent('div')({
+  modelHook: useSelectModel,
+  elemPropsHook: useSelectCard,
+})<ExtractProps<typeof Combobox.Menu.Card>>(({children, ...elemProps}, Element) => {
+  return (
+    <Combobox.Menu.Card as={Element} {...elemProps}>
+      {children}
+    </Combobox.Menu.Card>
+  );
+});
+
 export interface SelectProps extends Themeable, ExtractProps<typeof Combobox> {}
 /**
  * Use `Select` to allow users to choose an option from a list or type characters to select a matching option.
@@ -117,6 +129,7 @@ export const Select = createContainer()({
     Popper: Combobox.Menu.Popper,
     /**
      * `Select.Card` renders a {@link ComboboxCard Combobox.Card}. You have access to all `Card` props.
+     * The card will be the width of the select input.
      * ```tsx
      * <Select item={options}>
      *  <Select.Input id="matching-formfield-inputId" onChange={(event) => handleChange(event)}>
@@ -128,7 +141,7 @@ export const Select = createContainer()({
      * </Select>
      * ```
      */
-    Card: Combobox.Menu.Card,
+    Card: SelectCard,
     /**
      * `Select.List` renders a {@link ComboboxMenuList Combobox.Menu.List}. You have access to all `ListBox` props.
      * ```tsx

modules/react/select/lib/hooks/useSelectCard.ts

@@ -0,0 +1,11 @@
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useSelectModel} from './useSelectModel';
+
+/**
+ * Set the width of the menu card to the input width
+ */
+export const useSelectCard = createElemPropsHook(useSelectModel)(model => {
+  return {
+    width: model.state.width,
+  } as const;
+});

modules/react/select/lib/hooks/useSelectModel.tsx

@@ -16,12 +16,14 @@ import {useComboboxModel} from '@workday/canvas-kit-react/combobox';
 export const useSelectModel = createModelHook({
   defaultConfig: {
     ...useComboboxModel.defaultConfig,
+    shouldVirtualize: false,
   },
   requiredConfig: {
     ...useComboboxModel.requiredConfig,
   },
   contextOverride: useComboboxModel.Context,
 })(config => {
+  console.log(config);
   const model = useComboboxModel(config);
   return model;
 });