Project: workspace-doctolib · Branch: HEAD · Mode: ` · **Model:**claude-opus-4-7`
Stats: 1 user messages, 50 tool calls, tools used: Bash, Read.
Conversation
Turn 1 — User
Review the changes in PR #3051 of doctolib/treatment-plan (branch fhir-2219_implement-multi-select-category-filter, base main).
The changes are in treatment-plan/packages/tpf-national-health-records-ui/:
Modified files:
1. src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx — replaced BetaComboBox with a custom multi-select component
2. src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx — factory updated to read full typeCodes[] and compute trigger label
3. src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.test.tsx — rewritten for new API
4. src/business/factories/filters/createNhrDocumentCategoryFilterConfig.test.tsx — updated for multi-select logic
5. src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.stories.tsx — updated stories
The repo is at /Users/USER/workspace/doctolib/treatment-plan. The branch is currently checked out there.
Get the actual diff with: git diff main...HEAD from that repo directory.
Review for: adherence to project guidelines, style guides, TypeScript correctness, React patterns, accessibility, and best practices. Check CLAUDE.md for project conventions.
Turn 1 — Assistant
I'll review the PR changes carefully. Let me start by examining the repo structure and understanding the project conventions.
Tools used:
Bash:git branch --show-current && git log --oneline -5
Tool results:
→ result (ok): fhir-2219_implement-multi-select-category-filter 755f86d2d feat(fhir-2219): implement multi-select for Document Category filter 5ffc59c37 feat(MOOSE-4227): customize practitioner selector labels for DMP consent (#3032) 8763ec3f3 chore(ACAI-4195): register tpf-document-template-library in release-please config (#3043) a0ece9197 chore(module-federation): sync versions after release 9af966771 chore: release main (#3041)
Tools used:
Bash:find /Users/USER/workspace/doctolib/treatment-plan -maxdepth 3 -name "CLAUDE.md" -type f 2>/dev/null
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/CLAUDE.md /Users/USER/workspace/doctolib/treatment-plan/backend/cda-validator/CLAUDE.md
Tools used:
Read:/Users/USER/workspace/doctolib/treatment-plan/CLAUDE.md
Tool results:
→ result (ok): 1 # CLAUDE.md
2
3 This is a full-stack healthcare treatment plan application (Kotlin/Spring Boot backend + React/TypeScript frontend) built as a modular monolith using the "hive" pattern with hexagonal architecture. It handles prescription creation, document management, and clinical workflows for the French and German markets.
4
5 Refer to @AGENTS.md for complete project overview, architecture, tech stack, and development guidelines.
6
7 ## Language Rule
8
9 All Claude stack files (C
…(truncated, 664 more chars)
Tools used:
Bash:find /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui -maxdepth 3 -name "CLAUDE.md" -type f 2>/dev/null
Tools used:
Bash:git diff main...HEAD --stat
Tool results:
→ result (ok): (Bash completed with no output)
Tool results:
→ result (ok): .../createNhrDocumentCategoryFilterConfig.test.tsx | 63 ++++++++------ .../createNhrDocumentCategoryFilterConfig.tsx | 25 ++++-- .../NhrDocumentCategoryFilter.stories.tsx | 21 +++-- .../NhrDocumentCategoryFilter.test.tsx | 94 ++++++++++++++------- .../NhrDocumentCategoryFilter.tsx | 95 +++++++++++++++++----- 5 files changed, 214 insertions(+), 84 deletions(-)
Now let me get the actual diff and look at the changed files.
Tools used:
Bash:git diff main...HEAD -- packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx
Tool results:
→ result (ok): diff --git a/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx b/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx index c7abe6e86..06aa65d52 100644 --- a/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx +++ b/packages/tpf-national-health-records-ui/src/components/Nhr …(truncated, 3114 more chars)
Tools used:
Bash:git diff main...HEAD -- packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx
Tool results:
→ result (ok): diff --git a/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx b/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx index d8e8982fa..6ccca21a3 100644 --- a/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx +++ b/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilt …(truncated, 1748 more chars)
Tools used:
Bash:git diff main...HEAD -- packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.test.tsx
Tool results:
→ result (ok): diff --git a/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.test.tsx b/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.test.tsx index 363549379..b059117d4 100644 --- a/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.test.tsx +++ b/packages/tpf-national-health-records-ui/src …(truncated, 5096 more chars)
Tools used:
Bash:git diff main...HEAD -- packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.test.tsx
Tool results:
→ result (ok): diff --git a/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.test.tsx b/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.test.tsx index cabf73685..6b94c7168 100644 --- a/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.test.tsx +++ b/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocum …(truncated, 3917 more chars)
Tools used:
Bash:git diff main...HEAD -- packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.stories.tsx
Tool results:
→ result (ok): diff --git a/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.stories.tsx b/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.stories.tsx index 3251103d0..3fd3988f6 100644 --- a/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.stories.tsx +++ b/packages/tpf-national-health-recor …(truncated, 976 more chars)
Now let me examine the surrounding code, design system patterns, and other filter components for context.
Tools used:
Read:/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx
Tool results:
→ result (ok): 1 import { ChevronDownRegularIcon } from '@doctolib/design-system-icons/ChevronDownRegularIcon'
2 import { Checkbox } from '@doctolib/design-system/Checkbox/v2'
3 import type { Option } from '@doctolib/design-system/Option'
4 import { useEffect, useRef, useState } from 'react'
5
6 type NhrDocumentCategoryFilterProps = {
7 label: string
8 values: string[]
9 triggerLabel: string
10 options: Option[]
11 placeholder?: string
12 onToggle: (option: Option) => void
13 onClear: () => void
…(truncated, 2158 more chars)
Tools used:
Read:/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx
Tool results:
→ result (ok): 1 import type { Option } from '@doctolib/design-system/Option'
2
3 import { NhrDocumentCategoryFilter } from '../../../components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter'
4 import type { FilterConfig } from '../../../types'
5
6 export const createNhrDocumentCategoryFilterConfig = ({
7 options = [],
8 label = 'Document Category',
9 placeholder,
10 }: {
11 options?: Option[]
12 label?: string
13 placeholder?: string
14 } = {}): FilterConfig => ({
15 key:
…(truncated, 1141 more chars)
Tools used:
Read:/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.test.tsx
Tool results:
→ result (ok): 1 import { setup } from '@doctolib/test-helpers'
2 import { screen } from '@testing-library/react'
3 import { describe, expect, it, vi } from 'vitest'
4
5 import { NhrDocumentCategoryFilter } from './NhrDocumentCategoryFilter'
6
7 const sampleOptions = [
8 { value: 'A', label: 'Report A' },
9 { value: 'B', label: 'Report B' },
10 ]
11
12 describe('NhrDocumentCategoryFilter', () => {
13 const renderComponent = (props: Partial<React.ComponentProps<typeof NhrDocumentCategoryFilter>> = {})
…(truncated, 3518 more chars)
Tools used:
Read:/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.stories.tsx
Tool results:
→ result (ok): 1 import type { Meta, StoryObj } from '@storybook/react'
2
3 import { NhrDocumentCategoryFilter } from './NhrDocumentCategoryFilter'
4
5 const meta = {
6 title: 'NHR/DocumentList/Filters/DocumentCategoryFilter',
7 component: NhrDocumentCategoryFilter,
8 tags: ['autodocs'],
9 decorators: [
10 (Story) => (
11 <div data-theme='doctolib2023' style={{ height: '40vh', padding: '24px', maxWidth: '400px' }}>
12 <Story />
13 </div>
14 ),
15 ],
16 args: {
17 l
…(truncated, 1036 more chars)
Tools used:
Read:/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.test.tsx
Tool results:
→ result (ok): 1 import { setup } from '@doctolib/test-helpers'
2 import { screen } from '@testing-library/react'
3 import { describe, expect, it, vi } from 'vitest'
4
5 import { mockPatientInfo } from '../../../test-helpers'
6 import { createNhrDocumentCategoryFilterConfig } from './createNhrDocumentCategoryFilterConfig'
7
8 const ctx = { patient: mockPatientInfo }
9
10 const sampleOptions = [
11 { value: 'A', label: 'Report A' },
12 { value: 'B', label: 'Report B' },
13 { value: 'C', label: 'Report
…(truncated, 2524 more chars)
Let me look at how other similar filters (e.g., InputDate, Select) are implemented, check the Checkbox v2 API, and look at any patterns to verify the design system usage.
Tools used:
Bash:find /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList -maxdepth 3 -type d
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrSharedByCell /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentStatusFilter /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocum …(truncated, 849 more chars)
Tools used:
Bash:find /Users/USER/workspace/doctolib/treatment-plan -path '*/node_modules/@doctolib/design-system/Checkbox/v2*' -maxdepth 8 -type d 2>/dev/null | head -5
Tools used:
Bash:find /Users/USER/workspace/doctolib/treatment-plan -path '*/node_modules/@doctolib/design-system/Checkbox*' 2>/dev/null | head -20
Tool results:
→ result (ok): (Bash completed with no output)
Tool results:
→ result (ok): (Bash completed with no output)
Tools used:
Bash:find /Users/USER/workspace/doctolib/treatment-plan -name "node_modules" -maxdepth 3 -type d 2>/dev/null
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/node_modules /Users/USER/workspace/doctolib/treatment-plan/src/node_modules /Users/USER/workspace/doctolib/treatment-plan/target/spotless-prettier-node-modules-49bc81ea7b1ffe28e37c681c596fd162/node_modules /Users/USER/workspace/doctolib/treatment-plan/node_modules/test-exclude/node_modules /Users/USER/workspace/doctolib/treatment-plan/node_modules/strip-literal/node_modules /Users/USER/workspace/doctolib/treatment-plan/node_modules/import-local/node_ …(truncated, 13657 more chars)
Tools used:
Bash:find /Users/USER/workspace/doctolib/treatment-plan -name "package.json" -path "*tpf-national-health-records-ui*" -not -path "*/node_modules/*"
Tools used:
Read:/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentStatusFilter
Tool results:
→ result (ERROR): EISDIR: illegal operation on a directory, read '/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentStatusFilter'
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/package.json /Users/USER/workspace/doctolib/treatment-plan/.claude/worktrees/stupefied-lewin/packages/tpf-national-health-records-ui/package.json /Users/USER/workspace/doctolib/treatment-plan/.claude/worktrees/friendly-lalande/packages/tpf-national-health-records-ui/package.json
Tools used:
Bash:ls -la /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentStatusFilter/
Tool results:
→ result (ok): drwxr-xr-x clertonra staff 160 B Mon Apr 27 12:01:29 2026 . drwxr-xr-x clertonra staff 448 B Mon Apr 27 12:01:29 2026 .. .rw-r--r-- clertonra staff 1.2 KB Mon Apr 27 12:01:29 2026 NhrDocumentStatusFilter.stories.tsx .rw-r--r-- clertonra staff 3.4 KB Tue Apr 21 10:46:53 2026 NhrDocumentStatusFilter.test.tsx .rw-r--r-- clertonra staff 768 B Tue Apr 21 10:46:53 2026 NhrDocumentStatusFilter.tsx
Tools used:
Bash:find /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/node_modules/@doctolib/design-system/Checkbox 2>/dev/null | head -10
Tool results:
→ result (ok): (Bash completed with no output)
Tools used:
Bash:find /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system -maxdepth 2 -type d -name 'Checkbox*' 2>/dev/null
Tool results:
→ result (ok): (Bash completed with no output)
Tools used:
Bash:find /Users/USER/workspace/doctolib/treatment-plan -path "*/@doctolib/design-system*" -maxdepth 6 -type d 2>/dev/null | head -10
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system-tokens /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system-illustrative-icons /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system-icons /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system-b2b /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system /Users/USER/workspace/doctolib/treatment-plan/nod …(truncated, 446 more chars)
Tools used:
Read:/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentStatusFilter/NhrDocumentStatusFilter.tsx
Tool results:
→ result (ok): 1 import { Checkbox } from '@doctolib/design-system/Checkbox/v2'
2 import { Heading } from '@doctolib/design-system/Heading'
3
4 import type { NhrDocumentStatusFilterProps } from '../../../types'
5
6 export const NhrDocumentStatusFilter = ({ label, statuses, value, onChange }: NhrDocumentStatusFilterProps) => (
7 <>
8 <Heading level='h5'>{label}</Heading>
9 <div className='flex flex-col'>
10 {statuses.map((status) => (
11 <Checkbox
12 key={status.filterKey}
13
…(truncated, 327 more chars)
Tools used:
Bash:ls -la /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system | head -50
Tool results:
→ result (ok): drwxr-xr-x clertonra staff 352 B Mon Mar 16 10:02:39 2026 .
drwxr-xr-x clertonra staff 1.4 KB Thu Apr 2 10:01:25 2026 ..
.rw-r--r-- clertonra staff 6.0 KB Mon Mar 16 10:02:39 2026 .DS_Store
.rw-r--r-- clertonra staff 91 KB Mon Mar 9 10:01:28 2026 CHANGELOG.md
drwxr-xr-x clertonra staff 9.5 KB Mon Mar 9 10:01:28 2026 dist
drwxr-xr-x clertonra staff 352 B Mon Mar 9 10:01:58 2026 node_modules
.rw-r--r-- clertonra staff 30 KB Mon Mar 9 10:01:27 2026 package.json
drwxr-xr-x clertonra staff
…(truncated, 248 more chars)
Tools used:
Bash:find /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system -maxdepth 2 -type d -name "Checkbox*" 2>/dev/null
Tool results:
→ result (ok): (Bash completed with no output)
Tools used:
Bash:find /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src -maxdepth 2 -type d -iname "*Checkbox*" 2>/dev/null
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/Checkbox
Tools used:
Bash:find /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/dist -maxdepth 3 -type d -iname "*Checkbox*" 2>/dev/null
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/dist/dataEntry/Checkbox
Tools used:
Bash:ls /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/Checkbox/v2/
Tool results:
→ result (ERROR): Exit code 2 lsd: /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/Checkbox/v2/: No such file or directory (os error 2).
Tools used:
Bash:find /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/Checkbox/v2 -type f | head -10
Tool results:
→ result (ERROR): <tool_use_error>Cancelled: parallel tool call Bash(ls /Users/USER/workspace/doctolib/t…) errored</tool_use_error>
Tools used:
Bash:ls /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/Checkbox/
Tool results:
→ result (ok): Checkbox.module.scss Checkbox.test.tsx Checkbox.tsx CheckboxGroup.module.scss CheckboxGroup.test.tsx CheckboxGroup.tsx
Tools used:
Bash:find /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/Checkbox -type f -maxdepth 3 2>/dev/null
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/Checkbox/CheckboxGroup.module.scss /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/Checkbox/CheckboxGroup.test.tsx /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/Checkbox/CheckboxGroup.tsx /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/Checkbox/Checkbox. …(truncated, 254 more chars)
Tools used:
Bash:grep -E '"\\./Checkbox' /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/package.json | head -20
Tool results:
→ result (ok): (Bash completed with no output)
Tools used:
Bash:grep -A 4 "\"./Checkbox" /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/package.json | head -30
Tool results:
→ result (ok): "./Checkbox": { "import": "./dist/Checkbox.js", "types": "./dist/Checkbox.d.ts", "default": "./dist/Checkbox.js" }, "./Checkbox/v2": { "import": "./dist/dataEntry/Checkbox/Checkbox.js", "types": "./dist/dataEntry/Checkbox/Checkbox.d.ts", "default": "./dist/dataEntry/Checkbox/Checkbox.js" }, "./CheckboxGroup": { "import": "./dist/dataEntry/Checkbox/CheckboxGroup.js", "types": "./dist/dataEntry/Checkbox/CheckboxGroup.d.ts", "def …(truncated, 58 more chars)
Good, Checkbox/v2 exists. Now let me look at the Checkbox component contract to understand its props (e.g., value, name, label and how it renders accessibility attributes).
Tools used:
Read:/Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/Checkbox/Checkbox.tsx
Tool results:
→ result (ok): 1 import { type ChangeEvent, type FocusEvent, forwardRef, useId, useState } from 'react'
2 import { CheckSolidIcon } from '@doctolib/design-system-icons/CheckSolidIcon'
3 import classNames from 'classnames'
4 import { useFocusRing, useVisuallyHidden } from 'react-aria'
5
6 import type { FieldState } from '../private/Field'
7 import { getFieldHintId, getFieldInputId, getFieldMessageId } from '../private/Field'
8 import type { InputProps as InputCheckboxGroupProps } from './CheckboxGroup'
9 impor
…(truncated, 7408 more chars)
Now let me look at the placeholder rule and see if placeholder is actually used in the component (component reads it but never uses it).
Tools used:
Bash:grep -n "placeholder" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx
Tool results:
→ result (ok): 11: placeholder?: string
Tools used:
Bash:grep -rn "createNhrDocumentCategoryFilterConfig" --include="*.ts*" --exclude-dir=node_modules --exclude-dir=dist --exclude-dir=target | head -20
Tool results:
→ result (ok): packages/tpf-national-health-records-ui/src/index.ts:39:export { createNhrDocumentCategoryFilterConfig } from './business/factories/filters/createNhrDocumentCategoryFilterConfig' packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx:6:export const createNhrDocumentCategoryFilterConfig = ({ packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.test.tsx:6:import { createNhrDocumentCate …(truncated, 1046 more chars)
Tools used:
Bash:grep -rn "placeholder" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/ 2>/dev/null
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx:11: placeholder?: string /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.stories.tsx:39: placeholder: 'Ex. Laboratory report',
Tools used:
Bash:find /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src -name '*.test.tsx' -path '*Filter*' | head -5
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDateRangeFilter/NhrDateRangeFilter.test.tsx /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDateSelectionFilter/NhrDateSelectionFilter.test.tsx /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentVisibilityFilter/NhrDocumentVisibilityFilter.test.tsx /Users/USER/workspace/doctolib …(truncated, 279 more chars)
Confirmed: placeholder prop is destructured/typed in the component but never rendered (the prop receives data only via factory but the trigger button shows triggerLabel, not the placeholder directly). Let me now investigate other related concerns.
Tools used:
Read:/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentListFilterPanel/NhrDocumentListFilterPanel.stories.tsx
Tool results:
→ result (ok): 1 import type { Meta, StoryObj } from '@storybook/react'
2 import { useState } from 'react'
3
4 import { createNhrDateSelectionFilterConfig } from '../../business/factories/filters/createNhrDateSelectionFilterConfig'
5 import { createNhrDocumentCategoryFilterConfig } from '../../business/factories/filters/createNhrDocumentCategoryFilterConfig'
6 import { createNhrDocumentStatusFilterConfig } from '../../business/factories/filters/createNhrDocumentStatusFilterConfig'
7 import { createNhrDocument
…(truncated, 4336 more chars)
Now I have enough context. Let me also briefly check if there's a BetaComboBox alternative or other multi-select patterns already in the design system or app, to validate the rebuild from scratch decision (though that's possibly debate territory rather than confidence ≥80).
Tools used:
Bash:grep -rn "BetaComboBox\|MultiSelect\|MultiCombo" /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/package.json 2>/dev/null | head -10
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/package.json:230: "./BetaComboBox": { /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/package.json:231: "import": "./dist/dataEntry/ComboBox/BetaComboBox.js", /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/package.json:232: "types": "./dist/dataEntry/ComboBox/BetaComboBox.d.ts", /Users/USER/workspace/doctolib/treatment-plan/node_mo …(truncated, 107 more chars)
Tools used:
Bash:grep -E '"\\./[A-Z][a-zA-Z]*(Beta|Combo|Multi|Select)' /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/package.json | head -10
Tool results:
→ result (ok): (Bash completed with no output)
Tools used:
Bash:grep -E '"\\./(Combo|Select)' /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/package.json | head -20
Tool results:
→ result (ok): (Bash completed with no output)
Tools used:
Bash:grep -E '"\./(Multi|Tag|Listbox)' /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/package.json | head -20
Tool results:
→ result (ok): (Bash completed with no output)
Tools used:
Bash:grep -i "select\|combo\|tag" /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/package.json | grep -E '"\\./' | head -20
Tool results:
→ result (ok): (Bash completed with no output)
Tools used:
Bash:grep -nE "\"\\./" /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/package.json | grep -iE "select|combo|tag|multi" | head -20
Tool results:
→ result (ok): 230: "./BetaComboBox": { 231: "import": "./dist/dataEntry/ComboBox/BetaComboBox.js", 232: "types": "./dist/dataEntry/ComboBox/BetaComboBox.d.ts", 233: "default": "./dist/dataEntry/ComboBox/BetaComboBox.js" 240: "./BulkSelect": { 241: "import": "./dist/table/Utils/BulkSelect.js", 242: "types": "./dist/table/Utils/BulkSelect.d.ts", 243: "default": "./dist/table/Utils/BulkSelect.js" 290: "./CardSelectable": { 291: "import": "./dist/CardSelectable.js", 292 …(truncated, 512 more chars)
Now I have enough context. Let me consolidate the review.
Tools used:
Bash:grep -rn "data-theme\|design-system" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCate …(truncated, 26 more chars)
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx:1:import { ChevronDownRegularIcon } from '@doctolib/design-system-icons/ChevronDownRegularIcon' /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx:2:import { Checkbox } from '@doctolib/design-system/Checkb …(truncated, 242 more chars)
Tools used:
Bash:grep -rn "Heading\|heading\|h5\|h4" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/Nhr*Filter/*.tsx 2>/dev/null | head -10
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentStatusFilter/NhrDocumentStatusFilter.tsx:2:import { Heading } from '@doctolib/design-system/Heading' /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentStatusFilter/NhrDocumentStatusFilter.tsx:8: <Heading level='h5'>{label}</Heading>
I have sufficient context now to deliver a thorough review. Let me compile findings.
Review of PR #3051: fhir-2219_implement-multi-select-category-filter
Files reviewed
/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.test.tsx/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.test.tsx/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.stories.tsx
Critical issues (90–100)
1. The component is reinventing a multi-select instead of using the Oxygen design system. Confidence: 95
- File: NhrDocumentCategoryFilter.tsx (lines 1–86)
- Project rule violated: .claude/rules/frontend/react/oxygen-design-system.md — "Prefer design system components over custom HTML elements". Also general Oxygen rule: "Use v2 components when available".
- The component now hand-rolls a popover-with-checkboxes using raw <div>, <span>, <button> with bespoke Tailwind (border rounded, bg-white, shadow-md, z-10), an "×" glyph in a button, manual outside-click and Escape handling, etc. Oxygen ships BetaComboBox, Select, and other selection primitives. Either:
- extend / use a design-system multi-select primitive (the previous BetaComboBox was the recognised path; replacing it with a custom component bypasses the design system, violates accessibility/design tokens guarantees, and creates a maintenance burden), or
- if no Oxygen multi-select exists, this should be flagged in a design review and the bespoke implementation should at minimum re-use Oxygen building blocks (Heading, Button/v2, IconButton/v2, Popover, etc.) — none are used.
- Concrete fix: Confirm with the design system team whether BetaComboBox (or a forthcoming Oxygen multi-select) supports multi-selection, or wrap an existing primitive. If a custom UI is truly required, refactor to use <Heading level='h5'> (consistent with NhrDocumentStatusFilter.tsx), Button/v2 for the trigger, IconButton/v2 for "clear", design system tokens for colours/borders, and add data-design-system='oxygen' / data-theme wrapper.
2. Outside-click / Escape behaviour is dead-code in production. Confidence: 92
- File: NhrDocumentCategoryFilter.tsx lines 27–40 vs. parent NhrDocumentListFilterPanel.stories.tsx lines 36–47.
- The factory always returns a fresh component instance on every parent re-render (the parent panel re-renders on appliedFilters change). Because the dropdown's open state is local to the leaf component, every state change in the panel will re-render the filter. That is fine in theory, but combined with the issues below it produces user-visible bugs:
- aria-expanded={isOpen} is set on the trigger button, but no aria-controls / aria-haspopup="listbox" is provided. The dropdown is also not a role="listbox" — it's an unlabelled <div> with a flat list of Checkboxes, so a11y tooling won't announce it.
- The "Clear" <button> and the trigger <button> are siblings inside <div className='flex items-center border rounded'>. The trigger's onClick is () => setIsOpen(!isOpen). When the user clicks "Clear", e.stopPropagation() is called — but in React, onClick does not bubble up to the trigger anyway because they are siblings, not ancestors. The stopPropagation is misleading: it stops React-synthetic bubbling, but the document-level mousedown listener registered in useEffect is a native DOM listener that fires on the mousedown phase before React's synthetic onClick. Yet the listener checks containerRef.current.contains(e.target), and the Clear button is inside containerRef, so the dropdown is not closed by Clear. That is correct behaviour by accident.
- More importantly: a real misuse is that pressing the Clear button never actually calls setIsOpen(false), so after clearing, the dropdown stays open showing the now-empty selection — but the Clear button itself disappears (because values.length > 0 is now false). User experience: the "×" vanishes mid-click, which is a layout shift bug.
- Concrete fix: hoist the popover behind an Oxygen primitive that handles ARIA wiring; otherwise add aria-controls, aria-haspopup, role='listbox', focus trap, and explicit decision about whether Clear closes the popover.
3. Accessibility — non-semantic close button and listbox. Confidence: 90
- File: NhrDocumentCategoryFilter.tsx lines 56–68, 71–82.
- The clear button uses the literal character × as visible content and only an aria-label='Clear'. This is a hard-coded glyph that isn't an icon component (Oxygen rule: "Import icons individually from @doctolib/design-system-icons" — e.g., CloseRegularIcon/XmarkRegularIcon).
- The dropdown container has no role, no aria-multiselectable, no aria-labelledby. Keyboard navigation between options (ArrowUp / ArrowDown / Home / End) is not implemented, nor is Space/Enter to toggle from inside the trigger. Only Escape closes the popover.
- The trigger button shows triggerLabel text only — when nothing is selected, the placeholder is supposed to render but the placeholder prop is destructured neither from NhrDocumentCategoryFilter props (see issue #4) nor used; instead the factory pre-computes triggerLabel from placeholder ?? ''. When no placeholder and no selection, the trigger renders an empty <button> with aria-label={label} — that is a label-only button, which screen readers can read, but sighted users see an empty box (the chevron is the only hint). This is a UX regression compared to BetaComboBox.
- Concrete fix: use Oxygen icon components, set proper ARIA attributes for a combobox/listbox or menu pattern, render a visible placeholder in the trigger when empty, and add keyboard navigation among options.
Important issues (80–89)
4. placeholder prop is declared but never rendered by the component. Confidence: 95
- File: NhrDocumentCategoryFilter.tsx line 11 + line 16–22 (destructuring).
- The prop is in NhrDocumentCategoryFilterProps, the factory passes it (placeholder={placeholder} in the config), and the story sets it (placeholder: 'Ex. Laboratory report'), but the component body does not destructure or render it. TypeScript accepts the prop because the destructure simply omits it, and ESLint's no-unused-vars won't catch it because the prop isn't pulled out.
- This is a behavioural regression: previously BetaComboBox rendered the placeholder; now the empty state shows nothing because the trigger only displays triggerLabel.
- Concrete fix: either remove placeholder from the props (and the factory/story) since the placeholder is already folded into triggerLabel by the factory, or render it in the trigger button (preferred, with proper styling — placeholders should be visually distinct from selected text). Given the factory already collapses placeholder into triggerLabel, the cleanest fix is to drop placeholder from the component's props entirely.
5. Custom hand-rolled outside-click / Escape pattern is fragile. Confidence: 85
- File: NhrDocumentCategoryFilter.tsx lines 27–40.
- mousedown (not click) is used to detect outside taps — fine for desktop but breaks portals (none here, but if a tooltip/portal is added, a click in the portal will be considered "outside"). For touch devices, mousedown is mapped
…(truncated, 5602 more chars)