06e66000-af1f-4362-a0e7-056c85482897

Committed 20 Sep 2023 09:38AM UTC coverage: 75.487% (-0.06%) from 75.544%

Build # 06e66000-af1f-4362-a0e7-056c85482897

Build Type

Pull #5347

circleci

Committed by

web-flow

Commit Message

Merge branch 'JedWatson:master' into fix-5346

Pull Request Pull Request #5347: Make scroll lock div work on a document context it belongs to

Run Details

635 of 1014 branches covered (0.0%)

3 of 3 new or added lines in 1 file covered. (100.0%)

1007 of 1334 relevant lines covered (75.49%)

1802.9 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

77.78

/packages/react-select/src/internal/ScrollManager.tsx

/** @jsx jsx */
import { jsx } from '@emotion/react';
import { Fragment, ReactElement, RefCallback, MouseEvent } from 'react';
import useScrollCapture from './useScrollCapture';
import useScrollLock from './useScrollLock';

interface Props {
  readonly children: (ref: RefCallback<HTMLElement>) => ReactElement;
  readonly lockEnabled: boolean;
  readonly captureEnabled: boolean;
  readonly onBottomArrive?: (event: WheelEvent | TouchEvent) => void;
  readonly onBottomLeave?: (event: WheelEvent | TouchEvent) => void;
  readonly onTopArrive?: (event: WheelEvent | TouchEvent) => void;
  readonly onTopLeave?: (event: WheelEvent | TouchEvent) => void;
}

const blurSelectInput = (event: MouseEvent<HTMLDivElement>) => {
  const element = event.target as HTMLDivElement;
  return (
    element.ownerDocument.activeElement &&
    (element.ownerDocument.activeElement as HTMLElement).blur()
  );
};

export default function ScrollManager({
  children,
  lockEnabled,
  captureEnabled = true,
  onBottomArrive,
  onBottomLeave,
  onTopArrive,
  onTopLeave,
}: Props) {
  const setScrollCaptureTarget = useScrollCapture({
    isEnabled: captureEnabled,
    onBottomArrive,
    onBottomLeave,
    onTopArrive,
    onTopLeave,
  });
  const setScrollLockTarget = useScrollLock({ isEnabled: lockEnabled });

  const targetRef: RefCallback<HTMLElement> = (element) => {
    setScrollCaptureTarget(element);
    setScrollLockTarget(element);
  };

  return (
    <Fragment>
      {lockEnabled && (
        <div
          onClick={blurSelectInput}
          css={{ position: 'fixed', left: 0, bottom: 0, right: 0, top: 0 }}
        />
      )}
      {children(targetRef)}
    </Fragment>
  );
}

1	/** @jsx jsx */
2	import { jsx } from '@emotion/react';
3	import { Fragment, ReactElement, RefCallback, MouseEvent } from 'react';
4	import useScrollCapture from './useScrollCapture';
5	import useScrollLock from './useScrollLock';
6
7	interface Props {
8	readonly children: (ref: RefCallback<HTMLElement>) => ReactElement;
9	readonly lockEnabled: boolean;
10	readonly captureEnabled: boolean;
11	readonly onBottomArrive?: (event: WheelEvent \| TouchEvent) => void;
12	readonly onBottomLeave?: (event: WheelEvent \| TouchEvent) => void;
13	readonly onTopArrive?: (event: WheelEvent \| TouchEvent) => void;
14	readonly onTopLeave?: (event: WheelEvent \| TouchEvent) => void;
15	}
16
17	const blurSelectInput = (event: MouseEvent<HTMLDivElement>) => {	5✔
18	const element = event.target as HTMLDivElement;	×
19	return (	×
20	element.ownerDocument.activeElement &&	×
21	(element.ownerDocument.activeElement as HTMLElement).blur()
22	);
23	};
24
25	export default function ScrollManager({
26	children,
27	lockEnabled,
28	captureEnabled = true,	×
29	onBottomArrive,
30	onBottomLeave,
31	onTopArrive,
32	onTopLeave,
33	}: Props) {
34	const setScrollCaptureTarget = useScrollCapture({	724✔
35	isEnabled: captureEnabled,
36	onBottomArrive,
37	onBottomLeave,
38	onTopArrive,
39	onTopLeave,
40	});
41	const setScrollLockTarget = useScrollLock({ isEnabled: lockEnabled });	724✔
42
43	const targetRef: RefCallback<HTMLElement> = (element) => {	724✔
44	setScrollCaptureTarget(element);	1,448✔
45	setScrollLockTarget(element);	1,448✔
46	};
47
48	return (	724✔
49	<Fragment>
50	{lockEnabled && (	724!
51	<div
52	onClick={blurSelectInput}
53	css={{ position: 'fixed', left: 0, bottom: 0, right: 0, top: 0 }}
54	/>
55	)}
56	{children(targetRef)}
57	</Fragment>
58	);
59	}

JedWatson / react-select / 06e66000-af1f-4362-a0e7-056c85482897

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous