@lumx/react 3.10.1-alpha.3 → 3.10.1-alpha.4

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.10.1-alpha.3",
-        "@lumx/icons": "^3.10.1-alpha.3",
+        "@lumx/core": "^3.10.1-alpha.4",
+        "@lumx/icons": "^3.10.1-alpha.4",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -110,5 +110,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.10.1-alpha.3"
+    "version": "3.10.1-alpha.4"
 }

package/src/components/chip/Chip.tsx

@@ -7,7 +7,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';
 

package/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';

package/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';
 

package/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}

package/src/components/image-lightbox/internal/ImageSlideshow.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import { mdiMagnifyMinusOutline, mdiMagnifyPlusOutline } from '@lumx/icons';
 import { FlexBox, IconButton, Slides, SlideshowControls } from '@lumx/react';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { memoize } from '@lumx/react/utils/function/memoize';
 
-import memoize from 'lodash/memoize';
 import { ImageCaption } from '../../image-block/ImageCaption';
 import { CLASSNAME } from '../constants';
 import type { ImagesProps, InheritedSlideShowProps, ZoomButtonProps } from '../types';
@@ -113,13 +113,9 @@ export const ImageSlideshow: React.FC<ImageSlideshowProps> = ({
 
     const getImgRef = React.useMemo(
         () =>
-            memoize(
-                (index: number, isActive: boolean) => {
-                    return mergeRefs(images?.[index].imgRef, isActive ? activeImageRef : undefined);
-                },
-                // memoize based on both arguments
-                (...args) => args.join(),
-            ),
+            memoize((index: number, isActive: boolean) => {
+                return mergeRefs(images?.[index].imgRef, isActive ? activeImageRef : undefined);
+            }),
         [images, activeImageRef],
     );
 

package/src/components/image-lightbox/useImageLightbox.tsx

@@ -1,9 +1,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 { memoize } from '@lumx/react/utils/function/memoize';
 
 import type { ImageLightboxProps } from './types';
 import { CLASSNAME } from './constants';

package/src/components/list/ListItem.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 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';

package/src/components/popover/usePopoverStyle.tsx

@@ -1,10 +1,12 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import memoize from 'lodash/memoize';
+
 import { detectOverflow } from '@popperjs/core';
 
 import { DOCUMENT, WINDOW } from '@lumx/react/constants';
 import { PopoverProps } from '@lumx/react/components/popover/Popover';
 import { usePopper } from '@lumx/react/hooks/usePopper';
+import { memoize } from '@lumx/react/utils/function/memoize';
+
 import { ARROW_SIZE, FitAnchorWidth, Placement } from './constants';
 
 /**

package/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';
 

package/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 () => {

package/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:' }));
 
 /**

package/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;

package/src/components/text-field/TextField.test.tsx

@@ -14,13 +14,13 @@ import {
 } 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 { partitionMulti } from '@lumx/react/utils/collection/partitionMulti';
 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.

package/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', () => ({

package/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

package/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/makeListenerTowerContext';
 

package/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/makeListenerTowerContext';
 

package/src/hooks/useSizeOnWindowResize.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import throttle from 'lodash/throttle';
-import { RectSize } from '@lumx/react/utils/type';
+import type { RectSize } from '@lumx/react/utils/type';
 
 /**
  * Observe element size (only works if it's size depends on the window size).
@@ -13,14 +12,19 @@ import { RectSize } from '@lumx/react/utils/type';
  */
 export function useSizeOnWindowResize(elementRef: React.RefObject<HTMLElement>): [RectSize | null, () => void] {
     const [size, setSize] = React.useState<null | RectSize>(null);
-    const updateSize = React.useMemo(
-        () =>
-            throttle(() => {
-                const newSize = elementRef.current?.getBoundingClientRect();
-                if (newSize) setSize(newSize);
-            }, 10),
-        [elementRef],
-    );
+    const updateSize = React.useMemo(() => {
+        let prevTimeout: ReturnType<typeof setTimeout> | undefined;
+        function update() {
+            const newSize = elementRef.current?.getBoundingClientRect();
+            if (newSize) setSize(newSize);
+            prevTimeout = undefined;
+        }
+        return () => {
+            if (!prevTimeout) {
+                prevTimeout = setTimeout(update, 10);
+            }
+        };
+    }, [elementRef]);
     React.useEffect(() => {
         updateSize();
         window.addEventListener('resize', updateSize);

package/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;
         }

package/src/utils/{DOM → 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

package/src/utils/{focus → 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');

package/src/utils/{focus → 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');

package/src/utils/{browserDoesNotSupportHover.test.js → 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);
     });
 });

package/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;

package/src/utils/browser/{getPrefersReducedMotion.ts → 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;
 }

package/src/utils/className/getFontColorClassName.ts

@@ -0,0 +1,9 @@
+import { ColorPalette, ColorVariant } from '@lumx/react';
+
+/**
+ * Returns the classname associated to the given color and variant.
+ * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-l2`
+ */
+export const getFontColorClassName = (color: ColorPalette, colorVariant: ColorVariant = ColorVariant.N) => {
+    return `lumx-color-font-${color}-${colorVariant}`;
+};

package/src/utils/{className.ts → className/getRootClassName.ts}

@@ -1,13 +1,9 @@
-import { CSS_PREFIX } from '@lumx/react/constants';
-
+import { CSS_PREFIX } from '@lumx/core/js/constants';
 import kebabCase from 'lodash/kebabCase';
-import { ColorPalette, ColorVariant, Typography } from '@lumx/react/components';
 
 // See https://regex101.com/r/YjS1uI/3
 const LAST_PART_CLASSNAME = /^(.*)-(.+)$/gi;
 
-export { getBasicClass, handleBasicClasses } from '@lumx/core/js/utils';
-
 /**
  * Get the name of the root CSS class of a component based on its name.
  *
@@ -26,19 +22,3 @@ export function getRootClassName(componentName: string, subComponent?: boolean):
     }
     return formattedClassName;
 }
-
-/**
- * Returns the classname associated to the given color and variant.
- * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-l2`
- */
-export const getFontColorClassName = (color: ColorPalette, colorVariant: ColorVariant = ColorVariant.N) => {
-    return `lumx-color-font-${color}-${colorVariant}`;
-};
-
-/**
- * Returns the classname associated to the given typography.
- * For example, for `Typography.title` it returns `lumx-typography-title`
- */
-export const getTypographyClassName = (typography: Typography) => {
-    return `lumx-typography-${typography}`;
-};

package/src/utils/className/getTypographyClassName.ts

@@ -0,0 +1,9 @@
+import { Typography } from '@lumx/react';
+
+/**
+ * Returns the classname associated to the given typography.
+ * For example, for `Typography.title` it returns `lumx-typography-title`
+ */
+export const getTypographyClassName = (typography: Typography) => {
+    return `lumx-typography-${typography}`;
+};

package/src/utils/className/index.ts

@@ -0,0 +1,4 @@
+export { getBasicClass, handleBasicClasses } from '@lumx/core/js/utils';
+export { getRootClassName } from './getRootClassName';
+export { getTypographyClassName } from './getTypographyClassName';
+export { getFontColorClassName } from './getFontColorClassName';

package/src/utils/function/memoize.test.ts

@@ -0,0 +1,36 @@
+import { memoize } from '@lumx/react/utils/function/memoize';
+
+describe(memoize, () => {
+    it('should memoize a function returning nothing', () => {
+        const fn = jest.fn();
+        const memoized = memoize(fn);
+
+        expect(memoized()).toEqual(undefined);
+        expect(memoized()).toEqual(undefined);
+        expect(fn).toHaveBeenCalledTimes(1);
+    });
+
+    it('should memoize a function with no args', () => {
+        const fn = jest.fn((i) => i);
+        const memoized = memoize(fn);
+
+        expect(memoized('value')).toEqual('value');
+        expect(memoized('value')).toEqual('value');
+        expect(fn).toHaveBeenCalledTimes(1);
+
+        expect(memoized('another value')).toEqual('another value');
+        expect(fn).toHaveBeenCalledTimes(2);
+    });
+
+    it('should memoize a function with multiple args', () => {
+        const fn = jest.fn((a, b) => `${a} ${b}`);
+        const memoized = memoize(fn);
+
+        expect(memoized(1, true)).toEqual('1 true');
+        expect(memoized(1, true)).toEqual('1 true');
+        expect(fn).toHaveBeenCalledTimes(1);
+
+        expect(memoized('foo', 4)).toEqual('foo 4');
+        expect(fn).toHaveBeenCalledTimes(2);
+    });
+});

package/src/utils/function/memoize.ts

@@ -0,0 +1,13 @@
+/** Memoize a function based on the serialization of its args */
+export function memoize<A extends Array<unknown>, R>(fn: (...args: A) => R): (...args: A) => R {
+    const cache = new Map<string, R>();
+
+    return (...args) => {
+        const serializedArgs = JSON.stringify(args);
+        if (cache.has(serializedArgs)) return cache.get(serializedArgs) as R;
+
+        const value = fn(...args);
+        cache.set(serializedArgs, value);
+        return value;
+    };
+}

package/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]);
+    });
+});

package/src/utils/browserDoesNotSupportHover.ts

@@ -1,2 +0,0 @@
-/** Return true if the browser does not support pointer hover */
-export const browserDoesNotSupportHover = (): boolean => !!window.matchMedia?.('(hover: none)').matches;

package/src/utils/isInternetExplorer.ts

@@ -1,15 +0,0 @@
-import { WINDOW } from '@lumx/react/constants';
-
-/**
- * Check if browser is IE
- * @return Browser is IE or not
- */
-export const isInternetExplorer = () => {
-    const userAgent = WINDOW?.navigator?.userAgent;
-    if (!userAgent) {
-        return false;
-    }
-    const msie = userAgent.indexOf('MSIE ');
-    const isIEVersion = !!userAgent.match(/Trident.*rv:11\./);
-    return msie > 0 || isIEVersion;
-};

package/src/utils/userHasReducedMotion.ts

@@ -1,7 +0,0 @@
-export const userHasReducedMotion = () => {
-    try {
-        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-    } catch (e) {
-        return false;
-    }
-};

package/src/utils/utils.test.ts

@@ -1,21 +0,0 @@
-import { isInternetExplorer } from './isInternetExplorer';
-
-describe('isInternetExplorer', () => {
-    it('should detect IE 10', () => {
-        const userAgentIE10 = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0)';
-        Object.defineProperty(window.navigator, 'userAgent', { value: userAgentIE10, configurable: true });
-        expect(isInternetExplorer()).toEqual(true);
-    });
-
-    it('should detect IE 11', () => {
-        const userAgentIE11 = 'Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11.0) like Gecko';
-        Object.defineProperty(window.navigator, 'userAgent', { value: userAgentIE11, configurable: true });
-        expect(isInternetExplorer()).toEqual(true);
-    });
-
-    it('should not detect IE', () => {
-        const userAgentFirefox = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:74.0) Gecko/20100101 Firefox/74.0';
-        Object.defineProperty(window.navigator, 'userAgent', { value: userAgentFirefox, configurable: true });
-        expect(isInternetExplorer()).toEqual(false);
-    });
-});