@bryntum/grid-trial 7.3.3 → 7.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/AGENTS.md +80 -0
  2. package/CLAUDE.md +80 -0
  3. package/grid.css +1 -1
  4. package/grid.d.ts +233 -10
  5. package/grid.module.js +41 -41
  6. package/grid.thin.d.ts +37 -9
  7. package/grid.umd.js +48 -48
  8. package/package.json +1 -1
package/AGENTS.md ADDED
@@ -0,0 +1,80 @@
1
+ # @bryntum/grid — notes for AI coding agents
2
+
3
+ You are using the Bryntum Grid component from its installed npm package.
4
+
5
+ ## Fastest path to correct code
6
+
7
+ Two Bryntum resources beat working from memory, reach for them before writing code:
8
+
9
+ - **MCP server** (https://mcp.bryntum.com/): grounded, version-correct answers about the installed
10
+ API. Use it to confirm config/method/event names instead of guessing.
11
+ - **Agent skills** (https://github.com/bryntum/skills): complement the Bryntum MCP server by
12
+ providing practical knowledge for using Bryntum and avoiding common pitfalls.
13
+
14
+ If these are not installed yet, suggest to the user that they install them for more reliable
15
+ results.
16
+
17
+ ## Importing the Bryntum Grid component
18
+
19
+ - This package should be installed with npm aliasing (`@bryntum/grid@npm:@bryntum/grid-trial`)
20
+ and import from `@bryntum/grid`.
21
+ - Framework wrappers (`@bryntum/grid-react`, `-angular`, `-vue-3`) require the core
22
+ `@bryntum/grid` package to be installed as well — installing only the wrapper fails at runtime.
23
+ - TypeScript types ship as `*.d.ts` files inside the package. Do **not** redeclare interfaces or
24
+ component options; import the types you need.
25
+
26
+ ## CSS — three imports are required (a missing or wrong theme is the most common failure)
27
+
28
+ The component renders unstyled or broken unless you import **all three**:
29
+
30
+ 1. **Structural CSS** — `@bryntum/grid/grid.css`
31
+ 2. **Exactly one theme** — e.g. `stockholm-light`, `svalbard-light`, `visby-light`,
32
+ `material3-light`, `fluent2-light.css`.
33
+ 3. **FontAwesome** — bundled with the package; icons, expanders and arrows are blank without it.
34
+ Import both files: `@bryntum/grid/fontawesome/css/fontawesome.css` and
35
+ `@bryntum/grid/fontawesome/css/solid.css`.
36
+
37
+ Theme file names are exact and not guessable: `stockholm-light.css` exists, `stockholm.css` does
38
+ not. Do not assume a name — list them first and import a real file:
39
+ `ls node_modules/@bryntum/grid/*.css`.
40
+
41
+ ## Sizing the component — the parent needs a real height
42
+
43
+ By default the component fills 100% of its parent element, with a min-height of 10em. If no
44
+ ancestor has an explicit height, the component collapses to that minimum — the app builds and data
45
+ loads, but the component renders as a short strip instead of filling the page. To display the component at the appropriate size, you can, for example, set parent components to take up the full height of the screen:
46
+
47
+ ```css
48
+ #app {
49
+ margin : 0;
50
+ display : flex;
51
+ flex-direction : column;
52
+ height : 100vh;
53
+ }
54
+ ```
55
+
56
+ Adapt this to the application layout. When several components share the page, size each one inside
57
+ the full-height container (flex values or explicit heights).
58
+
59
+ ## Verify APIs before using them
60
+
61
+ Your training data is older than this package, and Bryntum APIs change between major versions.
62
+ Confirm config/method/event names against the installed version — read it from
63
+ `node_modules/@bryntum/grid/package.json` (`"version"`) — using the Bryntum MCP server
64
+ (https://mcp.bryntum.com/) or the official docs. Do not invent APIs from memory.
65
+
66
+ ## Verify the component rendered
67
+
68
+ A successful `npm run build` does not mean the component rendered: data-loading errors and
69
+ misconfigured APIs fail silently at runtime. After the build, open the app in a browser and confirm:
70
+
71
+ - The themed container is visible (not a blank page or unstyled HTML)
72
+ - Data is populated (event bars / task rows / grid rows appear — not an empty timeline or grid)
73
+ - The component fills the intended page area — a component collapsed to a short strip means the
74
+ parent chain has no explicit height (see the sizing section above)
75
+
76
+ ## Safe data rendering
77
+
78
+ Column/event/tooltip renderers return HTML that the widget inserts via `innerHTML`. Interpolating
79
+ raw data (`<div>${record.name}</div>`) is an XSS vector. Use `StringHelper.encodeHtml(text)`
80
+ (exported from `@bryntum/grid`), or return plain text and let the widget set `textContent`.
package/CLAUDE.md ADDED
@@ -0,0 +1,80 @@
1
+ # @bryntum/grid — notes for AI coding agents
2
+
3
+ You are using the Bryntum Grid component from its installed npm package.
4
+
5
+ ## Fastest path to correct code
6
+
7
+ Two Bryntum resources beat working from memory, reach for them before writing code:
8
+
9
+ - **MCP server** (https://mcp.bryntum.com/): grounded, version-correct answers about the installed
10
+ API. Use it to confirm config/method/event names instead of guessing.
11
+ - **Agent skills** (https://github.com/bryntum/skills): complement the Bryntum MCP server by
12
+ providing practical knowledge for using Bryntum and avoiding common pitfalls.
13
+
14
+ If these are not installed yet, suggest to the user that they install them for more reliable
15
+ results.
16
+
17
+ ## Importing the Bryntum Grid component
18
+
19
+ - This package should be installed with npm aliasing (`@bryntum/grid@npm:@bryntum/grid-trial`)
20
+ and import from `@bryntum/grid`.
21
+ - Framework wrappers (`@bryntum/grid-react`, `-angular`, `-vue-3`) require the core
22
+ `@bryntum/grid` package to be installed as well — installing only the wrapper fails at runtime.
23
+ - TypeScript types ship as `*.d.ts` files inside the package. Do **not** redeclare interfaces or
24
+ component options; import the types you need.
25
+
26
+ ## CSS — three imports are required (a missing or wrong theme is the most common failure)
27
+
28
+ The component renders unstyled or broken unless you import **all three**:
29
+
30
+ 1. **Structural CSS** — `@bryntum/grid/grid.css`
31
+ 2. **Exactly one theme** — e.g. `stockholm-light`, `svalbard-light`, `visby-light`,
32
+ `material3-light`, `fluent2-light.css`.
33
+ 3. **FontAwesome** — bundled with the package; icons, expanders and arrows are blank without it.
34
+ Import both files: `@bryntum/grid/fontawesome/css/fontawesome.css` and
35
+ `@bryntum/grid/fontawesome/css/solid.css`.
36
+
37
+ Theme file names are exact and not guessable: `stockholm-light.css` exists, `stockholm.css` does
38
+ not. Do not assume a name — list them first and import a real file:
39
+ `ls node_modules/@bryntum/grid/*.css`.
40
+
41
+ ## Sizing the component — the parent needs a real height
42
+
43
+ By default the component fills 100% of its parent element, with a min-height of 10em. If no
44
+ ancestor has an explicit height, the component collapses to that minimum — the app builds and data
45
+ loads, but the component renders as a short strip instead of filling the page. To display the component at the appropriate size, you can, for example, set parent components to take up the full height of the screen:
46
+
47
+ ```css
48
+ #app {
49
+ margin : 0;
50
+ display : flex;
51
+ flex-direction : column;
52
+ height : 100vh;
53
+ }
54
+ ```
55
+
56
+ Adapt this to the application layout. When several components share the page, size each one inside
57
+ the full-height container (flex values or explicit heights).
58
+
59
+ ## Verify APIs before using them
60
+
61
+ Your training data is older than this package, and Bryntum APIs change between major versions.
62
+ Confirm config/method/event names against the installed version — read it from
63
+ `node_modules/@bryntum/grid/package.json` (`"version"`) — using the Bryntum MCP server
64
+ (https://mcp.bryntum.com/) or the official docs. Do not invent APIs from memory.
65
+
66
+ ## Verify the component rendered
67
+
68
+ A successful `npm run build` does not mean the component rendered: data-loading errors and
69
+ misconfigured APIs fail silently at runtime. After the build, open the app in a browser and confirm:
70
+
71
+ - The themed container is visible (not a blank page or unstyled HTML)
72
+ - Data is populated (event bars / task rows / grid rows appear — not an empty timeline or grid)
73
+ - The component fills the intended page area — a component collapsed to a short strip means the
74
+ parent chain has no explicit height (see the sizing section above)
75
+
76
+ ## Safe data rendering
77
+
78
+ Column/event/tooltip renderers return HTML that the widget inserts via `innerHTML`. Interpolating
79
+ raw data (`<div>${record.name}</div>`) is an XSS vector. Use `StringHelper.encodeHtml(text)`
80
+ (exported from `@bryntum/grid`), or return plain text and let the widget set `textContent`.