@coopdigital/react 0.49.1 → 0.51.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Button/Button.js +2 -2
- package/dist/components/Button/index.js +5 -0
- package/dist/components/Card/Card.js +4 -4
- package/dist/components/Checkbox/Checkbox.d.ts +7 -1
- package/dist/components/Checkbox/Checkbox.js +4 -0
- package/dist/components/DatePicker/DatePicker.d.ts +61 -0
- package/dist/components/DatePicker/DatePicker.js +135 -0
- package/dist/components/DatePicker/datepicker-utils.d.ts +68 -0
- package/dist/components/DatePicker/datepicker-utils.js +215 -0
- package/dist/components/DatePicker/index.d.ts +4 -0
- package/dist/components/Field/Field.js +29 -26
- package/dist/components/Field/index.js +6 -0
- package/dist/components/Pill/Pill.js +2 -2
- package/dist/components/Popover/Popover.d.ts +74 -0
- package/dist/components/Popover/Popover.js +75 -0
- package/dist/components/Popover/index.d.ts +4 -0
- package/dist/components/Popover/index.js +5 -0
- package/dist/components/Radio/Radio.d.ts +7 -1
- package/dist/components/Radio/Radio.js +4 -0
- package/dist/components/Searchbox/Searchbox.js +4 -3
- package/dist/components/Select/Select.d.ts +3 -0
- package/dist/components/Select/Select.js +4 -1
- package/dist/components/Signpost/Signpost.js +2 -2
- package/dist/components/Tag/Tag.js +2 -2
- package/dist/components/TextInput/TextInput.d.ts +6 -1
- package/dist/components/TextInput/TextInput.js +3 -0
- package/dist/components/Textarea/Textarea.d.ts +8 -5
- package/dist/components/Textarea/Textarea.js +5 -4
- package/dist/hooks/useSlots.js +3 -3
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/node_modules/@date-fns/tz/date/index.js +83 -0
- package/dist/node_modules/@date-fns/tz/date/mini.js +235 -0
- package/dist/node_modules/@date-fns/tz/tzName/index.js +39 -0
- package/dist/node_modules/@date-fns/tz/tzOffset/index.js +44 -0
- package/dist/node_modules/@floating-ui/core/dist/floating-ui.core.js +814 -0
- package/dist/node_modules/@floating-ui/dom/dist/floating-ui.dom.js +751 -0
- package/dist/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js +350 -0
- package/dist/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js +161 -0
- package/dist/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +137 -0
- package/dist/node_modules/@radix-ui/primitive/dist/index.js +11 -0
- package/dist/node_modules/@radix-ui/react-arrow/dist/index.js +25 -0
- package/dist/node_modules/@radix-ui/react-compose-refs/dist/index.js +39 -0
- package/dist/node_modules/@radix-ui/react-context/dist/index.js +63 -0
- package/dist/node_modules/@radix-ui/react-dismissable-layer/dist/index.js +213 -0
- package/dist/node_modules/@radix-ui/react-focus-guards/dist/index.js +31 -0
- package/dist/node_modules/@radix-ui/react-focus-scope/dist/index.js +209 -0
- package/dist/node_modules/@radix-ui/react-id/dist/index.js +15 -0
- package/dist/node_modules/@radix-ui/react-popover/dist/index.js +303 -0
- package/dist/node_modules/@radix-ui/react-popper/dist/index.js +285 -0
- package/dist/node_modules/@radix-ui/react-portal/dist/index.js +19 -0
- package/dist/node_modules/@radix-ui/react-presence/dist/index.js +132 -0
- package/dist/node_modules/@radix-ui/react-primitive/dist/index.js +43 -0
- package/dist/node_modules/@radix-ui/react-slot/dist/index.js +89 -0
- package/dist/node_modules/@radix-ui/react-use-callback-ref/dist/index.js +12 -0
- package/dist/node_modules/@radix-ui/react-use-controllable-state/dist/index.js +70 -0
- package/dist/node_modules/@radix-ui/react-use-escape-keydown/dist/index.js +18 -0
- package/dist/node_modules/@radix-ui/react-use-layout-effect/dist/index.js +7 -0
- package/dist/node_modules/@radix-ui/react-use-size/dist/index.js +40 -0
- package/dist/node_modules/aria-hidden/dist/es2015/index.js +137 -0
- package/dist/node_modules/date-fns/_lib/addLeadingZeros.js +7 -0
- package/dist/node_modules/date-fns/_lib/defaultOptions.js +7 -0
- package/dist/node_modules/date-fns/_lib/format/formatters.js +775 -0
- package/dist/node_modules/date-fns/_lib/format/lightFormatters.js +94 -0
- package/dist/node_modules/date-fns/_lib/format/longFormatters.js +66 -0
- package/dist/node_modules/date-fns/_lib/getTimezoneOffsetInMilliseconds.js +31 -0
- package/dist/node_modules/date-fns/_lib/normalizeDates.js +11 -0
- package/dist/node_modules/date-fns/_lib/normalizeInterval.js +8 -0
- package/dist/node_modules/date-fns/_lib/protectedTokens.js +25 -0
- package/dist/node_modules/date-fns/addDays.js +41 -0
- package/dist/node_modules/date-fns/addMonths.js +75 -0
- package/dist/node_modules/date-fns/addWeeks.js +33 -0
- package/dist/node_modules/date-fns/addYears.js +33 -0
- package/dist/node_modules/date-fns/constants.js +67 -0
- package/dist/node_modules/date-fns/constructFrom.js +49 -0
- package/dist/node_modules/date-fns/differenceInCalendarDays.js +62 -0
- package/dist/node_modules/date-fns/differenceInCalendarMonths.js +42 -0
- package/dist/node_modules/date-fns/eachMonthOfInterval.js +65 -0
- package/dist/node_modules/date-fns/eachYearOfInterval.js +65 -0
- package/dist/node_modules/date-fns/endOfISOWeek.js +35 -0
- package/dist/node_modules/date-fns/endOfMonth.js +37 -0
- package/dist/node_modules/date-fns/endOfWeek.js +53 -0
- package/dist/node_modules/date-fns/endOfYear.js +37 -0
- package/dist/node_modules/date-fns/format.js +423 -0
- package/dist/node_modules/date-fns/getDayOfYear.js +34 -0
- package/dist/node_modules/date-fns/getDaysInMonth.js +36 -0
- package/dist/node_modules/date-fns/getDefaultOptions.js +31 -0
- package/dist/node_modules/date-fns/getISODay.js +33 -0
- package/dist/node_modules/date-fns/getISOWeek.js +40 -0
- package/dist/node_modules/date-fns/getISOWeekYear.js +52 -0
- package/dist/node_modules/date-fns/getMonth.js +29 -0
- package/dist/node_modules/date-fns/getWeek.js +54 -0
- package/dist/node_modules/date-fns/getWeekYear.js +75 -0
- package/dist/node_modules/date-fns/getYear.js +29 -0
- package/dist/node_modules/date-fns/isAfter.js +25 -0
- package/dist/node_modules/date-fns/isBefore.js +25 -0
- package/dist/node_modules/date-fns/isDate.js +41 -0
- package/dist/node_modules/date-fns/isSameDay.js +46 -0
- package/dist/node_modules/date-fns/isSameMonth.js +43 -0
- package/dist/node_modules/date-fns/isSameYear.js +35 -0
- package/dist/node_modules/date-fns/isValid.js +39 -0
- package/dist/node_modules/date-fns/locale/_lib/buildFormatLongFn.js +10 -0
- package/dist/node_modules/date-fns/locale/_lib/buildLocalizeFn.js +64 -0
- package/dist/node_modules/date-fns/locale/_lib/buildMatchFn.js +59 -0
- package/dist/node_modules/date-fns/locale/_lib/buildMatchPatternFn.js +22 -0
- package/dist/node_modules/date-fns/locale/en-US/_lib/formatDistance.js +103 -0
- package/dist/node_modules/date-fns/locale/en-US/_lib/formatLong.js +41 -0
- package/dist/node_modules/date-fns/locale/en-US/_lib/formatRelative.js +13 -0
- package/dist/node_modules/date-fns/locale/en-US/_lib/localize.js +189 -0
- package/dist/node_modules/date-fns/locale/en-US/_lib/match.js +134 -0
- package/dist/node_modules/date-fns/locale/en-US.js +28 -0
- package/dist/node_modules/date-fns/max.js +49 -0
- package/dist/node_modules/date-fns/min.js +49 -0
- package/dist/node_modules/date-fns/parse/_lib/Parser.js +27 -0
- package/dist/node_modules/date-fns/parse/_lib/Setter.js +59 -0
- package/dist/node_modules/date-fns/parse/_lib/constants.js +33 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/AMPMMidnightParser.js +55 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/AMPMParser.js +55 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/DateParser.js +59 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/DayOfYearParser.js +57 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/DayParser.js +64 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/DayPeriodParser.js +56 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/EraParser.js +41 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/ExtendedYearParser.js +24 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/FractionOfSecondParser.js +21 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/Hour0To11Parser.js +36 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/Hour0to23Parser.js +31 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/Hour1To24Parser.js +32 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/Hour1to12Parser.js +38 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/ISODayParser.js +118 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/ISOTimezoneParser.js +47 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/ISOTimezoneWithZParser.js +47 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/ISOWeekParser.js +48 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/ISOWeekYearParser.js +44 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/LocalDayParser.js +96 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/LocalWeekParser.js +47 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/LocalWeekYearParser.js +76 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/MinuteParser.js +31 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/MonthParser.js +86 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/QuarterParser.js +83 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/SecondParser.js +31 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/StandAloneLocalDayParser.js +97 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/StandAloneMonthParser.js +86 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/StandAloneQuarterParser.js +83 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/TimestampMillisecondsParser.js +19 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/TimestampSecondsParser.js +19 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers/YearParser.js +62 -0
- package/dist/node_modules/date-fns/parse/_lib/parsers.js +110 -0
- package/dist/node_modules/date-fns/parse/_lib/utils.js +135 -0
- package/dist/node_modules/date-fns/parse.js +497 -0
- package/dist/node_modules/date-fns/setDay.js +59 -0
- package/dist/node_modules/date-fns/setISODay.js +40 -0
- package/dist/node_modules/date-fns/setISOWeek.js +39 -0
- package/dist/node_modules/date-fns/setMonth.js +46 -0
- package/dist/node_modules/date-fns/setWeek.js +53 -0
- package/dist/node_modules/date-fns/setYear.js +40 -0
- package/dist/node_modules/date-fns/startOfDay.js +35 -0
- package/dist/node_modules/date-fns/startOfISOWeek.js +35 -0
- package/dist/node_modules/date-fns/startOfISOWeekYear.js +42 -0
- package/dist/node_modules/date-fns/startOfMonth.js +37 -0
- package/dist/node_modules/date-fns/startOfWeek.js +53 -0
- package/dist/node_modules/date-fns/startOfWeekYear.js +64 -0
- package/dist/node_modules/date-fns/startOfYear.js +36 -0
- package/dist/node_modules/date-fns/toDate.js +46 -0
- package/dist/node_modules/date-fns/transpose.js +52 -0
- package/dist/node_modules/get-nonce/dist/es2015/index.js +8 -0
- package/dist/node_modules/react-day-picker/dist/esm/DayPicker.js +320 -0
- package/dist/node_modules/react-day-picker/dist/esm/UI.js +122 -0
- package/dist/node_modules/react-day-picker/dist/esm/classes/CalendarDay.js +33 -0
- package/dist/node_modules/react-day-picker/dist/esm/classes/CalendarMonth.js +14 -0
- package/dist/node_modules/react-day-picker/dist/esm/classes/CalendarWeek.js +13 -0
- package/dist/node_modules/react-day-picker/dist/esm/classes/DateLib.js +604 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/Button.js +13 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/CaptionLabel.js +13 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/Chevron.js +20 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/Day.js +18 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/DayButton.js +19 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/Dropdown.js +21 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/DropdownNav.js +13 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/Footer.js +13 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/Month.js +15 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/MonthCaption.js +14 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/MonthGrid.js +13 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/Months.js +13 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/MonthsDropdown.js +15 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/Nav.js +31 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/NextMonthButton.js +15 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/Option.js +13 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/PreviousMonthButton.js +15 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/Root.js +14 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/Select.js +13 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/Week.js +14 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/WeekNumber.js +14 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/WeekNumberHeader.js +13 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/Weekday.js +13 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/Weekdays.js +14 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/Weeks.js +13 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/YearsDropdown.js +15 -0
- package/dist/node_modules/react-day-picker/dist/esm/components/custom-components.js +26 -0
- package/dist/node_modules/react-day-picker/dist/esm/formatters/formatCaption.js +26 -0
- package/dist/node_modules/react-day-picker/dist/esm/formatters/formatDay.js +19 -0
- package/dist/node_modules/react-day-picker/dist/esm/formatters/formatMonthDropdown.js +18 -0
- package/dist/node_modules/react-day-picker/dist/esm/formatters/formatWeekNumber.js +21 -0
- package/dist/node_modules/react-day-picker/dist/esm/formatters/formatWeekNumberHeader.js +13 -0
- package/dist/node_modules/react-day-picker/dist/esm/formatters/formatWeekdayName.js +19 -0
- package/dist/node_modules/react-day-picker/dist/esm/formatters/formatYearDropdown.js +23 -0
- package/dist/node_modules/react-day-picker/dist/esm/formatters/index.js +7 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/calculateFocusTarget.js +73 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/createGetModifiers.js +95 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/endOfBroadcastWeek.js +22 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/getBroadcastWeeksInMonth.js +28 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/getClassNamesForModifiers.js +33 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/getComponents.js +20 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/getDataAttributes.js +27 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/getDates.js +59 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/getDays.js +19 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/getDefaultClassNames.js +33 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/getDisplayMonths.js +24 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/getFocusableDate.js +46 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/getFormatters.js +24 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/getInitialMonth.js +27 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/getLabels.js +53 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/getMonthOptions.js +33 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/getMonths.js +69 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/getNavMonth.js +51 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/getNextFocus.js +40 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/getNextMonth.js +36 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/getPreviousMonth.js +37 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/getStyleForModifiers.js +27 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/getWeekdays.js +26 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/getWeeks.js +14 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/getYearOptions.js +36 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/startOfBroadcastWeek.js +27 -0
- package/dist/node_modules/react-day-picker/dist/esm/helpers/useControlledValue.js +31 -0
- package/dist/node_modules/react-day-picker/dist/esm/labels/index.js +11 -0
- package/dist/node_modules/react-day-picker/dist/esm/labels/labelDayButton.js +32 -0
- package/dist/node_modules/react-day-picker/dist/esm/labels/labelGrid.js +25 -0
- package/dist/node_modules/react-day-picker/dist/esm/labels/labelGridcell.js +22 -0
- package/dist/node_modules/react-day-picker/dist/esm/labels/labelMonthDropdown.js +14 -0
- package/dist/node_modules/react-day-picker/dist/esm/labels/labelNav.js +13 -0
- package/dist/node_modules/react-day-picker/dist/esm/labels/labelNext.js +16 -0
- package/dist/node_modules/react-day-picker/dist/esm/labels/labelPrevious.js +15 -0
- package/dist/node_modules/react-day-picker/dist/esm/labels/labelWeekNumber.js +15 -0
- package/dist/node_modules/react-day-picker/dist/esm/labels/labelWeekNumberHeader.js +14 -0
- package/dist/node_modules/react-day-picker/dist/esm/labels/labelWeekday.js +18 -0
- package/dist/node_modules/react-day-picker/dist/esm/labels/labelYearDropdown.js +14 -0
- package/dist/node_modules/react-day-picker/dist/esm/locale/en-US.js +67 -0
- package/dist/node_modules/react-day-picker/dist/esm/selection/useMulti.js +57 -0
- package/dist/node_modules/react-day-picker/dist/esm/selection/useRange.js +45 -0
- package/dist/node_modules/react-day-picker/dist/esm/selection/useSingle.js +44 -0
- package/dist/node_modules/react-day-picker/dist/esm/useAnimation.js +174 -0
- package/dist/node_modules/react-day-picker/dist/esm/useCalendar.js +113 -0
- package/dist/node_modules/react-day-picker/dist/esm/useDayPicker.js +25 -0
- package/dist/node_modules/react-day-picker/dist/esm/useFocus.js +56 -0
- package/dist/node_modules/react-day-picker/dist/esm/useSelection.js +31 -0
- package/dist/node_modules/react-day-picker/dist/esm/utils/addToRange.js +95 -0
- package/dist/node_modules/react-day-picker/dist/esm/utils/convertMatchersToTimeZone.js +57 -0
- package/dist/node_modules/react-day-picker/dist/esm/utils/dateMatchModifiers.js +62 -0
- package/dist/node_modules/react-day-picker/dist/esm/utils/rangeContainsDayOfWeek.js +30 -0
- package/dist/node_modules/react-day-picker/dist/esm/utils/rangeContainsModifiers.js +74 -0
- package/dist/node_modules/react-day-picker/dist/esm/utils/rangeIncludesDate.js +35 -0
- package/dist/node_modules/react-day-picker/dist/esm/utils/rangeOverlaps.js +21 -0
- package/dist/node_modules/react-day-picker/dist/esm/utils/toTimeZone.js +16 -0
- package/dist/node_modules/react-day-picker/dist/esm/utils/typeguards.js +66 -0
- package/dist/node_modules/react-remove-scroll/dist/es2015/Combination.js +9 -0
- package/dist/node_modules/react-remove-scroll/dist/es2015/SideEffect.js +167 -0
- package/dist/node_modules/react-remove-scroll/dist/es2015/UI.js +38 -0
- package/dist/node_modules/react-remove-scroll/dist/es2015/aggresiveCapture.js +21 -0
- package/dist/node_modules/react-remove-scroll/dist/es2015/handleScroll.js +110 -0
- package/dist/node_modules/react-remove-scroll/dist/es2015/medium.js +5 -0
- package/dist/node_modules/react-remove-scroll/dist/es2015/sidecar.js +7 -0
- package/dist/node_modules/react-remove-scroll-bar/dist/es2015/component.js +56 -0
- package/dist/node_modules/react-remove-scroll-bar/dist/es2015/constants.js +10 -0
- package/dist/node_modules/react-remove-scroll-bar/dist/es2015/utils.js +31 -0
- package/dist/node_modules/react-style-singleton/dist/es2015/component.js +19 -0
- package/dist/node_modules/react-style-singleton/dist/es2015/hook.js +25 -0
- package/dist/node_modules/react-style-singleton/dist/es2015/singleton.js +51 -0
- package/dist/node_modules/tslib/tslib.es6.js +56 -0
- package/dist/node_modules/use-callback-ref/dist/es2015/assignRef.js +24 -0
- package/dist/node_modules/use-callback-ref/dist/es2015/useMergeRef.js +48 -0
- package/dist/node_modules/use-callback-ref/dist/es2015/useRef.js +42 -0
- package/dist/node_modules/use-sidecar/dist/es2015/exports.js +21 -0
- package/dist/node_modules/use-sidecar/dist/es2015/medium.js +77 -0
- package/dist/types/index.d.ts +10 -0
- package/package.json +11 -7
- package/src/components/Checkbox/Checkbox.tsx +6 -1
- package/src/components/DatePicker/DatePicker.tsx +372 -0
- package/src/components/DatePicker/datepicker-utils.ts +269 -0
- package/src/components/DatePicker/index.ts +5 -0
- package/src/components/Field/Field.tsx +30 -28
- package/src/components/Popover/Popover.tsx +198 -0
- package/src/components/Popover/index.ts +5 -0
- package/src/components/Radio/Radio.tsx +6 -1
- package/src/components/Searchbox/Searchbox.tsx +4 -1
- package/src/components/Select/Select.tsx +7 -2
- package/src/components/TextInput/TextInput.tsx +5 -1
- package/src/components/Textarea/Textarea.tsx +9 -13
- package/src/index.ts +2 -0
- package/src/types/index.ts +15 -0
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { constructFrom } from './constructFrom.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @name transpose
|
|
5
|
+
* @category Generic Helpers
|
|
6
|
+
* @summary Transpose the date to the given constructor.
|
|
7
|
+
*
|
|
8
|
+
* @description
|
|
9
|
+
* The function transposes the date to the given constructor. It helps you
|
|
10
|
+
* to transpose the date in the system time zone to say `UTCDate` or any other
|
|
11
|
+
* date extension.
|
|
12
|
+
*
|
|
13
|
+
* @typeParam InputDate - The input `Date` type derived from the passed argument.
|
|
14
|
+
* @typeParam ResultDate - The result `Date` type derived from the passed constructor.
|
|
15
|
+
*
|
|
16
|
+
* @param date - The date to use values from
|
|
17
|
+
* @param constructor - The date constructor to use
|
|
18
|
+
*
|
|
19
|
+
* @returns Date transposed to the given constructor
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* // Create July 10, 2022 00:00 in locale time zone
|
|
23
|
+
* const date = new Date(2022, 6, 10)
|
|
24
|
+
* //=> 'Sun Jul 10 2022 00:00:00 GMT+0800 (Singapore Standard Time)'
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* // Transpose the date to July 10, 2022 00:00 in UTC
|
|
28
|
+
* transpose(date, UTCDate)
|
|
29
|
+
* //=> 'Sun Jul 10 2022 00:00:00 GMT+0000 (Coordinated Universal Time)'
|
|
30
|
+
*/
|
|
31
|
+
function transpose(date, constructor) {
|
|
32
|
+
const date_ = isConstructor(constructor)
|
|
33
|
+
? new constructor(0)
|
|
34
|
+
: constructFrom(constructor, 0);
|
|
35
|
+
date_.setFullYear(date.getFullYear(), date.getMonth(), date.getDate());
|
|
36
|
+
date_.setHours(
|
|
37
|
+
date.getHours(),
|
|
38
|
+
date.getMinutes(),
|
|
39
|
+
date.getSeconds(),
|
|
40
|
+
date.getMilliseconds(),
|
|
41
|
+
);
|
|
42
|
+
return date_;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
function isConstructor(constructor) {
|
|
46
|
+
return (
|
|
47
|
+
typeof constructor === "function" &&
|
|
48
|
+
constructor.prototype?.constructor === constructor
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
export { transpose as default, transpose };
|
|
@@ -0,0 +1,320 @@
|
|
|
1
|
+
import React__default, { useMemo, useCallback, useRef } from 'react';
|
|
2
|
+
import { DateLib } from './classes/DateLib.js';
|
|
3
|
+
import { createGetModifiers } from './helpers/createGetModifiers.js';
|
|
4
|
+
import { getClassNamesForModifiers } from './helpers/getClassNamesForModifiers.js';
|
|
5
|
+
import { getComponents } from './helpers/getComponents.js';
|
|
6
|
+
import { getDataAttributes } from './helpers/getDataAttributes.js';
|
|
7
|
+
import { getDefaultClassNames } from './helpers/getDefaultClassNames.js';
|
|
8
|
+
import { getFormatters } from './helpers/getFormatters.js';
|
|
9
|
+
import { getLabels } from './helpers/getLabels.js';
|
|
10
|
+
import { getMonthOptions } from './helpers/getMonthOptions.js';
|
|
11
|
+
import { getStyleForModifiers } from './helpers/getStyleForModifiers.js';
|
|
12
|
+
import { getWeekdays } from './helpers/getWeekdays.js';
|
|
13
|
+
import { getYearOptions } from './helpers/getYearOptions.js';
|
|
14
|
+
import { UI, DayFlag, SelectionState } from './UI.js';
|
|
15
|
+
import { useAnimation } from './useAnimation.js';
|
|
16
|
+
import { useCalendar } from './useCalendar.js';
|
|
17
|
+
import { dayPickerContext } from './useDayPicker.js';
|
|
18
|
+
import { useFocus } from './useFocus.js';
|
|
19
|
+
import { useSelection } from './useSelection.js';
|
|
20
|
+
import { convertMatchersToTimeZone } from './utils/convertMatchersToTimeZone.js';
|
|
21
|
+
import { rangeIncludesDate } from './utils/rangeIncludesDate.js';
|
|
22
|
+
import { toTimeZone } from './utils/toTimeZone.js';
|
|
23
|
+
import { isDateRange } from './utils/typeguards.js';
|
|
24
|
+
import { enUS } from './locale/en-US.js';
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Renders the DayPicker calendar component.
|
|
28
|
+
*
|
|
29
|
+
* @param initialProps - The props for the DayPicker component.
|
|
30
|
+
* @returns The rendered DayPicker component.
|
|
31
|
+
* @group DayPicker
|
|
32
|
+
* @see https://daypicker.dev
|
|
33
|
+
*/
|
|
34
|
+
function DayPicker(initialProps) {
|
|
35
|
+
let props = initialProps;
|
|
36
|
+
const timeZone = props.timeZone;
|
|
37
|
+
if (timeZone) {
|
|
38
|
+
props = {
|
|
39
|
+
...initialProps,
|
|
40
|
+
timeZone,
|
|
41
|
+
};
|
|
42
|
+
if (props.today) {
|
|
43
|
+
props.today = toTimeZone(props.today, timeZone);
|
|
44
|
+
}
|
|
45
|
+
if (props.month) {
|
|
46
|
+
props.month = toTimeZone(props.month, timeZone);
|
|
47
|
+
}
|
|
48
|
+
if (props.defaultMonth) {
|
|
49
|
+
props.defaultMonth = toTimeZone(props.defaultMonth, timeZone);
|
|
50
|
+
}
|
|
51
|
+
if (props.startMonth) {
|
|
52
|
+
props.startMonth = toTimeZone(props.startMonth, timeZone);
|
|
53
|
+
}
|
|
54
|
+
if (props.endMonth) {
|
|
55
|
+
props.endMonth = toTimeZone(props.endMonth, timeZone);
|
|
56
|
+
}
|
|
57
|
+
if (props.mode === "single" && props.selected) {
|
|
58
|
+
props.selected = toTimeZone(props.selected, timeZone);
|
|
59
|
+
}
|
|
60
|
+
else if (props.mode === "multiple" && props.selected) {
|
|
61
|
+
props.selected = props.selected?.map((date) => toTimeZone(date, timeZone));
|
|
62
|
+
}
|
|
63
|
+
else if (props.mode === "range" && props.selected) {
|
|
64
|
+
props.selected = {
|
|
65
|
+
from: props.selected.from
|
|
66
|
+
? toTimeZone(props.selected.from, timeZone)
|
|
67
|
+
: props.selected.from,
|
|
68
|
+
to: props.selected.to
|
|
69
|
+
? toTimeZone(props.selected.to, timeZone)
|
|
70
|
+
: props.selected.to,
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
if (props.disabled !== undefined) {
|
|
74
|
+
props.disabled = convertMatchersToTimeZone(props.disabled, timeZone);
|
|
75
|
+
}
|
|
76
|
+
if (props.hidden !== undefined) {
|
|
77
|
+
props.hidden = convertMatchersToTimeZone(props.hidden, timeZone);
|
|
78
|
+
}
|
|
79
|
+
if (props.modifiers) {
|
|
80
|
+
const nextModifiers = {};
|
|
81
|
+
Object.keys(props.modifiers).forEach((key) => {
|
|
82
|
+
nextModifiers[key] = convertMatchersToTimeZone(props.modifiers?.[key], timeZone);
|
|
83
|
+
});
|
|
84
|
+
props.modifiers = nextModifiers;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
const { components, formatters, labels, dateLib, locale, classNames } = useMemo(() => {
|
|
88
|
+
const locale = { ...enUS, ...props.locale };
|
|
89
|
+
const dateLib = new DateLib({
|
|
90
|
+
locale,
|
|
91
|
+
weekStartsOn: props.broadcastCalendar ? 1 : props.weekStartsOn,
|
|
92
|
+
firstWeekContainsDate: props.firstWeekContainsDate,
|
|
93
|
+
useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
|
|
94
|
+
useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens,
|
|
95
|
+
timeZone: props.timeZone,
|
|
96
|
+
numerals: props.numerals,
|
|
97
|
+
}, props.dateLib);
|
|
98
|
+
return {
|
|
99
|
+
dateLib,
|
|
100
|
+
components: getComponents(props.components),
|
|
101
|
+
formatters: getFormatters(props.formatters),
|
|
102
|
+
labels: getLabels(props.labels, dateLib.options),
|
|
103
|
+
locale,
|
|
104
|
+
classNames: { ...getDefaultClassNames(), ...props.classNames },
|
|
105
|
+
};
|
|
106
|
+
}, [
|
|
107
|
+
props.locale,
|
|
108
|
+
props.broadcastCalendar,
|
|
109
|
+
props.weekStartsOn,
|
|
110
|
+
props.firstWeekContainsDate,
|
|
111
|
+
props.useAdditionalWeekYearTokens,
|
|
112
|
+
props.useAdditionalDayOfYearTokens,
|
|
113
|
+
props.timeZone,
|
|
114
|
+
props.numerals,
|
|
115
|
+
props.dateLib,
|
|
116
|
+
props.components,
|
|
117
|
+
props.formatters,
|
|
118
|
+
props.labels,
|
|
119
|
+
props.classNames,
|
|
120
|
+
]);
|
|
121
|
+
if (!props.today) {
|
|
122
|
+
props = { ...props, today: dateLib.today() };
|
|
123
|
+
}
|
|
124
|
+
const { captionLayout, mode, navLayout, numberOfMonths = 1, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onDayMouseEnter, onDayMouseLeave, onNextClick, onPrevClick, showWeekNumber, styles, } = props;
|
|
125
|
+
const { formatCaption, formatDay, formatMonthDropdown, formatWeekNumber, formatWeekNumberHeader, formatWeekdayName, formatYearDropdown, } = formatters;
|
|
126
|
+
const calendar = useCalendar(props, dateLib);
|
|
127
|
+
const { days, months, navStart, navEnd, previousMonth, nextMonth, goToMonth, } = calendar;
|
|
128
|
+
const getModifiers = createGetModifiers(days, props, navStart, navEnd, dateLib);
|
|
129
|
+
const { isSelected, select, selected: selectedValue, } = useSelection(props, dateLib) ?? {};
|
|
130
|
+
const { blur, focused, isFocusTarget, moveFocus, setFocused } = useFocus(props, calendar, getModifiers, isSelected ?? (() => false), dateLib);
|
|
131
|
+
const { labelDayButton, labelGridcell, labelGrid, labelMonthDropdown, labelNav, labelPrevious, labelNext, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown, } = labels;
|
|
132
|
+
const weekdays = useMemo(() => getWeekdays(dateLib, props.ISOWeek, props.broadcastCalendar, props.today), [dateLib, props.ISOWeek, props.broadcastCalendar, props.today]);
|
|
133
|
+
const isInteractive = mode !== undefined || onDayClick !== undefined;
|
|
134
|
+
const handlePreviousClick = useCallback(() => {
|
|
135
|
+
if (!previousMonth)
|
|
136
|
+
return;
|
|
137
|
+
goToMonth(previousMonth);
|
|
138
|
+
onPrevClick?.(previousMonth);
|
|
139
|
+
}, [previousMonth, goToMonth, onPrevClick]);
|
|
140
|
+
const handleNextClick = useCallback(() => {
|
|
141
|
+
if (!nextMonth)
|
|
142
|
+
return;
|
|
143
|
+
goToMonth(nextMonth);
|
|
144
|
+
onNextClick?.(nextMonth);
|
|
145
|
+
}, [goToMonth, nextMonth, onNextClick]);
|
|
146
|
+
const handleDayClick = useCallback((day, m) => (e) => {
|
|
147
|
+
e.preventDefault();
|
|
148
|
+
e.stopPropagation();
|
|
149
|
+
setFocused(day);
|
|
150
|
+
if (m.disabled) {
|
|
151
|
+
return;
|
|
152
|
+
}
|
|
153
|
+
select?.(day.date, m, e);
|
|
154
|
+
onDayClick?.(day.date, m, e);
|
|
155
|
+
}, [select, onDayClick, setFocused]);
|
|
156
|
+
const handleDayFocus = useCallback((day, m) => (e) => {
|
|
157
|
+
setFocused(day);
|
|
158
|
+
onDayFocus?.(day.date, m, e);
|
|
159
|
+
}, [onDayFocus, setFocused]);
|
|
160
|
+
const handleDayBlur = useCallback((day, m) => (e) => {
|
|
161
|
+
blur();
|
|
162
|
+
onDayBlur?.(day.date, m, e);
|
|
163
|
+
}, [blur, onDayBlur]);
|
|
164
|
+
const handleDayKeyDown = useCallback((day, modifiers) => (e) => {
|
|
165
|
+
const keyMap = {
|
|
166
|
+
ArrowLeft: [
|
|
167
|
+
e.shiftKey ? "month" : "day",
|
|
168
|
+
props.dir === "rtl" ? "after" : "before",
|
|
169
|
+
],
|
|
170
|
+
ArrowRight: [
|
|
171
|
+
e.shiftKey ? "month" : "day",
|
|
172
|
+
props.dir === "rtl" ? "before" : "after",
|
|
173
|
+
],
|
|
174
|
+
ArrowDown: [e.shiftKey ? "year" : "week", "after"],
|
|
175
|
+
ArrowUp: [e.shiftKey ? "year" : "week", "before"],
|
|
176
|
+
PageUp: [e.shiftKey ? "year" : "month", "before"],
|
|
177
|
+
PageDown: [e.shiftKey ? "year" : "month", "after"],
|
|
178
|
+
Home: ["startOfWeek", "before"],
|
|
179
|
+
End: ["endOfWeek", "after"],
|
|
180
|
+
};
|
|
181
|
+
if (keyMap[e.key]) {
|
|
182
|
+
e.preventDefault();
|
|
183
|
+
e.stopPropagation();
|
|
184
|
+
const [moveBy, moveDir] = keyMap[e.key];
|
|
185
|
+
moveFocus(moveBy, moveDir);
|
|
186
|
+
}
|
|
187
|
+
onDayKeyDown?.(day.date, modifiers, e);
|
|
188
|
+
}, [moveFocus, onDayKeyDown, props.dir]);
|
|
189
|
+
const handleDayMouseEnter = useCallback((day, modifiers) => (e) => {
|
|
190
|
+
onDayMouseEnter?.(day.date, modifiers, e);
|
|
191
|
+
}, [onDayMouseEnter]);
|
|
192
|
+
const handleDayMouseLeave = useCallback((day, modifiers) => (e) => {
|
|
193
|
+
onDayMouseLeave?.(day.date, modifiers, e);
|
|
194
|
+
}, [onDayMouseLeave]);
|
|
195
|
+
const handleMonthChange = useCallback((date) => (e) => {
|
|
196
|
+
const selectedMonth = Number(e.target.value);
|
|
197
|
+
const month = dateLib.setMonth(dateLib.startOfMonth(date), selectedMonth);
|
|
198
|
+
goToMonth(month);
|
|
199
|
+
}, [dateLib, goToMonth]);
|
|
200
|
+
const handleYearChange = useCallback((date) => (e) => {
|
|
201
|
+
const selectedYear = Number(e.target.value);
|
|
202
|
+
const month = dateLib.setYear(dateLib.startOfMonth(date), selectedYear);
|
|
203
|
+
goToMonth(month);
|
|
204
|
+
}, [dateLib, goToMonth]);
|
|
205
|
+
const { className, style } = useMemo(() => ({
|
|
206
|
+
className: [classNames[UI.Root], props.className]
|
|
207
|
+
.filter(Boolean)
|
|
208
|
+
.join(" "),
|
|
209
|
+
style: { ...styles?.[UI.Root], ...props.style },
|
|
210
|
+
}), [classNames, props.className, props.style, styles]);
|
|
211
|
+
const dataAttributes = getDataAttributes(props);
|
|
212
|
+
const rootElRef = useRef(null);
|
|
213
|
+
useAnimation(rootElRef, Boolean(props.animate), {
|
|
214
|
+
classNames,
|
|
215
|
+
months,
|
|
216
|
+
focused,
|
|
217
|
+
dateLib,
|
|
218
|
+
});
|
|
219
|
+
const contextValue = {
|
|
220
|
+
dayPickerProps: props,
|
|
221
|
+
selected: selectedValue,
|
|
222
|
+
select: select,
|
|
223
|
+
isSelected,
|
|
224
|
+
months,
|
|
225
|
+
nextMonth,
|
|
226
|
+
previousMonth,
|
|
227
|
+
goToMonth,
|
|
228
|
+
getModifiers,
|
|
229
|
+
components,
|
|
230
|
+
classNames,
|
|
231
|
+
styles,
|
|
232
|
+
labels,
|
|
233
|
+
formatters,
|
|
234
|
+
};
|
|
235
|
+
return (React__default.createElement(dayPickerContext.Provider, { value: contextValue },
|
|
236
|
+
React__default.createElement(components.Root, { rootRef: props.animate ? rootElRef : undefined, className: className, style: style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], ...dataAttributes },
|
|
237
|
+
React__default.createElement(components.Months, { className: classNames[UI.Months], style: styles?.[UI.Months] },
|
|
238
|
+
!props.hideNavigation && !navLayout && (React__default.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI.Nav], style: styles?.[UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
|
|
239
|
+
months.map((calendarMonth, displayIndex) => {
|
|
240
|
+
return (React__default.createElement(components.Month, { "data-animated-month": props.animate ? "true" : undefined, className: classNames[UI.Month], style: styles?.[UI.Month],
|
|
241
|
+
// biome-ignore lint/suspicious/noArrayIndexKey: breaks animation
|
|
242
|
+
key: displayIndex, displayIndex: displayIndex, calendarMonth: calendarMonth },
|
|
243
|
+
navLayout === "around" &&
|
|
244
|
+
!props.hideNavigation &&
|
|
245
|
+
displayIndex === 0 && (React__default.createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, "aria-disabled": previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: handlePreviousClick, "data-animated-button": props.animate ? "true" : undefined },
|
|
246
|
+
React__default.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" }))),
|
|
247
|
+
React__default.createElement(components.MonthCaption, { "data-animated-caption": props.animate ? "true" : undefined, className: classNames[UI.MonthCaption], style: styles?.[UI.MonthCaption], calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (React__default.createElement(components.DropdownNav, { className: classNames[UI.Dropdowns], style: styles?.[UI.Dropdowns] },
|
|
248
|
+
(() => {
|
|
249
|
+
const monthControl = captionLayout === "dropdown" ||
|
|
250
|
+
captionLayout === "dropdown-months" ? (React__default.createElement(components.MonthsDropdown, { key: "month", className: classNames[UI.MonthsDropdown], "aria-label": labelMonthDropdown(), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, dateLib), style: styles?.[UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) })) : (React__default.createElement("span", { key: "month" }, formatMonthDropdown(calendarMonth.date, dateLib)));
|
|
251
|
+
const yearControl = captionLayout === "dropdown" ||
|
|
252
|
+
captionLayout === "dropdown-years" ? (React__default.createElement(components.YearsDropdown, { key: "year", className: classNames[UI.YearsDropdown], "aria-label": labelYearDropdown(dateLib.options), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: getYearOptions(navStart, navEnd, formatters, dateLib, Boolean(props.reverseYears)), style: styles?.[UI.Dropdown], value: dateLib.getYear(calendarMonth.date) })) : (React__default.createElement("span", { key: "year" }, formatYearDropdown(calendarMonth.date, dateLib)));
|
|
253
|
+
const controls = dateLib.getMonthYearOrder() === "year-first"
|
|
254
|
+
? [yearControl, monthControl]
|
|
255
|
+
: [monthControl, yearControl];
|
|
256
|
+
return controls;
|
|
257
|
+
})(),
|
|
258
|
+
React__default.createElement("span", { role: "status", "aria-live": "polite", style: {
|
|
259
|
+
border: 0,
|
|
260
|
+
clip: "rect(0 0 0 0)",
|
|
261
|
+
height: "1px",
|
|
262
|
+
margin: "-1px",
|
|
263
|
+
overflow: "hidden",
|
|
264
|
+
padding: 0,
|
|
265
|
+
position: "absolute",
|
|
266
|
+
width: "1px",
|
|
267
|
+
whiteSpace: "nowrap",
|
|
268
|
+
wordWrap: "normal",
|
|
269
|
+
} }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))) : (React__default.createElement(components.CaptionLabel, { className: classNames[UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))),
|
|
270
|
+
navLayout === "around" &&
|
|
271
|
+
!props.hideNavigation &&
|
|
272
|
+
displayIndex === numberOfMonths - 1 && (React__default.createElement(components.NextMonthButton, { type: "button", className: classNames[UI.NextMonthButton], tabIndex: nextMonth ? undefined : -1, "aria-disabled": nextMonth ? undefined : true, "aria-label": labelNext(nextMonth), onClick: handleNextClick, "data-animated-button": props.animate ? "true" : undefined },
|
|
273
|
+
React__default.createElement(components.Chevron, { disabled: nextMonth ? undefined : true, className: classNames[UI.Chevron], orientation: props.dir === "rtl" ? "left" : "right" }))),
|
|
274
|
+
displayIndex === numberOfMonths - 1 &&
|
|
275
|
+
navLayout === "after" &&
|
|
276
|
+
!props.hideNavigation && (React__default.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI.Nav], style: styles?.[UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
|
|
277
|
+
React__default.createElement(components.MonthGrid, { role: "grid", "aria-multiselectable": mode === "multiple" || mode === "range", "aria-label": labelGrid(calendarMonth.date, dateLib.options, dateLib) ||
|
|
278
|
+
undefined, className: classNames[UI.MonthGrid], style: styles?.[UI.MonthGrid] },
|
|
279
|
+
!props.hideWeekdays && (React__default.createElement(components.Weekdays, { "data-animated-weekdays": props.animate ? "true" : undefined, className: classNames[UI.Weekdays], style: styles?.[UI.Weekdays] },
|
|
280
|
+
showWeekNumber && (React__default.createElement(components.WeekNumberHeader, { "aria-label": labelWeekNumberHeader(dateLib.options), className: classNames[UI.WeekNumberHeader], style: styles?.[UI.WeekNumberHeader], scope: "col" }, formatWeekNumberHeader())),
|
|
281
|
+
weekdays.map((weekday) => (React__default.createElement(components.Weekday, { "aria-label": labelWeekday(weekday, dateLib.options, dateLib), className: classNames[UI.Weekday], key: String(weekday), style: styles?.[UI.Weekday], scope: "col" }, formatWeekdayName(weekday, dateLib.options, dateLib)))))),
|
|
282
|
+
React__default.createElement(components.Weeks, { "data-animated-weeks": props.animate ? "true" : undefined, className: classNames[UI.Weeks], style: styles?.[UI.Weeks] }, calendarMonth.weeks.map((week) => {
|
|
283
|
+
return (React__default.createElement(components.Week, { className: classNames[UI.Week], key: week.weekNumber, style: styles?.[UI.Week], week: week },
|
|
284
|
+
showWeekNumber && (React__default.createElement(components.WeekNumber, { week: week, style: styles?.[UI.WeekNumber], "aria-label": labelWeekNumber(week.weekNumber, {
|
|
285
|
+
locale,
|
|
286
|
+
}), className: classNames[UI.WeekNumber], scope: "row", role: "rowheader" }, formatWeekNumber(week.weekNumber, dateLib))),
|
|
287
|
+
week.days.map((day) => {
|
|
288
|
+
const { date } = day;
|
|
289
|
+
const modifiers = getModifiers(day);
|
|
290
|
+
modifiers[DayFlag.focused] =
|
|
291
|
+
!modifiers.hidden &&
|
|
292
|
+
Boolean(focused?.isEqualTo(day));
|
|
293
|
+
modifiers[SelectionState.selected] =
|
|
294
|
+
isSelected?.(date) || modifiers.selected;
|
|
295
|
+
if (isDateRange(selectedValue)) {
|
|
296
|
+
// add range modifiers
|
|
297
|
+
const { from, to } = selectedValue;
|
|
298
|
+
modifiers[SelectionState.range_start] = Boolean(from && to && dateLib.isSameDay(date, from));
|
|
299
|
+
modifiers[SelectionState.range_end] = Boolean(from && to && dateLib.isSameDay(date, to));
|
|
300
|
+
modifiers[SelectionState.range_middle] =
|
|
301
|
+
rangeIncludesDate(selectedValue, date, true, dateLib);
|
|
302
|
+
}
|
|
303
|
+
const style = getStyleForModifiers(modifiers, styles, props.modifiersStyles);
|
|
304
|
+
const className = getClassNamesForModifiers(modifiers, classNames, props.modifiersClassNames);
|
|
305
|
+
const ariaLabel = !isInteractive && !modifiers.hidden
|
|
306
|
+
? labelGridcell(date, modifiers, dateLib.options, dateLib)
|
|
307
|
+
: undefined;
|
|
308
|
+
return (React__default.createElement(components.Day, { key: `${day.isoDate}_${day.displayMonthId}`, day: day, modifiers: modifiers, className: className.join(" "), style: style, role: "gridcell", "aria-selected": modifiers.selected || undefined, "aria-label": ariaLabel, "data-day": day.isoDate, "data-month": day.outside ? day.dateMonthId : undefined, "data-selected": modifiers.selected || undefined, "data-disabled": modifiers.disabled || undefined, "data-hidden": modifiers.hidden || undefined, "data-outside": day.outside || undefined, "data-focused": modifiers.focused || undefined, "data-today": modifiers.today || undefined }, !modifiers.hidden && isInteractive ? (React__default.createElement(components.DayButton, { className: classNames[UI.DayButton], style: styles?.[UI.DayButton], type: "button", day: day, modifiers: modifiers, disabled: (!modifiers.focused &&
|
|
309
|
+
modifiers.disabled) ||
|
|
310
|
+
undefined, "aria-disabled": (modifiers.focused &&
|
|
311
|
+
modifiers.disabled) ||
|
|
312
|
+
undefined, tabIndex: isFocusTarget(day) ? 0 : -1, "aria-label": labelDayButton(date, modifiers, dateLib.options, dateLib), onClick: handleDayClick(day, modifiers), onBlur: handleDayBlur(day, modifiers), onFocus: handleDayFocus(day, modifiers), onKeyDown: handleDayKeyDown(day, modifiers), onMouseEnter: handleDayMouseEnter(day, modifiers), onMouseLeave: handleDayMouseLeave(day, modifiers) }, formatDay(date, dateLib.options, dateLib))) : (!modifiers.hidden &&
|
|
313
|
+
formatDay(day.date, dateLib.options, dateLib))));
|
|
314
|
+
})));
|
|
315
|
+
})))));
|
|
316
|
+
})),
|
|
317
|
+
props.footer && (React__default.createElement(components.Footer, { className: classNames[UI.Footer], style: styles?.[UI.Footer], role: "status", "aria-live": "polite" }, props.footer)))));
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
export { DayPicker };
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Enum representing the UI elements composing DayPicker. These elements are
|
|
3
|
+
* mapped to {@link CustomComponents}, {@link ClassNames}, and {@link Styles}.
|
|
4
|
+
*
|
|
5
|
+
* Some elements are extended by flags and modifiers.
|
|
6
|
+
*/
|
|
7
|
+
var UI;
|
|
8
|
+
(function (UI) {
|
|
9
|
+
/** The root component displaying the months and the navigation bar. */
|
|
10
|
+
UI["Root"] = "root";
|
|
11
|
+
/** The Chevron SVG element used by navigation buttons and dropdowns. */
|
|
12
|
+
UI["Chevron"] = "chevron";
|
|
13
|
+
/**
|
|
14
|
+
* The grid cell with the day's date. Extended by {@link DayFlag} and
|
|
15
|
+
* {@link SelectionState}.
|
|
16
|
+
*/
|
|
17
|
+
UI["Day"] = "day";
|
|
18
|
+
/** The button containing the formatted day's date, inside the grid cell. */
|
|
19
|
+
UI["DayButton"] = "day_button";
|
|
20
|
+
/** The caption label of the month (when not showing the dropdown navigation). */
|
|
21
|
+
UI["CaptionLabel"] = "caption_label";
|
|
22
|
+
/** The container of the dropdown navigation (when enabled). */
|
|
23
|
+
UI["Dropdowns"] = "dropdowns";
|
|
24
|
+
/** The dropdown element to select for years and months. */
|
|
25
|
+
UI["Dropdown"] = "dropdown";
|
|
26
|
+
/** The container element of the dropdown. */
|
|
27
|
+
UI["DropdownRoot"] = "dropdown_root";
|
|
28
|
+
/** The root element of the footer. */
|
|
29
|
+
UI["Footer"] = "footer";
|
|
30
|
+
/** The month grid. */
|
|
31
|
+
UI["MonthGrid"] = "month_grid";
|
|
32
|
+
/** Contains the dropdown navigation or the caption label. */
|
|
33
|
+
UI["MonthCaption"] = "month_caption";
|
|
34
|
+
/** The dropdown with the months. */
|
|
35
|
+
UI["MonthsDropdown"] = "months_dropdown";
|
|
36
|
+
/** Wrapper of the month grid. */
|
|
37
|
+
UI["Month"] = "month";
|
|
38
|
+
/** The container of the displayed months. */
|
|
39
|
+
UI["Months"] = "months";
|
|
40
|
+
/** The navigation bar with the previous and next buttons. */
|
|
41
|
+
UI["Nav"] = "nav";
|
|
42
|
+
/**
|
|
43
|
+
* The next month button in the navigation. *
|
|
44
|
+
*
|
|
45
|
+
* @since 9.1.0
|
|
46
|
+
*/
|
|
47
|
+
UI["NextMonthButton"] = "button_next";
|
|
48
|
+
/**
|
|
49
|
+
* The previous month button in the navigation.
|
|
50
|
+
*
|
|
51
|
+
* @since 9.1.0
|
|
52
|
+
*/
|
|
53
|
+
UI["PreviousMonthButton"] = "button_previous";
|
|
54
|
+
/** The row containing the week. */
|
|
55
|
+
UI["Week"] = "week";
|
|
56
|
+
/** The group of row weeks in a month (`tbody`). */
|
|
57
|
+
UI["Weeks"] = "weeks";
|
|
58
|
+
/** The column header with the weekday. */
|
|
59
|
+
UI["Weekday"] = "weekday";
|
|
60
|
+
/** The row grouping the weekdays in the column headers. */
|
|
61
|
+
UI["Weekdays"] = "weekdays";
|
|
62
|
+
/** The cell containing the week number. */
|
|
63
|
+
UI["WeekNumber"] = "week_number";
|
|
64
|
+
/** The cell header of the week numbers column. */
|
|
65
|
+
UI["WeekNumberHeader"] = "week_number_header";
|
|
66
|
+
/** The dropdown with the years. */
|
|
67
|
+
UI["YearsDropdown"] = "years_dropdown";
|
|
68
|
+
})(UI || (UI = {}));
|
|
69
|
+
/** Enum representing flags for the {@link UI.Day} element. */
|
|
70
|
+
var DayFlag;
|
|
71
|
+
(function (DayFlag) {
|
|
72
|
+
/** The day is disabled. */
|
|
73
|
+
DayFlag["disabled"] = "disabled";
|
|
74
|
+
/** The day is hidden. */
|
|
75
|
+
DayFlag["hidden"] = "hidden";
|
|
76
|
+
/** The day is outside the current month. */
|
|
77
|
+
DayFlag["outside"] = "outside";
|
|
78
|
+
/** The day is focused. */
|
|
79
|
+
DayFlag["focused"] = "focused";
|
|
80
|
+
/** The day is today. */
|
|
81
|
+
DayFlag["today"] = "today";
|
|
82
|
+
})(DayFlag || (DayFlag = {}));
|
|
83
|
+
/**
|
|
84
|
+
* Enum representing selection states that can be applied to the {@link UI.Day}
|
|
85
|
+
* element in selection mode.
|
|
86
|
+
*/
|
|
87
|
+
var SelectionState;
|
|
88
|
+
(function (SelectionState) {
|
|
89
|
+
/** The day is at the end of a selected range. */
|
|
90
|
+
SelectionState["range_end"] = "range_end";
|
|
91
|
+
/** The day is at the middle of a selected range. */
|
|
92
|
+
SelectionState["range_middle"] = "range_middle";
|
|
93
|
+
/** The day is at the start of a selected range. */
|
|
94
|
+
SelectionState["range_start"] = "range_start";
|
|
95
|
+
/** The day is selected. */
|
|
96
|
+
SelectionState["selected"] = "selected";
|
|
97
|
+
})(SelectionState || (SelectionState = {}));
|
|
98
|
+
/**
|
|
99
|
+
* Enum representing different animation states for transitioning between
|
|
100
|
+
* months.
|
|
101
|
+
*/
|
|
102
|
+
var Animation;
|
|
103
|
+
(function (Animation) {
|
|
104
|
+
/** The entering weeks when they appear before the exiting month. */
|
|
105
|
+
Animation["weeks_before_enter"] = "weeks_before_enter";
|
|
106
|
+
/** The exiting weeks when they disappear before the entering month. */
|
|
107
|
+
Animation["weeks_before_exit"] = "weeks_before_exit";
|
|
108
|
+
/** The entering weeks when they appear after the exiting month. */
|
|
109
|
+
Animation["weeks_after_enter"] = "weeks_after_enter";
|
|
110
|
+
/** The exiting weeks when they disappear after the entering month. */
|
|
111
|
+
Animation["weeks_after_exit"] = "weeks_after_exit";
|
|
112
|
+
/** The entering caption when it appears after the exiting month. */
|
|
113
|
+
Animation["caption_after_enter"] = "caption_after_enter";
|
|
114
|
+
/** The exiting caption when it disappears after the entering month. */
|
|
115
|
+
Animation["caption_after_exit"] = "caption_after_exit";
|
|
116
|
+
/** The entering caption when it appears before the exiting month. */
|
|
117
|
+
Animation["caption_before_enter"] = "caption_before_enter";
|
|
118
|
+
/** The exiting caption when it disappears before the entering month. */
|
|
119
|
+
Animation["caption_before_exit"] = "caption_before_exit";
|
|
120
|
+
})(Animation || (Animation = {}));
|
|
121
|
+
|
|
122
|
+
export { Animation, DayFlag, SelectionState, UI };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { defaultDateLib } from './DateLib.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Represents a day displayed in the calendar.
|
|
5
|
+
*
|
|
6
|
+
* In DayPicker, a `CalendarDay` is a wrapper around a `Date` object that
|
|
7
|
+
* provides additional information about the day, such as whether it belongs to
|
|
8
|
+
* the displayed month.
|
|
9
|
+
*/
|
|
10
|
+
class CalendarDay {
|
|
11
|
+
constructor(date, displayMonth, dateLib = defaultDateLib) {
|
|
12
|
+
this.date = date;
|
|
13
|
+
this.displayMonth = displayMonth;
|
|
14
|
+
this.outside = Boolean(displayMonth && !dateLib.isSameMonth(date, displayMonth));
|
|
15
|
+
this.dateLib = dateLib;
|
|
16
|
+
this.isoDate = dateLib.format(date, "yyyy-MM-dd");
|
|
17
|
+
this.displayMonthId = dateLib.format(displayMonth, "yyyy-MM");
|
|
18
|
+
this.dateMonthId = dateLib.format(date, "yyyy-MM");
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Checks if this day is equal to another `CalendarDay`, considering both the
|
|
22
|
+
* date and the displayed month.
|
|
23
|
+
*
|
|
24
|
+
* @param day The `CalendarDay` to compare with.
|
|
25
|
+
* @returns `true` if the days are equal, otherwise `false`.
|
|
26
|
+
*/
|
|
27
|
+
isEqualTo(day) {
|
|
28
|
+
return (this.dateLib.isSameDay(day.date, this.date) &&
|
|
29
|
+
this.dateLib.isSameMonth(day.displayMonth, this.displayMonth));
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export { CalendarDay };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Represents a month in a calendar year.
|
|
3
|
+
*
|
|
4
|
+
* A `CalendarMonth` contains the weeks within the month and the date of the
|
|
5
|
+
* month.
|
|
6
|
+
*/
|
|
7
|
+
class CalendarMonth {
|
|
8
|
+
constructor(month, weeks) {
|
|
9
|
+
this.date = month;
|
|
10
|
+
this.weeks = weeks;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export { CalendarMonth };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Represents a week in a calendar month.
|
|
3
|
+
*
|
|
4
|
+
* A `CalendarWeek` contains the days within the week and the week number.
|
|
5
|
+
*/
|
|
6
|
+
class CalendarWeek {
|
|
7
|
+
constructor(weekNumber, days) {
|
|
8
|
+
this.days = days;
|
|
9
|
+
this.weekNumber = weekNumber;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export { CalendarWeek };
|