Conversation
- Add TypeScript types with comprehensive interfaces - Create time-picker UI component with hour, minute, second selection - Support both 12-hour and 24-hour formats - Add 6 demo examples (basic, 12-hour, seconds, controlled, form, step) - Include full documentation with API reference and keyboard shortcuts - Update registry-ui.ts and registry-examples.ts - Add form integration with validation support - Include customizable step intervals for time selection
- Add native HTML time input behavior (click to select segments) - Implement inline editing with arrow key navigation (↑↓ to change values) - Add AM/PM support with instant keyboard shortcuts (A/P keys) - Introduce InputGroup pattern for cleaner, composable API - Remove forwardRef in favor of React 19 direct ref props - Memoize callbacks and compose event handlers properly - Add arrow key navigation in dropdown columns with wrapping - Simplify all examples to use new InputGroup pattern - Update documentation with keyboard shortcuts and usage examples Breaking changes: - InputGroup now wraps inputs and trigger together - Trigger is now a button that goes inside InputGroup - Removed separate inline demo examples (all use same pattern)
- Replace custom popover implementation with shadcn Popover components - Use PopoverAnchor to position popover relative to InputGroup - Leverage Radix CSS variables (--radix-popover-trigger-width) for width - Fix store context issue by splitting Root into Root/RootImpl pattern - Remove manual width measurement and useEffect - Improve accessibility and positioning consistency
- Add open/defaultOpen props to time-picker for controlled state - Fix duplicate hour key bug in 12-hour format - Refactor time-picker store to inline pattern (matches stepper) - Optimize column items with getItems() pattern for better performance - Add use12Hours demo to show period functionality - Refactor color-picker store to inline pattern - Remove redundant onOpenChange callback in color-picker - Fix CSS linter warning in color-picker
…e components reusable
…ction - Replace use12Hours prop with optional locale prop - Add uses12HourFormat() utility using Intl.DateTimeFormat - Calculate is12Hour once in root and share via context for better performance - Always store values in 24-hour format (HH:mm or HH:mm:ss) internally - Auto-detect display format from user's locale, matching native input behavior - Remove time-picker-12hour-demo (no longer needed with auto-detection) - Update documentation and examples - Rename time-picker-step-demo to time-picker-minute-step-demo for clarity
- Add focusFirst utility for fallback focus strategy when no value is set - Fix focus management when value/defaultValue is empty - Consolidate redundant types (ItemData, ColumnData) at top of file - Create reusable sortNodes utility for DOM position sorting - Simplify column registration to use ColumnData object instead of flat params - Add proper error handling to useTimePickerGroupContext hook - Optimize getSelectedItemRef to reuse getItems() (DRY principle) - Add COLUMN_NAME constant for consistency - Add SegmentFormat type alias for better type reusability - Remove redundant comments and clean up code structure - Match stepper component's cleaner, more performant patterns
- Replace focusFirst with direct focus for Tab/Arrow column navigation - Fixes timing conflicts between browser Tab behavior and custom handler - Tab now consistently moves to the next/previous column without skipping
…olumns - Added queueMicrotask to ensure DOM stability before column navigation - Added safety checks for column existence and valid refs - Tab navigation now consistently moves between columns (Hour → Minute → Period) - Arrow key navigation remains unchanged and working correctly
- Changed scrollIntoView from 'block: nearest' to 'block: center' - Selected items now center in viewport, ensuring full visibility - Eliminates partial clipping at container edges
- Auto-pad single digits (1 -> 01) with instant display - Auto-advance to next segment after two digits - Smart digit combination (typing 1 then 1 makes 11) - Keep segments empty (--) until explicitly set - Support partial time values (10:-- instead of 10:00) - Fix period segment to stay empty until user sets it - Add keyboard shortcuts for period: A/P/1/2 keys, arrow up/down - Preserve selection state after period changes - Use refs-based input registry instead of querySelector - Match native HTML time input behavior exactly
- Add left/right arrow keys to navigate between segments - Add backspace/delete to clear selected segment - Preserve selection after clearing segment - Fix selection state to match native HTML time input - Improve accessibility with full keyboard navigation support
…mentation - Add comprehensive keyboard shortcuts organized by category - Document all input navigation options (Tab, Arrow keys) - Add value editing shortcuts (digits, arrows, backspace/delete) - Document period (AM/PM) shortcuts (A/P/1/2, arrows) - Update notes section with detailed behavior explanations - Organize documentation into Behavior, Format & Locale, and Customization sections
- Rename InputRegistryContext to TimePickerInputGroupContext - Add proper error handling with context validation - Inline provider logic directly in TimePickerInputGroup component - Rename methods to onInputRegister/onInputUnregister for consistency - Use InputElement type alias instead of HTMLInputElement - Replace useEffect with useIsomorphicLayoutEffect for input registration
- Add segmentPlaceholder prop to customize empty segment display
- Supports string (e.g., "--") or object (e.g., { hour: "hh", minute: "mm", period: "aa" })
- Normalized internally to object format for consistency
- Remove unused placeholder prop
- Clean up redundant comments (71 → 1)
- Fix input width to dynamically adjust based on placeholder length
- Add inputMode, autoComplete, and aria-invalid attributes to prevent browser validation errors
- Update demo to show custom placeholder format
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds a comprehensive time picker component to the registry. The time picker provides an accessible, keyboard-friendly way to select times with automatic 12-hour/24-hour format detection based on user locale. It features inline editing of time segments and a dropdown for easier selection.
Key changes:
- New
time-pickerUI component with full keyboard navigation and inline editing - Support for hours, minutes, seconds, and AM/PM period selection
- Automatic locale-based format detection (12-hour vs 24-hour)
- Multiple example implementations demonstrating various use cases
- Comprehensive documentation with API reference and accessibility guidelines
Reviewed changes
Copilot reviewed 31 out of 31 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
docs/registry/default/ui/time-picker.tsx |
Main time picker component implementation with 1957 lines of code including input handling, dropdown selection, and keyboard navigation |
docs/types/docs/time-picker.ts |
TypeScript type definitions for all time picker component props |
docs/registry/registry-ui.ts |
Registry configuration adding time-picker with dependencies and CSS utilities |
docs/registry/registry-examples.ts |
Example registrations for time-picker demos (basic, step, seconds, controlled, form, placeholder) |
docs/content/docs/components/time-picker.mdx |
Comprehensive documentation with usage examples, API reference, and accessibility guidelines |
docs/styles/globals.css |
Added scrollbar-none utility for hiding scrollbars in time picker columns |
| Multiple example files | Various demo implementations showing different time picker configurations |
| Multiple JSON registry files | Auto-generated registry metadata files |
docs/app/(lobby)/pg/page.tsx |
Playground page updated to showcase time picker demos |
docs/__registry__/index.tsx |
Auto-generated registry index with new component entries |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Increase period column width to prevent text cutoff - Fix period value reset on blur by deriving from hour value - Fix arrow key navigation in popover by properly selecting current period - Default to current time's AM/PM when no value is set
- Auto-fill missing hour/minute/second when selecting any segment - Works in both input fields (on blur) and popover columns (on select) - Matches HTML native time input behavior - Missing segments populate with current time values
Replace all hardcoded "--" strings with DEFAULT_SEGMENT_PLACEHOLDER constant for better maintainability and consistency.
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.
No description provided.