gridular 3.2.1 → 3.3.2

package/dist/DataGrid.d.ts

@@ -1,3 +1,3 @@
 import { VirtualizedGridProps } from './types';
-export declare function DataGrid<T extends Record<string, any> = Record<string, any>>({ columns: propColumns, data, pagination, virtualizationThreshold, rowHeight, overscan, sortState: controlledSortState, onSortChange, enableSorting, sortIconVariant, filterState: controlledFilterState, onFilterChange: _onFilterChange, enableFiltering, selectedRows: controlledSelectedRows, onRowSelectionChange: _onRowSelectionChange, enableRowSelection: _enableRowSelection, enableCellSelection, selectedCell: controlledSelectedCell, onCellSelect, enableColumnResize, columnWidths: controlledColumnWidths, onColumnWidthsChange, enableColumnReorder, columnOrder: controlledColumnOrder, onColumnOrderChange, enableColumnMenu, defaultColumnMenuItems, onColumnAction, renderFilterMenu, renderColumnMenu, renderColumnMenuTrigger, enableGrouping, groupingState: controlledGroupingState, onGroupingChange, renderGroupRow, hideGroupingUI, enableExpandableRows, expandedRows: controlledExpandedRows, onExpandedRowsChange, renderExpandedRow, expandedRowHeight, isLoading: _isLoading, emptyMessage: _emptyMessage, loadingMessage: _loadingMessage, className, classes, renderCell, renderRowComponent, renderHeader: _renderHeader, renderHeaderCell, renderSortIcon: _renderSortIcon, renderFilterIcon: _renderFilterIcon, onRowClick, onRowMouseDown, onRowMouseEnter, getRowId, onScroll, gridId, hideColumnManager, hideGroupControls, }: VirtualizedGridProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DataGrid<T extends Record<string, any> = Record<string, any>>({ columns: propColumns, data, pagination, virtualizationThreshold, rowHeight, overscan, sortState: controlledSortState, onSortChange, enableSorting, sortIconVariant, filterState: controlledFilterState, onFilterChange: _onFilterChange, enableFiltering, selectedRows: controlledSelectedRows, onRowSelectionChange: _onRowSelectionChange, enableRowSelection: _enableRowSelection, enableCellSelection, selectedCell: controlledSelectedCell, onCellSelect, enableColumnResize, columnWidths: controlledColumnWidths, onColumnWidthsChange, enableColumnReorder, columnOrder: controlledColumnOrder, onColumnOrderChange, enableColumnMenu, defaultColumnMenuItems, onColumnAction, renderFilterMenu, renderColumnMenu, renderColumnMenuTrigger, enableGrouping, groupingState: controlledGroupingState, onGroupingChange, renderGroupRow, hideGroupingUI, enableExpandableRows, expandedRows: controlledExpandedRows, onExpandedRowsChange, renderExpandedRow, expandedRowHeight, isLoading: _isLoading, emptyMessage: _emptyMessage, loadingMessage: _loadingMessage, className, classes, renderCell, renderRowComponent, renderHeader: _renderHeader, renderHeaderCell, renderSortIcon: _renderSortIcon, renderFilterIcon: _renderFilterIcon, onRowClick, onRowMouseDown, onRowMouseEnter, getRowId, onScroll, contextMenuContent, gridId, hideColumnManager, hideGroupControls, }: VirtualizedGridProps<T>): import("react/jsx-runtime").JSX.Element;
 export default DataGrid;

package/dist/components/Skeleton.d.ts

@@ -1,7 +1,5 @@
 interface SkeletonProps {
     className?: string;
-    width?: string | number;
-    height?: string | number;
 }
-export declare function Skeleton({ className, width, height }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Skeleton({ className }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/gridular.css

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Manrope:wght@300;400;500;600;700&display=swap";:root{--vg-charcoal: #1a1a1a;--vg-charcoal-light: #2a2a2a;--vg-ivory: #faf8f6;--vg-ivory-dark: #f0ede9;--vg-copper: #b87333;--vg-copper-light: #d4935a;--vg-copper-dark: #9a5e28;--vg-border: rgba(184, 115, 51, .15);--vg-shadow: rgba(26, 26, 26, .08);--vg-font-display: "Manrope", sans-serif;--vg-font-ui: "Syne", sans-serif;--vg-spacing-xs: .5rem;--vg-spacing-sm: .75rem;--vg-spacing-md: 1.25rem;--vg-spacing-lg: 2rem}.virtualized-grid-container{position:relative;width:100%;height:100%;background:var(--vg-ivory);border:1px solid var(--vg-border);border-radius:2px;overflow:hidden;font-family:var(--vg-font-ui);isolation:isolate;display:flex;flex-direction:column}.grain-overlay{position:absolute;inset:0;pointer-events:none;opacity:.03;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");z-index:10}.virtualized-grid-header{display:flex;background:linear-gradient(180deg,var(--vg-charcoal) 0%,var(--vg-charcoal-light) 100%);border-bottom:2px solid var(--vg-copper);position:sticky;top:0;z-index:5;box-shadow:0 4px 12px var(--vg-shadow)}.virtualized-grid-header-cell{position:relative;padding:var(--vg-spacing-md) var(--vg-spacing-md);display:flex;flex-direction:column;justify-content:center;border-right:1px solid rgba(184,115,51,.2);animation:fadeInDown .6s cubic-bezier(.16,1,.3,1) both;overflow:hidden}.virtualized-grid-header-cell:last-child{border-right:none}.header-text{font-family:var(--vg-font-ui);font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--vg-ivory);position:relative;z-index:1}.header-accent{position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--vg-copper) 50%,transparent 100%);opacity:0;transition:opacity .4s cubic-bezier(.16,1,.3,1)}.virtualized-grid-header-cell:hover .header-accent{opacity:1}.virtualized-grid-body{overflow:auto;flex:1;position:relative;scrollbar-width:thin;scrollbar-color:var(--vg-copper) var(--vg-ivory-dark);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.virtualized-grid-body::-webkit-scrollbar{width:12px;height:12px}.virtualized-grid-body::-webkit-scrollbar-track{background:var(--vg-ivory-dark)}.virtualized-grid-body::-webkit-scrollbar-thumb{background:var(--vg-copper);border-radius:6px;border:2px solid var(--vg-ivory-dark);transition:background .3s ease}.virtualized-grid-body::-webkit-scrollbar-thumb:hover{background:var(--vg-copper-dark)}.virtualized-grid-row{display:flex;border-bottom:1px solid var(--vg-border);background-color:var(--vg-ivory);transition:all .3s cubic-bezier(.16,1,.3,1);position:relative;isolation:isolate;min-height:48px}.virtualized-grid-row.clickable{cursor:pointer}.virtualized-grid-row.selected{background-color:#b873331f;border-bottom-color:var(--vg-copper);box-shadow:inset 3px 0 0 var(--vg-copper),0 2px 8px var(--vg-shadow);z-index:2}.virtualized-grid-row.selected .cell-content{color:var(--vg-copper-dark);font-weight:600}.row-shimmer{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(184,115,51,.1) 50%,transparent 100%);opacity:0;transform:translate(-100%);transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .3s ease;pointer-events:none;z-index:-1}.virtualized-grid-cell{padding:var(--vg-spacing-md);display:flex;align-items:flex-start;border-right:1px solid rgba(184,115,51,.08);position:relative;min-height:48px}.virtualized-grid-cell:last-child{border-right:none}.cell-content{font-family:var(--vg-font-display);font-size:.9375rem;font-weight:500;color:var(--vg-charcoal);line-height:1.5;letter-spacing:-.01em;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;transition:all .3s cubic-bezier(.16,1,.3,1);width:100%}.skeleton-shimmer{background:linear-gradient(90deg,var(--vg-ivory-dark) 0%,var(--vg-ivory) 50%,var(--vg-ivory-dark) 100%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.virtualized-grid-container.loading{pointer-events:none}.virtualized-grid-container.loading:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(250,248,246,.8) 50%,transparent 100%);animation:shimmer 2s infinite;z-index:20}@media(max-width:768px){.virtualized-grid-header-cell,.virtualized-grid-cell{padding:var(--vg-spacing-sm)}.header-text{font-size:.625rem}.cell-content{font-size:1rem}}.virtualized-grid-context-menu{position:fixed;z-index:50;background:var(--vg-ivory);border:2px solid var(--vg-copper);border-radius:2px;box-shadow:0 8px 24px #1a1a1a26,0 2px 8px #b873331a;padding:4px 0;min-width:180px;animation:contextMenuFadeIn .15s cubic-bezier(.16,1,.3,1);font-family:var(--vg-font-ui)}.virtualized-grid-context-menu button{width:100%;padding:10px 16px;text-align:left;border:none;background:none;cursor:pointer;font-family:var(--vg-font-display);font-size:.875rem;font-weight:500;color:var(--vg-charcoal);transition:all .2s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}.virtualized-grid-context-menu button:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--vg-copper);transform:translate(-3px);transition:transform .2s cubic-bezier(.16,1,.3,1)}.virtualized-grid-context-menu button:hover{background:linear-gradient(90deg,rgba(184,115,51,.08) 0%,transparent 100%);color:var(--vg-copper-dark);padding-left:20px}.virtualized-grid-context-menu button:hover:before{transform:translate(0)}.virtualized-grid-context-menu button:active{background:#b873331f}.virtualized-grid-context-menu-divider{height:1px;background:linear-gradient(90deg,transparent 0%,var(--vg-copper) 50%,transparent 100%);opacity:.3;margin:4px 8px}.virtualized-grid-context-menu-header{padding:8px 16px 4px;font-family:var(--vg-font-ui);font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--vg-copper)}.virtualized-grid-context-menu button.danger{color:#b91c1c}.virtualized-grid-context-menu button.danger:hover{background:linear-gradient(90deg,rgba(185,28,28,.08) 0%,transparent 100%);color:#991b1b}.virtualized-grid-context-menu button.danger:before{background:#b91c1c}@keyframes contextMenuFadeIn{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}@media(prefers-contrast:high){.virtualized-grid-container{border-width:2px}.virtualized-grid-row{border-bottom-width:2px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
+@import"https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Manrope:wght@300;400;500;600;700&display=swap";:root{--vg-charcoal: #1a1a1a;--vg-charcoal-light: #2a2a2a;--vg-ivory: #faf8f6;--vg-ivory-dark: #f0ede9;--vg-copper: #b87333;--vg-copper-light: #d4935a;--vg-copper-dark: #9a5e28;--vg-border: rgba(184, 115, 51, .15);--vg-shadow: rgba(26, 26, 26, .08);--vg-font-display: "Manrope", sans-serif;--vg-font-ui: "Syne", sans-serif;--vg-spacing-xs: .5rem;--vg-spacing-sm: .75rem;--vg-spacing-md: 1.25rem;--vg-spacing-lg: 2rem}.virtualized-grid-container{position:relative;width:100%;height:100%;background:var(--vg-ivory);border:1px solid var(--vg-border);border-radius:2px;overflow:hidden;font-family:var(--vg-font-ui);isolation:isolate;display:flex;flex-direction:column}.grain-overlay{position:absolute;inset:0;pointer-events:none;opacity:.03;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");z-index:10}.virtualized-grid-header{display:flex;background:linear-gradient(180deg,var(--vg-charcoal) 0%,var(--vg-charcoal-light) 100%);border-bottom:2px solid var(--vg-copper);position:sticky;top:0;z-index:5;box-shadow:0 4px 12px var(--vg-shadow)}.virtualized-grid-header-cell{position:relative;padding:var(--vg-spacing-md) var(--vg-spacing-md);display:flex;flex-direction:column;justify-content:center;border-right:1px solid rgba(184,115,51,.2);animation:fadeInDown .6s cubic-bezier(.16,1,.3,1) both;overflow:hidden}.virtualized-grid-header-cell:last-child{border-right:none}.header-text{font-family:var(--vg-font-ui);font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--vg-ivory);position:relative;z-index:1}.header-accent{position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--vg-copper) 50%,transparent 100%);opacity:0;transition:opacity .4s cubic-bezier(.16,1,.3,1)}.virtualized-grid-header-cell:hover .header-accent{opacity:1}.virtualized-grid-body{overflow:auto;flex:1;position:relative;scrollbar-width:thin;scrollbar-color:var(--vg-copper) var(--vg-ivory-dark);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.virtualized-grid-body::-webkit-scrollbar{width:12px;height:12px}.virtualized-grid-body::-webkit-scrollbar-track{background:var(--vg-ivory-dark)}.virtualized-grid-body::-webkit-scrollbar-thumb{background:var(--vg-copper);border-radius:6px;border:2px solid var(--vg-ivory-dark);transition:background .3s ease}.virtualized-grid-body::-webkit-scrollbar-thumb:hover{background:var(--vg-copper-dark)}.virtualized-grid-row{display:flex;border-bottom:1px solid var(--vg-border);background-color:var(--vg-ivory);transition:all .3s cubic-bezier(.16,1,.3,1);position:relative;isolation:isolate;min-height:48px}.virtualized-grid-row.clickable{cursor:pointer}.virtualized-grid-row.selected{background-color:#b873331f;border-bottom-color:var(--vg-copper);box-shadow:inset 3px 0 0 var(--vg-copper),0 2px 8px var(--vg-shadow);z-index:2}.virtualized-grid-row.selected .cell-content{color:var(--vg-copper-dark);font-weight:600}.row-shimmer{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(184,115,51,.1) 50%,transparent 100%);opacity:0;transform:translate(-100%);transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .3s ease;pointer-events:none;z-index:-1}.virtualized-grid-cell{padding:var(--vg-spacing-md);display:flex;align-items:flex-start;border-right:1px solid rgba(184,115,51,.08);position:relative;min-height:48px}.virtualized-grid-cell:last-child{border-right:none}.cell-content{font-family:var(--vg-font-display);font-size:.9375rem;font-weight:500;color:var(--vg-charcoal);line-height:1.5;letter-spacing:-.01em;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;transition:all .3s cubic-bezier(.16,1,.3,1);width:100%}.cell-content .skeleton-shimmer{width:80%;height:16px;background:linear-gradient(90deg,var(--vg-ivory-dark) 0%,var(--vg-ivory) 50%,var(--vg-ivory-dark) 100%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.virtualized-grid-container.loading{pointer-events:none}.virtualized-grid-container.loading:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(250,248,246,.8) 50%,transparent 100%);animation:shimmer 2s infinite;z-index:20}@media(max-width:768px){.virtualized-grid-header-cell,.virtualized-grid-cell{padding:var(--vg-spacing-sm)}.header-text{font-size:.625rem}.cell-content{font-size:1rem}}.virtualized-grid-context-menu{position:fixed;z-index:50;background:var(--vg-ivory);border:2px solid var(--vg-copper);border-radius:2px;box-shadow:0 8px 24px #1a1a1a26,0 2px 8px #b873331a;padding:4px 0;min-width:180px;animation:contextMenuFadeIn .15s cubic-bezier(.16,1,.3,1);font-family:var(--vg-font-ui)}.virtualized-grid-context-menu button{width:100%;padding:10px 16px;text-align:left;border:none;background:none;cursor:pointer;font-family:var(--vg-font-display);font-size:.875rem;font-weight:500;color:var(--vg-charcoal);transition:all .2s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}.virtualized-grid-context-menu button:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--vg-copper);transform:translate(-3px);transition:transform .2s cubic-bezier(.16,1,.3,1)}.virtualized-grid-context-menu button:hover{background:linear-gradient(90deg,rgba(184,115,51,.08) 0%,transparent 100%);color:var(--vg-copper-dark);padding-left:20px}.virtualized-grid-context-menu button:hover:before{transform:translate(0)}.virtualized-grid-context-menu button:active{background:#b873331f}.virtualized-grid-context-menu-divider{height:1px;background:linear-gradient(90deg,transparent 0%,var(--vg-copper) 50%,transparent 100%);opacity:.3;margin:4px 8px}.virtualized-grid-context-menu-header{padding:8px 16px 4px;font-family:var(--vg-font-ui);font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--vg-copper)}.virtualized-grid-context-menu button.danger{color:#b91c1c}.virtualized-grid-context-menu button.danger:hover{background:linear-gradient(90deg,rgba(185,28,28,.08) 0%,transparent 100%);color:#991b1b}.virtualized-grid-context-menu button.danger:before{background:#b91c1c}@keyframes contextMenuFadeIn{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}@media(prefers-contrast:high){.virtualized-grid-container{border-width:2px}.virtualized-grid-row{border-bottom-width:2px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

package/dist/stories/customization/SkeletonCustomization.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DataGrid } from '../../DataGrid';
+declare const meta: Meta<typeof DataGrid>;
+export default meta;
+type Story = StoryObj<typeof DataGrid>;
+export declare const Default: Story;
+export declare const CustomColors: Story;
+export declare const SlowAnimation: Story;
+export declare const FastAnimation: Story;
+export declare const NoAnimation: Story;
+export declare const CustomDimensions: Story;
+export declare const DarkTheme: Story;
+export declare const BrandColors: Story;

package/dist/types.d.ts

@@ -158,6 +158,8 @@ export interface GridClasses {
     filterIconStyle?: CSSObject;
     filterIconActive?: string;
     filterIconActiveStyle?: CSSObject;
+    skeleton?: string;
+    skeletonStyle?: CSSObject;
 }
 export interface VirtualizedGridProps<T = any> {
     columns: ColumnDef<T>[];