@amsterdam/design-system-react 2.0.1 → 2.1.0

package/dist/Menu/Menu.d.ts

@@ -3,22 +3,43 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type MenuProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+export type MenuProps = {
+    /**
+     * A name for this menu, which screen readers will announce.
+     * Only applies to the `inWideWindow` appearance: otherwise, the menu is in the Page Header, which ensures accessibility itself.
+     * @default Hoofdnavigatie
+     */
     accessibleName?: string;
-};
-export declare const MenuRoot: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+    /** Hides the component on narrow windows. */
+    inWideWindow?: boolean;
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+export declare const MenuRoot: import("react").ForwardRefExoticComponent<{
+    /**
+     * A name for this menu, which screen readers will announce.
+     * Only applies to the `inWideWindow` appearance: otherwise, the menu is in the Page Header, which ensures accessibility itself.
+     * @default Hoofdnavigatie
+     */
     accessibleName?: string;
-} & import("react").RefAttributes<HTMLElement>>;
+    /** Hides the component on narrow windows. */
+    inWideWindow?: boolean;
+} & HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<any>>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-menu--docs Menu docs at Amsterdam Design System}
  */
-export declare const Menu: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+export declare const Menu: import("react").ForwardRefExoticComponent<{
+    /**
+     * A name for this menu, which screen readers will announce.
+     * Only applies to the `inWideWindow` appearance: otherwise, the menu is in the Page Header, which ensures accessibility itself.
+     * @default Hoofdnavigatie
+     */
     accessibleName?: string;
-} & import("react").RefAttributes<HTMLElement>> & {
+    /** Hides the component on narrow windows. */
+    inWideWindow?: boolean;
+} & HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<any>> & {
     Link: import("react").ForwardRefExoticComponent<{
         color?: "contrast" | "inverse";
         icon: import("..").IconProps["svg"];

package/dist/Menu/Menu.js

@@ -2,7 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { MenuLink } from './MenuLink';
-export const MenuRoot = forwardRef(({ accessibleName = 'Hoofdnavigatie', children, className, ...restProps }, ref) => (_jsxs("nav", { ...restProps, "aria-labelledby": "primary-navigation", className: clsx('ams-menu', className), ref: ref, children: [_jsx("h2", { className: "ams-visually-hidden", id: "primary-navigation", children: accessibleName }), _jsx("ul", { className: "ams-menu__list", children: children })] })));
+export const MenuRoot = forwardRef(({ accessibleName = 'Hoofdnavigatie', children, className, inWideWindow, ...restProps }, ref) => {
+    // In a medium or narrow window, the Menu is a child of the `nav` of Page Header.
+    // In a wide window, we render a `nav` element and the related accessibility features.
+    const Tag = inWideWindow ? 'nav' : 'div';
+    return (_jsxs(Tag, { ...restProps, "aria-labelledby": inWideWindow ? 'primary-navigation' : undefined, className: clsx('ams-menu', inWideWindow && `ams-menu--in-wide-window`, className), ref: ref, children: [inWideWindow && (_jsx("h2", { className: "ams-visually-hidden", id: "primary-navigation", children: accessibleName })), _jsx("ul", { className: "ams-menu__list", children: children })] }));
+});
 MenuRoot.displayName = 'Menu';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-menu--docs Menu docs at Amsterdam Design System}

package/dist/Menu/Menu.test.js

@@ -9,30 +9,47 @@ import { Menu } from './Menu';
 import '@testing-library/jest-dom';
 describe('Menu', () => {
     it('renders', () => {
-        render(_jsx(Menu, {}));
-        const component = screen.getByRole('navigation');
+        const { container } = render(_jsx(Menu, {}));
+        const component = container.querySelector(':only-child');
+        const list = screen.getByRole('list');
         expect(component).toBeInTheDocument();
         expect(component).toBeVisible();
+        expect(component).toContainElement(list);
     });
     it('renders a design system BEM class name', () => {
-        render(_jsx(Menu, {}));
-        const component = screen.getByRole('navigation');
+        const { container } = render(_jsx(Menu, {}));
+        const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-menu');
     });
     it('renders an extra class name', () => {
-        render(_jsx(Menu, { className: "extra" }));
-        const component = screen.getByRole('navigation');
+        const { container } = render(_jsx(Menu, { className: "extra" }));
+        const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-menu extra');
     });
+    it('renders a `nav` element with the `inWideWindow` prop', () => {
+        render(_jsx(Menu, { inWideWindow: true }));
+        const component = screen.getByRole('navigation');
+        expect(component).toBeInTheDocument();
+    });
+    it('renders the class name for the `inWideWindow` prop', () => {
+        const { container } = render(_jsx(Menu, { inWideWindow: true }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-menu--in-wide-window');
+    });
     it('supports ForwardRef in React', () => {
         const ref = createRef();
-        render(_jsx(Menu, { ref: ref }));
-        const component = screen.getByRole('navigation');
+        const { container } = render(_jsx(Menu, { ref: ref }));
+        const component = container.querySelector(':only-child');
         expect(ref.current).toBe(component);
     });
-    it('renders a custom accessible name for the logo', () => {
-        render(_jsx(Menu, { accessibleName: "Custom accessible name" }));
-        const component = screen.getByRole('heading', { name: 'Custom accessible name' });
+    it('renders a custom accessible name', () => {
+        render(_jsx(Menu, { accessibleName: "Custom accessible name", inWideWindow: true }));
+        const component = screen.getByRole('navigation', { name: 'Custom accessible name' });
         expect(component).toBeInTheDocument();
     });
+    it('doesn’t render a custom accessible name if not in a wide window', () => {
+        render(_jsx(Menu, { accessibleName: "Custom accessible name" }));
+        const component = screen.queryByRole('navigation', { name: 'Custom accessible name' });
+        expect(component).not.toBeInTheDocument();
+    });
 });

package/dist/Menu/MenuLink.d.ts

@@ -5,13 +5,19 @@
 import type { AnchorHTMLAttributes, PropsWithChildren } from 'react';
 import type { IconProps } from '../Icon';
 export type MenuLinkProps = {
-    /** Changes the text colour for readability on a light or dark background. */
+    /**
+     * Changes the text colour for readability on a light or dark background.
+     * @deprecated The menu has a dark background now, so this is no longer needed.
+     */
     color?: 'contrast' | 'inverse';
     /** An icon to display instead of the default chevron. Don’t mix custom icons with chevrons in one list. */
     icon: IconProps['svg'];
 } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
 export declare const MenuLink: import("react").ForwardRefExoticComponent<{
-    /** Changes the text colour for readability on a light or dark background. */
+    /**
+     * Changes the text colour for readability on a light or dark background.
+     * @deprecated The menu has a dark background now, so this is no longer needed.
+     */
     color?: "contrast" | "inverse";
     /** An icon to display instead of the default chevron. Don’t mix custom icons with chevrons in one list. */
     icon: IconProps["svg"];

package/dist/Menu/MenuLink.test.js

@@ -8,7 +8,7 @@ import { DocumentIcon, StarIcon } from '@amsterdam/design-system-react-icons';
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { Menu } from './Menu';
-describe('Menu link', () => {
+describe('Menu Link', () => {
     it('renders', () => {
         const { container } = render(_jsx(Menu.Link, { href: "#", icon: DocumentIcon }));
         const listItem = screen.getByRole('listitem');

package/dist/OrderedList/OrderedList.d.ts

@@ -3,26 +3,26 @@
  * Copyright Gemeente Amsterdam
  */
 import type { OlHTMLAttributes, PropsWithChildren } from 'react';
-export type OrderedListProps = PropsWithChildren<OlHTMLAttributes<HTMLOListElement>> & {
+export type OrderedListProps = {
     /** 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<OlHTMLAttributes<HTMLOListElement>>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-ordered-list--docs Ordered List docs at Amsterdam Design System}
  */
-export declare const OrderedList: import("react").ForwardRefExoticComponent<OlHTMLAttributes<HTMLOListElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+export declare const OrderedList: import("react").ForwardRefExoticComponent<{
     /** 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";
+} & OlHTMLAttributes<HTMLOListElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLOListElement>> & {
     Item: import("react").ForwardRefExoticComponent<import("react").LiHTMLAttributes<HTMLLIElement> & {
         children?: import("react").ReactNode | undefined;

package/dist/PageHeader/PageHeader.d.ts

@@ -4,7 +4,7 @@
  */
 import type { AnchorHTMLAttributes, ComponentType, HTMLAttributes, ReactNode } from 'react';
 import type { LogoBrand } from '../Logo';
-export type PageHeaderProps = HTMLAttributes<HTMLElement> & {
+export type PageHeaderProps = {
     /** The name of the application. */
     brandName?: string;
     /** The accessible name of the logo. */
@@ -25,11 +25,11 @@ export type PageHeaderProps = HTMLAttributes<HTMLElement> & {
     navigationLabel?: string;
     /** Whether the menu button is visible on wide screens.  */
     noMenuButtonOnWideWindow?: boolean;
-};
+} & HTMLAttributes<HTMLElement>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page-header--docs Page Header docs at Amsterdam Design System}
  */
-export declare const PageHeader: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+export declare const PageHeader: import("react").ForwardRefExoticComponent<{
     /** The name of the application. */
     brandName?: string;
     /** The accessible name of the logo. */
@@ -50,11 +50,11 @@ export declare const PageHeader: import("react").ForwardRefExoticComponent<HTMLA
     navigationLabel?: string;
     /** Whether the menu button is visible on wide screens.  */
     noMenuButtonOnWideWindow?: boolean;
-} & import("react").RefAttributes<HTMLElement>> & {
+} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>> & {
     GridCellNarrowWindowOnly: import("react").ForwardRefExoticComponent<import("..").GridCellProps & import("react").RefAttributes<HTMLElement>>;
-    MenuLink: import("react").ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
-        children?: ReactNode | undefined;
-    } & {
+    MenuLink: import("react").ForwardRefExoticComponent<{
         fixed?: boolean;
+    } & AnchorHTMLAttributes<HTMLAnchorElement> & {
+        children?: ReactNode | undefined;
     } & import("react").RefAttributes<HTMLAnchorElement>>;
 };

package/dist/PageHeader/PageHeader.test.js

@@ -1,8 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createRef } from 'react';

package/dist/PageHeader/PageHeaderGridCellNarrowWindowOnly.d.ts

@@ -2,5 +2,5 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-import { GridCellProps } from '../Grid';
+import type { GridCellProps } from '../Grid';
 export declare const PageHeaderGridCellNarrowWindowOnly: import("react").ForwardRefExoticComponent<GridCellProps & import("react").RefAttributes<HTMLElement>>;

package/dist/PageHeader/PageHeaderGridCellNarrowWindowOnly.js

@@ -1,8 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { Grid } from '../Grid';

package/dist/PageHeader/PageHeaderMenuLink.d.ts

@@ -2,12 +2,12 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-import { AnchorHTMLAttributes, PropsWithChildren } from 'react';
-export type PageHeaderMenuLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>> & {
+import type { AnchorHTMLAttributes, PropsWithChildren } from 'react';
+export type PageHeaderMenuLinkProps = {
     fixed?: boolean;
-};
-export declare const PageHeaderMenuLink: import("react").ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
+export declare const PageHeaderMenuLink: import("react").ForwardRefExoticComponent<{
     fixed?: boolean;
+} & AnchorHTMLAttributes<HTMLAnchorElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/PageHeader/PageHeaderMenuLink.js

@@ -1,8 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 export const PageHeaderMenuLink = forwardRef(({ children, className, fixed, ...restProps }, ref) => (_jsx("li", { className: clsx('ams-page-header__menu-item', fixed && 'ams-page-header__menu-item--fixed'), children: _jsx("a", { ...restProps, className: clsx('ams-page-header__menu-link', className), ref: ref, children: children }) })));

package/dist/PageHeading/PageHeading.d.ts

@@ -3,17 +3,17 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type PageHeadingProps = PropsWithChildren<HTMLAttributes<HTMLHeadingElement>> & {
+export type PageHeadingProps = {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
-};
+} & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
 /**
  * @deprecated We no longer use this size of headings. Use `Heading` with level 1 instead.
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-page-heading--docs Page Heading docs at Amsterdam Design System}
  */
-export declare const PageHeading: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+export declare const PageHeading: import("react").ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
+} & HTMLAttributes<HTMLHeadingElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/Pagination/LinkItem.d.ts

@@ -2,10 +2,10 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-import { PaginationProps } from './Pagination';
-type LinkItemProps = Pick<PaginationProps, 'linkComponent' | 'linkTemplate'> & {
+import type { PaginationProps } from './Pagination';
+type LinkItemProps = {
     currentPage: PaginationProps['page'];
     pageNumber: number;
-};
+} & Pick<PaginationProps, 'linkComponent' | 'linkTemplate'>;
 export declare const LinkItem: ({ currentPage, linkComponent, linkTemplate, pageNumber }: LinkItemProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/Pagination/Pagination.d.ts

@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 import type { AnchorHTMLAttributes, ComponentType, HTMLAttributes } from 'react';
-export type PaginationProps = HTMLAttributes<HTMLElement> & {
+export type PaginationProps = {
     /** The accessible name for the Pagination component. */
     accessibleName?: string;
     /**
@@ -50,11 +50,11 @@ export type PaginationProps = HTMLAttributes<HTMLElement> & {
      * Note: must be unique for the page.
      */
     visuallyHiddenLabelId?: string;
-};
+} & HTMLAttributes<HTMLElement>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-pagination--docs Pagination docs at Amsterdam Design System}
  */
-export declare const Pagination: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+export declare const Pagination: import("react").ForwardRefExoticComponent<{
     /** The accessible name for the Pagination component. */
     accessibleName?: string;
     /**
@@ -101,4 +101,4 @@ export declare const Pagination: import("react").ForwardRefExoticComponent<HTMLA
      * Note: must be unique for the page.
      */
     visuallyHiddenLabelId?: string;
-} & import("react").RefAttributes<HTMLElement>>;
+} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;

package/dist/Paragraph/Paragraph.d.ts

@@ -1,27 +1,23 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
 /**
  * @license EUPL-1.2+
  * Copyright (c) 2021 Robbert Broersma
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type ParagraphProps = PropsWithChildren<HTMLAttributes<HTMLParagraphElement>> & {
+export type ParagraphProps = {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
     /** The size of the text. */
     size?: 'small' | 'large';
-};
+} & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-paragraph--docs Paragraph docs at Amsterdam Design System}
  */
-export declare const Paragraph: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+export declare const Paragraph: import("react").ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
     /** The size of the text. */
     size?: "small" | "large";
+} & HTMLAttributes<HTMLParagraphElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/PasswordInput/PasswordInput.d.ts

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

package/dist/Radio/Radio.d.ts

@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 import type { InputHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
-export type RadioProps = PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>> & {
+export type RadioProps = {
     /**
      * An icon to display instead of the default icon.
      * @default RadioIcon
@@ -11,13 +11,11 @@ export type RadioProps = PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputEle
     icon?: Function | ReactNode;
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-};
+} & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-radio--docs Radio docs at Amsterdam Design System}
  */
-export declare const Radio: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
-    children?: ReactNode | undefined;
-} & {
+export declare const Radio: import("react").ForwardRefExoticComponent<{
     /**
      * An icon to display instead of the default icon.
      * @default RadioIcon
@@ -25,4 +23,6 @@ export declare const Radio: import("react").ForwardRefExoticComponent<Omit<Input
     icon?: Function | ReactNode;
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "aria-invalid"> & {
+    children?: ReactNode | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Row/Row.d.ts

@@ -8,7 +8,7 @@ export declare const rowTags: readonly ["article", "div", "section"];
 type RowTag = (typeof rowTags)[number];
 export declare const rowGapSizes: readonly ["none", "x-small", "small", "large", "x-large"];
 type RowGap = (typeof rowGapSizes)[number];
-export type RowProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+export type RowProps = {
     /**
      * The horizontal alignment of the items in the row.
      * @default start
@@ -34,13 +34,11 @@ export type RowProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
      * @default false
      */
     wrap?: boolean;
-};
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-row--docs Row docs at Amsterdam Design System}
  */
-export declare const Row: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-    children?: import("react").ReactNode | undefined;
-} & {
+export declare const Row: import("react").ForwardRefExoticComponent<{
     /**
      * The horizontal alignment of the items in the row.
      * @default start
@@ -66,5 +64,7 @@ export declare const Row: import("react").ForwardRefExoticComponent<HTMLAttribut
      * @default false
      */
     wrap?: boolean;
+} & HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<unknown>>;
 export {};

package/dist/SearchField/SearchField.d.ts

@@ -14,6 +14,7 @@ export declare const SearchField: import("react").ForwardRefExoticComponent<HTML
         children?: import("react").ReactNode;
         className?: string | undefined | undefined;
         color?: string | undefined | undefined;
+        type?: "submit" | "reset" | "button" | undefined | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -279,7 +280,6 @@ export declare const SearchField: import("react").ForwardRefExoticComponent<HTML
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         form?: string | undefined | undefined;
         value?: string | number | readonly string[] | undefined;
-        type?: "submit" | "reset" | "button" | undefined | undefined;
         disabled?: boolean | undefined | undefined;
         formAction?: string | undefined;
         formEncType?: string | undefined | undefined;
@@ -288,8 +288,8 @@ export declare const SearchField: import("react").ForwardRefExoticComponent<HTML
         formTarget?: string | undefined | undefined;
         name?: string | undefined | undefined;
     } & import("react").RefAttributes<HTMLButtonElement>>;
-    Input: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<HTMLInputElement> & {
+    Input: import("react").ForwardRefExoticComponent<{
         invalid?: boolean;
         label?: string;
-    } & import("react").RefAttributes<HTMLInputElement>>;
+    } & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
 };

package/dist/SearchField/SearchField.test.js

@@ -8,30 +8,13 @@ import { createRef } from 'react';
 import { SearchField } from './SearchField';
 import '@testing-library/jest-dom';
 describe('Search field', () => {
-    it('renders the outer container', () => {
+    it('renders the form', () => {
         render(_jsx(SearchField, {}));
         const component = screen.getByRole('search');
         expect(component).toBeInTheDocument();
         expect(component).toBeVisible();
     });
-    it('renders the input', () => {
-        render(_jsx(SearchField.Input, {}));
-        const component = screen.getByRole('searchbox');
-        expect(component).toBeInTheDocument();
-        expect(component).toBeVisible();
-    });
-    it('renders the button', () => {
-        render(_jsx(SearchField.Button, {}));
-        const component = screen.getByRole('button');
-        expect(component).toBeInTheDocument();
-        expect(component).toBeVisible();
-    });
-    it('renders the button with a label', () => {
-        render(_jsx(SearchField.Button, { children: "Search" }));
-        const component = screen.getByRole('button', { name: 'Search' });
-        expect(component).toBeInTheDocument();
-    });
-    it('renders the outer container design system BEM class name', () => {
+    it('renders the design system BEM class name', () => {
         render(_jsx(SearchField, {}));
         const component = screen.getByRole('search');
         expect(component).toHaveClass('ams-search-field');

package/dist/SearchField/SearchFieldButton.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { SearchIcon } from '@amsterdam/design-system-react-icons';
 import { forwardRef } from 'react';
 import { Button } from '../Button';
-export const SearchFieldButton = forwardRef(({ children = 'Zoeken', ...restProps }, ref) => (_jsx(Button, { ...restProps, icon: SearchIcon, iconOnly: true, ref: ref, children: children })));
+export const SearchFieldButton = forwardRef(({ children = 'Zoeken', ...restProps }, ref) => (_jsx(Button, { ...restProps, icon: SearchIcon, iconOnly: true, ref: ref, type: "submit", children: children })));
 SearchFieldButton.displayName = 'SearchField.Button';

package/dist/SearchField/SearchFieldButton.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import '@testing-library/jest-dom';

package/dist/SearchField/SearchFieldButton.test.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { SearchField } from './SearchField';
+describe('Search Field Button', () => {
+    it('renders a submit button', () => {
+        render(_jsx(SearchField.Button, { children: "Click me!" }));
+        const button = screen.getByRole('button', {
+            name: 'Click me!',
+        });
+        expect(button).toBeInTheDocument();
+        expect(button).toBeVisible();
+        expect(button).toHaveAttribute('type', 'submit');
+    });
+    it('renders a default label', () => {
+        render(_jsx(SearchField.Button, {}));
+        const button = screen.getByRole('button');
+        expect(button).toHaveTextContent('Zoeken');
+    });
+    it('renders the primary variant of the Button component', () => {
+        render(_jsx(SearchField.Button, { children: "Click me!" }));
+        const button = screen.getByRole('button', {
+            name: 'Click me!',
+        });
+        expect(button).toHaveClass('ams-button ams-button--primary');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(SearchField.Button, { className: "extra", children: "Click me!" }));
+        const button = screen.getByRole('button', {
+            name: 'Click me!',
+        });
+        expect(button).toHaveClass('ams-button extra');
+    });
+    it('is able to pass a React ref', () => {
+        const ref = createRef();
+        render(_jsx(SearchField.Button, { ref: ref, children: "Click me!" }));
+        const button = screen.getByRole('button', {
+            name: 'Click me!',
+        });
+        expect(ref.current).toBe(button);
+    });
+});

package/dist/SearchField/SearchFieldInput.d.ts

@@ -3,9 +3,9 @@
  * Copyright Gemeente Amsterdam
  */
 import type { InputHTMLAttributes } from 'react';
-export declare const SearchFieldInput: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+export declare const SearchFieldInput: import("react").ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
     /** Describes the field for screen readers. */
     label?: string;
-} & import("react").RefAttributes<HTMLInputElement>>;
+} & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;