jb-grid 0.2.4 → 0.3.1

package/react/dist/JBGridData.d.ts

@@ -10,7 +10,7 @@ declare class JBGridData<T extends AnyObject> implements JBGridConfigInterface<T
      * @deprecated provide it as a prop
      */
     customComponents: {
-        headerEnd: any[];
+        headerEnd: never[];
     };
 }
 export { JBGridData };

package/react/dist/JBGridViewModel.d.ts

@@ -4,10 +4,10 @@ import type { JBSearchbarWebComponent, JBSearchbarValue } from 'jb-searchbar';
 declare class JBGridViewModel<T extends AnyObject> {
     styles: JBGridStyles;
     elements: {
-        refreshIcon: React.RefObject<SVGElement>;
-        searchbar: React.RefObject<JBSearchbarWebComponent>;
+        refreshIcon: React.RefObject<SVGElement | null>;
+        searchbar: React.RefObject<JBSearchbarWebComponent | null>;
     };
-    JBGridComponentDom: RefObject<HTMLDivElement>;
+    JBGridComponentDom: RefObject<HTMLDivElement | null>;
     gridWrapperElement: HTMLElement | null;
     isLoading: boolean;
     dataBridge: JBGridBridgeInterface;
@@ -17,7 +17,7 @@ declare class JBGridViewModel<T extends AnyObject> {
     callBacks: JBGridCallbacks;
     config: JBGridConfig<T>;
     i18n: JBGridI18nConfig;
-    constructor(onFullscreenChange: (isFullScreen: boolean) => void, config: JBGridConfigInterface<T>, bridge: JBGridBridgeClassInterface);
+    constructor(onFullscreenChange: ((isFullScreen: boolean) => void) | undefined, config: JBGridConfigInterface<T>, bridge: JBGridBridgeClassInterface);
     setI18n(newValue: JBGridI18nConfig): void;
     InitGrid(): void;
     onComponentDidMount(searchbarConfig: SearchbarConfig | null): void;
@@ -63,5 +63,5 @@ declare class JBGridViewModel<T extends AnyObject> {
     toPersianNumber(input: string | number): string | number;
 }
 export default JBGridViewModel;
-export declare const JBGridContext: React.Context<JBGridViewModel<AnyObject>>;
-export declare const useJBGridVM: () => JBGridViewModel<AnyObject>;
+export declare const JBGridContext: React.Context<JBGridViewModel<AnyObject> | null>;
+export declare const useJBGridVM: () => JBGridViewModel<AnyObject> | null;

package/react/dist/types.d.ts

@@ -1,4 +1,4 @@
-import { FilterColumn, JBSearchbarValue } from "jb-searchbar";
+import type { FilterItem, JBSearchbarValue } from "jb-searchbar";
 export type JBGridRowDataDetail = {
     isDeleting: boolean;
     isDeleted: boolean;
@@ -41,7 +41,7 @@ export type JBGridFilter = {
     value: JBSearchbarValue;
 };
 export type SearchbarConfig = {
-    columnList: FilterColumn[];
+    columnList: FilterItem[];
     searchOnChange?: boolean;
 };
 export interface JBGridBridgeInterface {

package/react/lib/Components/Cell.tsx

@@ -1,22 +1,15 @@
-import React from 'react';
-import CSS from './cell.css';
-import { injectCss } from 'jb-core';
+import React, { type ForwardedRef } from 'react';
+import type {JBCellAttributes} from './module-declaration.js';
+import type { JBCellWebComponent } from 'jb-grid';
 
-type CellProps = {
-    children?: React.ReactNode | React.ReactNode[],
-    label?: string,
-    className?: string,
-    flex?:boolean;
+type RowProps = JBCellAttributes & {
+  ref?:ForwardedRef<JBCellWebComponent | null>,
+  name:string,
+  label?:string,
 }
-injectCss(CSS as unknown as string);
-function Cell(props: CellProps) {
-  const { children, label, className, flex } = props;
+export function JBCell(props:RowProps) {
+  const { children, ...otherProps} = props;
   return (
-    <div className={"jb-grid-table-cell " + (className ? className : '')} title={label}>
-      <div className="cell-label">{label}</div>
-      <div className={"cell-value " + (flex?'flex-cell':'')}>{children}</div>
-    </div>
+    <jb-cell slot="cell" {...otherProps}>{children}</jb-cell>
   );
 }
-
-export { Cell };

package/react/lib/Components/ExpandRow.tsx

@@ -1,19 +1,10 @@
-import React, { type PropsWithChildren } from 'react';
-import CSS from './expand-row.css';
-import { injectCss } from 'jb-core';
+import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
 
-injectCss(CSS as unknown as string);
-function ExpandRow(props:Props) {
+export function ExpandRow(props:Props) {
+    const {children,...otherProps} = props;
     return (
-        <section className={'jb-grid-expand-row' + (props.show?'':' --hidden')}>
-            <div className={'expand-row-content' + (props.show?'':' --hidden')}>
-                {props.children}
-            </div>
-        </section>
+       <div slot="expand" {...otherProps}>{children}</div>
     );
 }
-type Props= PropsWithChildren< {
-    show:boolean,
-}>
+type Props= PropsWithChildren<React.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>,HTMLDivElement>>
 
-export {ExpandRow};

package/react/lib/Components/ExpandToggle.tsx

@@ -0,0 +1,10 @@
+import React, { type PropsWithChildren }  from 'react';
+import type {JBExpandToggleAttributes} from './module-declaration.js';
+
+type ToggleProps = JBExpandToggleAttributes 
+export function JBExpandToggle(props:ToggleProps) {
+  const { children, ...otherProps} = props;
+  return (
+    <jb-expand-toggle {...otherProps}>{children}</jb-expand-toggle>
+  );
+}

package/react/lib/Components/Pagination.tsx

@@ -2,28 +2,13 @@ import React, { type DetailedHTMLProps, type FormEventHandler, type HTMLAttribut
 import  'jb-grid'
 import type {JBPaginationWebComponent} from 'jb-grid'
 import type { JBElementStandardProps } from 'jb-core/react';
+import type { JBPaginationDirectAttributeProps } from './types';
+import  './module-declaration.js';
 
 export function JBPagination(props:Props){
   const {pageIndex, max, min, onChange,showPersianNumber, ...otherProps } = props;
   return(<jb-pagination pageIndex={pageIndex} max={max} min={min} onChange={onChange} showPersianNumber={showPersianNumber} {...otherProps}></jb-pagination>)
 }
 
-type JBPaginationAttributes = DetailedHTMLProps<HTMLAttributes<JBPaginationWebComponent>, JBPaginationWebComponent> & DirectAttributeProps
-declare module "react" {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace JSX {
-    interface IntrinsicElements {
-      'jb-pagination': JBPaginationAttributes;
-    }
-  }
-}
-
-type DirectAttributeProps = {
-  pageIndex?:number,
-  max?:number,
-  min?:number,
-  onChange?:FormEventHandler<JBPaginationWebComponent>
-  showPersianNumber?:boolean,
-}
 
-export type Props = JBElementStandardProps<JBPaginationWebComponent, keyof DirectAttributeProps> & DirectAttributeProps
+export type Props = JBElementStandardProps<JBPaginationWebComponent, keyof JBPaginationDirectAttributeProps> & JBPaginationDirectAttributeProps

package/react/lib/Components/Row.tsx

@@ -1,21 +1,15 @@
-import React from 'react';
-import CSS from './row.css';
-import { useJBGridVM } from '../JBGridViewModel.js';
-import { injectCss } from 'jb-core';
+import React, { type ForwardedRef } from 'react';
+import type {JBRowAttributes} from './module-declaration.js';
+import type { JBCellWebComponent, RowTemplate } from 'jb-grid';
 
-injectCss(CSS as unknown as string);
-type RowProps = Omit<React.ComponentPropsWithoutRef<'div'>,"style">
-function Row(props:RowProps) {
-  const { children, className, ...otherProps} = props;
-  const vm = useJBGridVM();
-  if(!vm){
-    return <React.Fragment></React.Fragment>;
-  }
+type RowProps = JBRowAttributes & {
+  ref?:ForwardedRef<JBCellWebComponent | null>,
+  rowTemplate:RowTemplate,
+  isOpen?:boolean
+}
+export function JBRow(props:RowProps) {
+  const { children, ...otherProps} = props;
   return (
-    <div className={`jb-grid-table-row ${className??''}`} style={{gridTemplateColumns:vm.styles.table.generalCols.gridTemplateColumns}} {...otherProps}>
-      {children}
-    </div>
+    <jb-row {...otherProps}>{children}</jb-row>
   );
 }
-
-export {Row};

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

@@ -0,0 +1,20 @@
+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>
+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;
+    }
+  }
+}

package/react/lib/Components/types.ts

@@ -0,0 +1,10 @@
+import type { JBPaginationWebComponent } from "jb-grid"
+import type { FormEventHandler } from "react"
+
+export type JBPaginationDirectAttributeProps = {
+  pageIndex?:number,
+  max?:number,
+  min?:number,
+  onChange?:FormEventHandler<JBPaginationWebComponent>
+  showPersianNumber?:boolean,
+}

package/react/lib/Content.tsx

@@ -16,7 +16,7 @@ export type ContentProps = {
 }
 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>;
+  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">

package/react/lib/Footer.tsx

@@ -4,7 +4,7 @@ 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 '../../web-component/dist/index.js';
+import type { JBPaginationWebComponent } from 'jb-grid';
 injectCss(CSS as unknown as string);
 type FooterProps = {
     vm:JBGridViewModel<any>,
@@ -49,7 +49,7 @@ function Footer(props:FooterProps) {
         </div>
       </section>
       <section className="page-section">
-        <section className="page-size-section" title={vm.i18n.messages.pageItemCount}>
+        <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>
@@ -61,8 +61,8 @@ function Footer(props:FooterProps) {
           <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>
+          <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">

package/react/lib/JBGrid.tsx

@@ -2,6 +2,7 @@ import React, { type ReactNode, useEffect } from 'react';
 import JBGridViewModel, { JBGridContext } from './JBGridViewModel.js';
 import { observer } from 'mobx-react';
 import CSS from './jb-grid.css';
+import BlobCSS from './Components/blob-loading.css';
 export { JBGridData } from './JBGridData.js';
 import 'jb-searchbar';
 import type { AnyObject, JBGridBridgeClassInterface, JBGridConfig, JBGridI18nConfig, SearchbarConfig } from './types.js';
@@ -12,9 +13,10 @@ import { useInstance } from 'jb-core/react';
 import { injectCss } from 'jb-core';
 
 export {JBPagination, type Props as PaginationProps} from './Components/Pagination.js';
-export { Row } from './Components/Row.js';
-export { Cell } from './Components/Cell.js';
+export { JBRow } from './Components/Row.js';
+export { JBCell } from './Components/Cell.js';
 export { ExpandRow } from './Components/ExpandRow.js';
+export { JBExpandToggle } from './Components/ExpandToggle.js';
 export * from './types.js';
 export type Props<T extends AnyObject> = {
   searchbarConfig?: SearchbarConfig | null | undefined,
@@ -32,6 +34,7 @@ export type Props<T extends AnyObject> = {
 }
 
 injectCss(CSS as unknown as string);
+injectCss(BlobCSS as unknown as string);
 
 function JBGridComponent<T extends AnyObject>(props: Props<T>) {
   const vm = useInstance(JBGridViewModel<AnyObject>, [props.onFullscreenChange, props.config, props.bridge]);

package/react/lib/JBGridViewModel.ts

@@ -32,7 +32,7 @@ class JBGridViewModel<T extends AnyObject> {
     searchbar: React.createRef<JBSearchbarWebComponent>()
   }
   //the whole component DOM store(referenced) in this variable
-  JBGridComponentDom: RefObject<HTMLDivElement> = React.createRef();
+  JBGridComponentDom: RefObject<HTMLDivElement | null> = React.createRef();
   //keep wrapper DOM element for some purpose like wrapper changing in full screen functionality
   gridWrapperElement: HTMLElement | null = null;
   //when we start fetch new data from server it get true until load data is finished
@@ -51,8 +51,8 @@ class JBGridViewModel<T extends AnyObject> {
     onFullscreenChange: () => { console.error('you must set onFullscreenChange callback to jb-grid component if you want it to work'); }
   }
   config: JBGridConfig<T>;
-  i18n: JBGridI18nConfig;
-  constructor(onFullscreenChange: (isFullScreen: boolean) => void, config: JBGridConfigInterface<T>, bridge: JBGridBridgeClassInterface) {
+  i18n!: JBGridI18nConfig;
+  constructor(onFullscreenChange: ((isFullScreen: boolean) => void) | undefined, config: JBGridConfigInterface<T>, bridge: JBGridBridgeClassInterface) {
     makeObservable(this, {
       styles: observable,
       isLoading: observable,
@@ -138,7 +138,7 @@ class JBGridViewModel<T extends AnyObject> {
   }
   initFilter(searchbarConfig: SearchbarConfig | null) {
     if (searchbarConfig && this.elements.searchbar.current) {
-      this.elements.searchbar.current.columnList = searchbarConfig.columnList;
+      this.elements.searchbar.current.filterList = searchbarConfig.columnList;
       this.elements.searchbar.current.searchOnChange = searchbarConfig.searchOnChange === true ? searchbarConfig.searchOnChange : false;
       this.elements.searchbar.current.addEventListener('search', (e) => {
         this.elements.searchbar.current!.isLoading = true;
@@ -171,7 +171,7 @@ class JBGridViewModel<T extends AnyObject> {
       }
     });
     this.styles.table.generalCols.gridTemplateColumns = gridTemplateColumns;
-    this.styles.table.fullWidthCol.gridColumn = "1 / " + (this.config.table.columns.length + 1);
+    this.styles.table.fullWidthCol.gridColumn = `1 / ${this.config.table.columns.length + 1}`;
   }
   getScrollbarWidth() {
     const outer = document.createElement("div");
@@ -370,7 +370,7 @@ class JBGridViewModel<T extends AnyObject> {
     this.JBGridComponentDom;
     const child = document.createElement('div');
     child.innerHTML = "";
-    this.gridWrapperElement = this.JBGridComponentDom!.current.parentElement!;
+    this.gridWrapperElement = this.JBGridComponentDom!.current!.parentElement!;
     container.append(this.JBGridComponentDom.current as Node);
     //TODO:call on full screen call back
   }
@@ -378,7 +378,7 @@ class JBGridViewModel<T extends AnyObject> {
     const container = document.querySelector('.jb-grid-full-screen-container') as HTMLDivElement;
     if (this.gridWrapperElement) {
       //put grid element back to their orginal place
-      this.gridWrapperElement.append(this.JBGridComponentDom.current);
+      this.gridWrapperElement.append(this.JBGridComponentDom.current!);
       //remove added temp fullscreen container
     }
     container[0].remove();
@@ -402,9 +402,9 @@ class JBGridViewModel<T extends AnyObject> {
   changePageNumberToInput() {
     //when user click on page number
     //TODO: change page Input method to text input
-    const pageNumber: string | null = prompt(this.i18n.messages.EnterPageNumberMessage, this.config.page.totalPages.toString());
-    if (pageNumber && parseInt(pageNumber) > 0 && parseInt(pageNumber) < this.config.page.totalPages) {
-      this.goToPage(parseInt(pageNumber));
+    const pageNumber: string | null = prompt(this.i18n.messages?.EnterPageNumberMessage, this.config.page.totalPages.toString());
+    if (pageNumber && Number(pageNumber) > 0 && Number(pageNumber) < this.config.page.totalPages) {
+      this.goToPage(Number(pageNumber));
     }
   }
   openSearchHeaderSection() {
@@ -438,7 +438,7 @@ class JBGridViewModel<T extends AnyObject> {
     if (this.i18n.showPersianNumber) {
       const inputString = input.toString();
       const correctedString = inputString.replace(/[0-9]/g, function (word) {
-        return String.fromCharCode(1776 + parseInt(word));
+        return String.fromCharCode(1776 + Number(word));
       });
       return correctedString;
     }

package/react/lib/types.ts

@@ -1,4 +1,4 @@
-import { FilterColumn, JBSearchbarValue } from "jb-searchbar";
+import type { FilterItem, JBSearchbarValue } from "jb-searchbar";
 
 
 // export type JBGridRowData = {
@@ -52,7 +52,7 @@ export type JBGridFilter = {
     value: JBSearchbarValue
 }
 export type SearchbarConfig = {
-    columnList: FilterColumn[],
+    columnList: FilterItem[],
     searchOnChange?: boolean
 }
 export interface JBGridBridgeInterface {

package/react/package.json

@@ -16,7 +16,7 @@
     "react",
     "mobx"
   ],
-  "version": "0.22.0",
+  "version": "0.25.0",
   "bugs": "https://github.com/javadbat/jb-grid/issues",
   "license": "MIT",
   "files": [

package/react/tsconfig.json

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "baseUrl": ".",
+        
         "rootDir": "./lib",
         "declaration": true,
         "declarationDir": "./dist"

package/react/lib/Components/expand-row.css

@@ -1,38 +0,0 @@
-@custom-media --tablet-until (max-width: 768px);
-
-.jb-grid-wrapper .jb-grid-content{
-    .jb-grid-expand-row{
-        width: 100%;
-        min-height: 4rem;
-        padding-block: 1rem;
-        padding-inline: 2rem;
-        border-bottom: 1px solid #ebebeb;
-        box-sizing: border-box;
-        overflow: auto;
-        transition: all 500ms 0s linear;
-        max-height: 100%;
-        /* TODO: change this to nth-child(even of .jb-grid-expand-row) when supported in future. Done:) i just comment it for test
-         &:nth-of-type(even) {
-             background: #f9f9f9;
-         } */
-        @media (--tablet-until){
-            border-bottom:none;
-        }
-        &:nth-child(even of .jb-grid-expand-row){
-            background: #f9f9f9;
-        }
-        &.--hidden{
-            max-height: 0;
-            padding-block: 0;
-            min-height: 0;
-        }
-
-        .expand-row-content{
-            transition: all 500ms 0s ease;
-            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
-            &.--hidden{
-                clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 0%);
-            }
-        }
-    }
-}

package/react/lib/Components/row.css

@@ -1,25 +0,0 @@
-@custom-media --tablet-until (max-width: 768px);
-
-.jb-grid-wrapper .jb-grid-content{
-    .jb-grid-table-row {
-        width: 100%;
-        display: grid;
-        grid-template-columns: auto;
-        background-color: #fff;
-        box-sizing: border-box;
-        grid-auto-rows: minmax(48px, auto);
-        @media(--tablet-until) {
-            grid-template-columns: auto !important;
-            grid-template-rows: auto;
-            border-radius: 24px;
-            box-shadow: 0px 0px 1px 0px #d8d8d8;
-        }
-    
-        &:nth-of-type(even) {
-            background: var(--base-grid-row-color);
-            @media(--tablet-until) {
-                background: #fff;
-            }
-        }
-    }
-}