@amsterdam/design-system-react 1.0.0 → 2.0.0

package/dist/TimeInput/TimeInput.d.ts

@@ -3,14 +3,14 @@
  * Copyright Gemeente Amsterdam
  */
 import type { InputHTMLAttributes } from 'react';
-export type TimeInputProps = {
+export type TimeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'> & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-time-input--docs Time Input docs at Amsterdam Design System}
  */
-export declare const TimeInput: import("react").ForwardRefExoticComponent<{
+export declare const TimeInput: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/TimeInput/TimeInput.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-time-input--docs Time Input docs at Amsterdam Design System}

package/dist/UnorderedList/UnorderedList.d.ts

@@ -3,26 +3,26 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type UnorderedListProps = {
+export type UnorderedListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>> & {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
     /** Whether the list items show a marker. */
     markers?: boolean;
     /** The size of the text. */
     size?: 'small';
-} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-unordered-list--docs Unordered List docs at Amsterdam Design System}
  */
-export declare const UnorderedList: import("react").ForwardRefExoticComponent<{
+export declare const UnorderedList: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+    children?: import("react").ReactNode | undefined;
+} & {
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
     /** Whether the list items show a marker. */
     markers?: boolean;
     /** The size of the text. */
     size?: "small";
-} & HTMLAttributes<HTMLUListElement> & {
-    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLUListElement>> & {
     Item: import("react").ForwardRefExoticComponent<import("react").LiHTMLAttributes<HTMLLIElement> & {
         children?: import("react").ReactNode | undefined;

package/dist/UnorderedList/UnorderedList.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { UnorderedListItem } from './UnorderedListItem';
 const UnorderedListRoot = forwardRef(({ children, className, color, markers = true, size, ...restProps }, ref) => {

package/dist/UnorderedList/UnorderedList.test.js

@@ -35,7 +35,7 @@ describe('Unordered list', () => {
     });
     it('renders its subcomponent', () => {
         const listItems = ['Item 1', 'Item 2', 'Item 3'];
-        const { container } = render(_jsx(UnorderedList, { children: listItems.map((item, index) => (_jsx(UnorderedList.Item, { children: item }, index))) }));
+        const { container } = render(_jsx(UnorderedList, { children: listItems.map((item) => (_jsx(UnorderedList.Item, { children: item }, item))) }));
         const list = screen.getByRole('list');
         const items = container.querySelectorAll('.ams-unordered-list__item');
         expect(list).toBeInTheDocument();

package/dist/UnorderedList/UnorderedListItem.js

@@ -1,9 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 export const UnorderedListItem = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("li", { className: clsx('ams-unordered-list__item', className), ref: ref, ...restProps, children: children })));
 UnorderedListItem.displayName = 'UnorderedList.Item';

package/dist/common/formatFileType.d.ts

@@ -7,4 +7,4 @@
  * @param fileType
  * @returns Human readable file type
  */
-export declare const formatFileType: (fileType: string) => "gif" | "jpg" | "png" | "txt" | "pdf" | "Word" | "Excel" | "PowerPoint" | "Document";
+export declare const formatFileType: (fileType: string) => "Word" | "pdf" | "Excel" | "PowerPoint" | "gif" | "jpg" | "png" | "txt" | "Document";

package/dist/common/formatFileType.js

@@ -9,25 +9,25 @@
  */
 export const formatFileType = (fileType) => {
     switch (fileType) {
-        case 'image/gif':
-            return 'gif';
-        case 'image/jpeg':
-            return 'jpg';
-        case 'image/png':
-            return 'png';
-        case 'text/plain':
-            return 'txt';
-        case 'application/pdf':
-            return 'pdf';
         case 'application/msword':
         case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
             return 'Word';
+        case 'application/pdf':
+            return 'pdf';
         case 'application/vnd.ms-excel':
         case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
             return 'Excel';
         case 'application/vnd.ms-powerpoint':
         case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
             return 'PowerPoint';
+        case 'image/gif':
+            return 'gif';
+        case 'image/jpeg':
+            return 'jpg';
+        case 'image/png':
+            return 'png';
+        case 'text/plain':
+            return 'txt';
         default:
             return 'Document';
     }

package/dist/common/useKeyboardFocus.js

@@ -33,6 +33,12 @@ export const useKeyboardFocus = (ref, options) => {
         const getIndex = (el) => (el && focusableEls.includes(el) ? focusableEls.indexOf(el) : -1);
         let targetElement;
         switch (e.key) {
+            case KeyboardKeys.End:
+                targetElement = focusableEls[focusableEls.length - 1];
+                break;
+            case KeyboardKeys.Home:
+                targetElement = focusableEls[0];
+                break;
             case nextKey:
                 targetElement = focusableEls[getIndex(activeElement) + 1] || (rotating ? focusableEls[0] : undefined);
                 break;
@@ -40,12 +46,6 @@ export const useKeyboardFocus = (ref, options) => {
                 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();

package/dist/common/useKeyboardFocus.test.js

@@ -10,7 +10,7 @@ describe('use focus with arrows', () => {
     const onFocusOneMock = jest.fn();
     const onFocusTwoMock = jest.fn();
     const onFocusThreeMock = jest.fn();
-    const getComponent = (rotate = undefined) => function () {
+    const Component = ({ rotate = undefined }) => {
         const ref = useRef(null);
         const { keyDown } = useKeyboardFocus(ref, {
             rotating: rotate,
@@ -23,7 +23,6 @@ describe('use focus with arrows', () => {
         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();
@@ -46,8 +45,7 @@ describe('use focus with arrows', () => {
         expect(onFocusOneMock).toHaveBeenCalledTimes(2);
     });
     it('rotates focused elements', () => {
-        const Component = getComponent(true);
-        const { container } = render(_jsx(Component, {}));
+        const { container } = render(_jsx(Component, { rotate: true }));
         const firstChild = container.firstChild;
         Array.from(Array(9).keys()).forEach(() => {
             fireEvent.keyDown(firstChild, {
@@ -63,7 +61,6 @@ describe('use focus with arrows', () => {
         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, {
@@ -72,7 +69,6 @@ describe('use focus with arrows', () => {
         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, {