baaz-custom-components 5.0.32 → 5.1.0

package/dist/index.css

@@ -47,6 +47,7 @@
     --tracking-widest: 0.1em;
     --radius-xs: 0.125rem;
     --radius-2xl: 1rem;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@@ -247,6 +248,9 @@
   }
 }
 @layer utilities {
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
   .pointer-events-none {
     pointer-events: none;
   }
@@ -342,6 +346,9 @@
   .z-20 {
     z-index: 20;
   }
+  .z-30 {
+    z-index: 30;
+  }
   .z-40 {
     z-index: 40;
   }
@@ -481,6 +488,9 @@
     width: 100%;
     height: 100%;
   }
+  .h-1 {
+    height: calc(var(--spacing) * 1);
+  }
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
@@ -562,12 +572,18 @@
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
+  .\!w-0 {
+    width: calc(var(--spacing) * 0) !important;
+  }
   .\!w-md {
     width: var(--container-md) !important;
   }
   .w-\(--sidebar-width\) {
     width: var(--sidebar-width);
   }
+  .w-1 {
+    width: calc(var(--spacing) * 1);
+  }
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
@@ -598,6 +614,9 @@
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
+  .w-\[18px\] {
+    width: 18px;
+  }
   .w-\[40px\] {
     width: 40px;
   }
@@ -671,10 +690,18 @@
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-x-full {
+    --tw-translate-x: -100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-x-px {
     --tw-translate-x: -1px;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-0 {
+    --tw-translate-x: calc(var(--spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-x-\[-50\%\] {
     --tw-translate-x: -50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -757,6 +784,9 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-2\.5 {
+    gap: calc(var(--spacing) * 2.5);
+  }
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
@@ -795,6 +825,9 @@
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .rounded {
+    border-radius: 0.25rem;
+  }
   .rounded-\[2px\] {
     border-radius: 2px;
   }
@@ -851,6 +884,10 @@
     border-right-style: var(--tw-border-style);
     border-right-width: 1px;
   }
+  .border-r-0 {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 0px;
+  }
   .border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -867,6 +904,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-l-2 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 2px;
+  }
   .border-none {
     --tw-border-style: none;
     border-style: none;
@@ -883,6 +924,9 @@
   .border-sidebar-border {
     border-color: var(--sidebar-border);
   }
+  .border-transparent {
+    border-color: transparent;
+  }
   .border-t-transparent {
     border-top-color: transparent;
   }
@@ -937,6 +981,12 @@
   .bg-destructive {
     background-color: var(--destructive);
   }
+  .bg-foreground\/20 {
+    background-color: var(--foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--foreground) 20%, transparent);
+    }
+  }
   .bg-input {
     background-color: var(--input);
   }
@@ -970,6 +1020,9 @@
   .bg-sidebar-border {
     background-color: var(--sidebar-border);
   }
+  .bg-surface-alt {
+    background-color: var(--surface-alt);
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -994,9 +1047,15 @@
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
+  .p-1\.5 {
+    padding: calc(var(--spacing) * 1.5);
+  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
+  .p-2\.5 {
+    padding: calc(var(--spacing) * 2.5);
+  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -1045,6 +1104,9 @@
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
+  .py-2\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
+  }
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
@@ -1094,6 +1156,9 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\[9px\] {
+    font-size: 9px;
+  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -1118,6 +1183,18 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .tracking-\[0\.1em\] {
+    --tw-tracking: 0.1em;
+    letter-spacing: 0.1em;
+  }
+  .tracking-\[0\.14em\] {
+    --tw-tracking: 0.14em;
+    letter-spacing: 0.14em;
+  }
+  .tracking-\[0\.15em\] {
+    --tw-tracking: 0.15em;
+    letter-spacing: 0.15em;
+  }
   .tracking-\[0\.25rem\] {
     --tw-tracking: 0.25rem;
     letter-spacing: 0.25rem;
@@ -1148,6 +1225,30 @@
   .text-foreground {
     color: var(--foreground);
   }
+  .text-foreground\/25 {
+    color: var(--foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--foreground) 25%, transparent);
+    }
+  }
+  .text-foreground\/30 {
+    color: var(--foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--foreground) 30%, transparent);
+    }
+  }
+  .text-foreground\/50 {
+    color: var(--foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--foreground) 50%, transparent);
+    }
+  }
+  .text-foreground\/70 {
+    color: var(--foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--foreground) 70%, transparent);
+    }
+  }
   .text-green-800 {
     color: var(--color-green-800);
   }
@@ -1184,6 +1285,9 @@
   .capitalize {
     text-transform: capitalize;
   }
+  .uppercase {
+    text-transform: uppercase;
+  }
   .tabular-nums {
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
@@ -1195,12 +1299,18 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+  .opacity-0 {
+    opacity: 0%;
+  }
   .opacity-50 {
     opacity: 50%;
   }
   .opacity-70 {
     opacity: 70%;
   }
+  .opacity-100 {
+    opacity: 100%;
+  }
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow:
@@ -1219,6 +1329,15 @@
       var(--tw-ring-shadow),
       var(--tw-shadow);
   }
+  .shadow-\[4px_0_24px_rgba\(0\,0\,0\,0\.5\)\] {
+    --tw-shadow: 4px 0 24px var(--tw-shadow-color, rgba(0,0,0,0.5));
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow:
@@ -1388,6 +1507,10 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .duration-100 {
+    --tw-duration: 100ms;
+    transition-duration: 100ms;
+  }
   .duration-200 {
     --tw-duration: 200ms;
     transition-duration: 200ms;
@@ -1404,6 +1527,10 @@
     --tw-ease: linear;
     transition-timing-function: linear;
   }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
   .fade-in-0 {
     --tw-enter-opacity: calc(0/100);
     --tw-enter-opacity: 0;
@@ -1425,6 +1552,16 @@
       opacity: 100%;
     }
   }
+  .group-hover\:text-foreground\/90 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--foreground);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--foreground) 90%, transparent);
+        }
+      }
+    }
+  }
   .group-hover\/menu-item\:opacity-100 {
     &:is(:where(.group\/menu-item):hover *) {
       @media (hover: hover) {
@@ -1765,6 +1902,13 @@
       }
     }
   }
+  .hover\:border-primary {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--primary);
+      }
+    }
+  }
   .hover\:bg-accent {
     &:hover {
       @media (hover: hover) {
@@ -1772,6 +1916,13 @@
       }
     }
   }
+  .hover\:bg-border {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--border);
+      }
+    }
+  }
   .hover\:bg-card-foreground {
     &:hover {
       @media (hover: hover) {
@@ -1840,6 +1991,13 @@
       }
     }
   }
+  .hover\:bg-surface-alt {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--surface-alt);
+      }
+    }
+  }
   .hover\:text-accent-foreground {
     &:hover {
       @media (hover: hover) {
@@ -7760,6 +7918,7 @@ i.wx-U0Bx7pIR {
 .main {
   flex: 1;
   overflow-y: auto;
+  position: relative;
   height: 100%;
   padding: clamp(12px, 3.4vh, 32px) clamp(12px, 1.8vw, 32px);
 }

package/dist/index.d.mts

@@ -1,4 +1,5 @@
 import * as react from 'react';
+import { ReactNode } from 'react';
 import { IApi } from '@svar-ui/react-grid';
 
 type NavbarData = NavbarEntry[];
@@ -108,6 +109,7 @@ type GridProps = {
     onFilterChange?: (payload: MultiFilterPayload) => void;
     onApiReady?: (api: IApi) => void;
     initialFilters?: any[];
+    children?: React.ReactNode;
 };
 type FilterCondition = ActiveFilter & {
     id: string;
@@ -156,4 +158,22 @@ type Pagination$1 = {
 
 declare function Pagination({ totalCount, count, currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, showSizeChanger, sizeChangerOptions, }: Pagination$1): react.JSX.Element;
 
-export { type BreadcrumbProps, CustomBreadcrumb, Grid, type GridProps, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, Pagination, type Pagination$1 as PaginationProps, type RouteTree, type RouterAdapter, SortableHeaderCell, type UserData };
+interface ToolbarItem {
+    id: string;
+    label: string;
+    icon: ReactNode;
+}
+interface SlideToolbarProps {
+    items?: ToolbarItem[];
+    children?: ReactNode;
+    onAction?: (id: string) => void;
+    title?: string;
+    footerLabel?: string;
+    panelWidth?: number;
+    closeOnBackdrop?: boolean;
+    className?: string;
+}
+
+declare const SlideToolbar: React.FC<SlideToolbarProps>;
+
+export { type BreadcrumbProps, CustomBreadcrumb, Grid, type GridProps, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, Pagination, type Pagination$1 as PaginationProps, type RouteTree, type RouterAdapter, SlideToolbar, type SlideToolbarProps, SortableHeaderCell, type ToolbarItem, type UserData };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as react from 'react';
+import { ReactNode } from 'react';
 import { IApi } from '@svar-ui/react-grid';
 
 type NavbarData = NavbarEntry[];
@@ -108,6 +109,7 @@ type GridProps = {
     onFilterChange?: (payload: MultiFilterPayload) => void;
     onApiReady?: (api: IApi) => void;
     initialFilters?: any[];
+    children?: React.ReactNode;
 };
 type FilterCondition = ActiveFilter & {
     id: string;
@@ -156,4 +158,22 @@ type Pagination$1 = {
 
 declare function Pagination({ totalCount, count, currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, showSizeChanger, sizeChangerOptions, }: Pagination$1): react.JSX.Element;
 
-export { type BreadcrumbProps, CustomBreadcrumb, Grid, type GridProps, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, Pagination, type Pagination$1 as PaginationProps, type RouteTree, type RouterAdapter, SortableHeaderCell, type UserData };
+interface ToolbarItem {
+    id: string;
+    label: string;
+    icon: ReactNode;
+}
+interface SlideToolbarProps {
+    items?: ToolbarItem[];
+    children?: ReactNode;
+    onAction?: (id: string) => void;
+    title?: string;
+    footerLabel?: string;
+    panelWidth?: number;
+    closeOnBackdrop?: boolean;
+    className?: string;
+}
+
+declare const SlideToolbar: React.FC<SlideToolbarProps>;
+
+export { type BreadcrumbProps, CustomBreadcrumb, Grid, type GridProps, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, Pagination, type Pagination$1 as PaginationProps, type RouteTree, type RouterAdapter, SlideToolbar, type SlideToolbarProps, SortableHeaderCell, type ToolbarItem, type UserData };

package/dist/index.js

@@ -63,6 +63,7 @@ __export(index_exports, {
   Grid: () => grid_default,
   Navbar: () => Navbar,
   Pagination: () => pagination_default,
+  SlideToolbar: () => toolbar_default,
   SortableHeaderCell: () => sortableHeaderCell_default
 });
 module.exports = __toCommonJS(index_exports);
@@ -2360,7 +2361,8 @@ var GridHeader = ({
   searchkey = "",
   filterList,
   onFilterChange,
-  initialFilters = []
+  initialFilters = [],
+  children
 }) => {
   const [downloadMenu, setDownloadMenu] = (0, import_react6.useState)(false);
   const [searchOpen, setSearchOpen] = (0, import_react6.useState)(false);
@@ -2425,6 +2427,7 @@ var GridHeader = ({
         ] })
       ] })
     ] }),
+    children,
     search && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "relative h-[40px] flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "div",
       {
@@ -2479,7 +2482,8 @@ var Grid = (0, import_react7.forwardRef)(
       fileName,
       fonts,
       onFilterChange,
-      initialFilters
+      initialFilters,
+      children
     } = _b, rest = __objRest(_b, [
       "data",
       "columns",
@@ -2492,7 +2496,8 @@ var Grid = (0, import_react7.forwardRef)(
       "fileName",
       "fonts",
       "onFilterChange",
-      "initialFilters"
+      "initialFilters",
+      "children"
     ]);
     const apiRef = (0, import_react7.useRef)(null);
     const containerRef = (0, import_react7.useRef)(null);
@@ -2592,7 +2597,8 @@ var Grid = (0, import_react7.forwardRef)(
           searchValue: rest.searchValue,
           filterList: rest.filterList,
           onFilterChange,
-          initialFilters
+          initialFilters,
+          children
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex-1 w-full overflow-hidden", ref: containerRef, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_grid.WillowDark, { fonts, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-full h-full relative", children: rest.loading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute inset-0 bg-background/60 backdrop-blur-sm flex items-center justify-center z-10", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "animate-spin rounded-full h-8 w-8 border-2 border-primary border-t-transparent" }) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_grid.Grid, __spreadProps(__spreadValues({}, rest), { data, columns, init })) }) }) })
@@ -2749,11 +2755,130 @@ function Pagination({
   ] });
 }
 var pagination_default = Pagination;
+
+// src/components/custom/toolbar/index.tsx
+var import_lucide_react16 = require("lucide-react");
+var import_react8 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var SlideToolbar = ({
+  items,
+  children,
+  onAction,
+  title = "Toolbar",
+  footerLabel,
+  panelWidth = 210,
+  closeOnBackdrop = true,
+  className = ""
+}) => {
+  const resolvedItems = items != null ? items : children ? void 0 : [];
+  const [open, setOpen] = (0, import_react8.useState)(false);
+  const panelRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
+    if (!open || !closeOnBackdrop) return;
+    const handlePointerDown = (e) => {
+      if (panelRef.current && !panelRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [open, closeOnBackdrop]);
+  const handleItem = (item) => {
+    onAction == null ? void 0 : onAction(item.id);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        "aria-label": `Open ${title}`,
+        onClick: () => setOpen(true),
+        className: [
+          "absolute inset-y-0 left-0 z-20 w-[18px] flex items-center justify-center",
+          "bg-card border-r border-border cursor-pointer",
+          "hover:bg-surface-alt transition-all duration-200",
+          open ? "opacity-0 pointer-events-none !w-0 border-r-0" : "opacity-100 pointer-events-auto"
+        ].join(" "),
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react16.ChevronRight, { className: "text-foreground/50", size: 50 })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        "aria-label": title,
+        "aria-hidden": !open,
+        className: [
+          "absolute inset-y-0 left-0 z-30 flex flex-col",
+          "bg-card border-r border-border",
+          "shadow-[4px_0_24px_rgba(0,0,0,0.5)]",
+          "transition-transform duration-200 ease-out",
+          open ? "translate-x-0" : "-translate-x-full",
+          className
+        ].join(" "),
+        style: { width: `${panelWidth}px` },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between px-3 py-2.5 bg-surface-alt border-b border-border shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-xs font-semibold tracking-[0.15em] uppercase text-foreground", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              "button",
+              {
+                onClick: () => setOpen(false),
+                "aria-label": "Close toolbar",
+                className: "flex items-center justify-center w-5 h-5 rounded cursor-pointer\n                       text-foreground hover:text-foreground hover:bg-border\n                       transition-colors duration-100",
+                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react16.X, { size: 14 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-1 overflow-y-auto overflow-x-hidden p-1.5 scrollbar-none", children: resolvedItems ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "p-2 text-xs font-semibold tracking-[0.14em] uppercase text-foreground/30", children: "Actions" }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("nav", { className: "flex flex-col gap-2", children: resolvedItems.map((item) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                "button",
+                {
+                  onClick: () => handleItem(item),
+                  className: [
+                    "group flex items-center gap-2.5 p-2.5 rounded w-full",
+                    "text-left text-sm cursor-pointer border-l-2",
+                    "transition-colors duration-100",
+                    "border-transparent text-foreground/70 hover:text-foreground hover:bg-surface-alt hover:border-primary"
+                  ].join(" "),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                      "span",
+                      {
+                        className: [
+                          "flex shrink-0 transition-colors duration-100",
+                          "text-foreground/70 group-hover:text-foreground/90"
+                        ].join(" "),
+                        children: item.icon
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "flex-1 leading-none", children: item.label })
+                  ]
+                },
+                item.id
+              );
+            }) })
+          ] }) : children }),
+          footerLabel && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2 px-3 py-2 border-t border-border bg-surface-alt shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "w-1 h-1 rounded-full bg-foreground/20 shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-[9px] tracking-[0.1em] uppercase text-foreground/25", children: footerLabel })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+var toolbar_default = SlideToolbar;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CustomBreadcrumb,
   Grid,
   Navbar,
   Pagination,
+  SlideToolbar,
   SortableHeaderCell
 });