fix(SW-1509): removed support for plain array items in order to handle proper props extending

various fixes for supporting default selected

packages/design-system/lib/components/Select/Select.stories.tsx

@@ -14,9 +14,15 @@ export default meta
 
 type Story = StoryObj<typeof Select>
 
+const items = [
+  { label: 'Foo', value: 'foo' },
+  { label: 'Bar', value: 'bar' },
+  { label: 'Baz', value: 'baz' },
+]
+
 export const Default: Story = {
   args: {
-    items: ['Foo', 'Bar', 'Baz'],
+    items,
     label: 'Select an item',
     name: 'foo',
   },
@@ -24,40 +30,38 @@ export const Default: Story = {
 
 export const DefaultSelected: Story = {
   args: {
-    items: ['Foo', 'Bar', 'Baz'],
-    label: 'Select an item',
-    name: 'foo',
-    defaultSelectedKey: 'Foo',
-  },
-}
-
-export const ObjectItem: Story = {
-  args: {
-    items: [
-      { label: 'Foo', value: 'foo' },
-      { label: 'Bar', value: 'bar' },
-      { label: 'Baz', value: 'baz' },
-    ],
+    items,
     label: 'Select an item',
     name: 'foo',
+    defaultSelectedKey: 'foo',
   },
 }
 
 export const Icons: Story = {
   args: {
-    icon: 'star',
-    itemIcon: 'check',
-    items: ['Foo', 'Bar', 'Baz'],
+    items,
     label: 'Select an item',
     name: 'foo',
+    icon: 'star',
+    itemIcon: 'check',
   },
 }
 
 export const Filtering: Story = {
   args: {
-    items: ['Foo', 'Bar', 'Baz'],
+    items,
     label: 'Select an item',
     name: 'foo',
     enableFiltering: true,
   },
 }
+
+export const FilteringSelected: Story = {
+  args: {
+    items,
+    label: 'Select an item',
+    name: 'foo',
+    enableFiltering: true,
+    defaultSelectedKey: 'foo',
+  },
+}

packages/design-system/lib/components/Select/Select.tsx

@@ -12,7 +12,7 @@ import { Typography } from '../Typography'
 import { SelectItem } from './SelectItem'
 import { SelectFilter } from './SelectFilter'
 
-import type { SelectProps } from './types'
+import type { SelectProps, SelectFilterProps } from './types'
 
 import styles from './select.module.css'
 
@@ -23,10 +23,9 @@ export function Select({
   isDisabled,
   icon,
   itemIcon,
-  enableFiltering,
   ...props
-}: SelectProps) {
-  if (enableFiltering) {
+}: SelectProps | SelectFilterProps) {
+  if ('enableFiltering' in props) {
     return (
       <SelectFilter
         name={name}
@@ -34,7 +33,6 @@ export function Select({
         items={items}
         icon={icon}
         itemIcon={itemIcon}
-        isDisabled={isDisabled}
         {...props}
       />
     )
@@ -59,22 +57,26 @@ export function Select({
           />
         ) : null}
         <SelectValue className={cx(styles.displayText, styles.selectValue)}>
-          {({ isPlaceholder, selectedText }) => (
-            <>
-              <Typography
-                variant={
-                  isPlaceholder ? 'Body/Paragraph/mdRegular' : 'Label/xsRegular'
-                }
-              >
-                <span className={styles.label}>{label}</span>
-              </Typography>
-              {selectedText ? (
-                <Typography variant="Body/Paragraph/mdRegular">
-                  <span>{selectedText}</span>
+          {({ selectedText }) => {
+            return (
+              <>
+                <Typography
+                  variant={
+                    selectedText
+                      ? 'Label/xsRegular'
+                      : 'Body/Paragraph/mdRegular'
+                  }
+                >
+                  <span className={styles.label}>{label}</span>
                 </Typography>
-              ) : null}
-            </>
-          )}
+                {selectedText ? (
+                  <Typography variant="Body/Paragraph/mdRegular">
+                    <span>{selectedText}</span>
+                  </Typography>
+                ) : null}
+              </>
+            )
+          }}
         </SelectValue>
 
         <MaterialIcon
@@ -88,27 +90,16 @@ export function Select({
 
       <Popover className={styles.popover} shouldFlip={false}>
         <ListBox className={styles.listBox}>
-          {items.map((item) =>
-            typeof item === 'object' ? (
-              <SelectItem
-                key={item.label}
-                id={item.label}
-                icon={item.icon || itemIcon}
-                isDisabled={item.isDisabled}
-              >
-                {item.label}
-              </SelectItem>
-            ) : (
-              <SelectItem
-                key={item}
-                id={item}
-                icon={itemIcon}
-                isDisabled={isDisabled}
-              >
-                {item.toString()}
-              </SelectItem>
-            )
-          )}
+          {items.map((item) => (
+            <SelectItem
+              key={item.value}
+              id={item.value}
+              icon={item.icon || itemIcon}
+              isDisabled={item.isDisabled}
+            >
+              {item.label}
+            </SelectItem>
+          ))}
         </ListBox>
       </Popover>
     </AriaSelect>

packages/design-system/lib/components/Select/SelectFilter.tsx

@@ -6,7 +6,6 @@ import {
   ListBox,
   Popover,
 } from 'react-aria-components'
-import { cx } from 'class-variance-authority'
 import { useState } from 'react'
 
 import { MaterialIcon } from '../Icons/MaterialIcon'
@@ -21,13 +20,14 @@ export function SelectFilter({
   name,
   label,
   items,
-  isRequired,
   isDisabled,
   icon,
   itemIcon,
+  defaultSelectedKey,
+  ...props
 }: SelectFilterProps) {
   const [focus, setFocus] = useState(false)
-  const [value, setValue] = useState<Key | null>(null)
+  const [value, setValue] = useState<Key | null>(defaultSelectedKey ?? null)
   const iconColor = isDisabled ? 'Icon/Interactive/Disabled' : 'Icon/Default'
 
   return (
@@ -35,11 +35,12 @@ export function SelectFilter({
       className={styles.select}
       name={name}
       aria-label={label}
-      isRequired={isRequired}
       isDisabled={isDisabled}
-      onSelectionChange={(val) => setValue(val)}
+      onSelectionChange={setValue}
       onFocus={() => setFocus(true)}
       onBlur={() => setFocus(false)}
+      defaultSelectedKey={defaultSelectedKey}
+      {...props}
     >
       <label className={styles.inner}>
         {icon ? (
@@ -60,7 +61,7 @@ export function SelectFilter({
             <span className={styles.label}>{label}</span>
           </Typography>
           <Typography variant="Body/Paragraph/mdRegular">
-            <Input className={cx(styles.input, { [styles.hasValue]: value })} />
+            <Input className={styles.input} />
           </Typography>
         </span>
         <Button className={styles.button}>
@@ -81,27 +82,16 @@ export function SelectFilter({
         offset={22}
       >
         <ListBox className={styles.listBox}>
-          {items.map((item) =>
-            typeof item === 'object' ? (
-              <SelectItem
-                key={item.label}
-                id={item.label}
-                icon={item.icon || itemIcon}
-                isDisabled={item.isDisabled}
-              >
-                {item.label}
-              </SelectItem>
-            ) : (
-              <SelectItem
-                key={item}
-                id={item}
-                icon={itemIcon}
-                isDisabled={isDisabled}
-              >
-                {item.toString()}
-              </SelectItem>
-            )
-          )}
+          {items.map((item) => (
+            <SelectItem
+              key={item.value}
+              id={item.value}
+              icon={item.icon || itemIcon}
+              isDisabled={item.isDisabled}
+            >
+              {item.label}
+            </SelectItem>
+          ))}
         </ListBox>
       </Popover>
     </ComboBox>

packages/design-system/lib/components/Select/select.module.css

@@ -70,7 +70,7 @@
   position: absolute;
   padding: 0;
 
-  &.hasValue {
+  &[value]:not([value='']) {
     position: unset;
   }
 }

packages/design-system/lib/components/Select/types.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from 'react'
-import { Key, ListBoxItem, Select } from 'react-aria-components'
+import { ComboBox, Key, ListBoxItem, Select } from 'react-aria-components'
 import { MaterialIconProps } from '../Icons/MaterialIcon'
 
 interface Item extends Record<string, unknown> {
@@ -12,10 +12,9 @@ interface Item extends Record<string, unknown> {
 export interface SelectProps extends ComponentProps<typeof Select> {
   icon?: MaterialIconProps['icon']
   itemIcon?: MaterialIconProps['icon']
-  items: (Key | Item)[]
+  items: Item[]
   name: string
   label: string
-  enableFiltering?: boolean
 }
 
 export interface SelectItemProps extends ComponentProps<typeof ListBoxItem> {
@@ -23,7 +22,11 @@ export interface SelectItemProps extends ComponentProps<typeof ListBoxItem> {
   children: string
 }
 
-// Disabling rule because we're just omitting one prop while keeping interface
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface SelectFilterProps
-  extends Omit<SelectProps, 'enableFiltering'> {}
+export interface SelectFilterProps extends ComponentProps<typeof ComboBox> {
+  icon?: MaterialIconProps['icon']
+  itemIcon?: MaterialIconProps['icon']
+  items: Item[]
+  name: string
+  label: string
+  enableFiltering: boolean
+}