jb-grid 0.4.0 → 0.5.0

package/react/dist/JBGridData.d.ts

@@ -1,11 +1,7 @@
-import { JBGridConfigStates, JBGridDataPage, JBGridTableConfig, JBGridCallbackConfig, JBGridDataConfig, JBGridConfigInterface, AnyObject } from './types.js';
+import { JBGridConfigStates, JBGridTableConfig, JBGridConfigInterface, AnyObject } from './types.js';
 declare class JBGridData<T extends AnyObject> implements JBGridConfigInterface<T> {
-    constructor();
     table: JBGridTableConfig;
-    data: JBGridDataConfig<T>;
-    page: JBGridDataPage;
     states: JBGridConfigStates;
-    callbacks: JBGridCallbackConfig<any>;
     /**
      * @deprecated provide it as a prop
      */

package/react/dist/JBGridViewModel.d.ts

@@ -1,44 +1,48 @@
 import React, { type RefObject } from 'react';
-import type { AnyObject, JBGridBridgeClassInterface, JBGridBridgeInterface, JBGridCallbacks, JBGridColumnDef, JBGridConfig, JBGridConfigInterface, JBGridFilter, JBGridI18nConfig, JBGridResponseData, JBGridRowData, JBGridStyles, SearchbarConfig } from './types.js';
-import type { JBSearchbarWebComponent, JBSearchbarValue } from 'jb-searchbar';
+import type { AnyObject, JBGridCallbacks, JBGridColumnDef, JBGridConfig, JBGridI18nConfig, JBGridPaginationMeta, JBGridRowData, JBGridStyles } from './types.js';
+type StateChangeCallback = (() => void) | undefined;
+export type JBGridState<T extends AnyObject> = {
+    config: JBGridConfig<T>;
+    data: JBGridRowData<T>[];
+    pageIndex: number;
+    pageSize: number;
+    totalPages: number;
+    metaData: JBGridPaginationMeta;
+};
 declare class JBGridViewModel<T extends AnyObject> {
+    #private;
     styles: JBGridStyles;
     elements: {
         refreshIcon: React.RefObject<SVGElement | null>;
-        searchbar: React.RefObject<JBSearchbarWebComponent | null>;
     };
     JBGridComponentDom: RefObject<HTMLDivElement | null>;
     gridWrapperElement: HTMLElement | null;
-    isLoading: boolean;
-    dataBridge: JBGridBridgeInterface;
-    paginationDebounce: any;
-    isErrorOccurred: boolean;
-    filter: JBGridFilter;
     callBacks: JBGridCallbacks;
     config: JBGridConfig<T>;
+    data: JBGridRowData<T>[];
+    page: {
+        index: number;
+        size: number;
+        totalPages: number;
+    };
+    metaData: JBGridPaginationMeta;
     i18n: JBGridI18nConfig;
-    constructor(onFullscreenChange: ((isFullScreen: boolean) => void) | undefined, config: JBGridConfigInterface<T>, bridge: JBGridBridgeClassInterface);
-    setI18n(newValue: JBGridI18nConfig): void;
+    constructor(callBacks: JBGridCallbacks | undefined, config: JBGridConfig<T>, onStateChange?: () => void);
+    bindMethods(): void;
+    setStateChangeCallback(callback: StateChangeCallback): void;
+    setCallbacks(callBacks: JBGridCallbacks | undefined): void;
+    setGridState(state: JBGridState<T>): void;
+    notifyStateChange(): void;
+    setI18n(newValue: JBGridI18nConfig, notifyStateChange?: boolean): void;
     InitGrid(): void;
-    onComponentDidMount(searchbarConfig: SearchbarConfig | null): void;
-    mergeObject(inputConfig: JBGridConfig<any>, defaultConfig: JBGridConfig<any>): JBGridConfig<any>;
-    sendFirstRequest(): void;
-    initFilter(searchbarConfig: SearchbarConfig | null): void;
     InitSize(): void;
     getScrollbarWidth(): number;
-    fetchGridData(): Promise<unknown>;
-    onFetchSuccess(data: JBGridResponseData<T>): void;
-    standardData(data: AnyObject[]): Promise<JBGridRowData<T>[]>;
-    CreateRequestBody(): any;
     goToFirstPage(): void;
     refreshBtnClick(): void;
     playRefreshBtnAnimation(): Animation;
     stopRefreshBtnAnimation(anime: Animation): void;
-    goToPage(destinationPageIndex: number): Promise<unknown>;
-    debounce(func: (...args: any[]) => any, delay: number): (...inputs: any[]) => Promise<unknown>;
-    refreshData(): Promise<void>;
-    onSearch(filterList: JBSearchbarValue): Promise<unknown>;
-    onPageSizeChange(e: any): void;
+    goToPage(destinationPageIndex: number): void;
+    onPageSizeChange(e: React.ChangeEvent<HTMLSelectElement>): void;
     onFullScreenBtnClicked(currentValue: boolean): void;
     onFullscreenChanged(newValue: boolean): void;
     fullScreenGrid(): void;
@@ -47,8 +51,6 @@ declare class JBGridViewModel<T extends AnyObject> {
     changePageNumberToInput(): void;
     openSearchHeaderSection(): void;
     openMainHeaderSection(): void;
-    showErrorPanel(): void;
-    hideErrorPanel(): void;
     get paginationDisplayNumbers(): {
         currentPage: string | number;
         nextPage: string | number;
@@ -61,6 +63,7 @@ declare class JBGridViewModel<T extends AnyObject> {
         pageSizes: (string | number)[];
     };
     toPersianNumber(input: string | number): string | number;
+    private createConfig;
 }
 export default JBGridViewModel;
 export declare const JBGridContext: React.Context<JBGridViewModel<AnyObject> | null>;

package/react/dist/types.d.ts

@@ -1,4 +1,3 @@
-import type { FilterItem, JBSearchbarValue } from "jb-searchbar";
 export type JBGridRowDataDetail = {
     isDeleting: boolean;
     isDeleted: boolean;
@@ -36,25 +35,10 @@ export type JBGridResponseData<T extends AnyObject> = {
     totalPages: number;
     content: JBGridRowData<T>[];
 };
-export type JBGridFilter = {
-    config: SearchbarConfig | null;
-    value: JBSearchbarValue;
-};
-export type SearchbarConfig = {
-    columnList: FilterItem[];
-    searchOnChange?: boolean;
-};
-export interface JBGridBridgeInterface {
-    mapServerResponseDataToGridData: (data: any) => JBGridResponseData<any>;
-    getData: (data: JBGridConfigRequestParams, requestBody: any) => Promise<any>;
-    createRequestBody: (page: JBGridDataPage, filter?: JBSearchbarValue, sortColumn?: JBGridColumnDef | null, requestConfig?: JBGridConfigRequestParams) => any;
-}
-type ClassBuilder<I, Args extends any[] = any[]> = new (...args: Args) => I;
-export type JBGridBridgeClassInterface = ClassBuilder<JBGridBridgeInterface, []>;
-export type JBGridDataPage = {
-    index: number;
-    size: number;
-    totalPages: number;
+export type JBGridPaginationMeta = {
+    startItemIndex: number;
+    endItemIndex: number;
+    totalItemsCount: number;
 };
 export type JBGridColumnDef = {
     width?: string | number;
@@ -64,20 +48,6 @@ export type JBGridColumnDef = {
     title: string;
     name: string;
 };
-export type JBGridConfigRequestParams = {
-    method?: "POST" | "GET";
-    url?: string;
-    [key: string]: any;
-};
-export type JBGridDataConfig<T extends AnyObject> = {
-    data: JBGridRowData<T>[];
-    requestParams: JBGridConfigRequestParams;
-    metaData: {
-        startItemIndex: number;
-        endItemIndex: number;
-        totalItemsCount: number;
-    };
-};
 export type JBGridTableConfig = {
     columns: JBGridColumnDef[];
 };
@@ -85,10 +55,6 @@ export type JBGridConfigStates = {
     headerSection: 'MAIN' | "SEARCH";
     isFullScreen: boolean;
 };
-export type JBGridCallbackConfig<T extends AnyObject> = {
-    onDataStandardizing: ((data: JBGridRowData<AnyObject>[]) => JBGridRowData<T>[]) | (<T extends AnyObject>(data: JBGridRowData<AnyObject>[]) => Promise<JBGridRowData<T>[]>) | null | undefined;
-    onPageIndexChange: ((newPageIndex: number) => unknown) | null | undefined;
-};
 export type JBGridI18nMessage = {
     serverErrorText?: string;
     serverErrorTitle?: string;
@@ -102,21 +68,23 @@ export type JBGridI18nConfig = {
     messages?: JBGridI18nMessage;
     showPersianNumber?: boolean;
 };
-export type ActionDispatchers = Readonly<{
-    refreshData: () => Promise<void>;
-    fullScreenGrid: () => void;
-    exitFullScreenGrid: () => void;
+export type JBGridRenderContext = Readonly<{
+    refreshView: () => void;
 }>;
 export interface JBGridConfigInterface<T extends AnyObject> {
     table: JBGridTableConfig;
-    data: JBGridDataConfig<T>;
-    page: JBGridDataPage;
-    callbacks: JBGridCallbackConfig<T>;
-    actionDispatchers?: ActionDispatchers;
-    states: JBGridConfigStates;
+    states?: JBGridConfigStates;
 }
 export type JBGridConfig<T extends AnyObject> = JBGridConfigInterface<T>;
 export type JBGridCallbacks = {
-    onFullscreenChange: (isFullscreen: boolean) => void;
+    /**
+     * @deprecated use onFullscreen and onExitFullscreen instead
+     */
+    onFullscreenChange?: (isFullscreen: boolean) => unknown;
+    onFullscreen?: () => unknown;
+    onPageIndexChange?: (newPageIndex: number) => unknown;
+    onPageSizeChange?: (newPageSize: number) => unknown;
+    onRefresh?: () => unknown | Promise<unknown>;
+    onExitFullscreen?: () => unknown;
+    onSortChange?: (column: JBGridColumnDef) => unknown;
 };
-export {};

package/react/lib/Components/Cell.tsx

@@ -1,15 +1,17 @@
-import React, { type ForwardedRef } from 'react';
-import type {JBCellAttributes} from './module-declaration.js';
-import type { JBCellWebComponent } from 'jb-grid';
-
-export type CellProps = JBCellAttributes & {
-  ref?:ForwardedRef<JBCellWebComponent | null>,
-  name:string,
-  label?:string,
-}
-export function JBCell(props:CellProps) {
-  const { children, ...otherProps} = props;
-  return (
-    <jb-cell slot="cell" {...otherProps}>{children}</jb-cell>
-  );
-}
+import React from 'react';
+import 'jb-grid';
+import type {JBCellAttributes} from './module-declaration.js';
+import type { JBCellWebComponent } from 'jb-grid';
+
+export type CellProps = Omit<JBCellAttributes, "ref" | "name"> & {
+  name:string,
+  label?:string,
+}
+export const JBCell = React.forwardRef<JBCellWebComponent | null, CellProps>((props, ref) => {
+  const { children, ...otherProps} = props;
+  return (
+    <jb-cell ref={ref} slot="cell" {...otherProps}>{children}</jb-cell>
+  );
+});
+
+JBCell.displayName = "JBCell";

package/react/lib/Components/ColumnHeader.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useImperativeHandle, useRef } from 'react';
+import 'jb-grid';
+import { useEvent } from 'jb-core/react';
+import type { JBColumnHeaderAttributes } from './module-declaration.js';
+
+type JBColumnHeaderSort = "asc" | "desc";
+type JBColumnHeaderWebComponent = HTMLElement & {
+  name: string,
+  sortable: boolean,
+  sort: JBColumnHeaderSort | null
+}
+type JBColumnHeaderSortEvent = CustomEvent<{
+  name: string,
+  sort: JBColumnHeaderSort
+}>
+
+export type ColumnHeaderProps = Omit<JBColumnHeaderAttributes, "name" | "onSort" | "ref" | "sort" | "sortable"> & {
+  name: string,
+  sortable?: boolean,
+  sort?: JBColumnHeaderSort,
+  onSort?: (event: JBColumnHeaderSortEvent) => void
+}
+
+export const JBColumnHeader = React.forwardRef<JBColumnHeaderWebComponent | null, ColumnHeaderProps>((props, ref) => {
+  const { children, name, sortable, sort, onSort, ...otherProps } = props;
+  const element = useRef<JBColumnHeaderWebComponent | null>(null);
+  useImperativeHandle(ref, () => element.current as JBColumnHeaderWebComponent, [element]);
+  useEvent(element, 'sort', onSort);
+
+  useEffect(() => {
+    if (element.current) {
+      element.current.sortable = sortable === true;
+      element.current.sort = sort ?? null;
+    }
+  }, [sortable, sort]);
+
+  return (
+    <jb-col-header ref={element} name={name} {...otherProps}>
+      <span slot="title">{children}</span>
+    </jb-col-header>
+  );
+});
+
+JBColumnHeader.displayName = "JBColumnHeader";

package/react/lib/Components/ExpandToggle.tsx

@@ -1,10 +1,14 @@
-import React  from 'react';
-import type {JBExpandToggleAttributes} from './module-declaration.js';
-
-export type ToggleProps = JBExpandToggleAttributes 
-export function JBExpandToggle(props:ToggleProps) {
-  const { children, ...otherProps} = props;
-  return (
-    <jb-expand-toggle {...otherProps}>{children}</jb-expand-toggle>
-  );
-}
+import React  from 'react';
+import 'jb-grid';
+import type {JBExpandToggleAttributes} from './module-declaration.js';
+import type { JBExpandToggleWebComponent } from 'jb-grid';
+
+export type ToggleProps = Omit<JBExpandToggleAttributes, "ref">
+export const JBExpandToggle = React.forwardRef<JBExpandToggleWebComponent | null, ToggleProps>((props, ref) => {
+  const { children, ...otherProps} = props;
+  return (
+    <jb-expand-toggle ref={ref} {...otherProps}>{children}</jb-expand-toggle>
+  );
+});
+
+JBExpandToggle.displayName = "JBExpandToggle";

package/react/lib/Components/FullscreenIcon.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect, useImperativeHandle, useRef } from 'react';
+import 'jb-grid';
+import type { JBFullscreenIconAttributes } from './module-declaration.js';
+
+type JBFullscreenIconState = "enter" | "exit";
+type JBFullscreenIconWebComponent = HTMLElement & {
+  state: JBFullscreenIconState
+}
+
+export type FullscreenIconProps = Omit<JBFullscreenIconAttributes, "ref" | "state"> & {
+  state?: JBFullscreenIconState
+}
+
+export const JBFullscreenIcon = React.forwardRef<JBFullscreenIconWebComponent | null, FullscreenIconProps>((props, ref) => {
+  const { state, ...otherProps } = props;
+  const element = useRef<JBFullscreenIconWebComponent | null>(null);
+  useImperativeHandle(ref, () => element.current as JBFullscreenIconWebComponent, [element]);
+
+  useEffect(() => {
+    if (element.current) {
+      element.current.state = state ?? "enter";
+    }
+  }, [state]);
+
+  return <jb-fullscreen-icon ref={element} {...otherProps}></jb-fullscreen-icon>;
+});
+
+JBFullscreenIcon.displayName = "JBFullscreenIcon";

package/react/lib/Components/JBLoading.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import CSS from './blob-loading.css';
+import CSS from './blob-loading.css?inline';
 import { injectCss } from 'jb-core';
 
 injectCss(CSS as unknown as string);
 class JBLoading extends React.Component {
     render() {
         const renderDom = (
-            <div className="jb-loading">
+            <output className="jb-loading" aria-label="Loading">
                 <div className="blobs">
                     <div className="blob-center"></div>
                     <div className="blob"></div>
@@ -17,6 +17,7 @@ class JBLoading extends React.Component {
                     <div className="blob"></div>
                 </div>
                 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" className="style-svg">
+                <title>loading svg</title>
                     <defs>
                         <filter id="goo">
                             <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
@@ -25,9 +26,9 @@ class JBLoading extends React.Component {
                         </filter>
                     </defs>
                 </svg>
-            </div>
+            </output>
         );
         return (renderDom);
     }
 }
-export default JBLoading;
+export default JBLoading;

package/react/lib/Components/Pagination.tsx

@@ -1,4 +1,4 @@
-import React, { type DetailedHTMLProps, type FormEventHandler, type HTMLAttributes } from 'react';
+import React, { type FormEventHandler, type HTMLAttributes } from 'react';
 import  'jb-grid'
 import type {JBPaginationWebComponent} from 'jb-grid'
 import type { JBElementStandardProps } from 'jb-core/react';

package/react/lib/Components/PaginationInfo.tsx

@@ -0,0 +1,71 @@
+import React, { useEffect, useImperativeHandle, useRef } from 'react';
+import 'jb-grid';
+import { useEvent } from 'jb-core/react';
+import type { JBPaginationInfoAttributes } from './module-declaration.js';
+
+type JBPaginationInfoWebComponent = HTMLElement & {
+  pageSize: number,
+  pageSizes: number[],
+  startItemIndex: number,
+  endItemIndex: number,
+  totalItemsCount: number,
+  pageItemCountTitle: string,
+  fromLabel: string,
+  currentAvailableItemTitle: string,
+  showPersianNumber: boolean
+}
+type JBPaginationInfoPageSizeChangeEvent = CustomEvent<{
+  pageSize: number
+}>
+
+export type PaginationInfoProps = Omit<JBPaginationInfoAttributes, "onPageSizeChange" | "ref"> & {
+  pageSize: number,
+  pageSizes?: number[],
+  startItemIndex: number,
+  endItemIndex: number,
+  totalItemsCount: number,
+  pageItemCountTitle?: string,
+  fromLabel?: string,
+  currentAvailableItemTitle?: string,
+  showPersianNumber?: boolean,
+  onPageSizeChange?: (event: JBPaginationInfoPageSizeChangeEvent) => void
+}
+
+export const JBPaginationInfo = React.forwardRef<JBPaginationInfoWebComponent | null, PaginationInfoProps>((props, ref) => {
+  const {
+    pageSize,
+    pageSizes,
+    startItemIndex,
+    endItemIndex,
+    totalItemsCount,
+    pageItemCountTitle,
+    fromLabel,
+    currentAvailableItemTitle,
+    showPersianNumber,
+    onPageSizeChange,
+    ...otherProps
+  } = props;
+  const element = useRef<JBPaginationInfoWebComponent | null>(null);
+  useImperativeHandle(ref, () => element.current as JBPaginationInfoWebComponent, [element]);
+  useEvent(element, 'page-size-change', onPageSizeChange);
+
+  useEffect(() => {
+    if (element.current) {
+      element.current.showPersianNumber = showPersianNumber === true;
+      element.current.pageSize = pageSize;
+      element.current.pageSizes = pageSizes ?? [20, 30, 50, 100];
+      element.current.startItemIndex = startItemIndex;
+      element.current.endItemIndex = endItemIndex;
+      element.current.totalItemsCount = totalItemsCount;
+      element.current.pageItemCountTitle = pageItemCountTitle ?? "";
+      element.current.fromLabel = fromLabel ?? "";
+      element.current.currentAvailableItemTitle = currentAvailableItemTitle ?? "";
+    }
+  }, [pageSize, pageSizes, startItemIndex, endItemIndex, totalItemsCount, pageItemCountTitle, fromLabel, currentAvailableItemTitle, showPersianNumber]);
+
+  return (
+    <jb-pagination-info ref={element} {...otherProps}></jb-pagination-info>
+  );
+});
+
+JBPaginationInfo.displayName = "JBPaginationInfo";

package/react/lib/Components/RefreshIcon.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import 'jb-grid';
+import type { JBRefreshIconAttributes, JBRefreshIconWebComponent } from './module-declaration.js';
+
+export type RefreshIconProps = Omit<JBRefreshIconAttributes, "ref">
+
+export const JBRefreshIcon = React.forwardRef<JBRefreshIconWebComponent | null, RefreshIconProps>((props, ref) => {
+  return <jb-refresh-icon ref={ref} {...props}></jb-refresh-icon>;
+});
+
+JBRefreshIcon.displayName = "JBRefreshIcon";

package/react/lib/Components/Row.tsx

@@ -1,15 +1,17 @@
-import React, { type ForwardedRef } from 'react';
-import type {JBRowAttributes} from './module-declaration.js';
-import type { JBCellWebComponent, RowTemplate } from 'jb-grid';
-
-export type RowProps = JBRowAttributes & {
-  ref?:ForwardedRef<JBCellWebComponent | null>,
-  rowTemplate?:RowTemplate,
-  isOpen?:boolean
-}
-export function JBRow(props:RowProps) {
-  const { children, ...otherProps} = props;
-  return (
-    <jb-row {...otherProps}>{children}</jb-row>
-  );
-}
+import React from 'react';
+import 'jb-grid';
+import type {JBRowAttributes} from './module-declaration.js';
+import type { JBRowWebComponent, RowTemplate } from 'jb-grid';
+
+export type RowProps = Omit<JBRowAttributes, "ref" | "rowTemplate" | "isOpen"> & {
+  rowTemplate?:RowTemplate,
+  isOpen?:boolean
+}
+export const JBRow = React.forwardRef<JBRowWebComponent | null, RowProps>((props, ref) => {
+  const { children, ...otherProps} = props;
+  return (
+    <jb-row ref={ref} {...otherProps}>{children}</jb-row>
+  );
+});
+
+JBRow.displayName = "JBRow";

package/react/lib/Components/TableHeader.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import 'jb-grid';
+import type { JBTableHeaderAttributes } from './module-declaration.js';
+
+type TableHeaderTemplate = Array<{name: string, size?: string | number}>
+type JBTableHeaderWebComponent = HTMLElement & {
+  headerTemplate: TableHeaderTemplate
+}
+
+export type TableHeaderProps = Omit<JBTableHeaderAttributes, "headerTemplate" | "ref"> & {
+  headerTemplate?: TableHeaderTemplate
+}
+
+export const JBTableHeader = React.forwardRef<JBTableHeaderWebComponent | null, TableHeaderProps>((props, ref) => {
+  const { children, ...otherProps } = props;
+  return (
+    <jb-table-header ref={ref} {...otherProps}>{children}</jb-table-header>
+  );
+});
+
+JBTableHeader.displayName = "JBTableHeader";

package/react/lib/Components/blob-loading.css

@@ -1,15 +1,18 @@
 
 
-.jb-loading{
-    --blob-color:var(--jb-grid-loading-color, var(--jb-primary));
-    /* Loader */
-    .blobs {
-        filter: url(#goo);
-        width: 300px;
-        height: 300px;
-        position: relative;
-        overflow: hidden;
-        border-radius: 70px;
+.jb-loading{
+    --blob-color: var(--loading-color);
+    width: 100%;
+    height: 100%;
+    display: block;
+    /* Loader */
+    .blobs {
+        filter: url(#goo);
+        width: 100%;
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+        border-radius: 4.375rem;
         transform-style: preserve-3d;
         
          /* Blob center item */
@@ -19,8 +22,8 @@
             background: var(--blob-color);
             top: 50%;
             left: 50%;
-            width: 30px;
-            height: 30px;
+            width: 1.875rem;
+            height: 1.875rem;
             transform-origin: left top;
             transform: scale(.9) translate(-50%, -50%);
             animation: blob-grow
@@ -28,7 +31,7 @@
                 3.4s
                 infinite;
             border-radius: 50%;
-            box-shadow: 0 -10px 40px -5px var(--blob-color);
+            box-shadow: 0 -0.625rem 2.5rem -5px var(--blob-color);
         }
     }
     .style-svg{
@@ -41,8 +44,8 @@
         background: var(--blob-color);
         top: 50%;
         left: 50%;
-        width: 30px;
-        height: 30px;
+        width: 1.875rem;
+        height: 1.875rem;
         border-radius: 50%;
         animation: blobs
             ease-out
@@ -53,16 +56,17 @@
         opacity: 0;
         
         /* Set animation delay for each of type */
-        &:nth-child(1) { animation-delay: 0.2s; }
-        &:nth-child(2) { animation-delay: 0.4s; }
-        &:nth-child(3) { animation-delay: 0.6s; }
-        &:nth-child(4) { animation-delay: 0.8s; }
-        &:nth-child(5) { animation-delay: 1.0s; }
+        &:nth-child(2) { animation-delay: 0.2s; }
+        &:nth-child(3) { animation-delay: 0.4s; }
+        &:nth-child(4) { animation-delay: 0.6s; }
+        &:nth-child(5) { animation-delay: 0.8s; }
+        &:nth-child(6) { animation-delay: 1.0s; }
+        &:nth-child(7) { animation-delay: 1.2s; }
     }
     
     /* Keyframes variables */
-    --left: calc(-330px - 50%);
-    --right: calc(330px - 50%);
+    --left: calc(-20.625rem - 50%);
+    --right: calc(20.625rem - 50%);
     
 
 }
@@ -138,4 +142,4 @@
         92%, 100% {
             transform: scale(0) translate(-50%, -50%);
         }
-    }
+    }

package/react/lib/Components/cell.css

@@ -1,10 +1,10 @@
-@custom-media --tablet-until (max-width: 768px);
+@custom-media --tablet-until (max-width: 48rem);
 
 .jb-grid-wrapper .jb-grid-content {
     .jb-grid-table-cell {
-        padding: 4px 16px;
+        padding: 4px 1rem;
         overflow-x: hidden;
-        grid-auto-rows: minmax(48px, auto);
+        grid-auto-rows: minmax(3rem, auto);
         align-self: center;
         display: grid;
         align-items: center;
@@ -22,12 +22,12 @@
         
 
         &.with-collapse-cell {
-            grid-template-columns: 24px auto;
+            grid-template-columns: 1.5rem auto;
         }
 
         @media(--tablet-until) {
             &:first-child {
-                box-shadow: 0px 6px 6px #dadada;
+                box-shadow: 0px 0.375rem 0.375rem #dadada;
                 border-radius: 1rem;
             }
 
@@ -45,11 +45,11 @@
 .jb-grid-wrapper .jb-grid-content .collapse-btn {
     float: right;
     cursor: pointer;
-    margin-left: 8px;
+    margin-left: 0.5rem;
 }
 
 .jb-grid-wrapper .jb-grid-content .collapse-btn svg {
-    width: 12px;
+    width: 0.75rem;
     height: 100%;
 }