feat: data-selection suite — DataPicker, MultiSelect, TagInput, CommandPalette#25
Merged
Conversation
Enhanced the `TemplateSyncTests` by adding new inline data for the `data-picker`, `multi-select`, `tag-input`, and `command-palette` components. This improves test coverage for template synchronization, ensuring that the new components are correctly matched with their corresponding Razor files.
Enhanced the `ShellUI.Components.targets` file by adding new safelist entries for `flex-wrap`, `focus:ring-1`, `hover:text-destructive`, `left-2`, and `min-w-24`. These additions expand the available utility classes, improving styling flexibility and responsiveness in the ShellUI components.
Introduced four new components: `CommandPalette`, `DataPicker`, `MultiSelect`, and `TagInput`. These components enhance user interaction by providing command selection, date picking, multi-selection capabilities, and tag input functionality, respectively. Each component includes customizable parameters and event callbacks to improve usability and integration within the ShellUI framework.
Introduced four new components: `CommandPalette`, `DataPicker`, `MultiSelect`, and `TagInput`. These components provide improved user interaction through command selection, date picking, multi-value selection, and tag input functionalities. Each component is designed with customizable parameters and event callbacks to enhance usability within the ShellUI framework.
…ionality Added entries for `command-palette`, `data-picker`, `multi-select`, and `tag-input` to the `ComponentRegistry`. This update integrates the new components into the ShellUI framework, allowing for improved user interaction and functionality across the application.
Updated `shellui-classes.txt` to include new utility classes: `flex-wrap`, `focus:ring-1`, `hover:text-destructive`, `left-2`, and `min-w-24`, improving styling options. Additionally, implemented keyboard shortcut registration and unregistration functions in `shellui.js`, allowing for customizable keyboard interactions within the ShellUI framework.
Introduced `DataPicker`, `MultiSelect`, `TagInput`, and `CommandPalette` components to the ShellUI framework. These components enhance user interaction by providing functionalities for date picking, multi-value selection, free-form tag entry, and command execution via keyboard shortcuts. Each component includes customizable parameters and event callbacks to improve usability and integration within the application.
Added links for `DataPicker`, `MultiSelect`, `TagInput`, and `CommandPalette` components in the Index.razor file. This enhances navigation and accessibility to the newly introduced components within the ShellUI framework.
…r functionality Enhanced the NavigationDemo component by adding an inline mode description for the sidebar and adjusting the layout references in Blocks.razor and Home.razor to use BlocksLayout and MainLayout respectively. This improves user experience and consistency across the application.
…ction Introduced `DataPicker`, `MultiSelect`, `TagInput`, and `CommandPalette` components in the ComponentPreview.razor file, allowing users to interactively select frameworks, manage multiple selections, input tags, and execute commands via keyboard shortcuts. Updated Home.razor to include corresponding entries for these components, improving navigation and accessibility within the ShellUI framework.
…shellui.js Added functions for registering and unregistering keyboard shortcuts in shellui.js, allowing for customizable keyboard interactions. Updated CommandPalette and InputOTP components to utilize these new functions, enhancing user experience through improved keyboard navigation. Also, modified Sidebar component to support an inline mode for better layout flexibility.
…yboard shortcut handling Updated the CommandPaletteTemplate to include a new dependency on "shellui-js" and modified the shortcut registration logic for better error handling. Improved the InputOTPTemplate by refining the focus input method to handle index validation more effectively. Additionally, introduced an inline mode parameter in the SidebarTemplate for enhanced layout flexibility.
…JS-interop path differences Added entries to the AllowedDrift dictionary in TemplateSyncTests.cs to document discrepancies in JS-interop paths between the NuGet package and CLI template for the CommandPalette and InputOTP components. This enhances test clarity and aids in addressing potential integration issues.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Ships four flagship components covering the "searchable list in a floating panel" primitive that was missing since 0.3.
The four components
DataPicker<TItem, TKey>— the typed sibling of the string-onlyCombobox. Bind to a list of real domain objects (users, products, frameworks) viaKeySelector. TemplatedSelectedTemplate+OptionTemplatefor rich rendering; pluggableSearchPredicate; auto-focus search on open; ↑/↓/Enter/Esc keyboard nav.MultiSelect<TItem, TKey>— same primitives, multi-value chip output. Selected items render as chips with inline X-remove; toggling rows in the popover adds/removes. OptionalChipTemplatefor custom chip rendering.TagInput— free-form tag entry. Enter to add, Backspace on empty removes last, paste comma/newline-separated to bulk-add. OptionalMaxTagsandAllowDuplicates.CommandPalette— wraps existingCommandwith a global keyboard shortcut (default Cmd+K / Ctrl+K). ConfigurableHotkeyChar,UseCtrl,UseMeta,UseShift,UseAlt. Disposes cleanly per instance (GUID-keyed listener registry).Full usage examples live in the demo doc pages under
/components/form/*and/components/overlay/command-palette.JS-interop pattern (fixed a pre-existing inconsistency)
While wiring
CommandPaletteI foundshellui.jsin the ShellUI.Components package shipped only ES-module exports, butInputOTP(already live in the package) calledwindow.ShellUI.focusElement— so its focus behavior silently no-op'd for Path A/B consumers. Fix:src/ShellUI.Components/wwwroot/shellui.jswindow.ShellUImonolith and as ES-module exports. Backwards-compatible either way it's loaded.src/ShellUI.Templates/Templates/ShellUIJsTemplate.csregisterShortcut/unregisterShortcutto thewindow.ShellUImonolith thatshellui initwrites to Path C consumers.src/ShellUI.Components/Components/CommandPalette.razor(live)window.ShellUI(Path C). Same patternCopyButtonuses.src/ShellUI.Components/Components/InputOTP.razor(live)src/ShellUI.Templates/Templates/CommandPaletteTemplate.cs(CLI)window.ShellUIonly — Path C consumers ownshellui.jsand always have the global.Live/template
@codeblocks legitimately diverge forcommand-paletteandinput-otp; documented inTemplateSyncTests.AllowedDriftwith reasons.Sidebarnow inlines cleanlyAdded
[Parameter] public bool Inline { get; set; }— when true, swapsposition: fixedforabsoluteandh-svhforh-fullso the sidebar stays inside a bounded parent. Mobile fullscreen sheet branch is skipped in inline mode. Kept in sync across the live component, the demo copy, and the CLI template.Enabled the
NavigationDemoSidebar showcase on Home to come back with<Sidebar Inline="true">— no more escape-to-viewport, no more visual confusion with the DashboardLayout sidebar.Registry, safelist, dependencies
ComponentRegistry.cs(metadata + content).command-palettedeclaresDependencies = ["command", "shellui-js"]sodotnet shellui add command-palettepulls the palette UI + JS glue automatically.min-h-10,min-w-24,flex-wrap,shrink-0, etc.)Demo project (
NET10/BlazorInteractiveServer) — full doc pagesFour new component source files installed as if via
shellui add, plus four dedicated doc pages with Installation, Usage (multiple variants), API Reference, and (for CommandPalette) Keyboard sections:/components/form/data-picker/components/form/multi-select/components/form/tag-input/components/overlay/command-paletteSidebar (
AppSidebar.razor) and components index (Index.razor) updated with entries and Font Awesome icons. Demo'swwwroot/shellui.jsgets the shortcut functions.Preview project (
NET10/ShellUI.Preview)Four preview cases in
ComponentPreview.razorwith sample data + four tiles on the Home grid.Demo UX polish (layout-flow fixes)
Not strictly a "data-selection" change, but the demo's Home page was falling apart in ways that made the new components hard to showcase properly:
/(Home)DashboardLayoutMainLayout/blocksDashboardLayoutBlocksLayoutBlocksLayoutwas already written for this page (has "Back to Dashboard" header). Dashboard sidebar competed with the layout blocks it was demoing./dashboardand/components/*retainDashboardLayout(correct — sidebar navigation is the point there).Files
src/ShellUI.Components/Components/DataPicker.razor(new)src/ShellUI.Components/Components/MultiSelect.razor(new)src/ShellUI.Components/Components/TagInput.razor(new)src/ShellUI.Components/Components/CommandPalette.razor(new)src/ShellUI.Components/Components/Sidebar.razorInlineparametersrc/ShellUI.Components/Components/InputOTP.razorsrc/ShellUI.Components/wwwroot/shellui.jswindow.ShellUI+ ES-modulesrc/ShellUI.Templates/Templates/*.cs(4 new +ShellUIJsTemplate.cs,SidebarTemplate.cs,InputOTPTemplate.csupdated)src/ShellUI.Templates/ComponentRegistry.cssrc/ShellUI.Components/wwwroot/shellui-classes.txt+build/*.targetsNET10/BlazorInteractiveServer/Components/UI/*.razor(4 new +Sidebar.razorupdated)NET10/BlazorInteractiveServer/Components/Pages/Components/Form/*Doc.razor(3 new) +Overlay/CommandPaletteDoc.razorNET10/BlazorInteractiveServer/Components/Pages/{Home,Blocks}.razorNET10/BlazorInteractiveServer/Components/Pages/Components/Index.razorNET10/BlazorInteractiveServer/Components/UI/AppSidebar.razorNET10/BlazorInteractiveServer/Components/Demo/NavigationDemo.razorInline="true")NET10/BlazorInteractiveServer/wwwroot/shellui.jsNET10/ShellUI.Preview/Pages/{ComponentPreview,Home}.razorShellUI.Tests/TemplateSyncTests.cscommand-paletteandinput-otpTest plan
dotnet test— 80/80 green (76 previous + 3 new drift InlineData rows;command-paletteandinput-otpcorrectly skipped via AllowedDrift)dotnet shellui listsurfaces all 4 new components with correct categories/(Home) uses MainLayout landing chrome;/blocksuses BlocksLayout;/dashboard+/components/*unchangedfixed inset-y-0sidebars in served HTML; onedata-sidebar="sidebar"inline demo rendering withabsolutepositioning inside its bounded carddata-picker,multi-select,tag-input;command-paletteandinput-otplegitimately diverge (documented reasons)