From 9311d96f10289cdd9bbdf325e0a4a8d87e1d22fd Mon Sep 17 00:00:00 2001
From: "manuel.carrera" <manuel.carrera@workday.com>
Date: Tue, 5 Sep 2023 16:16:28 -0600
Subject: [PATCH] fix: Add useselectcard

---
 .../react/collection/lib/useListItemRegister.tsx  |  2 +-
 modules/react/combobox/lib/useComboboxModel.tsx   |  2 +-
 modules/react/select/lib/Select.tsx               | 15 ++++++++++++++-
 modules/react/select/lib/hooks/useSelectCard.ts   | 11 +++++++++++
 modules/react/select/lib/hooks/useSelectModel.tsx |  2 ++
 5 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 modules/react/select/lib/hooks/useSelectCard.ts

diff --git a/modules/react/collection/lib/useListItemRegister.tsx b/modules/react/collection/lib/useListItemRegister.tsx
index 529ab90eb9..e045527352 100644
--- a/modules/react/collection/lib/useListItemRegister.tsx
+++ b/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}`),
diff --git a/modules/react/combobox/lib/useComboboxModel.tsx b/modules/react/combobox/lib/useComboboxModel.tsx
index e8824363d4..dbd4af90f4 100644
--- a/modules/react/combobox/lib/useComboboxModel.tsx
+++ b/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);
       },
diff --git a/modules/react/select/lib/Select.tsx b/modules/react/select/lib/Select.tsx
index 80bb9d78a9..b69cb0211f 100644
--- a/modules/react/select/lib/Select.tsx
+++ b/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
diff --git a/modules/react/select/lib/hooks/useSelectCard.ts b/modules/react/select/lib/hooks/useSelectCard.ts
new file mode 100644
index 0000000000..53a4757674
--- /dev/null
+++ b/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;
+});
diff --git a/modules/react/select/lib/hooks/useSelectModel.tsx b/modules/react/select/lib/hooks/useSelectModel.tsx
index 052e027ae1..dc5d3fc074 100644
--- a/modules/react/select/lib/hooks/useSelectModel.tsx
+++ b/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;
 });