9de42ca4-8c55-4031-8310-e7e0a2b0128b

Committed 26 Oct 2024 11:27AM CUT coverage: 75.844%. Remained the same

Build # 9de42ca4-8c55-4031-8310-e7e0a2b0128b

Build Type

Pull #5880

circleci

Committed by

lukebennett88

Commit Message

add box-sizing to border-box for RequiredInput

adding `required` would otherwise cause an extra (unstylable) component to be added which has some implicit padding from the user agent style sheet (inputs have padding) which could cause horizontal scrolling when the whole scroll field is 100% wide.

Pull Request Pull Request #5880: add box-sizing to border-box for RequiredInput

Run Details

658 of 1052 branches covered (62.55%)

1033 of 1362 relevant lines covered (75.84%)

1934.69 hits per line

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

25.0

/packages/react-select/src/internal/useScrollCapture.ts

import { useCallback, useEffect, useRef } from 'react';
import { supportsPassiveEvents } from '../utils';

const cancelScroll = (event: WheelEvent | TouchEvent) => {
  if (event.cancelable) event.preventDefault();
  event.stopPropagation();
};

interface Options {
  readonly isEnabled: 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;
}

export default function useScrollCapture({
  isEnabled,
  onBottomArrive,
  onBottomLeave,
  onTopArrive,
  onTopLeave,
}: Options) {
  const isBottom = useRef(false);
  const isTop = useRef(false);
  const touchStart = useRef(0);
  const scrollTarget = useRef<HTMLElement | null>(null);

  const handleEventDelta = useCallback(
    (event: WheelEvent | TouchEvent, delta: number) => {
      if (scrollTarget.current === null) return;

      const { scrollTop, scrollHeight, clientHeight } = scrollTarget.current;
      const target = scrollTarget.current;
      const isDeltaPositive = delta > 0;
      const availableScroll = scrollHeight - clientHeight - scrollTop;
      let shouldCancelScroll = false;

      // reset bottom/top flags
      if (availableScroll > delta && isBottom.current) {
        if (onBottomLeave) onBottomLeave(event);
        isBottom.current = false;
      }
      if (isDeltaPositive && isTop.current) {
        if (onTopLeave) onTopLeave(event);
        isTop.current = false;
      }

      // bottom limit
      if (isDeltaPositive && delta > availableScroll) {
        if (onBottomArrive && !isBottom.current) {
          onBottomArrive(event);
        }
        target.scrollTop = scrollHeight;
        shouldCancelScroll = true;
        isBottom.current = true;

        // top limit
      } else if (!isDeltaPositive && -delta > scrollTop) {
        if (onTopArrive && !isTop.current) {
          onTopArrive(event);
        }
        target.scrollTop = 0;
        shouldCancelScroll = true;
        isTop.current = true;
      }

      // cancel scroll
      if (shouldCancelScroll) {
        cancelScroll(event);
      }
    },
    [onBottomArrive, onBottomLeave, onTopArrive, onTopLeave]
  );

  const onWheel = useCallback(
    (event: WheelEvent) => {
      handleEventDelta(event, event.deltaY);
    },
    [handleEventDelta]
  );
  const onTouchStart = useCallback((event: TouchEvent) => {
    // set touch start so we can calculate touchmove delta
    touchStart.current = event.changedTouches[0].clientY;
  }, []);
  const onTouchMove = useCallback(
    (event: TouchEvent) => {
      const deltaY = touchStart.current - event.changedTouches[0].clientY;
      handleEventDelta(event, deltaY);
    },
    [handleEventDelta]
  );

  const startListening = useCallback(
    (el) => {
      // bail early if no element is available to attach to
      if (!el) return;

      const notPassive = supportsPassiveEvents ? { passive: false } : false;
      el.addEventListener('wheel', onWheel, notPassive);
      el.addEventListener('touchstart', onTouchStart, notPassive);
      el.addEventListener('touchmove', onTouchMove, notPassive);
    },
    [onTouchMove, onTouchStart, onWheel]
  );

  const stopListening = useCallback(
    (el) => {
      // bail early if no element is available to detach from
      if (!el) return;

      el.removeEventListener('wheel', onWheel, false);
      el.removeEventListener('touchstart', onTouchStart, false);
      el.removeEventListener('touchmove', onTouchMove, false);
    },
    [onTouchMove, onTouchStart, onWheel]
  );

  useEffect(() => {
    if (!isEnabled) return;

    const element = scrollTarget.current;
    startListening(element);

    return () => {
      stopListening(element);
    };
  }, [isEnabled, startListening, stopListening]);

  return (element: HTMLElement | null) => {
    scrollTarget.current = element;
  };
}

1	import { useCallback, useEffect, useRef } from 'react';
2	import { supportsPassiveEvents } from '../utils';
3
4	const cancelScroll = (event: WheelEvent \| TouchEvent) => {	5✔
5	if (event.cancelable) event.preventDefault();	×
6	event.stopPropagation();	×
7	};
8
9	interface Options {
10	readonly isEnabled: 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	export default function useScrollCapture({
18	isEnabled,
19	onBottomArrive,
20	onBottomLeave,
21	onTopArrive,
22	onTopLeave,
23	}: Options) {
24	const isBottom = useRef(false);	768✔
25	const isTop = useRef(false);	768✔
26	const touchStart = useRef(0);	768✔
27	const scrollTarget = useRef<HTMLElement \| null>(null);	768✔
28
29	const handleEventDelta = useCallback(	768✔
30	(event: WheelEvent \| TouchEvent, delta: number) => {
31	if (scrollTarget.current === null) return;	×
32
33	const { scrollTop, scrollHeight, clientHeight } = scrollTarget.current;	×
34	const target = scrollTarget.current;	×
35	const isDeltaPositive = delta > 0;	×
36	const availableScroll = scrollHeight - clientHeight - scrollTop;	×
37	let shouldCancelScroll = false;	×
38
39	// reset bottom/top flags
40	if (availableScroll > delta && isBottom.current) {	×
41	if (onBottomLeave) onBottomLeave(event);	×
42	isBottom.current = false;	×
43	}
44	if (isDeltaPositive && isTop.current) {	×
45	if (onTopLeave) onTopLeave(event);	×
46	isTop.current = false;	×
47	}
48
49	// bottom limit
50	if (isDeltaPositive && delta > availableScroll) {	×
51	if (onBottomArrive && !isBottom.current) {	×
52	onBottomArrive(event);	×
53	}
54	target.scrollTop = scrollHeight;	×
55	shouldCancelScroll = true;	×
56	isBottom.current = true;	×
57
58	// top limit
59	} else if (!isDeltaPositive && -delta > scrollTop) {	×
60	if (onTopArrive && !isTop.current) {	×
61	onTopArrive(event);	×
62	}
63	target.scrollTop = 0;	×
64	shouldCancelScroll = true;	×
65	isTop.current = true;	×
66	}
67
68	// cancel scroll
69	if (shouldCancelScroll) {	×
70	cancelScroll(event);	×
71	}
72	},
73	[onBottomArrive, onBottomLeave, onTopArrive, onTopLeave]
74	);
75
76	const onWheel = useCallback(	768✔
77	(event: WheelEvent) => {
78	handleEventDelta(event, event.deltaY);	×
79	},
80	[handleEventDelta]
81	);
82	const onTouchStart = useCallback((event: TouchEvent) => {	768✔
83	// set touch start so we can calculate touchmove delta
84	touchStart.current = event.changedTouches[0].clientY;	×
85	}, []);
86	const onTouchMove = useCallback(	768✔
87	(event: TouchEvent) => {
88	const deltaY = touchStart.current - event.changedTouches[0].clientY;	×
89	handleEventDelta(event, deltaY);	×
90	},
91	[handleEventDelta]
92	);
93
94	const startListening = useCallback(	768✔
95	(el) => {
96	// bail early if no element is available to attach to
97	if (!el) return;	×
98
99	const notPassive = supportsPassiveEvents ? { passive: false } : false;	×
100	el.addEventListener('wheel', onWheel, notPassive);	×
101	el.addEventListener('touchstart', onTouchStart, notPassive);	×
102	el.addEventListener('touchmove', onTouchMove, notPassive);	×
103	},
104	[onTouchMove, onTouchStart, onWheel]
105	);
106
107	const stopListening = useCallback(	768✔
108	(el) => {
109	// bail early if no element is available to detach from
110	if (!el) return;	×
111
112	el.removeEventListener('wheel', onWheel, false);	×
113	el.removeEventListener('touchstart', onTouchStart, false);	×
114	el.removeEventListener('touchmove', onTouchMove, false);	×
115	},
116	[onTouchMove, onTouchStart, onWheel]
117	);
118
119	useEffect(() => {	768✔
120	if (!isEnabled) return;	169!
121
122	const element = scrollTarget.current;	×
123	startListening(element);	×
124
125	return () => {	×
126	stopListening(element);	×
127	};
128	}, [isEnabled, startListening, stopListening]);
129
130	return (element: HTMLElement \| null) => {	768✔
131	scrollTarget.current = element;	1,536✔
132	};
133	}

JedWatson / react-select / 9de42ca4-8c55-4031-8310-e7e0a2b0128b

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