@utrecht/component-library-react 1.0.0-alpha.337 → 1.0.0-alpha.338

package/dist/SearchBar.d.ts

@@ -0,0 +1,92 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2023 Robbert Broersma
+ */
+import { DownshiftProps } from 'downshift';
+import React from 'react';
+type InputTypes = {
+    name?: string;
+    placeholder?: string;
+    ariaLabel?: string;
+};
+type ButtonTypes = {
+    label: string;
+};
+export interface SearchBarProps extends DownshiftProps<any> {
+    /**
+     * @property
+     * `input`:
+     * input={{
+     * label: string
+     * }}
+     *
+     * */
+    input?: InputTypes;
+    /**
+     * @property
+     * `itemToString`:
+     *
+     * ```ts
+     * function(item: any) | defaults to: item => (item ? String(item) : '')
+     * ```
+     * @description
+     * This function responsible for displaying the list item text
+     * Example: if your data is an object {name: Python, year: 1990 },
+     * you can use just the name as the list item text or you can use them together
+     *
+     * @example
+     * - Return just the name
+     * ```ts
+     * const itemToString = (item: any) => {
+     * return item ? item.name : '';
+     * };
+     * ```
+     * - Return the name, and the year
+     * ```ts
+     * const itemToString = (item: any) => {
+     * return i ? `${i.name} ${i.year}` : '';
+     * };
+     * ```
+     *
+     * */
+    itemToString: (_item?: any) => string;
+    /**
+     * @property
+     * `items`:
+     *
+     * ```ts
+     * items: [
+     *   {
+     *     title: string,
+     *     list: []
+     *   }
+     *  ]
+     * ```
+     * */
+    items?: any[];
+    /**
+     * @property
+     * `button`:
+     * button={{
+     * label: string
+     * }}
+     *
+     * */
+    button: ButtonTypes;
+}
+interface SearchBarDropdownProps {
+    children: React.ReactNode;
+}
+export declare const SearchBarDropdown: React.FC<SearchBarDropdownProps>;
+interface SearchBarSectionProps {
+    children: React.ReactNode;
+    title?: string;
+}
+export declare const SearchBarSection: React.FC<SearchBarSectionProps>;
+/**
+ * SearchBar
+ *  This component extends the [Downshift](https://www.npmjs.com/package/downshift#onstatechange) Component
+ *  Thant means you can use `Downshift` props
+ */
+export declare const SearchBar: React.FC<SearchBarProps>;
+export {};

package/dist/css-module/SearchBar.d.ts

@@ -0,0 +1,92 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2023 Robbert Broersma
+ */
+import { DownshiftProps } from 'downshift';
+import React from 'react';
+type InputTypes = {
+    name?: string;
+    placeholder?: string;
+    ariaLabel?: string;
+};
+type ButtonTypes = {
+    label: string;
+};
+export interface SearchBarProps extends DownshiftProps<any> {
+    /**
+     * @property
+     * `input`:
+     * input={{
+     * label: string
+     * }}
+     *
+     * */
+    input?: InputTypes;
+    /**
+     * @property
+     * `itemToString`:
+     *
+     * ```ts
+     * function(item: any) | defaults to: item => (item ? String(item) : '')
+     * ```
+     * @description
+     * This function responsible for displaying the list item text
+     * Example: if your data is an object {name: Python, year: 1990 },
+     * you can use just the name as the list item text or you can use them together
+     *
+     * @example
+     * - Return just the name
+     * ```ts
+     * const itemToString = (item: any) => {
+     * return item ? item.name : '';
+     * };
+     * ```
+     * - Return the name, and the year
+     * ```ts
+     * const itemToString = (item: any) => {
+     * return i ? `${i.name} ${i.year}` : '';
+     * };
+     * ```
+     *
+     * */
+    itemToString: (_item?: any) => string;
+    /**
+     * @property
+     * `items`:
+     *
+     * ```ts
+     * items: [
+     *   {
+     *     title: string,
+     *     list: []
+     *   }
+     *  ]
+     * ```
+     * */
+    items?: any[];
+    /**
+     * @property
+     * `button`:
+     * button={{
+     * label: string
+     * }}
+     *
+     * */
+    button: ButtonTypes;
+}
+interface SearchBarDropdownProps {
+    children: React.ReactNode;
+}
+export declare const SearchBarDropdown: React.FC<SearchBarDropdownProps>;
+interface SearchBarSectionProps {
+    children: React.ReactNode;
+    title?: string;
+}
+export declare const SearchBarSection: React.FC<SearchBarSectionProps>;
+/**
+ * SearchBar
+ *  This component extends the [Downshift](https://www.npmjs.com/package/downshift#onstatechange) Component
+ *  Thant means you can use `Downshift` props
+ */
+export declare const SearchBar: React.FC<SearchBarProps>;
+export {};

package/dist/css-module/css-module/SearchBar.d.ts

@@ -0,0 +1,2 @@
+import '../../../../components/search-bar/css/index.scss';
+export * from '../SearchBar';

package/dist/css-module/css-module/index.d.ts

@@ -57,6 +57,7 @@ export { PageHeader } from './PageHeader';
 export { Paragraph } from './Paragraph';
 export { PreHeading } from './PreHeading';
 export { RadioButton } from './RadioButton';
+export { SearchBar } from './SearchBar';
 export { Select, SelectOption } from './Select';
 export { Separator } from './Separator';
 export { SkipLink } from './SkipLink';

package/dist/css-module/index.d.ts

@@ -57,6 +57,7 @@ export { PageHeader } from './PageHeader';
 export { Paragraph } from './Paragraph';
 export { PreHeading } from './PreHeading';
 export { RadioButton } from './RadioButton';
+export { SearchBar } from './SearchBar';
 export { Select, SelectOption } from './Select';
 export { Separator } from './Separator';
 export { SkipLink } from './SkipLink';