Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New DateInput component #2645

Merged
merged 31 commits into from
Oct 29, 2024
Merged

New DateInput component #2645

merged 31 commits into from
Oct 29, 2024

Conversation

connor-baer
Copy link
Member

@connor-baer connor-baer commented Aug 9, 2024

Addresses DSYS-656.

Purpose

input[type="date"] is a rare example of a native element that doesn't meet accessibility requirements and warrants a custom component. The native component also lacks customizability to disable specific dates or allow the selection of a date range.

Approach and changes

  • Replace the DateInput component previously based on the native date input with a custom implementation. Users can enter a date in two ways:
    • Type into the text box. The year, month, and day segments are split into individual inputs to improve usability, internationalization and validation.
    • Select on a calendar. Pressing the trailing calendar button opens the Calendar component (Create Calendar component #2494) in a dialog.

Definition of done

  • Development completed
  • Reviewers assigned
  • Unit and integration tests
  • Meets minimum browser support
  • Meets accessibility requirements

Copy link

changeset-bot bot commented Aug 9, 2024

🦋 Changeset detected

Latest commit: 804f19f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@sumup-oss/circuit-ui Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

vercel bot commented Aug 9, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
oss-circuit-ui ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 28, 2024 5:58pm

Copy link

codecov bot commented Oct 8, 2024

Codecov Report

Attention: Patch coverage is 91.92886% with 59 lines in your changes missing coverage. Please review.

Project coverage is 87.82%. Comparing base (c16de1a) to head (804f19f).
Report is 3 commits behind head on next.

Files with missing lines Patch % Lines
...ages/circuit-ui/components/DateInput/DateInput.tsx 86.98% 41 Missing ⚠️
packages/circuit-ui/util/helpers.ts 61.90% 8 Missing ⚠️
...cuit-ui/components/DateInput/components/Dialog.tsx 90.32% 6 Missing ⚠️
...ui/components/DateInput/hooks/usePlainDateState.ts 97.12% 4 Missing ⚠️
Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             next    #2645      +/-   ##
==========================================
+ Coverage   87.49%   87.82%   +0.32%     
==========================================
  Files         213      218       +5     
  Lines       11926    12615     +689     
  Branches     1556     1695     +139     
==========================================
+ Hits        10435    11079     +644     
- Misses       1441     1486      +45     
  Partials       50       50              
Files with missing lines Coverage Δ
...cuit-ui/components/CurrencyInput/CurrencyInput.tsx 98.82% <100.00%> (ø)
...ircuit-ui/components/DateInput/DateInputService.ts 100.00% <100.00%> (ø)
...ui/components/DateInput/components/DateSegment.tsx 100.00% <100.00%> (ø)
...t-ui/components/DateInput/hooks/useSegmentFocus.ts 100.00% <100.00%> (ø)
...i/components/PhoneNumberInput/PhoneNumberInput.tsx 89.37% <ø> (ø)
...ages/circuit-ui/hooks/useFocusList/useFocusList.ts 91.30% <100.00%> (-2.03%) ⬇️
packages/circuit-ui/util/date.ts 100.00% <100.00%> (+3.92%) ⬆️
packages/circuit-ui/util/key-codes.ts 100.00% <100.00%> (ø)
...ui/components/DateInput/hooks/usePlainDateState.ts 97.12% <97.12%> (ø)
...cuit-ui/components/DateInput/components/Dialog.tsx 90.32% <90.32%> (ø)
... and 2 more

Copy link
Contributor

github-actions bot commented Oct 12, 2024

Size Change: +7.08 kB (+1.11%)

Total Size: 647 kB

Filename Size Change
packages/circuit-ui/dist/components/CurrencyInput/CurrencyInput.js 910 B +28 B (+3.17%)
packages/circuit-ui/dist/components/DateInput/DateInput.js 2.61 kB +2.03 kB (+353.13%) 🆘
packages/circuit-ui/dist/hooks/useFocusList/useFocusList.js 436 B -24 B (-5.22%)
packages/circuit-ui/dist/style.css 20.9 kB +831 B (+4.15%)
packages/circuit-ui/dist/util/date.js 583 B +198 B (+51.43%) 🆘
packages/circuit-ui/dist/util/helpers.js 699 B +127 B (+22.2%) 🚨
packages/circuit-ui/dist/util/key-codes.js 185 B +29 B (+18.59%) ⚠️
packages/circuit-ui/dist/components/DateInput/components/DateSegment.js 1.13 kB +1.13 kB (new file) 🆕
packages/circuit-ui/dist/components/DateInput/components/Dialog.js 824 B +824 B (new file) 🆕
packages/circuit-ui/dist/components/DateInput/DateInputService.js 333 B +333 B (new file) 🆕
packages/circuit-ui/dist/components/DateInput/hooks/usePlainDateState.js 1.18 kB +1.18 kB (new file) 🆕
packages/circuit-ui/dist/components/DateInput/hooks/useSegmentFocus.js 391 B +391 B (new file) 🆕
ℹ️ View Unchanged
Filename Size
packages/circuit-ui/dist/components/Anchor/Anchor.js 440 B
packages/circuit-ui/dist/components/AspectRatio/AspectRatio.js 427 B
packages/circuit-ui/dist/components/Avatar/Avatar.js 920 B
packages/circuit-ui/dist/components/Badge/Badge.js 451 B
packages/circuit-ui/dist/components/Body/Body.js 706 B
packages/circuit-ui/dist/components/BodyLarge/BodyLarge.js 325 B
packages/circuit-ui/dist/components/Button/base.js 1.2 kB
packages/circuit-ui/dist/components/Button/Button.js 540 B
packages/circuit-ui/dist/components/Button/IconButton.js 710 B
packages/circuit-ui/dist/components/ButtonGroup/ButtonGroup.js 586 B
packages/circuit-ui/dist/components/Calendar/Calendar.js 2.96 kB
packages/circuit-ui/dist/components/Calendar/CalendarService.js 1.66 kB
packages/circuit-ui/dist/components/Card/Card.js 284 B
packages/circuit-ui/dist/components/Card/components/Footer/Footer.js 300 B
packages/circuit-ui/dist/components/Card/components/Header/Header.js 427 B
packages/circuit-ui/dist/components/Carousel/Carousel.js 1.24 kB
packages/circuit-ui/dist/components/Carousel/components/Buttons/Buttons.js 377 B
packages/circuit-ui/dist/components/Carousel/components/Container/Container.js 204 B
packages/circuit-ui/dist/components/Carousel/components/Controls/Controls.js 203 B
packages/circuit-ui/dist/components/Carousel/components/Slide/Slide.js 619 B
packages/circuit-ui/dist/components/Carousel/components/Slide/SlideService.js 350 B
packages/circuit-ui/dist/components/Carousel/components/SlideImage/SlideImage.js 294 B
packages/circuit-ui/dist/components/Carousel/components/Slides/Slides.js 224 B
packages/circuit-ui/dist/components/Carousel/components/Status/Status.js 279 B
packages/circuit-ui/dist/components/Carousel/constants.js 223 B
packages/circuit-ui/dist/components/Carousel/index.js 235 B
packages/circuit-ui/dist/components/Checkbox/Checkbox.js 1.02 kB
packages/circuit-ui/dist/components/Checkbox/IndeterminateIcon.js 270 B
packages/circuit-ui/dist/components/CheckboxGroup/CheckboxGroup.js 904 B
packages/circuit-ui/dist/components/CloseButton/CloseButton.js 286 B
packages/circuit-ui/dist/components/ColorInput/ColorInput.js 1.51 kB
packages/circuit-ui/dist/components/Compact/Compact.js 317 B
packages/circuit-ui/dist/components/ComponentsContext/components/Link/Link.js 191 B
packages/circuit-ui/dist/components/ComponentsContext/ComponentsContext.js 147 B
packages/circuit-ui/dist/components/ComponentsContext/useComponents.js 163 B
packages/circuit-ui/dist/components/CurrencyInput/CurrencyInputService.js 165 B
packages/circuit-ui/dist/components/Display/Display.js 617 B
packages/circuit-ui/dist/components/Field/Field.js 973 B
packages/circuit-ui/dist/components/Field/FieldService.js 173 B
packages/circuit-ui/dist/components/Hamburger/Hamburger.js 786 B
packages/circuit-ui/dist/components/Headline/Headline.js 602 B
packages/circuit-ui/dist/components/Hr/Hr.js 290 B
packages/circuit-ui/dist/components/Image/Image.js 320 B
packages/circuit-ui/dist/components/ImageInput/ImageInput.js 1.66 kB
packages/circuit-ui/dist/components/Input/Input.js 1.03 kB
packages/circuit-ui/dist/components/legacy/Calendar/components/CalendarWrapper/CalendarImportedStyles.js 3.15 kB
packages/circuit-ui/dist/components/legacy/Calendar/components/CalendarWrapper/CalendarWrapper.js 1.53 kB
packages/circuit-ui/dist/components/legacy/Calendar/constants.js 596 B
packages/circuit-ui/dist/components/legacy/Calendar/RangePicker.js 510 B
packages/circuit-ui/dist/components/legacy/Calendar/RangePickerController.js 457 B
packages/circuit-ui/dist/components/legacy/Calendar/SingleDayPicker.js 405 B
packages/circuit-ui/dist/components/legacy/CalendarTag/CalendarTag.js 871 B
packages/circuit-ui/dist/components/legacy/CalendarTagTwoStep/CalendarTagTwoStep.js 1.17 kB
packages/circuit-ui/dist/components/legacy/Grid/Col/Col.js 672 B
packages/circuit-ui/dist/components/legacy/Grid/constants.js 93 B
packages/circuit-ui/dist/components/legacy/Grid/Grid/Grid.js 325 B
packages/circuit-ui/dist/components/legacy/Grid/Row/Row.js 319 B
packages/circuit-ui/dist/components/legacy/Grid/utils.js 499 B
packages/circuit-ui/dist/components/legacy/InlineElements/InlineElements.js 718 B
packages/circuit-ui/dist/components/legacy/Tooltip/Tooltip.js 759 B
packages/circuit-ui/dist/components/List/List.js 476 B
packages/circuit-ui/dist/components/ListItem/ListItem.js 1.12 kB
packages/circuit-ui/dist/components/ListItemGroup/ListItemGroup.js 1.01 kB
packages/circuit-ui/dist/components/Modal/Modal.js 1.13 kB
packages/circuit-ui/dist/components/ModalContext/createUseModal.js 315 B
packages/circuit-ui/dist/components/ModalContext/ModalContext.js 1.29 kB
packages/circuit-ui/dist/components/Notification/constants.js 169 B
packages/circuit-ui/dist/components/NotificationBanner/NotificationBanner.js 1.19 kB
packages/circuit-ui/dist/components/NotificationFullscreen/NotificationFullscreen.js 626 B
packages/circuit-ui/dist/components/NotificationInline/NotificationInline.js 1.1 kB
packages/circuit-ui/dist/components/NotificationModal/NotificationModal.js 1.07 kB
packages/circuit-ui/dist/components/NotificationModal/useNotificationModal.js 137 B
packages/circuit-ui/dist/components/NotificationToast/NotificationToast.js 1.06 kB
packages/circuit-ui/dist/components/Numeral/Numeral.js 294 B
packages/circuit-ui/dist/components/Pagination/components/PageList/PageList.js 470 B
packages/circuit-ui/dist/components/Pagination/components/PageSelect/PageSelect.js 505 B
packages/circuit-ui/dist/components/Pagination/Pagination.js 842 B
packages/circuit-ui/dist/components/Pagination/PaginationService.js 133 B
packages/circuit-ui/dist/components/PercentageInput/PercentageInput.js 805 B
packages/circuit-ui/dist/components/PercentageInput/PercentageInputService.js 165 B
packages/circuit-ui/dist/components/PhoneNumberInput/PhoneNumberInput.js 1.78 kB
packages/circuit-ui/dist/components/PhoneNumberInput/PhoneNumberInputService.js 415 B
packages/circuit-ui/dist/components/Popover/Popover.js 1.99 kB
packages/circuit-ui/dist/components/Portal/Portal.js 221 B
packages/circuit-ui/dist/components/ProgressBar/ProgressBar.js 892 B
packages/circuit-ui/dist/components/RadioButton/RadioButton.js 879 B
packages/circuit-ui/dist/components/RadioButtonGroup/RadioButtonGroup.js 1.02 kB
packages/circuit-ui/dist/components/SearchInput/SearchInput.js 746 B
packages/circuit-ui/dist/components/Select/Select.js 1.15 kB
packages/circuit-ui/dist/components/Selector/Selector.js 1.15 kB
packages/circuit-ui/dist/components/SelectorGroup/SelectorGroup.js 1.09 kB
packages/circuit-ui/dist/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.js 689 B
packages/circuit-ui/dist/components/SideNavigation/components/MobileNavigation/MobileNavigation.js 1.21 kB
packages/circuit-ui/dist/components/SideNavigation/components/PrimaryLink/PrimaryLink.js 997 B
packages/circuit-ui/dist/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.js 868 B
packages/circuit-ui/dist/components/SideNavigation/SideNavigation.js 667 B
packages/circuit-ui/dist/components/SidePanel/components/DesktopSidePanel/DesktopSidePanel.js 440 B
packages/circuit-ui/dist/components/SidePanel/components/Header/Header.js 466 B
packages/circuit-ui/dist/components/SidePanel/components/MobileSidePanel/MobileSidePanel.js 434 B
packages/circuit-ui/dist/components/SidePanel/constants.js 114 B
packages/circuit-ui/dist/components/SidePanel/SidePanel.js 1.17 kB
packages/circuit-ui/dist/components/SidePanel/SidePanelContext.js 1.7 kB
packages/circuit-ui/dist/components/SidePanel/useSidePanel.js 502 B
packages/circuit-ui/dist/components/Skeleton/Skeleton.js 521 B
packages/circuit-ui/dist/components/Spinner/Spinner.js 458 B
packages/circuit-ui/dist/components/StackContext/StackContext.js 133 B
packages/circuit-ui/dist/components/Step/hooks/useStep.js 1.16 kB
packages/circuit-ui/dist/components/Step/Step.js 248 B
packages/circuit-ui/dist/components/Step/StepService.js 625 B
packages/circuit-ui/dist/components/SubHeadline/SubHeadline.js 328 B
packages/circuit-ui/dist/components/Table/components/SortArrow/SortArrow.js 405 B
packages/circuit-ui/dist/components/Table/components/TableBody/TableBody.js 521 B
packages/circuit-ui/dist/components/Table/components/TableCell/TableCell.js 383 B
packages/circuit-ui/dist/components/Table/components/TableHead/TableHead.js 653 B
packages/circuit-ui/dist/components/Table/components/TableHeader/TableHeader.js 650 B
packages/circuit-ui/dist/components/Table/components/TableRow/TableRow.js 260 B
packages/circuit-ui/dist/components/Table/Table.js 1.43 kB
packages/circuit-ui/dist/components/Table/utils.js 675 B
packages/circuit-ui/dist/components/Tabs/components/Tab/Tab.js 406 B
packages/circuit-ui/dist/components/Tabs/components/TabList/TabList.js 499 B
packages/circuit-ui/dist/components/Tabs/components/TabPanel/TabPanel.js 265 B
packages/circuit-ui/dist/components/Tabs/Tabs.js 978 B
packages/circuit-ui/dist/components/Tag/Tag.js 917 B
packages/circuit-ui/dist/components/TextArea/TextArea.js 388 B
packages/circuit-ui/dist/components/TextArea/useAutoExpand.js 576 B
packages/circuit-ui/dist/components/Title/Title.js 295 B
packages/circuit-ui/dist/components/ToastContext/createUseToast.js 256 B
packages/circuit-ui/dist/components/ToastContext/ToastContext.js 944 B
packages/circuit-ui/dist/components/Toggle/Toggle.js 897 B
packages/circuit-ui/dist/components/Toggletip/Toggletip.js 1.82 kB
packages/circuit-ui/dist/components/Tooltip/Tooltip.js 1.56 kB
packages/circuit-ui/dist/components/TopNavigation/components/ProfileMenu/ProfileMenu.js 989 B
packages/circuit-ui/dist/components/TopNavigation/components/UtilityLinks/UtilityLinks.js 633 B
packages/circuit-ui/dist/components/TopNavigation/TopNavigation.js 673 B
packages/circuit-ui/dist/experimental.js 155 B
packages/circuit-ui/dist/hooks/useAnimation/useAnimation.js 311 B
packages/circuit-ui/dist/hooks/useClickOutside/useClickOutside.js 412 B
packages/circuit-ui/dist/hooks/useCollapsible/useCollapsible.js 754 B
packages/circuit-ui/dist/hooks/useComponentSize/useComponentSize.js 472 B
packages/circuit-ui/dist/hooks/useEscapeKey/useEscapeKey.js 278 B
packages/circuit-ui/dist/hooks/useLatest/useLatest.js 211 B
packages/circuit-ui/dist/hooks/useMedia/useMedia.js 254 B
packages/circuit-ui/dist/hooks/usePrevious/usePrevious.js 214 B
packages/circuit-ui/dist/hooks/useStack/useStack.js 620 B
packages/circuit-ui/dist/hooks/useSwipe/useSwipe.js 455 B
packages/circuit-ui/dist/index.js 1.27 kB
packages/circuit-ui/dist/legacy.js 475 B
packages/circuit-ui/dist/styles/clsx.js 126 B
packages/circuit-ui/dist/styles/is-prop-valid.js 114 B
packages/circuit-ui/dist/styles/shared.js 163 B
packages/circuit-ui/dist/styles/style-mixins.js 1.39 kB
packages/circuit-ui/dist/styles/styled.js 100 B
packages/circuit-ui/dist/styles/utility.js 188 B
packages/circuit-ui/dist/util/env.js 166 B
packages/circuit-ui/dist/util/errors.js 658 B
packages/circuit-ui/dist/util/i18n.js 182 B
packages/circuit-ui/dist/util/id.js 127 B
packages/circuit-ui/dist/util/logger.js 237 B
packages/circuit-ui/dist/util/promises.js 93 B
packages/circuit-ui/dist/util/refs.js 176 B
packages/circuit-ui/dist/util/type-check.js 205 B
packages/circuit-ui/dist/vendor/dialog-polyfill/index.js 5.76 kB
packages/design-tokens/dist/cjs/index.js 1.16 kB
packages/design-tokens/dist/cjs/scripts/build.js 1.78 kB
packages/design-tokens/dist/cjs/themes/dark.js 1.55 kB
packages/design-tokens/dist/cjs/themes/fonts.js 1.06 kB
packages/design-tokens/dist/cjs/themes/legacy/light.js 1.51 kB
packages/design-tokens/dist/cjs/themes/light.js 1.62 kB
packages/design-tokens/dist/cjs/themes/schema.js 1.93 kB
packages/design-tokens/dist/cjs/themes/shared.js 1.55 kB
packages/design-tokens/dist/cjs/types/index.js 439 B
packages/design-tokens/dist/cjs/utils/theme-prop-type.js 1.29 kB
packages/design-tokens/dist/es/index.js 676 B
packages/design-tokens/dist/es/scripts/build.js 1.6 kB
packages/design-tokens/dist/es/themes/dark.js 1.49 kB
packages/design-tokens/dist/es/themes/fonts.js 1 kB
packages/design-tokens/dist/es/themes/legacy/light.js 1.4 kB
packages/design-tokens/dist/es/themes/light.js 1.56 kB
packages/design-tokens/dist/es/themes/schema.js 1.87 kB
packages/design-tokens/dist/es/themes/shared.js 1.49 kB
packages/design-tokens/dist/es/types/index.js 392 B
packages/design-tokens/dist/es/utils/theme-prop-type.js 1.14 kB
packages/icons/dist/Accessibility.js 1.19 kB
packages/icons/dist/Account.js 1.39 kB
packages/icons/dist/Accounting.js 1.25 kB
packages/icons/dist/ActivateCard.js 1.47 kB
packages/icons/dist/Active.js 1.09 kB
packages/icons/dist/Add.js 1.2 kB
packages/icons/dist/AddEmployees.js 1.07 kB
packages/icons/dist/AddItems.js 1.02 kB
packages/icons/dist/Alarm.js 1.59 kB
packages/icons/dist/Alelo.js 1.66 kB
packages/icons/dist/Alert.js 1.19 kB
packages/icons/dist/AlternativePaymentMethod.js 1.9 kB
packages/icons/dist/AmericanExpress.js 2.73 kB
packages/icons/dist/Apm.js 1.4 kB
packages/icons/dist/ApplePay.js 2.23 kB
packages/icons/dist/Apps.js 1.26 kB
packages/icons/dist/Archive.js 960 B
packages/icons/dist/Area.js 1.06 kB
packages/icons/dist/ArrowDown.js 1.01 kB
packages/icons/dist/ArrowLeft.js 1.1 kB
packages/icons/dist/ArrowRight.js 1.13 kB
packages/icons/dist/ArrowSlanted.js 1.36 kB
packages/icons/dist/ArrowUp.js 1.01 kB
packages/icons/dist/Article.js 1.39 kB
packages/icons/dist/Atm.js 1.04 kB
packages/icons/dist/Attachment.js 1.14 kB
packages/icons/dist/AutomaticBalanceTransfer.js 1.1 kB
packages/icons/dist/BancoEstado.js 2.53 kB
packages/icons/dist/Bancontact.js 4.64 kB
packages/icons/dist/Bank.js 978 B
packages/icons/dist/Barcode.js 1.06 kB
packages/icons/dist/Basket.js 1.07 kB
packages/icons/dist/Battery.js 1.25 kB
packages/icons/dist/BatteryAlert.js 1.1 kB
packages/icons/dist/Bitcoin.js 1.42 kB
packages/icons/dist/Blik.js 2.3 kB
packages/icons/dist/Bluetooth.js 1.59 kB
packages/icons/dist/Boleto.js 3.08 kB
packages/icons/dist/Briefcase.js 1.11 kB
packages/icons/dist/BrowserSecure.js 1.08 kB
packages/icons/dist/Cafe.js 1.03 kB
packages/icons/dist/Calendar.js 1.01 kB
packages/icons/dist/Callback.js 1.73 kB
packages/icons/dist/Camera.js 1.12 kB
packages/icons/dist/CardIn.js 1.52 kB
packages/icons/dist/CardOut.js 1.47 kB
packages/icons/dist/CardReaderAir.js 1 kB
packages/icons/dist/CardReaderSolo.js 967 B
packages/icons/dist/CardReaderSoloLite.js 1.02 kB
packages/icons/dist/CardSecurity.js 1.08 kB
packages/icons/dist/CardUnknown.js 1.74 kB
packages/icons/dist/Cash.js 1.04 kB
packages/icons/dist/CashAdvance.js 1.14 kB
packages/icons/dist/CashStack.js 1.04 kB
packages/icons/dist/Challenge.js 1.01 kB
packages/icons/dist/Checkmark.js 1.26 kB
packages/icons/dist/Checkout.js 988 B
packages/icons/dist/Cheque.js 1.36 kB
packages/icons/dist/ChevronDown.js 1.08 kB
packages/icons/dist/ChevronLeft.js 1.07 kB
packages/icons/dist/ChevronRight.js 1.08 kB
packages/icons/dist/ChevronUp.js 1.09 kB
packages/icons/dist/Close.js 1.08 kB
packages/icons/dist/Clothing.js 1.16 kB
packages/icons/dist/ColorCorrection.js 1.1 kB
packages/icons/dist/ColorInversion.js 1.11 kB
packages/icons/dist/Company.js 1.02 kB
packages/icons/dist/Conecs.js 2.55 kB
packages/icons/dist/Confirm.js 1.13 kB
packages/icons/dist/ContactPicker.js 1.37 kB
packages/icons/dist/Cookie.js 1.14 kB
packages/icons/dist/CookiePreferences.js 1.19 kB
packages/icons/dist/Copy.js 979 B
packages/icons/dist/CreditNote.js 1.23 kB
packages/icons/dist/Crop.js 978 B
packages/icons/dist/CustomAmount.js 1.32 kB
packages/icons/dist/Customize.js 1.05 kB
packages/icons/dist/Dankort.js 1.17 kB
packages/icons/dist/Delete.js 1.1 kB
packages/icons/dist/DeliveryNote.js 1.45 kB
packages/icons/dist/DinersClub.js 9.19 kB
packages/icons/dist/DirectDebit.js 1.41 kB
packages/icons/dist/Discount.js 1.64 kB
packages/icons/dist/Discover.js 2.54 kB
packages/icons/dist/Download.js 1.33 kB
packages/icons/dist/DownloadCloud.js 1.08 kB
packages/icons/dist/Drag.js 1.14 kB
packages/icons/dist/DriverLicense.js 1.14 kB
packages/icons/dist/Ec.js 2.82 kB
packages/icons/dist/Edit.js 1.23 kB
packages/icons/dist/Eftpos.js 3.82 kB
packages/icons/dist/ElectronicInvoice.js 1.26 kB
packages/icons/dist/Elo.js 2.13 kB
packages/icons/dist/Elv.js 1.48 kB
packages/icons/dist/Email.js 1.02 kB
packages/icons/dist/EmailChat.js 1.06 kB
packages/icons/dist/Employees.js 1.88 kB
packages/icons/dist/Eps.js 4.12 kB
packages/icons/dist/Expenses.js 1.46 kB
packages/icons/dist/ExternalLink.js 1.13 kB
packages/icons/dist/Facebook.js 1.08 kB
packages/icons/dist/FacebookMessenger.js 1.07 kB
packages/icons/dist/FasterPayments.js 2.4 kB
packages/icons/dist/Favorite.js 1.24 kB
packages/icons/dist/FeeCalculator.js 1.07 kB
packages/icons/dist/FeesSummary.js 1.04 kB
packages/icons/dist/File.js 930 B
packages/icons/dist/Filter.js 1.2 kB
packages/icons/dist/FilterApplied.js 1.49 kB
packages/icons/dist/FlagAe.js 1.21 kB
packages/icons/dist/FlagAr.js 3.61 kB
packages/icons/dist/FlagAt.js 1.2 kB
packages/icons/dist/FlagAu.js 1.67 kB
packages/icons/dist/FlagBe.js 1.21 kB
packages/icons/dist/FlagBg.js 1.2 kB
packages/icons/dist/FlagBr.js 1.43 kB
packages/icons/dist/FlagCa.js 1.46 kB
packages/icons/dist/FlagCh.js 1.25 kB
packages/icons/dist/FlagCl.js 1.26 kB
packages/icons/dist/FlagCo.js 1.16 kB
packages/icons/dist/FlagCy.js 2.19 kB
packages/icons/dist/FlagCz.js 1.24 kB
packages/icons/dist/FlagDe.js 1.22 kB
packages/icons/dist/FlagDk.js 1.21 kB
packages/icons/dist/FlagEe.js 1.19 kB
packages/icons/dist/FlagEs.js 1.19 kB
packages/icons/dist/FlagFi.js 1.21 kB
packages/icons/dist/FlagFr.js 1.22 kB
packages/icons/dist/FlagGb.js 1.83 kB
packages/icons/dist/FlagGr.js 1.2 kB
packages/icons/dist/FlagHk.js 1.48 kB
packages/icons/dist/FlagHr.js 3.37 kB
packages/icons/dist/FlagHu.js 1.2 kB
packages/icons/dist/FlagIe.js 1.21 kB
packages/icons/dist/FlagIt.js 1.22 kB
packages/icons/dist/FlagJa.js 1.16 kB
packages/icons/dist/FlagLt.js 1.2 kB
packages/icons/dist/FlagLu.js 1.2 kB
packages/icons/dist/FlagLv.js 1.17 kB
packages/icons/dist/FlagMt.js 1.67 kB
packages/icons/dist/FlagMx.js 1.24 kB
packages/icons/dist/FlagMy.js 1.3 kB
packages/icons/dist/FlagNl.js 1.21 kB
packages/icons/dist/FlagNo.js 1.31 kB
packages/icons/dist/FlagNz.js 1.41 kB
packages/icons/dist/FlagPe.js 1.11 kB
packages/icons/dist/FlagPl.js 1.19 kB
packages/icons/dist/FlagPt.js 1.42 kB
packages/icons/dist/FlagRo.js 1.15 kB
packages/icons/dist/FlagSe.js 1.26 kB
packages/icons/dist/FlagSg.js 1.21 kB
packages/icons/dist/FlagSi.js 1.71 kB
packages/icons/dist/FlagSk.js 1.63 kB
packages/icons/dist/FlagUs.js 2.01 kB
packages/icons/dist/Flashlight.js 1.13 kB
packages/icons/dist/FlashOff.js 1.13 kB
packages/icons/dist/FlashOn.js 1.03 kB
packages/icons/dist/FlipCamera.js 1.44 kB
packages/icons/dist/Freeze.js 1.94 kB
packages/icons/dist/Gauge.js 1.12 kB
packages/icons/dist/GeneralSettings.js 2.25 kB
packages/icons/dist/GiftCard.js 1.03 kB
packages/icons/dist/Giropay.js 2.34 kB
packages/icons/dist/Globe.js 1.31 kB
packages/icons/dist/GooglePay.js 2.43 kB
packages/icons/dist/Grid.js 959 B
packages/icons/dist/HamburgerMenu.js 937 B
packages/icons/dist/Health.js 1.32 kB
packages/icons/dist/Help.js 1.37 kB
packages/icons/dist/Hide.js 1.19 kB
packages/icons/dist/Hiper.js 1.56 kB
packages/icons/dist/Hipercard.js 3.84 kB
packages/icons/dist/History.js 972 B
packages/icons/dist/Home.js 1 kB
packages/icons/dist/Hospitality.js 1.01 kB
packages/icons/dist/Id.js 1.28 kB
packages/icons/dist/Ideal.js 2.31 kB
packages/icons/dist/Image.js 1.07 kB
packages/icons/dist/index.js 2.67 kB
packages/icons/dist/Info.js 1.05 kB
packages/icons/dist/Instagram.js 1.3 kB
packages/icons/dist/Insurance.js 1.07 kB
packages/icons/dist/InterestOnBalance.js 1.07 kB
packages/icons/dist/Inventory.js 1.27 kB
packages/icons/dist/Invoice.js 989 B
packages/icons/dist/Items.js 1.36 kB
packages/icons/dist/Jcb.js 2.58 kB
packages/icons/dist/Key.js 1.16 kB
packages/icons/dist/Klarna.js 1.88 kB
packages/icons/dist/Language.js 1.16 kB
packages/icons/dist/Laptop.js 969 B
packages/icons/dist/Legal.js 1.08 kB
packages/icons/dist/Like.js 951 B
packages/icons/dist/Link.js 1.16 kB
packages/icons/dist/Linkedin.js 1.12 kB
packages/icons/dist/List.js 980 B
packages/icons/dist/LiveChat.js 977 B
packages/icons/dist/Location.js 1.03 kB
packages/icons/dist/Login.js 1 kB
packages/icons/dist/Logout.js 1.01 kB
packages/icons/dist/Loja.js 1.01 kB
packages/icons/dist/Maestro.js 2.63 kB
packages/icons/dist/Manage.js 1.05 kB
packages/icons/dist/Mastercard.js 2.5 kB
packages/icons/dist/Mcc.js 1.13 kB
packages/icons/dist/MealVoucher.js 1.54 kB
packages/icons/dist/Messenger.js 1.11 kB
packages/icons/dist/Minus.js 994 B
packages/icons/dist/MobilePhone.js 962 B
packages/icons/dist/Moon.js 985 B
packages/icons/dist/More.js 931 B
packages/icons/dist/MoreCircle.js 1.67 kB
packages/icons/dist/Mybank.js 2.56 kB
packages/icons/dist/Nfc.js 1.27 kB
packages/icons/dist/NfcPayment.js 2.68 kB
packages/icons/dist/NoCosts.js 1.67 kB
packages/icons/dist/NoSim.js 1.11 kB
packages/icons/dist/NotificationCenter.js 989 B
packages/icons/dist/Notify.js 1.22 kB
packages/icons/dist/NotifyCircle.js 1.07 kB
packages/icons/dist/OnlinePayments.js 1.22 kB
packages/icons/dist/OnlineStore.js 1.03 kB
packages/icons/dist/Orders.js 1.58 kB
packages/icons/dist/Package.js 1.06 kB
packages/icons/dist/PaidOut.js 1.25 kB
packages/icons/dist/Passport.js 993 B
packages/icons/dist/Pause.js 1.18 kB
packages/icons/dist/Paused.js 1.03 kB
packages/icons/dist/PaymentLink.js 1.21 kB
packages/icons/dist/PaymentMethods.js 1.09 kB
packages/icons/dist/Payouts.js 1.69 kB
packages/icons/dist/PayoutSettings.js 2.38 kB
packages/icons/dist/PayPal.js 6.01 kB
packages/icons/dist/Percentage.js 2.17 kB
packages/icons/dist/Phone.js 1.04 kB
packages/icons/dist/PhoneChat.js 1.09 kB
packages/icons/dist/Pinterest.js 1.32 kB
packages/icons/dist/Pix.js 1.69 kB
packages/icons/dist/PixFull.js 4.01 kB
packages/icons/dist/Play.js 1.17 kB
packages/icons/dist/Plus.js 1.04 kB
packages/icons/dist/PostFinance.js 2.35 kB
packages/icons/dist/Printer.js 995 B
packages/icons/dist/PrintFailed.js 1.33 kB
packages/icons/dist/Profile.js 990 B
packages/icons/dist/Promote.js 1.23 kB
packages/icons/dist/Przelewy24.js 2.32 kB
packages/icons/dist/QrCode.js 1.55 kB
packages/icons/dist/Random.js 1.85 kB
packages/icons/dist/Receipt.js 1.2 kB
packages/icons/dist/ReceiptAttached.js 1.23 kB
packages/icons/dist/ReceiptMissing.js 1.19 kB
packages/icons/dist/ReceiptSmart.js 1.34 kB
packages/icons/dist/ReceiptUnreviewed.js 1.15 kB
packages/icons/dist/RecurringInvoice.js 1.22 kB
packages/icons/dist/RedCompra.js 4.45 kB
packages/icons/dist/Refer.js 1.15 kB
packages/icons/dist/ReferAFriend.js 2.13 kB
packages/icons/dist/Refresh.js 1.1 kB
packages/icons/dist/Refunded.js 1.15 kB
packages/icons/dist/Remove.js 921 B
packages/icons/dist/Reports.js 1.21 kB
packages/icons/dist/ResidencePermit.js 1.04 kB
packages/icons/dist/Reward.js 1.1 kB
packages/icons/dist/Sales.js 1.48 kB
packages/icons/dist/SamsungPay.js 2.48 kB
packages/icons/dist/Satispay.js 3.16 kB
packages/icons/dist/Search.js 1.16 kB
packages/icons/dist/Secure.js 1.04 kB
packages/icons/dist/SecurePayments.js 1.01 kB
packages/icons/dist/SelectAll.js 1.47 kB
packages/icons/dist/Send.js 1.27 kB
packages/icons/dist/Sepa.js 1.99 kB
packages/icons/dist/Services.js 1.07 kB
packages/icons/dist/Settings.js 1.22 kB
packages/icons/dist/Share.js 1.1 kB
packages/icons/dist/Shop.js 1.04 kB
packages/icons/dist/SimCard.js 1.04 kB
packages/icons/dist/Sodexo.js 1.96 kB
packages/icons/dist/Sofort.js 2.39 kB
packages/icons/dist/Sort.js 1.68 kB
packages/icons/dist/Sparkles.js 1.76 kB
packages/icons/dist/Stop.js 969 B
packages/icons/dist/Stopped.js 1.03 kB
packages/icons/dist/StoreEditor.js 1.6 kB
packages/icons/dist/SumUpCard.js 958 B
packages/icons/dist/SumUpConnect.js 1.28 kB
packages/icons/dist/SumUpLogo.js 2.13 kB
packages/icons/dist/SumUpLogomark.js 1.07 kB
packages/icons/dist/Sun.js 1.25 kB
packages/icons/dist/Support.js 1.13 kB
packages/icons/dist/Swile.js 3.21 kB
packages/icons/dist/Tablet.js 976 B
packages/icons/dist/TapToPay.js 1.31 kB
packages/icons/dist/Taxes.js 1.34 kB
packages/icons/dist/ThumbDown.js 990 B
packages/icons/dist/ThumbUp.js 993 B
packages/icons/dist/Ticket.js 1.67 kB
packages/icons/dist/Time.js 1.37 kB
packages/icons/dist/Tipping.js 1.01 kB
packages/icons/dist/Transactions.js 1.47 kB
packages/icons/dist/TransferIn.js 1.15 kB
packages/icons/dist/TransferOut.js 1.15 kB
packages/icons/dist/Transit.js 1.46 kB
packages/icons/dist/Truck.js 1.09 kB
packages/icons/dist/Twitter.js 1.03 kB
packages/icons/dist/Unfavorite.js 1.59 kB
packages/icons/dist/UnionPay.js 6.84 kB
packages/icons/dist/Upgrade.js 1.14 kB
packages/icons/dist/Upload.js 1.15 kB
packages/icons/dist/UploadCloud.js 1.1 kB
packages/icons/dist/View.js 1.4 kB
packages/icons/dist/VirtualTerminal.js 974 B
packages/icons/dist/Visa.js 1.8 kB
packages/icons/dist/VisaElectron.js 3.93 kB
packages/icons/dist/Volume.js 1.22 kB
packages/icons/dist/Vpay.js 1.86 kB
packages/icons/dist/Vr.js 1.25 kB
packages/icons/dist/Webspace.js 1.39 kB
packages/icons/dist/WhatsApp.js 1.45 kB
packages/icons/dist/Wifi.js 1.19 kB
packages/icons/dist/WireTransfer.js 1.77 kB
packages/icons/dist/Youtube.js 1.07 kB
packages/icons/dist/ZipFile.js 1.03 kB

compressed-size-action

@connor-baer
Copy link
Member Author

connor-baer commented Oct 25, 2024

I've refactored the internals significantly:

  • I've merged the use(Year|Month|Day)Segment hooks into the usePlainDateState hook which is responsible for all date-related logic now.
  • I've moved all keyboard interaction logic to the DateSegment component, which is a text input with role="spinbutton" now to support more keyboard shortcuts.

}

// Don't allow editing the value when the input is disabled or read-only
if (input.disabled || input.readOnly) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do we need to be explicit about this if the input is disabled ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For some reason, the onKeyDown event handler is still called when the input disabled. Surprised me as well 😳

let newValue: number;

const getValue = (offset: number) =>
value ? shiftInRange(value, offset, min, max) : defaultValue;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏

month: {
value: values.month,
'aria-valuetext': values.month
? [values.month, getMonthName(values.month, locale)].join(', ')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❤️

@@ -45,7 +45,7 @@ import {
type SidePanelContextProps,
} from './SidePanelContext.js';

vi.mock('../../hooks/useMedia');
vi.mock('../../hooks/useMedia/index.js');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why so explicit ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The final ES module spec requires full file paths (ref). I'm surprised that this worked before; I assume Vite does some magic under the hood to support ambiguous file paths.

@connor-baer connor-baer merged commit 4f11234 into next Oct 29, 2024
12 of 13 checks passed
@connor-baer connor-baer deleted the feature/date-input branch October 29, 2024 07:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants