wip

pan-kot · pan-kot · commit 59af1b1e5f13 · 2026-03-25T13:58:41.000+01:00
diff --git a/src/calendar/grid/index.tsx b/src/calendar/grid/index.tsx
@@ -47,22 +47,24 @@ export interface GridProps {
   renderDateAnnouncement: (date: Date, isOnCurrentDate: boolean) => string;
   isSameDate: (date: Date, baseDate: Date) => boolean;
   onGridKeyDownHandler: (event: React.KeyboardEvent<HTMLElement>) => void;
+  referrerId?: string;
 }
 
 interface GridCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
   disabledReason?: string;
+  referrerId?: string;
 }
 
 const GridCell = forwardRef((props: GridCellProps, focusedDateRef: React.Ref<HTMLTableCellElement>) => {
-  const { disabledReason, ...rest } = props;
+  const { disabledReason, referrerId, ...rest } = props;
   const isDisabledWithReason = !!disabledReason;
   const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);
-  const ref = useRef<HTMLTableCellElement>(null);
+  const cellRef = useRef<HTMLTableCellElement>(null);
   const [showTooltip, setShowTooltip] = useState(false);
 
   return (
     <td
-      ref={useMergeRefs(focusedDateRef, ref)}
+      ref={useMergeRefs(focusedDateRef, cellRef)}
       {...(isDisabledWithReason ? targetProps : {})}
       {...rest}
       onFocus={() => (isDisabledWithReason ? setShowTooltip(true) : undefined)}
@@ -77,9 +79,10 @@ const GridCell = forwardRef((props: GridCellProps, focusedDateRef: React.Ref<HTM
           {showTooltip && (
             <Tooltip
               className={styles['disabled-reason-tooltip']}
-              getTrack={() => ref.current}
+              getTrack={() => cellRef.current}
               content={disabledReason!}
               onEscape={() => setShowTooltip(false)}
+              referrerId={referrerId}
             />
           )}
         </>
@@ -105,6 +108,7 @@ export default function Grid({
   renderDateAnnouncement,
   isSameDate,
   onGridKeyDownHandler,
+  referrerId,
 }: GridProps) {
   const focusedDateRef = useRef<HTMLTableCellElement>(null);
 
@@ -166,6 +170,7 @@ export default function Grid({
                     [styles['calendar-date-dense']]: denseGrid,
                   })}
                   disabledReason={isDisabledWithReason ? disabledReason : undefined}
+                  referrerId={referrerId}
                 >
                   <span className={styles['date-inner']} aria-hidden="true">
                     {renderDate(date)}
diff --git a/src/calendar/internal.tsx b/src/calendar/internal.tsx
@@ -26,6 +26,8 @@ import { getBaseMonth } from './utils/navigation-month';
 
 import styles from './styles.css.js';
 
+type InternalCalendarProps = CalendarProps & InternalBaseComponentProps & { referrerId?: string };
+
 export default function Calendar({
   value,
   locale = '',
@@ -39,11 +41,12 @@ export default function Calendar({
   __internalRootRef,
   i18nStrings,
   granularity = 'day',
+  referrerId,
   previousMonthAriaLabel,
   nextMonthAriaLabel,
   todayAriaLabel,
   ...rest
-}: CalendarProps & InternalBaseComponentProps) {
+}: InternalCalendarProps) {
   checkControlled('Calendar', 'value', value, 'onChange', onChange);
 
   const baseProps = getBaseProps(rest);
@@ -188,6 +191,7 @@ export default function Calendar({
             renderDateAnnouncement={renderDateAnnouncement}
             isSameDate={isSameDate}
             onGridKeyDownHandler={onGridKeyDownHandler}
+            referrerId={referrerId}
           />
         </div>
       </div>
diff --git a/src/date-picker/index.tsx b/src/date-picker/index.tsx
@@ -180,6 +180,9 @@ const DatePicker = React.forwardRef(
 
     baseProps.className = clsx(baseProps.className, styles.root, styles['date-picker-container']);
 
+    const referrerId = useUniqueId();
+    console.log('referrerId', referrerId);
+
     return (
       <div {...baseProps} ref={mergedRef} onKeyDown={!disabled && !readOnly ? onWrapperKeyDownHandler : undefined}>
         {disabled || readOnly ? (
@@ -195,6 +198,7 @@ const DatePicker = React.forwardRef(
             expandToViewport={expandToViewport}
             scrollable={false}
             dropdownId={dropdownId}
+            referrerId={referrerId}
             content={
               isDropDownOpen ? (
                 <FocusLock className={styles['focus-lock']} autoFocus={true}>
@@ -220,6 +224,7 @@ const DatePicker = React.forwardRef(
                         nextMonthAriaLabel: i18nStrings?.nextMonthAriaLabel ?? nextMonthAriaLabel,
                         previousMonthAriaLabel: i18nStrings?.previousMonthAriaLabel ?? previousMonthAriaLabel,
                       }}
+                      referrerId={referrerId}
                     />
                     <InternalLiveRegion id={calendarDescriptionId} hidden={true} tagName="span">
                       {getBaseDateLabel({ date: baseDate, granularity, locale: normalizedLocale })}
diff --git a/src/date-range-picker/calendar/grids/grid-cell.tsx b/src/date-range-picker/calendar/grids/grid-cell.tsx
@@ -12,10 +12,11 @@ import testutilStyles from '../../test-classes/styles.css.js';
 
 interface GridCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
   disabledReason?: string;
+  referrerId?: string;
 }
 
 export const GridCell = forwardRef((props: GridCellProps, focusedDateRef: React.Ref<HTMLTableCellElement>) => {
-  const { disabledReason, ...rest } = props;
+  const { disabledReason, referrerId, ...rest } = props;
   const isDisabledWithReason = !!disabledReason;
   const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);
   const ref = useRef<HTMLTableCellElement>(null);
@@ -73,6 +74,7 @@ export const GridCell = forwardRef((props: GridCellProps, focusedDateRef: React.
               getTrack={() => ref.current}
               content={disabledReason!}
               onEscape={() => setShowTooltip(false)}
+              referrerId={referrerId}
             />
           )}
         </>
diff --git a/src/date-range-picker/calendar/grids/grid.tsx b/src/date-range-picker/calendar/grids/grid.tsx
@@ -86,6 +86,7 @@ export function Grid({
   className,
   startOfWeek: rawStartOfWeek = 0,
   granularity = 'day',
+  referrerId,
 }: GridProps) {
   const baseDateTime = baseDate?.getTime();
   const i18n = useInternalI18n('date-range-picker');
@@ -275,6 +276,7 @@ export function Grid({
                       aria-disabled={!isEnabled}
                       tabIndex={tabIndex}
                       disabledReason={isDisabledWithReason ? disabledReason : undefined}
+                      referrerId={referrerId}
                       {...handlers}
                     >
                       <span className={styles[`${granularity}-inner`]} aria-hidden="true">
diff --git a/src/date-range-picker/calendar/grids/index.tsx b/src/date-range-picker/calendar/grids/index.tsx
@@ -62,6 +62,7 @@ export const Grids = ({
   headingIdPrefix,
   startOfWeek = 0,
   granularity = 'day',
+  referrerId,
 }: SelectGridProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [gridHasFocus, setGridHasFocus] = useState(false);
@@ -196,6 +197,7 @@ export const Grids = ({
             className={testutilStyles['first-grid']}
             baseDate={addPages(baseDate, -1)}
             ariaLabelledby={`${headingIdPrefix}-prev${pageUnit}`}
+            referrerId={referrerId}
           />
         )}
         <Grid
@@ -204,6 +206,7 @@ export const Grids = ({
           className={testutilStyles['second-grid']}
           baseDate={baseDate}
           ariaLabelledby={`${headingIdPrefix}-current${pageUnit}`}
+          referrerId={referrerId}
         />
       </InternalSpaceBetween>
     </div>
diff --git a/src/date-range-picker/calendar/grids/interfaces.ts b/src/date-range-picker/calendar/grids/interfaces.ts
@@ -34,6 +34,7 @@ export interface GridProps extends GridBaseProps, Required<Pick<CalendarProps, '
   currentMonthAriaLabel?: string;
   startOfWeek?: DayIndex;
   todayAriaLabel?: string;
+  referrerId?: string;
 }
 
 export interface SelectGridProps extends GridBaseProps, Pick<CalendarProps, 'granularity'> {
@@ -53,4 +54,5 @@ export interface SelectGridProps extends GridBaseProps, Pick<CalendarProps, 'gra
   startOfWeek?: DayIndex;
   todayAriaLabel?: string;
   currentMonthAriaLabel?: string;
+  referrerId?: string;
 }
diff --git a/src/date-range-picker/calendar/index.tsx b/src/date-range-picker/calendar/index.tsx
@@ -52,6 +52,7 @@ export default function DateRangePickerCalendar({
   dateInputFormat,
   customAbsoluteRangeControl,
   granularity = 'day',
+  referrerId,
 }: DateRangePickerCalendarProps) {
   const isSingleGrid = useMobile();
   const isMonthPicker = granularity === 'month';
@@ -273,6 +274,7 @@ export default function DateRangePickerCalendar({
               selectedStartDate={value?.start?.date ? parseDate(value.start.date, !isMonthPicker) : null}
               selectedEndDate={value?.end?.date ? parseDate(value.end.date, !isMonthPicker) : null}
               headingIdPrefix={headingIdPrefix}
+              referrerId={referrerId}
             />
           </div>
 
diff --git a/src/date-range-picker/calendar/interfaces.ts b/src/date-range-picker/calendar/interfaces.ts
@@ -55,6 +55,7 @@ export interface DateRangePickerCalendarProps
   value: DateRangePickerProps.PendingAbsoluteValue;
   setValue: React.Dispatch<React.SetStateAction<DateRangePickerProps.PendingAbsoluteValue>>;
   i18nStrings?: RangeCalendarI18nStrings;
+  referrerId?: string;
 }
 
 export interface RangeInputsProps
diff --git a/src/date-range-picker/dropdown.tsx b/src/date-range-picker/dropdown.tsx
@@ -62,6 +62,7 @@ interface DateRangePickerDropdownProps
   isSingleGrid: boolean;
   customAbsoluteRangeControl: DateRangePickerProps.AbsoluteRangeControl | undefined;
   renderRelativeRangeContent: DateRangePickerProps.RelativeRangeControl | undefined;
+  referrerId?: string;
 }
 
 export function DateRangePickerDropdown({
@@ -91,6 +92,7 @@ export function DateRangePickerDropdown({
   customRelativeRangeUnits,
   renderRelativeRangeContent,
   granularity = 'day',
+  referrerId,
 }: DateRangePickerDropdownProps) {
   const i18n = useInternalI18n('date-range-picker');
   const isMonthPicker = granularity === 'month';
@@ -216,6 +218,7 @@ export function DateRangePickerDropdown({
                       dateInputFormat={dateInputFormat}
                       customAbsoluteRangeControl={customAbsoluteRangeControl}
                       granularity={granularity}
+                      referrerId={referrerId}
                     />
                   )}
 
diff --git a/src/date-range-picker/index.tsx b/src/date-range-picker/index.tsx
@@ -308,6 +308,7 @@ const DateRangePicker = React.forwardRef(
     );
 
     const mergedRef = useMergeRefs(rootRef, __internalRootRef);
+    const referrerId = useUniqueId();
 
     return (
       <div
@@ -328,6 +329,7 @@ const DateRangePicker = React.forwardRef(
           trigger={trigger}
           expandToViewport={expandToViewport}
           dropdownId={dropdownId}
+          referrerId={referrerId}
           content={
             /* Reset form field context to prevent a wrapper form field from labelling all inputs inside the dropdown. */
             <ResetContextsForModal>
@@ -359,6 +361,7 @@ const DateRangePicker = React.forwardRef(
                   customRelativeRangeUnits={customRelativeRangeUnits}
                   renderRelativeRangeContent={renderRelativeRangeContent}
                   granularity={granularity}
+                  referrerId={referrerId}
                 />
               )}
             </ResetContextsForModal>
diff --git a/src/internal/components/dropdown/index.tsx b/src/internal/components/dropdown/index.tsx
@@ -197,6 +197,7 @@ const Dropdown = ({
   ariaLabel,
   ariaLabelledby,
   ariaDescribedby,
+  referrerId: externalReferrerId,
 }: DropdownProps) => {
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const triggerRef = useRef<HTMLDivElement | null>(null);
@@ -459,7 +460,8 @@ const Dropdown = ({
     };
   }, [open, expandToViewport, isMobile]);
 
-  const referrerId = useUniqueId();
+  const internalReferrerId = useUniqueId();
+  const referrerId = externalReferrerId ?? internalReferrerId;
 
   // Compute CSS variable values for min/max width
   // These will be used by the use-flexible-width CSS class
diff --git a/src/internal/components/dropdown/interfaces.ts b/src/internal/components/dropdown/interfaces.ts
@@ -210,6 +210,11 @@ export interface DropdownProps extends ExpandToViewport {
    * Describedby for the dropdown (recommended when role="dialog")
    */
   ariaDescribedby?: string;
+
+  /**
+   * ID of the dropdown trigger used to connect it with the dropdown and portal elements opened within dropdown.
+   */
+  referrerId?: string;
 }
 
 export interface ExpandToViewport {
diff --git a/src/tooltip/internal.tsx b/src/tooltip/internal.tsx
@@ -16,14 +16,15 @@ import { InternalTooltipProps } from './interfaces';
 
 import testUtilStyles from './test-classes/styles.css.js';
 
-type InternalTooltipComponentProps = InternalTooltipProps & InternalBaseComponentProps;
+type InternalTooltipComponentProps = InternalTooltipProps & InternalBaseComponentProps & { referrerId?: string };
 
 export default function InternalTooltip({
   content,
   getTrack,
   className,
   position = 'top',
   onEscape,
+  referrerId,
   __internalRootRef,
   ...restProps
 }: InternalTooltipComponentProps) {
@@ -66,6 +67,7 @@ export default function InternalTooltip({
         {...baseProps}
         className={clsx(testUtilStyles.root, baseProps.className)}
         ref={__internalRootRef}
+        data-awsui-referrer-id={referrerId}
         role="tooltip"
       >
         <Transition in={true}>

Original file line number	Diff line number	Diff line change
`@@ -34,6 +34,7 @@ export interface GridProps extends GridBaseProps, Required<Pick<CalendarProps, '`
`34`	`34`	`currentMonthAriaLabel?: string;`
`35`	`35`	`startOfWeek?: DayIndex;`
`36`	`36`	`todayAriaLabel?: string;`
	`37`	`+ referrerId?: string;`
`37`	`38`	`}`
`38`	`39`
`39`	`40`	`export interface SelectGridProps extends GridBaseProps, Pick<CalendarProps, 'granularity'> {`
`@@ -53,4 +54,5 @@ export interface SelectGridProps extends GridBaseProps, Pick<CalendarProps, 'gra`
`53`	`54`	`startOfWeek?: DayIndex;`
`54`	`55`	`todayAriaLabel?: string;`
`55`	`56`	`currentMonthAriaLabel?: string;`
	`57`	`+ referrerId?: string;`
`56`	`58`	`}`
Original file line number	Diff line number	Diff line change
`@@ -55,6 +55,7 @@ export interface DateRangePickerCalendarProps`
`55`	`55`	`value: DateRangePickerProps.PendingAbsoluteValue;`
`56`	`56`	`setValue: React.Dispatch<React.SetStateAction<DateRangePickerProps.PendingAbsoluteValue>>;`
`57`	`57`	`i18nStrings?: RangeCalendarI18nStrings;`
	`58`	`+ referrerId?: string;`
`58`	`59`	`}`
`59`	`60`
`60`	`61`	`export interface RangeInputsProps`