@blaze-cms/react-page-builder 0.124.0-alpha.3 → 0.124.0-alpha.32

package/src/components/SearchFilter/constants.js

@@ -2,7 +2,7 @@ const CHECKBOX = 'checkbox';
 const SELECT = 'select';
 const TEXT_SEARCH = 'text-search';
 const SEARCH_TERM = 'search_term';
-const SIZE = 50;
+const SIZE = process.env.BLAZE_PB_SEARCH_FILETER_AGG_SIZE || 500;
 const KEYWORD = 'keyword';
 const RAW_RESULTS = 'rawResults';
 const DEFAULT_OPTION = 'Any';

package/src/components/SearchFilter/helpers/build-filters-query.js

@@ -0,0 +1,40 @@
+const builFilterObject = (key, value, filters) => {
+  const isArray = Array.isArray(value);
+  if (!isArray) {
+    const singleFilterObj = { match: { [key]: value } };
+    filters.push(singleFilterObj);
+    return;
+  }
+
+  value.forEach(filterValue => {
+    filters.push({ match: { [key]: filterValue } });
+  });
+};
+const buildFiltersQuery = (query, filterBy, filterByProperty) => {
+  const mustFilters = [];
+  Object.keys(query).forEach(queryKey => {
+    if (queryKey === 'search_term' || queryKey === 'shouldSearch') return;
+    if (!queryKey || !query[queryKey]) return;
+    const queryValue = query[queryKey];
+    const queryKeyword = `${queryKey}.keyword`;
+    builFilterObject(queryKeyword, queryValue, mustFilters);
+  });
+
+  if (filterByProperty && filterByProperty.length) {
+    filterByProperty &&
+      filterByProperty.forEach(filterByPropOption => {
+        const [filterByPropKey] = filterByPropOption.split('/');
+        filterBy.forEach(filterByOption => {
+          if (filterByOption.indexOf(filterByPropKey) === -1) return;
+          const [, filteryByValue] = filterByOption.split('/');
+          const filterByKeyword = `${filterByPropKey}.keyword`;
+          if (!filteryByValue) return;
+          mustFilters.push({ match: { [filterByKeyword]: filteryByValue } });
+        });
+      });
+  }
+
+  return mustFilters;
+};
+
+export default buildFiltersQuery;

package/src/components/SearchFilter/helpers/build-raw-query-stringified.js

@@ -1,6 +1,6 @@
 import { KEYWORD, SIZE } from '../constants';
 
-const buildRawQueryStringified = (checkboxSelectValues, rangeValues, entity) => {
+const buildRawQueryStringified = (checkboxSelectValues, rangeValues, entity, mustFilters) => {
   if (!checkboxSelectValues.length && !rangeValues.length) return '';
 
   const aggs = {};
@@ -36,6 +36,7 @@ const buildRawQueryStringified = (checkboxSelectValues, rangeValues, entity) =>
                 }
               }
             ],
+            must: mustFilters,
             minimum_should_match: 1
           }
         }

package/src/components/SearchFilter/helpers/get-initial-filter-values.js

@@ -3,6 +3,7 @@ import getFilterValueFromQuery from './get-filter-value-from-query';
 
 const getInitialFilterValues = (filterData, filters, query) => {
   const filterValues = {};
+
   Object.keys(filterData).forEach(key => {
     const filterProps =
       filters.find(({ propsToDisplay }) => propsToDisplay.find(prop => key === prop)) || {};

package/src/components/SearchFilter/helpers/index.js

@@ -13,6 +13,7 @@ import isDeviceDesktop from './is-device-desktop';
 import getInitialFilterValues from './get-initial-filter-values';
 import getFilterValueFromQuery from './get-filter-value-from-query';
 import buildQuery from './build-query';
+import buildFiltersQuery from './build-filters-query';
 
 export {
   buildQuery,
@@ -30,5 +31,6 @@ export {
   getSelectOptions,
   isDeviceDesktop,
   getInitialFilterValues,
-  getFilterValueFromQuery
+  getFilterValueFromQuery,
+  buildFiltersQuery
 };

package/src/components/index.js

@@ -18,7 +18,7 @@ export default {
   video: dynamic(() => import(/* webpackChunkName: "blazePbVideo" */ './Video')),
   wrapper: dynamic(() => import(/* webpackChunkName: "blazePbWrapper" */ './Wrapper')),
   searchcontent: dynamic(() =>
-    import(/* webpackChunkName: "blazePbSearchFilter" */ './SearchContent')
+    import(/* webpackChunkName: "blazePbSearchFilter" */ './SearchContent/SearchContent')
   ),
   searchfilter: dynamic(() =>
     import(/* webpackChunkName: "blazePbSearchFilter" */ './SearchFilter')
@@ -42,5 +42,11 @@ export default {
     import(/* webpackChunkName: "blazePbPasswordResetRequest" */ './PasswordResetRequest')
   ),
   breadcrumb: dynamic(() => import(/* webpackChunkName: "blazePbBreadcrumb" */ './Breadcrumb')),
+  itemlistbutton: dynamic(() =>
+    import(/* webpackChunkName: "blazePbItemListButton" */ './ItemListButton')
+  ),
+  itemlistcounter: dynamic(() =>
+    import(/* webpackChunkName: "blazePbItemListCounter" */ './ItemListCounter')
+  ),
   backtotop: dynamic(() => import(/* webpackChunkName: "blazePbBackToTop" */ './BackToTop'))
 };

package/src/constants/index.js

@@ -17,6 +17,7 @@ const RANGE = 'range';
 const CHECKBOX = 'checkbox';
 const ELEMENT = 'element';
 const MENU_ITEM = 'menuitem';
+const SUB_MENU = 'submenu';
 const SELECT = 'select';
 const ON_CLICK = 'onClick';
 const KEYWORD = 'keyword';
@@ -209,6 +210,8 @@ const DATA_SUMMARY_EMAIL_REGEX = /^([a-z0-9_\.\+-]+)@([\da-z\.-]+)\.([a-z\.]{2,6
 const DATA_SUMMARY_URL_REGEX = /(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
 const DATA_SUMMARY_TEL_REGEX = /^\+{0,1}[0-9\(\)\.\- \/]{7,}$/; // note: very loose phone number match not for validation
 
+const LIST_ITEM_LOCAL_KEY = 'blaze_item_list_';
+
 export {
   BANNER_LOADING,
   BANNER_EMPTY,
@@ -303,6 +306,7 @@ export {
   MOBILE_WIDTH,
   HIDDEN,
   MENU_ITEM,
+  SUB_MENU,
   LOGIN_FORM,
   PASSWORD_REGEX,
   PASSWORD_VALIDATION_MESSAGE,
@@ -320,5 +324,6 @@ export {
   TARGET_BLANK,
   DATA_SUMMARY_EMAIL_REGEX,
   DATA_SUMMARY_URL_REGEX,
-  DATA_SUMMARY_TEL_REGEX
+  DATA_SUMMARY_TEL_REGEX,
+  LIST_ITEM_LOCAL_KEY
 };

package/src/helpers/build-props-query.js

@@ -22,23 +22,24 @@ const buildPropsQuery = (data, extraProps = [], cardOptions = null) => {
   const basicProps = uniqueProps
     .filter(prop => prop && !prop.includes('.'))
     .filter((prop, i, arr) => arr.indexOf(prop) === i);
-  const complexProps = buildComplexProps(shouldAddCategoryProps, uniqueProps);
-
+  const complexProps = buildComplexProps(shouldAddCategoryProps, uniqueProps, data);
   return [...basicProps, ...complexProps].join(',');
 };
 
-const buildComplexProps = (shouldAddCategoryProps, props) =>
+const buildComplexProps = (shouldAddCategoryProps, props, { getEntitySchema: { relations } }) =>
   props
     .filter(prop => prop && prop.includes('.'))
     .map(nested => nested.split('.')[0])
     .filter((prop, i, arr) => arr.indexOf(prop) === i)
     .map(base => {
+      const matchingRelation = relations.find(({ localField }) => localField === base);
       const nestedProps = props
         .filter(
           (extraProp, i, arr) =>
             extraProp && extraProp.startsWith(`${base}.`) && arr.indexOf(extraProp) === i
         )
         .map(nested => nested.split('.')[1]);
+      if (matchingRelation && !nestedProps.includes('id')) nestedProps.push('id');
 
       const jointNestedProps = nestedProps.join(',');
       if (base === 'category' && shouldAddCategoryProps)
@@ -70,6 +71,8 @@ const getTypeBaseProps = (data, cardOptions, extraPropsHaveCategory) => {
   typeBasedProps.push(...getCategoyProps(shouldAddCategoryProps, hasCategory, hasPreheader));
   typeBasedProps.push(...getContentProps(isContent));
 
+  if (properties.url || dynamicProperties.url) typeBasedProps.push('url');
+
   if (displayThumbnail && relations.find(({ localField }) => localField === 'image')) {
     typeBasedProps.push('image.id', 'image.url', 'image.data');
   }

package/src/helpers/build-raw-query.js

@@ -62,6 +62,7 @@ const buildRawQuery = (
 
   if (itemsToDisplay && itemsToDisplay.length) {
     const itemsToDisplayIds = getItemsToDisplayIds(itemsToDisplay);
+
     query.bool.must.push({ ids: { values: itemsToDisplayIds } });
     if (shouldApplySort) {
       return {

package/src/helpers/get-item-list-data.js

@@ -0,0 +1,6 @@
+const getItemListData = data => {
+  if (data && data.getItemList && data.getItemList.listItems) return data.getItemList.listItems;
+  return [];
+};
+
+export default getItemListData;

package/src/helpers/get-item-list-id.js

@@ -0,0 +1,11 @@
+import { LIST_ITEM_LOCAL_KEY } from '../constants';
+
+const getItemListId = (listName, queryId) => {
+  if (queryId) return queryId;
+  if (!listName || typeof localStorage === 'undefined') return '';
+
+  const localListName = `${LIST_ITEM_LOCAL_KEY}${listName}`;
+  return localStorage.getItem(localListName) || '';
+};
+
+export default getItemListId;

package/src/helpers/get-item-list-ids.js

@@ -0,0 +1,10 @@
+import getItemListData from './get-item-list-data';
+
+const getItemListIds = data => {
+  const itemListElements = getItemListData(data);
+  return itemListElements.length
+    ? itemListElements.map(({ itemId }) => ({ displayItems: [itemId] }))
+    : null;
+};
+
+export default getItemListIds;

package/src/helpers/index.js

@@ -51,3 +51,6 @@ export { default as getParsedPropValues } from './get-parsed-prop-values';
 export { default as getSanitizedPropValues } from './get-sanitized-prop-values';
 export { default as appendImages } from './append-images';
 export { default as parseTextBlock } from './parse-TextBlock';
+export { default as getItemListId } from './get-item-list-id';
+export { default as getItemListIds } from './get-item-list-ids';
+export { default as getItemListData } from './get-item-list-data';

package/src/hooks/helpers/append-gtm-classname.js

@@ -7,6 +7,9 @@ const appendGtmClassName = (settings, childComponents) => {
       children: [, compChildren]
     }
   } = childComponents;
+
+  if (!compChildren || !Array.isArray(compChildren)) return settings;
+
   const gtmClassNames = compChildren
     .filter(
       ({

package/tests/helpers/mocks.js

@@ -1521,13 +1521,13 @@ const RAW_QUERY_ALL_SEARCH_VALUE_DIFFERENT_OPERATOR_TEXT_CHECKBOX_HAS_OR_OPERATO
 };
 
 const RAW_QUERY_STRINGIFIED =
-  '{"aggs":{"tags.name":{"terms":{"field":"tags.name.keyword","size":50}},"category.name"' +
-  ':{"terms":{"field":"category.name.keyword","size":50}}},"size":0,"query":{"bool":{"filter":{"bool"' +
+  '{"aggs":{"tags.name":{"terms":{"field":"tags.name.keyword","size":500}},"category.name"' +
+  ':{"terms":{"field":"category.name.keyword","size":500}}},"size":0,"query":{"bool":{"filter":{"bool"' +
   ':{"should":[{"match":{"docType":"published_page"}}],"minimum_should_match":1}}}}}';
 
 const RAW_QUERY_STRINGIFIED_WITH_RANGE =
-  '{"aggs":{"tags.name":{"terms":{"field":"tags.name.keyword","size":50}},"category.name":{"' +
-  'terms":{"field":"category.name.keyword","size":50}},"price":{"stats":{"field":"price"}},"length":' +
+  '{"aggs":{"tags.name":{"terms":{"field":"tags.name.keyword","size":500}},"category.name":{"' +
+  'terms":{"field":"category.name.keyword","size":500}},"price":{"stats":{"field":"price"}},"length":' +
   '{"stats":{"field":"length"}}},"size":0,"query":{"bool":{"filter":{"bool":{"should":[{"match":' +
   '{"docType":"published_page"}}],"minimum_should_match":1}}}}}';
 

package/tests/unit/src/components/Carousel/__snapshots__/Carousel.test.js.snap

@@ -11,7 +11,7 @@ exports[`Carousel component should render carousel and match snapshot 1`] = `
         role="button"
       >
         <div
-          class="arrow arrow--left"
+          class="carousel--arrow__left"
         />
       </div>
       <div
@@ -28,7 +28,7 @@ exports[`Carousel component should render carousel and match snapshot 1`] = `
         role="button"
       >
         <div
-          class="arrow arrow--right"
+          class="carousel--arrow__right"
         />
       </div>
     </div>

package/tests/unit/src/components/Menu/Menu.test.js

@@ -3,16 +3,22 @@ import { render } from '@blaze-cms/tools/test-helpers/test-functions';
 import '@testing-library/jest-dom/extend-expect';
 import Menu from '../../../../../src/components/Menu';
 
-jest.mock('../../../../../src/components/SearchContent', () => () => 'Search Component');
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(() => ({ events: { on: jest.fn(), off: jest.fn() } }))
+}));
 
 const props = {
   collapse: false,
   modifier: 'menu-mod',
-  children: [<div className="child_1">only child</div>]
+  children: [
+    <div className="child_1" key="1">
+      only child
+    </div>
+  ]
 };
 
 describe('Menu component', () => {
-  it.skip('should render without throwing an error and match snapshot', () => {
+  it('should render without throwing an error and match snapshot', () => {
     const { asFragment } = render(Menu, props);
     expect(asFragment()).toMatchSnapshot();
   });

package/tests/unit/src/components/Menu/__snapshots__/Menu.test.js.snap

@@ -3,20 +3,21 @@
 exports[`Menu component should render without throwing an error and match snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="menu--desktop-wrapper"
+    class="menu--wrapper"
   >
-    <ul
-      class="menu-mod"
+    <div
+      class="menu--desktop-wrapper"
     >
-      <div
-        class="child_1"
+      <ul
+        class="menu-mod"
       >
-        only child
-      </div>
-      <li>
-        Search Component
-      </li>
-    </ul>
+        <div
+          class="child_1"
+        >
+          only child
+        </div>
+      </ul>
+    </div>
   </div>
 </DocumentFragment>
 `;

package/tests/unit/src/components/MenuItem/MenuItem.test.js

@@ -8,7 +8,7 @@ const props = {
   text: 'Item 1',
   modifier: 'menu-item-mod',
   children: [
-    <div className="child_1" component={{ type: 'menuitem' }}>
+    <div className="child_1" key="1" component={{ type: 'menuitem' }}>
       some child
     </div>
   ]

package/tests/unit/src/components/MenuItem/SubMenu.test.js

@@ -15,7 +15,11 @@ describe('SubMenu component', () => {
   it('should render children if passed', () => {
     const { container, asFragment } = render(SubMenu, {
       modifier: '',
-      children: [<div className="sub-menu-child">some stuff</div>]
+      children: [
+        <div className="sub-menu-child" key="1">
+          some stuff
+        </div>
+      ]
     });
     expect(asFragment()).toMatchSnapshot();
     expect(container.firstChild.firstChild).toContainHTML('div');

package/tests/unit/src/components/MenuItem/__snapshots__/MenuItem.test.js.snap

@@ -5,13 +5,35 @@ exports[`MenuItem component should render link if url is passed 1`] = `
   <li
     class="menu-item-mod"
   >
-    <a
-      href="/somewhere"
+    <div
+      class="menu--item--link"
     >
-      Item 1
-    </a>
+      <a
+        href="/somewhere"
+      >
+        Item 1
+      </a>
+      <i
+        class="menu--item--link--icon"
+        role="button"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 448 512"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"
+          />
+        </svg>
+      </i>
+    </div>
     <div
-      class="hidden"
+      class="menu--item-children hidden"
     >
       <div
         class="child_1"
@@ -29,13 +51,35 @@ exports[`MenuItem component should render without throwing an error and match sn
   <li
     class="menu-item-mod"
   >
-    <span
-      role="button"
+    <div
+      class="menu--item--link"
     >
-      Item 1
-    </span>
+      <span
+        role="button"
+      >
+        Item 1
+      </span>
+      <i
+        class="menu--item--link--icon"
+        role="button"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 448 512"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"
+          />
+        </svg>
+      </i>
+    </div>
     <div
-      class="hidden"
+      class="menu--item-children hidden"
     >
       <div
         class="child_1"

package/tests/unit/src/components/SearchContent/SearchContent.test.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { MockedProvider } from '@apollo/client/testing';
+import { render } from '@testing-library/react';
+import SearchContent from '../../../../../src/components/SearchContent';
+
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
+  useQuery: jest.fn(() => ({ data: {}, loading: false, error: null }))
+}));
+
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(() => ({ asPath: 'test-url' }))
+}));
+
+jest.mock('../../../../../src/components/SearchContent/SearchContent', () =>
+  jest.fn(() => <div>Mocked component</div>)
+);
+
+describe('SearchContent', () => {
+  it('should match snapshot', async () => {
+    const { asFragment } = render(
+      <MockedProvider mocks={[]} addTypename={false}>
+        <SearchContent />
+      </MockedProvider>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/tests/unit/src/components/SearchContent/__snapshots__/SearchContent.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SearchContent should match snapshot 1`] = `
+<DocumentFragment>
+  <div>
+    Mocked component
+  </div>
+</DocumentFragment>
+`;

package/tests/unit/src/components/SearchFilter/SearchFilter/SearchFilter.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import SearchFilter from '../../../../../../src/components/SearchFilter/SearchFilter';
 
@@ -11,7 +11,7 @@ const renderComponent = (Component, props) => {
 
 const mockedProps = {
   data: {},
-  initialFilterValues: {},
+  filterValues: {},
   filters: [],
   searchFilterRef: {},
   buttonRef: { current: null },
@@ -24,14 +24,11 @@ const mockedProps = {
   groupAfterMobile: 0,
   groupAfterDesktop: 0,
   isCollapsedOnResponsive: true,
-  displaySearchFilter: false
+  displaySearchFilter: false,
+  setAppliedFilters: jest.fn()
 };
 
 describe('SearchFilter component', () => {
-  it('should be defined', () => {
-    expect(SearchFilter).toBeDefined();
-  });
-
   describe('when isCollapsedOnResponsive = true, displaySearchFilter = false', () => {
     const specificMockedProps = {
       ...mockedProps,
@@ -153,5 +150,27 @@ describe('SearchFilter component', () => {
       const { asFragment } = renderComponent(SearchFilter, specificMockedProps);
       expect(asFragment()).toMatchSnapshot();
     });
+
+    it('should toggle open and close classes on click and submit', () => {
+      const { getByTestId } = renderComponent(SearchFilter, specificMockedProps);
+      const mobileToggler = getByTestId('search-filter-mobile-toggler');
+      const desktopToggler = getByTestId('search-filter-desktop-toggler');
+      const form = screen.getByTestId(`filter-${specificMockedProps.name}-form`);
+
+      fireEvent.click(mobileToggler);
+      expect(mobileToggler).toHaveClass(
+        'filter__more-filters-mobile-toggler filter__more-filters-mobile-toggler--open'
+      );
+
+      fireEvent.click(desktopToggler);
+      expect(desktopToggler).toHaveClass(
+        'filter__more-filters-desktop-toggler filter__more-filters-desktop-toggler--open'
+      );
+
+      fireEvent.submit(form);
+
+      expect(mobileToggler).toHaveClass('filter__more-filters-mobile-toggler');
+      expect(desktopToggler).toHaveClass('filter__more-filters-desktop-toggler');
+    });
   });
 });

package/tests/unit/src/components/SearchFilter/SearchFilter/__snapshots__/SearchFilter.test.js.snap

@@ -121,6 +121,7 @@ exports[`SearchFilter component when groupAfterMobile = 0 and groupAfterDesktop
           >
             <button
               class="filter__more-filters-desktop-toggler"
+              data-testid="search-filter-desktop-toggler"
               type="button"
             >
               More filters
@@ -288,6 +289,7 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
       >
         <button
           class="filter__more-filters-mobile-toggler"
+          data-testid="search-filter-mobile-toggler"
           type="button"
         >
           Filters
@@ -461,6 +463,7 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
       >
         <button
           class="filter__more-filters-mobile-toggler"
+          data-testid="search-filter-mobile-toggler"
           type="button"
         >
           Filters
@@ -473,6 +476,7 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
           >
             <button
               class="filter__more-filters-desktop-toggler"
+              data-testid="search-filter-desktop-toggler"
               type="button"
             >
               More filters

package/tests/unit/src/components/SearchFilter/__snapshots__/SearchFilterContainer.test.js.snap

@@ -1,11 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SearchFilter container should match snapshot 1`] = `
-<DocumentFragment>
-  <div>
-    Mocked component
-  </div>
-</DocumentFragment>
-`;
+exports[`SearchFilter container should match snapshot 1`] = `<DocumentFragment />`;
 
 exports[`SearchFilter container should return null if no filters are passed 1`] = `<DocumentFragment />`;

package/tests/unit/src/components/SearchFilter/components/__snapshots__/Checkbox.test.js.snap

@@ -10,6 +10,7 @@ exports[`Checkbox component should render without throwing an error match snapsh
       class="form-checkbox"
       data-cy="checkbox-cy-1"
       data-testid="checkbox-1"
+      disabled=""
       id="name1-checkbox"
       name="name"
       readonly=""
@@ -36,6 +37,7 @@ exports[`Checkbox component should render without throwing an error match snapsh
       class="form-checkbox"
       data-cy="checkbox-cy-2"
       data-testid="checkbox-2"
+      disabled=""
       id="name2-checkbox"
       name="name"
       readonly=""

package/tests/unit/src/components/SearchFilter/components/__snapshots__/Select.test.js.snap

@@ -13,11 +13,13 @@ exports[`Select component should display label as placeholder with no label tag
         Placeholder label
       </option>
       <option
+        disabled=""
         value="name1"
       >
         name1
       </option>
       <option
+        disabled=""
         value="name2"
       >
         name2
@@ -46,11 +48,13 @@ exports[`Select component should render witout throwing an error and match snaps
         Any
       </option>
       <option
+        disabled=""
         value="name1"
       >
         name1
       </option>
       <option
+        disabled=""
         value="name2"
       >
         name2

package/tests/unit/src/components/__snapshots__/index.test.js.snap

@@ -46,6 +46,14 @@ Object {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],
   },
+  "itemlistbutton": Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
+  "itemlistcounter": Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
   "list": Object {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],