npm - @persona/design-system - Versions diffs - 0.10.11 → 0.10.12 - Mend

@persona/design-system 0.10.11 → 0.10.12

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.

Files changed (348) hide show

package/skills/ui-authoring/STANDARD.md CHANGED Viewed

@@ -79,7 +79,7 @@ nearest number.
 | Control state (checkbox, radio, toggle, tab, segmented control, focus ring) | `Fast`, `Move` | same | colour as in full; travel jumps |
 | Hover reveal (row actions, copy button, inserter) | `Fast`, `Enter` | `Faster`, `Exit` | fade |
 | Tooltip | `Fast`, `Enter`, after the 300 ms open delay | `Faster`, `Exit`, no delay | fade |
-| Popover, menu, select or combobox list: fade and scale from 0.96 at the trigger's edge | `Fast`, `Enter` | Closes at once: an exit would hold the content mounted and delay focus restoring to the trigger or field | fade in |
+| Popover, menu, select or combobox list: fade and scale from 0.96 at the trigger's edge | `Fast`, `Enter` | `Faster`, `Exit`, focus returning when the close starts; `modal` content, Select and Combobox close at once | fade |
 | Modal: overlay fade, card rises 8 px | `Fast`, `Enter` | `Faster`, `Exit`, fade only | fade |
 | Toast: fade, rise and scale from 0.96 | `Medium`, `Enter` | `MediumFast`, `Exit` | fade |
 | Side panel | `Medium`, `Enter` | `MediumFast`, `Exit` | size jumps; content fades |
@@ -96,8 +96,18 @@ translate, scale or size change. Colour isn't movement, so a colour change keeps
   a close or a hover-out; a delay only filters accidental triggers.
 - **Enter on `Enter`, leave on `Exit`, change on `Move`.** None of the curves overshoot.
 - **Nothing over `Medium` (400 ms) is a state change.** `OneSecond` is for loop periods.
+- **Prefer CSS for motion.** Use `transition` or styled-components `keyframes` whenever CSS can
+  express the motion, and always for loops (shimmers, pulses, spinners) and simple enter, exit or
+  state changes. Use framer-motion only for what CSS can't do: layout or shared-element animation,
+  drag and gesture, spring physics, or exit coordination where there is no `[data-exiting]` or
+  `[data-state='closed']` hook. A JavaScript animation runs on the main thread every frame, and an
+  infinite one can keep an unmounted screen's DOM alive.
 - **Exits are keyframe animations** on `[data-exiting]` (React Aria) or `[data-state='closed']`
   (Radix), because both unmount when the element's animations finish.
+- **Focus leaves when the close starts, not when the exit ends.** Radix returns focus only at
+  unmount, so PDS's Popover, DropdownMenu and AdvancedFilterRulesPopover use `useCloseFocus`
+  (`@persona/design-system/lib/useCloseFocus`): it runs `onCloseAutoFocus` and focuses the trigger
+  at close start, and makes the closing content inert. Raw Radix content with an exit uses it too.
 persona-motion owns the motion language these rules come from; PDS owns the values.

package/dist/DatePicker-BK7ioKBm.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"DatePicker-BK7ioKBm.mjs","names":["useLocale","OpenButton","Popover","Card","RangeCalendarPresets","Popover"],"sources":["../src/components/DatePicker/Calendar/CalendarBase.tsx","../src/components/DatePicker/Calendar/CalendarCell.tsx","../src/components/DatePicker/Calendar/CalendarGrid.tsx","../src/components/DatePicker/common.ts","../src/components/DatePicker/Calendar/Calendar.tsx","../src/components/DatePicker/DateField.tsx","../src/components/DatePicker/DatePicker.tsx","../src/components/DatePicker/Calendar/RangeCalendarPresets.tsx","../src/components/DatePicker/time-range.ts","../src/components/DatePicker/Calendar/RangeCalendar.tsx","../src/components/DatePicker/DateRangePicker.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useButton } from 'react-aria';\nimport styled from 'styled-components';\n\nimport { Spacing, Typography } from '@persona/design-tokens';\n\nimport { IconButton } from '#src/components/Button';\nimport type { IconButtonProps } from '#src/components/Button/IconButton';\n\nexport const CalendarContainer = styled.div`\n display: inline-block;\n`;\n\nexport const CalendarHeader = styled.div`\n display: flex;\n align-items: center;\n margin-bottom: ${Spacing[2]};\n`;\n\nexport const CalendarHeading = styled.div`\n ${Typography.TextLargeBold};\n flex: 1;\n text-align: center;\n`;\n\nconst StyledCalendarButton = styled(IconButton)`\n width: 32px;\n height: 32px;\n`;\n\nexport const CalendarButton = (props: IconButtonProps) => {\n const ref = useRef();\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n const { buttonProps } = useButton(props, ref);\n\n return (\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n <StyledCalendarButton {...buttonProps} className={props.className} ref={ref}>\n {props.children}\n </StyledCalendarButton>\n );\n};\n","import { type CalendarDate, type DateValue, isSameDay, isSameMonth } from '@internationalized/date';\nimport { useRef } from 'react';\nimport { useCalendarCell } from 'react-aria';\nimport type { CalendarState, RangeCalendarState } from 'react-stately';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Typography } from '@persona/design-tokens';\n\nimport { withAlpha } from '#src/lib/color';\nimport { semanticColor, semanticTokens } from '#src/lib/semanticColor';\n\nconst CalendarCellContainer = styled.td`\n text-align: center;\n width: 38px;\n height: 38px;\n padding: 0px;\n`;\n\ninterface CalendarCellButtonProps {\n isSelected?: boolean;\n isSelectionStart?: boolean;\n isSelectionEnd?: boolean;\n isInvalid?: boolean;\n isDisabled?: boolean;\n}\n\nconst CalendarCellButton = styled.button<CalendarCellButtonProps>`\n ${Typography.TextMedium};\n border-style: none;\n padding: 0;\n background: none;\n width: 100%;\n height: 100%;\n cursor: pointer;\n position: relative;\n color: ${({ theme }) => semanticColor(theme, 'FgPrimary', theme.color.text.primary)};\n\n ${({ isSelected, theme }) => {\n if (!isSelected) {\n return null;\n }\n const tokens = semanticTokens(theme);\n return css`\n background: ${tokens ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25) : Color.CorePurple100};\n ${tokens ? `color: ${tokens.FgPrimary};` : ''}\n `;\n }}\n\n ${({ isSelectionStart, theme }) =>\n isSelectionStart &&\n css`\n background: ${semanticColor(theme, 'ActionPrimary', Color.BackgroundButtonPrimary)};\n color: ${semanticColor(theme, 'FgInverse', Color.TextInverse)};\n border-top-left-radius: ${BorderRadius.Sm};\n border-bottom-left-radius: ${BorderRadius.Sm};\n `}\n\n ${({ isSelectionEnd, theme }) =>\n isSelectionEnd &&\n css`\n background: ${semanticColor(theme, 'ActionPrimary', Color.BackgroundButtonPrimary)};\n color: ${semanticColor(theme, 'FgInverse', Color.TextInverse)};\n border-top-right-radius: ${BorderRadius.Sm};\n border-bottom-right-radius: ${BorderRadius.Sm};\n `}\n\n ${({ isDisabled, theme }) =>\n isDisabled &&\n css`\n color: ${semanticColor(theme, 'FgDisabled', Color.CoreSlate300)};\n `}\n\n ${({ isInvalid, theme }) =>\n isInvalid &&\n css`\n background: ${semanticColor(theme, 'FeedbackDanger4', Color.BackgroundButtonDanger)};\n color: ${semanticColor(theme, 'FgInverseStatic', Color.TextInverse)};\n `}\n\n &:focus-visible {\n outline: 2px solid ${({ theme }) => semanticColor(theme, 'BorderFocus', Color.BorderFocus)};\n outline-offset: -2px;\n box-shadow: ${({ theme }) => semanticColor(theme, 'SurfacePrimary', Color.PrimaryWhite)} 0px 0px 0px 3px inset;\n z-index: 1;\n }\n`;\n\ninterface CalendarCellProps {\n state: CalendarState | RangeCalendarState;\n date: CalendarDate;\n currentMonth: DateValue;\n}\n\nconst CalendarCell = ({ state, date, currentMonth }: CalendarCellProps) => {\n const ref = useRef();\n const { cellProps, buttonProps, isSelected, isInvalid, isDisabled, formattedDate } =\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n useCalendarCell({ date }, state, ref);\n\n const highlightedRange = 'highlightedRange' in state && state.highlightedRange;\n\n const isOutsideMonth = !isSameMonth(currentMonth, date);\n const isSelectionStart = highlightedRange ? isSameDay(date, highlightedRange.start) : isSelected;\n const isSelectionEnd = highlightedRange ? isSameDay(date, highlightedRange.end) : isSelected;\n\n return (\n <CalendarCellContainer {...cellProps}>\n <CalendarCellButton\n {...buttonProps}\n hidden={isOutsideMonth}\n isSelected={isSelected}\n isSelectionStart={isSelectionStart}\n isSelectionEnd={isSelectionEnd}\n isInvalid={isInvalid}\n isDisabled={isDisabled}\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n ref={ref}\n >\n {formattedDate}\n </CalendarCellButton>\n </CalendarCellContainer>\n );\n};\n\nexport default CalendarCell;\n","import { type DateDuration, endOfMonth, getWeeksInMonth } from '@internationalized/date';\nimport { useCalendarGrid, useLocale } from 'react-aria';\nimport type { CalendarState, RangeCalendarState } from 'react-stately';\nimport styled from 'styled-components';\n\nimport { Color, Typography } from '@persona/design-tokens';\n\nimport { semanticColor } from '#src/lib/semanticColor';\n\nimport CalendarCell from './CalendarCell';\n\nconst CalendarGridContainer = styled.table`\n width: 266px;\n border-spacing: 0px;\n border-collapse: collapse;\n\n &:focus-visible {\n outline: 2px solid ${({ theme }) => semanticColor(theme, 'BorderFocus', Color.BorderFocus)};\n outline-offset: 1px;\n }\n`;\n\nconst CalendarGridDayHeader = styled.th`\n ${Typography.TextMedium};\n color: ${({ theme }) => semanticColor(theme, 'FgSecondary', Color.TextSecondary)};\n`;\n\ninterface CalendarGridProps {\n state: CalendarState | RangeCalendarState;\n offset?: DateDuration;\n skipFromTabOrder?: boolean;\n}\n\nconst CalendarGrid = ({ state, offset = {}, skipFromTabOrder = false }: CalendarGridProps) => {\n const { locale } = useLocale();\n const startDate = state.visibleRange.start.add(offset);\n const endDate = endOfMonth(startDate);\n\n const { gridProps, headerProps, weekDays } = useCalendarGrid(\n {\n startDate,\n endDate,\n },\n state,\n );\n\n const weeksInMonth = getWeeksInMonth(startDate, locale);\n\n // Remove second calendar grid from tab order - use arrow keys to navigate between months\n const modifiedGridProps = skipFromTabOrder ? { ...gridProps, tabIndex: -1 } : gridProps;\n\n return (\n <CalendarGridContainer {...modifiedGridProps}>\n <thead {...headerProps}>\n <tr>\n {weekDays.map((day, index) => (\n <CalendarGridDayHeader key={index}>{day}</CalendarGridDayHeader>\n ))}\n </tr>\n </thead>\n <tbody>\n {[...new Array(weeksInMonth).keys()].map((weekIndex) => (\n <tr key={weekIndex}>\n {state\n .getDatesInWeek(weekIndex, startDate)\n .map((date, i) =>\n date ? (\n <CalendarCell key={i} state={state} date={date} currentMonth={startDate} />\n ) : (\n <td key={i} />\n ),\n )}\n </tr>\n ))}\n </tbody>\n </CalendarGridContainer>\n );\n};\n\nexport default CalendarGrid;\n","import { GregorianCalendar } from '@internationalized/date';\n\nexport const createCalendar = () => new GregorianCalendar();\n","import type { Ref } from 'react';\nimport { type AriaCalendarProps, type DateValue, useCalendar, useLocale } from 'react-aria';\nimport { useCalendarState } from 'react-stately';\n\nimport { ArrowLeftIcon, ArrowRightIcon } from '@persona/icons';\n\nimport {\n CalendarButton,\n CalendarContainer,\n CalendarHeader,\n CalendarHeading,\n} from '#src/components/DatePicker/Calendar/CalendarBase';\nimport CalendarGrid from '#src/components/DatePicker/Calendar/CalendarGrid';\nimport { createCalendar } from '#src/components/DatePicker/common';\n\ninterface CalendarProps extends AriaCalendarProps<DateValue> {\n calendarRef?: Ref<HTMLDivElement>;\n}\n\nconst Calendar = (props: CalendarProps) => {\n const { locale } = useLocale();\n const state = useCalendarState({ ...props, locale, createCalendar });\n const { calendarProps, prevButtonProps, nextButtonProps, title } = useCalendar(props, state);\n\n return (\n <CalendarContainer {...calendarProps} ref={props.calendarRef}>\n <CalendarHeader>\n <CalendarButton {...prevButtonProps}>\n <ArrowLeftIcon />\n </CalendarButton>\n <CalendarHeading>{title}</CalendarHeading>\n <CalendarButton {...nextButtonProps}>\n <ArrowRightIcon />\n </CalendarButton>\n </CalendarHeader>\n <CalendarGrid state={state} />\n </CalendarContainer>\n );\n};\n\nexport default Calendar;\n","import type { DateValue } from '@internationalized/date';\nimport { type AriaDateFieldProps, useDateField, useDateSegment } from '@react-aria/datepicker';\nimport { useLocale } from '@react-aria/i18n';\nimport { mergeRefs } from '@react-aria/utils';\nimport {\n type DateFieldState,\n type DateSegment as DateSegmentObj,\n type SegmentType,\n useDateFieldState,\n} from '@react-stately/datepicker';\nimport { forwardRef, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\n\nimport { createCalendar } from '#src/components/DatePicker/common';\nimport { withAlpha } from '#src/lib/color';\nimport { isFocused, isFocusedVisible, isNotDisabled } from '#src/lib/pseudoClass';\nimport { semanticColor, semanticOnly, semanticTokens } from '#src/lib/semanticColor';\nimport { focusWithinOutline } from '#src/mixins/focus';\nimport inputMixin, { type InputMixinProps, type InputSizes } from '#src/mixins/input';\nimport type PseudoClassProps from '#src/types/PseudoClassProps';\n\ntype DateSegmentContainerProps = { $isComma?: boolean; $isTimezone?: boolean } & PseudoClassProps;\nconst DateSegmentContainer = styled.div<DateSegmentContainerProps>`\n font-variant-numeric: tabular-nums;\n box-sizing: content-box;\n text-align: end;\n\n ${isFocused} {\n outline: 2px solid ${({ theme }) => semanticColor(theme, 'BorderFocus', Color.BorderFocus)};\n outline-offset: 1px;\n background-color: ${({ theme }) => {\n const tokens = semanticTokens(theme);\n return tokens ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25) : Color.CorePurple200;\n }};\n ${semanticOnly((tokens) => `color: ${tokens.FgAccent};`)}\n }\n\n ${({ $isComma, $isTimezone }) =>\n ($isComma || $isTimezone) &&\n css`\n margin-left: 0.25ch;\n margin-right: 0.25ch;\n `}\n\n ${({ $isTimezone }) =>\n $isTimezone &&\n css`\n color: ${({ theme }) => semanticColor(theme, 'FgSecondary', Color.TextSecondary)};\n pointer-events: none;\n\n &:focus {\n outline: none;\n background-color: transparent;\n }\n `}\n`;\n\ntype DateSegmentPlaceholderProps = { isPlaceholder?: boolean; type: SegmentType };\nconst DateSegmentPlaceholder = styled.span<DateSegmentPlaceholderProps>`\n display: block;\n width: 100%;\n pointer-events: none;\n\n &:focus {\n outline: none;\n }\n\n ${({ isPlaceholder }) =>\n isPlaceholder\n ? css`\n height: 100%;\n color: ${({ theme }) => semanticColor(theme, 'FgSecondary', theme.color.text.tertiary)};\n `\n : css`\n visibility: hidden;\n height: 0;\n `}\n ${({ type }) =>\n type === 'literal' &&\n css`\n padding-left: ${Spacing[1]};\n padding-right: ${Spacing[1]};\n `}\n ${({ type, isPlaceholder }) =>\n type === 'month' &&\n isPlaceholder &&\n css`\n width: 3ch;\n `}\n`;\n\ninterface DateSegmentProps {\n segment: DateSegmentObj;\n state: DateFieldState;\n}\n\nfunction DateSegment({ segment, state }: DateSegmentProps) {\n const ref = useRef();\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n const { segmentProps } = useDateSegment(segment, state, ref);\n\n let minWidth: string;\n\n switch (segment.type) {\n case 'dayPeriod': {\n minWidth = '2.75ch';\n break;\n }\n default: {\n minWidth = `${segment.maxValue != null && String(segment.maxValue).length + 0.25}ch`;\n break;\n }\n }\n\n const isComma = segment.type === 'literal' && segment.text === ', ';\n const isTimezone = segment.type === 'timeZoneName';\n\n return (\n <DateSegmentContainer\n {...segmentProps}\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n ref={ref}\n style={{\n ...segmentProps.style,\n minWidth,\n }}\n $isComma={isComma}\n $isTimezone={isTimezone}\n {...(isTimezone && { tabIndex: -1, role: 'presentation' })}\n >\n {/* Always reserve space for the placeholder, to prevent layout shift when editing. */}\n {segment.placeholder && (\n <DateSegmentPlaceholder\n aria-hidden='true'\n isPlaceholder={segment.isPlaceholder}\n type={segment.type}\n >\n {segment.placeholder}\n </DateSegmentPlaceholder>\n )}\n {segment.isPlaceholder ? '' : segment.text}\n </DateSegmentContainer>\n );\n}\n\nconst InputBox = styled.div<\n InputMixinProps & { $hasTimeZone: boolean; $inputPosition: 'start' | 'end' }\n>`\n ${inputMixin};\n display: flex;\n padding-left: ${Spacing[2]};\n padding-right: ${Spacing[2]};\n line-height: 1;\n position: relative;\n white-space: nowrap;\n\n ${({ $hasTimeZone }) =>\n $hasTimeZone &&\n css`\n width: auto;\n flex: 1 0 auto;\n `}\n\n &${isFocusedVisible}${isNotDisabled} {\n position: relative;\n z-index: 1;\n }\n\n ${focusWithinOutline}\n\n ${({ $inputPosition }) => {\n switch ($inputPosition) {\n case 'start': {\n return css`\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n `;\n }\n case 'end': {\n return css`\n margin-left: -1px;\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n `;\n }\n }\n }}\n`;\n\ninterface DateFieldProps extends AriaDateFieldProps<DateValue> {\n inputPosition?: 'start' | 'end';\n focused?: boolean;\n readOnly?: boolean;\n value?: DateValue;\n disabled?: boolean;\n size?: InputSizes;\n style?: React.CSSProperties;\n dateFieldProps?: {\n style?: React.CSSProperties;\n };\n hasError?: boolean;\n}\n\nexport const DateField = forwardRef<HTMLDivElement, DateFieldProps>(function DateField(\n props: DateFieldProps,\n forwardedRef,\n) {\n const { locale } = useLocale();\n const state = useDateFieldState({\n ...props,\n locale,\n createCalendar,\n });\n\n const ref = useRef<HTMLDivElement>();\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n const { fieldProps } = useDateField(props, state, ref);\n\n return (\n <InputBox\n {...fieldProps}\n {...(props.dateFieldProps || {})}\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n ref={mergeRefs<HTMLDivElement>(ref, forwardedRef)}\n focused={props.focused}\n disabled={props.disabled}\n aria-label={props['aria-label']}\n $size={props.size ?? 'md'}\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n $inputPosition={props.inputPosition}\n $hasTimeZone={state.segments.some((segment) => segment.type === 'timeZoneName')}\n hasError={props.hasError}\n >\n {state.segments.map((segment, i) => (\n <DateSegment key={i} segment={segment} state={state} />\n ))}\n </InputBox>\n );\n});\n\nexport default DateField;\n","import type { DateValue } from '@internationalized/date';\nimport type { DatePickerProps as DatePickerBase } from '@react-types/datepicker';\nimport { type RefObject, useCallback, useRef } from 'react';\nimport { mergeProps, useButton, useDatePicker, useFocusWithin, VisuallyHidden } from 'react-aria';\nimport { useDatePickerState } from 'react-stately';\n\nimport Calendar from '#src/components/DatePicker/Calendar/Calendar';\nimport DateField from '#src/components/DatePicker/DateField';\nimport Popover from '#src/components/Popover';\nimport { Z_INDICES } from '#src/lib/zindex';\nimport type { InputSizes } from '#src/mixins/input';\n\nexport interface DatePickerProps extends DatePickerBase<DateValue> {\n id?: string;\n dateFieldProps?: {\n style?: React.CSSProperties;\n };\n disabled?: boolean;\n size?: InputSizes;\n useModalZIndex?: boolean;\n}\n\nconst OpenButton = ({ calendarRef }: { calendarRef: RefObject<HTMLElement> }) => {\n const openCalBtnRef = useRef<HTMLButtonElement>(null);\n const { buttonProps } = useButton(\n {\n onPress: () => {\n if (calendarRef.current) {\n (\n calendarRef.current.querySelector('button[aria-label=\"Previous\"]') as HTMLButtonElement\n ).focus();\n }\n },\n },\n openCalBtnRef,\n );\n\n return <button {...buttonProps} ref={openCalBtnRef} aria-label='Open calendar' />;\n};\n\nexport const DatePicker = (props: DatePickerProps) => {\n const state = useDatePickerState(props);\n const ref = useRef<HTMLDivElement>(null);\n const fieldRef = useRef<HTMLDivElement>(null);\n const { groupProps, fieldProps, calendarProps } = useDatePicker(props, state, ref);\n const calendarRef = useRef<HTMLDivElement>(null);\n // A ref, not state: the close sequence focuses the field before a state update would commit.\n const isClosingRef = useRef(false);\n\n const { focusWithinProps } = useFocusWithin({\n onFocusWithin: () => {\n if (!state.isOpen && !isClosingRef.current) {\n state.setOpen(true);\n }\n },\n onBlurWithin: (e) => {\n // Close calendar if next target is not within the calendar\n if (e.relatedTarget && !calendarRef?.current?.contains(e.relatedTarget) && state.isOpen) {\n state.setOpen(false);\n }\n },\n });\n\n const handleOutsideClick = (e: Event) => {\n const target = e.target as Node;\n // Don't close if clicking on the date input itself\n if (ref.current?.contains(target)) {\n return;\n }\n if (state.isOpen) {\n state.setOpen(false);\n }\n };\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === 'Enter' && !state.isOpen) {\n event.preventDefault();\n state.setOpen(true);\n }\n },\n [state],\n );\n\n return (\n <div style={{ display: 'flex', flexDirection: 'column' }}>\n <Popover\n open={state.isOpen}\n modal={false}\n contentProps={{\n style: { zIndex: props.useModalZIndex ? Z_INDICES.modalDropdown : Z_INDICES.dropdown },\n align: 'start',\n 'aria-modal': true,\n onInteractOutside: handleOutsideClick,\n onEscapeKeyDown: () => {\n state.setOpen(false);\n },\n onCloseAutoFocus: (e: Event) => {\n // Prevent Radix's default focus restoration\n e.preventDefault();\n isClosingRef.current = true;\n\n // Manually restore focus to the date field\n if (fieldRef.current) {\n const firstEditableSegment = fieldRef.current.querySelector('[tabindex=\"0\"]');\n if (firstEditableSegment instanceof HTMLElement) {\n firstEditableSegment.focus();\n }\n }\n\n // Reset flag after focus is done\n requestAnimationFrame(() => {\n isClosingRef.current = false;\n });\n },\n noPadding: true,\n }}\n >\n <Popover.Trigger asChild>\n <div\n {...mergeProps(groupProps, focusWithinProps)}\n ref={ref}\n style={{ display: 'flex', position: 'relative' }}\n >\n <DateField\n ref={fieldRef}\n id={props.id}\n dateFieldProps={props.dateFieldProps}\n disabled={props.disabled}\n size={props.size}\n {...mergeProps(fieldProps, { onKeyDown: handleKeyDown })}\n value={fieldProps.value ?? undefined}\n />\n <VisuallyHidden>\n <OpenButton calendarRef={calendarRef} />\n </VisuallyHidden>\n </div>\n </Popover.Trigger>\n <Calendar\n {...{ ...calendarProps, autoFocus: undefined }}\n calendarRef={calendarRef}\n id='calendar-popover'\n />\n </Popover>\n </div>\n );\n};\n\nexport default DatePicker;\n","import {\n type CalendarDate,\n type DateValue,\n endOfMonth,\n endOfYear,\n startOfMonth,\n startOfYear,\n today,\n} from '@internationalized/date';\nimport type { RangeValue } from '@react-types/shared';\nimport { Settings } from 'luxon';\nimport { memo, useRef } from 'react';\nimport { mergeProps, useButton } from 'react-aria';\nimport type { RangeCalendarState } from 'react-stately';\nimport styled, { css } from 'styled-components';\n\nimport type { DateFilterPreset } from '@persona/design-system/lib/date-filter';\nimport { Color } from '@persona/design-tokens';\n\nimport { MenuItem, MenuList } from '#src/components/Menu';\nimport { isFocused, isHovered, isNotDisabled } from '#src/lib/pseudoClass';\nimport { semanticColor } from '#src/lib/semanticColor';\n\ninterface DateRangePreset {\n id: DateFilterPreset;\n label: string;\n range: RangeValue<CalendarDate>;\n}\n\n/** The preset windows the picker offers; the codec resolves the same ids on read. */\nexport const getDefaultPresets = (tz: string): DateRangePreset[] => {\n const now = today(tz);\n return [\n {\n id: 'last_7_days',\n label: 'Last 7 days',\n range: {\n start: now.subtract({ days: 7 }),\n end: now,\n },\n },\n {\n id: 'last_14_days',\n label: 'Last 14 days',\n range: {\n start: now.subtract({ days: 14 }),\n end: now,\n },\n },\n {\n id: 'last_30_days',\n label: 'Last 30 days',\n range: {\n start: now.subtract({ days: 30 }),\n end: now,\n },\n },\n {\n id: 'this_month',\n label: 'This month',\n range: {\n start: startOfMonth(now),\n // Effectively, this should always be today, since we can't look forward\n end: now,\n },\n },\n {\n id: 'last_month',\n label: 'Last month',\n range: {\n start: startOfMonth(now.subtract({ months: 1 })),\n end: endOfMonth(now.subtract({ months: 1 })),\n },\n },\n {\n id: 'this_year',\n label: 'This year',\n range: {\n start: startOfYear(now),\n end: now,\n },\n },\n {\n id: 'last_year',\n label: 'Last year',\n range: {\n start: startOfYear(now.subtract({ years: 1 })),\n end: endOfYear(now.subtract({ years: 1 })),\n },\n },\n ];\n};\n\n/**\n * Compare two date values by year/month/day only, ignoring time components.\n */\nconst datesMatchByDay = (a: CalendarDate, b: DateValue): boolean =>\n a.year === b.year && a.month === b.month && a.day === b.day;\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\ninterface PresetButtonProps {\n state: RangeCalendarState;\n preset: DateRangePreset;\n isSelected: boolean;\n setDateMode: (mode: 'start' | 'end' | null) => void;\n onPresetSelect?: (preset: DateFilterPreset, commit: () => void) => void;\n commitRange: (value: RangeValue<DateValue>) => void;\n}\n\nconst StyledPresetButton = styled(MenuItem)`\n ${({ selected }) =>\n !selected &&\n css`\n &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {\n background-color: transparent;\n }\n `}\n\n &:focus-visible {\n // MenuItems default to outline: none, so we need to override it here.\n outline: 2px solid ${({ theme }) => semanticColor(theme, 'BorderFocus', Color.BorderFocus)} !important;\n outline-offset: 1px;\n }\n`;\n\ninterface DateRangePickerPresetsProps {\n presetsFn?: (tz: string) => DateRangePreset[];\n state: RangeCalendarState;\n setDateMode: (mode: 'start' | 'end' | null) => void;\n onPresetSelect?: (preset: DateFilterPreset, commit: () => void) => void;\n selectedPreset?: DateFilterPreset | null;\n commitRange: (value: RangeValue<DateValue>) => void;\n}\n\nconst PresetButton = ({\n commitRange,\n state,\n preset,\n isSelected,\n setDateMode,\n onPresetSelect,\n ...props\n}: PresetButtonProps) => {\n const ref = useRef<HTMLDivElement>();\n const { buttonProps } = useButton(\n {\n onPress: () => {\n const commit = () => commitRange(preset.range);\n\n if (onPresetSelect) {\n onPresetSelect(preset.id, commit);\n } else {\n commit();\n }\n setDateMode(null);\n },\n },\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n ref,\n );\n\n // Strip aria-current from useButton's props so it doesn't override MenuItem's.\n const { 'aria-current': _ariaCurrent, ...mergedProps } = mergeProps(props, buttonProps);\n\n return (\n <StyledPresetButton\n selected={isSelected}\n {...mergedProps}\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n ref={ref}\n >\n {preset.label}\n </StyledPresetButton>\n );\n};\n\nconst DateRangePickerPresets = ({\n presetsFn = getDefaultPresets,\n commitRange,\n state,\n setDateMode,\n onPresetSelect,\n selectedPreset,\n ...props\n}: DateRangePickerPresetsProps) => {\n // The reason that we need to do this at render time is because the default timezone for moment is set after\n // the current User's timezone is loaded. Thus we woudln't be getting the right timezone unless if we defer getting\n // the timezone.\n const presets = presetsFn(Settings.defaultZone.name);\n\n // First match wins — prevents multiple presets appearing selected when ranges overlap.\n const { value } = state;\n const selectedPresetIndex = value\n ? presets.findIndex(\n (preset) =>\n datesMatchByDay(preset.range.start, value.start) &&\n datesMatchByDay(preset.range.end, value.end),\n )\n : -1;\n\n // `undefined` falls back to matching on dates; `null` is an explicit \"no preset\".\n const infersSelection = typeof selectedPreset === 'undefined';\n\n return (\n <Container {...props}>\n <MenuList aria-label='Date range presets'>\n {presets.map((preset, i) => (\n <PresetButton\n key={i}\n preset={preset}\n commitRange={commitRange}\n state={state}\n setDateMode={setDateMode}\n onPresetSelect={onPresetSelect}\n isSelected={infersSelection ? i === selectedPresetIndex : preset.id === selectedPreset}\n />\n ))}\n </MenuList>\n </Container>\n );\n};\n\n// Skips re-renders driven by calendar state the preset list does not read —\n// focus and hover updates fire on every pointer move during range selection.\nconst arePropsEqual = (\n prevProps: DateRangePickerPresetsProps,\n nextProps: DateRangePickerPresetsProps,\n) => {\n if (\n prevProps.selectedPreset !== nextProps.selectedPreset ||\n prevProps.onPresetSelect !== nextProps.onPresetSelect ||\n prevProps.commitRange !== nextProps.commitRange ||\n prevProps.setDateMode !== nextProps.setDateMode ||\n prevProps.presetsFn !== nextProps.presetsFn\n ) {\n return false;\n }\n\n const prevValue = prevProps.state.value;\n const nextValue = nextProps.state.value;\n\n if (!prevValue && !nextValue) {\n return true;\n }\n if (!prevValue || !nextValue) {\n return false;\n }\n\n return (\n prevValue.start.compare(nextValue.start) === 0 && prevValue.end.compare(nextValue.end) === 0\n );\n};\n\nexport default memo(DateRangePickerPresets, arePropsEqual);\n","import { type CalendarDateTime, now, toCalendarDateTime } from '@internationalized/date';\nimport { Settings } from 'luxon';\n\nconst earliest = (a: CalendarDateTime, b: CalendarDateTime) => (a.compare(b) <= 0 ? a : b);\n\nexport const presetEnd = (end: CalendarDateTime) =>\n earliest(\n end.set({ hour: 23, minute: 59, second: 59, millisecond: 999 }),\n toCalendarDateTime(now(Settings.defaultZone.name)).set({ second: 0, millisecond: 0 }),\n );\n","import {\n type CalendarDate,\n type DateValue,\n toCalendarDateTime,\n toZoned,\n} from '@internationalized/date';\nimport type { RangeValue } from '@react-types/shared';\nimport { range } from 'lodash-es';\nimport { Settings } from 'luxon';\nimport { type Ref, useCallback, useEffect, useRef } from 'react';\nimport {\n type DateRange,\n type RangeCalendarProps as RangeCalendarBaseProps,\n useDateFormatter,\n useLocale,\n useRangeCalendar,\n VisuallyHidden,\n} from 'react-aria';\nimport { type RangeCalendarState, useRangeCalendarState } from 'react-stately';\nimport styled from 'styled-components';\n\nimport type { DateFilterPreset } from '@persona/design-system/lib/date-filter';\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { ArrowLeftIcon, ArrowRightIcon } from '@persona/icons';\n\nimport Card from '#src/components/Card';\nimport {\n CalendarButton,\n CalendarContainer,\n CalendarHeader,\n CalendarHeading,\n} from '#src/components/DatePicker/Calendar/CalendarBase';\nimport CalendarGrid from '#src/components/DatePicker/Calendar/CalendarGrid';\nimport RangeCalendarPresets from '#src/components/DatePicker/Calendar/RangeCalendarPresets';\nimport { createCalendar } from '#src/components/DatePicker/common';\nimport { presetEnd } from '#src/components/DatePicker/time-range';\nimport { semanticColor } from '#src/lib/semanticColor';\n\nconst RangeCalendarHeader = styled(CalendarHeader)`\n gap: ${Spacing[5]};\n`;\n\nconst CalendarHeaderMonth = styled.div`\n display: grid;\n grid-template-columns: minmax(auto, 1fr) auto minmax(auto, 1fr);\n grid-template-areas: 'prev title next';\n width: 266px;\n align-items: center;\n`;\n\nconst CalendarGrids = styled.div`\n display: flex;\n gap: ${Spacing[5]};\n align-items: start;\n`;\n\nconst PrevButton = styled(CalendarButton)`\n grid-area: prev;\n justify-self: start;\n border-radius: ${BorderRadius.Sm};\n`;\n\nconst NextButton = styled(CalendarButton)`\n grid-area: next;\n justify-self: end;\n border-radius: ${BorderRadius.Sm};\n`;\n\nconst RangeCalendarHeading = styled(CalendarHeading)`\n grid-area: title;\n`;\n\nconst RangeCalendarContainer = styled.div`\n display: flex;\n`;\n\nconst PresetsContainer = styled(Card.Body)`\n border-right: 1px solid ${({ theme }) => semanticColor(theme, 'BorderDivider', Color.BorderHairline)};\n`;\n\nexport interface RangeCalendarProps extends RangeCalendarBaseProps<DateValue> {\n minDate?: RangeCalendarBaseProps<DateValue>['minValue'];\n maxDate?: RangeCalendarBaseProps<DateValue>['maxValue'];\n calendarRef?: Ref<HTMLDivElement>;\n hidePresets?: boolean;\n visibleMonths?: 1 | 2;\n onSelectDate?: (d: CalendarDate) => void;\n setDateMode: (mode: 'start' | 'end' | null) => void;\n onPresetSelect?: (preset: DateFilterPreset, commit: () => void) => void;\n selectedPreset?: DateFilterPreset | null;\n /**\n * From setValue of DateRangePicker\n */\n setValue: (value: DateRange | null) => void;\n granularity: 'day' | 'hour' | 'minute' | 'second';\n}\n\nconst hasTimeComponent = (date: DateValue) => 'hour' in date;\n\nconst RangeCalendar = ({\n calendarRef,\n onSelectDate,\n minDate,\n maxDate,\n hidePresets,\n visibleMonths = 2,\n setDateMode,\n onPresetSelect,\n selectedPreset,\n setValue,\n granularity,\n ...props\n}: RangeCalendarProps) => {\n const { locale } = useLocale();\n // Must gather the TZ from the user's settings.\n const timezoneName = Settings.defaultZone.name;\n const rangeCalendarState = useRangeCalendarState({\n ...props,\n minValue: minDate,\n maxValue: maxDate,\n visibleDuration: {\n months: visibleMonths,\n },\n locale,\n createCalendar,\n });\n\n const state: RangeCalendarState = {\n ...rangeCalendarState,\n setValue: (value) => {\n if (!value || granularity === 'day') {\n rangeCalendarState.setValue(value);\n return;\n }\n\n setValue({\n start: toZoned(toCalendarDateTime(value.start), timezoneName),\n // A date-only end comes from a preset, where the end date is inclusive.\n end: toZoned(\n hasTimeComponent(value.end)\n ? toCalendarDateTime(value.end)\n : presetEnd(toCalendarDateTime(value.end)),\n timezoneName,\n ),\n });\n },\n selectDate: (date) => {\n if (onSelectDate) {\n onSelectDate(date);\n rangeCalendarState.setAnchorDate(null);\n } else {\n rangeCalendarState.selectDate(date);\n }\n },\n };\n\n // The preset list is memoized on its own props, so it can hold a `state` from\n // an earlier render. Committing through a ref keeps the write on the current\n // `onChange` chain instead of one the parent has already replaced.\n const commitRef = useRef(state.setValue);\n useEffect(() => {\n commitRef.current = state.setValue;\n });\n const commitRange = useCallback((value: RangeValue<DateValue>) => commitRef.current(value), []);\n\n const ref = useRef();\n\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n const { calendarProps, prevButtonProps, nextButtonProps } = useRangeCalendar(props, state, ref);\n\n const monthDateFormatter = useDateFormatter({\n month: 'long',\n year: 'numeric',\n timeZone: timezoneName,\n });\n\n const monthHeaders = range(0, visibleMonths).map((i) => {\n return (\n <CalendarHeaderMonth key={`calendar-month-${i}`}>\n {i === 0 && (\n <PrevButton {...prevButtonProps}>\n <ArrowLeftIcon />\n </PrevButton>\n )}\n <RangeCalendarHeading aria-hidden>\n {monthDateFormatter.format(\n state.visibleRange.start.add({ months: i }).toDate(timezoneName),\n )}\n </RangeCalendarHeading>\n {i === visibleMonths - 1 && (\n <NextButton {...nextButtonProps}>\n <ArrowRightIcon />\n </NextButton>\n )}\n </CalendarHeaderMonth>\n );\n });\n\n const monthGrids = range(0, visibleMonths).map((i) => {\n return (\n <CalendarGrid\n key={`calendar-grid-${i}`}\n state={state}\n offset={{ months: i }}\n skipFromTabOrder={i > 0}\n />\n );\n });\n\n return (\n <RangeCalendarContainer ref={calendarRef}>\n {!hidePresets && (\n <PresetsContainer padding={Spacing[3]}>\n <RangeCalendarPresets\n state={state}\n commitRange={commitRange}\n setDateMode={setDateMode}\n onPresetSelect={onPresetSelect}\n selectedPreset={selectedPreset}\n />\n </PresetsContainer>\n )}\n <Card.Body padding={Spacing[3]}>\n {/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n <CalendarContainer {...calendarProps} ref={ref}>\n {/* Calendar header is separate from grid like this to facilitate a11y. */}\n <RangeCalendarHeader>\n <VisuallyHidden isFocusable={false}>{calendarProps['aria-label']}</VisuallyHidden>\n {monthHeaders}\n </RangeCalendarHeader>\n <CalendarGrids>{monthGrids}</CalendarGrids>\n </CalendarContainer>\n </Card.Body>\n </RangeCalendarContainer>\n );\n};\n\nexport default RangeCalendar;\n","import {\n CalendarDate,\n type CalendarDateTime,\n type DateValue,\n parseAbsolute,\n toCalendarDateTime,\n toZoned,\n} from '@internationalized/date';\nimport type { DateRangePickerProps as DateRangePickerBase } from '@react-types/datepicker';\nimport type { AriaLabelingProps, RangeValue } from '@react-types/shared';\nimport { DateTime, Settings } from 'luxon';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n mergeProps,\n useButton,\n useDateRangePicker,\n useFocusWithin,\n usePress,\n VisuallyHidden,\n} from 'react-aria';\nimport { useDateRangePickerState } from 'react-stately';\nimport styled, { css } from 'styled-components';\n\nimport type { DateFilterPreset } from '@persona/design-system/lib/date-filter';\nimport { Spacing, Typography } from '@persona/design-tokens';\nimport { CircleXInverseIcon } from '@persona/icons';\n\nimport RangeCalendar from '#src/components/DatePicker/Calendar/RangeCalendar';\nimport DateField from '#src/components/DatePicker/DateField';\nimport { presetEnd } from '#src/components/DatePicker/time-range';\nimport { FormLabel } from '#src/components/FormControl';\nimport { ClearButton } from '#src/components/Input';\nimport Popover from '#src/components/Popover';\nimport { isDisabled } from '#src/lib/pseudoClass';\nimport type { InputSizes } from '#src/mixins/input';\n\nconst DateRangeContainer = styled.div`\n display: inline-flex;\n flex-direction: column;\n width: 100%;\n`;\n\nconst DateRangeInputs = styled.div<{ $wrapOnNarrow: boolean }>`\n display: flex;\n align-items: center;\n\n ${({ $wrapOnNarrow }) =>\n $wrapOnNarrow &&\n css`\n > div:first-child,\n > div:nth-child(2) {\n width: auto;\n flex: 1 0 auto;\n }\n\n /* Widest measured timezone field pair (556.5px) + 24px popover padding + 32px gutter, rounded up to the 4px grid. */\n @media (max-width: 616px) {\n flex-wrap: wrap;\n row-gap: ${Spacing[2]};\n\n > div:first-child,\n > div:nth-child(2) {\n border-radius: ${({ theme }) => theme.element.borderRadius};\n }\n\n > div:nth-child(2) {\n margin-left: 0;\n }\n }\n `}\n`;\n\nconst CustomFormLabel = styled(FormLabel)`\n margin-bottom: ${Spacing[2]};\n ${Typography.TextMediumBold};\n`;\n\nexport type DateRange = {\n startDate?: DateTime;\n endDate?: DateTime;\n};\n\nexport type DateFilterChange =\n | {\n source: 'preset';\n preset: DateFilterPreset;\n range: RangeValue<DateValue>;\n }\n | {\n source: 'calendar';\n range: RangeValue<DateValue> | null;\n }\n | {\n source: 'clear';\n };\n\n/**\n * `onChange` fires for controlled prop replay as well as user edits, so only the\n * code path that started a write can say what that write meant.\n */\ntype WriteOrigin =\n | { kind: 'interaction' }\n | { kind: 'sync' }\n | { kind: 'clear' }\n | { kind: 'preset'; preset: DateFilterPreset };\n\nexport interface DateRangePickerProps extends DateRangePickerBase<DateValue>, AriaLabelingProps {\n dateRange: DateRange;\n onChange: (range: RangeValue<DateValue> | null) => void;\n disabled?: boolean;\n size?: InputSizes;\n minDate?: DateValue;\n maxDate?: DateValue;\n label?: string | null;\n dataTest?: string;\n id?: string;\n hidePresets?: boolean;\n visibleMonths?: 1 | 2;\n className?: string;\n /**\n * Whether or not to display clear button\n */\n showClear?: boolean;\n /**\n * Called when the clear button is clicked/pressed\n */\n onClear?: () => void;\n /**\n * Additive notification of genuine user interactions. Never fires for\n * controlled prop synchronization. `onChange` is unaffected by this prop.\n */\n onDateFilterChange?: (change: DateFilterChange) => void;\n /** `undefined` infers from dates, `null` selects none, and an id selects that preset. */\n selectedPreset?: DateFilterPreset | null;\n /**\n * z-index of the calendar popover\n */\n calendarZIndex?: number;\n /**\n * Element that should contain the calendar portal.\n */\n portalContainer?: HTMLElement | null;\n}\n\nconst OpenButton = ({ onOpen, disabled }: { onOpen: () => void; disabled?: boolean }) => {\n const openCalBtnRef = useRef<HTMLButtonElement>(null);\n const { buttonProps } = useButton(\n {\n isDisabled: disabled,\n onPress: onOpen,\n },\n openCalBtnRef,\n );\n\n return (\n <button\n {...buttonProps}\n type='button'\n ref={openCalBtnRef}\n aria-label='Open calendar'\n tabIndex={-1}\n />\n );\n};\n\nconst ClearRangeButton = styled(ClearButton)`\n height: 16px;\n width: 16px;\n margin-left: ${Spacing[2]};\n\n &${isDisabled}, &:disabled {\n background-color: transparent;\n }\n`;\n\nconst DateRangePicker = ({\n granularity = 'day',\n hideTimeZone = true,\n className,\n calendarZIndex,\n portalContainer,\n onDateFilterChange,\n selectedPreset,\n ...props\n}: DateRangePickerProps) => {\n const wrapOnNarrow = granularity !== 'day' && !hideTimeZone;\n const writeOriginRef = useRef<WriteOrigin>({ kind: 'interaction' });\n const writeWithOrigin = useCallback((origin: WriteOrigin, commit: () => void) => {\n writeOriginRef.current = origin;\n try {\n commit();\n } finally {\n writeOriginRef.current = { kind: 'interaction' };\n }\n }, []);\n\n const state = useDateRangePickerState({\n granularity,\n hideTimeZone,\n ...props,\n onChange: (range) => {\n props.onChange(range);\n\n const origin = writeOriginRef.current;\n if (origin.kind === 'sync' || origin.kind === 'clear') {\n return;\n }\n if (origin.kind === 'preset' && range) {\n onDateFilterChange?.({ source: 'preset', preset: origin.preset, range });\n return;\n }\n onDateFilterChange?.({ source: 'calendar', range });\n },\n });\n const ref = useRef<HTMLDivElement>(null);\n const startFieldRef = useRef<HTMLDivElement>(null);\n const endFieldRef = useRef<HTMLDivElement>(null);\n const calendarRef = useRef<HTMLDivElement>(null);\n const [dateMode, setDateMode] = useState<'start' | 'end' | null>(null);\n // A ref, not state: focus can return to a field before a state update would commit.\n const isClosingRef = useRef(false);\n const { groupProps, startFieldProps, endFieldProps, calendarProps, labelProps } =\n useDateRangePicker({ granularity, hideTimeZone, ...props }, state, ref);\n\n const focusCalendar = useCallback(() => {\n requestAnimationFrame(() => {\n const firstFocusableCalendarElement = calendarRef.current?.querySelector<HTMLElement>(\n '[role=\"menuitem\"], button:not(:disabled), [tabindex=\"0\"]',\n );\n firstFocusableCalendarElement?.focus();\n });\n }, []);\n\n const openCalendar = useCallback(() => {\n if (!props.disabled && !state.isOpen && !isClosingRef.current) {\n state.setOpen(true);\n }\n }, [props.disabled, state]);\n\n const openCalendarWithFocus = useCallback(() => {\n openCalendar();\n focusCalendar();\n }, [focusCalendar, openCalendar]);\n\n const handlePresetSelect = useCallback(\n (preset: DateFilterPreset, commit: () => void) =>\n writeWithOrigin({ kind: 'preset', preset }, commit),\n [writeWithOrigin],\n );\n\n // Keyed on instants rather than the `DateTime` identities: a caller that parses\n // its range during render hands us new objects every commit, and syncing on that\n // would call `setValue` -> `onChange` -> re-render without end.\n const startInstant = props.dateRange.startDate?.isValid\n ? props.dateRange.startDate.toMillis()\n : undefined;\n const endInstant = props.dateRange.endDate?.isValid\n ? props.dateRange.endDate.toMillis()\n : undefined;\n\n useEffect(() => {\n // If not set, return early\n if (startInstant == null || endInstant == null) {\n return;\n }\n\n // Find out the real time by adjusting the date to the user's timezone\n const startDate = DateTime.fromMillis(startInstant).setZone(Settings.defaultZone);\n const endDate = DateTime.fromMillis(endInstant).setZone(Settings.defaultZone);\n\n if (!startDate.isValid || !endDate.isValid) {\n return;\n }\n\n // Months are 1-indexed, no translations need to happen to CalendarDates\n const startCalendar = state.hasTime\n ? parseAbsolute(startDate.toISO(), Settings.defaultZone.name)\n : new CalendarDate(startDate.year, startDate.month, startDate.day);\n const endCalendar = state.hasTime\n ? parseAbsolute(endDate.toISO(), Settings.defaultZone.name)\n : new CalendarDate(endDate.year, endDate.month, endDate.day);\n\n const dateRangeV2: RangeValue<DateValue> = {\n start: startCalendar,\n end: endCalendar,\n };\n\n writeWithOrigin({ kind: 'sync' }, () => state.setValue(dateRangeV2));\n }, [startInstant, endInstant, granularity]);\n\n // Auto-close overlay when a complete range is selected (e.g., from presets with time enabled)\n const prevValueRef = useRef<RangeValue<DateValue | null> | null>(state.value);\n // The first calendar click in time mode seeds a distinct end, which must not read as a finished range.\n const skipAutoCloseRef = useRef(false);\n useEffect(() => {\n const prevValue = prevValueRef.current;\n const currentValue = state.value;\n\n // Update ref for next comparison\n prevValueRef.current = currentValue;\n\n if (skipAutoCloseRef.current) {\n skipAutoCloseRef.current = false;\n return;\n }\n\n // Close overlay only if BOTH start and end changed simultaneously to DIFFERENT dates (e.g., preset selection)\n // Do not close during manual date selection where:\n // 1. Only one date changes at a time, OR\n // 2. Both dates are set to the same value (initial selection from empty state)\n // Use value comparison (.compare) instead of object identity to handle controlled component re-renders\n const startChanged =\n prevValue?.start && currentValue?.start\n ? prevValue.start.compare(currentValue.start) !== 0\n : prevValue?.start !== currentValue?.start;\n const endChanged =\n prevValue?.end && currentValue?.end\n ? prevValue.end.compare(currentValue.end) !== 0\n : prevValue?.end !== currentValue?.end;\n const datesAreDifferent =\n currentValue?.start &&\n currentValue?.end &&\n currentValue.start.compare(currentValue.end) !== 0;\n\n if (state.isOpen && startChanged && endChanged && datesAreDifferent) {\n state.setOpen(false);\n }\n }, [state.value, state.isOpen]);\n\n const { focusWithinProps: startFocusWithinProps } = useFocusWithin({\n onFocusWithin: () => {\n setDateMode('start');\n openCalendar();\n },\n });\n\n const { focusWithinProps: endFocusWithinProps } = useFocusWithin({\n onFocusWithin: () => {\n setDateMode('end');\n openCalendar();\n },\n });\n\n const { focusWithinProps: containerFocusProps } = useFocusWithin({\n onBlurWithin: () => {\n requestAnimationFrame(() => {\n // Wait for popover focus transitions to settle before closing.\n const activeElement = document.activeElement;\n const isFocusInDateRangeInput =\n activeElement instanceof Node && ref.current?.contains(activeElement);\n const isFocusInCalendar =\n activeElement instanceof Node && calendarRef.current?.contains(activeElement);\n\n if (isFocusInDateRangeInput || isFocusInCalendar) {\n return;\n }\n\n setDateMode(null);\n if (state.isOpen) {\n state.setOpen(false);\n }\n });\n },\n });\n\n const handleOutsideClick = (e: Event) => {\n const target = e.target as Node;\n // Don't close if clicking on the date inputs themselves\n if (ref.current?.contains(target)) {\n return;\n }\n\n // When there's a click outside of the containers + calendars, reset the highlighted date\n // Only close the calendar if it's open\n // Note: Radix UI's onInteractOutside already ensures the interaction is outside the popover content\n if (state.isOpen) {\n setDateMode(null);\n state.setOpen(false);\n }\n };\n\n const { pressProps: pressClearProps } = usePress({\n onPress: () => {\n writeWithOrigin({ kind: 'clear' }, () => state.setValue(null));\n\n if (props.onClear) {\n props.onClear();\n }\n onDateFilterChange?.({ source: 'clear' });\n },\n });\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n event.preventDefault(); // Prevent form submission\n openCalendarWithFocus();\n }\n },\n [openCalendarWithFocus],\n );\n\n const isValueNull = state.value && state.value.start == null && state.value.end == null;\n\n return (\n <DateRangeContainer data-test={props.dataTest} className={className}>\n {props.label && <CustomFormLabel {...labelProps}>{props.label}</CustomFormLabel>}\n <Popover\n open={state.isOpen}\n modal={false}\n portalProps={portalContainer ? { container: portalContainer } : undefined}\n contentProps={{\n align: 'start',\n 'aria-modal': true,\n 'aria-label': props['aria-label'] ?? undefined,\n onInteractOutside: handleOutsideClick,\n onOpenAutoFocus: (e: Event) => {\n // Field focus opens the calendar for editing, while Enter/Open calendar moves focus inside.\n e.preventDefault();\n },\n onEscapeKeyDown: () => {\n state.setOpen(false);\n // Restore focus to the date field for keyboard users\n if (dateMode) {\n const fieldRef = dateMode === 'start' ? startFieldRef : endFieldRef;\n const seg = fieldRef.current?.querySelector('[tabindex=\"0\"]');\n if (seg instanceof HTMLElement) {\n seg.focus();\n }\n }\n },\n onCloseAutoFocus: (e: Event) => {\n // Prevent Radix's default focus restoration — Escape handles its own above.\n e.preventDefault();\n isClosingRef.current = true;\n requestAnimationFrame(() => {\n isClosingRef.current = false;\n });\n },\n noPadding: true,\n style: { zIndex: calendarZIndex },\n zIndex: calendarZIndex,\n }}\n >\n <Popover.Trigger asChild>\n <DateRangeInputs\n {...mergeProps(groupProps, containerFocusProps)}\n ref={ref}\n $wrapOnNarrow={wrapOnNarrow}\n >\n {/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n <DateField\n ref={startFieldRef}\n inputPosition='start'\n focused={dateMode === 'start'}\n disabled={props.disabled}\n size={props.size}\n {...mergeProps(startFieldProps, startFocusWithinProps, { onKeyDown: handleKeyDown })}\n />\n {/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n <DateField\n ref={endFieldRef}\n inputPosition='end'\n focused={dateMode === 'end'}\n disabled={props.disabled}\n size={props.size}\n {...mergeProps(endFieldProps, endFocusWithinProps, { onKeyDown: handleKeyDown })}\n />\n {props.showClear && (\n <ClearRangeButton\n {...pressClearProps}\n type='button'\n disabled={isValueNull}\n aria-label='Clear date range'\n >\n <CircleXInverseIcon />\n </ClearRangeButton>\n )}\n <VisuallyHidden>\n <OpenButton onOpen={openCalendarWithFocus} disabled={props.disabled} />\n </VisuallyHidden>\n </DateRangeInputs>\n </Popover.Trigger>\n <RangeCalendar\n {...{ ...calendarProps, autoFocus: undefined }}\n calendarRef={calendarRef}\n setDateMode={setDateMode}\n setValue={state.setValue}\n granularity={granularity}\n hidePresets={props.hidePresets}\n visibleMonths={props.visibleMonths}\n onPresetSelect={handlePresetSelect}\n selectedPreset={selectedPreset}\n onSelectDate={(dateVal) => {\n const capToMax = <T extends DateValue>(end: T): T => {\n if (!state.hasTime || !props.maxDate) {\n return end;\n }\n const max =\n 'hour' in props.maxDate\n ? toCalendarDateTime(props.maxDate)\n : toCalendarDateTime(props.maxDate).set({\n hour: 23,\n minute: 59,\n second: 59,\n millisecond: 999,\n });\n if (toCalendarDateTime(end).compare(max) <= 0) {\n return end;\n }\n return end.set({\n year: max.year,\n month: max.month,\n day: max.day,\n hour: max.hour,\n minute: max.minute,\n second: max.second,\n millisecond: max.millisecond,\n }) as T;\n };\n /**\n * Please use caution when editing the logic below.\n * It is specific to react-aria's date picker and can be brittle.\n */\n if (dateVal) {\n const calendarDate = state.hasTime ? toCalendarDateTime(dateVal) : dateVal;\n const date = state.hasTime\n ? toZoned(calendarDate as CalendarDateTime, Settings.defaultZone.name)\n : calendarDate;\n const seededEnd = state.hasTime\n ? presetEnd(calendarDate as CalendarDateTime)\n : calendarDate;\n const emptyRangeEndValue =\n seededEnd.compare(calendarDate) < 0\n ? (calendarDate as CalendarDateTime).set({\n hour: 23,\n minute: 59,\n second: 59,\n millisecond: 999,\n })\n : seededEnd;\n const emptyRangeEnd = capToMax(\n state.hasTime\n ? toZoned(emptyRangeEndValue as CalendarDateTime, Settings.defaultZone.name)\n : emptyRangeEndValue,\n );\n // Typed endpoints are unzoned; zone them so both fields render the timezone segment.\n const toViewerZone = (value: DateValue | null) =>\n state.hasTime && value ? toZoned(value, Settings.defaultZone.name) : value;\n const start = toViewerZone(state.value.start);\n const end = toViewerZone(state.value.end);\n\n if (dateMode === 'start') {\n // Handle a case where we've deleted both dates\n if (end == null && start == null) {\n skipAutoCloseRef.current = true;\n state.setValue({\n start: date,\n end: emptyRangeEnd,\n });\n }\n // If end becomes the start\n else if (end && date.compare(end) > 0) {\n state.setValue({\n start: end,\n end: capToMax(end.set(dateVal)), // Preserve time\n });\n } else {\n state.setValue({\n // if start is not set, set it to the date or date + time value, otherwise set the dateVal to preserve time\n start: start == null ? date : start.set(dateVal),\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n\n end,\n });\n }\n setDateMode('end');\n } else {\n // Handle a case where we've deleted both dates\n if (end == null && start == null) {\n state.setValue({\n start: date,\n end: emptyRangeEnd,\n });\n }\n // If start becomes the end\n else if (start && date.compare(start) < 0) {\n state.setValue({\n start: start.set(dateVal),\n end: start,\n });\n } else {\n state.setValue({\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n start,\n // if end is not set, set it to the date or date + time value, otherwise set the dateVal to preserve time\n end: capToMax(end == null ? date : end.set(dateVal)),\n });\n }\n // Close popover and keep focus on end field\n state.setOpen(false);\n }\n }\n }}\n minDate={props.minDate}\n maxDate={props.maxDate}\n />\n </Popover>\n </DateRangeContainer>\n );\n};\n\nexport default DateRangePicker;\n"],"mappings":"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"}

package/dist/DropdownMenu-jJSHQaih.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"DropdownMenu-jJSHQaih.mjs","names":[],"sources":["../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import * as Primitive from '@radix-ui/react-dropdown-menu';\nimport type { Property } from 'csstype';\nimport {\n Children,\n type ComponentPropsWithoutRef,\n type ComponentPropsWithRef,\n type ElementType,\n type FC,\n forwardRef,\n type FunctionComponentElement,\n type Ref,\n} from 'react';\nimport styled from 'styled-components';\n\nimport Menu, {\n MenuDivider,\n MenuHeading,\n MenuItem,\n type MenuItemProps,\n} from '#src/components/Menu/Menu';\nimport { letPointerDownReachDocument } from '#src/lib/letPointerDownReachDocument';\nimport { Z_INDICES } from '#src/lib/zindex';\nimport { popoverMotion } from '#src/mixins/motion';\nimport { BASE } from '#src/variables/spacing';\n\nconst DropdownMenuContent = styled(Primitive.Content)<{ $zIndex?: Property.ZIndex }>`\n ${popoverMotion('--radix-dropdown-menu-content-transform-origin')}\n z-index: ${({ $zIndex }) => $zIndex || Z_INDICES.tooltip};\n`;\n\nexport interface DropdownMenuProps\n extends Primitive.DropdownMenuProps, Pick<Primitive.DropdownMenuContentProps, 'side' | 'align'> {\n id?: string;\n className?: string;\n\n trigger: FunctionComponentElement<any>;\n\n /**\n * Props passed to internal DropdownMenu.Content component.\n */\n contentProps?: Primitive.DropdownMenuContentProps;\n\n /**\n * Props passed to internal DropdownMenu.Trigger component.\n */\n triggerProps?: Primitive.DropdownMenuTriggerProps;\n\n /**\n * Props passed to internal DropdownMenu.Portal component.\n */\n portalProps?: Primitive.DropdownMenuPortalProps;\n\n /**\n * Whether or not to wrap menu with DropdownMenu.Portal component.\n */\n portal?: boolean;\n\n /**\n * Whether or not clicks render menu items.\n */\n disabled?: boolean;\n\n zIndex?: Property.ZIndex;\n}\n\nexport const DropdownMenu = ({\n trigger,\n children,\n side,\n align = 'end',\n contentProps,\n triggerProps,\n portalProps,\n className,\n portal = false, // Default to false for old behavior\n modal = false,\n disabled = false,\n zIndex,\n ...props\n}: DropdownMenuProps) => {\n if (Children.count(children) === 0) {\n return null;\n }\n\n const content = disabled ? null : (\n <DropdownMenuContent\n sideOffset={BASE}\n collisionPadding={BASE}\n align={align}\n side={side}\n $zIndex={zIndex}\n {...contentProps}\n onPointerDownCapture={(event) => {\n contentProps?.onPointerDownCapture?.(event);\n letPointerDownReachDocument(event);\n }}\n >\n <Menu className={className} doNotSetRole>\n {children}\n </Menu>\n </DropdownMenuContent>\n );\n\n return (\n <Primitive.Root modal={modal} {...props}>\n <Primitive.Trigger asChild {...triggerProps}>\n {trigger}\n </Primitive.Trigger>\n\n {portal ? <Primitive.Portal {...portalProps}>{content}</Primitive.Portal> : content}\n </Primitive.Root>\n );\n};\n\ninterface DropdownMenuItemProps<T extends ElementType = 'div'>\n extends MenuItemProps<T>, Omit<Primitive.DropdownMenuItemProps, 'asChild' | 'children'> {}\n\ninterface DropdownMenuItemType<T extends ElementType = 'div'> extends FC<\n DropdownMenuItemProps<T> & ComponentPropsWithRef<T>\n> {\n <T extends ElementType = 'div'>(\n props: DropdownMenuItemProps<T> & ComponentPropsWithoutRef<T>,\n ): ReturnType<FC<DropdownMenuItemProps<T> & ComponentPropsWithoutRef<T>>>;\n}\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\nconst DropdownMenuItem: DropdownMenuItemType = forwardRef(function DropdownMenuItem(\n { children, disabled, ...props },\n ref: Ref<HTMLDivElement>,\n) {\n return (\n <Primitive.Item asChild disabled={disabled} {...props}>\n <MenuItem disabled={disabled} ref={ref}>\n {children}\n </MenuItem>\n </Primitive.Item>\n );\n});\n\nexport default Object.assign(DropdownMenu, {\n Item: DropdownMenuItem,\n Heading: MenuHeading,\n Divider: MenuDivider,\n});\n"],"mappings":";;;;;;;;;;AAyBA,MAAM,sBAAsB,OAAO,UAAU,QAAQ;IACjD,cAAc,iDAAiD,CAAC;cACtD,EAAE,cAAc,WAAW,UAAU,QAAQ;;AAsC3D,MAAa,gBAAgB,EAC3B,SACA,UACA,MACA,QAAQ,OACR,cACA,cACA,aACA,WACA,SAAS,OACT,QAAQ,OACR,WAAW,OACX,QACA,GAAG,YACoB;AACvB,KAAI,SAAS,MAAM,SAAS,KAAK,EAC/B,QAAO;CAGT,MAAM,UAAU,WAAW,OACzB,oBAAC,qBAAD;EACE,YAAA;EACA,kBAAA;EACO;EACD;EACN,SAAS;EACT,GAAI;EACJ,uBAAuB,UAAU;AAC/B,iBAAc,uBAAuB,MAAM;AAC3C,+BAA4B,MAAM;;YAGpC,oBAAC,MAAD;GAAiB;GAAW,cAAA;GACzB;GACI,CAAA;EACa,CAAA;AAGxB,QACE,qBAAC,UAAU,MAAX;EAAuB;EAAO,GAAI;YAAlC,CACE,oBAAC,UAAU,SAAX;GAAmB,SAAA;GAAQ,GAAI;aAC5B;GACiB,CAAA,EAEnB,SAAS,oBAAC,UAAU,QAAX;GAAkB,GAAI;aAAc;GAA2B,CAAA,GAAG,QAC7D;;;AAgBrB,MAAM,mBAAyC,WAAW,SAAS,iBACjE,EAAE,UAAU,UAAU,GAAG,SACzB,KACA;AACA,QACE,oBAAC,UAAU,MAAX;EAAgB,SAAA;EAAkB;EAAU,GAAI;YAC9C,oBAAC,UAAD;GAAoB;GAAe;GAChC;GACQ,CAAA;EACI,CAAA;EAEnB;AAEF,IAAA,uBAAe,OAAO,OAAO,cAAc;CACzC,MAAM;CACN,SAAS;CACT,SAAS;CACV,CAAC"}

package/dist/LoadingShimmer-CpfKTSUs.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"LoadingShimmer-CpfKTSUs.mjs","names":[],"sources":["../src/components/LoadingShimmer/LoadingShimmer.tsx"],"sourcesContent":["import { motion, useReducedMotion } from 'framer-motion';\nimport type { ComponentPropsWithoutRef, FC } from 'react';\nimport styled from 'styled-components';\n\nimport { BorderRadius, Color } from '@persona/design-tokens';\n\nimport { type CssColor, withAlpha } from '#src/lib/color';\nimport { type MaybeSemanticTheme, semanticColor, semanticTokens } from '#src/lib/semanticColor';\nimport type { HeadingSize, ParagraphSize } from '#src/mixins/text';\n\n// A one-off colour predating the token set; no primitive matches it exactly.\n// oxlint-disable-next-line persona-web/no-raw-hex-colors\nconst LEGACY_SECONDARY_BAR = '#eaeaea' as CssColor;\n\n// Relay renders this under its own theme, which has neither a semantic namespace nor `theme.color`,\n// so each fallback is a constant rather than a theme expression — the latter would throw there.\nconst shimmerColors = (theme: MaybeSemanticTheme, variant: 'primary' | 'secondary') => {\n if (variant === 'secondary') {\n return {\n bar: semanticColor(theme, 'FeedbackNeutral2', LEGACY_SECONDARY_BAR),\n highlight: semanticColor(theme, 'FeedbackNeutral1', Color.CoreSlate50),\n };\n }\n\n const tokens = semanticTokens(theme);\n\n return {\n bar: semanticColor(theme, 'FeedbackNeutral1', Color.CoreSlate50),\n highlight: tokens ? withAlpha(tokens.SurfaceSecondary, tokens.Opacity25) : Color.CoreSlate25,\n };\n};\n\ninterface LoadingShimmerProps extends ComponentPropsWithoutRef<'span'> {\n height?: string;\n width?: string;\n variant?: 'primary' | 'secondary';\n}\n\ntype ShimmerContainerProps = {\n width?: string;\n height?: string;\n $variant: 'primary' | 'secondary';\n};\nconst ShimmerContainer = styled.span<ShimmerContainerProps>`\n position: relative;\n display: inline-block;\n background-color: ${({ theme, $variant }) => shimmerColors(theme, $variant).bar};\n width: ${({ width }) => width ?? '100px'};\n height: ${({ height }) => height ?? 'auto'};\n border-radius: ${BorderRadius.Md};\n overflow: hidden;\n`;\n\ntype ShimmerProps = {\n $variant: 'primary' | 'secondary';\n};\nconst Shimmer = styled(motion.span)<ShimmerProps>`\n position: absolute;\n width: 100%;\n height: 100%;\n background: ${({ theme, $variant }) =>\n `linear-gradient(90deg, transparent 0%, ${shimmerColors(theme, $variant).highlight} 50%, transparent 100%)`};\n filter: blur(4px);\n`;\n\n/**\n * Base class of all Loading Shimmer components.\n */\nexport function LoadingShimmer({\n width,\n height,\n variant = 'primary',\n ...props\n}: LoadingShimmerProps) {\n const prefersReducedMotion = useReducedMotion();\n\n return (\n <ShimmerContainer\n width={width}\n height={height}\n $variant={variant}\n aria-live='polite'\n aria-busy='true'\n data-test='loading-shimmer'\n data-loading-indicator='true'\n {...props}\n >\n {!prefersReducedMotion && (\n <Shimmer\n initial={{ x: '-100%', skew: -30 }}\n animate={{ x: '100%', skew: -30 }}\n $variant={variant}\n transition={{ repeat: Infinity, duration: 1, ease: 'easeOut' }}\n />\n )}\n </ShimmerContainer>\n );\n}\n\nexport interface LoadingShimmerHeadingProps extends LoadingShimmerProps {\n size?: HeadingSize;\n}\n\nexport const LoadingShimmerHeading = styled(LoadingShimmer)<LoadingShimmerHeadingProps>`\n height: ${({ theme, size = 'lg' }) => theme.text.heading[size].fontSize};\n`;\n\ninterface LoadingShimmerParagraphProps extends LoadingShimmerProps {\n size?: ParagraphSize;\n // eg. 200px\n width?: string;\n}\n\nexport const LoadingShimmerParagraph = styled(LoadingShimmer)<LoadingShimmerParagraphProps>`\n height: ${({ theme, size = 'md' }) => theme.text.paragraph[size].fontSize};\n`;\n\n// A \"maybe\" shimmer block that is shimmering if the `isLoading`\n// value is set to true and otherwise just displays its children\ninterface MaybeLoadingShimmerProps {\n isLoading: boolean;\n height?: string;\n width?: string;\n}\n\nexport const MaybeLoadingShimmer: FC<MaybeLoadingShimmerProps> = ({\n isLoading,\n children,\n height,\n width,\n}) => (isLoading ? <LoadingShimmer height={height} width={width} /> : <>{children}</>);\n"],"mappings":";;;;;;;AAYA,MAAM,uBAAuB;AAI7B,MAAM,iBAAiB,OAA2B,YAAqC;AACrF,KAAI,YAAY,YACd,QAAO;EACL,KAAK,cAAc,OAAO,oBAAoB,qBAAqB;EACnE,WAAW,cAAc,OAAO,oBAAoB,MAAM,YAAY;EACvE;CAGH,MAAM,SAAS,eAAe,MAAM;AAEpC,QAAO;EACL,KAAK,cAAc,OAAO,oBAAoB,MAAM,YAAY;EAChE,WAAW,SAAS,UAAU,OAAO,kBAAkB,OAAO,UAAU,GAAG,MAAM;EAClF;;AAcH,MAAM,mBAAmB,OAAO,IAA2B;;;uBAGpC,EAAE,OAAO,eAAe,cAAc,OAAO,SAAS,CAAC,IAAI;YACtE,EAAE,YAAY,SAAS,QAAQ;aAC9B,EAAE,aAAa,UAAU,OAAO;mBAC1B,aAAa,GAAG;;;AAOnC,MAAM,UAAU,OAAO,OAAO,KAAK;;;;iBAIlB,EAAE,OAAO,eACtB,0CAA0C,cAAc,OAAO,SAAS,CAAC,UAAU,yBAAyB;;;;;;AAOhH,SAAgB,eAAe,EAC7B,OACA,QACA,UAAU,WACV,GAAG,SACmB;CACtB,MAAM,uBAAuB,kBAAkB;AAE/C,QACE,oBAAC,kBAAD;EACS;EACC;EACR,UAAU;EACV,aAAU;EACV,aAAU;EACV,aAAU;EACV,0BAAuB;EACvB,GAAI;YAEH,CAAC,wBACA,oBAAC,SAAD;GACE,SAAS;IAAE,GAAG;IAAS,MAAM;IAAK;GAClC,SAAS;IAAE,GAAG;IAAQ,MAAM;IAAK;GACjC,UAAU;GACV,YAAY;IAAE,QAAQ;IAAU,UAAU;IAAG,MAAM;IAAW;GAC9D,CAAA;EAEa,CAAA;;AAQvB,MAAa,wBAAwB,OAAO,eAAe;aAC9C,EAAE,OAAO,OAAO,WAAW,MAAM,KAAK,QAAQ,MAAM,SAAS;;AAS1E,MAAa,0BAA0B,OAAO,eAAe;aAChD,EAAE,OAAO,OAAO,WAAW,MAAM,KAAK,UAAU,MAAM,SAAS;;AAW5E,MAAa,uBAAqD,EAChE,WACA,UACA,QACA,YACK,YAAY,oBAAC,gBAAD;CAAwB;CAAe;CAAS,CAAA,GAAG,oBAAA,UAAA,EAAG,UAAY,CAAA"}

package/dist/PageLayout-DgEGcZgB.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"PageLayout-DgEGcZgB.mjs","names":[],"sources":["../src/patterns/PageLayout/PageLayout.tsx","../src/patterns/PageLayout/PageLayoutFrame.tsx","../src/patterns/PageLayout/SingleColumnLayout.tsx","../src/patterns/PageLayout/SplitColumnLayout.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nexport const Backdrop = styled.div`\n position: relative;\n width: 100%;\n padding: ${Spacing[7]} ${Spacing[5]};\n\n display: flex;\n flex-direction: column;\n`;\n\nconst StyledContainer = styled('div')`\n position: relative;\n width: 100%;\n padding: 0;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n`;\n\nexport const Container = ({\n children,\n ...rest\n}: { children: ReactNode } & ComponentPropsWithoutRef<'div'>) => {\n return <StyledContainer {...rest}>{children}</StyledContainer>;\n};\n\nexport const Section = styled('div')`\n width: 100%;\n padding: ${Spacing[7]};\n`;\n","import { type ReactNode, useLayoutEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport Grid, { GRID_BREAKPOINTS, GridItem } from '#src/components/Grid';\nimport { Stack } from '#src/components/Stack';\n\nexport type PageLayoutWidth = 'standard' | 'wide';\n\nexport interface PageLayoutChromeProps {\n /**\n * `standard` uses the fixed grid (centered, max 1408px). `wide` uses the fluid grid.\n *\n * @defaultValue 'standard'\n */\n width?: PageLayoutWidth;\n /** Tab group. Sits above the page notice and scrolls with the page. Omit to skip the region and its gap. */\n tabs?: ReactNode;\n /** Page notice under the tabs. Omit to skip the region and its gap. */\n pageNotice?: ReactNode;\n}\n\nconst topPadding = (condensed: boolean) => (condensed ? Spacing[5] : Spacing[6]);\n\nconst Root = styled.div<{ $condensed: boolean; $tabs: boolean }>`\n width: 100%;\n min-width: ${GRID_BREAKPOINTS.sm - 1}px;\n padding-top: ${({ $condensed, $tabs }) => ($tabs ? Spacing[5] : topPadding($condensed))};\n padding-bottom: ${({ $condensed }) => topPadding($condensed)};\n`;\n\nconst gridMode = (width: PageLayoutWidth): 'fixed' | 'fluid' =>\n width === 'wide' ? 'fluid' : 'fixed';\n\nconst FullWidthBand = ({ mode, children }: { mode: 'fixed' | 'fluid'; children: ReactNode }) => (\n <Grid mode={mode}>\n <GridItem span={12}>{children}</GridItem>\n </Grid>\n);\n\nexport const PageLayoutFrame = ({\n width = 'standard',\n tabs,\n pageNotice,\n children,\n}: PageLayoutChromeProps & { children: ReactNode }) => {\n const mode = gridMode(width);\n const ref = useRef<HTMLDivElement>(null);\n const [condensed, setCondensed] = useState(false);\n\n useLayoutEffect(() => {\n const node = ref.current;\n if (!node) {\n return;\n }\n const update = () => setCondensed(node.offsetWidth < GRID_BREAKPOINTS.md);\n update();\n const observer = new ResizeObserver(update);\n observer.observe(node);\n return () => observer.disconnect();\n }, []);\n\n return (\n <Root ref={ref} $condensed={condensed} $tabs={Boolean(tabs)}>\n <Stack spacing={Spacing[5]}>\n {tabs && <FullWidthBand mode={mode}>{tabs}</FullWidthBand>}\n {pageNotice && <FullWidthBand mode={mode}>{pageNotice}</FullWidthBand>}\n <Grid mode={mode}>{children}</Grid>\n </Stack>\n </Root>\n );\n};\n","import type { ReactNode } from 'react';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { GridItem } from '#src/components/Grid';\nimport { Stack } from '#src/components/Stack';\n\nimport { PageLayoutFrame, type PageLayoutChromeProps } from './PageLayoutFrame';\n\nexport interface SingleColumnLayoutProps extends PageLayoutChromeProps {\n /** Primary page content. Direct children stack vertically. */\n main: ReactNode;\n}\n\nexport const SingleColumnLayout = ({ main, ...chrome }: SingleColumnLayoutProps) => (\n <PageLayoutFrame {...chrome}>\n <GridItem span={12}>\n <Stack spacing={Spacing[4]}>{main}</Stack>\n </GridItem>\n </PageLayoutFrame>\n);\n","import type { ReactNode } from 'react';\n\nimport { Spacing } from '@persona/design-tokens';\n\nimport { GridItem, type GridSpan, useGridBreakpoint } from '#src/components/Grid';\nimport { Stack } from '#src/components/Stack';\n\nimport { PageLayoutFrame, type PageLayoutChromeProps } from './PageLayoutFrame';\n\nconst SPLIT_COLUMN_SPANS = { main: 8, aside: 4 } as const satisfies Record<string, GridSpan>;\n\nexport interface SplitColumnLayoutProps extends PageLayoutChromeProps {\n /** Primary column. Direct children stack vertically and stay in this column. */\n main: ReactNode;\n /** Supporting column. Direct children stack vertically and stay in this column. */\n aside: ReactNode;\n}\n\nconst Region = ({ children }: { children: ReactNode }) => (\n <Stack spacing={Spacing[4]}>{children}</Stack>\n);\n\nconst SplitBody = ({ main, aside }: { main: ReactNode; aside: ReactNode }) => {\n const stacked = useGridBreakpoint() === 'xs';\n const mainSpan = stacked ? 12 : SPLIT_COLUMN_SPANS.main;\n const asideSpan = stacked ? 12 : SPLIT_COLUMN_SPANS.aside;\n\n return (\n <>\n <GridItem span={mainSpan}>\n <Region>{main}</Region>\n </GridItem>\n <GridItem span={asideSpan}>\n <aside>\n <Region>{aside}</Region>\n </aside>\n </GridItem>\n </>\n );\n};\n\nexport const SplitColumnLayout = ({ main, aside, ...chrome }: SplitColumnLayoutProps) => (\n <PageLayoutFrame {...chrome}>\n <SplitBody main={main} aside={aside} />\n </PageLayoutFrame>\n);\n"],"mappings":";;;;;;;AAKA,MAAa,WAAW,OAAO,GAAG;;;aAGrB,QAAQ,GAAG,GAAG,QAAQ,GAAG;;;;;AAMtC,MAAM,kBAAkB,OAAO,MAAM;;;;;;;;;AAUrC,MAAa,aAAa,EACxB,UACA,GAAG,WAC4D;AAC/D,QAAO,oBAAC,iBAAD;EAAiB,GAAI;EAAO;EAA2B,CAAA;;AAGhE,MAAa,UAAU,OAAO,MAAM;;aAEvB,QAAQ,GAAG;;;;ACVxB,MAAM,cAAc,cAAwB,YAAY,QAAQ,KAAK,QAAQ;AAE7E,MAAM,OAAO,OAAO,GAA4C;;eAEjD,iBAAiB,KAAK,EAAE;kBACrB,EAAE,YAAY,YAAa,QAAQ,QAAQ,KAAK,WAAW,WAAW,CAAE;qBACrE,EAAE,iBAAiB,WAAW,WAAW,CAAC;;AAG/D,MAAM,YAAY,UAChB,UAAU,SAAS,UAAU;AAE/B,MAAM,iBAAiB,EAAE,MAAM,eAC7B,oBAAC,MAAD;CAAY;WACV,oBAAC,UAAD;EAAU,MAAM;EAAK;EAAoB,CAAA;CACpC,CAAA;AAGT,MAAa,mBAAmB,EAC9B,QAAQ,YACR,MACA,YACA,eACqD;CACrD,MAAM,OAAO,SAAS,MAAM;CAC5B,MAAM,MAAM,OAAuB,KAAK;CACxC,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;AAEjD,uBAAsB;EACpB,MAAM,OAAO,IAAI;AACjB,MAAI,CAAC,KACH;EAEF,MAAM,eAAe,aAAa,KAAK,cAAc,iBAAiB,GAAG;AACzE,UAAQ;EACR,MAAM,WAAW,IAAI,eAAe,OAAO;AAC3C,WAAS,QAAQ,KAAK;AACtB,eAAa,SAAS,YAAY;IACjC,EAAE,CAAC;AAEN,QACE,oBAAC,MAAD;EAAW;EAAK,YAAY;EAAW,OAAO,QAAQ,KAAK;YACzD,qBAAC,OAAD;GAAO,SAAS,QAAQ;aAAxB;IACG,QAAQ,oBAAC,eAAD;KAAqB;eAAO;KAAqB,CAAA;IACzD,cAAc,oBAAC,eAAD;KAAqB;eAAO;KAA2B,CAAA;IACtE,oBAAC,MAAD;KAAY;KAAO;KAAgB,CAAA;IAC7B;;EACH,CAAA;;;;ACxDX,MAAa,sBAAsB,EAAE,MAAM,GAAG,aAC5C,oBAAC,iBAAD;CAAiB,GAAI;WACnB,oBAAC,UAAD;EAAU,MAAM;YACd,oBAAC,OAAD;GAAO,SAAS,QAAQ;aAAK;GAAa,CAAA;EACjC,CAAA;CACK,CAAA;;;ACVpB,MAAM,qBAAqB;CAAE,MAAM;CAAG,OAAO;CAAG;AAShD,MAAM,UAAU,EAAE,eAChB,oBAAC,OAAD;CAAO,SAAS,QAAQ;CAAK;CAAiB,CAAA;AAGhD,MAAM,aAAa,EAAE,MAAM,YAAmD;CAC5E,MAAM,UAAU,mBAAmB,KAAK;CACxC,MAAM,WAAW,UAAU,KAAK,mBAAmB;CACnD,MAAM,YAAY,UAAU,KAAK,mBAAmB;AAEpD,QACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,UAAD;EAAU,MAAM;YACd,oBAAC,QAAD,EAAA,UAAS,MAAc,CAAA;EACd,CAAA,EACX,oBAAC,UAAD;EAAU,MAAM;YACd,oBAAC,SAAD,EAAA,UACE,oBAAC,QAAD,EAAA,UAAS,OAAe,CAAA,EAClB,CAAA;EACC,CAAA,CACV,EAAA,CAAA;;AAIP,MAAa,qBAAqB,EAAE,MAAM,OAAO,GAAG,aAClD,oBAAC,iBAAD;CAAiB,GAAI;WACnB,oBAAC,WAAD;EAAiB;EAAa;EAAS,CAAA;CACvB,CAAA"}

package/dist/Popover-DuFjaSoq.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Popover-DuFjaSoq.mjs","names":["Card"],"sources":["../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Children, forwardRef, isValidElement, type ReactElement } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\n\nimport Card from '#src/components/Card';\nimport { Paragraph } from '#src/components/Text';\nimport { letPointerDownReachDocument } from '#src/lib/letPointerDownReachDocument';\nimport { semanticOnly } from '#src/lib/semanticColor';\nimport { popoverMotion } from '#src/mixins/motion';\nimport { semanticScrollbar } from '#src/mixins/scrollbar';\n\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\nexport const PopoverAnchor = PopoverPrimitive.Anchor;\nexport const PopoverPortal = PopoverPrimitive.Portal;\n\nexport const PopoverContent = forwardRef<\n React.ElementRef<typeof PopoverPrimitive.Content>,\n PopoverPrimitive.PopoverContentProps\n>(function PopoverContent({ onPointerDownCapture, ...props }, ref) {\n return (\n <PopoverPrimitive.Content\n {...props}\n ref={ref}\n onPointerDownCapture={(event) => {\n onPointerDownCapture?.(event);\n letPointerDownReachDocument(event);\n }}\n />\n );\n});\n\nconst PopoverContentStyled = styled(PopoverContent)<{ zIndex?: number; $maxHeight?: string }>`\n ${popoverMotion('--radix-popover-content-transform-origin')}\n z-index: ${({ zIndex }) => zIndex || 'inherit'};\n ${({ $maxHeight }) =>\n $maxHeight &&\n css`\n max-height: ${$maxHeight};\n overflow: auto;\n ${semanticScrollbar}\n `}\n`;\n\nconst PopoverCloseButton = styled(PopoverPrimitive.Close)<{ isHeader?: boolean }>`\n ${({ isHeader }) =>\n !isHeader &&\n css`\n position: absolute;\n top: 8px;\n right: 8px;\n `}\n ${({ isHeader }) =>\n isHeader &&\n css`\n height: 16px;\n `}\n background: transparent;\n border: 0;\n cursor: pointer;\n`;\n\nconst PopoverPanel = styled(Card)`\n ${semanticOnly((tokens) => `background-color: ${tokens.SurfaceElevated};`)}\n`;\n\nconst HeadingContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n`;\n\nexport const PopoverClose = (\n props: PopoverPrimitive.PopoverCloseProps & { isHeader?: boolean },\n) => {\n return (\n <PopoverCloseButton {...props}>\n <XIcon />\n </PopoverCloseButton>\n );\n};\n\nexport interface PopoverCardProps extends PopoverPrimitive.PopoverContentProps {\n /**\n * Display X button to close popover\n */\n showCloseButton?: boolean;\n\n /**\n * Remove padding from Card\n */\n noPadding?: boolean;\n\n padding?: Spacing;\n\n /**\n * Text to display in the header of the card\n */\n heading?: string;\n\n /**\n * Z-index to apply to the popover content\n */\n zIndex?: number;\n\n /**\n * Maximum height for the popover content.\n */\n maxHeight?: string;\n}\n\n/**\n * Card to be used in Popover contexts. Inherits props from Radix UI Popper.Content.\n */\nexport const PopoverCard = forwardRef<\n React.ElementRef<typeof PopoverPrimitive.Content>,\n PopoverCardProps\n>(function PopoverCard(\n { children, showCloseButton, heading, noPadding, padding, zIndex, maxHeight, ...props },\n ref,\n) {\n const header = heading && (\n <HeadingContainer>\n <Paragraph size='md' weight='bold' color='primary'>\n {heading}\n </Paragraph>\n {showCloseButton && <PopoverClose aria-label='Close' isHeader />}\n </HeadingContainer>\n );\n return (\n <PopoverContentStyled\n asChild\n sideOffset={8}\n collisionPadding={8}\n zIndex={zIndex}\n $maxHeight={maxHeight}\n {...props}\n ref={ref}\n >\n <PopoverPanel elevated>\n {!heading && showCloseButton && <PopoverClose aria-label='Close' />}\n {noPadding ? (\n <>\n {heading && header}\n {children}\n </>\n ) : (\n <Card.Body padding={padding}>\n {heading && header}\n {children}\n </Card.Body>\n )}\n </PopoverPanel>\n </PopoverContentStyled>\n );\n});\n\ninterface PopoverProps extends PopoverPrimitive.PopoverProps {\n /**\n * Component to use as trigger. Radix UI trigger component props will be merged with this element.\n */\n trigger?: ReactElement;\n\n /**\n * Props to apply to Popover.Trigger within\n */\n triggerProps?: PopoverPrimitive.PopoverTriggerProps;\n\n /**\n * An optional element to position the Popover.Content against.\n * If this part is not used, the content will position alongside the trigger.\n */\n anchor?: ReactElement<PopoverPrimitive.PopoverAnchorProps>;\n\n /**\n * Props to apply to Popover.Card within\n */\n contentProps?: PopoverCardProps;\n\n /**\n * Render content within a portal\n */\n portal?: boolean;\n\n /**\n * Props applied to Radix UI Portal component\n */\n portalProps?: PopoverPrimitive.PopoverPortalProps;\n}\n\nconst Popover = ({\n children,\n trigger,\n triggerProps,\n contentProps,\n anchor,\n portal = true,\n portalProps,\n ...props\n}: PopoverProps) => {\n let triggerElem;\n let contentElem;\n let anchorElem = anchor;\n\n const renderChildren = Children.toArray(children).filter((child) => {\n if (isValidElement(child)) {\n switch (child.type) {\n case PopoverPrimitive.Trigger:\n triggerElem = child;\n return false;\n case PopoverCard:\n case PopoverContent:\n case PopoverPrimitive.Content:\n contentElem = child;\n break;\n case PopoverPrimitive.Anchor:\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n anchorElem = child;\n return false;\n }\n }\n\n return true;\n });\n\n const content = contentElem || <PopoverCard {...contentProps}>{renderChildren}</PopoverCard>;\n\n return (\n <PopoverPrimitive.Root {...props}>\n {triggerElem ||\n (trigger && (\n <PopoverTrigger asChild {...triggerProps}>\n {trigger}\n </PopoverTrigger>\n ))}\n {anchorElem}\n {portal ? <PopoverPortal {...portalProps}>{content}</PopoverPortal> : content}\n </PopoverPrimitive.Root>\n );\n};\n\nexport default Object.assign(Popover, {\n Trigger: PopoverTrigger,\n Anchor: PopoverAnchor,\n Portal: PopoverPortal,\n Content: PopoverContent,\n Card: PopoverCard,\n Close: PopoverClose,\n});\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,iBAAiB,iBAAiB;AAC/C,MAAa,gBAAgB,iBAAiB;AAC9C,MAAa,gBAAgB,iBAAiB;AAE9C,MAAa,iBAAiB,WAG5B,SAAS,eAAe,EAAE,sBAAsB,GAAG,SAAS,KAAK;AACjE,QACE,oBAAC,iBAAiB,SAAlB;EACE,GAAI;EACC;EACL,uBAAuB,UAAU;AAC/B,0BAAuB,MAAM;AAC7B,+BAA4B,MAAM;;EAEpC,CAAA;EAEJ;AAEF,MAAM,uBAAuB,OAAO,eAAe;IAC/C,cAAc,2CAA2C,CAAC;cAChD,EAAE,aAAa,UAAU,UAAU;KAC5C,EAAE,iBACH,cACA,GAAG;oBACa,WAAW;;QAEvB,kBAAkB;MACpB;;AAGN,MAAM,qBAAqB,OAAO,iBAAiB,MAAM;KACpD,EAAE,eACH,CAAC,YACD,GAAG;;;;MAID;KACD,EAAE,eACH,YACA,GAAG;;MAED;;;;;AAMN,MAAM,eAAe,OAAOA,aAAK;IAC7B,cAAc,WAAW,qBAAqB,OAAO,gBAAgB,GAAG,CAAC;;AAG7E,MAAM,mBAAmB,OAAO,GAAG;;;;;AAMnC,MAAa,gBACX,UACG;AACH,QACE,oBAAC,oBAAD;EAAoB,GAAI;YACtB,oBAAC,OAAD,EAAS,CAAA;EACU,CAAA;;;;;AAoCzB,MAAa,cAAc,WAGzB,SAAS,YACT,EAAE,UAAU,iBAAiB,SAAS,WAAW,SAAS,QAAQ,WAAW,GAAG,SAChF,KACA;CACA,MAAM,SAAS,WACb,qBAAC,kBAAD,EAAA,UAAA,CACE,oBAAC,WAAD;EAAW,MAAK;EAAK,QAAO;EAAO,OAAM;YACtC;EACS,CAAA,EACX,mBAAmB,oBAAC,cAAD;EAAc,cAAW;EAAQ,UAAA;EAAW,CAAA,CAC/C,EAAA,CAAA;AAErB,QACE,oBAAC,sBAAD;EACE,SAAA;EACA,YAAY;EACZ,kBAAkB;EACV;EACR,YAAY;EACZ,GAAI;EACC;YAEL,qBAAC,cAAD;GAAc,UAAA;aAAd,CACG,CAAC,WAAW,mBAAmB,oBAAC,cAAD,EAAc,cAAW,SAAU,CAAA,EAClE,YACC,qBAAA,YAAA,EAAA,UAAA,CACG,WAAW,QACX,SACA,EAAA,CAAA,GAEH,qBAACA,aAAK,MAAN;IAAoB;cAApB,CACG,WAAW,QACX,SACS;MAED;;EACM,CAAA;EAEzB;AAmCF,MAAM,WAAW,EACf,UACA,SACA,cACA,cACA,QACA,SAAS,MACT,aACA,GAAG,YACe;CAClB,IAAI;CACJ,IAAI;CACJ,IAAI,aAAa;CAEjB,MAAM,iBAAiB,SAAS,QAAQ,SAAS,CAAC,QAAQ,UAAU;AAClE,MAAI,eAAe,MAAM,CACvB,SAAQ,MAAM,MAAd;GACE,KAAK,iBAAiB;AACpB,kBAAc;AACd,WAAO;GACT,KAAK;GACL,KAAK;GACL,KAAK,iBAAiB;AACpB,kBAAc;AACd;GACF,KAAK,iBAAiB;AAEpB,iBAAa;AACb,WAAO;;AAIb,SAAO;GACP;CAEF,MAAM,UAAU,eAAe,oBAAC,aAAD;EAAa,GAAI;YAAe;EAA6B,CAAA;AAE5F,QACE,qBAAC,iBAAiB,MAAlB;EAAuB,GAAI;YAA3B;GACG,eACE,WACC,oBAAC,gBAAD;IAAgB,SAAA;IAAQ,GAAI;cACzB;IACc,CAAA;GAEpB;GACA,SAAS,oBAAC,eAAD;IAAe,GAAI;cAAc;IAAwB,CAAA,GAAG;GAChD;;;AAI5B,IAAA,kBAAe,OAAO,OAAO,SAAS;CACpC,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,MAAM;CACN,OAAO;CACR,CAAC"}