@scottish-government/designsystem-react 0.12.0 → 0.13.0

package/src/images/icons/expand_less.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgExpandLess = (props: SVGProps<SVGSVGElement>) => (
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="#000000"
-        role="img"
-        {...props}
-    >
-        <path d="M0 0h24v24H0z" fill="none" />
-        <path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
-    </svg>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="#000000"
+    role="img"
+    {...props}
+  >
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
+  </svg>
 );
 export default SvgExpandLess;

package/src/images/icons/expand_more.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgExpandMore = (props: SVGProps<SVGSVGElement>) => (
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="#000000"
-        role="img"
-        {...props}
-    >
-        <path d="M0 0h24v24H0z" fill="none" />
-        <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
-    </svg>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="#000000"
+    role="img"
+    {...props}
+  >
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
+  </svg>
 );
 export default SvgExpandMore;

package/src/images/icons/list.tsx

@@ -1,18 +1,18 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgList = (props: SVGProps<SVGSVGElement>) => (
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="#000000"
-        role="img"
-        {...props}
-    >
-        <g fill="none">
-            <path d="M0 0h24v24H0V0z" />
-            <path d="M0 0h24v24H0V0z" opacity={0.87} />
-        </g>
-        <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7zm-4 6h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z" />
-    </svg>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="#000000"
+    role="img"
+    {...props}
+  >
+    <g fill="none">
+      <path d="M0 0h24v24H0V0z" />
+      <path d="M0 0h24v24H0V0z" opacity={0.87} />
+    </g>
+    <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7zm-4 6h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z" />
+  </svg>
 );
 export default SvgList;

package/src/images/icons/menu.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgMenu = (props: SVGProps<SVGSVGElement>) => (
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="#000000"
-        role="img"
-        {...props}
-    >
-        <path d="M0 0h24v24H0z" fill="none" />
-        <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
-    </svg>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="#000000"
+    role="img"
+    {...props}
+  >
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
+  </svg>
 );
 export default SvgMenu;

package/src/images/icons/priority_high.tsx

@@ -1,16 +1,16 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgPriorityHigh = (props: SVGProps<SVGSVGElement>) => (
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="#000000"
-        role="img"
-        {...props}
-    >
-        <path d="M0 0h24v24H0z" fill="none" />
-        <circle cx={12} cy={19} r={2} />
-        <path d="M10 3h4v12h-4z" />
-    </svg>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="#000000"
+    role="img"
+    {...props}
+  >
+    <path d="M0 0h24v24H0z" fill="none" />
+    <circle cx={12} cy={19} r={2} />
+    <path d="M10 3h4v12h-4z" />
+  </svg>
 );
 export default SvgPriorityHigh;

package/src/images/icons/search.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import type { SVGProps } from "react";
 const SvgSearch = (props: SVGProps<SVGSVGElement>) => (
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="#000000"
-        role="img"
-        {...props}
-    >
-        <path d="M0 0h24v24H0z" fill="none" />
-        <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
-    </svg>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="#000000"
+    role="img"
+    {...props}
+  >
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
+  </svg>
 );
 export default SvgSearch;

package/src/images/index.ts

@@ -0,0 +1,2 @@
+export * as documents from './documents';
+export * as icons from './icons';

package/src/index.ts

@@ -0,0 +1,4 @@
+export * as common from './common';
+export * as components from './components';
+export * as hooks from './hooks';
+export * as images from './images';

package/src/shared-types.ts

@@ -0,0 +1,40 @@
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type IconName = 'ArrowUpward' | 'CalendarToday' | 'Cancel' | 'CheckCircle' | 'ChevronLeft' | 'ChevronRight' | 'Close' | 'Description' | 'DoubleChevronLeft' | 'DoubleChevronRight' | 'Error' | 'ExpandLess' | 'ExpandMore' | 'List' | 'Menu' | 'PriorityHigh' | 'Search';
+export type DocumentIconName = 'Audio' | 'Csv' | 'Excel' | 'File' | 'Generic' | 'Geodata' | 'Ical' | 'Ico' | 'Image' | 'Odf' | 'Odg' | 'Odp' | 'Ods' | 'Odt' | 'Pdf' | 'Ppt' | 'Rtf' | 'Text' | 'Video' | 'Word' | 'Xml' | 'Zip';
+export type InputWidth = 'fixed-20' | 'fixed-10' | 'fixed-5' | 'fixed-4' | 'fixed-3' | 'fixed-2' | 'fluid-three-quarters' | 'fluid-two-thirds' | 'fluid-half' | 'fluid-one-third' | 'fluid-one-quarter';
+export type TagColour = 'grey' | 'green' | 'teal' | 'blue' | 'purple' | 'pink' | 'red' | 'orange' | 'yellow';
+export type TextInputType = 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
+
+export type LinkComponentProps = {
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    'aria-current'?: React.AriaAttributes['aria-current'];
+    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
+    children?: React.ReactNode;
+    className?: string;
+    href?: string;
+    onClick?: React.EventHandler<React.MouseEvent>;
+}
+
+export type LinkComponent = (linkComponent: LinkComponentProps) => React.ReactNode;
+
+export interface CheckboxRadioBase<T> extends React.InputHTMLAttributes<T> {
+    hintText?: string;
+    label: string;
+    onBlur?: React.FocusEventHandler<T>;
+    onChange?: React.ChangeEventHandler<T>;
+    isSmall?: boolean;
+}
+
+export interface FormFieldBase<T> extends React.AllHTMLAttributes <T> {
+    errorMessage?: string;
+    hasError?: boolean;
+    hintText?: string;
+    label: string;
+    onBlur?: React.FocusEventHandler<T>;
+    onChange?: React.ChangeEventHandler<T>;
+}
+
+export interface TextInputBase<T> extends FormFieldBase<T> {
+    countThreshold?: number;
+    maxlength?: number;
+}

package/vite.config.ts

@@ -1,6 +1,8 @@
-/// <reference types="vitest/config" />
+import "vitest/config";
+
 import { defineConfig } from 'vitest/config';
 import react from "@vitejs/plugin-react-swc";
+import { playwright } from '@vitest/browser-playwright';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
@@ -38,7 +40,7 @@ export default defineConfig({
           browser: {
             enabled: true,
             headless: true,
-            provider: 'playwright',
+            provider: playwright(),
             instances: [{
               browser: 'chromium'
             }]

package/@types/common/AbstractNotificationBanner.d.ts

@@ -1,17 +0,0 @@
-declare namespace SGDS.Common {
-    namespace AbstractNotificationBanner {
-        interface Buttons extends React.AllHTMLAttributes<HTMLDivElement> {
-            children: React.ReactNode
-        }
-    }
-
-    interface AbstractNotificationBanner extends React.AllHTMLAttributes<HTMLDivElement> {
-        hasIcon?: boolean,
-        hasColourIcon?: boolean,
-        hasInverseIcon?: boolean,
-        icon?: IconName,
-        isDismissable?: boolean,
-        title: string,
-        ref?: any
-    }
-}

package/@types/common/ActionLink.d.ts

@@ -1,8 +0,0 @@
-declare namespace SGDS.Common {
-    interface ActionLink extends React.AllHTMLAttributes<HTMLElement> {
-        describedby?: string,
-        href?: string,
-        linkComponent?: SGDS.LinkComponent,
-        onclick?: React.EventHandler<any>
-    }
-}

package/@types/common/ConditionalWrapper.d.ts

@@ -1,6 +0,0 @@
-declare namespace SGDS.Common {
-    interface ConditionalWrapper extends React.AllHTMLAttributes<HTMLElement> {
-        condition: boolean,
-        wrapper: any
-    }
-}

package/@types/common/FileIcon.d.ts

@@ -1,7 +0,0 @@
-declare namespace SGDS.Common {
-    interface FileIcon extends React.AllHTMLAttributes<SVGSVGElement> {
-        ariaLabel?: React.AriaAttributes['aria-label'],
-        className?: string,
-        icon: DocumentIconName
-    }
-}

package/@types/common/HintText.d.ts

@@ -1,6 +0,0 @@
-declare namespace SGDS.Common {
-    interface HintText extends React.AllHTMLAttributes<HTMLElement> {
-        id?: string,
-        text?: string
-    }
-}

package/@types/common/Icon.d.ts

@@ -1,9 +0,0 @@
-declare namespace SGDS.Common {
-    interface Icon extends React.AllHTMLAttributes<SVGSVGElement> {
-        ariaLabel?: React.AriaAttributes['aria-label'],
-        className?: string,
-        isFilled?: boolean,
-        icon: IconName,
-        iconSize?: string
-    }
-}

package/@types/common/ScreenReaderText.d.ts

@@ -1,4 +0,0 @@
-declare namespace SGDS.Common {
-    interface ScreenReaderText extends React.AllHTMLAttributes<HTMLElement> {
-    }
-}

package/@types/common/WrapperTag.d.ts

@@ -1,5 +0,0 @@
-declare namespace SGDS.Common {
-    interface WrapperTag extends React.AllHTMLAttributes<HTMLElement> {
-        tagName?: string
-    }
-}

package/@types/components/Accordion.d.ts

@@ -1,15 +0,0 @@
-declare namespace SGDS.Component {
-    namespace Accordion {
-        interface Item extends React.AllHTMLAttributes<HTMLElement> {
-            id?: string,
-            heading: string | React.ReactNode
-            isOpen?: boolean,
-        }
-    }
-
-    interface Accordion extends React.AllHTMLAttributes<HTMLElement> {
-        headingLevel?: SGDS.HeadingLevel,
-        hideOpenAll?: boolean,
-        isSmall?: boolean
-    }
-}

package/@types/components/AspectBox.d.ts

@@ -1,5 +0,0 @@
-declare namespace SGDS.Component {
-    interface AspectBox extends React.AllHTMLAttributes<HTMLElement> {
-        ratio?: 'square' | '1:1' | '4:3' | '16:9' | '21:9';
-    }
-}

package/@types/components/BackToTop.d.ts

@@ -1,5 +0,0 @@
-declare namespace SGDS.Component {
-    interface BackToTop extends React.AllHTMLAttributes<HTMLElement> {
-        href?: string;
-    }
-}

package/@types/components/Breadcrumbs.d.ts

@@ -1,11 +0,0 @@
-declare namespace SGDS.Component {
-    namespace Breadcrumbs {
-        interface Item extends React.AllHTMLAttributes<HTMLElement> {
-            isHidden?: boolean,
-            linkComponent?: SGDS.LinkComponent
-        }
-    }
-
-    interface Breadcrumbs extends React.AllHTMLAttributes<HTMLElement> {
-    }
-}

package/@types/components/Button.d.ts

@@ -1,17 +0,0 @@
-declare namespace SGDS.Component {
-    type ButtonStyle = 'primary' | 'secondary';
-    type ButtonType = 'submit' | 'reset' | 'button';
-    type ButtonWidth = 'fluid' | 'fixed' | 'max';
-
-    interface Button extends React.AllHTMLAttributes<HTMLButtonElement> {
-        hasLinkStyle?: boolean,
-        href?: string,
-        icon?: IconName,
-        isIconLeft?: boolean
-        isIconOnly?: boolean,
-        isSmall?: boolean,
-        buttonStyle?: ButtonStyle,
-        type?: ButtonType
-        width?: ButtonWidth
-    }
-}

package/@types/components/ButtonGroup.d.ts

@@ -1,5 +0,0 @@
-declare namespace SGDS.Component {
-    interface ButtonGroup extends React.AllHTMLAttributes<HTMLElement> {
-        isInline?: boolean
-    }
-}

package/@types/components/CategoryItem.d.ts

@@ -1,10 +0,0 @@
-declare namespace SGDS.Component {
-    interface CategoryItem extends React.AllHTMLAttributes<HTMLElement> {
-        className?: string,
-        headingLevel?: SGDS.HeadingLevel,
-        href?: string,
-        linkComponent?: SGDS.LinkComponent
-        tagName?: string,
-        title: string,
-    }
-}

package/@types/components/CategoryList.d.ts

@@ -1,7 +0,0 @@
-declare namespace SGDS.Component {
-    interface CategoryList extends React.AllHTMLAttributes<HTMLElement> {
-        className?: string,
-        isGrid?: boolean,
-        isOrdered?: boolean
-    }
-}

package/@types/components/Checkbox.d.ts

@@ -1,11 +0,0 @@
-declare namespace SGDS.Component {
-    namespace Checkbox {
-        interface Group extends React.AllHTMLAttributes<HTMLElement> {
-            isSmall?: boolean
-        }
-    }
-
-    interface Checkbox extends CheckboxRadioBase<HTMLInputElement> {
-        isExclusive?: boolean
-    }
-}

package/@types/components/ConfirmationMessage.d.ts

@@ -1,7 +0,0 @@
-declare namespace SGDS.Component {
-    interface ConfirmationMessage extends React.AllHTMLAttributes<HTMLElement> {
-        ariaLive: React.AriaAttributes['aria-live'],
-        headingLevel: HeadingLevel,
-        title: string
-    }
-}

package/@types/components/ContentsNav.d.ts

@@ -1,13 +0,0 @@
-declare namespace SGDS.Component {
-    namespace ContentsNav {
-        interface ContentsNavItem extends React.AllHTMLAttributes<HTMLElement> {
-            isCurrent?: boolean,
-            linkComponent?: SGDS.LinkComponent;
-        }
-    }
-
-    interface ContentsNav extends React.AllHTMLAttributes<HTMLElement> {
-        ariaLabel: React.AriaAttributes['aria-label'],
-        title: string
-    }
-}

package/@types/components/DatePicker.d.ts

@@ -1,20 +0,0 @@
-declare namespace SGDS.Component {
-    interface DatePicker extends React.AllHTMLAttributes<HTMLElement> {
-        dateSelectCallback?: Function;
-        disabledDates?: string,
-        hasError?: boolean,
-        errorMessage?: string,
-        id: string,
-        hintText?: string,
-        iconPath?: string,
-        label: string,
-        maxDate?: string,
-        minDate?: string,
-        isMultiple?: boolean,
-        name?: string,
-        onBlur?: React.EventHandler<any>,
-        onChange?: React.EventHandler<any>,
-        value?: string,
-        width?: SGDS.InputWidth
-    }
-}

package/@types/components/Details.d.ts

@@ -1,6 +0,0 @@
-declare namespace SGDS.Component {
-    interface Details extends React.AllHTMLAttributes<HTMLDetailsElement> {
-        title?: string,
-        summary: string
-    }
-}

package/@types/components/ErrorMessage.d.ts

@@ -1,5 +0,0 @@
-declare namespace SGDS.Component {
-    interface ErrorMessage extends React.AllHTMLAttributes<HTMLElement> {
-        id?: string
-    }
-}

package/@types/components/ErrorSummary.d.ts

@@ -1,12 +0,0 @@
-declare namespace SGDS.Component {
-    namespace ErrorSummary {
-        interface Item extends React.AllHTMLAttributes<HTMLElement> {
-            fragmentId: string,
-            linkComponent?: SGDS.LinkComponent
-        }
-    }
-
-    interface ErrorSummary extends React.AllHTMLAttributes<HTMLElement> {
-        title: string
-    }
-}

package/@types/components/FileDownload.d.ts

@@ -1,11 +0,0 @@
-declare namespace SGDS.Component {
-    interface FileDownload extends React.AllHTMLAttributes<HTMLElement> {
-        cover?: string,
-        fileSize?: string,
-        fileType?: string,
-        fileUrl: string,
-        icon?: DocumentIconName,
-        isHighlighted?: boolean,
-        title: string
-    }
-}

package/@types/components/HideThisPage.d.ts

@@ -1,5 +0,0 @@
-declare namespace SGDS.Component {
-    interface HideThisPage extends React.AllHTMLAttributes<HTMLElement> {
-        escapeUrl?: string
-    }
-}

package/@types/components/InsetText.d.ts

@@ -1,5 +0,0 @@
-declare namespace SGDS.Component {
-    interface InsetText extends React.AllHTMLAttributes<HTMLElement> {
-
-    }
-}

package/@types/components/Metadata.d.ts

@@ -1,11 +0,0 @@
-declare namespace SGDS.Component {
-    namespace Metadata {
-        interface Item extends React.AllHTMLAttributes<HTMLElement> {
-            name: string
-        }
-    }
-
-    interface Metadata extends React.AllHTMLAttributes<HTMLDListElement> {
-        isInline?: boolean
-    }
-}

package/@types/components/NotificationPanel.d.ts

@@ -1,7 +0,0 @@
-declare namespace SGDS.Component {
-    interface NotificationPanel extends React.AllHTMLAttributes<HTMLDivElement> {
-        ariaLive?: React.AriaAttributes['aria-live'],
-        headingLevel?: HeadingLevel,
-        title: string
-    }
-}

package/@types/components/PageHeader.d.ts

@@ -1,7 +0,0 @@
-declare namespace SGDS.Component {
-    interface PageHeader extends React.AllHTMLAttributes<HTMLHeadingElement> {
-        label?: string,
-        title: string,
-        titleId?: string
-    }
-}

package/@types/components/Pagination.d.ts

@@ -1,22 +0,0 @@
-declare namespace SGDS.Component {
-    namespace Pagination {
-        interface Page extends React.AllHTMLAttributes<HTMLElement> {
-            ariaLabel: React.AriaAttributes['aria-label'],
-            isCurrent?: boolean,
-            href: string,
-            linkComponent?: SGDS.LinkComponent,
-            onClick?: React.EventHandler<any>
-        }
-    }
-
-    interface Pagination extends React.AllHTMLAttributes<HTMLElement> {
-        ariaLabel: React.AriaAttributes['aria-label'],
-        className?: string,
-        linkComponent?: SGDS.LinkComponent,
-        onClick?: React.EventHandler<any>,
-        padding: number,
-        page: number,
-        pattern: string,
-        totalPages: number
-    }
-}

package/@types/components/PhaseBanner.d.ts

@@ -1,5 +0,0 @@
-declare namespace SGDS.Component {
-    interface PhaseBanner extends React.AllHTMLAttributes<HTMLDivElement> {
-        phaseName: string
-    }
-}

package/@types/components/Question.d.ts

@@ -1,11 +0,0 @@
-declare namespace SGDS.Component {
-    type QuestionTags = 'div' | 'fieldset';
-
-    interface Question extends React.AllHTMLAttributes<HTMLElement> {
-        errorMessage?: string,
-        hasError?: boolean,
-        hintText?: string,
-        legend?: string,
-        tagName: QuestionTags
-    }
-}

package/@types/components/RadioButton.d.ts

@@ -1,14 +0,0 @@
-declare namespace SGDS.Component {
-    namespace RadioButton {
-        interface Group extends React.AllHTMLAttributes<HTMLElement> {
-            isInline?: boolean,
-            name?: string,
-            isSmall?: boolean
-        }
-    }
-
-    interface RadioButton extends CheckboxRadioBase<HTMLInputElement> {
-        id: string,
-        name?: string
-    }
-}

package/@types/components/SearchFacets.d.ts

@@ -1,18 +0,0 @@
-declare namespace SGDS.Component {
-    namespace SearchFacets {
-        interface Group extends React.AllHTMLAttributes<HTMLElement> {
-            joinContent?: string,
-            title: string
-        }
-
-        interface Item extends React.AllHTMLAttributes<HTMLElement> {
-            accessibleName?: string
-            joinContent?: string
-            title: string
-        }
-    }
-
-    interface SearchFacets extends React.AllHTMLAttributes<HTMLElement> {
-        headingId?: string
-    }
-}

package/@types/components/SearchFilters.d.ts

@@ -1,14 +0,0 @@
-declare namespace SGDS.Component {
-    namespace SearchFilters {
-        interface Panel extends  React.AllHTMLAttributes<HTMLElement> {
-            activeFilterCount?: number,
-            heading: string | React.ReactNode
-            isScrollable?: boolean,
-            legend: string,
-        }
-    }
-
-    interface SearchFilters extends React.AllHTMLAttributes<HTMLElement> {
-        searchResultsContainerId?: string
-    }
-}