baaz-custom-components 5.1.1 → 5.2.0

package/dist/index.css

@@ -43,6 +43,7 @@
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
+    --tracking-wide: 0.025em;
     --tracking-wider: 0.05em;
     --tracking-widest: 0.1em;
     --radius-xs: 0.125rem;
@@ -391,6 +392,9 @@
   .-mx-1 {
     margin-inline: calc(var(--spacing) * -1);
   }
+  .mx-1 {
+    margin-inline: calc(var(--spacing) * 1);
+  }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
@@ -488,9 +492,6 @@
     width: 100%;
     height: 100%;
   }
-  .h-1 {
-    height: calc(var(--spacing) * 1);
-  }
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
@@ -509,6 +510,9 @@
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
   .h-7 {
     height: calc(var(--spacing) * 7);
   }
@@ -572,6 +576,9 @@
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
+  .min-h-\[48px\] {
+    min-height: 48px;
+  }
   .\!w-0 {
     width: calc(var(--spacing) * 0) !important;
   }
@@ -581,8 +588,8 @@
   .w-\(--sidebar-width\) {
     width: var(--sidebar-width);
   }
-  .w-1 {
-    width: calc(var(--spacing) * 1);
+  .w-1\.5 {
+    width: calc(var(--spacing) * 1.5);
   }
   .w-2 {
     width: calc(var(--spacing) * 2);
@@ -602,6 +609,9 @@
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
@@ -641,6 +651,9 @@
   .w-max {
     width: max-content;
   }
+  .w-px {
+    width: 1px;
+  }
   .max-w-\(--skeleton-width\) {
     max-width: var(--skeleton-width);
   }
@@ -742,6 +755,9 @@
   .touch-none {
     touch-action: none;
   }
+  .resize {
+    resize: both;
+  }
   .scroll-my-1 {
     scroll-margin-block: calc(var(--spacing) * 1);
   }
@@ -784,9 +800,6 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
-  .gap-2\.5 {
-    gap: calc(var(--spacing) * 2.5);
-  }
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
@@ -1017,6 +1030,12 @@
       background-color: color-mix(in oklab, var(--primary) 30%, transparent);
     }
   }
+  .bg-primary\/90 {
+    background-color: var(--primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+    }
+  }
   .bg-red-700 {
     background-color: var(--color-red-700);
   }
@@ -1032,9 +1051,6 @@
   .bg-sidebar-border {
     background-color: var(--sidebar-border);
   }
-  .bg-surface-alt {
-    background-color: var(--surface-alt);
-  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -1065,9 +1081,6 @@
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
-  .p-2\.5 {
-    padding: calc(var(--spacing) * 2.5);
-  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -1119,9 +1132,15 @@
   .py-2\.5 {
     padding-block: calc(var(--spacing) * 2.5);
   }
+  .py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .pt-1 {
+    padding-top: calc(var(--spacing) * 1);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -1168,8 +1187,11 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
-  .text-\[9px\] {
-    font-size: 9px;
+  .text-\[10px\] {
+    font-size: 10px;
+  }
+  .text-\[13px\] {
+    font-size: 13px;
   }
   .leading-none {
     --tw-leading: 1;
@@ -1195,22 +1217,22 @@
     --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\.12em\] {
+    --tw-tracking: 0.12em;
+    letter-spacing: 0.12em;
   }
-  .tracking-\[0\.15em\] {
-    --tw-tracking: 0.15em;
-    letter-spacing: 0.15em;
+  .tracking-\[0\.16em\] {
+    --tw-tracking: 0.16em;
+    letter-spacing: 0.16em;
   }
   .tracking-\[0\.25rem\] {
     --tw-tracking: 0.25rem;
     letter-spacing: 0.25rem;
   }
+  .tracking-wide {
+    --tw-tracking: var(--tracking-wide);
+    letter-spacing: var(--tracking-wide);
+  }
   .tracking-wider {
     --tw-tracking: var(--tracking-wider);
     letter-spacing: var(--tracking-wider);
@@ -1237,22 +1259,34 @@
   .text-foreground {
     color: var(--foreground);
   }
-  .text-foreground\/25 {
+  .text-foreground\/30 {
     color: var(--foreground);
     @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--foreground) 25%, transparent);
+      color: color-mix(in oklab, var(--foreground) 30%, transparent);
     }
   }
-  .text-foreground\/30 {
+  .text-foreground\/35 {
     color: var(--foreground);
     @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--foreground) 30%, transparent);
+      color: color-mix(in oklab, var(--foreground) 35%, transparent);
+    }
+  }
+  .text-foreground\/40 {
+    color: var(--foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--foreground) 40%, 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 {
+  .text-foreground\/60 {
     color: var(--foreground);
     @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--foreground) 70%, transparent);
+      color: color-mix(in oklab, var(--foreground) 60%, transparent);
     }
   }
   .text-green-800 {
@@ -1305,6 +1339,9 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+  .accent-primary {
+    accent-color: var(--primary);
+  }
   .opacity-0 {
     opacity: 0%;
   }
@@ -1513,9 +1550,9 @@
     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-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
   }
   .duration-200 {
     --tw-duration: 200ms;
@@ -1553,18 +1590,21 @@
     --tw-enter-scale: calc(95*1%);
     --tw-enter-scale: .95;
   }
+  .fade-in {
+    --tw-enter-opacity: 0;
+  }
+  .slide-in-from-left-2 {
+    --tw-enter-translate-x: calc(2*var(--spacing)*-1);
+  }
   .group-focus-within\/menu-item\:opacity-100 {
     &:is(:where(.group\/menu-item):focus-within *) {
       opacity: 100%;
     }
   }
-  .group-hover\:text-foreground\/90 {
+  .group-hover\:text-primary {
     &: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);
-        }
+        color: var(--primary);
       }
     }
   }
@@ -1922,13 +1962,6 @@
       }
     }
   }
-  .hover\:bg-border {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--border);
-      }
-    }
-  }
   .hover\:bg-card-foreground {
     &:hover {
       @media (hover: hover) {
@@ -1970,6 +2003,13 @@
       }
     }
   }
+  .hover\:bg-primary {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--primary);
+      }
+    }
+  }
   .hover\:bg-primary\/90 {
     &:hover {
       @media (hover: hover) {
@@ -2106,6 +2146,17 @@
       color: var(--accent-foreground);
     }
   }
+  .focus\:ring-1 {
+    &:focus {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow:
+        var(--tw-inset-shadow),
+        var(--tw-inset-ring-shadow),
+        var(--tw-ring-offset-shadow),
+        var(--tw-ring-shadow),
+        var(--tw-shadow);
+    }
+  }
   .focus\:ring-2 {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2117,6 +2168,11 @@
         var(--tw-shadow);
     }
   }
+  .focus\:ring-primary {
+    &:focus {
+      --tw-ring-color: var(--primary);
+    }
+  }
   .focus\:ring-ring {
     &:focus {
       --tw-ring-color: var(--ring);
@@ -7939,6 +7995,9 @@ i.wx-U0Bx7pIR {
 .wx-4VuBwK2D:last-child {
   border-bottom: 0.1px solid rgb(56, 64, 71);
 }
+.wx-table-box.wx-4VuBwK2D {
+  border: none;
+}
 @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import react__default, { ReactNode } from 'react';
 import { IApi } from '@svar-ui/react-grid';
 
 type NavbarData = NavbarEntry[];
@@ -84,11 +84,11 @@ type Filters = {
     }[];
 };
 type GridProps = {
-    data: Record<string, any>[];
+    data: AnyRow[];
+    select?: boolean;
     columns: GridColumn[];
     sortKey?: string | null;
     sortOrder?: SortOrder | null;
-    onSortChange?: (key: string, order: SortOrder) => void;
     multiselect?: boolean;
     reorder?: boolean;
     overlay?: React.FC | string;
@@ -102,14 +102,20 @@ type GridProps = {
     searchkey: string;
     searchValue: string;
     loading: boolean;
+    filterList: Filters[];
+    initialFilters?: any[];
+    children?: React.ReactNode;
+    onSortChange?: (key: string, order: SortOrder) => void;
     onExportPdf?: () => void;
     onExportExcel?: () => void;
     onSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    filterList: Filters[];
     onFilterChange?: (payload: MultiFilterPayload) => void;
     onApiReady?: (api: IApi) => void;
-    initialFilters?: any[];
-    children?: React.ReactNode;
+    onFocusCell?: (params: {
+        row?: string | number;
+        column?: string | number;
+        eventSource?: string;
+    }) => boolean | void;
 };
 type FilterCondition = ActiveFilter & {
     id: string;
@@ -131,7 +137,32 @@ type ActiveFilter = {
     value?: FilterValue;
 };
 
-declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<IApi | null>>;
+type RowId = string | number;
+type AnyRow = {
+    id: RowId;
+    [key: string]: any;
+};
+interface SelectionAction {
+    id: string;
+    label: string;
+    icon?: react__default.ReactNode;
+    needsConfirmation?: boolean;
+}
+interface GridSelectionProps {
+    selectionEnabled?: boolean;
+    selectedIds?: RowId[];
+    onRowSelectionChange?: (id: RowId, rowData: AnyRow, checked: boolean) => void;
+    onSelectAllPage?: (pageData: AnyRow[], checked: boolean) => void;
+}
+interface GridHeaderSelectionProps {
+    selectedCount?: number;
+    selectedData?: AnyRow[];
+    selectionActions?: SelectionAction[];
+    onSelectionAction?: (actionId: string, selectedData: AnyRow[]) => void;
+    onClearSelection?: () => void;
+}
+
+declare const Grid: react.ForwardRefExoticComponent<GridProps & GridSelectionProps & GridHeaderSelectionProps & react.RefAttributes<IApi | null>>;
 
 type Props = {
     cell: {
@@ -142,7 +173,7 @@ type Props = {
     sortOrder?: SortOrder | null;
     onSortChange?: (key: string, order: SortOrder) => void;
 };
-declare function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }: Props): react.JSX.Element;
+declare const _default: react__default.MemoExoticComponent<({ cell, sortKey, sortOrder, onSortChange }: Props) => react__default.JSX.Element>;
 
 type Pagination$1 = {
     totalCount: number;
@@ -176,4 +207,4 @@ interface SlideToolbarProps {
 
 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 };
+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, _default as SortableHeaderCell, type ToolbarItem, type UserData };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import react__default, { ReactNode } from 'react';
 import { IApi } from '@svar-ui/react-grid';
 
 type NavbarData = NavbarEntry[];
@@ -84,11 +84,11 @@ type Filters = {
     }[];
 };
 type GridProps = {
-    data: Record<string, any>[];
+    data: AnyRow[];
+    select?: boolean;
     columns: GridColumn[];
     sortKey?: string | null;
     sortOrder?: SortOrder | null;
-    onSortChange?: (key: string, order: SortOrder) => void;
     multiselect?: boolean;
     reorder?: boolean;
     overlay?: React.FC | string;
@@ -102,14 +102,20 @@ type GridProps = {
     searchkey: string;
     searchValue: string;
     loading: boolean;
+    filterList: Filters[];
+    initialFilters?: any[];
+    children?: React.ReactNode;
+    onSortChange?: (key: string, order: SortOrder) => void;
     onExportPdf?: () => void;
     onExportExcel?: () => void;
     onSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    filterList: Filters[];
     onFilterChange?: (payload: MultiFilterPayload) => void;
     onApiReady?: (api: IApi) => void;
-    initialFilters?: any[];
-    children?: React.ReactNode;
+    onFocusCell?: (params: {
+        row?: string | number;
+        column?: string | number;
+        eventSource?: string;
+    }) => boolean | void;
 };
 type FilterCondition = ActiveFilter & {
     id: string;
@@ -131,7 +137,32 @@ type ActiveFilter = {
     value?: FilterValue;
 };
 
-declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<IApi | null>>;
+type RowId = string | number;
+type AnyRow = {
+    id: RowId;
+    [key: string]: any;
+};
+interface SelectionAction {
+    id: string;
+    label: string;
+    icon?: react__default.ReactNode;
+    needsConfirmation?: boolean;
+}
+interface GridSelectionProps {
+    selectionEnabled?: boolean;
+    selectedIds?: RowId[];
+    onRowSelectionChange?: (id: RowId, rowData: AnyRow, checked: boolean) => void;
+    onSelectAllPage?: (pageData: AnyRow[], checked: boolean) => void;
+}
+interface GridHeaderSelectionProps {
+    selectedCount?: number;
+    selectedData?: AnyRow[];
+    selectionActions?: SelectionAction[];
+    onSelectionAction?: (actionId: string, selectedData: AnyRow[]) => void;
+    onClearSelection?: () => void;
+}
+
+declare const Grid: react.ForwardRefExoticComponent<GridProps & GridSelectionProps & GridHeaderSelectionProps & react.RefAttributes<IApi | null>>;
 
 type Props = {
     cell: {
@@ -142,7 +173,7 @@ type Props = {
     sortOrder?: SortOrder | null;
     onSortChange?: (key: string, order: SortOrder) => void;
 };
-declare function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }: Props): react.JSX.Element;
+declare const _default: react__default.MemoExoticComponent<({ cell, sortKey, sortOrder, onSortChange }: Props) => react__default.JSX.Element>;
 
 type Pagination$1 = {
     totalCount: number;
@@ -176,4 +207,4 @@ interface SlideToolbarProps {
 
 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 };
+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, _default as SortableHeaderCell, type ToolbarItem, type UserData };