Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "chore: remove optional \"win\" argument",
"packageName": "@fluentui/react-aria",
"email": "seanmonahan@microsoft.com",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,9 @@ describe('scrollIntoView', () => {
offsetParent: listbox as HTMLElement,
parentElement: listbox as HTMLElement,
contains: jest.fn().mockReturnValue(false),
ownerDocument: {
defaultView: window,
} as Document,
};

jest
Expand Down Expand Up @@ -118,6 +121,9 @@ describe('scrollIntoView', () => {
offsetParent: listbox as HTMLElement,
parentElement: listbox as HTMLElement,
contains: jest.fn().mockReturnValue(false),
ownerDocument: {
defaultView: window,
} as Document,
};

jest
Expand Down Expand Up @@ -187,36 +193,4 @@ describe('scrollIntoView', () => {

expect(mockAncestorScrollTo).toHaveBeenCalledWith(0, 122);
});

it('should use the provided `window` argument', () => {
listboxGrandParent = {
...listboxGrandParent,
scrollTop: 0,
};
listboxParent = {
...listboxParent,
offsetParent: listboxGrandParent as Element,
parentElement: listboxGrandParent as HTMLElement,
};
listbox = {
...listbox,
scrollHeight: 100,
offsetHeight: 100,
offsetParent: listboxGrandParent as Element,
parentElement: listboxParent as HTMLElement,
};
const option: Partial<HTMLElement> = {
offsetHeight: 10,
offsetTop: 160,
offsetParent: listboxGrandParent as HTMLElement,
parentElement: listbox as HTMLElement,
contains: jest.fn().mockReturnValue(false),
};

const getComputedStyleSpy = jest.spyOn(window, 'getComputedStyle');

scrollIntoView(option as HTMLElement);

expect(getComputedStyleSpy).toHaveBeenCalledTimes(1);
});
});
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
export const scrollIntoView = (target: HTMLElement | null | undefined, winArg?: Window | null) => {
export const scrollIntoView = (target: HTMLElement | null | undefined) => {
Comment thread
spmonahan marked this conversation as resolved.
Comment thread
spmonahan marked this conversation as resolved.
if (!target) {
return;
}

// eslint-disable-next-line no-restricted-globals
const win = winArg ?? window;

const scrollParent = findScrollableParent(target.parentElement as HTMLElement);
if (!scrollParent) {
return;
Expand All @@ -14,7 +11,7 @@ export const scrollIntoView = (target: HTMLElement | null | undefined, winArg?:
const { offsetHeight } = target;
const offsetTop = getTotalOffsetTop(target, scrollParent);

const { scrollMarginTop, scrollMarginBottom } = getScrollMargins(target, win);
const { scrollMarginTop, scrollMarginBottom } = getScrollMargins(target);

const { offsetHeight: parentOffsetHeight, scrollTop } = scrollParent;

Expand Down Expand Up @@ -55,7 +52,15 @@ const getTotalOffsetTop = (element: HTMLElement, scrollParent: HTMLElement): num
return element.offsetTop + getTotalOffsetTop(element.offsetParent as HTMLElement, scrollParent);
};

const getScrollMargins = (element: HTMLElement, win: Window) => {
const getScrollMargins = (element: HTMLElement) => {
const win = element.ownerDocument?.defaultView;
if (!win) {
return {
scrollMarginTop: 0,
scrollMarginBottom: 0,
};
}

const computedStyles = win.getComputedStyle(element);
const scrollMarginTop =
getIntValueOfComputedStyle(computedStyles.scrollMarginTop) ??
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import * as React from 'react';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
import { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';
import { useOptionWalker } from './useOptionWalker';
Expand Down Expand Up @@ -33,8 +32,6 @@ export function useActiveDescendant<TActiveParentElement extends HTMLElement, TL
const lastActiveIdRef = React.useRef<string | null>(null);
const activeParentRef = React.useRef<TActiveParentElement>(null);
const attributeVisibilityRef = React.useRef(true);
const { targetDocument } = useFluent();
const win = targetDocument?.defaultView;

const removeAttribute = React.useCallback(() => {
activeParentRef.current?.removeAttribute('aria-activedescendant');
Expand Down Expand Up @@ -90,7 +87,7 @@ export function useActiveDescendant<TActiveParentElement extends HTMLElement, TL

const previousActiveId = blurActiveDescendant();

scrollIntoView(nextActive, win);
scrollIntoView(nextActive);
setAttribute(nextActive.id);
nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');

Expand All @@ -101,7 +98,7 @@ export function useActiveDescendant<TActiveParentElement extends HTMLElement, TL
const event = createActiveDescendantChangeEvent({ id: nextActive.id, previousId: previousActiveId });
nextActive.dispatchEvent(event);
},
[blurActiveDescendant, setAttribute, win],
[blurActiveDescendant, setAttribute],
);

const controller: ActiveDescendantImperativeRef = React.useMemo(
Expand Down