@epam/uui 5.5.1 → 5.5.2

package/components/filters/__tests__/__snapshots__/filtersPanel.test.tsx.snap

@@ -0,0 +1,295 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FiltersPanel snapshot should be rendered correctly 1`] = `
+Array [
+  <div
+    className=""
+    style={
+      Object {
+        "alignSelf": undefined,
+        "flexBasis": "auto",
+        "flexGrow": undefined,
+        "flexShrink": undefined,
+        "minWidth": 0,
+        "textAlign": undefined,
+      }
+    }
+  >
+    <div
+      className="uui-flex-row uui-filters-panel-item-toggler root uui-input-box -clickable size-36 container -clickable align-items-center"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="button"
+      style={
+        Object {
+          "columnGap": undefined,
+          "maxWidth": "300px",
+          "rowGap": undefined,
+        }
+      }
+      tabIndex={0}
+    >
+      <div
+        className="uui-flex-row titleWrapper container align-items-center"
+        style={
+          Object {
+            "columnGap": undefined,
+            "rowGap": undefined,
+          }
+        }
+      >
+        <div
+          className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 title container"
+        >
+          Status:
+        </div>
+        <div
+          className="textWrapper"
+        >
+          <div
+            className="root uui-text uui-color-brand uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 selection container"
+          >
+            Unknown
+          </div>
+        </div>
+      </div>
+      <div
+        className="container uui-icon uui-enabled uui-icon-dropdown"
+        style={Object {}}
+      >
+        <svg
+          className=""
+        />
+      </div>
+    </div>
+  </div>,
+  <div
+    className=""
+    style={
+      Object {
+        "alignSelf": undefined,
+        "flexBasis": "auto",
+        "flexGrow": undefined,
+        "flexShrink": undefined,
+        "minWidth": 0,
+        "textAlign": undefined,
+      }
+    }
+  >
+    <div
+      className="uui-flex-row uui-filters-panel-item-toggler root uui-input-box -clickable size-36 container -clickable align-items-center"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="button"
+      style={
+        Object {
+          "columnGap": undefined,
+          "maxWidth": "400px",
+          "rowGap": undefined,
+        }
+      }
+      tabIndex={0}
+    >
+      <div
+        className="uui-flex-row titleWrapper container align-items-center"
+        style={
+          Object {
+            "columnGap": undefined,
+            "rowGap": undefined,
+          }
+        }
+      >
+        <div
+          className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 title container"
+        >
+          Position
+        </div>
+      </div>
+      <div
+        className="container uui-icon uui-enabled uui-icon-dropdown"
+        style={Object {}}
+      >
+        <svg
+          className=""
+        />
+      </div>
+    </div>
+  </div>,
+  <div
+    className=""
+    style={
+      Object {
+        "alignSelf": undefined,
+        "flexBasis": "auto",
+        "flexGrow": undefined,
+        "flexShrink": undefined,
+        "minWidth": 0,
+        "textAlign": undefined,
+      }
+    }
+  >
+    <div
+      className="uui-flex-row uui-filters-panel-item-toggler root uui-input-box -clickable size-36 container -clickable align-items-center"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="button"
+      style={
+        Object {
+          "columnGap": undefined,
+          "maxWidth": "300px",
+          "rowGap": undefined,
+        }
+      }
+      tabIndex={0}
+    >
+      <div
+        className="uui-flex-row titleWrapper container align-items-center"
+        style={
+          Object {
+            "columnGap": undefined,
+            "rowGap": undefined,
+          }
+        }
+      >
+        <div
+          className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 title container"
+        >
+          Age
+        </div>
+      </div>
+      <div
+        className="container uui-icon uui-enabled uui-icon-dropdown"
+        style={Object {}}
+      >
+        <svg
+          className=""
+        />
+      </div>
+    </div>
+  </div>,
+  <div
+    className=""
+    style={
+      Object {
+        "alignSelf": undefined,
+        "flexBasis": "auto",
+        "flexGrow": undefined,
+        "flexShrink": undefined,
+        "minWidth": 0,
+        "textAlign": undefined,
+      }
+    }
+  >
+    <div
+      className="uui-flex-row uui-filters-panel-item-toggler root uui-input-box -clickable size-36 container -clickable align-items-center"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="button"
+      style={
+        Object {
+          "columnGap": undefined,
+          "maxWidth": "auto",
+          "rowGap": undefined,
+        }
+      }
+      tabIndex={0}
+    >
+      <div
+        className="uui-flex-row titleWrapper container align-items-center"
+        style={
+          Object {
+            "columnGap": undefined,
+            "rowGap": undefined,
+          }
+        }
+      >
+        <div
+          className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 title container"
+        >
+          Hire Date
+        </div>
+      </div>
+      <div
+        className="container uui-icon uui-enabled uui-icon-dropdown"
+        style={Object {}}
+      >
+        <svg
+          className=""
+        />
+      </div>
+    </div>
+  </div>,
+  <div
+    className=""
+    style={
+      Object {
+        "alignSelf": undefined,
+        "flexBasis": "auto",
+        "flexGrow": undefined,
+        "flexShrink": undefined,
+        "minWidth": 0,
+        "textAlign": undefined,
+      }
+    }
+  >
+    <div
+      className="uui-flex-row uui-filters-panel-item-toggler root uui-input-box -clickable size-36 container -clickable align-items-center"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="button"
+      style={
+        Object {
+          "columnGap": undefined,
+          "maxWidth": "auto",
+          "rowGap": undefined,
+        }
+      }
+      tabIndex={0}
+    >
+      <div
+        className="uui-flex-row titleWrapper container align-items-center"
+        style={
+          Object {
+            "columnGap": undefined,
+            "rowGap": undefined,
+          }
+        }
+      >
+        <div
+          className="root uui-text uui-color-primary uui-font-weight-400 uui-font-style-normal uui-typography line-height-18 font-size-14 v-padding-9 title container"
+        >
+          Exit Date
+        </div>
+      </div>
+      <div
+        className="container uui-icon uui-enabled uui-icon-dropdown"
+        style={Object {}}
+      >
+        <svg
+          className=""
+        />
+      </div>
+    </div>
+  </div>,
+  <button
+    className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-ghost uui-color-primary uui-size-36 uui-filters-panel-add-button"
+    onClick={[Function]}
+    tabIndex={0}
+    type="button"
+  >
+    <div
+      className="container uui-icon uui-enabled"
+      style={Object {}}
+    >
+      <svg
+        className=""
+      />
+    </div>
+    <div
+      className="uui-caption"
+    >
+      Add filter
+    </div>
+  </button>,
+]
+`;

package/components/filters/__tests__/filtersPanel.test.tsx

@@ -0,0 +1,375 @@
+import { FiltersPanel, FiltersPanelProps } from '../FiltersPanel';
+import { ArrayDataSource, TableFiltersConfig } from '@epam/uui-core';
+import { defaultPredicates } from '../defaultPredicates';
+import {
+    setupComponentForTest, screen, within, userEvent, renderSnapshotWithContextAsync,
+} from '@epam/uui-test-utils';
+import React from 'react';
+import dayjs from 'dayjs';
+
+const now = dayjs();
+const TODAY_DAY_OF_MONTH = now.date().toString();
+const TODAY_DATE_ISO = now.format('YYYY-MM-DD');
+const TODAY_DATE_FORMATTED = now.format('MMM DD, YYYY');
+
+type TestItemType = {
+    name: string;
+    status: number;
+    position: number;
+    age: number;
+    hireDate: number;
+    exitDate: number;
+};
+
+const filtersConfigWithoutPredicatesAll: TableFiltersConfig<TestItemType>[] = [
+    {
+        field: 'status',
+        columnKey: 'status',
+        title: 'Status',
+        type: 'singlePicker',
+        dataSource: new ArrayDataSource({
+            items: [
+                { id: 1, name: 'Green' }, { id: 2, name: 'Red' }, { id: 3, name: 'White' },
+            ],
+        }),
+        maxCount: 3,
+    }, {
+        field: 'position',
+        columnKey: 'position',
+        title: 'Position',
+        type: 'multiPicker',
+        dataSource: new ArrayDataSource({
+            items: [
+                { id: 1, name: 'Designer' }, { id: 2, name: 'QA' }, { id: 3, name: 'Dev' },
+            ],
+        }),
+        togglerWidth: 400,
+    }, {
+        field: 'age',
+        columnKey: 'age',
+        title: 'Age',
+        type: 'numeric',
+    }, {
+        field: 'hireDate',
+        columnKey: 'hireDate',
+        title: 'Hire Date',
+        type: 'rangeDatePicker',
+    }, {
+        field: 'exitDate',
+        columnKey: 'exitDate',
+        title: 'Exit Date',
+        type: 'datePicker',
+    },
+];
+
+const filtersConfigWithPredicatesAll: TableFiltersConfig<TestItemType>[] = [
+    {
+        field: 'position',
+        columnKey: 'position',
+        title: 'Position',
+        type: 'multiPicker',
+        predicates: defaultPredicates.multiPicker,
+        dataSource: new ArrayDataSource({
+            items: [
+                { id: 1, name: 'Designer' }, { id: 2, name: 'QA' }, { id: 3, name: 'Dev' },
+            ],
+        }),
+    }, {
+        field: 'age',
+        columnKey: 'age',
+        title: 'Age',
+        type: 'numeric',
+        predicates: defaultPredicates.numeric,
+    }, {
+        field: 'hireDate',
+        columnKey: 'hireDate',
+        title: 'Hire Date',
+        type: 'rangeDatePicker',
+        predicates: defaultPredicates.rangeDatePicker,
+    },
+];
+
+async function setupFilterPanelComponent({ filtersConfig }: { filtersConfig: TableFiltersConfig<TestItemType>[] }) {
+    const { result, mocks } = await setupComponentForTest<FiltersPanelProps<TestItemType>>(
+        (contextRef) => {
+            return {
+                filters: filtersConfig,
+                tableState: {},
+                setTableState: jest.fn().mockImplementation((newTableState) => contextRef.current.setProperty('tableState', newTableState)),
+            };
+        },
+        (props) => <FiltersPanel { ...props } />,
+    );
+    const dom = {
+        add: screen.getByText('Add filter'),
+    };
+    return { result, dom, mocks };
+}
+
+function withinDialog() {
+    return within(screen.queryByRole('dialog'));
+}
+function expectDialog() {
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+}
+function notExpectDialog() {
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+}
+
+describe('FiltersPanel', () => {
+    describe('snapshot', () => {
+        it('should be rendered correctly', async () => {
+            const tree = await renderSnapshotWithContextAsync(
+                <FiltersPanel
+                    filters={ filtersConfigWithoutPredicatesAll }
+                    tableState={ {
+                        filtersConfig: {
+                            status: { isVisible: true, order: 'a' },
+                            position: { isVisible: true, order: 'b' },
+                            age: { isVisible: true, order: 'c' },
+                            hireDate: { isVisible: true, order: 'd' },
+                            exitDate: { isVisible: true, order: 'e' },
+                        },
+                        filter: {
+                            status: [1, 2, 3],
+                        },
+                    } }
+                    setTableState={ () => {} }
+                />,
+            );
+            expect(tree).toMatchSnapshot();
+        });
+    });
+
+    describe('filter type: singlePicker', () => {
+        it('should add / view / clear / remove (without predicate)', async () => {
+            const user = userEvent.setup();
+            const { dom, mocks } = await setupFilterPanelComponent({
+                filtersConfig: filtersConfigWithoutPredicatesAll,
+            });
+            await user.click(dom.add);
+            expectDialog();
+            const statusOption = withinDialog().queryByRoleAndText({ role: 'option', text: 'Status' });
+            expect(statusOption).toBeInTheDocument();
+            await user.click(statusOption);
+            await user.click(withinDialog().getByRoleAndText({ role: 'option', text: 'Red' }));
+            notExpectDialog();
+            expect(mocks.setTableState).lastCalledWith(expect.objectContaining({ filter: { status: 2 } }));
+            await user.click(screen.getByRoleAndText({ role: 'button', text: 'Status:Red' }));
+            expectDialog();
+            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'Red' })).toHaveAttribute('aria-selected', 'true');
+            
+            await user.click(withinDialog().getByRoleAndText({ role: 'button', text: 'CLEAR' }));
+            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'Red' })).toHaveAttribute('aria-selected', 'false');
+            const removeButton = withinDialog().getByRoleAndText({ role: 'button', text: 'REMOVE FILTER' });
+            await user.click(removeButton);
+            notExpectDialog();
+            expect(screen.getByRoleAndText({ role: 'button', text: 'Add filter' })).toBeInTheDocument();
+        });
+    });
+
+    describe('filter type: datePicker', () => {
+        it('should add / view / clear / remove (without predicate)', async () => {
+            const user = userEvent.setup();
+            const { dom, mocks } = await setupFilterPanelComponent({
+                filtersConfig: filtersConfigWithoutPredicatesAll,
+            });
+            await user.click(dom.add);
+            expectDialog();
+            const exitDateOption = withinDialog().queryByRoleAndText({ role: 'option', text: 'Exit Date' });
+            expect(exitDateOption).toBeInTheDocument();
+            await user.click(exitDateOption);
+            await user.click(withinDialog().getByText(TODAY_DAY_OF_MONTH));
+            notExpectDialog();
+            expect(mocks.setTableState).lastCalledWith(expect.objectContaining({ filter: { exitDate: TODAY_DATE_ISO } }));
+            await user.click(screen.getByRoleAndText({ role: 'button', text: `Exit Date:${TODAY_DATE_FORMATTED}` }));
+            expectDialog();
+            expect(withinDialog().getByText(TODAY_DAY_OF_MONTH).parentElement).toHaveClass('uui-calendar-selected-day');
+            await user.click(withinDialog().getByRoleAndText({ role: 'button', text: 'CLEAR' }));
+            expect(withinDialog().getByText(TODAY_DAY_OF_MONTH).parentElement).not.toHaveClass('uui-calendar-selected-day');
+            const removeButton = withinDialog().getByRoleAndText({ role: 'button', text: 'REMOVE FILTER' });
+            await user.click(removeButton);
+            notExpectDialog();
+            expect(screen.getByRoleAndText({ role: 'button', text: 'Add filter' })).toBeInTheDocument();
+        });
+    });
+    describe('filter type: multiPicker', () => {
+        it('should add / view / clear / remove (without predicate)', async () => {
+            const user = userEvent.setup();
+            const { dom, mocks } = await setupFilterPanelComponent({
+                filtersConfig: filtersConfigWithoutPredicatesAll,
+            });
+            await user.click(dom.add);
+            expectDialog();
+            const positionOption = withinDialog().queryByRoleAndText({ role: 'option', text: 'Position' });
+            expect(positionOption).toBeInTheDocument();
+            await user.click(positionOption);
+            await user.click(withinDialog().getByRoleAndText({ role: 'option', text: 'QA' }));
+            await user.click(withinDialog().getByRoleAndText({ role: 'option', text: 'Dev' }));
+            await user.click(window.document.body);
+            notExpectDialog();
+            expect(mocks.setTableState).lastCalledWith(expect.objectContaining({ filter: { position: [2, 3] } }));
+            await user.click(screen.getByRole('button', { name: 'Position: QA , Dev' }));
+            expectDialog();
+            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'QA' })).toBeChecked();
+            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'Dev' })).toBeChecked();
+            await user.click(withinDialog().getByRoleAndText({ role: 'button', text: 'CLEAR ALL' }));
+            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'QA' })).not.toBeChecked();
+            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'Dev' })).not.toBeChecked();
+            const removeButton = withinDialog().queryByRoleAndText({ role: 'button', text: 'REMOVE FILTER' });
+            await user.click(removeButton);
+            notExpectDialog();
+            expect(screen.getByRoleAndText({ role: 'button', text: 'Add filter' })).toBeInTheDocument();
+        });
+        it('should add / view / clear / remove (with multiPicker predicate)', async () => {
+            const user = userEvent.setup();
+            const { dom, mocks } = await setupFilterPanelComponent({
+                filtersConfig: filtersConfigWithPredicatesAll,
+            });
+            await user.click(dom.add);
+            expectDialog();
+            const positionOption = withinDialog().queryByRoleAndText({ role: 'option', text: 'Position' });
+            expect(positionOption).toBeInTheDocument();
+            await user.click(positionOption);
+            expect(
+                withinDialog()
+                    .queryAllByRole('tab')
+                    .map((t) => t.textContent),
+            ).toEqual(['is', 'is not']);
+            await user.click(withinDialog().getByRoleAndText({ role: 'option', text: 'QA' }));
+            await user.click(withinDialog().getByRoleAndText({ role: 'option', text: 'Dev' }));
+            await user.click(withinDialog().getByRoleAndText({ role: 'tab', text: 'is not' }));
+            await user.click(window.document.body);
+            notExpectDialog();
+            expect(mocks.setTableState).lastCalledWith(expect.objectContaining({ filter: { position: { nin: [2, 3] } } }));
+            await user.click(screen.getByRole('button', { name: 'Position is not QA , Dev' }));
+            expectDialog();
+            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'QA' })).toBeChecked();
+            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'Dev' })).toBeChecked();
+            await user.click(withinDialog().getByRoleAndText({ role: 'button', text: 'CLEAR ALL' }));
+            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'QA' })).not.toBeChecked();
+            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'Dev' })).not.toBeChecked();
+            const removeButton = withinDialog().queryByRoleAndText({ role: 'button', text: 'REMOVE FILTER' });
+            await user.click(removeButton);
+            notExpectDialog();
+            expect(screen.getByRoleAndText({ role: 'button', text: 'Add filter' })).toBeInTheDocument();
+        });
+    });
+    describe('filter type: numeric', () => {
+        it('should add / view / clear / remove (without predicate)', async () => {
+            const user = userEvent.setup();
+            const { dom, mocks } = await setupFilterPanelComponent({
+                filtersConfig: filtersConfigWithoutPredicatesAll,
+            });
+            await user.click(dom.add);
+            expectDialog();
+            const ageOption = withinDialog().queryByRoleAndText({ role: 'option', text: 'Age' });
+            expect(ageOption).toBeInTheDocument();
+            await user.click(ageOption);
+            await user.type(withinDialog().getByRole('spinbutton'), '20');
+            await user.click(window.document.body);
+            notExpectDialog();
+            expect(mocks.setTableState).lastCalledWith(expect.objectContaining({ filter: { age: 20 } }));
+            await user.click(screen.getByRoleAndText({ role: 'button', text: 'Age:20' }));
+            expectDialog();
+            const input = withinDialog().getByRole('spinbutton') as HTMLInputElement;
+            expect(input.placeholder).toEqual('20');
+            await user.click(withinDialog().getByRoleAndText({ role: 'button', text: 'CLEAR' }));
+            expect(input.placeholder).toEqual('Enter a number');
+            const removeButton = withinDialog().queryByRoleAndText({ role: 'button', text: 'REMOVE FILTER' });
+            await user.click(removeButton);
+            notExpectDialog();
+            expect(screen.getByRoleAndText({ role: 'button', text: 'Add filter' })).toBeInTheDocument();
+        });
+        it('should add / view / clear / remove (with numeric predicate)', async () => {
+            const user = userEvent.setup();
+            const { dom, mocks } = await setupFilterPanelComponent({
+                filtersConfig: filtersConfigWithPredicatesAll,
+            });
+            await user.click(dom.add);
+            expectDialog();
+            const ageOption = withinDialog().queryByRoleAndText({ role: 'option', text: 'Age' });
+            expect(ageOption).toBeInTheDocument();
+            await user.click(ageOption);
+            expect(
+                withinDialog()
+                    .queryAllByRole('tab')
+                    .map((t) => t.textContent),
+            ).toEqual([
+                '=', '≠', '≤', '≥', 'In Range',
+            ]);
+            await user.type(withinDialog().getByRole('spinbutton'), '20');
+            await user.click(withinDialog().getByRoleAndText({ role: 'tab', text: '≠' }));
+            await user.click(window.document.body);
+            notExpectDialog();
+            expect(mocks.setTableState).lastCalledWith(expect.objectContaining({ filter: { age: { neq: 20 } } }));
+            await user.click(screen.getByRoleAndText({ role: 'button', text: 'Age ≠20' }));
+            expectDialog();
+            const input = withinDialog().getByRole('spinbutton') as HTMLInputElement;
+            expect(input.placeholder).toEqual('20');
+            await user.click(withinDialog().getByRoleAndText({ role: 'button', text: 'CLEAR' }));
+            expect(input.placeholder).toEqual('Enter a number');
+            const removeButton = withinDialog().queryByRoleAndText({ role: 'button', text: 'REMOVE FILTER' });
+            await user.click(removeButton);
+            notExpectDialog();
+            expect(screen.getByRoleAndText({ role: 'button', text: 'Add filter' })).toBeInTheDocument();
+        });
+    });
+    describe('filter type: rangeDatePicker', () => {
+        it('should add / view / clear / remove (without predicate)', async () => {
+            const user = userEvent.setup();
+            const { dom, mocks } = await setupFilterPanelComponent({
+                filtersConfig: filtersConfigWithoutPredicatesAll,
+            });
+            await user.click(dom.add);
+            expectDialog();
+            const hireDateOption = withinDialog().queryByRoleAndText({ role: 'option', text: 'Hire Date' });
+            expect(hireDateOption).toBeInTheDocument();
+            await user.click(hireDateOption);
+            await user.click(withinDialog().getAllByText(TODAY_DAY_OF_MONTH)[0]);
+            await user.click(withinDialog().getAllByText(TODAY_DAY_OF_MONTH)[0]);
+            await user.click(window.document.body);
+            notExpectDialog();
+            expect(mocks.setTableState).lastCalledWith(expect.objectContaining({ filter: { hireDate: { from: TODAY_DATE_ISO, to: TODAY_DATE_ISO } } }));
+            await user.click(screen.getByRoleAndText({ role: 'button', text: `Hire Date:${TODAY_DATE_FORMATTED} - ${TODAY_DATE_FORMATTED}` }));
+            expectDialog();
+            expect(withinDialog().getAllByText(TODAY_DAY_OF_MONTH)[0].parentElement).toHaveClass('uui-calendar-selected-day');
+            await user.click(withinDialog().getByRoleAndText({ role: 'button', text: 'CLEAR ALL' }));
+            expect(withinDialog().getAllByText(TODAY_DAY_OF_MONTH)[0].parentElement).not.toHaveClass('uui-calendar-selected-day');
+            const removeButton = withinDialog().getByRoleAndText({ role: 'button', text: 'REMOVE FILTER' });
+            await user.click(removeButton);
+            notExpectDialog();
+            expect(screen.getByRoleAndText({ role: 'button', text: 'Add filter' })).toBeInTheDocument();
+        });
+        it('should add / view / clear / remove (with rangeDatePicker predicate)', async () => {
+            const user = userEvent.setup();
+            const { dom, mocks } = await setupFilterPanelComponent({
+                filtersConfig: filtersConfigWithPredicatesAll,
+            });
+            await user.click(dom.add);
+            expectDialog();
+            const hireDateOption = withinDialog().queryByRoleAndText({ role: 'option', text: 'Hire Date' });
+            expect(hireDateOption).toBeInTheDocument();
+            await user.click(hireDateOption);
+            expect(
+                withinDialog()
+                    .queryAllByRole('tab')
+                    .map((t) => t.textContent),
+            ).toEqual(['In Range', 'Not in Range']);
+            await user.click(withinDialog().getByRoleAndText({ role: 'tab', text: 'Not in Range' }));
+            await user.click(withinDialog().getAllByText(TODAY_DAY_OF_MONTH)[0]);
+            await user.click(withinDialog().getAllByText(TODAY_DAY_OF_MONTH)[0]);
+            notExpectDialog();
+            expect(mocks.setTableState).lastCalledWith(expect.objectContaining({ filter: { hireDate: { notInRange: { from: TODAY_DATE_ISO, to: TODAY_DATE_ISO } } } }));
+            await user.click(screen.getByRoleAndText({ role: 'button', text: `Hire Date Not in Range${TODAY_DATE_FORMATTED} - ${TODAY_DATE_FORMATTED}` }));
+            expectDialog();
+            expect(withinDialog().getAllByText(TODAY_DAY_OF_MONTH)[0].parentElement).toHaveClass('uui-calendar-selected-day');
+            await user.click(withinDialog().getByRoleAndText({ role: 'button', text: 'CLEAR ALL' }));
+            expect(withinDialog().getAllByText(TODAY_DAY_OF_MONTH)[0].parentElement).not.toHaveClass('uui-calendar-selected-day');
+            const removeButton = withinDialog().getByRoleAndText({ role: 'button', text: 'REMOVE FILTER' });
+            await user.click(removeButton);
+            notExpectDialog();
+            expect(screen.getByRoleAndText({ role: 'button', text: 'Add filter' })).toBeInTheDocument();
+        });
+    });
+});

package/components/filters/constants.ts

@@ -0,0 +1,4 @@
+export const UUI_FILTERS_PANEL_ADD_BUTTON = 'uui-filters-panel-add-button';
+export const UUI_FILTERS_PANEL_ADD_BUTTON_BODY = 'uui-filters-panel-add-button-body';
+export const UUI_FILTERS_PANEL_ITEM_BODY = 'uui-filters-panel-item-body';
+export const UUI_FILTERS_PANEL_ITEM_TOGGLER = 'uui-filters-panel-item-toggler';

package/components/filters/defaultPredicates.ts

@@ -0,0 +1,11 @@
+import { IFilterPredicate } from '@epam/uui-core';
+
+type defaultPredicateName = 'numeric' | 'multiPicker' | 'rangeDatePicker';
+
+export const defaultPredicates: Record<defaultPredicateName, IFilterPredicate[]> = {
+    numeric: [
+        { predicate: 'eq', name: '=', isDefault: true }, { predicate: 'neq', name: '≠' }, { predicate: 'lte', name: '≤' }, { predicate: 'gte', name: '≥' }, { predicate: 'inRange', name: 'In Range' },
+    ],
+    multiPicker: [{ predicate: 'in', name: 'is', isDefault: true }, { predicate: 'nin', name: 'is not' }],
+    rangeDatePicker: [{ predicate: 'inRange', name: 'In Range', isDefault: true }, { predicate: 'notInRange', name: 'Not in Range' }],
+};