New components for DataVis NITRO by tvenable-mie · Pull Request #144 · mieweb/ui

tvenable-mie · 2026-03-23T15:24:01Z

I'm adding some UI widgets that are needed to support the parts of DataVis NITRO that aren't yet using mieweb/ui components — such as searchable dropdowns.

cloudflare-workers-and-pages · 2026-03-23T15:24:28Z

Deploying ui with Cloudflare Pages

Latest commit:	`7f956f0`
Status:	✅ Deploy successful!
Preview URL:	https://0f331210.ui-6d0.pages.dev
Branch Preview URL:	https://components-for-datavis-nitro.ui-6d0.pages.dev

View logs

Copilot

Pull request overview

Adds new Dropdown capabilities to support DataVis NITRO UI needs (notably searchable and multi-select dropdown behaviors), along with supporting tests/stories and improved jsdom test environment setup.

Changes:

Extend Dropdown with searchable filtering UI and multi-select (checkbox + select-all) behavior.
Add Vitest coverage for searchable and multi-select dropdown behaviors.
Add a localStorage mock + per-test cleanup in jsdom test setup.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
`src/test/setup.ts`	Adds `localStorage` mocking logic and clears storage between tests.
`src/components/Dropdown/Dropdown.tsx`	Implements searchable dropdown rendering/filtering and multi-select + select-all support.
`src/components/Dropdown/Dropdown.test.tsx`	Adds unit tests covering search filtering, empty state, multi-select, and select-all behaviors.
`src/components/Dropdown/Dropdown.stories.tsx`	Adds Storybook examples for searchable and multi-select dropdown variants.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-23T15:28:13Z

src/test/setup.ts

+  if (
+    typeof window.localStorage === 'undefined' ||
+    typeof window.localStorage.getItem !== 'function'
+  ) {
+    const storage = new Map<string, string>();
+    const localStorageMock: Storage = {
+      get length() {
+        return storage.size;
+      },
+      clear: () => {
+        storage.clear();
+      },
+      getItem: (key: string) => storage.get(key) ?? null,
+      key: (index: number) => Array.from(storage.keys())[index] ?? null,
+      removeItem: (key: string) => {
+        storage.delete(key);
+      },
+      setItem: (key: string, value: string) => {
+        storage.set(key, String(value));
+      },
+    };
+
+    Object.defineProperty(window, 'localStorage', {
+      configurable: true,
+      value: localStorageMock,
+    });
+  }


Accessing window.localStorage can throw a SecurityError in jsdom when the origin is opaque (default about:blank). The current typeof window.localStorage... check will still evaluate window.localStorage and can fail before the mock is installed, and the unconditional window.localStorage.clear() in afterEach can throw for the same reason. Wrap the availability check in a try/catch (e.g., attempt a getItem), install the mock when access fails, and guard/try-catch the clear() in afterEach so the test setup is robust across environments.

Copilot · 2026-03-23T15:28:13Z

src/test/setup.ts

 // Cleanup after each test case (e.g. clearing jsdom)
 afterEach(() => {
+  window.localStorage.clear();
  cleanup();


window.localStorage.clear() is called unconditionally. If localStorage is unavailable or throws in this jsdom configuration, this will fail the test run. After making the localStorage setup robust (e.g., via a try/catch mock), also guard this call (or wrap it in try/catch) so cleanup cannot throw.

Copilot · 2026-03-23T15:28:14Z

src/components/Dropdown/Dropdown.tsx

+      (isMultiSelectItem
+        ? dropdownContext.selectedValues.includes(itemValue)
+        : false);
+
+    const handleClick = React.useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        if (isMultiSelectItem && itemValue && !disabled) {
+          dropdownContext.toggleSelectedValue(itemValue);


dropdownContext is nullable (DropdownContextValue | null), but dropdownContext.selectedValues and dropdownContext.toggleSelectedValue are accessed unconditionally. With strict TS this is a compile-time error, and at runtime it will crash if DropdownItem is ever rendered outside a DropdownContext.Provider (e.g., if someone uses DropdownItem standalone or in tests). Fix by guarding on dropdownContext before reading it (or throwing a clear error), and only treating the item as multi-select when dropdownContext?.multiSelect is true. Also ensure itemValue is a string before passing it to includes() to satisfy strict typing.

Suggested change

(isMultiSelectItem

? dropdownContext.selectedValues.includes(itemValue)

: false);

const handleClick = React.useCallback(

(event: React.MouseEvent<HTMLButtonElement>) => {

if (isMultiSelectItem && itemValue && !disabled) {

dropdownContext.toggleSelectedValue(itemValue);

(isMultiSelectItem && dropdownContext && itemValue !== undefined

? dropdownContext.selectedValues.includes(itemValue)

: false);

const handleClick = React.useCallback(

(event: React.MouseEvent<HTMLButtonElement>) => {

if (isMultiSelectItem && itemValue && !disabled) {

if (dropdownContext) {

dropdownContext.toggleSelectedValue(itemValue);

}

Copilot · 2026-03-23T15:28:14Z

src/components/Dropdown/Dropdown.tsx

+          <div
+            id={menuId}
+            role="menu"
+            style={widthStyle}
+            className={cn(
+              'absolute z-50 min-w-[12rem]',
+              'rounded-xl border border-neutral-200 bg-white shadow-lg',
+              'dark:border-neutral-700 dark:bg-neutral-800',
+              'animate-in fade-in zoom-in-95 duration-100',
+              placementStyles[placement],
+              className
+            )}
+          >
+            {searchable && (
+              <div className="border-b border-neutral-200 p-2 dark:border-neutral-700">
+                <input
+                  ref={searchInputRef}
+                  type="search"
+                  value={searchQuery}
+                  onChange={(event) => setSearchQuery(event.target.value)}
+                  placeholder={searchPlaceholder}
+                  aria-label={searchAriaLabel}
+                  className={cn(
+                    inputVariants({ size: 'sm' }),
+                    'text-sm',
+                    'dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-100'
+                  )}
+                />
+              </div>


When searchable is enabled, an <input type="search"> is rendered inside the element with role="menu". Per ARIA menu patterns, a menu should generally contain only menuitem / menuitemcheckbox / menuitemradio (and separators), and embedding a textbox can confuse screen readers and keyboard expectations. Consider switching the popup role to a more appropriate pattern when searchable (e.g., role="listbox"/combobox, or role="dialog" with an internal list), or otherwise keep the search input outside the role="menu" container and ensure keyboard navigation remains accessible.

Copilot

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-23T19:55:59Z

src/components/Dropdown/Dropdown.tsx

+        if (
+          dropdownContext &&
+          isMultiSelectItem &&
+          itemValue !== undefined &&
+          !disabled
+        ) {
+          dropdownContext.toggleSelectedValue(itemValue);
+          onCheckedChange?.(!isChecked);


onCheckedChange is only fired when a DropdownContext exists and the item has a string value. If a consumer uses checked/indeterminate + onCheckedChange (which the props API now allows) without providing a value or without multiSelect on the parent, clicks will never call onCheckedChange, so the item can’t be toggled. Consider firing onCheckedChange whenever isMultiSelectItem and not disabled, and separately toggling context selection only when dropdownContext + itemValue are present.

Suggested change

if (

dropdownContext &&

isMultiSelectItem &&

itemValue !== undefined &&

!disabled

) {

dropdownContext.toggleSelectedValue(itemValue);

onCheckedChange?.(!isChecked);

if (disabled) {

return;

}

const nextChecked = !isChecked;

if (isMultiSelectItem) {

onCheckedChange?.(nextChecked);

}

if (dropdownContext && itemValue !== undefined && isMultiSelectItem) {

dropdownContext.toggleSelectedValue(itemValue);

Copilot · 2026-03-23T19:55:59Z

src/components/Dropdown/Dropdown.tsx

+        type="button"
+        role={isMultiSelectItem ? 'menuitemcheckbox' : 'menuitem'}
+        aria-checked={
+          isMultiSelectItem ? (indeterminate ? 'mixed' : isChecked) : undefined
+        }
+        disabled={disabled}


Because {...props} is spread after type, role, and aria-checked, a consumer can accidentally override these accessibility-critical attributes via props. To ensure consistent semantics, spread props earlier (before type/role/aria-*) or omit/lock down those attributes in DropdownItemProps (e.g., Omit role/type/onClick) so they can’t be overridden.

Copilot · 2026-03-23T19:55:59Z

src/components/Dropdown/Dropdown.tsx

+          <div
+            id={menuId}
+            role="menu"
+            style={widthStyle}


When searchable is enabled the menu renders an interactive <input type="search"> inside an element with role="menu". Per ARIA menu patterns, role="menu" is expected to contain only menuitem* descendants; mixing in a searchbox can lead to confusing screen reader/keyboard behavior. Consider switching to a combobox/listbox pattern for searchable dropdowns (or adjust roles/structure so the search input is not inside the menu role container).

tvenable-mie added 3 commits March 23, 2026 10:59

Add searchable dropdown variant with test coverage

6d25caa

Add multi-select dropdown variant

7486d9a

Add a "select all" property for multi-select dropdowns

7449b22

Copilot AI review requested due to automatic review settings March 23, 2026 15:24

Copilot started reviewing on behalf of tvenable-mie March 23, 2026 15:24 View session

Copilot AI reviewed Mar 23, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings March 23, 2026 19:52

tvenable-mie force-pushed the components-for-datavis-nitro branch from 9f3aab1 to 18b4fc3 Compare March 23, 2026 19:52

Copilot started reviewing on behalf of tvenable-mie March 23, 2026 19:53 View session

Attempt to fix some type errors.

7f956f0

tvenable-mie force-pushed the components-for-datavis-nitro branch from 18b4fc3 to 7f956f0 Compare March 23, 2026 19:55

Copilot AI reviewed Mar 23, 2026

View reviewed changes

tvenable-mie requested a review from garrity-miepub March 24, 2026 21:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New components for DataVis NITRO#144

New components for DataVis NITRO#144
tvenable-mie wants to merge 4 commits intomainfrom
components-for-datavis-nitro

tvenable-mie commented Mar 23, 2026 •

edited

Loading

Uh oh!

cloudflare-workers-and-pages bot commented Mar 23, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

Copilot AI Mar 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

tvenable-mie commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cloudflare-workers-and-pages bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying ui with Cloudflare Pages

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

tvenable-mie commented Mar 23, 2026 •

edited

Loading

cloudflare-workers-and-pages bot commented Mar 23, 2026 •

edited

Loading