Add report + export

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.changeset/dark-cougars-go.md

@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Add new SearchField component in Canon

packages/canon/report.api.md

@@ -27,6 +27,7 @@ import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import type { RemixiconComponentType } from '@remixicon/react';
 import { ScrollArea as ScrollArea_2 } from '@base-ui-components/react/scroll-area';
+import type { SearchFieldProps as SearchFieldProps_2 } from 'react-aria-components';
 import type { SwitchProps as SwitchProps_2 } from 'react-aria-components';
 import { Table as Table_2 } from '@tanstack/react-table';
 import { Tabs as Tabs_2 } from '@base-ui-components/react/tabs';
@@ -1101,6 +1102,20 @@ export const ScrollArea: {
   >;
 };
 
+// @public (undocumented)
+export const SearchField: ForwardRefExoticComponent<
+  SearchFieldProps & RefAttributes<HTMLDivElement>
+>;
+
+// @public (undocumented)
+export interface SearchFieldProps
+  extends SearchFieldProps_2,
+    Omit<FieldLabelProps, 'htmlFor' | 'id'> {
+  icon?: ReactNode | false;
+  placeholder?: string;
+  size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
+}
+
 // @public (undocumented)
 export const Select: ForwardRefExoticComponent<
   SelectProps & RefAttributes<HTMLDivElement>

packages/canon/src/components/SearchField/SearchField.tsx

@@ -20,8 +20,6 @@ import {
   SearchField as AriaSearchField,
   FieldError,
   Button,
-  Label,
-  Text,
 } from 'react-aria-components';
 import { useResponsiveValue } from '../../hooks/useResponsiveValue';
 import clsx from 'clsx';
@@ -62,16 +60,6 @@ export const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
     const secondaryLabelText =
       secondaryLabel || (isRequired ? 'Required' : null);
 
-    // return (
-    //   <AriaSearchField>
-    //     <Label />
-    //     <Input />
-    //     <Button />
-    //     <Text slot="description" />
-    //     <FieldError />
-    //   </AriaSearchField>
-    // );
-
     return (
       <AriaSearchField
         className={clsx('canon-TextField', 'canon-SearchField', className)}

packages/canon/src/index.ts

@@ -48,6 +48,7 @@ export * from './components/TextField';
 export * from './components/Tooltip';
 export * from './components/Menu';
 export * from './components/ScrollArea';
+export * from './components/SearchField';
 export * from './components/Link';
 export * from './components/Select';
 export * from './components/Switch';