# NoResultsMessage

A component that displays messages based on the state of data fetching and user interaction within lookup views.
**NoResultsMessage** dynamically adjusts its icon and text to indicate loading states, no results found after a search, no search terms entered, or an error during data retrieval.
It also provides a button to toggle the visibility of a filter pane. Generally called within context of `SASQLookupComponent -> TableBody`

## Basic Usage

Below is an example demonstrating how **NoResultsMessage** might be used within a component that manages data fetching, such as `SASQTableBody` or directly within a `MultiColumnList`'s `isEmptyMessage` prop.

```jsx
import { useState } from 'react';
import NoResultsMessage from '@k-int/stripes-kint-components/lib/NoResultsMessage';

const MyDataView = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [filterPaneIsVisible, setFilterPaneIsVisible] = useState(true);
  const [isError, setIsError] = useState(false);
  const [error, setError] = useState(null);

  const toggleFilterPane = () => setFilterPaneIsVisible(prev => !prev);

  // Simulate data fetching
  useState(() => {
    setTimeout(() => {
      setIsLoading(false);
      // setSearchTerm('example'); // Uncomment to simulate a search term
      // setIsError(true); // Uncomment to simulate an error
      // setError({ message: 'Failed to fetch data' });
    }, 2000);
  }, []);

  return (
    <div style={{ padding: '20px', border: '1px solid #ccc', minHeight: '200px' }}>
      <h3>Data Display Area</h3>
      <NoResultsMessage
        isLoading={isLoading}
        searchTerm={searchTerm}
        filterPaneIsVisible={filterPaneIsVisible}
        toggleFilterPane={toggleFilterPane}
        isError={isError}
        error={error}
        // label="Custom No Results Text" // Optional: provide custom label
        // icon="info" // Optional: provide custom icon
        // labelOverrides={{ showFilters: 'Open Filters Panel' }} // Optional: override specific labels
      />
    </div>
  );
};

export default MyDataView;
```

### Explanation

* **isLoading:** Set to `true` when data is being fetched, displaying a loading message and spinner icon.

* **searchTerm:** Indicates whether a search term has been entered by the user. Influences the displayed message for "no results" vs. "no terms entered."

* **filterPaneIsVisible:** Controls the visibility of the "Show Filters" button.

* **toggleFilterPane:** A callback function triggered by the "Show Filters" button, typically to open the filter pane.

* **isError** and **error:** Used to display an error icon and the error message if the data fetching operation fails.

## Props

| **Prop**              | **Type**                 | **Required** | **Description**                                                                                                                                                                                                                |
|-----------------------|--------------------------|--------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `className`           | `string`                 | ✕            | Allows the passing of additional CSS characteristics to the noResultsMessage                                                                                                                                                   | 
| `filters  `           | `string`                 | ✕            | The current filters. Used alongside searchTerm to differentiate between "no results for search" and "no search term entered" messages.                                                                                         |
| `filterPaneIsVisible` | `boolean`                | ✓            | Indicates if the associated filter pane is currently visible. Controls the display of the "Show Filters" button.                                                                                                               |
| `toggleFilterPane`    | `() => void`             | ✓            | Callback function invoked when the "Show Filters" button is clicked. Typically used to toggle the filter pane's visibility.                                                                                                    |
| `error`               | `object`                 | ✕            | An error object (e.g., from `react-query`) containing details of a failed request. Its `message` property will be displayed if `isError` is `true`.                                                                            |
| `icon`                | `string`                 | ✕            | An optional custom icon string (from `@folio/stripes/components/Icon`) to override the default icon based on the message state.                                                                                                |
| `iconPresets`         | `object`                 | ✕            | An optional object containing keys: `noTerms`, `noTermsWhenFilterPane`, `noResults`, `isLoading` and `error`. Each key is optional and allows direcet overriding of one of the states NoResultsMessage is configured to output |
| `intlKey`             | `string`                 | ✕            | A base internationalization key used by the internal `useKintIntl` hook to resolve localized messages.                                                                                                                         |
| `intlNS`              | `string`                 | ✕            | An internationalization namespace used by the internal `useKintIntl` hook.                                                                                                                                                     |
| `isLoading`           | `boolean`                | ✕            | When `true`, indicates that data is currently being loaded, displaying a loading message.                                                                                                                                      |
| `isError`             | `boolean`                | ✕            | When `true`, indicates an error occurred during data fetching, displaying an error message.                                                                                                                                    |
| `label`               | `string`, `node`, `func` | ✕            | An optional custom label to override all default message content.                                                                                                                                                              |
| `labelOverrides`      | `object`                 | ✕            | An object for overriding specific parts of the default labels, such as `{ noResultsLabel: 'No records found' }` or `{ showFilters: 'View Filters' }`.                                                                          |
| `searchTerm`          | `string`                 | ✕            | The current search query string. Used alongside filters to differentiate between "no results for search" and "no search term entered" messages.                                                                                |