refactor(utils): restructure browser utils

gcornut · gcornut · commit 17a2ad051283 · 2025-02-04T17:49:23.000+01:00
diff --git a/packages/lumx-react/src/components/chip/Chip.tsx b/packages/lumx-react/src/components/chip/Chip.tsx
@@ -8,7 +8,7 @@ import { useStopPropagation } from '@lumx/react/hooks/useStopPropagation';
 
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import { onEnterPressed } from '@lumx/react/utils/event';
+import { onEnterPressed } from '@lumx/react/utils/browser/event';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
diff --git a/packages/lumx-react/src/components/date-picker/DatePickerControlled.tsx b/packages/lumx-react/src/components/date-picker/DatePickerControlled.tsx
@@ -21,7 +21,7 @@ import { parseLocale } from '@lumx/react/utils/locale/parseLocale';
 import { Locale } from '@lumx/react/utils/locale/types';
 import { usePreviousValue } from '@lumx/react/hooks/usePreviousValue';
 import { getYearDisplayName } from '@lumx/react/utils/date/getYearDisplayName';
-import { onEnterPressed } from '@lumx/react/utils/event';
+import { onEnterPressed } from '@lumx/react/utils/browser/event';
 import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
 import { formatDayNumber } from '@lumx/react/utils/date/formatDayNumber';
 import { VISUALLY_HIDDEN } from '@lumx/react/constants';
diff --git a/packages/lumx-react/src/components/expansion-panel/ExpansionPanel.test.tsx b/packages/lumx-react/src/components/expansion-panel/ExpansionPanel.test.tsx
@@ -4,14 +4,14 @@ import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/uti
 import { queryByRole, render, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import userEvent from '@testing-library/user-event';
-import { isFocusVisible } from '@lumx/react/utils/isFocusVisible';
+import { isFocusVisible } from '@lumx/react/utils/browser/isFocusVisible';
 
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import { ExpansionPanel, ExpansionPanelProps } from '.';
 
 const CLASSNAME = ExpansionPanel.className as string;
 
-jest.mock('@lumx/react/utils/isFocusVisible');
+jest.mock('@lumx/react/utils/browser/isFocusVisible');
 
 const mockChildrenContent = 'children content';
 
diff --git a/packages/lumx-react/src/components/image-lightbox/internal/ImageSlide.tsx b/packages/lumx-react/src/components/image-lightbox/internal/ImageSlide.tsx
@@ -4,7 +4,7 @@ import { SlideshowItem, Thumbnail } from '@lumx/react';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useSizeOnWindowResize } from '@lumx/react/hooks/useSizeOnWindowResize';
 import { useImageSize } from '@lumx/react/hooks/useImageSize';
-import { getPrefersReducedMotion } from '@lumx/react/utils/browser/getPrefersReducedMotion';
+import { isReducedMotion } from '@lumx/react/utils/browser/isReducedMotion';
 import { isEqual } from '@lumx/react/utils/object/isEqual';
 
 import { CLASSNAME } from '../constants';
@@ -97,7 +97,7 @@ export const ImageSlide = React.memo((props: ImageSlideProps) => {
                             maxWidth: scrollAreaSize?.width,
                         }),
                         // Only animate when scale is set, and we are not pointer zooming and the user does not prefer reduced motion
-                        transition: scale && !isPointerZooming && !getPrefersReducedMotion() ? 'all 250ms' : undefined,
+                        transition: scale && !isPointerZooming && !isReducedMotion() ? 'all 250ms' : undefined,
                     },
                 }}
                 loadingPlaceholderImageRef={loadingPlaceholderImageRef}
diff --git a/packages/lumx-react/src/components/image-lightbox/useImageLightbox.tsx b/packages/lumx-react/src/components/image-lightbox/useImageLightbox.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 
 import memoize from 'lodash/memoize';
 
-import { startViewTransition } from '@lumx/react/utils/DOM/startViewTransition';
-import { findImage } from '@lumx/react/utils/DOM/findImage';
+import { startViewTransition } from '@lumx/react/utils/browser/DOM/startViewTransition';
+import { findImage } from '@lumx/react/utils/browser/DOM/findImage';
 
 import type { ImageLightboxProps } from './types';
 import { CLASSNAME } from './constants';
diff --git a/packages/lumx-react/src/components/list/ListItem.tsx b/packages/lumx-react/src/components/list/ListItem.tsx
@@ -5,7 +5,7 @@ import isEmpty from 'lodash/isEmpty';
 
 import { ListProps, Size } from '@lumx/react';
 import { GenericProps } from '@lumx/react/utils/type';
-import { onEnterPressed, onButtonPressed } from '@lumx/react/utils/event';
+import { onEnterPressed, onButtonPressed } from '@lumx/react/utils/browser/event';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/renderLink';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
diff --git a/packages/lumx-react/src/components/popover-dialog/PopoverDialog.test.tsx b/packages/lumx-react/src/components/popover-dialog/PopoverDialog.test.tsx
@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 import { PopoverDialog } from './PopoverDialog';
 import { WithButtonTrigger, WithIconButtonTrigger } from './PopoverDialog.stories';
 
-jest.mock('@lumx/react/utils/isFocusVisible');
+jest.mock('@lumx/react/utils/browser/isFocusVisible');
 
 describe(`<${PopoverDialog.displayName}>`, () => {
     it('should open and init focus', async () => {
diff --git a/packages/lumx-react/src/components/popover/useRestoreFocusOnClose.tsx b/packages/lumx-react/src/components/popover/useRestoreFocusOnClose.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';
+import { getFirstAndLastFocusable } from '@lumx/react/utils/browser/focus/getFirstAndLastFocusable';
 import { OnBeforeUnmount } from '@lumx/react/utils/OnBeforeUnmount';
 import type { PopoverProps } from './Popover';
 
diff --git a/packages/lumx-react/src/components/select/Select.test.tsx b/packages/lumx-react/src/components/select/Select.test.tsx
@@ -7,13 +7,13 @@ import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/rea
 import { render, within } from '@testing-library/react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import userEvent from '@testing-library/user-event';
-import { isFocusVisible } from '@lumx/react/utils/isFocusVisible';
+import { isFocusVisible } from '@lumx/react/utils/browser/isFocusVisible';
 
 import { Select, SelectProps, SelectVariant } from './Select';
 
 const CLASSNAME = Select.className as string;
 
-jest.mock('@lumx/react/utils/isFocusVisible');
+jest.mock('@lumx/react/utils/browser/isFocusVisible');
 jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 
 /**
diff --git a/packages/lumx-react/src/components/slideshow/useSlideFocusManagement.tsx b/packages/lumx-react/src/components/slideshow/useSlideFocusManagement.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { getFocusableElements } from '@lumx/react/utils/focus/getFocusableElements';
+import { getFocusableElements } from '@lumx/react/utils/browser/focus/getFocusableElements';
 
 export interface UseSlideFocusManagementProps {
     isSlideDisplayed?: boolean;
diff --git a/packages/lumx-react/src/components/text-field/TextField.test.tsx b/packages/lumx-react/src/components/text-field/TextField.test.tsx
@@ -15,12 +15,12 @@ import {
 import partition from 'lodash/partition';
 import userEvent from '@testing-library/user-event';
 
-import { isFocusVisible } from '@lumx/react/utils/isFocusVisible';
+import { isFocusVisible } from '@lumx/react/utils/browser/isFocusVisible';
 import { TextField, TextFieldProps } from './TextField';
 
 const CLASSNAME = TextField.className as string;
 
-jest.mock('@lumx/react/utils/isFocusVisible');
+jest.mock('@lumx/react/utils/browser/isFocusVisible');
 
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
diff --git a/packages/lumx-react/src/components/tooltip/Tooltip.test.tsx b/packages/lumx-react/src/components/tooltip/Tooltip.test.tsx
@@ -5,14 +5,14 @@ import { screen, render } from '@testing-library/react';
 import { queryAllByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import userEvent from '@testing-library/user-event';
-import { isFocusVisible } from '@lumx/react/utils/isFocusVisible';
+import { isFocusVisible } from '@lumx/react/utils/browser/isFocusVisible';
 import { VISUALLY_HIDDEN } from '@lumx/react/constants';
 
 import { Tooltip, TooltipProps } from './Tooltip';
 
 const CLASSNAME = Tooltip.className as string;
 
-jest.mock('@lumx/react/utils/isFocusVisible');
+jest.mock('@lumx/react/utils/browser/isFocusVisible');
 jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 // Skip delays
 jest.mock('@lumx/react/constants', () => ({
diff --git a/packages/lumx-react/src/components/tooltip/useTooltipOpen.tsx b/packages/lumx-react/src/components/tooltip/useTooltipOpen.tsx
@@ -1,8 +1,8 @@
 import { MutableRefObject, useEffect, useRef, useState } from 'react';
-import { browserDoesNotSupportHover } from '@lumx/react/utils/browserDoesNotSupportHover';
+import { isHoverNotSupported } from '@lumx/react/utils/browser/isHoverNotSupported';
 import { IS_BROWSER, TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from '@lumx/react/constants';
 import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
-import { isFocusVisible } from '@lumx/react/utils/isFocusVisible';
+import { isFocusVisible } from '@lumx/react/utils/browser/isFocusVisible';
 
 /**
  * Hook controlling tooltip visibility using mouse hover the anchor and delay.
@@ -39,7 +39,7 @@ export function useTooltipOpen(delay: number | undefined, anchorElement: HTMLEle
             else timer = setTimeout(update, duration) as any;
         };
 
-        const hoverNotSupported = browserDoesNotSupportHover();
+        const hoverNotSupported = isHoverNotSupported();
         const hasTouch = 'ontouchstart' in window;
 
         // Adapt open/close delay
diff --git a/packages/lumx-react/src/hooks/useCallbackOnEscape.ts b/packages/lumx-react/src/hooks/useCallbackOnEscape.ts
@@ -1,6 +1,6 @@
 import { DOCUMENT } from '@lumx/react/constants';
 import { Callback } from '@lumx/react/utils/type';
-import { onEscapePressed } from '@lumx/react/utils/event';
+import { onEscapePressed } from '@lumx/react/utils/browser/event';
 import { useEffect } from 'react';
 import { Listener, makeListenerTowerContext } from '@lumx/react/utils/function/makeListenerTowerContext';
 
diff --git a/packages/lumx-react/src/hooks/useFocusTrap.ts b/packages/lumx-react/src/hooks/useFocusTrap.ts
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 
 import { DOCUMENT } from '@lumx/react/constants';
-import { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';
+import { getFirstAndLastFocusable } from '@lumx/react/utils/browser/focus/getFirstAndLastFocusable';
 import { Falsy } from '@lumx/react/utils/type';
 import { Listener, makeListenerTowerContext } from '@lumx/react/utils/function/makeListenerTowerContext';
 
diff --git a/packages/lumx-react/src/hooks/useTransitionVisibility.ts b/packages/lumx-react/src/hooks/useTransitionVisibility.ts
@@ -1,5 +1,5 @@
 import { RefObject, useEffect, useRef, useState } from 'react';
-import { userHasReducedMotion } from '@lumx/react/utils/userHasReducedMotion';
+import { isReducedMotion } from '@lumx/react/utils/browser/isReducedMotion';
 
 /**
  * Returns true if the component is visible tracking the opacity transition.
@@ -28,7 +28,7 @@ export const useTransitionVisibility = (
 
         // Transition event is not supported or the user prefers reduced motion.
         // => Skip and set visibility to false directly.
-        if (!element || !window.TransitionEvent || userHasReducedMotion()) {
+        if (!element || !window.TransitionEvent || isReducedMotion()) {
             setVisible(false);
             return undefined;
         }
diff --git a/packages/lumx-react/src/utils/browser/DOM/findImage.tsx b/packages/lumx-react/src/utils/browser/DOM/findImage.tsx
diff --git a/packages/lumx-react/src/utils/browser/DOM/startViewTransition.ts b/packages/lumx-react/src/utils/browser/DOM/startViewTransition.ts
@@ -2,8 +2,8 @@ import ReactDOM from 'react-dom';
 
 import { MaybeElementOrRef } from '@lumx/react/utils/type';
 
-import { unref } from '../react/unref';
-import { getPrefersReducedMotion } from '../browser/getPrefersReducedMotion';
+import { unref } from '../../react/unref';
+import { isReducedMotion } from '../isReducedMotion';
 
 function setupViewTransitionName(elementRef: MaybeElementOrRef<HTMLElement>, name: string) {
     let originalName: string | null = null;
@@ -41,7 +41,7 @@ export async function startViewTransition({
     };
 }) {
     const start = (document as any)?.startViewTransition?.bind(document);
-    const prefersReducedMotion = getPrefersReducedMotion();
+    const prefersReducedMotion = isReducedMotion();
     const { flushSync } = ReactDOM as any;
     if (prefersReducedMotion || !start || !flushSync || !viewTransitionName?.source || !viewTransitionName?.target) {
         // Skip, apply changes without a transition
diff --git a/packages/lumx-react/src/utils/browser/event.ts b/packages/lumx-react/src/utils/browser/event.ts
diff --git a/packages/lumx-react/src/utils/browser/focus/constants.ts b/packages/lumx-react/src/utils/browser/focus/constants.ts
diff --git a/packages/lumx-react/src/utils/browser/focus/getFirstAndLastFocusable.test.ts b/packages/lumx-react/src/utils/browser/focus/getFirstAndLastFocusable.test.ts
@@ -1,4 +1,4 @@
-import { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';
+import { getFirstAndLastFocusable } from './getFirstAndLastFocusable';
 
 function htmlToElement(html: string): any {
     const template = document.createElement('template');
diff --git a/packages/lumx-react/src/utils/browser/focus/getFirstAndLastFocusable.ts b/packages/lumx-react/src/utils/browser/focus/getFirstAndLastFocusable.ts
diff --git a/packages/lumx-react/src/utils/browser/focus/getFocusableElements.test.ts b/packages/lumx-react/src/utils/browser/focus/getFocusableElements.test.ts
@@ -1,4 +1,4 @@
-import { getFocusableElements } from '@lumx/react/utils/focus/getFocusableElements';
+import { getFocusableElements } from './getFocusableElements';
 
 function htmlToElement(html: string): any {
     const template = document.createElement('template');
diff --git a/packages/lumx-react/src/utils/browser/focus/getFocusableElements.ts b/packages/lumx-react/src/utils/browser/focus/getFocusableElements.ts
diff --git a/packages/lumx-react/src/utils/browser/isFocusVisible.ts b/packages/lumx-react/src/utils/browser/isFocusVisible.ts
diff --git a/packages/lumx-react/src/utils/browser/isHoverNotSupported.test.js b/packages/lumx-react/src/utils/browser/isHoverNotSupported.test.js
@@ -1,24 +1,24 @@
-import { browserDoesNotSupportHover } from '@lumx/react/utils/browserDoesNotSupportHover';
+import { isHoverNotSupported } from './isHoverNotSupported';
 
 const originalMatchMedia = global.matchMedia;
 
-describe('browserDoesNotSupportHover', () => {
+describe('isHoverNotSupported', () => {
     afterAll(() => {
         global.matchMedia = originalMatchMedia;
     });
 
     it('should return `false` on browsers that do not support matchMedia', () => {
         global.matchMedia = undefined;
-        expect(browserDoesNotSupportHover()).toBe(false);
+        expect(isHoverNotSupported()).toBe(false);
     });
 
     it('should return `false` on browsers that support matchMedia and does support hover', () => {
         global.matchMedia = () => ({ matches: false });
-        expect(browserDoesNotSupportHover()).toBe(false);
+        expect(isHoverNotSupported()).toBe(false);
     });
 
     it('should return `true` on browsers that support matchMedia and does not support hover', () => {
         global.matchMedia = () => ({ matches: true });
-        expect(browserDoesNotSupportHover()).toBe(true);
+        expect(isHoverNotSupported()).toBe(true);
     });
 });
diff --git a/packages/lumx-react/src/utils/browser/isHoverNotSupported.ts b/packages/lumx-react/src/utils/browser/isHoverNotSupported.ts
@@ -0,0 +1,2 @@
+/** Return true if the browser does not support pointer hover */
+export const isHoverNotSupported = (): boolean => !!window.matchMedia?.('(hover: none)').matches;
diff --git a/packages/lumx-react/src/utils/browser/isReducedMotion.ts b/packages/lumx-react/src/utils/browser/isReducedMotion.ts
@@ -1,6 +1,6 @@
 import { WINDOW } from '@lumx/react/constants';
 
 /** Check if user prefers reduced motion */
-export function getPrefersReducedMotion() {
+export function isReducedMotion() {
     return WINDOW?.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
 }
diff --git a/packages/lumx-react/src/utils/browserDoesNotSupportHover.ts b/packages/lumx-react/src/utils/browserDoesNotSupportHover.ts
diff --git a/packages/lumx-react/src/utils/isInternetExplorer.ts b/packages/lumx-react/src/utils/isInternetExplorer.ts
diff --git a/packages/lumx-react/src/utils/partitionMulti.test.ts b/packages/lumx-react/src/utils/partitionMulti.test.ts
@@ -0,0 +1,27 @@
+import partition from 'lodash/partition';
+import { partitionMulti } from './partitionMulti';
+
+describe('partitionMulti', () => {
+    it('should act like partition for single predicate', () => {
+        const data = [0, 1, 2, 3, 4, 5];
+        const isEven = (n: number): boolean => n % 2 === 0;
+
+        const expected = partition(data, isEven);
+        const actual = partitionMulti(data, [isEven]);
+
+        expect(actual).toEqual(expected);
+    });
+
+    it('should partition on multiple predicates', () => {
+        type T = string | number | boolean;
+        const data: T[] = ['a', 1, 'b', false, true];
+        const isString = (s: T): boolean => typeof s === 'string';
+        const isNumber = (s: T): boolean => typeof s === 'number';
+
+        const [strings, numbers, others] = partitionMulti(data, [isString, isNumber]);
+
+        expect(strings).toEqual(['a', 'b']);
+        expect(numbers).toEqual([1]);
+        expect(others).toEqual([false, true]);
+    });
+});
diff --git a/packages/lumx-react/src/utils/userHasReducedMotion.ts b/packages/lumx-react/src/utils/userHasReducedMotion.ts
diff --git a/packages/lumx-react/src/utils/utils.test.ts b/packages/lumx-react/src/utils/utils.test.ts
