@bigbinary/neeto-filters-frontend 3.0.6 → 3.0.8

package/README.md

@@ -1,233 +1,240 @@
 # neeto-filters-nano
+The `neeto-filters-nano` manages filters across neeto products. The nano exports the `@bigbinary/neeto-filters-frontend` NPM package and `neeto-filters-engine` Rails engine for development.
+
+# Contents
+1. [Development with Host Application](#development-with-host-application)
+    - [Engine](#engine)
+        - [Installation](#installation)
+        - [Usage](#usage)
+    - [Frontend package](#frontend-package)
+        - [Installation](#installation-1)
+        - [Components](#components)
+2. [Instructions for Publishing](#instructions-for-publishing)
+
+# Development with Host Application
+## Engine
+The engine is used to manage filters across neeto products.
 
-1. [Engine and package installation](./docs/engine-and-package-installation.md)
-2. [Building and releasing](./docs/building-and-releasing.md)
+### Installation
+1. Add this line to your application's Gemfile:
+    ```ruby
+    source "NEETO_GEM_SERVER_URL" do
+       # ..existing gems
 
-## @bigbinary/neeto-filters-frontend
+       gem 'neeto-filters-engine'
+    end
+    ```
+2. And then execute:
+    ```zsh
+    bundle install
+    ```
+3. Add this line to your application's `config/routes.rb` file:
+    ```ruby
+    mount NeetoFiltersEngine::Engine, at: "/neeto_filters"
+    ```
+4. Execute the following command to generate the migration to generate the `neeto_filters_engine_segments` table.
+    ```zsh
+    rails g neeto_filters_engine:install
+    ```
+5. Add the following line to `models/organization.rb` file.
+    ```ruby
+    has_many :segments, class_name: "NeetoFiltersEngine::Segment", dependent: :destroy
+    ```
 
-neetoFilters is the library that manages filters across neeto products.
+### Usage
+You can learn more about setup and usage here:
+  1. [Models](/docs/engine/models.md)
+  2. [Verify Installation](/docs/engine/verify_installation.md)
 
+## Frontend package
 ### Installation
+1. Install the latest `neeto-filters-frontend` package using the below command:
+    ```zsh
+    yarn add @bigbinary/neeto-filters-frontend
+    ```
+2. `neeto-filters-frontend` has a few peer dependencies that are required for the proper functioning of the package. Install all the peer dependencies using the below command:
+   ```zsh
+   yarn add @bigbinary/neetoui @bigbinary/neeto-icons axios@0.27.2 classnames@2.3.1 dayjs@1.11.1 formik@2.2.0 ramda@0.28.0 react-router-dom@5.3.0 react-router-nav-prompt@0.4.1 react-toastify@9.0.1 yup@0.32.11
+   ```
+
+### Components
+#### 1. `Filters` ([source code](https://github.com/bigbinary/neeto-filters-nano/blob/472fc52c3358a822bdb7d1a9d6fe7eed6335247a/app/javascript/src/components/Filters.jsx))
+
+**Props**
+- `isOpen`: To specify whether the Pane component is open or not.
+- `setIsOpen`: To trigger the isOpen state.
+- `columns`: The list of columns/fields that needs to be represented in the filters pane.
+- `onChange`: To specify the callback function that is triggered whenever a filter is applied or cleared. This function will get the updated filters as argument.
+- `onSelectorsChange`: To specify the callback function that is triggered
+    whenever a selector value is changed. This function will get the updated
+    selectors as argument.
+- `buttonProps`: To specify the props to be passed to the button component.
+- `paneProps`: To specify the props to be passed to the pane component.
+- `isSearchable`: To specify whether you need a search bar in filters pane to search through filter fields.
+- `className`: To specify classes to the Filters component.
+- `keyword`: To specify the props related to searching.
+- `childrenKeys`: The list of keys which has to be cleared from url during clear filters operation.
+- `children`: To specify the custom components specific to the host application.
+- `size`: To specify the width of the filters pane. It accepts "xsmall" (default), "small", and "large" as value.
+
+**Configuration**
+- Refer to the [Filters](/docs/frontend/filters.md) section for detailed information on the available configurations for the `Filters` component.
+
+**Usage**
+```jsx
+import React, { useMemo, useState } from "react";
+
+import { Bar, Container, SubHeader } from "neetomolecules";
+import { Filters } from "neetoFilters";
+
+const App = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [showMenuBar, setShowMenuBar] = useState(false);
+
+  const { t } = useTranslation();
+
+  return (
+      <Container>
+        <SubHeader
+          rightActionBlock={
+            <Filters
+              {...{ isOpen, setIsOpen }}
+              isSearchable
+              columns={FILTER_COLUMNS}
+              keyword={SEARCH_TERM_PROPS}
+            />
+          }
+        />
+      </Container>
+  );
+};
 
-```bash
-yarn add @bigbinary/neeto-filters-frontend
-```
-
-**neetoFilters** has a few peer dependencies that are required for the proper
-functioning of the package. Install all the peer dependencies using the below
-command:
-
-```bash
-yarn add @bigbinary/neetoui @bigbinary/neeto-icons axios@0.27.2 classnames@2.3.1 dayjs@1.11.1 formik@2.2.0 ramda@0.28.0 react-router-dom@5.3.0 react-router-nav-prompt@0.4.1 react-toastify@9.0.1 yup@0.32.11
+export default App;
 ```
 
-### Usage
-
-neeto-filters-frontend exports 2 components (`Filters` & `Bar`) and 2 functions
-(`buildFiltersFromURL()` & `buildSelectorsFromURL()`).
-
-#### 1. `Filters` component
+#### 2. `Bar` ([source code](https://github.com/bigbinary/neeto-filters-nano/blob/472fc52c3358a822bdb7d1a9d6fe7eed6335247a/app/javascript/src/components/Bar/index.jsx))
 
-#### Props
+**Props**
+- `columns`: The list of columns/fields that needs to be represented in the filters pane.
+- `onChange`: To specify the callback function that is triggered whenever a filter is applied or cleared. This function will get the updated filters as argument.
+- `setIsPaneOpen`: To trigger the isOpen state.
+- `className`: To specify classes to the Bar component.
+- `keyword`: To specify the props related to searching.
+- `onSelectorsChange`: To specify the callback function that is triggered whenever a selector value is changed. This function will get the updated selectors as argument.
+- `childrenKeys`: The list of keys which has to be cleared from url during clear filters operation.
+- `entity`: The entity associated with the filters.
+- `defaultSegmentName`: The name of segment which results all entities without applying any filter. Default name is "All results".
 
-1.  **isOpen**: To specify whether the Pane component is open or not.
-2.  **setIsOpen**: To trigger the isOpen state.
-3.  **columns**: The list of columns/fields that needs to be represented in the
-    filters pane.
-4.  **onChange**: To specify the callback function that is triggered whenever a
-    filter is applied or cleared. This function will get the updated filters as
-    argument.
-5.  **onSelectorsChange**: To specify the callback function that is triggered
-    whenever a selector value is changed. This function will get the updated
-    selectors as argument.
-6.  **buttonProps**: To specify the props to be passed to the button component.
-7.  **paneProps**: To specify the props to be passed to the pane component.
-8.  **isSearchable**: To specify whether you need a search bar in filters pane
-    to search through filter fields.
-9.  **className**: To specify classes to the Filters component.
-10. **keyword**: To specify the props related to searching.
-11. **childrenKeys** The list of keys which has to be cleared from url during
-    clear filters operation.
-12. **children**: To specify the custom components specific to the host
-    application.
-13. **size**: To specify the width of the filters pane. It accepts "xsmall"
-    (default), "small", and "large" as value.
-
-Here is an example of `keyword` prop:
+All these props must be same as that passed to the `Filters` component. The
+option to save filters as segments will be enabled only when the entity prop is
+passed to the component.
 
-```js
-const [searchTerm, setSearchTerm] = useState("");
-const searchTermProps = {
-  key: "search_term",
-  node: "name",
+**Usage**
+```jsx
+import React, { useMemo, useState } from "react";
+
+import Bar from "neetomolecules/SubHeader";
+import Container from "neetomolecules/Container";
+
+import { Segments, buildFilterColumns } from "neetoFilters";
+import useUsers from "hooks/useUsers";
+
+const App = () => {
+  const { usersData } = useUsers();
+  const [isOpen, setIsOpen] = useState(false);
+  const [fields, setFields] = useState([]);
+
+  const { t } = useTranslation();
+  const filterColumns = useMemo(
+    () =>
+      buildFilterColumns({
+        names: usersData.names,
+        emails: usersData.emails,
+        fields,
+      }),
+    [usersData.users, fields]
+  );
+
+  return (
+      <Container>
+        <SubHeader
+          leftActionBlock={
+            <Bar
+              columns={filterColumns}
+              entity="User"
+              setIsPaneOpen={setIsOpen}
+            />
+          }
+        />
+      </Container>
+  );
 };
-```
 
-This `searchTermProps` can be passed as the value to `keyword` prop.
-
-> :memo: **Note:** If you wish to conduct a search for the keyword among
-> multiple columns spanning different tables in the DB, then you should pass the
-> name of the models corresponding to the tables as value of `models` prop.
->
-> Example:
->
-> If you are querying the user records and searching the keyword among users'
-> name and users' organization name, then node will be like:
->
-> `node = "first_name,last_name,organization.name"`
->
-> And the model should be:
->
-> `model = "User,Organization"`
-
-Here is an example for the `columns` prop:
-
-```js
-export  const  SAMPLE_FILTER_FIELDS = [
-	{
-		key:  "name",
-		node:  "first_name,last_name",
-		label:  "Name",
-    suffixComponent: () => <Component />
-		type:  "text",
-    preprocessor: (value) => value.trim(),
-	},
-	{
-		key:  "email",
-		node:  "email",
-		label:  "Email",
-		type:  "multi_option",
-		values: [map(toLabelAndValue,["oliver@example.com", "eve@example.com"])],
-	},
-	{
-		key:  "createdAt",
-		node:  "created_at",
-		label:  "Created at",
-		type:  "date",
-	},
-];
+export default App;
 ```
 
-- `key` : A unique identifier provided to each columns/field.
-- `group`: The label of the group, if the field is associated with a group.
-- `node`: The column in DB table corresponding to the field.
-- `label` The label to be shown just above the field in Pane.
-- `suffixComponent` The component to be shown at the end of the respective Block
-  in filters Bar.
-- `preprocessor` The function to be used to preprocess the value before applying
-  the filter.
-- `type`: The nature/type of the field needed in pane.
-  - The supported types are `text`, `number`, `decimal`, `date`, `single_date`,
-    `time`, `single_time`, `single_option`, `multi_option` and `boolean`
-- `model`: If the node provided is **not** directly refering to the column
-  within the table being queried for the filtered results, then we need to
-  provide the **model** corresponding to the target table. - For example: We are
-  adding a filter field for querying on `users` table to list all users with
-  address containing the a certain word. Say the addresses are stored in
-  **another table `addresses`**. Then the node will be `address.line_1,line_2`.
-  In such cases we need to pass this extra prop like `model: "Address"`.
-  - Then whole object for the field might look like this
-    ```js
-    {
-      key: "address",
-      label: "Address",
-      node: "address.line_1,line_2",
-      model: "Address",
-      type: "text"
-    }
-    ```
-- `values`: The list of label-value pair to be shown in dropdown, if the `type`
-  provided is `single_option` or `multi_option`.
-- `showRuleSelector` : Boolean value, which determines whether to show a rule
-  selector above the `text` , `number` and `decimal` type fields. `false` by
-  default.
-- `hidden`: Boolean value, which determines to show or hide field from filter
-  pane. `false ` by default.
-- `defaultValue`: The default value that should appear as chosen one in the
-  filter fields.
-- `defaultType`: The type of the input that should be used in the Filters pane.
-- `isClearable`: Boolean value which specifies whether the field can be cleared
-  or not.
 
-- By `selectors` we mean the filter fields which doesn't have any relation
-  (`node`) to a DB >table column.
-- For example, consider a field in filter pane called `Group by`. We cannot
-  provide a `node` to associate it with a column in DB table. Still it can
-  provide an important value which can be used for the computation as if by
-  telling a means by which the records can be grouped after filtering.
-- Fields without a `node`, among the ones passed as value to the `column` prop
-  of `Filters` are >considered as selectors.
+#### 3. `Segments` ([source code](https://github.com/bigbinary/neeto-filters-nano/blob/472fc52c3358a822bdb7d1a9d6fe7eed6335247a/app/javascript/src/components/Segments/index.jsx))
 
-```js
-{
-  key:  "groupBy",
-  label:  "Group by",
-  type:  "single_option",
-  values: [
-    {
-      label: "Team",
-      value: "team"
-    },
-    {
-      label: "Location",
-      value: "location"
-    }
-  ],
-	}
-```
+**Props**
 
-When user selects a value from this dropdown we get that value in the
-`selectors` state. This can be used for further computations outside the
-neeto-filters.
+- `columns`: The list of columns/fields that needs to be represented in the filters pane.
+- `entity`: The entity associated with the segments.
+- `setIsPaneOpen`: To trigger the isOpen state of the filters pane.
+- `defaultSegmentName`: The name of segment which results all entities without applying any filter. Default name is "All results".
 
-#### 2. `Bar` component
+The "columns" prop must be same as that passed to the `Filters` component.
 
-#### Props
+**Usage**
+```jsx
+import React, { useMemo, useState } from "react";
 
-1.  **columns**: The list of columns/fields that needs to be represented in the
-    filters pane.
-2.  **onChange**: To specify the callback function that is triggered whenever a
-    filter is applied or cleared. This function will get the updated filters as
-    argument.
-3.  **setIsPaneOpen**: To trigger the isOpen state.
-4.  **className**: To specify classes to the Bar component.
-5.  **keyword**: To specify the props related to searching.
-6.  **onSelectorsChange**: To specify the callback function that is triggered
-    whenever a selector value is changed. This function will get the updated
-    selectors as argument.
-7.  **childrenKeys** The list of keys which has to be cleared from url during
-    clear filters operation.
-8.  **entity**: The entity associated with the filters.
-9.  **defaultSegmentName**: The name of segment which results all entities
-    without applying any filter. Default name is "All results".
+import MenuBar from "neetomolecules/MenuBar";
+import SubHeader from "neetomolecules/SubHeader";
 
-All these props must be same as that passed to the `Filters` component. The
-option to save filters as segments will be enabled only when the entity prop is
-passed to the component.
+import { Segments, buildFilterColumns } from "neetoFilters";
+import useUsers from "hooks/useUsers";
 
-#### 3. `Segments` component
+const App = () => {
+  const { usersData } = useUsers();
+  const [isOpen, setIsOpen] = useState(false);
+  const [showMenuBar, setShowMenuBar] = useState(false);
+  const [fields, setFields] = useState([]);
 
-#### Props
+  const filterColumns = useMemo(
+    () =>
+      buildFilterColumns({
+        names: usersData.names,
+        emails: usersData.emails,
+        fields,
+      }),
+    [usersData.users, fields]
+  );
 
-1.  **columns**: The list of columns/fields that needs to be represented in the
-    filters pane.
-2.  **entity**: The entity associated with the segments.
-3.  **setIsPaneOpen**: To trigger the isOpen state of the filters pane.
-4.  **defaultSegmentName**: The name of segment which results all entities
-    without applying any filter. Default name is "All results".
+  return (
+      <MenuBar showMenu={showMenuBar}>
+        <Segments
+          columns={filterColumns}
+          entity="User"
+          setIsFilterPaneOpen={setIsOpen}
+        />
+      </MenuBar>
 
-The "columns" prop must be same as that passed to the `Filters` component. To
-set up the neeto-filters-engine with support for Segments, please follow the
-instructions provided in the installation
-[documentation](https://github.com/bigbinary/neeto-filters-engine#installation).
+  );
+};
+
+export default App;
+```
 
-#### 3. `buildFiltersFromURL` function
+### Funtions
+#### 1. `buildFiltersFromURL` ([source code](https://github.com/bigbinary/neeto-filters-nano/blob/472fc52c3358a822bdb7d1a9d6fe7eed6335247a/app/javascript/src/components/utils.js#L403-#L406))
 
 - This function takes a list as argument.
 - This list should contains all the filter columns/fields and the value passed
   to `keyword` prop of `Filters` and `Bar`.
 - It builds the filter payload from the URL search params. This function should
   be called for initializing the `filters` state.
+- Usage in [neetoTrail](https://github.com/bigbinary/neeto-trail-web/blob/91b58802bbb5f9520d2d2f9a621b6a31358d49aa/app/javascript/src/hooks/common/useFilter.js#L22).
 
 ```js
 const [filters, setFilters] = useState(() =>
@@ -235,7 +242,7 @@ const [filters, setFilters] = useState(() =>
 );
 ```
 
-#### 4. `buildSelectorsFromURL` function
+#### 2. `buildSelectorsFromURL` ([source code](https://github.com/bigbinary/neeto-filters-nano/blob/472fc52c3358a822bdb7d1a9d6fe7eed6335247a/app/javascript/src/components/utils.js#L408-L423))
 
 - By `selectors` we mean the filter fields which doesn't have any relation
   (`node`) to a DB table column.
@@ -251,6 +258,7 @@ const [filters, setFilters] = useState(() =>
   should be called for initializing the `selectors` state.
 - `selectors` will be an object with keys same as provided in filter fields and
   selected value as its value.
+- Usage in [neetoMonitor](https://github.com/bigbinary/neeto-monitor-web/blob/f892ccdb9c72db8ae4b9bba5fee135c45968a750/app/javascript/src/hooks/common/useFilter.js#L27-L29).
 
 ```js
 const [selectors, setSelectors] = useState(() =>
@@ -258,7 +266,7 @@ const [selectors, setSelectors] = useState(() =>
 );
 ```
 
-#### 5. `buildFilterColumnsFromFields` function
+#### 3. `buildFilterColumnsFromFields` ([source code](https://github.com/bigbinary/neeto-filters-nano/blob/472fc52c3358a822bdb7d1a9d6fe7eed6335247a/app/javascript/src/components/utils.js#L550-#L579))
 
 The `buildFilterColumnsFromFields` function is used to generate an array of
 filter columns based on the provided fields (often referred as custom fields)
@@ -273,6 +281,7 @@ and selected field names.
   to show the rule selector for each filter or not. It is `false` by default.
 - `groupName` (string, optional): A name to be given to the group of filters
   built from fields.
+- Usage in [neetoTestify](https://github.com/bigbinary/neeto-testify-web/blob/1de65b93c9455a88511c5c261b474bd23d9af8e2/app/javascript/src/utils/index.js#L131).
 
 ```js
 const fields = [
@@ -292,83 +301,12 @@ const fields = [
 const selectedFields = ["name", "age"];
 
 const filterColumns = buildFilterColumnsFromFields({ fields, selectedFields });
-```
-
-## neeto-filters-engine
-
-neeto_filters is a Ruby gem that manages filters across neeto products. It
-allows the users to filter entities with respect to its columns, associated
-columns, or custom attributes. It is best used along with the
-[neeto-filters-frontend](https://github.com/bigbinary/neeto-filters-frontend)
-npm package.
-
-### Installation
-
-1. Add the following line to your application's Gemfile:
-
-```zsh
-gem "neeto-filters-engine", git: "https://github.com/bigbinary/neeto-filters-engine", branch: "stable"
-```
-
-2. Execute the following command:
-
-```zsh
-bundle install
-```
-
-3. Add the following line to `config/routes.rb` file to mount the engine at
-   `/neeto_filters` route.
-
-```ruby
-mount NeetoFiltersEngine::Engine, at: "/neeto_filters"
-```
-
-4. Add the following line to `models/organization.rb` file.
 
-```ruby
-has_many :segments, class_name: "NeetoFiltersEngine::Segment", dependent: :destroy
 ```
+## Basic Usage
 
-5. Execute the following command to generate the migration to generate the
-   `neeto_filters_engine_segments` table. This table stores all the saved
-   segments.
-
-```zsh
-rails g neeto_filters_engine:install
-```
-
-#### Verify that the installation is successful.
-
-- Assume that there is a `users` table with the `User` model associated with it.
-  It a `email` column of type `string` or `text`.
-- Open Rails console and add the following lines:
-
-```ruby
-filters = [
-  {
-    "conditions": [
-      {
-        "node": "email",
-        "label": "Email Address",
-        "type": "text",
-        "rule": "contains",
-        "value": "example",
-        "conditions_join_type": "AND"
-      },
-    ],
-    "group_join_type": "OR"
-  },
-]
-
-User.all.apply_neeto_filters(filters)
-```
-
-- If the above lines returns zero or more users, the installation is successful.
-
-### Usage
-
-Here is an example of how to use the `neeto-filters-engine` gem assuming that
-the `users` table has been created.
+Here is an example of how to use the `neeto-filters-engine` gem assuming that the
+`users` table has been created.
 
 ```rb
 class HomeController < ApplicationController
@@ -387,9 +325,7 @@ class HomeController < ApplicationController
 end
 ```
 
-Note: If you wish to use `select()` method after calling
-`apply_neeto_filters()`, please note to use `reselect()` since neeto-filters
-itself performs a 'select' operation internally.
+Note: If you wish to use `select()` method after calling `apply_neeto_filters()`, please note to use `reselect()` since neeto-filters itself performs a 'select' operation internally.
 
 Here, the param `filters` is a hash with the following structure, where each
 `node` corresponds to a column in the `users` table.
@@ -437,9 +373,9 @@ The gem filters the users based on the conditions in the `filters` param. In
 this case, all the users whose email address contains `bigbinary` in the
 `Asia/Kolkata` timezone or whose age is greater than 18 will be filtered.
 
-### How It Works
+## How It Works
 
-#### Base Types
+### Base Types
 
 - Base Types refers to the columns that are directly present in the table on
   which the `apply_neeto_filters` method is called.
@@ -447,34 +383,34 @@ this case, all the users whose email address contains `bigbinary` in the
 
   https://vimeo.com/724478910/e349e361bd
 
-#### Custom Types
+### Custom Types
 
 - Some projects will have custom attributes to the tables that will be added or
-  updated dynamically. `NeetoFiltersEngine` can handle these attributes by
-  passing the proper filters to the `apply_neeto_filters` method.
+  updated dynamically. `NeetoFiltersEngine` can handle these attributes by passing the
+  proper filters to the `apply_neeto_filters` method.
 - The implementation of custom attributes is different for different projects.
   `NeetoFiltersEngine` is built in the same way as `neetoCRM`. If the custom
   attributes feature needs to be added to a project where the custom attributes
   implementation is different, you need to override the
-  `NeetoFiltersEngine::Custom::BaseSearchService` class specifiying the proper
-  join operations.
+  `NeetoFiltersEngine::Custom::BaseSearchService` class specifiying the proper join
+  operations.
 - Refer to the below video for an overview of the same.
 
   https://vimeo.com/724489868/94dfc6cd43
 
-#### Associated Types
+### Associated Types
 
 - Associated types refer to the the columns that are not directly present in the
   table on which the `apply_neeto_filters` method is applied. Instead these will
   be present in another table to which the first table has a foreign key to. For
   instance, the `deals` table can have an association with the `companies` table
-  and the company name can be displayed in the UI. `NeetoFiltersEngine` can be
-  used to filter these columns by properly specifying the filters.
+  and the company name can be displayed in the UI. `NeetoFiltersEngine` can be used to
+  filter these columns by properly specifying the filters.
 - Refer to te below video for an overview of the same.
 
   https://vimeo.com/724484259/f305257f37
 
-#### Adding a new type
+### Adding a new type
 
 - `NeetoFiltersEngine` provides the following types: `text`, `number`,
   `single_option`, `multi_option`, `date`, `time`, `datetime`, `date_range`, and
@@ -489,17 +425,13 @@ this case, all the users whose email address contains `bigbinary` in the
 
   https://vimeo.com/724499299/09e2231780
 
-#### Working with Dates
+### Working with Dates
 
 - Working with dates is tricky due to the involvement of timezones.
 - Refer to the below video for a quick overview of the same.
 
   https://vimeo.com/724495909/034668f738
 
-## Integrations
 
-| Project        | Routes                                        |
-| -------------- | --------------------------------------------- |
-| neeto-chat-web | /admin/contacts                               |
-| neeto-crm-web  | /deals, /contacts, /companies, /tasks, /mails |
-| neeto-cal-web  | /meetings, /scheduled-meetings                |
+# Instructions for Publishing
+Consult the [building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) guide for details on how to publish.

package/dist/index.cjs.js

@@ -3294,7 +3294,7 @@ var Pane = function Pane(_ref) {
   }, isSearchable && /*#__PURE__*/React__default["default"].createElement(Search__default["default"], {
     "data-cy": "neeto-filters-column-search",
     placeholder: t("neetoFilters.messages.searchResources", {
-      resources: t("neetoFilters.common.filters").toLocaleLowerCase()
+      resources: t("neetoFilters.common.filters")
     }),
     onSearch: function onSearch(value) {
       return setSearchTerm(value);
@@ -3326,6 +3326,7 @@ var Pane = function Pane(_ref) {
       return /*#__PURE__*/React__default["default"].createElement(Item, {
         column: column,
         filters: filters,
+        onClose: onClose,
         autoFocus: column.key === isOpen,
         key: column.key,
         onChange: handleChange
@@ -3334,7 +3335,7 @@ var Pane = function Pane(_ref) {
   })), ramda.isEmpty(ungroupedColumns) && ramda.isEmpty(groupedColumns) && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "body2"
   }, t("neetoFilters.messages.noResourcesFound", {
-    resources: t("neetoFilters.common.columns").toLocaleLowerCase()
+    resources: t("neetoFilters.common.columns")
   })), children), /*#__PURE__*/React__default["default"].createElement(Slider.Footer, {
     className: "neeto-filters-pane-filter__footer"
   }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {