@toolbox-web/grid-react 0.8.0 → 0.9.0

package/lib/data-grid.d.ts

@@ -125,6 +125,31 @@ export interface DataGridProps<TRow = unknown> extends AllFeatureProps<TRow>, Ev
      * ```
      */
     selectable?: boolean;
+    /**
+     * Show a loading overlay on the grid.
+     * Use this during initial data fetch or refresh operations.
+     *
+     * For row/cell loading states, use the ref to access methods:
+     * - `ref.element.setRowLoading(rowId, true/false)`
+     * - `ref.element.setCellLoading(rowId, field, true/false)`
+     *
+     * @default false
+     *
+     * @example
+     * ```tsx
+     * const [loading, setLoading] = useState(true);
+     *
+     * useEffect(() => {
+     *   fetchData().then(data => {
+     *     setRows(data);
+     *     setLoading(false);
+     *   });
+     * }, []);
+     *
+     * <DataGrid loading={loading} rows={rows} />
+     * ```
+     */
+    loading?: boolean;
     /** Edit trigger mode - DEPRECATED: use `editing` prop instead */
     editOn?: 'click' | 'dblclick' | 'none';
     /** Custom CSS styles to inject into grid shadow DOM */
@@ -171,6 +196,16 @@ export interface DataGridRef<TRow = unknown> {
     registerStyles: (id: string, css: string) => void;
     /** Unregister custom styles */
     unregisterStyles: (id: string) => void;
+    /** Set loading state for a specific row */
+    setRowLoading: (rowId: string, loading: boolean) => void;
+    /** Set loading state for a specific cell */
+    setCellLoading: (rowId: string, field: string, loading: boolean) => void;
+    /** Check if a row is in loading state */
+    isRowLoading: (rowId: string) => boolean;
+    /** Check if a cell is in loading state */
+    isCellLoading: (rowId: string, field: string) => boolean;
+    /** Clear all loading states (grid, rows, and cells) */
+    clearAllLoading: () => void;
 }
 /**
  * React wrapper component for the tbw-grid web component.

package/lib/data-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-grid.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/data-grid.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"data-grid.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/data-grid.tsx"],"names":[],"mappings":"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"}

package/lib/grid-icon-registry.d.ts

@@ -0,0 +1,95 @@
+import { GridIcons } from '@toolbox-web/grid';
+import { FC, ReactNode } from 'react';
+/**
+ * Context for providing icon overrides to grids.
+ * @internal
+ */
+export declare const GridIconContext: import('react').Context<Partial<GridIcons> | null>;
+/**
+ * Props for the GridIconProvider component.
+ */
+export interface GridIconProviderProps {
+    /**
+     * Icon overrides to provide to all descendant grids.
+     * Only specify icons you want to override - defaults are used for the rest.
+     *
+     * @example
+     * ```tsx
+     * const icons = {
+     *   expand: '➕',
+     *   collapse: '➖',
+     *   sortAsc: '↑',
+     *   sortDesc: '↓',
+     * };
+     *
+     * <GridIconProvider icons={icons}>
+     *   <App />
+     * </GridIconProvider>
+     * ```
+     */
+    icons: Partial<GridIcons>;
+    children: ReactNode;
+}
+/**
+ * Provides application-wide icon overrides for all descendant grids.
+ *
+ * Wrap your application (or part of it) with this provider to customize
+ * grid icons across all DataGrid components.
+ *
+ * @example
+ * ```tsx
+ * // App.tsx or main.tsx
+ * import { GridIconProvider } from '@toolbox-web/grid-react';
+ *
+ * const customIcons = {
+ *   expand: '➕',
+ *   collapse: '➖',
+ *   sortAsc: '↑',
+ *   sortDesc: '↓',
+ *   filter: '<svg>...</svg>',
+ * };
+ *
+ * function App() {
+ *   return (
+ *     <GridIconProvider icons={customIcons}>
+ *       <Dashboard />
+ *     </GridIconProvider>
+ *   );
+ * }
+ * ```
+ *
+ * Available icons to override:
+ * - `expand` - Expand icon for collapsed items (trees, groups, details)
+ * - `collapse` - Collapse icon for expanded items
+ * - `sortAsc` - Sort ascending indicator
+ * - `sortDesc` - Sort descending indicator
+ * - `sortNone` - Sort neutral/unsorted indicator
+ * - `submenuArrow` - Submenu arrow for context menus
+ * - `dragHandle` - Drag handle icon for reordering
+ * - `toolPanel` - Tool panel toggle icon in toolbar
+ * - `filter` - Filter icon in column headers
+ * - `filterActive` - Filter icon when filter is active
+ * - `print` - Print icon for print button
+ */
+export declare const GridIconProvider: FC<GridIconProviderProps>;
+/**
+ * Hook to access icon overrides from context.
+ *
+ * @returns The icon overrides from the nearest GridIconProvider, or null if none.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const icons = useGridIcons();
+ *   console.log('Current expand icon:', icons?.expand);
+ *   return <div />;
+ * }
+ * ```
+ */
+export declare function useGridIcons(): Partial<GridIcons> | null;
+/**
+ * Internal context export for use by DataGrid.
+ * @internal
+ */
+export declare const GridIconContextInternal: import('react').Context<Partial<GridIcons> | null>;
+//# sourceMappingURL=grid-icon-registry.d.ts.map

package/lib/grid-icon-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-icon-registry.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/grid-icon-registry.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAA6B,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3E;;;GAGG;AACH,eAAO,MAAM,eAAe,oDAAiD,CAAC;AAE9E;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC;;;;;;;;;;;;;;;;;OAiBG;IACH,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAEtD,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,IAAI,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAExD;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,oDAAkB,CAAC"}

package/lib/grid-provider.d.ts

@@ -0,0 +1,90 @@
+import { GridIcons } from '@toolbox-web/grid';
+import { FC, ReactNode } from 'react';
+import { TypeDefaultsMap } from './grid-type-registry';
+/**
+ * Props for the GridProvider component.
+ */
+export interface GridProviderProps {
+    /**
+     * Icon overrides to provide to all descendant grids.
+     * Optional - only specify if you want to customize icons.
+     *
+     * @example
+     * ```tsx
+     * icons={{
+     *   expand: '➕',
+     *   collapse: '➖',
+     *   sortAsc: '↑',
+     *   sortDesc: '↓',
+     * }}
+     * ```
+     */
+    icons?: Partial<GridIcons>;
+    /**
+     * Type-level default renderers and editors.
+     * Optional - only specify if you want custom type defaults.
+     *
+     * @example
+     * ```tsx
+     * defaults={{
+     *   country: {
+     *     renderer: (ctx) => <CountryBadge value={ctx.value} />,
+     *     editor: (ctx) => <CountrySelect value={ctx.value} onCommit={ctx.commit} />
+     *   },
+     *   date: {
+     *     renderer: (ctx) => formatDate(ctx.value),
+     *   }
+     * }}
+     * ```
+     */
+    defaults?: TypeDefaultsMap;
+    children: ReactNode;
+}
+/**
+ * Combined provider for application-wide grid configuration.
+ *
+ * This component wraps both `GridTypeProvider` and `GridIconProvider` to reduce
+ * nesting in your component tree. All props are optional - only provide what you need.
+ *
+ * @example
+ * ```tsx
+ * // App.tsx or main.tsx
+ * import { GridProvider } from '@toolbox-web/grid-react';
+ *
+ * const typeDefaults = {
+ *   country: { renderer: (ctx) => <CountryBadge value={ctx.value} /> },
+ *   status: { renderer: (ctx) => <StatusBadge value={ctx.value} /> },
+ * };
+ *
+ * const icons = {
+ *   expand: '➕',
+ *   collapse: '➖',
+ * };
+ *
+ * function App() {
+ *   return (
+ *     <GridProvider defaults={typeDefaults} icons={icons}>
+ *       <Dashboard />
+ *     </GridProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Icons only
+ * <GridProvider icons={{ expand: '+', collapse: '-' }}>
+ *   <App />
+ * </GridProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Type defaults only
+ * <GridProvider defaults={{ date: { renderer: (ctx) => formatDate(ctx.value) } }}>
+ *   <App />
+ * </GridProvider>
+ * ```
+ */
+export declare const GridProvider: FC<GridProviderProps>;
+//# sourceMappingURL=grid-provider.d.ts.map

package/lib/grid-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-provider.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/grid-provider.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE9E;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;;;;;;;;;;;OAaG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAE3B;;;;;;;;;;;;;;;;OAgBG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAC;IAE3B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAgB9C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolbox-web/grid-react",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "React adapter for @toolbox-web/grid data grid component",
   "type": "module",
   "main": "./index.js",