jb-grid 0.4.1 → 0.5.0

package/react/lib/Components/content-error/ContentError.tsx

@@ -1,23 +1,26 @@
-import React from 'react';
-import CSS from './content-error.css';
-import { injectCss } from 'jb-core';
+import React from 'react';
+import CSS from './content-error.css?inline';
+import { injectCss } from 'jb-core';
+import { JBButton } from 'jb-button/react';
 
 injectCss(CSS as unknown as string);
 type ContentErrorProps = {
-    onRefreshBtnClick:()=>unknown,
-    message?:string,
-    title?:string,
-    refreshButtonTitle?:string,
+    onRefreshBtnClick: () => unknown,
+    message?: string,
+    title?: string,
+    refreshButtonTitle?: string,
 }
-function ContentError(props:ContentErrorProps) {
+function ContentError(props: ContentErrorProps) {
     return (
         <div className="content-error">
-            <div className="error-image">😬😓🤔</div>
-            <div className="error-text" style={{ padding: " 0 0 0 0" }}>{props.title}</div>
-            <div className="error-text">{props.message}</div>
-            <div className="error-button"><button onClick={props.onRefreshBtnClick}>{props.refreshButtonTitle}</button></div>
-        </div>
-    );
-}
+            <div className="error-image">😬😓🤔</div>
+            <div className="error-text" style={{ padding: " 0 0 0 0" }}>{props.title}</div>
+            <div className="error-text">{props.message}</div>
+            <div className="error-button">
+                <JBButton color="positive" onClick={props.onRefreshBtnClick}>{props.refreshButtonTitle}</JBButton>
+            </div>
+        </div>
+    );
+}
 
-export default ContentError;
+export default ContentError;

package/react/lib/Components/content-error/content-error.css

@@ -11,16 +11,10 @@
     .error-text {
         font-weight: 100;
         font-size: 1.5em;
-        padding: 16px 0;
+        padding: 1rem 0;
         color: #333;
     }
-    .error-button button {
-        padding: 8px 16px;
-        background: green;
-        color: #fff;
-        border: none;
-        border-radius: 150px;
-        cursor: pointer;
-        font-family: inherit;
-    }
-}
+    .error-button {
+        margin-top: 0.5rem;
+    }
+}

package/react/lib/Components/module-declaration.ts

@@ -1,22 +1,70 @@
-import type { DetailedHTMLProps, HTMLAttributes } from "react";
-import type { JBPaginationWebComponent } from "jb-grid";
-import type { JBPaginationDirectAttributeProps } from "./types";
-import type {JBCellWebComponent, JBRowWebComponent, JBExpandToggleWebComponent} from 'jb-grid'
-type JBPaginationAttributes = DetailedHTMLProps<HTMLAttributes<JBPaginationWebComponent>, JBPaginationWebComponent> & JBPaginationDirectAttributeProps
-export type JBRowAttributes = DetailedHTMLProps<HTMLAttributes<JBRowWebComponent>, JBRowWebComponent>
-export type JBCellAttributes = DetailedHTMLProps<HTMLAttributes<JBCellWebComponent>, JBCellWebComponent> & {
-  ellipsis?: boolean | number
-}
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
+import type { JBPaginationWebComponent } from "jb-grid";
+import type { JBPaginationDirectAttributeProps } from "./types";
+import type {JBCellWebComponent, JBRowWebComponent, JBExpandToggleWebComponent} from 'jb-grid'
+type TableHeaderTemplate = Array<{name: string, size?: string | number}>
+type JBTableHeaderWebComponent = HTMLElement & {
+  headerTemplate: TableHeaderTemplate
+}
+type JBColumnHeaderSort = "asc" | "desc";
+type JBColumnHeaderWebComponent = HTMLElement & {
+  name: string,
+  sortable: boolean,
+  sort: JBColumnHeaderSort | null
+}
+type JBPaginationInfoWebComponent = HTMLElement & {
+  pageSize: number,
+  pageSizes: number[],
+  startItemIndex: number,
+  endItemIndex: number,
+  totalItemsCount: number,
+  pageItemCountTitle: string,
+  fromLabel: string,
+  currentAvailableItemTitle: string,
+  showPersianNumber: boolean
+}
+export type JBRefreshIconWebComponent = HTMLElement & {
+  play: () => void,
+  pause: () => void,
+  stop: () => void
+}
+type JBFullscreenIconState = "enter" | "exit";
+type JBFullscreenIconWebComponent = HTMLElement & {
+  state: JBFullscreenIconState
+}
+type JBPaginationAttributes = DetailedHTMLProps<HTMLAttributes<JBPaginationWebComponent>, JBPaginationWebComponent> & JBPaginationDirectAttributeProps
+export type JBPaginationInfoAttributes = DetailedHTMLProps<HTMLAttributes<JBPaginationInfoWebComponent>, JBPaginationInfoWebComponent>
+export type JBRefreshIconAttributes = DetailedHTMLProps<HTMLAttributes<JBRefreshIconWebComponent>, JBRefreshIconWebComponent>
+export type JBFullscreenIconAttributes = DetailedHTMLProps<HTMLAttributes<JBFullscreenIconWebComponent>, JBFullscreenIconWebComponent> & {
+  state?: JBFullscreenIconState
+}
+export type JBRowAttributes = DetailedHTMLProps<HTMLAttributes<JBRowWebComponent>, JBRowWebComponent>
+export type JBTableHeaderAttributes = DetailedHTMLProps<HTMLAttributes<JBTableHeaderWebComponent>, JBTableHeaderWebComponent> & {
+  headerTemplate?: TableHeaderTemplate
+}
+export type JBColumnHeaderAttributes = DetailedHTMLProps<HTMLAttributes<JBColumnHeaderWebComponent>, JBColumnHeaderWebComponent> & {
+  name: string,
+  sortable?: boolean,
+  sort?: JBColumnHeaderSort
+}
+export type JBCellAttributes = DetailedHTMLProps<HTMLAttributes<JBCellWebComponent>, JBCellWebComponent> & {
+  ellipsis?: boolean | number
+}
 export type JBExpandToggleAttributes = DetailedHTMLProps<HTMLAttributes<JBExpandToggleWebComponent>, JBExpandToggleWebComponent>
 
 declare module "react" {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace JSX {
     interface IntrinsicElements {
-      'jb-pagination': JBPaginationAttributes;
-      'jb-row': JBRowAttributes;
-      'jb-cell': JBCellAttributes;
-      'jb-expand-toggle': JBExpandToggleAttributes;
+      'jb-pagination': JBPaginationAttributes;
+      'jb-pagination-info': JBPaginationInfoAttributes;
+      'jb-refresh-icon': JBRefreshIconAttributes;
+      'jb-fullscreen-icon': JBFullscreenIconAttributes;
+      'jb-row': JBRowAttributes;
+      'jb-table-header': JBTableHeaderAttributes;
+      'jb-col-header': JBColumnHeaderAttributes;
+      'jb-cell': JBCellAttributes;
+      'jb-expand-toggle': JBExpandToggleAttributes;
     }
   }
 }

package/react/lib/Content.tsx

@@ -1,55 +1,31 @@
-import { observer } from 'mobx-react';
-import React, { ReactNode } from 'react';
-import JBLoading from './Components/JBLoading.js';
-import { JBGridColumnDef, JBGridConfig, JBGridI18nConfig, JBGridStyles } from './types.js';
-import ContentError from './Components/content-error/ContentError.js';
-export type ContentProps = {
-    children:React.ReactNode | React.ReactNode[],
-    refreshBtnClick:()=>void,
-    config:JBGridConfig<any>,
-    isErrorOccurred:boolean,
-    styles:JBGridStyles,
-    isLoading:boolean,
-    setSortColumn:(column: JBGridColumnDef) => void,
-    i18n:JBGridI18nConfig,
-    errorComponent?:ReactNode,
-}
-function Content(props:ContentProps) {
-  const {refreshBtnClick,config,isErrorOccurred,styles,isLoading,setSortColumn,i18n} = props;
-  const ErrorComponent = props.errorComponent || <ContentError onRefreshBtnClick={refreshBtnClick} message={i18n.messages?.serverErrorText} title={i18n.messages?.serverErrorTitle} refreshButtonTitle={i18n.messages!.serverErrorRefreshButtonTitle}></ContentError>;
-
-  return (
-    <section key={'jb-grid-content'} className="jb-grid-content">
+import React, { type ReactNode } from 'react';
+import JBLoading from './Components/JBLoading.js';
+import type { JBGridI18nConfig } from './types.js';
+import ContentError from './Components/content-error/ContentError.js';
+export type ContentProps = {
+    children:React.ReactNode | React.ReactNode[],
+    refreshBtnClick:()=>void,
+    isErrorOccurred:boolean,
+    isLoading:boolean,
+    i18n:JBGridI18nConfig,
+    errorComponent?:ReactNode,
+    tableHeader?:ReactNode,
+}
+function Content(props:ContentProps) {
+  const {refreshBtnClick,isErrorOccurred,isLoading,i18n} = props;
+  const ErrorComponent = props.errorComponent || <ContentError onRefreshBtnClick={refreshBtnClick} message={i18n.messages?.serverErrorText} title={i18n.messages?.serverErrorTitle} refreshButtonTitle={i18n.messages!.serverErrorRefreshButtonTitle}></ContentError>;
+
+  return (
+    <section key={'jb-grid-content'} className={`jb-grid-content ${props.tableHeader ? "" : "without-table-header"}`}>
       {
         isErrorOccurred && 
                 ErrorComponent
       }
       {
         !isErrorOccurred &&
-                [
-                  <section className="table-header" key='table-header'>
-                    <div className="table-header-wrapper" style={{ ...styles.table.generalCols, ...styles.table.scrollIndent }}>
-                      {
-                        config.table.columns.map((item) => {
-                          return (
-                            <div onClick={() => setSortColumn(item)} key={item.name + '-' + item.id + '-' + "jb-grid-table-header"} title={item.name} className={'header-item ' + (item.sortable ? 'sortable-col' : '')}>
-                              <div className="caption-wrapper">{item.title}</div>
-                              {
-                                item.sort && (
-                                  <div className={"sort-icon-wrapper"}>
-                                    <svg className={'--' + item.sort.toLowerCase()} version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 31.479 31.479">
-                                      <path d="M26.477,10.274c0.444,0.444,0.444,1.143,0,1.587c-0.429,0.429-1.143,0.429-1.571,0l-8.047-8.047  v26.555c0,0.619-0.492,1.111-1.111,1.111c-0.619,0-1.127-0.492-1.127-1.111V3.813l-8.031,8.047c-0.444,0.429-1.159,0.429-1.587,0  c-0.444-0.444-0.444-1.143,0-1.587l9.952-9.952c0.429-0.429,1.143-0.429,1.571,0L26.477,10.274z" />
-                                    </svg>
-
-                                  </div>
-                                )}
-                            </div>
-                          );
-                        })
-                      }
-                    </div>
-                  </section>
-                  ,
+                [
+                  props.tableHeader && <section className="table-header" key='table-header'>{props.tableHeader}</section>
+                  ,
                   <section className="table-content" key='table-content'>
                     <div className="table-content-wrapper">
                       {props.children}
@@ -73,4 +49,4 @@ function Content(props:ContentProps) {
   );
 }
 
-export default observer(Content);
+export default Content;

package/react/lib/Footer.tsx

@@ -1,79 +1,52 @@
-import { observer } from 'mobx-react';
-import React, { type Ref } from 'react';
-import type JBGridViewModel from './JBGridViewModel.js';
-import CSS from './footer.css';
-import { injectCss } from 'jb-core';
-import { JBPagination } from './JBGrid.js';
-import type { JBPaginationWebComponent } from 'jb-grid';
-injectCss(CSS as unknown as string);
-type FooterProps = {
-    vm:JBGridViewModel<any>,
-    isFullscreen:boolean
-}
-function Footer(props:FooterProps) {
-  const {vm,isFullscreen} = props;
-  return (
-    <section key={'jb-grid-footer'} className="jb-grid-footer">
-      <section className="btn-wrapper-section">
-        {
-          isFullscreen !== null && isFullscreen !== undefined && (
-            <div className="btn full-screen-button" onClick={() => vm.onFullScreenBtnClicked(isFullscreen)}>
-              <svg xmlns="http://www.w3.org/2000/svg" version="1.0" x="0px" y="0px" viewBox="0 0 128 128" className={isFullscreen ? 'exit-full-screen-svg' : 'full-screen-svg'}>
-                <title>Full Screen Button</title>
-                <g className="arrow" transform={!isFullscreen ? '' : "translate(0, 0) rotate(180 30 30)"}>
-                  <path d="M47.979,41.795L26.466,20.292c-3.995-6.034,6.546-6.069,6.546-6.069h6.385c4.054-0.105,6.282-2.363,6.24-5.229   c-0.041-2.866-1.591-5.216-5.167-5.151H23.679C-0.4,2.575,0.342,20.363,0.755,24.486c0.02,0.208-0.015,0.375,0,0.502v0.025   l0.011,15.21c-0.029,2.556,1.211,5.834,4.501,6.265c3.329,0.434,6.025-2.22,6.06-4.774v-9.788v0.084   c-0.062-7.879,5.311-3.858,5.311-3.858l23.346,22.95c1.842,1.843,6.8,3.308,9.362,0.711C53.583,47.516,49.821,43.637,47.979,41.795   z"></path>
-                  <path d="M0.755,26.555c0,0,0.024-0.099,0-0.277v-0.004V26.555z"></path>
-                </g>
-                <g className="arrow" transform={!isFullscreen ? '' : "translate(0, 0) rotate(180 100 30)"}>
-                  <path d="M89.483,50.518l21.504-21.512c6.034-3.995,6.07,6.546,6.07,6.546v6.385c0.104,4.055,2.361,6.281,5.228,6.24   c2.867-0.04,5.217-1.59,5.152-5.167V26.219c1.266-24.08-16.521-23.337-20.645-22.924c-0.206,0.02-0.374-0.015-0.503,0h-0.024   l-15.21,0.011c-2.557-0.029-5.834,1.211-6.265,4.501c-0.436,3.329,2.219,6.025,4.773,6.06h9.789H99.27   c7.879-0.062,3.858,5.311,3.858,5.311L80.177,42.524c-1.842,1.842-3.309,6.801-0.711,9.363   C83.764,56.123,87.642,52.362,89.483,50.518z"></path>
-                  <path d="M104.723,3.294c0,0,0.101,0.024,0.279,0h0.003H104.723z"></path>
-                </g>
-                <g className="arrow" transform={!isFullscreen ? '' : "translate(0, 0) rotate(180 100 100)"}>
-                  <path d="M80.759,88.376l21.514,21.505c3.995,6.035-6.546,6.068-6.546,6.068H89.34c-4.054,0.106-6.282,2.364-6.24,5.23   c0.041,2.863,1.591,5.214,5.167,5.149h16.792c24.08,1.269,23.337-16.521,22.924-20.642c-0.02-0.21,0.017-0.377,0-0.503v-0.025   l-0.012-15.21c0.031-2.557-1.209-5.834-4.501-6.265c-3.327-0.436-6.023,2.219-6.06,4.772v9.79v-0.084   c0.062,7.879-5.312,3.856-5.312,3.856L88.753,79.068c-1.843-1.841-6.8-3.308-9.362-0.709   C75.153,82.656,78.916,86.534,80.759,88.376z"></path>
-                  <path d="M127.982,103.617c0,0-0.022,0.098,0,0.276v0.006V103.617z"></path>
-                </g>
-                <g className="arrow" transform={!isFullscreen ? '' : "translate(0, 0) rotate(180 30 100)"}>
-                  <path d="M43.481,79.65l-21.503,21.514c-6.035,3.995-6.07-6.547-6.07-6.547v-6.384c-0.104-4.054-2.362-6.283-5.229-6.241   c-2.865,0.041-5.215,1.592-5.151,5.168v16.792c-1.267,24.078,16.521,23.338,20.643,22.924c0.208-0.02,0.375,0.015,0.503,0h0.025   l15.21-0.011c2.557,0.028,5.833-1.213,6.264-4.501c0.436-3.33-2.219-6.026-4.773-6.06h-9.789h0.084   c-7.879,0.062-3.857-5.312-3.857-5.312l22.949-23.347c1.843-1.844,3.31-6.8,0.711-9.363C49.201,74.045,45.323,77.809,43.481,79.65z   "></path>
-                  <path d="M28.242,126.876c0,0-0.1-0.024-0.278,0h-0.004H28.242z"></path>
-                </g>
-              </svg>
-            </div>
-          )}
-        <div className="btn refresh-btn" onClick={() => vm.refreshBtnClick()}>
-          <svg id="Capa_1" x="0px" y="0px" viewBox="0 0 305.836 305.836" ref={vm.elements.refreshIcon as Ref<SVGSVGElement>}>
-            <title>Refresh Data</title>
-            <g>
-              <path d="M152.924,300.748c84.319,0,152.912-68.6,152.912-152.918c0-39.476-15.312-77.231-42.346-105.564   c0,0,3.938-8.857,8.814-19.783c4.864-10.926-2.138-18.636-15.648-17.228l-79.125,8.289c-13.511,1.411-17.999,11.467-10.021,22.461   l46.741,64.393c7.986,10.992,17.834,12.31,22.008,2.937l7.56-16.964c12.172,18.012,18.976,39.329,18.976,61.459   c0,60.594-49.288,109.875-109.87,109.875c-60.591,0-109.882-49.287-109.882-109.875c0-19.086,4.96-37.878,14.357-54.337   c5.891-10.325,2.3-23.467-8.025-29.357c-10.328-5.896-23.464-2.3-29.36,8.031C6.923,95.107,0,121.27,0,147.829   C0,232.148,68.602,300.748,152.924,300.748z" />
-            </g>
-          </svg>
-        </div>
-      </section>
-      <section className="page-section">
-        <section className="page-size-section" title={vm.i18n.messages!.pageItemCount}>
-          <select value={vm.config.page.size} className="page-size-select" onChange={(e) => vm.onPageSizeChange(e)}>
-            <option value={20}>{vm.paginationDisplayNumbers.pageSizes[0]}</option>
-            <option value={30}>{vm.paginationDisplayNumbers.pageSizes[1]}</option>
-            <option value={50}>{vm.paginationDisplayNumbers.pageSizes[2]}</option>
-            <option value={100}>{vm.paginationDisplayNumbers.pageSizes[3]}</option>
-          </select>
-        </section>
-        <section className="items-information-section">
-          <span>{vm.paginationDisplayNumbers.startItemIndex}</span>
-          <span>-</span>
-          <span> {vm.paginationDisplayNumbers.endItemIndex} </span>
-          <span> &nbsp;{vm.i18n.messages!.from}</span>
-          <span title={vm.i18n.messages!.currentAvailableItem}>&nbsp; {vm.paginationDisplayNumbers.totalItemsCount} &nbsp;</span>
-
-        </section>
-        <section className="navigation-section nav-btn">
-          <nav>
-            <JBPagination pageIndex={vm.config.page.index} max={vm.config.page.totalPages} min={1} onChange={(e)=>vm.goToPage((e.target as JBPaginationWebComponent).pageIndex)} showPersianNumber={vm.i18n.showPersianNumber}/>
-          </nav>
-        </section>
-      </section>
-
-    </section>
-  );
-}
-
-export default observer(Footer) ;
+import React from 'react';
+import type JBGridViewModel from './JBGridViewModel.js';
+import CSS from './footer.css?inline';
+import { injectCss } from 'jb-core';
+import { JBFullscreenIcon, JBPagination, JBPaginationInfo, JBRefreshIcon } from './JBGrid.js';
+import type { JBPaginationWebComponent } from 'jb-grid';
+import { JBButton } from 'jb-button/react';
+injectCss(CSS as unknown as string);
+type FooterProps = {
+    vm:JBGridViewModel,
+    isFullscreen:boolean
+}
+function Footer(props:FooterProps) {
+  const {vm,isFullscreen} = props;
+  return (
+    <section key={'jb-grid-footer'} className="jb-grid-footer">
+      <section className="btn-wrapper-section">
+        {
+          isFullscreen !== null && isFullscreen !== undefined && (
+            <JBButton className="btn full-screen-button" variant="text" onClick={() => vm.onFullScreenBtnClicked(isFullscreen)}>
+              <JBFullscreenIcon state={isFullscreen ? "exit" : "enter"} />
+            </JBButton>
+          )}
+        <JBButton className="btn refresh-btn" variant="text" onClick={() => vm.refreshBtnClick()}>
+          <JBRefreshIcon ref={vm.elements.refreshIcon} />
+        </JBButton>
+      </section>
+      <section className="page-section">
+        <JBPaginationInfo
+          pageSize={vm.page.size}
+          pageSizes={[20, 30, 50, 100]}
+          startItemIndex={vm.metaData.startItemIndex}
+          endItemIndex={vm.metaData.endItemIndex}
+          totalItemsCount={vm.metaData.totalItemsCount}
+          pageItemCountTitle={vm.i18n.messages!.pageItemCount}
+          fromLabel={vm.i18n.messages!.from}
+          currentAvailableItemTitle={vm.i18n.messages!.currentAvailableItem}
+          showPersianNumber={vm.i18n.showPersianNumber}
+          onPageSizeChange={(e) => vm.setPageSize(e.detail.pageSize)}
+        />
+        <section className="navigation-section nav-btn">
+          <nav>
+            <JBPagination pageIndex={vm.page.index} max={vm.page.totalPages} min={1} onChange={(e)=>vm.goToPage((e.target as JBPaginationWebComponent).pageIndex)} showPersianNumber={vm.i18n.showPersianNumber}/>
+          </nav>
+        </section>
+      </section>
+
+    </section>
+  );
+}
+
+export default Footer;

package/react/lib/Header.tsx

@@ -1,35 +1,21 @@
 import React, { ReactNode } from 'react';
-import JBGridViewModel from './JBGridViewModel.js';
-import { JBSearchbarWebComponent } from 'jb-searchbar';
-import 'jb-searchbar/react/lib/module-declaration.js';
-import { observer } from 'mobx-react';
-import CSS from './header.css';
+import type JBGridViewModel from './JBGridViewModel.js';
+import CSS from './header.css?inline';
 import { injectCss } from 'jb-core';
 
 injectCss(CSS as unknown as string);
 
 type HeaderProps = {
-  vm: JBGridViewModel<any>,
+  vm: JBGridViewModel,
   title: string,
-  searchbarConfig: any,
+  searchbarComponent?: ReactNode,
   headerEndComponents?: React.ReactNode[] | ReactNode
 }
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace JSX {
-    interface IntrinsicElements {
-      'jb-searchbar': JBSearchbarType;
-    }
-    interface JBSearchbarType extends React.DetailedHTMLProps<React.HTMLAttributes<JBSearchbarWebComponent>, JBSearchbarWebComponent> {
-      class?: string,
-    }
-  }
-}
 function Header(props: HeaderProps) {
   const { vm } = props;
   return (
     <section key={'jb-grid-header'} className="jb-grid-header">
-      <section className={"main-section " + (vm.config.states.headerSection == "MAIN" ? "" : "hidden")}>
+      <section className={`main-section ${vm.headerSection == "MAIN" ? "" : "hidden"}`}>
         <section className="jb-grid-title">{props.title}</section>
         <section className="button-container">
           {
@@ -44,9 +30,10 @@ function Header(props: HeaderProps) {
           }
           {
 
-            props.searchbarConfig && (
+            props.searchbarComponent && (
               <div className="filter-btn btn" onClick={() => { vm.openSearchHeaderSection(); }}>
                 <svg xmlns="http://www.w3.org/2000/svg" height="30" viewBox="0 0 24 24" fill="none">
+                  <title>filter button</title>
                   <g>
                     <path d="M4.00001 3C3.62123 3 3.27497 3.214 3.10558 3.55279C2.93619 3.89157 2.97274 4.29698 3.20001 4.6L8.80001 12.0667C8.92983 12.2398 9.00001 12.4503 9.00001 12.6667V20C9.00001 20.3466 9.17946 20.6684 9.47427 20.8507C9.76909 21.0329 10.1372 21.0494 10.4472 20.8944L14.4472 18.8944C14.786 18.725 15 18.3788 15 18V12.6667C15 12.4503 15.0702 12.2398 15.2 12.0667L20.8 4.6C21.0273 4.29698 21.0638 3.89157 20.8944 3.55279C20.725 3.214 20.3788 3 20 3H4.00001Z" />
                   </g>
@@ -55,17 +42,17 @@ function Header(props: HeaderProps) {
             )}
         </section>
       </section>
-      <section className={"search-section " + (vm.config.states.headerSection == "SEARCH" ? "" : "hidden")}>
+      <section className={`search-section ${vm.headerSection == "SEARCH" ? "" : "hidden"}`}>
         <div className="close-btn" onClick={() => { vm.openMainHeaderSection(); }}>
           <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 224.512 224.512">
+            <title>close filter button</title>
             <g>
               <polygon points="224.507,6.997 217.521,0 112.256,105.258 6.998,0 0.005,6.997 105.263,112.254    0.005,217.512 6.998,224.512 112.256,119.24 217.521,224.512 224.507,217.512 119.249,112.254  " />
             </g>
           </svg>
         </div>
         <div className="search-bar-wrapper">{
-          props.searchbarConfig &&
-          <jb-searchbar ref={vm.elements.searchbar}></jb-searchbar>
+          props.searchbarComponent
         }
         </div>
       </section>
@@ -73,4 +60,4 @@ function Header(props: HeaderProps) {
   );
 }
 
-export default observer(Header);
+export default Header;