27762221325

Committed 18 Jun 2026 01:17PM UTC coverage: 84.677% (+0.1%) from 84.533%

Build # 27762221325

Build Type

Pull #2724

github

Committed by

crishpeen

Commit Message

feat(codemods): introduce codemod to transfer Item to new structure #DS-2586

Pull Request Pull Request #2724: refactor(web,web-react)!: compose Item content with slots #DS-2586

Coverage Stats

2575 of 3504 branches covered (73.49%)

Branch coverage included in aggregate %.

157 of 177 new or added lines in 4 files covered. (88.7%)

117 existing lines in 11 files now uncovered.

7383 of 8256 relevant lines covered (89.43%)

198.49 hits per line

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

80.0

/packages/web-react/src/components/Dropdown/Dropdown.tsx

'use client';

import classNames from 'classnames';
import React, { type KeyboardEventHandler, type MutableRefObject, useCallback, useRef } from 'react';
import { useOverlay, useStyleProps } from '../../hooks';
import { type SpiritDropdownProps } from '../../types';
import { DropdownProvider } from './DropdownContext';
import { useDropdownStyleProps } from './useDropdownStyleProps';

const Dropdown = (props: SpiritDropdownProps) => {
  const {
    children,
    enableAutoClose = true,
    fullWidthMode,
    id,
    isOpen = false,
    onAutoClose,
    onToggle,
    placement,
    triggerRef: externalTriggerRef,
    ...rest
  } = props;
  const { classProps, props: modifiedProps } = useDropdownStyleProps({ isOpen, ...rest });
  const { styleProps, props: transferProps } = useStyleProps(modifiedProps);
  const { onKeyDown: onUserKeyDown, ...otherProps } = transferProps;

  const dropdownRef = useRef<HTMLDivElement>(null);
  const internalTriggerRef = useRef<HTMLElement | null>(null);
  const triggerRef: MutableRefObject<HTMLElement | null | undefined> = externalTriggerRef ?? internalTriggerRef;

  const closeOverlay = useCallback(() => {
    if (!isOpen) {
      return;
    }

    onToggle();

    queueMicrotask(() => {
      triggerRef.current?.focus();
    });
  }, [isOpen, onToggle, triggerRef]);

  const closeOverlayFromOutside = useCallback(
    (event: Event) => {
      if (!isOpen) {
        return;
      }

      onAutoClose?.(event);
      onToggle();
    },
    [isOpen, onAutoClose, onToggle],
  );

  const { onOverlayKeyDown } = useOverlay({
    isOpen,
    overlayRef: dropdownRef,
    onClose: closeOverlay,
    closeOnInteractOutside: enableAutoClose,
    onCloseOnInteractOutside: closeOverlayFromOutside,
  });

  const handleKeyDown: KeyboardEventHandler<HTMLElement> = useCallback(
    (event) => {
      onUserKeyDown?.(event);
      onOverlayKeyDown(event);
    },
    [onOverlayKeyDown, onUserKeyDown],
  );
  const mergedProps = { ...otherProps, onKeyDown: handleKeyDown };

  return (
    <DropdownProvider value={{ id, isOpen, fullWidthMode, placement, onToggle, dropdownRef, triggerRef }}>
      <div
        ref={dropdownRef}
        className={classNames(classProps.root, styleProps.className)}
        style={styleProps.style}
        {...mergedProps}
      >
        {children}
      </div>
    </DropdownProvider>
  );
};

Dropdown.spiritComponent = 'Dropdown';

export default Dropdown;

1	'use client';
2
3	import classNames from 'classnames';	174✔
4	import React, { type KeyboardEventHandler, type MutableRefObject, useCallback, useRef } from 'react';	174✔
5	import { useOverlay, useStyleProps } from '../../hooks';	174✔
6	import { type SpiritDropdownProps } from '../../types';
7	import { DropdownProvider } from './DropdownContext';	174✔
8	import { useDropdownStyleProps } from './useDropdownStyleProps';	174✔
9
10	const Dropdown = (props: SpiritDropdownProps) => {	174✔
11	const {
12	children,
13	enableAutoClose = true,	173✔
14	fullWidthMode,
15	id,
16	isOpen = false,	5✔
17	onAutoClose,
18	onToggle,
19	placement,
20	triggerRef: externalTriggerRef,
21	...rest
22	} = props;	173✔
23	const { classProps, props: modifiedProps } = useDropdownStyleProps({ isOpen, ...rest });	173✔
24	const { styleProps, props: transferProps } = useStyleProps(modifiedProps);	173✔
25	const { onKeyDown: onUserKeyDown, ...otherProps } = transferProps;	173✔
26
27	const dropdownRef = useRef<HTMLDivElement>(null);	173✔
28	const internalTriggerRef = useRef<HTMLElement \| null>(null);	173✔
29	const triggerRef: MutableRefObject<HTMLElement \| null \| undefined> = externalTriggerRef ?? internalTriggerRef;	173✔
30
31	const closeOverlay = useCallback(() => {	173✔
32	if (!isOpen) {	1!
33	return;	×
34	}
35
36	onToggle();	1✔
37
38	queueMicrotask(() => {	1✔
39	triggerRef.current?.focus();	1✔
40	});
41	}, [isOpen, onToggle, triggerRef]);
42
43	const closeOverlayFromOutside = useCallback(	173✔
44	(event: Event) => {
UNCOV 45	if (!isOpen) {	×
UNCOV 46	return;	×
47	}
48
UNCOV 49	onAutoClose?.(event);	×
UNCOV 50	onToggle();	×
51	},
52	[isOpen, onAutoClose, onToggle],
53	);
54
55	const { onOverlayKeyDown } = useOverlay({	173✔
56	isOpen,
57	overlayRef: dropdownRef,
58	onClose: closeOverlay,
59	closeOnInteractOutside: enableAutoClose,
60	onCloseOnInteractOutside: closeOverlayFromOutside,
61	});
62
63	const handleKeyDown: KeyboardEventHandler<HTMLElement> = useCallback(	173✔
64	(event) => {
65	onUserKeyDown?.(event);	7✔
66	onOverlayKeyDown(event);	7✔
67	},
68	[onOverlayKeyDown, onUserKeyDown],
69	);
70	const mergedProps = { ...otherProps, onKeyDown: handleKeyDown };	173✔
71
72	return (	173✔
73	<DropdownProvider value={{ id, isOpen, fullWidthMode, placement, onToggle, dropdownRef, triggerRef }}>
74	<div
75	ref={dropdownRef}
76	className={classNames(classProps.root, styleProps.className)}
77	style={styleProps.style}
78	{...mergedProps}
79	>
80	{children}
81	</div>
82	</DropdownProvider>
83	);
84	};
85
86	Dropdown.spiritComponent = 'Dropdown';	174✔
87
88	export default Dropdown;	174✔

alma-oss / spirit-design-system / 27762221325

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