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

94.12

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

'use client';

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

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

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

  const { isOpen, toggleHandler: onToggle } = useDropdown({
    dropdownRef,
    triggerRef: mergedTriggerRef,
    enableAutoClose,
    onAutoClose,
  });
  const closeOverlay = useCallback(() => {
    if (!isOpen) {
      return;
    }

    onToggle();

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

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

  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: mergedTriggerRef }}
    >
      <div
        ref={dropdownRef}
        {...styleProps}
        {...mergedProps}
        className={classNames(classProps.root, styleProps.className)}
      >
        {children}
      </div>
    </DropdownProvider>
  );
};

UncontrolledDropdown.spiritComponent = 'UncontrolledDropdown';

export default UncontrolledDropdown;

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