@i-dot-ai-npm/component-library-react 0.0.9 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@i-dot-ai-npm/component-library-react",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "React components for i.AI GOV.UK.",
   "type": "module",
   "scripts": {
@@ -28,7 +28,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/i-dot-ai/component-library.git",
+    "url": "git+https://github.com/i-dot-ai/design-kit.git",
     "directory": "packages/react"
   },
   "publishConfig": {

package/src/footer/Footer.tsx

@@ -2,7 +2,7 @@ import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 
 type FooterLink = { href?: string; text?: string; attributes?: Record<string, string> };
 
-type FooterProps = ComponentPropsWithoutRef<'div'> & {
+type FooterProps = ComponentPropsWithoutRef<'footer'> & {
     /** Support links shown in the inline list (e.g. Accessibility statement, Cookies, Privacy). */
     links?: FooterLink[];
     /** Visually-hidden heading above the support links. */
@@ -26,7 +26,7 @@ export default function Footer({
         .join(' ');
 
     return (
-        <div className={classes} {...rest}>
+        <footer className={classes} {...rest}>
             <div className={containerClass}>
                 <div className="govuk-footer__meta">
                     <div className="govuk-footer__meta-item govuk-footer__meta-item--grow">
@@ -58,6 +58,6 @@ export default function Footer({
                     <div className="govuk-footer__meta-item">{children}</div>
                 </div>
             </div>
-        </div>
+        </footer>
     );
 }

package/src/index.ts

@@ -119,6 +119,7 @@ export { default as TableCell } from "./table/TableCell";
 export { default as TableHead } from "./table/TableHead";
 export { default as TableHeader } from "./table/TableHeader";
 export { default as TableRow } from "./table/TableRow";
+export { default as TableSearchAndFilter } from "./table/TableSearchAndFilter";
 export { default as Table } from "./table/Table";
 export { default as TabPanel } from "./tabs/TabPanel";
 export { default as Tab } from "./tabs/Tab";

package/src/modal/Modal.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from "react";
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { initModal, openModal, closeModal } from "@i-dot-ai-npm/component-library-frontend";
 
 type ModalProps = Omit<ComponentPropsWithoutRef<"dialog">, "onClose"> & {
     class?: string;
@@ -27,14 +28,9 @@ export default function Modal({
     useEffect(() => {
         const dialog = ref.current;
         if (!dialog) return;
-        void import("@i-dot-ai-npm/component-library-frontend").then(
-            ({ initModal, openModal, closeModal }) => {
-                if (ref.current !== dialog) return;
-                initModal(dialog);
-                if (open) openModal(dialog);
-                else closeModal(dialog);
-            },
-        );
+        initModal(dialog);
+        if (open) openModal(dialog);
+        else closeModal(dialog);
     }, [open]);
 
     useEffect(() => {

package/src/table/TableSearchAndFilter.tsx

@@ -0,0 +1,18 @@
+/** @jsxImportSource react */
+
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+type TableSearchAndFilterProps = ComponentPropsWithoutRef<'div'> & {
+    class?: string;
+    children?: ReactNode;
+};
+
+export default function TableSearchAndFilter({ class: className, children, ...rest }: TableSearchAndFilterProps) {
+    const classes = ["govuk-table__search-and-filter-wrapper", className ?? ""].filter(Boolean).join(" ");
+
+    return (
+        <div className={classes} {...rest}>
+            {children ?? ""}
+        </div>
+    );
+}