@amsterdam/design-system-react 0.14.1 → 0.16.0

package/dist/common/shortSize.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+export declare const shortSize: {
+    large: string;
+    medium: string;
+    none: string;
+    small: string;
+    'x-large': string;
+    'x-small': string;
+};

package/dist/common/shortSize.js

@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+// If you modify this list, you must also update the ones in
+// packages/css/src/components/gap/gap.scss and
+// packages/css/src/components/margin/margin.scss
+export const shortSize = {
+    large: 'l',
+    medium: 'm',
+    none: 'none',
+    small: 's',
+    'x-large': 'xl',
+    'x-small': 'xs',
+};

package/dist/common/types.d.ts

@@ -0,0 +1,11 @@
+export declare const aspectRatioOptions: readonly ["9:16", "3:4", "1:1", "4:3", "16:9", "16:5"];
+export type AspectRatioProps = {
+    /** The aspect ratio to display media content in. */
+    aspectRatio?: (typeof aspectRatioOptions)[number];
+};
+export declare const crossAlignOptions: readonly ["start", "center", "baseline", "end"];
+export type CrossAlign = (typeof crossAlignOptions)[number];
+export declare const crossAlignOptionsForColumn: ("center" | "start" | "end")[];
+export type CrossAlignForColumn = (typeof crossAlignOptionsForColumn)[number];
+export declare const mainAlignOptions: readonly ["center", "end", "between", "around", "evenly"];
+export type MainAlign = (typeof mainAlignOptions)[number];

package/dist/common/types.js

@@ -0,0 +1,9 @@
+// This array is not used to create the aspect ratio CSS classes.
+// If you modify this array, you must also update the
+// aspect ratio CSS classes in /packages/css/src/components/aspect-ratio/aspect-ratio.scss.
+export const aspectRatioOptions = ['9:16', '3:4', '1:1', '4:3', '16:9', '16:5'];
+export const crossAlignOptions = ['start', 'center', 'baseline', 'end'];
+// Baseline alignment doesn’t make much sense in a column.
+// This separate type for it clarifies its appearance in Storybook.
+export const crossAlignOptionsForColumn = crossAlignOptions.filter((option) => option !== 'baseline');
+export const mainAlignOptions = ['center', 'end', 'between', 'around', 'evenly'];

package/dist/common/useIsAfterBreakpoint.d.ts

@@ -0,0 +1,3 @@
+type useIsAfterBreakpointProps = 'medium' | 'wide';
+declare const useIsAfterBreakpoint: (breakpoint: useIsAfterBreakpointProps) => boolean;
+export default useIsAfterBreakpoint;

package/dist/common/useIsAfterBreakpoint.js

@@ -0,0 +1,24 @@
+import { useLayoutEffect, useState } from 'react';
+// TODO: we should set the breakpoint in JS somewhere and render this and the sass variables from that
+const breakpoints = {
+    medium: '36rem',
+    wide: '68rem',
+};
+const useIsAfterBreakpoint = (breakpoint) => {
+    const [matches, setMatches] = useState(false);
+    useLayoutEffect(() => {
+        // Check for window object to avoid SSR issues
+        if (breakpoint && typeof window !== 'undefined') {
+            const media = window.matchMedia(`(min-width: ${breakpoints[breakpoint]})`);
+            if (media.matches !== matches) {
+                setMatches(media.matches);
+            }
+            const listener = () => setMatches(media.matches);
+            window.addEventListener('resize', listener);
+            return () => window.removeEventListener('resize', listener);
+        }
+        return undefined;
+    }, [matches, breakpoint]);
+    return matches;
+};
+export default useIsAfterBreakpoint;

package/dist/common/useKeyboardFocus.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { KeyboardEvent, RefObject } from 'react';
+export declare const KeyboardKeys: {
+    ArrowDown: string;
+    ArrowLeft: string;
+    ArrowRight: string;
+    ArrowUp: string;
+    End: string;
+    Home: string;
+};
+type Options = {
+    directChildrenOnly?: boolean;
+    focusableElements?: string[];
+    horizontally?: boolean;
+    rotating?: boolean;
+};
+export declare const useKeyboardFocus: (ref: RefObject<HTMLElement>, options: Options) => {
+    keyDown: (e: KeyboardEvent) => void;
+};
+export {};

package/dist/common/useKeyboardFocus.js

@@ -0,0 +1,56 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+export const KeyboardKeys = {
+    ArrowDown: 'ArrowDown',
+    ArrowLeft: 'ArrowLeft',
+    ArrowRight: 'ArrowRight',
+    ArrowUp: 'ArrowUp',
+    End: 'End',
+    Home: 'Home',
+};
+const FOCUSABLE_ELEMENTS = [
+    'a[href]:not([disabled])',
+    'button:not([disabled])',
+    'textarea:not([disabled])',
+    'input[type="text"]:not([disabled])',
+    'input[type="radio"]:not([disabled])',
+    'input[type="checkbox"]:not([disabled])',
+    'select:not([disabled])',
+];
+export const useKeyboardFocus = (ref, options) => {
+    const { directChildrenOnly = false, focusableElements = FOCUSABLE_ELEMENTS, horizontally = false, rotating = false, } = options;
+    const nextKey = horizontally ? KeyboardKeys.ArrowRight : KeyboardKeys.ArrowDown;
+    const prevKey = horizontally ? KeyboardKeys.ArrowLeft : KeyboardKeys.ArrowUp;
+    const keyDown = (e) => {
+        if (!ref.current)
+            return;
+        const element = ref.current;
+        const { activeElement } = document;
+        const directChildSelector = directChildrenOnly ? ':scope > ' : '';
+        const focusableEls = Array.from(element.querySelectorAll(`${directChildSelector}${focusableElements.join(`, ${directChildSelector}`)}`));
+        const getIndex = (el) => (el && focusableEls.includes(el) ? focusableEls.indexOf(el) : -1);
+        let targetElement;
+        switch (e.key) {
+            case nextKey:
+                targetElement = focusableEls[getIndex(activeElement) + 1] || (rotating ? focusableEls[0] : undefined);
+                break;
+            case prevKey:
+                targetElement =
+                    focusableEls[getIndex(activeElement) - 1] || (rotating ? focusableEls[focusableEls.length - 1] : undefined);
+                break;
+            case KeyboardKeys.Home:
+                targetElement = focusableEls[0];
+                break;
+            case KeyboardKeys.End:
+                targetElement = focusableEls[focusableEls.length - 1];
+                break;
+        }
+        if (targetElement instanceof HTMLElement) {
+            targetElement.focus();
+            e.preventDefault();
+        }
+    };
+    return { keyDown };
+};

package/dist/common/useKeyboardFocus.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/common/useKeyboardFocus.test.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fireEvent, render } from '@testing-library/react';
+import { useRef } from 'react';
+import { KeyboardKeys, useKeyboardFocus } from './useKeyboardFocus';
+describe('use focus with arrows', () => {
+    const onFocusOneMock = jest.fn();
+    const onFocusTwoMock = jest.fn();
+    const onFocusThreeMock = jest.fn();
+    const getComponent = (rotate = undefined) => function () {
+        const ref = useRef(null);
+        const { keyDown } = useKeyboardFocus(ref, {
+            rotating: rotate,
+        });
+        return (_jsxs("div", { onKeyDown: keyDown, ref: ref, role: "menu", tabIndex: 0, children: [_jsx("button", { onFocus: onFocusOneMock, type: "button", children: "One" }), _jsx("button", { onFocus: onFocusTwoMock, type: "button", children: "Two" }), _jsx("button", { onFocus: onFocusThreeMock, type: "button", children: "Three" })] }));
+    };
+    afterEach(() => {
+        onFocusOneMock.mockReset();
+        onFocusTwoMock.mockReset();
+        onFocusThreeMock.mockReset();
+    });
+    it('sets focus when using arrow keys', () => {
+        const Component = getComponent();
+        const { container } = render(_jsx(Component, {}));
+        const firstChild = container.firstChild;
+        expect(onFocusOneMock).not.toHaveBeenCalled();
+        // 4 times, so we can check if there are no other elements focused after reaching the last one
+        Array.from(Array(4).keys()).forEach(() => {
+            fireEvent.keyDown(firstChild, {
+                key: KeyboardKeys.ArrowDown,
+            });
+        });
+        expect(onFocusOneMock).toHaveBeenCalledTimes(1);
+        expect(onFocusTwoMock).toHaveBeenCalledTimes(1);
+        expect(onFocusThreeMock).toHaveBeenCalledTimes(1);
+        // Same here
+        Array.from(Array(4).keys()).forEach(() => {
+            fireEvent.keyDown(firstChild, {
+                key: KeyboardKeys.ArrowUp,
+            });
+        });
+        expect(onFocusTwoMock).toHaveBeenCalledTimes(2);
+        expect(onFocusOneMock).toHaveBeenCalledTimes(2);
+    });
+    it('rotates focused elements', () => {
+        const Component = getComponent(true);
+        const { container } = render(_jsx(Component, {}));
+        const firstChild = container.firstChild;
+        Array.from(Array(9).keys()).forEach(() => {
+            fireEvent.keyDown(firstChild, {
+                key: KeyboardKeys.ArrowDown,
+            });
+        });
+        expect(onFocusOneMock).toHaveBeenCalledTimes(3);
+        Array.from(Array(9).keys()).forEach(() => {
+            fireEvent.keyDown(firstChild, {
+                key: KeyboardKeys.ArrowUp,
+            });
+        });
+        expect(onFocusOneMock).toHaveBeenCalledTimes(6);
+    });
+    it('sets focus to first element when using "Home" key', () => {
+        const Component = getComponent();
+        const { container } = render(_jsx(Component, {}));
+        const firstChild = container.firstChild;
+        fireEvent.keyDown(firstChild, {
+            key: KeyboardKeys.Home,
+        });
+        expect(onFocusOneMock).toHaveBeenCalledTimes(1);
+    });
+    it('sets focus to last element when using "End" key', () => {
+        const Component = getComponent();
+        const { container } = render(_jsx(Component, {}));
+        const firstChild = container.firstChild;
+        fireEvent.keyDown(firstChild, {
+            key: KeyboardKeys.End,
+        });
+        expect(onFocusThreeMock).toHaveBeenCalledTimes(1);
+    });
+});