npm - @persona/design-system - Versions diffs - 0.1.9 → 0.2.0 - Mend

@persona/design-system 0.1.9 → 0.2.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.

Files changed (433) hide show

package/dist/{DatePicker-Bw79p-Lx.mjs → DatePicker-CK2D9jvG.mjs} RENAMED Viewed

@@ -1,17 +1,17 @@
+import { t as Card_default } from "./Card-CLTkZLKr.mjs";
 import { isDisabled, isFocused, isFocusedVisible, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
+import { Z_INDICES } from "./lib/zindex.mjs";
 import { focusWithinOutline } from "./mixins/focus.mjs";
 import inputMixin from "./mixins/input.mjs";
-import { t as Card_default } from "./Card-BMCB9eFC.mjs";
-import { Z_INDICES } from "./lib/zindex.mjs";
-import { t as IconButton } from "./IconButton-P8w0JDI5.mjs";
-import { c as MenuList, s as MenuItem } from "./Menu-DmeMgN-i.mjs";
-import { t as ClearButton } from "./Input-QC6xla6I.mjs";
-import { s as Popover_default } from "./Popover-BkDpDdaO.mjs";
-import { a as FormLabel } from "./FormControl-CFU9uKF7.mjs";
+import { t as IconButton } from "./IconButton-Bi4kdsbV.mjs";
+import { c as MenuList, s as MenuItem } from "./Menu-DDXR9uHy.mjs";
+import { t as ClearButton } from "./Input-CSOxMzlt.mjs";
+import { s as Popover_default } from "./Popover-5y0p85Sw.mjs";
+import { a as FormLabel } from "./FormControl-CFYlkv7E.mjs";
 import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
+import { forwardRef, memo, useCallback, useEffect, useRef, useState } from "react";
 import styled, { css } from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, memo, useCallback, useEffect, useRef, useState } from "react";
 import { ArrowLeftIcon, ArrowRightIcon, CircleXInverseIcon } from "@persona/icons";
 import { range } from "lodash/fp.js";
 import { VisuallyHidden, mergeProps, useButton, useCalendar, useCalendarCell, useCalendarGrid, useDateFormatter, useDatePicker, useDateRangePicker, useFocusWithin, useLocale, usePress, useRangeCalendar } from "react-aria";
@@ -352,10 +352,10 @@ const DatePicker = (props) => {
 	const fieldRef = useRef(null);
 	const { groupProps, fieldProps, calendarProps } = useDatePicker(props, state, ref);
 	const calendarRef = useRef(null);
-	const [isClosing, setIsClosing] = useState(false);
+	const isClosingRef = useRef(false);
 	const { focusWithinProps } = useFocusWithin({
 		onFocusWithin: () => {
-			if (!state.isOpen && !isClosing) state.setOpen(true);
+			if (!state.isOpen && !isClosingRef.current) state.setOpen(true);
 		},
 		onBlurWithin: (e) => {
 			if (e.relatedTarget && !calendarRef?.current?.contains(e.relatedTarget) && state.isOpen) state.setOpen(false);
@@ -390,12 +390,14 @@ const DatePicker = (props) => {
 				},
 				onCloseAutoFocus: (e) => {
 					e.preventDefault();
-					setIsClosing(true);
+					isClosingRef.current = true;
 					if (fieldRef.current) {
 						const firstEditableSegment = fieldRef.current.querySelector("[tabindex=\"0\"]");
 						if (firstEditableSegment instanceof HTMLElement) firstEditableSegment.focus();
 					}
-					requestAnimationFrame(() => setIsClosing(false));
+					requestAnimationFrame(() => {
+						isClosingRef.current = false;
+					});
 				},
 				noPadding: true
 			},
@@ -579,8 +581,7 @@ const RangeCalendarContainer = styled.div`
 const PresetsContainer = styled(Card_default.Body)`
   border-right: 1px solid ${Color.BorderHairline};
 `;
-const RangeCalendar = ({ calendarRef, onSelectDate, minDate, maxDate, hidePresets, setDateMode, setValue, granularity, ...props }) => {
-	const visibleMonths = 2;
+const RangeCalendar = ({ calendarRef, onSelectDate, minDate, maxDate, hidePresets, visibleMonths = 2, setDateMode, setValue, granularity, ...props }) => {
 	const { locale } = useLocale();
 	const timezoneName = Settings.defaultZone.name;
 	const rangeCalendarState = useRangeCalendarState({
@@ -710,7 +711,7 @@ const DateRangePicker = ({ granularity = "day", hideTimeZone = true, className,
 	const endFieldRef = useRef(null);
 	const calendarRef = useRef(null);
 	const [dateMode, setDateMode] = useState(null);
-	const [isClosing, setIsClosing] = useState(false);
+	const isClosingRef = useRef(false);
 	const { groupProps, startFieldProps, endFieldProps, calendarProps, labelProps } = useDateRangePicker({
 		granularity,
 		hideTimeZone,
@@ -722,12 +723,8 @@ const DateRangePicker = ({ granularity = "day", hideTimeZone = true, className,
 		});
 	}, []);
 	const openCalendar = useCallback(() => {
-		if (!props.disabled && !state.isOpen && !isClosing) state.setOpen(true);
-	}, [
-		isClosing,
-		props.disabled,
-		state
-	]);
+		if (!props.disabled && !state.isOpen && !isClosingRef.current) state.setOpen(true);
+	}, [props.disabled, state]);
 	const openCalendarWithFocus = useCallback(() => {
 		openCalendar();
 		focusCalendar();
@@ -822,8 +819,10 @@ const DateRangePicker = ({ granularity = "day", hideTimeZone = true, className,
 				},
 				onCloseAutoFocus: (e) => {
 					e.preventDefault();
-					setIsClosing(true);
-					requestAnimationFrame(() => setIsClosing(false));
+					isClosingRef.current = true;
+					requestAnimationFrame(() => {
+						isClosingRef.current = false;
+					});
 				},
 				noPadding: true,
 				style: { zIndex: calendarZIndex },
@@ -872,6 +871,7 @@ const DateRangePicker = ({ granularity = "day", hideTimeZone = true, className,
 				setValue: state.setValue,
 				granularity,
 				hidePresets: props.hidePresets,
+				visibleMonths: props.visibleMonths,
 				onSelectDate: (dateVal) => {
 					/**
 					* Please use caution when editing the logic below.
@@ -919,4 +919,4 @@ const DateRangePicker = ({ granularity = "day", hideTimeZone = true, className,
 //#endregion
 export { Calendar as i, DatePicker as n, DateField as r, DateRangePicker as t };
-//# sourceMappingURL=DatePicker-Bw79p-Lx.mjs.map
+//# sourceMappingURL=DatePicker-CK2D9jvG.mjs.map

package/dist/DatePicker-CK2D9jvG.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DatePicker-CK2D9jvG.mjs","names":["useLocale","OpenButton","Popover","Card","RangeCalendarPresets","Popover"],"sources":["../components/DatePicker/Calendar/CalendarBase.tsx","../components/DatePicker/Calendar/CalendarCell.tsx","../components/DatePicker/Calendar/CalendarGrid.tsx","../components/DatePicker/common.ts","../components/DatePicker/Calendar/Calendar.tsx","../components/DatePicker/DateField.tsx","../components/DatePicker/DatePicker.tsx","../components/DatePicker/Calendar/RangeCalendarPresets.tsx","../components/DatePicker/Calendar/RangeCalendar.tsx","../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';\nimport { IconButton } from 'design-system/components/Button';\nimport type { IconButtonProps } from 'design-system/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\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\n ${({ isSelected }) =>\n isSelected &&\n css`\n background: ${Color.CorePurple100};\n `}\n\n ${({ isSelectionStart }) =>\n isSelectionStart &&\n css`\n background: ${Color.BackgroundButtonPrimary};\n color: ${Color.TextInverse};\n border-top-left-radius: ${BorderRadius.Sm};\n border-bottom-left-radius: ${BorderRadius.Sm};\n `}\n\n ${({ isSelectionEnd }) =>\n isSelectionEnd &&\n css`\n background: ${Color.BackgroundButtonPrimary};\n color: ${Color.TextInverse};\n border-top-right-radius: ${BorderRadius.Sm};\n border-bottom-right-radius: ${BorderRadius.Sm};\n `}\n\n ${({ isDisabled }) =>\n isDisabled &&\n css`\n color: ${Color.CoreSlate300};\n `}\n\n ${({ isInvalid }) =>\n isInvalid &&\n css`\n background: ${Color.BackgroundButtonDanger};\n color: ${Color.TextInverse};\n `}\n\n &:focus-visible {\n outline: 2px solid ${Color.BorderFocus};\n outline-offset: -2px;\n box-shadow: ${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 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 ${Color.BorderFocus};\n outline-offset: 1px;\n }\n`;\n\nconst CalendarGridDayHeader = styled.th`\n ${Typography.TextMedium};\n color: ${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';\nimport {\n CalendarButton,\n CalendarContainer,\n CalendarHeader,\n CalendarHeading,\n} from 'design-system/components/DatePicker/Calendar/CalendarBase';\nimport CalendarGrid from 'design-system/components/DatePicker/Calendar/CalendarGrid';\nimport { createCalendar } from 'design-system/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';\nimport { createCalendar } from 'design-system/components/DatePicker/common';\nimport { isFocused, isFocusedVisible, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { focusWithinOutline } from 'design-system/mixins/focus';\nimport inputMixin, { type InputMixinProps, type InputSizes } from 'design-system/mixins/input';\nimport type PseudoClassProps from 'design-system/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 ${Color.BorderFocus};\n outline-offset: 1px;\n background-color: ${Color.CorePurple200};\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: ${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 }) => 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<InputMixinProps & { $inputPosition: 'start' | 'end' }>`\n ${inputMixin};\n display: flex;\n padding-left: ${Spacing[2]};\n padding-right: ${Spacing[2]};\n line-height: 1;\n position: relative;\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 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 'design-system/components/DatePicker/Calendar/Calendar';\nimport DateField from 'design-system/components/DatePicker/DateField';\nimport Popover from 'design-system/components/Popover';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport type { InputSizes } from 'design-system/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 { Color } from '@persona/design-tokens';\nimport { MenuItem, MenuList } from 'design-system/components/Menu';\nimport { isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\n\ninterface DateRangePreset {\n label: string;\n range: RangeValue<CalendarDate>;\n}\n\nconst getDefaultPresets = (tz: string) => {\n const now = today(tz);\n return [\n {\n label: 'Last 7 days',\n range: {\n start: now.subtract({ days: 7 }),\n end: now,\n },\n },\n {\n label: 'Last 14 days',\n range: {\n start: now.subtract({ days: 14 }),\n end: now,\n },\n },\n {\n label: 'Last 30 days',\n range: {\n start: now.subtract({ days: 30 }),\n end: now,\n },\n },\n {\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 label: 'Last month',\n range: {\n start: startOfMonth(now.subtract({ months: 1 })),\n end: endOfMonth(now.subtract({ months: 1 })),\n },\n },\n {\n label: 'This year',\n range: {\n start: startOfYear(now),\n end: now,\n },\n },\n {\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}\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 ${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}\n\nconst PresetButton = ({ state, preset, isSelected, setDateMode, ...props }: PresetButtonProps) => {\n const ref = useRef<HTMLDivElement>();\n const { buttonProps } = useButton(\n {\n onPress: () => {\n state.setValue(preset.range);\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 state,\n setDateMode,\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 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 state={state}\n setDateMode={setDateMode}\n isSelected={i === selectedPresetIndex}\n />\n ))}\n </MenuList>\n </Container>\n );\n};\n\n// Memoize to prevent re-renders when irrelevant state properties change\n// Only re-render when the actual selected date range (state.value) changes\nconst arePropsEqual = (\n prevProps: DateRangePickerPresetsProps,\n nextProps: DateRangePickerPresetsProps,\n) => {\n // Only care about the selected date range, not internal calendar state like isInvalid, visibleRange, etc.\n const prevValue = prevProps.state.value;\n const nextValue = nextProps.state.value;\n\n // If both are null/undefined, they're equal\n if (!prevValue && !nextValue) {\n return true;\n }\n // If only one is null/undefined, they're different\n if (!prevValue || !nextValue) {\n return false;\n }\n\n // Compare the actual date values\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 CalendarDate, type DateValue, toCalendarDateTime } from '@internationalized/date';\nimport { range } from 'lodash/fp';\nimport { Settings } from 'luxon';\nimport { type Ref, 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 { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { ArrowLeftIcon, ArrowRightIcon } from '@persona/icons';\nimport Card from 'design-system/components/Card';\nimport {\n CalendarButton,\n CalendarContainer,\n CalendarHeader,\n CalendarHeading,\n} from 'design-system/components/DatePicker/Calendar/CalendarBase';\nimport CalendarGrid from 'design-system/components/DatePicker/Calendar/CalendarGrid';\nimport RangeCalendarPresets from 'design-system/components/DatePicker/Calendar/RangeCalendarPresets';\nimport { createCalendar } from 'design-system/components/DatePicker/common';\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 ${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 /**\n * From setValue of DateRangePicker\n */\n setValue: (value: DateRange | null) => void;\n granularity: 'day' | 'hour' | 'minute' | 'second';\n}\n\nconst RangeCalendar = ({\n calendarRef,\n onSelectDate,\n minDate,\n maxDate,\n hidePresets,\n visibleMonths = 2,\n setDateMode,\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: toCalendarDateTime(value.start),\n end: toCalendarDateTime(value.end),\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 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 state={state} setDateMode={setDateMode} />\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 DateValue,\n parseAbsolute,\n toCalendarDateTime,\n} from '@internationalized/date';\nimport type { DateRangePickerProps as DateRangePickerBase } from '@react-types/datepicker';\nimport type { AriaLabelingProps, RangeValue } from '@react-types/shared';\nimport { type 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 from 'styled-components';\n\nimport { Spacing, Typography } from '@persona/design-tokens';\nimport { CircleXInverseIcon } from '@persona/icons';\nimport RangeCalendar from 'design-system/components/DatePicker/Calendar/RangeCalendar';\nimport DateField from 'design-system/components/DatePicker/DateField';\nimport { FormLabel } from 'design-system/components/FormControl';\nimport { ClearButton } from 'design-system/components/Input';\nimport Popover from 'design-system/components/Popover';\nimport { isDisabled } from 'design-system/lib/pseudoClass';\nimport type { InputSizes } from 'design-system/mixins/input';\n\nconst DateRangeContainer = styled.div`\n display: inline-flex;\n flex-direction: column;\n width: 100%;\n`;\n\nconst DateRangeInputs = styled.div`\n display: flex;\n align-items: center;\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 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 * 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 ...props\n}: DateRangePickerProps) => {\n const state = useDateRangePickerState({ granularity, hideTimeZone, ...props });\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 useEffect(() => {\n // If not set, return early\n if (!props.dateRange.startDate || !props.dateRange.endDate) {\n return;\n }\n\n if (!props.dateRange.startDate.isValid || !props.dateRange.endDate.isValid) {\n return;\n }\n\n // Find out the real time by adjusting the date to the user's timezone\n const startDate = props.dateRange.startDate.setZone(Settings.defaultZone);\n const endDate = props.dateRange.endDate.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 state.setValue(dateRangeV2);\n }, [props.dateRange.startDate, props.dateRange.endDate, 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 useEffect(() => {\n const prevValue = prevValueRef.current;\n const currentValue = state.value;\n\n // Update ref for next comparison\n prevValueRef.current = currentValue;\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 state.setValue(null);\n\n if (props.onClear) {\n props.onClear();\n }\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 {...mergeProps(groupProps, containerFocusProps)} ref={ref}>\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 onSelectDate={(dateVal) => {\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 date = state.hasTime ? toCalendarDateTime(dateVal) : dateVal;\n\n if (dateMode === 'start') {\n // Handle a case where we've deleted both dates\n if (state.value.end == null && state.value.start == null) {\n state.setValue({\n start: date,\n end: date,\n });\n }\n // If end becomes the start\n else if (state.value.end && date.compare(state.value.end) > 0) {\n state.setValue({\n start: state.value.end,\n end: state.value.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: state.value.start == null ? date : state.value.start.set(dateVal),\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n\n end: state.value.end,\n });\n }\n setDateMode('end');\n } else {\n // Handle a case where we've deleted both dates\n if (state.value.end == null && state.value.start == null) {\n state.setValue({\n start: date,\n end: date,\n });\n }\n // If start becomes the end\n else if (state.value.start && date.compare(state.value.start) < 0) {\n state.setValue({\n start: state.value.start.set(dateVal),\n end: state.value.start,\n });\n } else {\n state.setValue({\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n start: state.value.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: state.value.end == null ? date : state.value.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/DatePicker.d.mts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { n as InputSizes } from "./input-Bv5fKt5J.mjs";
+import { n as InputSizes } from "./input-D3Qd6dI8.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { DateValue } from "@internationalized/date";
 import { DatePickerProps as DatePickerProps$1 } from "@react-types/datepicker";

package/dist/DateRangePicker.d.mts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { n as InputSizes } from "./input-Bv5fKt5J.mjs";
+import { n as InputSizes } from "./input-D3Qd6dI8.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { DateTime } from "luxon";
 import { DateValue } from "@internationalized/date";
@@ -21,6 +21,7 @@ interface DateRangePickerProps extends DateRangePickerProps$1<DateValue>, AriaLa
   dataTest?: string;
   id?: string;
   hidePresets?: boolean;
+  visibleMonths?: 1 | 2;
   className?: string;
   /**
    * Whether or not to display clear button

package/dist/DateValueControl.d.mts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { t as ValueControlProps } from "./types-D7ppqnNj.mjs";
+import { t as ValueControlProps } from "./types-BKEwt0uq.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region components/DataTable/TableControls/FiltersV2/value-controls/DateValueControl/DateValueControl.d.ts

package/dist/{DropdownButton-BI3IFJun.mjs → DropdownButton-CaM0itat.mjs} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { n as Button } from "./IconButton-P8w0JDI5.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-D25WBCah.mjs";
+import { n as Button } from "./IconButton-Bi4kdsbV.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-B4f3LNoW.mjs";
 import { jsx } from "react/jsx-runtime";
 import { CaretDownIcon } from "@persona/icons";
 //#region components/DropdownButton/DropdownButton.tsx
@@ -23,4 +23,4 @@ const DropdownButton = ({ children, menuItems, menuProps, side, ...props }) => {
 //#endregion
 export { DropdownButton as t };
-//# sourceMappingURL=DropdownButton-BI3IFJun.mjs.map
+//# sourceMappingURL=DropdownButton-CaM0itat.mjs.map

package/dist/{DropdownButton-BI3IFJun.mjs.map → DropdownButton-CaM0itat.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropdownButton-~~BI3IFJun~~.mjs","names":["DropdownMenu"],"sources":["../components/DropdownButton/DropdownButton.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\n\nimport { CaretDownIcon } from '@persona/icons';\nimport Button, { type ButtonProps } from 'design-system/components/Button';\nimport DropdownMenu, {\n type DropdownMenuProps,\n} from 'design-system/components/DropdownMenu/DropdownMenu';\n\nexport interface DropdownButtonProps extends ButtonProps {\n /*\n Use `DropdownMenu.Item` components to render the menu items.\n /\n menuItems: ReactNode;\n /\n Additional props will be spread to the inner `<DropdownMenu>` component.\n /\n menuProps?: Partial<Omit<DropdownMenuProps, 'trigger'>>;\n /\n The side of the dropdown menu.\n /\n side?: DropdownMenuProps['side'];\n}\n\n/\n A button that opens a dropdown menu.\n */\nexport const DropdownButton: FC<DropdownButtonProps> = ({\n children,\n menuItems,\n menuProps,\n side,\n ...props\n}) => {\n return (\n <DropdownMenu\n trigger={\n <Button variant='basic' width='auto' suffixIcon={<CaretDownIcon />} {...props}>\n {children}\n </Button>\n }\n side={side}\n {...menuProps}\n >\n {menuItems}\n </DropdownMenu>\n );\n};\n\nexport default DropdownButton;\n"],"mappings":";;;;;;;;AA0BA,MAAa,kBAA2C,EACtD,UACA,WACA,WACA,MACA,GAAG,YACC;AACJ,QACE,oBAACA,sBAAD;EACE,SACE,oBAAC,QAAD;GAAQ,SAAQ;GAAQ,OAAM;GAAO,YAAY,oBAAC,eAAD,EAAiB,CAAA;GAAE,GAAI;GACrE;GACM,CAAA;EAEL;EACN,GAAI;YAEH;EACY,CAAA"}
1	+ {"version":3,"file":"DropdownButton-CaM0itat.mjs","names":["DropdownMenu"],"sources":["../components/DropdownButton/DropdownButton.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\n\nimport { CaretDownIcon } from '@persona/icons';\nimport Button, { type ButtonProps } from 'design-system/components/Button';\nimport DropdownMenu, {\n type DropdownMenuProps,\n} from 'design-system/components/DropdownMenu/DropdownMenu';\n\nexport interface DropdownButtonProps extends ButtonProps {\n /*\n Use `DropdownMenu.Item` components to render the menu items.\n /\n menuItems: ReactNode;\n /\n Additional props will be spread to the inner `<DropdownMenu>` component.\n /\n menuProps?: Partial<Omit<DropdownMenuProps, 'trigger'>>;\n /\n The side of the dropdown menu.\n /\n side?: DropdownMenuProps['side'];\n}\n\n/\n A button that opens a dropdown menu.\n */\nexport const DropdownButton: FC<DropdownButtonProps> = ({\n children,\n menuItems,\n menuProps,\n side,\n ...props\n}) => {\n return (\n <DropdownMenu\n trigger={\n <Button variant='basic' width='auto' suffixIcon={<CaretDownIcon />} {...props}>\n {children}\n </Button>\n }\n side={side}\n {...menuProps}\n >\n {menuItems}\n </DropdownMenu>\n );\n};\n\nexport default DropdownButton;\n"],"mappings":";;;;;;;;AA0BA,MAAa,kBAA2C,EACtD,UACA,WACA,WACA,MACA,GAAG,YACC;AACJ,QACE,oBAACA,sBAAD;EACE,SACE,oBAAC,QAAD;GAAQ,SAAQ;GAAQ,OAAM;GAAO,YAAY,oBAAC,eAAD,EAAiB,CAAA;GAAE,GAAI;GACrE;GACM,CAAA;EAEL;EACN,GAAI;YAEH;EACY,CAAA"}

package/dist/DropdownButton.d.mts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as ButtonProps } from "./Button-Vd5O4DUp.mjs";
-import { n as DropdownMenuProps } from "./DropdownMenu-D6nfAsi0.mjs";
+import { r as ButtonProps } from "./Button-KCl4uRtU.mjs";
+import { n as DropdownMenuProps } from "./DropdownMenu-Bgho2AsJ.mjs";
 import { FC, ReactNode } from "react";
 //#region components/DropdownButton/DropdownButton.d.ts

package/dist/{DropdownMenu-D25WBCah.mjs → DropdownMenu-B4f3LNoW.mjs} RENAMED Viewed

@@ -1,9 +1,9 @@
 import "./variables/spacing.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
-import { a as MenuDivider, i as Menu, o as MenuHeading, s as MenuItem } from "./Menu-DmeMgN-i.mjs";
+import { a as MenuDivider, i as Menu, o as MenuHeading, s as MenuItem } from "./Menu-DDXR9uHy.mjs";
+import { Children, forwardRef } from "react";
 import styled from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Children, forwardRef } from "react";
 import * as Primitive from "@radix-ui/react-dropdown-menu";
 //#region components/DropdownMenu/DropdownMenu.tsx
 const DropdownMenuContent = styled(Primitive.Content)`
@@ -57,4 +57,4 @@ var DropdownMenu_default = Object.assign(DropdownMenu, {
 //#endregion
 export { DropdownMenu_default as n, DropdownMenu as t };
-//# sourceMappingURL=DropdownMenu-D25WBCah.mjs.map
+//# sourceMappingURL=DropdownMenu-B4f3LNoW.mjs.map

package/dist/{DropdownMenu-D25WBCah.mjs.map → DropdownMenu-B4f3LNoW.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropdownMenu-~~D25WBCah~~.mjs","names":[],"sources":["../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 'design-system/components/Menu/Menu';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { BASE } from 'design-system/variables/spacing';\n\nconst DropdownMenuContent = styled(Primitive.Content)<{ $zIndex?: Property.ZIndex }>`\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 >\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":";;;;;;;;AAuBA,MAAM,sBAAsB,OAAO,UAAU,QAAQ;cACvC,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;YAEJ,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"}
1	+ {"version":3,"file":"DropdownMenu-B4f3LNoW.mjs","names":[],"sources":["../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 'design-system/components/Menu/Menu';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { BASE } from 'design-system/variables/spacing';\n\nconst DropdownMenuContent = styled(Primitive.Content)<{ $zIndex?: Property.ZIndex }>`\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 >\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":";;;;;;;;AAuBA,MAAM,sBAAsB,OAAO,UAAU,QAAQ;cACvC,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;YAEJ,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/{DropdownMenu-D6nfAsi0.d.mts → DropdownMenu-Bgho2AsJ.d.mts} RENAMED Viewed

@@ -1,7 +1,7 @@
-import { l as MenuItemProps, s as MenuHeadingProps } from "./Menu-Bv8dsrz6.mjs";
+import { l as MenuItemProps, s as MenuHeadingProps } from "./Menu-BLtjpLst.mjs";
+import { ComponentPropsWithRef, ComponentPropsWithoutRef, ElementType, FC, FunctionComponentElement } from "react";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import { ComponentPropsWithRef, ComponentPropsWithoutRef, ElementType, FC, FunctionComponentElement } from "react";
 import * as Primitive from "@radix-ui/react-dropdown-menu";
 import { Property } from "csstype";
@@ -72,4 +72,4 @@ declare const _default: (({
 };
 //#endregion
 export { DropdownMenuProps as n, _default as r, DropdownMenu as t };
-//# sourceMappingURL=DropdownMenu-D6nfAsi0.d.mts.map
+//# sourceMappingURL=DropdownMenu-Bgho2AsJ.d.mts.map

package/dist/DropdownMenu.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as DropdownMenuProps, r as _default, t as DropdownMenu } from "./DropdownMenu-D6nfAsi0.mjs";
+import { n as DropdownMenuProps, r as _default, t as DropdownMenu } from "./DropdownMenu-Bgho2AsJ.mjs";
 export { DropdownMenu, DropdownMenuProps, _default as default };

package/dist/{ErrorProps-CN2XjaOX.d.mts → ErrorProps-DX50vo-U.d.mts} RENAMED Viewed

@@ -5,4 +5,4 @@ interface ErrorProps {
 }
 //#endregion
 export { ErrorProps as t };
-//# sourceMappingURL=ErrorProps-CN2XjaOX.d.mts.map
+//# sourceMappingURL=ErrorProps-DX50vo-U.d.mts.map

package/dist/ErrorProps.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as ErrorProps } from "./ErrorProps-CN2XjaOX.mjs";
+import { t as ErrorProps } from "./ErrorProps-DX50vo-U.mjs";
 export { ErrorProps as default };

package/dist/{FieldRegistry-rqSkjchY.d.mts → FieldRegistry-COyIA4VU.d.mts} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { a as FilterField, c as FilterOperator } from "./types-D58IoRx6.mjs";
+import { a as FilterField, c as FilterOperator } from "./types-mb3woqzE.mjs";
 //#region components/DataTable/TableControls/FiltersV2/FieldRegistry.d.ts
 /**
@@ -119,4 +119,4 @@ declare function buildFieldRegistry(resource: string, fieldKeyToInfo: Record<str
 }): FieldRegistry;
 //#endregion
 export { RawFieldInfo as n, buildFieldRegistry as r, FieldRegistry as t };
-//# sourceMappingURL=FieldRegistry-rqSkjchY.d.mts.map
+//# sourceMappingURL=FieldRegistry-COyIA4VU.d.mts.map

package/dist/FieldRegistry.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as RawFieldInfo, r as buildFieldRegistry, t as FieldRegistry } from "./FieldRegistry-rqSkjchY.mjs";
+import { n as RawFieldInfo, r as buildFieldRegistry, t as FieldRegistry } from "./FieldRegistry-COyIA4VU.mjs";
 export { FieldRegistry, RawFieldInfo, buildFieldRegistry };

package/dist/{FilterBar-D3LiIy1-.d.mts → FilterBar-CS2YjiTr.d.mts} RENAMED Viewed

@@ -1,6 +1,6 @@
-import { d as FilterSize, f as FilterStateV2 } from "./types-D58IoRx6.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-rqSkjchY.mjs";
-import { n as ValueControlResolver } from "./value-control-resolver-CE-bqdAl.mjs";
+import { d as FilterSize, f as FilterStateV2 } from "./types-mb3woqzE.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-COyIA4VU.mjs";
+import { n as ValueControlResolver } from "./value-control-resolver-CiGEHQAc.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region components/DataTable/TableControls/FiltersV2/FilterBar/FilterBar.d.ts
@@ -88,6 +88,8 @@ interface FilterBarProps {
    * Return a nullish value to use the built-in resolver.
    */
   valueControlResolver?: ValueControlResolver;
+  /** Host element used by filter editor portals. */
+  portalContainer?: HTMLElement | null;
 }
 declare function FilterBar({
   registry,
@@ -96,8 +98,9 @@ declare function FilterBar({
   advancedRulesEnabled,
   singleUseFields,
   size,
-  valueControlResolver
+  valueControlResolver,
+  portalContainer
 }: FilterBarProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { FilterBarProps as n, FilterBar as t };
-//# sourceMappingURL=FilterBar-D3LiIy1-.d.mts.map
+//# sourceMappingURL=FilterBar-CS2YjiTr.d.mts.map

package/dist/FilterBar.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as FilterBarProps, t as FilterBar } from "./FilterBar-D3LiIy1-.mjs";
+import { n as FilterBarProps, t as FilterBar } from "./FilterBar-CS2YjiTr.mjs";
 export { FilterBarProps, FilterBar as default };

package/dist/FilterPickerMenu.d.mts CHANGED Viewed

@@ -1,7 +1,7 @@
-import { a as FilterField, d as FilterSize } from "./types-D58IoRx6.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-rqSkjchY.mjs";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { a as FilterField, d as FilterSize } from "./types-mb3woqzE.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-COyIA4VU.mjs";
 import { HTMLAttributes } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region components/DataTable/TableControls/FiltersV2/FilterPickerMenu/FilterPickerMenu.d.ts
 /**

package/dist/FilterPill.d.mts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { a as FilterField, d as FilterSize, l as FilterRule } from "./types-D58IoRx6.mjs";
+import { a as FilterField, d as FilterSize, l as FilterRule } from "./types-mb3woqzE.mjs";
 import * as _$react from "react";
 import { HTMLAttributes } from "react";

package/dist/FilterPopover.d.mts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { a as FilterField, c as FilterOperator, d as FilterSize } from "./types-D58IoRx6.mjs";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { a as FilterField, c as FilterOperator, d as FilterSize } from "./types-mb3woqzE.mjs";
 import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region components/DataTable/TableControls/FiltersV2/FilterPopover/FilterPopover.d.ts
 /**
@@ -57,6 +57,15 @@ interface FilterPopoverProps {
    * passed to any DropdownMenu items.
    */
   size?: FilterSize;
+  /**
+   * Element to mount the editor into instead of `document.body`. Supplying one
+   * hands the host responsibility for the editor's stacking and clipping, so
+   * viewport collision handling is dropped: the editor stays pinned below its
+   * pill and the host's own scroll box decides how much of it is visible. The
+   * container must be a containing block for fixed positioning (`contain`,
+   * `transform`, …) for that clipping to apply.
+   */
+  portalContainer?: HTMLElement | null;
 }
 /**
  * The single-rule editor popover. Renders a Radix `Popover` anchored on
@@ -80,7 +89,8 @@ declare const FilterPopover: ({
   trigger,
   open,
   onOpenChange,
-  size
+  size,
+  portalContainer
 }: FilterPopoverProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { FilterPopoverProps, FilterPopover as default };

package/dist/FloatValueControl.d.mts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { t as ValueControlProps } from "./types-D7ppqnNj.mjs";
+import { t as ValueControlProps } from "./types-BKEwt0uq.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region components/DataTable/TableControls/FiltersV2/value-controls/FloatValueControl/FloatValueControl.d.ts

package/dist/{FormControl-CFU9uKF7.mjs → FormControl-CFYlkv7E.mjs} RENAMED Viewed

@@ -1,10 +1,10 @@
-import { a as Tooltip, n as TextWithDashedUnderline } from "./Tooltip-BvDbmXak.mjs";
+import { a as Tooltip, n as TextWithDashedUnderline } from "./Tooltip-B-DDlRMw.mjs";
 import { n as useFormGroup } from "./useFormGroup-DWVW7A9f.mjs";
 import { n as useFormField, t as FormControlContext } from "./useFormField-DhYd6bNn.mjs";
 import { Color, Spacing, Typography } from "@persona/design-tokens";
+import { Children, forwardRef, isValidElement, useMemo } from "react";
 import styled, { css } from "styled-components";
 import { jsx } from "react/jsx-runtime";
-import { Children, forwardRef, isValidElement, useMemo } from "react";
 import uniqueId from "lodash/fp/uniqueId.js";
 import { Root } from "@radix-ui/react-label";
 //#region components/FormControl/FormControl.tsx
@@ -165,4 +165,4 @@ const FormControl = forwardRef(function FormControl({ children, hasError, hasWar
 //#endregion
 export { FormLabel as a, FormInputContainer as i, ErrorText as n, HelperText as o, FormControl as r, WarningText as s, Container as t };
-//# sourceMappingURL=FormControl-CFU9uKF7.mjs.map
+//# sourceMappingURL=FormControl-CFYlkv7E.mjs.map

package/dist/{FormControl-CFU9uKF7.mjs.map → FormControl-CFYlkv7E.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormControl-CFU9uKF7.mjs","names":[],"sources":["../components/FormControl/FormControl.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-label';\nimport uniqueId from 'lodash/fp/uniqueId';\nimport {\n Children,\n type ComponentPropsWithoutRef,\n forwardRef,\n isValidElement,\n type ReactNode,\n useMemo,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport useFormField, {\n FormControlContext,\n type FormControlContextProps,\n} from 'design-system/components/FormControl/useFormField';\nimport Tooltip, { TextWithDashedUnderline } from 'design-system/components/Tooltip';\nimport type ErrorProps from 'design-system/types/ErrorProps';\n\ntype LabelSizes = 'md' \| 'sm';\n\ninterface StyledLabelProps {\n $size?: LabelSizes;\n}\n\nconst LabelBase = styled(Root)<StyledLabelProps>`\n ${({ $size }) => {\n switch ($size) {\n default:\n case 'md':\n return css`\n ${Typography.TextMedium};\n `;\n case 'sm':\n return css`\n ${Typography.TextSmall};\n `;\n }\n }}\n\n color: ${({ theme }) => theme.color.text.primary};\n`;\n\nexport interface FormLabelProps extends ComponentPropsWithoutRef<typeof Root> {\n tooltip?: ReactNode;\n size?: LabelSizes;\n side?: 'top' \| 'right' \| 'bottom' \| 'left';\n labelTooltipZIndex?: number;\n}\n\nexport const FormLabel = ({\n tooltip,\n side,\n size,\n children,\n labelTooltipZIndex,\n ...props\n}: FormLabelProps) => {\n const field = useFormField({ labelId: props.id });\n const formGroup = useFormGroup();\n const labelProps = {\n id: field.labelId,\n htmlFor: field.inputId,\n ...props,\n };\n\n // Use labelTooltipZIndex from props, then from form group context\n const effectivelabelTooltipZIndex = labelTooltipZIndex ?? formGroup.labelTooltipZIndex;\n\n if (tooltip) {\n return (\n <Tooltip\n size={size}\n trigger={\n <LabelBase {...labelProps} $size={size}>\n <TextWithDashedUnderline>{children}</TextWithDashedUnderline>\n </LabelBase>\n }\n side={side}\n {...(effectivelabelTooltipZIndex != null && { zIndex: effectivelabelTooltipZIndex })}\n >\n {tooltip}\n </Tooltip>\n );\n }\n\n return (\n <LabelBase {...labelProps} $size={size}>\n {children}\n </LabelBase>\n );\n};\n\n/*\n Used to target an input field within a FormControl.\n /\nexport const FormInputContainer = styled.div``;\n\nconst HelperTextBase = styled.div<ErrorProps>`\n ${Typography.TextSmall};\n line-height: 1;\n color: ${({ theme, hasWarning, hasError }) =>\n hasError\n ? theme.color.variants.danger.default\n : hasWarning\n ? Color.CoreOrange900\n : theme.color.text.secondary};\n`;\n\ninterface HelperTextProps extends ComponentPropsWithoutRef<'div'>, ErrorProps {}\n\nexport const HelperText = forwardRef<HTMLDivElement, HelperTextProps>(\n function HelperText(props, ref) {\n const field = useFormField({ helperTextId: props.id });\n return (\n <HelperTextBase\n hasError={field.hasError}\n hasWarning={field.hasWarning}\n id={field.helperTextId}\n ref={ref}\n {...props}\n />\n );\n },\n);\n\nexport const ErrorText = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(\n function ErrorText(props, ref) {\n const field = useFormField({ errorTextId: props.id });\n return <HelperTextBase hasError id={field.errorTextId} ref={ref} {...props} />;\n },\n);\n\nexport const WarningText = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(\n function WarningText(props, ref) {\n const field = useFormField({ warningTextId: props.id });\n return <HelperTextBase hasWarning id={field.warningTextId} ref={ref} {...props} />;\n },\n);\n\nexport const Container = styled.div<{\n $configField?: boolean;\n $hasRightActions?: boolean;\n $configFieldInputWidth?: string;\n}>`\n display: flex;\n ${({ $configField, $hasRightActions, $configFieldInputWidth }) =>\n $configField\n ? $hasRightActions\n ? css`\n flex-direction: column;\n `\n : css`\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: ${Spacing[4]};\n min-width: 288px;\n\n > ${FormInputContainer} {\n display: flex;\n flex-direction: row-reverse;\n width: ${$configFieldInputWidth ?? '50%'};\n min-width: 180px;\n }\n\n &:has(textarea) {\n flex-direction: column;\n align-items: flex-start;\n gap: ${Spacing[1]};\n\n > ${FormInputContainer} {\n width: 100%;\n }\n }\n `\n : css`\n flex-direction: column;\n margin-bottom: ${Spacing[3]};\n `}\n\n > :not(:first-child) {\n margin-top: ${({ $configField, $hasRightActions }) =>\n $hasRightActions ? Spacing[1] : $configField ? Spacing[0] : Spacing[2]};\n }\n\n > ${HelperTextBase} {\n margin-top: ${Spacing[1]};\n }\n`;\n\nexport interface FormControlBaseProps extends ErrorProps {\n inputId?: string;\n disabled?: boolean;\n /*\n Whether to render the form field as a config field.\n * This will remove the label and helper text.\n /\n configField?: boolean;\n /\n Whether the form field has right actions.\n /\n hasRightActions?: boolean;\n /\n Override the width of the form input container when `configField` is true.\n * Accepts any valid CSS width value (e.g. `'33%'`, `'66.67%'`).\n * Defaults to `'50%'`.\n */\n configFieldInputWidth?: string;\n}\n\nexport interface FormControlProps extends ComponentPropsWithoutRef<'div'>, FormControlBaseProps {}\n\nexport const FormControl = forwardRef<HTMLDivElement, FormControlProps>(function FormControl(\n {\n children,\n hasError,\n hasWarning,\n inputId,\n disabled,\n configField,\n hasRightActions,\n configFieldInputWidth,\n ...props\n }: FormControlProps,\n ref,\n) {\n const generatedId = useMemo(() => uniqueId('pds_form_control__'), []);\n\n const initFormField: FormControlContextProps = {\n hasError,\n hasWarning,\n disabled,\n inputId: inputId ?? generatedId,\n configField,\n };\n\n Children.map(children, (child: ReactNode) => {\n if (isValidElement(child)) {\n switch (child.type) {\n case FormLabel: {\n initFormField.labelId = child.props.id ?? `${initFormField.inputId}-label`;\n break;\n }\n case HelperText: {\n initFormField.helperTextId = child.props.id ?? `${initFormField.inputId}-help-text`;\n break;\n }\n case ErrorText: {\n initFormField.errorTextId = child.props.id ?? `${initFormField.inputId}-error-text`;\n break;\n }\n case WarningText: {\n initFormField.warningTextId = child.props.id ?? `${initFormField.inputId}-warning-text`;\n break;\n }\n }\n }\n });\n\n const field = useFormField(initFormField);\n\n return (\n <FormControlContext.Provider value={field}>\n <Container\n ref={ref}\n $configField={field.configField}\n $hasRightActions={hasRightActions}\n $configFieldInputWidth={configFieldInputWidth}\n {...props}\n >\n {children}\n </Container>\n </FormControlContext.Provider>\n );\n});\n\nexport default FormControl;\n"],"mappings":"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"}
1	+ {"version":3,"file":"FormControl-CFYlkv7E.mjs","names":[],"sources":["../components/FormControl/FormControl.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-label';\nimport uniqueId from 'lodash/fp/uniqueId';\nimport {\n Children,\n type ComponentPropsWithoutRef,\n forwardRef,\n isValidElement,\n type ReactNode,\n useMemo,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport useFormField, {\n FormControlContext,\n type FormControlContextProps,\n} from 'design-system/components/FormControl/useFormField';\nimport Tooltip, { TextWithDashedUnderline } from 'design-system/components/Tooltip';\nimport type ErrorProps from 'design-system/types/ErrorProps';\n\ntype LabelSizes = 'md' \| 'sm';\n\ninterface StyledLabelProps {\n $size?: LabelSizes;\n}\n\nconst LabelBase = styled(Root)<StyledLabelProps>`\n ${({ $size }) => {\n switch ($size) {\n default:\n case 'md':\n return css`\n ${Typography.TextMedium};\n `;\n case 'sm':\n return css`\n ${Typography.TextSmall};\n `;\n }\n }}\n\n color: ${({ theme }) => theme.color.text.primary};\n`;\n\nexport interface FormLabelProps extends ComponentPropsWithoutRef<typeof Root> {\n tooltip?: ReactNode;\n size?: LabelSizes;\n side?: 'top' \| 'right' \| 'bottom' \| 'left';\n labelTooltipZIndex?: number;\n}\n\nexport const FormLabel = ({\n tooltip,\n side,\n size,\n children,\n labelTooltipZIndex,\n ...props\n}: FormLabelProps) => {\n const field = useFormField({ labelId: props.id });\n const formGroup = useFormGroup();\n const labelProps = {\n id: field.labelId,\n htmlFor: field.inputId,\n ...props,\n };\n\n // Use labelTooltipZIndex from props, then from form group context\n const effectivelabelTooltipZIndex = labelTooltipZIndex ?? formGroup.labelTooltipZIndex;\n\n if (tooltip) {\n return (\n <Tooltip\n size={size}\n trigger={\n <LabelBase {...labelProps} $size={size}>\n <TextWithDashedUnderline>{children}</TextWithDashedUnderline>\n </LabelBase>\n }\n side={side}\n {...(effectivelabelTooltipZIndex != null && { zIndex: effectivelabelTooltipZIndex })}\n >\n {tooltip}\n </Tooltip>\n );\n }\n\n return (\n <LabelBase {...labelProps} $size={size}>\n {children}\n </LabelBase>\n );\n};\n\n/*\n Used to target an input field within a FormControl.\n /\nexport const FormInputContainer = styled.div``;\n\nconst HelperTextBase = styled.div<ErrorProps>`\n ${Typography.TextSmall};\n line-height: 1;\n color: ${({ theme, hasWarning, hasError }) =>\n hasError\n ? theme.color.variants.danger.default\n : hasWarning\n ? Color.CoreOrange900\n : theme.color.text.secondary};\n`;\n\ninterface HelperTextProps extends ComponentPropsWithoutRef<'div'>, ErrorProps {}\n\nexport const HelperText = forwardRef<HTMLDivElement, HelperTextProps>(\n function HelperText(props, ref) {\n const field = useFormField({ helperTextId: props.id });\n return (\n <HelperTextBase\n hasError={field.hasError}\n hasWarning={field.hasWarning}\n id={field.helperTextId}\n ref={ref}\n {...props}\n />\n );\n },\n);\n\nexport const ErrorText = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(\n function ErrorText(props, ref) {\n const field = useFormField({ errorTextId: props.id });\n return <HelperTextBase hasError id={field.errorTextId} ref={ref} {...props} />;\n },\n);\n\nexport const WarningText = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(\n function WarningText(props, ref) {\n const field = useFormField({ warningTextId: props.id });\n return <HelperTextBase hasWarning id={field.warningTextId} ref={ref} {...props} />;\n },\n);\n\nexport const Container = styled.div<{\n $configField?: boolean;\n $hasRightActions?: boolean;\n $configFieldInputWidth?: string;\n}>`\n display: flex;\n ${({ $configField, $hasRightActions, $configFieldInputWidth }) =>\n $configField\n ? $hasRightActions\n ? css`\n flex-direction: column;\n `\n : css`\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: ${Spacing[4]};\n min-width: 288px;\n\n > ${FormInputContainer} {\n display: flex;\n flex-direction: row-reverse;\n width: ${$configFieldInputWidth ?? '50%'};\n min-width: 180px;\n }\n\n &:has(textarea) {\n flex-direction: column;\n align-items: flex-start;\n gap: ${Spacing[1]};\n\n > ${FormInputContainer} {\n width: 100%;\n }\n }\n `\n : css`\n flex-direction: column;\n margin-bottom: ${Spacing[3]};\n `}\n\n > :not(:first-child) {\n margin-top: ${({ $configField, $hasRightActions }) =>\n $hasRightActions ? Spacing[1] : $configField ? Spacing[0] : Spacing[2]};\n }\n\n > ${HelperTextBase} {\n margin-top: ${Spacing[1]};\n }\n`;\n\nexport interface FormControlBaseProps extends ErrorProps {\n inputId?: string;\n disabled?: boolean;\n /*\n Whether to render the form field as a config field.\n * This will remove the label and helper text.\n /\n configField?: boolean;\n /\n Whether the form field has right actions.\n /\n hasRightActions?: boolean;\n /\n Override the width of the form input container when `configField` is true.\n * Accepts any valid CSS width value (e.g. `'33%'`, `'66.67%'`).\n * Defaults to `'50%'`.\n */\n configFieldInputWidth?: string;\n}\n\nexport interface FormControlProps extends ComponentPropsWithoutRef<'div'>, FormControlBaseProps {}\n\nexport const FormControl = forwardRef<HTMLDivElement, FormControlProps>(function FormControl(\n {\n children,\n hasError,\n hasWarning,\n inputId,\n disabled,\n configField,\n hasRightActions,\n configFieldInputWidth,\n ...props\n }: FormControlProps,\n ref,\n) {\n const generatedId = useMemo(() => uniqueId('pds_form_control__'), []);\n\n const initFormField: FormControlContextProps = {\n hasError,\n hasWarning,\n disabled,\n inputId: inputId ?? generatedId,\n configField,\n };\n\n Children.map(children, (child: ReactNode) => {\n if (isValidElement(child)) {\n switch (child.type) {\n case FormLabel: {\n initFormField.labelId = child.props.id ?? `${initFormField.inputId}-label`;\n break;\n }\n case HelperText: {\n initFormField.helperTextId = child.props.id ?? `${initFormField.inputId}-help-text`;\n break;\n }\n case ErrorText: {\n initFormField.errorTextId = child.props.id ?? `${initFormField.inputId}-error-text`;\n break;\n }\n case WarningText: {\n initFormField.warningTextId = child.props.id ?? `${initFormField.inputId}-warning-text`;\n break;\n }\n }\n }\n });\n\n const field = useFormField(initFormField);\n\n return (\n <FormControlContext.Provider value={field}>\n <Container\n ref={ref}\n $configField={field.configField}\n $hasRightActions={hasRightActions}\n $configFieldInputWidth={configFieldInputWidth}\n {...props}\n >\n {children}\n </Container>\n </FormControlContext.Provider>\n );\n});\n\nexport default FormControl;\n"],"mappings":"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"}