@ukhomeoffice/formio-gds-template 2.0.2 → 3.0.0-bravo

package/src/components/select/GDSSelect.ts

@@ -0,0 +1,418 @@
+import { Components } from '@formio/js';
+import _ from 'lodash';
+import { SelectComponent as CoreSelectComponent } from '../../types';
+
+const Select = Components.components.select;
+
+// Choices.js choice object (internal shape used by the store).
+interface ChoiceItem {
+    label: string;
+    active: boolean;
+    rank: number;
+    id: string | number;
+    choiceEl?: HTMLElement;
+    [key: string]: unknown;
+}
+
+interface SearchResult {
+    item: ChoiceItem;
+    score: number;
+    rank: number;
+}
+
+// Minimal interface for the choices.js instance attached as `this.choices`.
+interface ChoicesInstance {
+    _isSearching: boolean;
+    _currentValue: string;
+    _store: {
+        choices: ChoiceItem[];
+        dispatch(action: { type: string; active?: boolean; results?: SearchResult[] }): void;
+    };
+    _searchChoices?: (needle: string) => number | null;
+    input?: { element?: HTMLInputElement };
+}
+
+/**
+ * A formio item from a URL datasource — at minimum it has an id and arbitrary
+ * string fields (e.g. name, code). We only constrain what we actually access.
+ */
+interface ReferenceItem {
+    id?: string | number;
+    label?: string;
+    [key: string]: unknown;
+}
+
+/**
+ * Shape of the `value` argument passed to itemTemplate / getOptionTemplate.
+ * For reference selects (valueProperty = '') this is the full item object;
+ * for string selects it is a plain string.
+ */
+type SelectValue = ReferenceItem | string | number | null | undefined;
+
+export default class GDSSelect extends Select {
+    declare component: CoreSelectComponent;
+
+    // Keep the patched instance, rather than a boolean, because redraw can
+    // destroy and recreate Choices.
+    protected _gdsSearchPatchedChoices?: ChoicesInstance;
+    // The interpolated `filter` that produced the currently loaded options.
+    protected _gdsFilterKey?: string;
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    constructor(component?: any, options?: any, data?: any) {
+        super(component, options, data);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    init(): any {
+        // Clear searchField so Form.io does not trigger server-side queries while
+        // the complete reference dataset is filtered locally.
+        if (this.component.searchField) {
+            this.component.searchField = '';
+        }
+        // Reference-data selects are filtered locally. Do not truncate the
+        // alphabetically sorted API response before local filtering.
+        const url = (this.component.data as { url?: unknown } | undefined)?.url;
+        if (typeof url === 'string' && url.includes('/v2/entities/') && (this.component.limit ?? 100) < 1000) {
+            this.component.disableLimit = true;
+        }
+        return super.init();
+    }
+
+    /**
+     * Patch the choices.js instance attached to this component so that every
+     * search query uses a plain case-insensitive substring filter instead of
+     * fuse.js. The patch is applied lazily the first time items are set so
+     * that `this.choices` is guaranteed to exist.
+     */
+    protected _patchChoicesSearch(): void {
+        const choices = (this as unknown as { choices: ChoicesInstance }).choices;
+        if (!choices || choices === this._gdsSearchPatchedChoices) {
+            return;
+        }
+        this._gdsSearchPatchedChoices = choices;
+
+        // Replace the internal search method with a substring implementation.
+        (choices as unknown as Record<string, unknown>)._searchChoices = (needle: string): number | null => {
+            if (!needle) {
+                choices._isSearching = false;
+                choices._currentValue = '';
+                choices._store.dispatch({ type: 'ACTIVATE_CHOICES', active: true });
+                return 0;
+            }
+
+            const normalizedNeedle = needle.trim().toLowerCase().replace(/\s{2,}/g, ' ');
+            if (!normalizedNeedle || normalizedNeedle === choices._currentValue) {
+                return null;
+            }
+
+            const words = normalizedNeedle.split(/\s+/).filter(Boolean);
+            const allChoices: ChoiceItem[] = choices._store.choices;
+
+            const matched: SearchResult[] = [];
+            const prefix: ChoiceItem[] = [];
+            const contains: ChoiceItem[] = [];
+
+            for (const choice of allChoices) {
+                const renderedLabel = choice.choiceEl?.textContent || '';
+                const label = [choice.label, renderedLabel, choice.value]
+                    .map((value) => String(value ?? '').toLowerCase())
+                    .join(' ');
+                const allMatch = words.every((w) => label.includes(w));
+                if (!allMatch) {
+                    choice.active = false;
+                    choice.rank = 0;
+                    continue;
+                }
+                if (label.startsWith(normalizedNeedle)) {
+                    prefix.push(choice);
+                } else {
+                    contains.push(choice);
+                }
+            }
+
+            // Prefix matches first, then other substring matches, both sorted
+            // alphabetically within their group.
+            prefix.sort((a, b) => a.label.localeCompare(b.label));
+            contains.sort((a, b) => a.label.localeCompare(b.label));
+            [...prefix, ...contains].forEach((choice, index) => {
+                matched.push({
+                    item: choice,
+                    score: 0,
+                    rank: index + 1,
+                });
+            });
+
+            choices._isSearching = true;
+            choices._currentValue = normalizedNeedle;
+            choices._store.dispatch({ type: 'FILTER_CHOICES', results: matched });
+
+            return matched.length;
+        };
+    }
+
+    /**
+     * True when this select's `filter` is interpolated from other form data
+     * (e.g. a port list filtered by the selected country).
+     */
+    protected get _gdsHasDynamicFilter(): boolean {
+        return typeof this.component.filter === 'string' && this.component.filter.includes('{{');
+    }
+
+    /** The interpolated filter, used to detect when the dependency changed. */
+    protected _gdsCurrentFilterKey(): string {
+        return this._gdsHasDynamicFilter ? this.interpolate(this.component.filter as string) : '';
+    }
+
+    // Preserve Form.io's item lifecycle, then patch the Choices instance that
+    // Form.io has populated.
+    setItems(items: unknown, fromSearch?: boolean): void {
+        super.setItems(items, fromSearch);
+        if (!fromSearch) {
+            this._gdsFilterKey = this._gdsCurrentFilterKey();
+        }
+        this._patchChoicesSearch();
+    }
+
+    // Also patch on attach in case setItems was already called.
+    attach(element: HTMLElement): Promise<unknown> {
+        const result = super.attach(element);
+        this._patchChoicesSearch();
+        return Promise.resolve(result);
+    }
+
+    // Form.io only refreshes a URL select with an interpolated filter when the
+    // component is redrawn, or when it transitions hidden -> visible (see the
+    // `visible` setter in Select). A select that is already visible when its
+    // filter dependency changes is therefore never re-fetched, leaving stale
+    // options (e.g. changing country a second time keeps the first country's
+    // ports). checkComponentConditions runs for every component on every data
+    // change, so compare the interpolated filter here and reload when it moves.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    checkComponentConditions(data: any, flags: any, row: any): boolean {
+        const visible = super.checkComponentConditions(data, flags, row);
+
+        // `_gdsFilterKey` is only set once options have been loaded, so this
+        // cannot force a premature fetch for a lazyLoad select that the user has
+        // not opened yet. Note `active` is deliberately not checked: Form.io's
+        // `visible` setter calls triggerUpdate() without calling activate(), so
+        // a loaded lazyLoad select can still report active === false.
+        if (
+            visible &&
+            this.component.dataSrc === 'url' &&
+            this._gdsHasDynamicFilter &&
+            this._gdsFilterKey !== undefined &&
+            !this.loading
+        ) {
+            const filterKey = this._gdsCurrentFilterKey();
+            if (filterKey !== this._gdsFilterKey) {
+                // Record before requesting so a change that arrives while the
+                // request is in flight does not queue a duplicate fetch.
+                this._gdsFilterKey = filterKey;
+                this.triggerUpdate?.(null, true);
+            }
+        }
+
+        return visible;
+    }
+
+    // formio's redraw() and activate() both call triggerUpdate() -> updateItems(null, false),
+    // which would cause a URL re-fetch even when items are already cached. We suppress
+    // the re-fetch when the cache is valid, but we must still re-populate choices.js
+    // with the cached items. This matters because activate() calls setLoadingItem()
+    // before triggerUpdate(), which replaces the choices list with a spinner. Without
+    // re-calling setItems the spinner stays even though data is already available.
+    //
+    // Filter-dependency changes (refreshOn) always arrive with forceUpdate=true via
+    // Select.refresh(), so they bypass this guard and fetch fresh data as expected.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    updateItems(searchInput: unknown, forceUpdate: boolean): any {
+        if (
+            !forceUpdate &&
+            !searchInput &&
+            this.component.dataSrc === 'url' &&
+            this._gdsFilterKey === this._gdsCurrentFilterKey() &&
+            Array.isArray(this.downloadedResources) &&
+            this.downloadedResources.length > 0 &&
+            !this.loading
+        ) {
+            // Re-populate choices from the cache so any spinner set by activate()
+            // is replaced with the actual items, then resolve the loaded promise.
+            this.setItems(this.downloadedResources, false);
+            return;
+        }
+        return super.updateItems(searchInput, forceUpdate);
+    }
+
+    /**
+     * Override getOptionTemplate to escape item data values with `_.escape()`
+     * before interpolating them into the template.
+     *
+     * ## Security model
+     *
+     * formio 5.x `getOptionTemplate` (ListComponent) passes the assembled template
+     * string through `DOMPurify.sanitize()` — which internally calls
+     * `DOMParser.parseFromString()`. With thousands of reference-data items this
+     * is the dominant performance cost (~300 ms).
+     *
+     * We replace that post-hoc sanitization with pre-interpolation escaping:
+     *
+     * 1. Every string value in the item object is passed through `_.escape()`
+     *    **before** it is substituted into the template. `_.escape` converts
+     *    `< > & " '` to their HTML-entity equivalents (`&lt;` etc.).
+     * 2. The assembled template string — now containing only safe entity-encoded
+     *    text where user/API data appears — is returned directly without any
+     *    further DOMPurify call.
+     *
+     * ### Why this is equivalent security to DOMPurify for text-content templates
+     *
+     * A template such as `<span>{{ item.name }}</span>` embeds the API value as
+     * the *text content* of an element. The only injection vector is:
+     *
+     * ```
+     * item.name = '</span><script>alert(1)</script>'
+     * ```
+     *
+     * After `_.escape()` this becomes:
+     *
+     * ```
+     * &lt;/span&gt;&lt;script&gt;alert(1)&lt;/script&gt;
+     * ```
+     *
+     * The browser renders this as literal text, never as markup or script.
+     * DOMPurify would produce the same effective result by stripping the tags.
+     *
+     * ### Limitation — attribute / URL contexts
+     *
+     * `_.escape()` is **not** sufficient if the template places a value inside
+     * an HTML attribute or a URL (e.g. `<a href="{{ item.url }}">`).
+     * HTML-entity encoding does not prevent `javascript:` injection in `href`.
+     * If any form schema introduces such a template, this override must be
+     * revisited and either DOMPurify reinstated or the attribute value
+     * sanitized separately.
+     *
+     * Current GDS templates are all text-content only (`<span>{{ item.name }}</span>`
+     * etc.) so this limitation does not apply today.
+     */
+    getOptionTemplate(data: ReferenceItem, value: SelectValue, index?: number): string {
+        if (!this.component.template) {
+            return String(data.label ?? '');
+        }
+        const options = { noeval: true, data: {} as Record<string, unknown> };
+        // Escape all top-level string values in the item before interpolation.
+        // Nested objects are left as-is; they would need to be accessed via
+        // item.nested.field in the template, which is not used by current schemas.
+        const escapedData: ReferenceItem = _.mapValues(
+            data as Record<string, unknown>,
+            (v): unknown => (typeof v === 'string' ? _.escape(v) : v)
+        ) as ReferenceItem;
+        const template: string = this.component.template
+            ? this.interpolate(this.component.template, { item: escapedData }, options)
+            : String(data.label ?? '');
+        // Store template data for reference-field selected-value display.
+        // The `reference` flag is not in the generated CoreSelectComponent type
+        // but is a valid runtime formio property.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const isReference = Boolean((this.component as any).reference);
+        const rawId = (value as { _id?: unknown } | null | undefined)?._id;
+        const templateValue: SelectValue = isReference && rawId != null
+            ? String(rawId)
+            : value;
+        if (
+            templateValue != null &&
+            !_.isObject(templateValue) &&
+            (options.data as Record<string, unknown>).item
+        ) {
+            this.templateData[templateValue as string] = (options.data as Record<string, unknown>).item;
+        }
+        if (_.isNumber(index)) {
+            this.templateData[index] = (options.data as Record<string, unknown>).item;
+        }
+        return template;
+    }
+
+    /**
+     * Override itemTemplate to skip the redundant outer `sanitize()` call that
+     * formio 5.x `ListComponent.itemTemplate` wraps around `getOptionTemplate()`.
+     *
+     * ## Why the outer sanitize is now safe to skip
+     *
+     * Our `getOptionTemplate` override (above) pre-escapes all API data values
+     * with `_.escape()` before they are interpolated into the template. The
+     * assembled string therefore contains no unescaped HTML from variable sources.
+     * Running DOMPurify on that string a second time is idempotent — it produces
+     * the same output — but costs a full `DOMParser.parseFromString` call per item.
+     *
+     * This override handles only the common URL-datasource path (object data with
+     * a component template). All other branches — primitives, arrays, read-only,
+     * selectData, reference fields — fall through to `super.itemTemplate` which
+     * retains its full sanitize() call unchanged.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    itemTemplate(data: ReferenceItem | string | number | unknown[], value: SelectValue, index?: number): any {
+        if (
+            typeof data === 'object' &&
+            data !== null &&
+            !Array.isArray(data) &&
+            this.component.template
+        ) {
+            // getOptionTemplate pre-escapes data values — no further sanitize needed.
+            const template = this.getOptionTemplate(data as ReferenceItem, value, index);
+            if (!template) {
+                return this.sanitize(JSON.stringify(data), this.shouldSanitizeValue);
+            }
+            // Strip tags to extract the visible label text for i18n translation,
+            // then re-embed it. This mirrors ListComponent.itemTemplate exactly.
+            const label = template.replace(/<\/?[^>]+(>|$)/g, '');
+            if (!label) return template;
+            return template.replace(label, this.t(label, { _userInput: true }));
+        }
+
+        // Fall back to the full Select → ListComponent chain for all other cases.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return super.itemTemplate(data as any, value, index);
+    }
+
+    // Disable Choices' fuzzy search and use the deterministic matcher above.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    choicesOptions(): Record<string, any> {
+        const options = super.choicesOptions();
+        // Force Choices.js client-side searching.
+        // The instance method is replaced in _patchChoicesSearch with the GDS matcher.
+        options.searchChoices = true;
+        options.searchFloor = 0;
+        options.searchFields = ['label', 'value'];
+
+        // If searchResultLimit is configured too low, raise it to at least limit or 100.
+        const itemLimit: number = this.component.limit || 100;
+        if (typeof options.searchResultLimit === 'number' && options.searchResultLimit < itemLimit) {
+            options.searchResultLimit = itemLimit;
+        }
+        if (typeof options.renderChoiceLimit === 'number' && options.renderChoiceLimit < itemLimit) {
+            options.renderChoiceLimit = itemLimit;
+        }
+
+        // formio's default valueComparer is lodash.isEqual — a deep recursive comparison.
+        // choices.js calls this for every choice in the store when resolving which item
+        // is selected (setChoices / _isSelectedByValue). With thousands of object values
+        // {id, name} this produces O(n × depth) recursive comparisons (~5 s).
+        //
+        // For reference-data objects we compare by `id` alone: each port/currency/etc.
+        // has a unique id, so two values are equal iff their ids match — O(1) per call.
+        // Primitives fall back to ===, matching choices.js's own default.
+        options.valueComparer = (a: unknown, b: unknown): boolean => {
+            if (a === b) return true;
+            if (a == null || b == null) return false;
+            if (typeof a === 'object' && typeof b === 'object') {
+                const aId = (a as Record<string, unknown>).id;
+                const bId = (b as Record<string, unknown>).id;
+                if (aId !== undefined && bId !== undefined) {
+                    return aId === bId;
+                }
+            }
+            return false;
+        };
+
+        return options;
+    }
+}

package/src/components/selectboxes/GDSCheckBoxes.ts

@@ -1,20 +1,19 @@
-import {Components} from 'formiojs';
+import { Components } from '@formio/js';
+import { SelectBoxesComponent } from '../../types';
+
 const Field = Components.components.field;
 const SelectBoxes = Components.components.selectboxes;
 
 export default class GDSCheckBoxes extends SelectBoxes {
-    public render() {
-         // @ts-ignore
+    // Narrow the inherited `component: any` using the @formio/core SelectBoxesComponent schema.
+    declare component: SelectBoxesComponent;
+
+    public render(): string {
         return Field.prototype.render.call(this, this.renderTemplate('selectboxes', {
-            // @ts-ignore
             input: this.inputInfo,
-            // @ts-ignore
             inline: this.component.inline,
-            // @ts-ignore
             values: this.component.values,
-            // @ts-ignore
             value: this.dataValue,
-            // @ts-ignore
             row: this.row,
         }));
     }

package/src/components/time/GDSTimeComponent.ts

@@ -1,23 +1,31 @@
-import {Components} from 'formiojs';
+import { Components } from '@formio/js';
 import moment from 'moment';
 import TimeHelper from '../util/TimeHelper';
+import { CoreTimeComponent } from '../../types';
 
 const Field = Components.components.field;
 const Time = Components.components.time;
 
-// @ts-ignore
 export default class GDSTimeComponent extends Time {
     public static MAX_LENGTH = 2;
 
-    private refs: any;
-    private component: any;
-    private loadRefs: any;
-    private checkComponentValidity: any;
-    private updateValue: any;
+    // Narrow the inherited `component: any` using the @formio/core TimeComponent schema.
+    declare component: CoreTimeComponent;
+
+    // Narrow `refs: {}` to the specific refs loaded by this component.
+    declare refs: {
+        hour: HTMLInputElement;
+        minute: HTMLInputElement;
+    };
+
+    // Narrow `data: any` to a typed record.
+    declare data: Record<string, unknown>;
 
     private timeHelper: TimeHelper = new TimeHelper();
 
-    public attach(element) {
+    // element typed as `any` to match the base component attach(element: any) override signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    public attach(element: any): Promise<void> {
         this.loadRefs(element, {
             hour: 'single',
             minute: 'single',
@@ -27,47 +35,48 @@ export default class GDSTimeComponent extends Time {
             this.timeHelper.checkAndValidateHour(this.refs.hour);
             this.setPristine(false);
             this.checkComponentValidity(this.data, true);
-            this.updateValue(null, {modified: true});
+            this.updateValue(null, { modified: true });
         });
 
         this.addEventListener(this.refs.minute, 'input', () => {
             this.timeHelper.checkAndValidateMinutes(this.refs.minute);
             this.setPristine(false);
             this.checkComponentValidity(this.data, true);
-            this.updateValue(null, {modified: true});
+            this.updateValue(null, { modified: true });
         });
 
-        this.addEventListener(this.refs.hour, 'keypress', (evt) => {
+        this.addEventListener(this.refs.hour, 'keypress', (evt: KeyboardEvent) => {
             this.timeHelper.preventNonNumericKeyPress(evt);
         });
 
-        this.addEventListener(this.refs.minute, 'keypress', (evt) => {
+        this.addEventListener(this.refs.minute, 'keypress', (evt: KeyboardEvent) => {
             this.timeHelper.preventNonNumericKeyPress(evt);
         });
+
         return super.attach(element);
     }
 
-    public setErrorClasses(elements, dirty, hasError) {
-        // @ts-ignore
-        super.setErrorClasses( [this.refs.hour, this.refs.minute, ...elements], dirty, hasError);
+    // elements typed as `any` to match the base Day.setErrorClasses(elements: any, ...) override signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    public setErrorClasses(elements: any, dirty: any, hasError: any): void {
+        super.setErrorClasses([this.refs.hour, this.refs.minute, ...elements], dirty, hasError);
     }
 
-    // @ts-ignore
-    public addInputError(message: any, dirty: boolean, element: any): void {
-        // @ts-ignore
+    // message/dirty/element typed as `any` to match the base Component.addInputError(message: any, dirty: any, elements: any) signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    public addInputError(message: any, dirty: any, element: any): void {
         super.addInputError(message, dirty, [this.refs.hour, this.refs.minute]);
-        // @ts-ignore
         super.addInputError(message, dirty, element);
     }
 
-    public removeInputError(elements) {
-        // @ts-ignore
+    // elements typed as `any` to match the base Component.removeInputError(elements: any) signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    public removeInputError(elements: any): void {
         super.removeInputError([this.refs.hour, this.refs.minute]);
-        // @ts-ignore
         super.removeInputError(elements);
     }
 
-    public getValue() {
+    public getValue(): string {
         if (!this.refs.hour.value || !this.refs.minute.value) {
             return '';
         }
@@ -75,10 +84,11 @@ export default class GDSTimeComponent extends Time {
         return moment(value, this.component.format).format(this.component.dataFormat);
     }
 
-    public setValue(value: any, flags: any) {
-
+    // value/flags typed as `any` to match the base Component.setValue(value: any, flags: any) override signature
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    public setValue(value: any, _flags: any): boolean {
         if (this.refs.hour && this.refs.minute && value) {
-            const parts = value.split(':');
+            const parts = (value as string).split(':');
             this.refs.hour.value = parts[0];
             this.refs.minute.value = parts[1];
             return true;
@@ -86,7 +96,7 @@ export default class GDSTimeComponent extends Time {
         return false;
     }
 
-    public render() {
+    public render(): string {
         return Field.prototype.render.call(this, this.renderTemplate('time', {
             hour: super.getValue().split(':')[0],
             minute: super.getValue().split(':')[1],

package/src/components/util/TimeHelper.ts

@@ -1,8 +1,10 @@
+import { InputElementLike } from '../../types';
+
 export default class TimeHelper {
 
     public static MAX_LENGTH = 2;
 
-    public checkAndValidateMinutes(element: any): void {
+    public checkAndValidateMinutes(element: InputElementLike): void {
         if (element.value) {
             if (element.value.length > TimeHelper.MAX_LENGTH) {
                 element.value = element.value.slice(0, 2);
@@ -17,8 +19,7 @@ export default class TimeHelper {
         }
     }
 
-    public checkAndValidateHour(element: any): void {
-
+    public checkAndValidateHour(element: InputElementLike): void {
         if (element.value) {
             if (element.value.length > TimeHelper.MAX_LENGTH) {
                 element.value = element.value.slice(0, 2);
@@ -34,13 +35,13 @@ export default class TimeHelper {
         }
     }
 
-    public preventNonNumericKeyPress(evt: any) {
+    public preventNonNumericKeyPress(evt: KeyboardEvent): void {
         if (evt.which !== 8 && evt.which !== 0 && evt.which < 48 || evt.which > 57) {
             evt.preventDefault();
         }
     }
 
-    validateDateInput(element: any, length: number) {
+    public validateDateInput(element: InputElementLike, length: number): void {
         if (element.value && element.value.length > length) {
             element.value = element.value.slice(0, length);
         }

package/src/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+    const content: string;
+    export default content;
+}

package/src/templates/gds/datagrid/form.ejs

@@ -23,7 +23,7 @@ columnWidth = 'govuk-grid-column-full';
 }
 %}
 
-<div class="{{ctx.component.customClass}}" ref="{{ctx.datagridKey}}-tbody">
+<div class="datagrid-tbody {{ctx.component.customClass}}" ref="{{ctx.datagridKey}}-tbody">
     {% if (ctx.hasAddButton && ctx.hasTopSubmit) { %}
     <button class="govuk-button govuk-button--secondary"
             aria-label="{{ctx.t(ctx.component.addAnother || 'Add Another')}}"
@@ -75,4 +75,3 @@ columnWidth = 'govuk-grid-column-full';
     </button>
     {% } %}
 </div>
-

package/src/templates/gds/iconClass.ts

@@ -1,4 +1,4 @@
-export default (iconset, name, spinning) => {
+export default (iconset: string, name: string, spinning: boolean): string => {
     if (iconset === 'fa') {
         switch (name) {
             case 'save':