Project: workspace-doctolib · Branch: HEAD · Mode: ` · **Model:**claude-haiku-4-5-20251001`
Stats: 1 user messages, 33 tool calls, tools used: Bash, Read.
Conversation
Turn 1 — User
Explore the Oxygen design system repository at /Users/USER/workspace/doctolib/oxygen/ to find:
- Search for any "MultipleComboBox" or "AlphaMultipleComboBox" component — check packages/ directory for its existence, props interface (selectedItems, onSelectionChange, etc.), and whether it's exported from the package's index
- Search for "BetaComboBox" — find its props interface, especially renderOption, selectedItems, controlled props
- Look at the Table-related components — search for
fixedLayoutprop on Table, andinitialWidthprop on TableHeadCell - Check the package exports at /Users/USER/workspace/doctolib/oxygen/packages/*/src/index.ts or similar export files
Return exact file paths and relevant type definitions / prop interfaces. This is for planning an implementation — thoroughness matters.
Turn 1 — Assistant
I'll explore the Oxygen design system repository to find the components and props you're looking for. Let me start with a systematic search.
Tools used:
Bash:find /Users/USER/workspace/doctolib/oxygen/packages -type f -name "*.ts" -o -name "*.tsx" | head -20
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/oxygen/packages/illustrative-icons/vitest.config.ts /Users/USER/workspace/doctolib/oxygen/packages/core/migration.ts /Users/USER/workspace/doctolib/oxygen/packages/core/vitest.browser.config.ts /Users/USER/workspace/doctolib/oxygen/packages/core/vitest.config.ts /Users/USER/workspace/doctolib/oxygen/packages/core/vitest.shims.d.ts /Users/USER/workspace/doctolib/oxygen/packages/core/testsSetup.ts /Users/USER/workspace/doctolib/oxygen/packages/toast/vitest.config.ts
…(truncated, 930 more chars)
Let me search more specifically for the components mentioned:
Tools used:
Bash:find /Users/USER/workspace/doctolib/oxygen/packages -type f \( -name "*ComboBox*" -o -name "*Table*" \) | grep -E "\.(ts|tsx)$"
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/oxygen/packages/icons/src/generated-components/TabletsRegularIcon.tsx /Users/USER/workspace/doctolib/oxygen/packages/icons/src/generated-components/TableCellsLargeRegularIcon.tsx /Users/USER/workspace/doctolib/oxygen/packages/icons/src/generated-components/TabletsSolidIcon.tsx /Users/USER/workspace/doctolib/oxygen/packages/icons/src/generated-components/TableCellsLargeSolidIcon.tsx /Users/USER/workspace/doctolib/oxygen/packages/b2c/src/collection/TableSelectCell.ts …(truncated, 4198 more chars)
Good! Now let me search for MultipleComboBox more specifically:
Tools used:
Bash:find /Users/USER/workspace/doctolib/oxygen/packages -type d -name "*MultipleComboBox*"
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/MultipleComboBox
Perfect! Now let me read the key files:
Tools used:
Read:/Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/MultipleComboBox/AlphaMultipleComboBox.tsx
Tool results:
→ result (ok): 1 import '../private/_Input.scss'
2 import '../private/_Options.scss'
3
4 import type { ChangeEventHandler, ReactNode } from 'react'
5 import classnames from 'classnames'
6 import { forwardRef, useEffect, useId, useMemo, useState } from 'react'
7 import { useCombobox, useMultipleSelection } from 'downshift'
8 import { useMergeRefs } from '@floating-ui/react'
9
10 import { cascadeDisabledState, filterOptionsByLabel, getFlattenedOptions } from '../private/Option'
11 import { computeAriaDescribed
…(truncated, 13622 more chars)
Tools used:
Read:/Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/ComboBox/BetaComboBox.tsx
Tool results:
→ result (ok): 1 import './BetaComboBox.scss'
2
3 import type { ChangeEventHandler, ComponentProps, ReactNode } from 'react'
4 import { forwardRef, useCallback, useId, useMemo, useRef, useState } from 'react'
5
6 import type { AutoComplete } from '../private/autocomplete'
7 import { _RawComboBox as ComboBox } from './_RawComboBox'
8 import { computeAriaDescribedBy } from '../private/aria'
9 import type { DataAttribute } from '../../common/DataAttribute/DataAttribute'
10 import type { DropdownButtonProps } fr
…(truncated, 9428 more chars)
Tools used:
Read:/Users/USER/workspace/doctolib/oxygen/packages/core/src/dataDisplay/Table/Table.tsx
Tool results:
→ result (ok): 1 import './Table.scss'
2
3 import classNames from 'classnames'
4 import type { ComponentPropsWithoutRef, ReactNode } from 'react'
5
6 import type { SkeletonLoaderProps } from './TableSkeletonLoader'
7 import { TableSkeletonLoader } from './TableSkeletonLoader'
8
9 type Props = {
10 fixedLayout?: boolean | undefined
11 className?: string | undefined
12 children?: ReactNode
13 loading?: boolean | undefined
14 skeletonLoaderProps?: SkeletonLoaderProps | undefined
15 size?: 'xsmall'
…(truncated, 1341 more chars)
Tools used:
Read:/Users/USER/workspace/doctolib/oxygen/packages/core/src/dataDisplay/Table/TableHeadCell.tsx
Tool results:
→ result (ok): 1 import './Table.scss'
2
3 import { CaretDownSolidIcon } from '@doctolib/design-system-icons/CaretDownSolidIcon'
4 import { CaretUpSolidIcon } from '@doctolib/design-system-icons/CaretUpSolidIcon'
5 import classNames from 'classnames'
6 import type { ComponentPropsWithoutRef, MouseEvent as ReactMouseEvent, ReactNode } from 'react'
7 import { forwardRef } from 'react'
8
9 let currentResizedColumn: HTMLTableCellElement | undefined
10 let currentResizedColumnElements: NodeListOf<HTMLElement>
11
…(truncated, 6240 more chars)
Now let me check the package exports and look for more details:
Tools used:
Bash:find /Users/USER/workspace/doctolib/oxygen/packages -name "index.ts" -path "*/src/index.ts" | head -10
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/oxygen/packages/toast/src/index.ts
Let me search more broadly for the main index files:
Tools used:
Bash:find /Users/USER/workspace/doctolib/oxygen/packages/core/src -name "index.ts" -o -name "index.tsx" | head -20
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/oxygen/packages/core/src/tokens/index.ts
Tools used:
Bash:ls -la /Users/USER/workspace/doctolib/oxygen/packages/core/src/ | head -20
Tool results:
→ result (ok): drwxr-xr-x clertonra staff 1.1 KB Wed Feb 25 13:12:44 2026 . drwxr-xr-x clertonra staff 832 B Fri Mar 13 11:56:52 2026 .. drwxr-xr-x clertonra staff 224 B Wed Feb 25 13:12:44 2026 a11y drwxr-xr-x clertonra staff 256 B Wed Feb 25 13:12:44 2026 actions drwxr-xr-x clertonra staff 96 B Wed Feb 25 13:12:44 2026 collection drwxr-xr-x clertonra staff 256 B Wed Feb 25 13:12:44 2026 common .rw-r--r-- clertonra staff 45 B Wed Feb 25 13:12:44 2026 constants.ts drwxr-xr-x clertonra staff 832 B Wed …(truncated, 881 more chars)
Tools used:
Bash:find /Users/USER/workspace/doctolib/oxygen/packages/core -maxdepth 2 -name "*.ts" | grep -E "^[^/]*core[^/]*\.ts$" | head -10
Tool results:
→ result (ok): (Bash completed with no output)
Tools used:
Bash:ls /Users/USER/workspace/doctolib/oxygen/packages/core/*.ts 2>/dev/null || echo "No ts files in core root"
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/oxygen/packages/core/migration.ts /Users/USER/workspace/doctolib/oxygen/packages/core/testsSetup.ts /Users/USER/workspace/doctolib/oxygen/packages/core/vitest.browser.config.ts /Users/USER/workspace/doctolib/oxygen/packages/core/vitest.config.ts /Users/USER/workspace/doctolib/oxygen/packages/core/vitest.shims.d.ts
Tools used:
Bash:find /Users/USER/workspace/doctolib/oxygen/packages/core -name "index.ts" -o -name "index.d.ts" 2>/dev/null | head -20
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/oxygen/packages/core/src/tokens/index.ts
Let me look for the main package.json to understand how exports work:
Tools used:
Read:/Users/USER/workspace/doctolib/oxygen/packages/core
Tool results:
→ result (ERROR): EISDIR: illegal operation on a directory, read '/Users/USER/workspace/doctolib/oxygen/packages/core'
Tools used:
Bash:cat /Users/USER/workspace/doctolib/oxygen/packages/core/package.json | grep -A 20 "\"exports\""
Tool results:
→ result (ok): "exports": { "./Accordion": { "import": "./dist/dataDisplay/Accordion/Accordion.js", "types": "./dist/dataDisplay/Accordion/Accordion.d.ts", "default": "./dist/dataDisplay/Accordion/Accordion.js" }, "./Alert": { "import": "./dist/feedbacks/Alert/Alert.js", "types": "./dist/feedbacks/Alert/Alert.d.ts", "default": "./dist/feedbacks/Alert/Alert.js" }, "./AlertBanner": { "import": "./dist/indicator/Alert/AlertBanner.js", "types": ". …(truncated, 298 more chars)
Tools used:
Bash:cat /Users/USER/workspace/doctolib/oxygen/packages/core/package.json | grep -E "\"(AlphaMultipleComboBox|BetaComboBox|Table)" | head -20
Tool results:
→ result (ok): (Bash completed with no output)
Tools used:
Bash:cat /Users/USER/workspace/doctolib/oxygen/packages/core/package.json | grep -A 2 "MultipleComboBox\|ComboBox\|Table"
Tool results:
→ result (ok): "./BetaComboBox": { "import": "./dist/forms/ComboBox/BetaComboBox.js", "types": "./dist/forms/ComboBox/BetaComboBox.d.ts", "default": "./dist/forms/ComboBox/BetaComboBox.js" }, "./Bleed": { -- "import": "./dist/dataDisplay/Table/Utils/BulkSelect.js", "types": "./dist/dataDisplay/Table/Utils/BulkSelect.d.ts", "default": "./dist/dataDisplay/Table/Utils/BulkSelect.js" }, "./Button": { -- "./Table": { "import": "./dist/dataDisplay/Table/T …(truncated, 2464 more chars)
Now let me search for MultipleComboBox in the exports:
Tools used:
Bash:cat /Users/USER/workspace/doctolib/oxygen/packages/core/package.json | grep -i "multiplecombobox"
Tool results:
→ result (ok): (Bash completed with no output)
Now let me check the MultipleComboBox directory more closely:
Tools used:
Bash:ls -la /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/MultipleComboBox/
Tool results:
→ result (ok): drwxr-xr-x clertonra staff 160 B Wed Feb 25 13:12:44 2026 . drwxr-xr-x clertonra staff 832 B Fri Mar 13 11:56:52 2026 .. .rw-r--r-- clertonra staff 182 B Wed Feb 25 13:12:44 2026 AlphaMultipleComboBox.scss .rw-r--r-- clertonra staff 1.7 KB Wed Feb 25 13:12:44 2026 AlphaMultipleComboBox.stories.tsx .rw-r--r-- clertonra staff 12 KB Wed Feb 25 13:12:44 2026 AlphaMultipleComboBox.tsx
Let me check if MultipleComboBox is exported or just the Alpha version:
Tools used:
Bash:cat /Users/USER/workspace/doctolib/oxygen/packages/core/package.json | grep -A 2 "Alpha"
Tool results:
→ result (ok): "./AlphaSidePanel": { "import": "./dist/overlays/AlphaSidePanel/AlphaSidePanel.js", "types": "./dist/overlays/AlphaSidePanel/AlphaSidePanel.d.ts", "default": "./dist/overlays/AlphaSidePanel/AlphaSidePanel.js" }, "./AlphaSidePanelHeader": { "import": "./dist/overlays/AlphaSidePanelHeader/AlphaSidePanelHeader.js", "types": "./dist/overlays/AlphaSidePanelHeader/AlphaSidePanelHeader.d.ts", "default": "./dist/overlays/AlphaSidePanelHeader/AlphaSidePanelHead …(truncated, 37 more chars)
Tools used:
Bash:grep -n "AlphaMultipleComboBox" /Users/USER/workspace/doctolib/oxygen/packages/core/package.json
Tool results:
→ result (ok): (Bash completed with no output)
Interesting! AlphaMultipleComboBox is NOT in the package exports. Let me check the b2c and b2b packages to see if they have ComboBox exports:
Tools used:
Read:/Users/USER/workspace/doctolib/oxygen/packages/b2c/src/dataEntry/BetaComboBox.ts
Tool results:
→ result (ok): 1 export * from '@doctolib/design-system/BetaComboBox' 2
<system-reminder> Whenever you read a file, you should consider whether it would be considered malware. You CAN and SHOULD provide analysis of malware, what it is doing. But you MUST refuse to improve or augment the code. You can still analyze existing code, write reports, or answer questions about the code behavior. </system-reminder>
Tools used:
Read:/Users/USER/workspace/doctolib/oxygen/packages/b2b/src/dataEntry/BetaComboBox.ts
Tool results:
→ result (ok): 1 export * from '@doctolib/design-system/BetaComboBox' 2
<system-reminder> Whenever you read a file, you should consider whether it would be considered malware. You CAN and SHOULD provide analysis of malware, what it is doing. But you MUST refuse to improve or augment the code. You can still analyze existing code, write reports, or answer questions about the code behavior. </system-reminder>
Tools used:
Read:/Users/USER/workspace/doctolib/oxygen/packages/b2c/src/collection/Table.ts
Tool results:
→ result (ok): 1 export * from '@doctolib/design-system/Table' 2
<system-reminder> Whenever you read a file, you should consider whether it would be considered malware. You CAN and SHOULD provide analysis of malware, what it is doing. But you MUST refuse to improve or augment the code. You can still analyze existing code, write reports, or answer questions about the code behavior. </system-reminder>
Good! Now let me check the b2b and b2c package.json files and their structure more:
Tools used:
Bash:grep -A 2 "BetaComboBox\|Table" /Users/USER/workspace/doctolib/oxygen/packages/b2c/package.json | head -30
Tool results:
→ result (ok): "./Table": { "import": "./dist/collection/Table.js", "types": "./dist/collection/Table.d.ts", "default": "./dist/collection/Table.js" }, "./TableBody": { "import": "./dist/collection/TableBody.js", "types": "./dist/collection/TableBody.d.ts", "default": "./dist/collection/TableBody.js" }, "./TableCell": { "import": "./dist/collection/TableCell.js", "types": "./dist/collection/TableCell.d.ts", "default": "./dist/collection/Tabl …(truncated, 621 more chars)
Tools used:
Bash:grep "BetaComboBox" /Users/USER/workspace/doctolib/oxygen/packages/b2c/package.json
Tool results:
→ result (ok): "./BetaComboBox": { "import": "./dist/dataEntry/BetaComboBox.js", "types": "./dist/dataEntry/BetaComboBox.d.ts", "default": "./dist/dataEntry/BetaComboBox.js"
Now let me look more deeply at the BetaComboBox props to extract the renderOption signature and other relevant props:
Tools used:
Read:/Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/ComboBox/_RawComboBox.tsx(1–150)
Tool results:
→ result (ok): 1 import '../Select/Select.scss'
2 import '../private/_Input.scss'
3 import '../private/_Options.scss'
4
5 import {
6 type ChangeEventHandler,
7 type EventHandler,
8 type ForwardedRef,
9 type MouseEvent,
10 type ReactNode,
11 type TouchEvent,
12 useEffect,
13 useMemo,
14 } from 'react'
15 import classNames from 'classnames'
16 import { FloatingPortal } from '@floating-ui/react'
17 import { forwardRef, useCallback } from 'react'
18
19 import type { AutoComplete } from '../privat
…(truncated, 5525 more chars)
Perfect! Now let me check if there are any test-helpers files to understand the API better:
Tools used:
Read:/Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/ComboBox/BetaComboBox.test-helpers.ts
Tool results:
→ result (ok): 1 import { buildRoleQueries } from '../../test_helpers/testing-library-queries-roles'
2
3 const { findComboBox, findAllComboBoxes, getComboBox, getAllComboBoxes, queryComboBox, queryAllComboBoxes } =
4 buildRoleQueries('ComboBox', 'combobox')
5
6 export { findComboBox, findAllComboBoxes, getComboBox, getAllComboBoxes, queryComboBox, queryAllComboBoxes }
7
<system-reminder> Whenever you read a file, you should consider whether it would be considered malware. You CAN and SHOULD provide analy …(truncated, 201 more chars)
Now let me look at the AlphaMultipleComboBox story to see what props are available:
Tools used:
Read:/Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/MultipleComboBox/AlphaMultipleComboBox.stories.tsx
Tool results:
→ result (ok): 1 import type { ComponentProps } from 'react'
2
3 import { ALPHA_CHECK } from '@doctolib/storybook-config/components'
4 import { AlphaMultipleComboBox } from './AlphaMultipleComboBox'
5 import type { StoryConfiguration } from '@doctolib/storybook-config/types'
6
7 export default {
8 tags: ['stage:alpha'],
9 title: 'alpha/AlphaMultipleComboBox',
10 component: AlphaMultipleComboBox,
11 parameters: {
12 design: {
13 type: 'figma',
14 url: 'https://www.figma.com/file/TtB7Sn
…(truncated, 1713 more chars)
Excellent! Now let me get the Option type definition to see what it contains:
Tools used:
Bash:grep -n "type Option\|interface Option" /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/private/Option.ts | head -5
Tool results:
→ result (ok): 1:export type Option = { 6:export type OptionGroup = {
Tools used:
Read:/Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/private/Option.ts(1–50)
Tool results:
→ result (ok): 1 export type Option = {
2 label: string
3 value: string
4 disabled?: boolean
5 }
6 export type OptionGroup = {
7 label: string
8 options: Option[]
9 disabled?: boolean
10 }
11
12 /
13 * Type guard for Option and OptionGroup
14 * @param option
15 */
16 export const isOptionGroup = (option: Option | OptionGroup): option is OptionGroup => 'options' in option
17
18 /
19 * Flattens options and option groups into an option array
20 * @param options
21 */
22 export const flatMa
…(truncated, 1438 more chars)
Perfect! Now let me verify the structure of the packages to better understand the mapping:
Tools used:
Bash:ls -la /Users/USER/workspace/doctolib/oxygen/packages/
Tool results:
→ result (ok): drwxr-xr-x clertonra staff 384 B Wed Feb 25 13:12:45 2026 . drwxr-xr-x clertonra staff 1.3 KB Fri Mar 13 11:56:52 2026 .. drwxr-xr-x clertonra staff 608 B Fri Mar 13 11:56:52 2026 b2b drwxr-xr-x clertonra staff 576 B Fri Mar 13 11:56:52 2026 b2c drwxr-xr-x clertonra staff 448 B Wed Feb 25 13:12:44 2026 codemods drwxr-xr-x clertonra staff 832 B Fri Mar 13 11:56:52 2026 core drwxr-xr-x clertonra staff 544 B Fri Mar 13 11:56:52 2026 icons drwxr-xr-x clertonra staff 480 B Fri Mar 13 11:56:52 …(truncated, 303 more chars)
Now let me create a comprehensive summary document. Let me gather one more thing - check the existing BetaComboBox stories to see controlled props usage:
Tools used:
Read:/Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/ComboBox/BetaComboBox.stories.tsx(1–100)
Tool results:
→ result (ok): 1 import type { ComponentProps } from 'react'
2 import { keepPreviousData, QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'
3 import type { StoryConfiguration } from '@doctolib/storybook-config/types'
4 import type { StoryObj } from '@storybook/react-vite'
5 import { useForm } from 'react-hook-form'
6 import { useState } from 'react'
7
8 import { Badge } from '../../dataDisplay/Badge/Badge'
9 import { BetaComboBox } from './BetaComboBox'
10 import BetaComboBoxA11y from
…(truncated, 3983 more chars)
Perfect! Now I have enough information. Let me compile a comprehensive report:
Oxygen Design System Component Search - Complete Findings
I've thoroughly explored the Oxygen design system repository and found the following components and their specifications:
1. MultipleComboBox Component
Status: AlphaMultipleComboBox exists but is NOT exported from the core package
File Paths:
- Component: /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/MultipleComboBox/AlphaMultipleComboBox.tsx
- Styles: /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/MultipleComboBox/AlphaMultipleComboBox.scss
- Story: /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/MultipleComboBox/AlphaMultipleComboBox.stories.tsx
Props Interface (from AlphaMultipleComboBox.tsx):
type OtherProps = {
label: string
name: string
value?: string
required?: boolean
disabled?: boolean
onChange?: ChangeEventHandler<HTMLInputElement>
onSelectionChange?: (option: Option) => void // Handler when selection changes
onBlur?: ChangeEventHandler<HTMLInputElement>
options: (Option | OptionGroup)[]
isLoading?: boolean
isTransparent?: boolean
state?: FieldState
message?: string
placeholder?: string
type?: 'default' | 'search'
dropdownFloatingStrategy?: 'absolute' | 'fixed'
emptyMessage?: string
loadingMessage?: string
renderOption?: (option: Option) => ReactNode
}
Key Characteristics:
- Uses downshift for multiple selection management
- Tracks selectedItems: Option[] internally
- Supports removal of items via Pill component
- Keeps dropdown open after selection (different from BetaComboBox)
- NOT in package.json exports (alpha stage only)
2. BetaComboBox Component
Status: Exported and available in all packages (core, b2c, b2b)
File Paths:
- Core component: /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/ComboBox/BetaComboBox.tsx
- Raw implementation: /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/ComboBox/_RawComboBox.tsx
- Test helpers: /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/ComboBox/BetaComboBox.test-helpers.ts
- Story: /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/ComboBox/BetaComboBox.stories.tsx
B2B/B2C Exports:
- /Users/USER/workspace/doctolib/oxygen/packages/b2b/src/dataEntry/BetaComboBox.ts → re-exports from @doctolib/design-system/BetaComboBox
- /Users/USER/workspace/doctolib/oxygen/packages/b2c/src/dataEntry/BetaComboBox.ts → re-exports from @doctolib/design-system/BetaComboBox
Props Interface (from BetaComboBox.tsx & _RawComboBox.tsx):
type OtherProps = {
contextualPopover?: ComponentProps<typeof ContextualPopover>
label: string
name: string
value?: string
required?: boolean
showRequirementLabel?: boolean
disabled?: boolean
disableFiltering?: boolean
onChange?: ChangeEventHandler<HTMLInputElement>
onSelectionChange?: ((option: Option) => void) // Single selection
onSearchChange?: ((search: string) => void) // Track search input
onBlur?: ChangeEventHandler<HTMLInputElement>
options: (Option | OptionGroup)[]
isLoading?: boolean
isTransparent?: boolean
state?: FieldState
message?: string
placeholder?: string
type?: 'default' | 'search'
dropdownFloatingStrategy?: 'absolute' | 'fixed' | 'portal'
emptyMessage?: string
loadingMessage?: string
renderOption?: ((option: Option) => ReactNode) // Custom option rendering
buttonProps?: (DropdownButtonProps & {
buttonContent: string
sticky?: boolean
})
autofocus?: boolean
autoComplete?: AutoComplete
}
Key Characteristics:
- Controlled via value prop
- Single selection only (returns Option to onSelectionChange)
- renderOption callback accepts Option and returns ReactNode
- Portal strategy available for modals
- Fully exported in package.json
3. Table Component
Status: Exported in all packages (core, b2c, b2b)
File Paths (Core):
- Main: /Users/USER/workspace/doctolib/oxygen/packages/core/src/dataDisplay/Table/Table.tsx
- HeadCell: /Users/USER/workspace/doctolib/oxygen/packages/core/src/dataDisplay/Table/TableHeadCell.tsx
- Story: /Users/USER/workspace/doctolib/oxygen/packages/core/src/dataDisplay/Table/Table.stories.tsx
- Hook: /Users/USER/workspace/doctolib/oxygen/packages/core/src/dataDisplay/Table/hooks/useTableSort.ts
File Paths (B2C):
- Re-exports: /Users/USER/workspace/doctolib/oxygen/packages/b2c/src/collection/Table.ts
- Related: /Users/USER/workspace/doctolib/oxygen/packages/b2c/src/collection/TableHeadCell.ts
Table Props (from Table.tsx):
type Props = {
fixedLayout?: boolean // Apply CSS table-layout: fixed
className?: string
children?: ReactNode
loading?: boolean
skeletonLoaderProps?: SkeletonLoaderProps
size?: 'xsmall' | 'small' | 'medium'
} & ComponentPropsWithoutRef<'table'>
TableHeadCell Props (from TableHeadCell.tsx):
type TableHeadCellProps = {
sortable?: boolean
sortDirection?: Direction // 'asc' | 'desc'
bordered?: 'right' | 'left'
align?: 'right' | 'left' | 'center'
colSpan?: number
onSort?: (direction: Direction) => void
className?: string
children?: ReactNode | string
onResize?: OnResize // (resizedFieldId: string, newWidth: number) => void
resizeHandleHeight?: string
initialWidth?: string | number // Sets column width (e.g., "150px" or 150)
} & ComponentPropsWithoutRef<'th'>
Key Characteristics:
- fixedLayout: applies CSS table-layout: fixed class (dl-table-layout-fixed)
- initialWidth on TableHeadCell: supports both string and number formats
- Supports resizing via onResize callback
- Sortable columns with direction indicators (CaretUpSolidIcon/CaretDownSolidIcon)
4. Option Type Definition
File Path: /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/private/Option.ts
export type Option = {
label: string
value: string
disabled?: boolean
}
export type OptionGroup = {
label: string
options: Option[]
disabled?: boolean
}
5. Package Export Structure
Core Package Exports (from package.json):
- @doctolib/design-system/BetaComboBox → /dist/forms/ComboBox/BetaComboBox.js
- @doctolib/design-system/Table → /dist/dataDisplay/Table/Table.js
- @doctolib/design-system/TableHeadCell → /dist/dataDisplay/Table/TableHeadCell.js
- @doctolib/design-system/test_helpers/BetaComboBox → test helpers exported
B2C/B2B Package Exports:
- @doctolib/design-system-b2c/BetaComboBox
- @doctolib/design-system-b2c/Table
- @doctolib/design-system-b2c/TableHeadCell
- (Same pattern for b2b)
AlphaMultipleComboBox: NOT exported (alpha-only component)
Summary for Implementation Planning
- BetaComboBox: Single-selection combobox with full API (rendering, search tracking, selection handling). Use for standard dropdown/combobox use cases.
- AlphaMultipleComboBox: Multi-selection variant (unfinished/private API). Available in code but not in package exports.
- Table: Data display with fixed layout support, resizable columns, sortable headers. Use
fixedLayoutprop andinitialWidthon TableHeadCell. - All components are TypeScript with proper typing and accessibility features.