formatic 0.4.3 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 142e8c45bd25c9b20ec5287736872e8974af37ae08fff7b202dbe7968c07cd08
-  data.tar.gz: 221b88ebd0b0b08e73afcec6fb061dfa69267556ffa7d4ad383b76beea528edd
+  metadata.gz: 1c52f37c072f5cbebbfa6718393edae33f687911b3e426db8a97a3cd6b5a0c72
+  data.tar.gz: bea3f5680a56ba9b447e7fa925eb60aaa809a756d0c1b9d8d7b573b967752f03
 SHA512:
-  metadata.gz: 8164cb6a8d6f0effb577340530e0c3d52331417cd8e63395a1a9593dd1fd09be1fa936a41898ab4d57b8119e8f7e6e37d630e0093cc87c7868f1e82285a03d02
-  data.tar.gz: 33be02040dcb62fc98e62d6c4f94ad923d7b7a661f92656900f7fc58d81e27b8552c492d37c6eab36ae03c0da43b479ed4d182b5b3138656a1ea3f4a587e7b8b
+  metadata.gz: f86e74b0b5a1ca07c73d265672b6770ee543f1879e098498cc6a7cb64bf8d9b26972f5120b6c5fb0299242991640a47c671b94c3e002ab3addfb911cbaae3abe
+  data.tar.gz: 4dd6d6b3102c55177e11ca879f0ffab0edce31cf7595914ffa0802746c6157da138833f138fcd8dca5ed793139998d8f1393588f7bd099a030123131815004c8

data/CHANGELOG.md

@@ -1,3 +1,13 @@
+## [0.5.0] 2026-10-26
+
+- Add `Formatic::Search`, a JSON-backed search field
+- `Formatic::Search::Frontend.json` wraps the choice and selected partials
+- The selected card includes the clear control. A readonly field omits the query and the clear control
+
+## [0.4.4] 2026-09-18
+
+- Restrict year select to current year and later when `skip_past` is true
+
 ## [0.4.3] 2026-09-17
 
 - Add `skip_past` option to `Formatic::Date` to start calendar at today instead of 5 days ago

data/README.md

@@ -9,6 +9,31 @@ Opinionated ViewComponents for building forms.
 = render Formatic::String.new(f:, attribute_name: :first_name)
 ```
 
+### Search fields
+
+`Formatic::Search` renders a hidden value input and a query input for an endpoint
+that returns JSON in the form `{ records: [...] }`. Each record has an `id`, a
+`label`, `html_for_autocomplete`, and `html_for_input` properties. The
+`html_for_autocomplete` markup must include one `.js-formatic-search__choice`
+element per record, in the same order as `records`. `html_for_input` provides
+the selected-value markup. Search waits 400 ms after the last input. A newer
+query aborts the previous request for that field, and a response is shown only
+when its query still matches the input. An optional `with_clear` slot clears
+the current selection.
+An optional `with_add_record` slot stays hidden while searching and appears
+after a successful response, even when there are no matches.
+
+```ruby
+= render Formatic::Search.new(f:, attribute_name: :commander_id,
+                              record_name: 'commander',
+                              url: admin_commanders_path(format: :json))
+```
+
+For Rack tests, include `Formatic::Testing::Capybara::Search` in a
+`Capybara::RackTest` test class. `select_record_from_search 'Bob', from: 'Users'`
+reads the field's URL and parameter names, requests matching JSON directly, and
+fills the hidden input with a result returned by that endpoint.
+
 ## Installation
 
 Install the gem and add to the application's Gemfile by executing:

data/app/assets/javascript/declarations/search.d.ts

@@ -0,0 +1,39 @@
+export declare class Search {
+    private el;
+    private requests;
+    private choiceRecords;
+    private timeoutId;
+    constructor(el: HTMLElement);
+    private setupBindings;
+    private clicked;
+    private debounce;
+    private actionSearch;
+    private actionSearchNow;
+    private actionChoose;
+    private actionClear;
+    private guiWaitingForQuery;
+    private guiSearchingRecords;
+    private guiFailed;
+    private guiPopulateRecordChoices;
+    private guiChooseRecord;
+    private guiClear;
+    private guiMayAddNew;
+    private guiMayNotAddNew;
+    private notifyValueChanged;
+    private choicesFor;
+    private get searchParams();
+    private get resourceUrl();
+    private get recordName();
+    private get attributeName();
+    private get excludeIds();
+    private get resourceInput();
+    private get recordNameInput();
+    private get attributeNameInput();
+    private get excludeIdsInput();
+    private get queryInput();
+    private get valueInput();
+    private get selectedContainer();
+    private get resultsContainer();
+    private get choices();
+    private get addRecordContainer();
+}

data/app/assets/javascript/declarations/search_record.d.ts

@@ -0,0 +1,9 @@
+export declare class SearchRecord {
+    id: string | number;
+    choice: string;
+    selected: string;
+    constructor(attributes: Partial<SearchRecord>);
+    get recordId(): string;
+    get renderedChoice(): string;
+    get renderedSelected(): string;
+}

data/app/assets/javascript/declarations/search_requests.d.ts

@@ -0,0 +1,13 @@
+export declare class SearchRequests {
+    private previousController;
+    private currentController;
+    search(resource: string, searchterm: string, params: {
+        [key: string]: string;
+    }): Promise<any>;
+    abort(): void;
+    private perform;
+    private abortPreviousRequests;
+    private parseResponse;
+    private fail;
+    private get requestOptions();
+}

data/app/assets/javascript/formatic/search.js

@@ -0,0 +1,188 @@
+import { SearchRecord } from 'formatic/search_record';
+import { SearchRequests } from 'formatic/search_requests';
+export class Search {
+    constructor(el) {
+        this.el = el;
+        this.requests = new SearchRequests;
+        this.choiceRecords = new Map();
+        this.setupBindings();
+    }
+    setupBindings() {
+        if (!this.queryInput)
+            return;
+        this.resultsContainer.addEventListener('click', (event) => {
+            const choice = this.clicked('.js-formatic-search__choice', event);
+            if (!choice)
+                return;
+            event.preventDefault();
+            this.actionChoose(choice);
+        });
+        this.el.addEventListener('click', (event) => {
+            const clear = this.clicked('.js-formatic-search__clear', event);
+            if (!clear)
+                return;
+            event.preventDefault();
+            this.actionClear();
+        });
+        this.queryInput.addEventListener('input', (event) => {
+            event.preventDefault();
+            this.actionSearch();
+        });
+    }
+    clicked(selector, event) {
+        const target = event.target;
+        const receiver = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
+        const match = receiver?.closest(selector);
+        if (!match || !this.el.contains(match))
+            return null;
+        return match;
+    }
+    debounce(fn) {
+        return () => {
+            clearTimeout(this.timeoutId);
+            this.timeoutId = setTimeout(() => fn(), 400);
+        };
+    }
+    actionSearch() {
+        this.guiWaitingForQuery();
+        this.debounce(this.actionSearchNow.bind(this))();
+    }
+    actionSearchNow() {
+        if (this.queryInput.value.length == 0) {
+            this.resultsContainer.innerHTML = '';
+            return;
+        }
+        this.guiSearchingRecords();
+        this.requests.search(this.resourceUrl, this.queryInput.value, this.searchParams)
+            .then(result => {
+            if (result?.query != this.queryInput.value)
+                return;
+            return result.data.records.map((attributes) => new SearchRecord(attributes));
+        }).then(records => {
+            if (records)
+                this.guiPopulateRecordChoices(records);
+        }).catch(err => {
+            console.warn(`Finding records failed: ${err}`);
+            this.guiFailed();
+        });
+    }
+    actionChoose(choice) {
+        clearTimeout(this.timeoutId);
+        this.requests.abort();
+        const record = this.choiceRecords.get(choice);
+        if (!record)
+            throw new Error('No search result for the chosen element');
+        this.guiChooseRecord(record);
+    }
+    actionClear() {
+        clearTimeout(this.timeoutId);
+        this.requests.abort();
+        this.guiClear();
+    }
+    guiWaitingForQuery() {
+        this.resultsContainer.textContent = 'Waiting for input...';
+        this.guiMayNotAddNew();
+    }
+    guiSearchingRecords() {
+        this.resultsContainer.textContent = 'Searching...';
+        this.guiMayNotAddNew();
+    }
+    guiFailed() {
+        this.choiceRecords.clear();
+        this.resultsContainer.textContent = 'Search failed.';
+        this.guiMayNotAddNew();
+    }
+    guiPopulateRecordChoices(records) {
+        this.resultsContainer.innerHTML = records.map((record) => record.renderedChoice).join('');
+        this.choiceRecords = this.choicesFor(records);
+        if (records.length == 0)
+            this.resultsContainer.textContent = 'No records found.';
+        this.guiMayAddNew();
+    }
+    guiChooseRecord(record) {
+        this.valueInput.value = record.recordId;
+        this.selectedContainer.innerHTML = record.renderedSelected;
+        this.resultsContainer.innerHTML = '';
+        this.queryInput.value = '';
+        this.choiceRecords.clear();
+        this.guiMayNotAddNew();
+        this.notifyValueChanged();
+    }
+    guiClear() {
+        this.valueInput.value = '';
+        this.selectedContainer.innerHTML = '';
+        this.resultsContainer.innerHTML = '';
+        this.queryInput.value = '';
+        this.choiceRecords.clear();
+        this.guiMayNotAddNew();
+        this.notifyValueChanged();
+    }
+    guiMayAddNew() {
+        this.addRecordContainer.hidden = false;
+    }
+    guiMayNotAddNew() {
+        this.addRecordContainer.hidden = true;
+    }
+    notifyValueChanged() {
+        this.valueInput.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+    choicesFor(records) {
+        const choices = Array.from(this.choices);
+        if (choices.length != records.length) {
+            throw new Error(`Expected ${records.length} .js-formatic-search__choice elements, found ${choices.length}`);
+        }
+        return new Map(choices.map((choice, index) => [choice, records[index]]));
+    }
+    get searchParams() {
+        const params = {
+            record_name: this.recordName,
+            attribute_name: this.attributeName,
+        };
+        if (this.excludeIds)
+            params.exclude_ids = this.excludeIds;
+        return params;
+    }
+    get resourceUrl() {
+        return this.resourceInput.value;
+    }
+    get recordName() {
+        return this.recordNameInput.value;
+    }
+    get attributeName() {
+        return this.attributeNameInput.value;
+    }
+    get excludeIds() {
+        return this.excludeIdsInput.value;
+    }
+    get resourceInput() {
+        return this.el.querySelector('.js-formatic-search__url');
+    }
+    get recordNameInput() {
+        return this.el.querySelector('.js-formatic-search__record-name');
+    }
+    get attributeNameInput() {
+        return this.el.querySelector('.js-formatic-search__attribute-name');
+    }
+    get excludeIdsInput() {
+        return this.el.querySelector('.js-formatic-search__exclude-ids');
+    }
+    get queryInput() {
+        return this.el.querySelector('.js-formatic-search__query-input');
+    }
+    get valueInput() {
+        return this.el.querySelector('.js-formatic-search__value');
+    }
+    get selectedContainer() {
+        return this.el.querySelector('.js-formatic-search__selected');
+    }
+    get resultsContainer() {
+        return this.el.querySelector('.js-formatic-search__results');
+    }
+    get choices() {
+        return this.resultsContainer.querySelectorAll('.js-formatic-search__choice');
+    }
+    get addRecordContainer() {
+        return this.el.querySelector('.js-formatic-search__add-record');
+    }
+}
+//# sourceMappingURL=search.js.map

data/app/assets/javascript/formatic/search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.js","sourceRoot":"","sources":["../src/search.ts"],"names":[],"mappings":"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"}

data/app/assets/javascript/formatic/search_record.js

@@ -0,0 +1,21 @@
+export class SearchRecord {
+    constructor(attributes) {
+        Object.assign(this, attributes);
+    }
+    get recordId() {
+        if (this.id == null || this.id == '')
+            throw new Error('Search record is missing id');
+        return String(this.id);
+    }
+    get renderedChoice() {
+        if (!this.choice)
+            throw new Error('Search record is missing choice');
+        return this.choice;
+    }
+    get renderedSelected() {
+        if (!this.selected)
+            throw new Error('Search record is missing selected');
+        return this.selected;
+    }
+}
+//# sourceMappingURL=search_record.js.map

data/app/assets/javascript/formatic/search_record.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search_record.js","sourceRoot":"","sources":["../src/search_record.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,YAAY;IAKvB,YAAY,UAAiC;QAC3C,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA;IACjC,CAAC;IAED,IAAW,QAAQ;QACjB,IAAI,IAAI,CAAC,EAAE,IAAI,IAAI,IAAI,IAAI,CAAC,EAAE,IAAI,EAAE;YAAE,MAAM,IAAI,KAAK,CAAC,6BAA6B,CAAC,CAAA;QACpF,OAAO,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IACxB,CAAC;IAED,IAAW,cAAc;QACvB,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAA;QACpE,OAAO,IAAI,CAAC,MAAM,CAAA;IACpB,CAAC;IAED,IAAW,gBAAgB;QACzB,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAA;QACxE,OAAO,IAAI,CAAC,QAAQ,CAAA;IACtB,CAAC;CACF"}

data/app/assets/javascript/formatic/search_requests.js

@@ -0,0 +1,72 @@
+export class SearchRequests {
+    search(resource, searchterm, params) {
+        const options = new Options;
+        options.resource = resource;
+        options.params = { ...params };
+        options.params.query = searchterm;
+        return this.perform(options);
+    }
+    abort() {
+        if (this.previousController)
+            this.previousController.abort();
+    }
+    perform(options) {
+        this.abortPreviousRequests();
+        return new Promise((resolve, reject) => {
+            if (options.params.query == '')
+                return resolve(null);
+            console.debug(`SearchRequests GET ${options.url}`);
+            fetch(options.url, this.requestOptions)
+                .then(response => this.parseResponse(response))
+                .then(data => {
+                resolve(new Result({ data: data, options: options, query: options.params.query }));
+            }).catch(err => {
+                this.fail(err, options, reject);
+            });
+        });
+    }
+    abortPreviousRequests() {
+        this.abort();
+        this.currentController = new AbortController();
+        this.previousController = this.currentController;
+    }
+    parseResponse(response) {
+        if (!response.ok)
+            throw Error(response.statusText);
+        return response.json();
+    }
+    fail(err, options, reject) {
+        if (err.name == 'AbortError') {
+            console.debug(`Cancelled GET ${options.url}`);
+            return;
+        }
+        console.debug(`Failed to GET ${options.url}`);
+        reject(err);
+    }
+    get requestOptions() {
+        return {
+            method: 'GET',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+            },
+            signal: this.currentController.signal,
+        };
+    }
+}
+class Options {
+    get url() {
+        const requestParams = new URLSearchParams();
+        for (const [key, value] of Object.entries(this.params)) {
+            requestParams.set(key, value);
+        }
+        const separator = this.resource.includes('?') ? '&' : '?';
+        return this.resource + separator + requestParams;
+    }
+}
+class Result {
+    constructor(attributes) {
+        Object.assign(this, attributes);
+    }
+}
+//# sourceMappingURL=search_requests.js.map

data/app/assets/javascript/formatic/search_requests.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search_requests.js","sourceRoot":"","sources":["../src/search_requests.ts"],"names":[],"mappings":"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"}

data/app/assets/javascript/formatic/setup.js

@@ -1,5 +1,6 @@
 import { Date } from 'formatic/date'
 import { Select } from 'formatic/select'
+import { Search } from 'formatic/search'
 import { Stepper } from 'formatic/stepper'
 import { String } from 'formatic/string'
 import { Textarea } from 'formatic/textarea'
@@ -7,6 +8,11 @@ import { Toggle } from 'formatic/toggle'
 import { FormaticFile } from 'formatic/file'
 
 document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.js-formatic-search').forEach((el) => {
+    console.debug('[Formatic] Instantiating Search...')
+    new Search(el)
+  })
+
   document.querySelectorAll('.js-formatic-file').forEach((el) => {
     console.debug('[Formatic] Instantiating File...')
     new FormaticFile(el)

data/app/assets/javascript/src/search.ts

@@ -0,0 +1,242 @@
+import { SearchRecord } from 'formatic/search_record'
+import { SearchRequests } from 'formatic/search_requests'
+
+export class Search {
+  private el: HTMLElement
+  private requests: SearchRequests
+  private choiceRecords: Map<HTMLElement, SearchRecord>
+  private timeoutId: ReturnType<typeof setTimeout>
+
+  constructor(el: HTMLElement) {
+    this.el = el
+    this.requests = new SearchRequests
+    this.choiceRecords = new Map()
+    this.setupBindings()
+  }
+
+  // Setup
+
+  private setupBindings() {
+    if (!this.queryInput) return
+
+    this.resultsContainer.addEventListener('click', (event) => {
+      const choice = this.clicked('.js-formatic-search__choice', event)
+      if (!choice) return
+
+      event.preventDefault()
+      this.actionChoose(choice)
+    })
+
+    // The clear control arrives inside the selected card, so the listener
+    // stays on the search root.
+    this.el.addEventListener('click', (event) => {
+      const clear = this.clicked('.js-formatic-search__clear', event)
+      if (!clear) return
+
+      event.preventDefault()
+      this.actionClear()
+    })
+
+    this.queryInput.addEventListener('input', (event) => {
+      event.preventDefault()
+      this.actionSearch()
+    })
+  }
+
+  // Helpers
+
+  private clicked(selector: string, event: Event) {
+    const target = event.target
+    const receiver = target instanceof Element ? target : target instanceof Node ? target.parentElement : null
+    const match = receiver?.closest<HTMLElement>(selector)
+    if (!match || !this.el.contains(match)) return null
+
+    return match
+  }
+
+  private debounce(fn: Function) {
+    return () => {
+      clearTimeout(this.timeoutId)
+      this.timeoutId = setTimeout(() => fn(), 400)
+    }
+  }
+
+  // Actions
+
+  private actionSearch() {
+    this.guiWaitingForQuery()
+    this.debounce(this.actionSearchNow.bind(this))()
+  }
+
+  private actionSearchNow() {
+    if (this.queryInput.value.length == 0) {
+      this.resultsContainer.innerHTML = ''
+      return
+    }
+
+    this.guiSearchingRecords()
+    this.requests.search(this.resourceUrl, this.queryInput.value, this.searchParams)
+      .then(result => {
+        // On multiple parallel ajax requests, the currently wanted response wins.
+        if (result?.query != this.queryInput.value) return
+
+        return result.data.records.map((attributes: any) => new SearchRecord(attributes))
+      }).then(records => {
+        if (records) this.guiPopulateRecordChoices(records)
+      }).catch(err => {
+        console.warn(`Finding records failed: ${err}`)
+        this.guiFailed()
+      })
+  }
+
+  private actionChoose(choice: HTMLElement) {
+    clearTimeout(this.timeoutId)
+    this.requests.abort()
+
+    const record = this.choiceRecords.get(choice)
+    if (!record) throw new Error('No search result for the chosen element')
+
+    this.guiChooseRecord(record)
+  }
+
+  private actionClear() {
+    clearTimeout(this.timeoutId)
+    this.requests.abort()
+    this.guiClear()
+  }
+
+  // GUI
+
+  private guiWaitingForQuery() {
+    this.resultsContainer.textContent = 'Waiting for input...'
+    this.guiMayNotAddNew()
+  }
+
+  private guiSearchingRecords() {
+    this.resultsContainer.textContent = 'Searching...'
+    this.guiMayNotAddNew()
+  }
+
+  private guiFailed() {
+    this.choiceRecords.clear()
+    this.resultsContainer.textContent = 'Search failed.'
+    this.guiMayNotAddNew()
+  }
+
+  private guiPopulateRecordChoices(records: Array<SearchRecord>) {
+    this.resultsContainer.innerHTML = records.map((record) => record.renderedChoice).join('')
+    this.choiceRecords = this.choicesFor(records)
+    if (records.length == 0) this.resultsContainer.textContent = 'No records found.'
+    this.guiMayAddNew()
+  }
+
+  private guiChooseRecord(record: SearchRecord) {
+    this.valueInput.value = record.recordId
+    this.selectedContainer.innerHTML = record.renderedSelected
+    this.resultsContainer.innerHTML = ''
+    this.queryInput.value = ''
+    this.choiceRecords.clear()
+    this.guiMayNotAddNew()
+    this.notifyValueChanged()
+  }
+
+  private guiClear() {
+    this.valueInput.value = ''
+    this.selectedContainer.innerHTML = ''
+    this.resultsContainer.innerHTML = ''
+    this.queryInput.value = ''
+    this.choiceRecords.clear()
+    this.guiMayNotAddNew()
+    this.notifyValueChanged()
+  }
+
+  private guiMayAddNew() {
+    this.addRecordContainer.hidden = false
+  }
+
+  private guiMayNotAddNew() {
+    this.addRecordContainer.hidden = true
+  }
+
+  private notifyValueChanged() {
+    this.valueInput.dispatchEvent(new Event('change', { bubbles: true }))
+  }
+
+  private choicesFor(records: Array<SearchRecord>) {
+    const choices = Array.from(this.choices)
+    if (choices.length != records.length) {
+      throw new Error(`Expected ${records.length} .js-formatic-search__choice elements, found ${choices.length}`)
+    }
+
+    return new Map(choices.map((choice, index) => [choice, records[index]]))
+  }
+
+  // Attributes
+
+  private get searchParams() {
+    const params: { [key: string]: string } = {
+      record_name: this.recordName,
+      attribute_name: this.attributeName,
+    }
+    if (this.excludeIds) params.exclude_ids = this.excludeIds
+    return params
+  }
+
+  private get resourceUrl() {
+    return this.resourceInput.value
+  }
+
+  private get recordName() {
+    return this.recordNameInput.value
+  }
+
+  private get attributeName() {
+    return this.attributeNameInput.value
+  }
+
+  private get excludeIds() {
+    return this.excludeIdsInput.value
+  }
+
+  // DOM elements
+
+  private get resourceInput() {
+    return this.el.querySelector<HTMLInputElement>('.js-formatic-search__url')
+  }
+
+  private get recordNameInput() {
+    return this.el.querySelector<HTMLInputElement>('.js-formatic-search__record-name')
+  }
+
+  private get attributeNameInput() {
+    return this.el.querySelector<HTMLInputElement>('.js-formatic-search__attribute-name')
+  }
+
+  private get excludeIdsInput() {
+    return this.el.querySelector<HTMLInputElement>('.js-formatic-search__exclude-ids')
+  }
+
+  private get queryInput() {
+    return this.el.querySelector<HTMLInputElement>('.js-formatic-search__query-input')
+  }
+
+  private get valueInput() {
+    return this.el.querySelector<HTMLInputElement>('.js-formatic-search__value')
+  }
+
+  private get selectedContainer() {
+    return this.el.querySelector<HTMLElement>('.js-formatic-search__selected')
+  }
+
+  private get resultsContainer() {
+    return this.el.querySelector<HTMLElement>('.js-formatic-search__results')
+  }
+
+  private get choices() {
+    return this.resultsContainer.querySelectorAll<HTMLElement>('.js-formatic-search__choice')
+  }
+
+  private get addRecordContainer() {
+    return this.el.querySelector<HTMLElement>('.js-formatic-search__add-record')
+  }
+}

data/app/assets/javascript/src/search_record.ts

@@ -0,0 +1,24 @@
+export class SearchRecord {
+  id: string | number
+  choice: string
+  selected: string
+
+  constructor(attributes: Partial<SearchRecord>) {
+    Object.assign(this, attributes)
+  }
+
+  public get recordId() {
+    if (this.id == null || this.id == '') throw new Error('Search record is missing id')
+    return String(this.id)
+  }
+
+  public get renderedChoice() {
+    if (!this.choice) throw new Error('Search record is missing choice')
+    return this.choice
+  }
+
+  public get renderedSelected() {
+    if (!this.selected) throw new Error('Search record is missing selected')
+    return this.selected
+  }
+}

data/app/assets/javascript/src/search_requests.ts

@@ -0,0 +1,94 @@
+// search(client, '/records.json', 'hello', { record_name: 'customer' })
+// GET /records.json?record_name=customer&query=hello
+
+export class SearchRequests {
+  private previousController: AbortController
+  private currentController: AbortController
+
+  search(resource: string, searchterm: string, params: { [key: string]: string }): Promise<any> {
+    const options = new Options
+    options.resource = resource
+    options.params = { ...params }
+    options.params.query = searchterm
+    return this.perform(options)
+  }
+
+  abort() {
+    if (this.previousController) this.previousController.abort()
+  }
+
+  private perform(options: Options): Promise<any> {
+    this.abortPreviousRequests()
+
+    return new Promise((resolve, reject) => {
+      if (options.params.query == '') return resolve(null)
+
+      console.debug(`SearchRequests GET ${options.url}`)
+      fetch(options.url, this.requestOptions)
+        .then(response => this.parseResponse(response))
+        .then(data => {
+          resolve(new Result({ data: data, options: options, query: options.params.query }))
+        }).catch(err => {
+          this.fail(err, options, reject)
+        })
+    })
+  }
+
+  private abortPreviousRequests() {
+    this.abort()
+    this.currentController = new AbortController()
+    this.previousController = this.currentController
+  }
+
+  private parseResponse(response: Response) {
+    if (!response.ok) throw Error(response.statusText)
+    return response.json()
+  }
+
+  private fail(err: any, options: Options, reject: (reason?: any) => void) {
+    if (err.name == 'AbortError') {
+      // A newer query started, then this request was aborted.
+      // The promise stays unsettled so this response cannot overwrite the newer result.
+      console.debug(`Cancelled GET ${options.url}`)
+      return
+    }
+
+    console.debug(`Failed to GET ${options.url}`)
+    reject(err)
+  }
+
+  private get requestOptions() {
+    return {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+      signal: this.currentController.signal,
+    }
+  }
+}
+
+class Options {
+  resource: string
+  params: { [key: string]: string }
+
+  public get url() {
+    const requestParams = new URLSearchParams()
+    for (const [key, value] of Object.entries(this.params)) {
+      requestParams.set(key, value)
+    }
+    const separator = this.resource.includes('?') ? '&' : '?'
+    return this.resource + separator + requestParams
+  }
+}
+
+class Result {
+  data: any
+  options: Options
+  query: string
+
+  constructor(attributes: Partial<Result>) {
+    Object.assign(this, attributes)
+  }
+}

data/app/assets/stylesheets/formatic/components/search.sass

@@ -0,0 +1,51 @@
+.c-formatic-search
+  display: grid
+  grid-template-columns: auto
+  gap: 0.4rem
+
+  &__query
+    display: flex
+    align-items: center
+    gap: 0.2rem
+
+    input
+      flex-grow: 1
+      min-width: 0
+
+  &__selected,
+  &__results,
+  &__clear
+    display: grid
+    gap: 0.2rem
+
+  &__selection
+    display: flex
+    align-items: center
+    justify-content: space-between
+    gap: 0.4rem
+
+  &__selected-record
+    flex-grow: 1
+    min-width: 0
+
+  &__actions
+    flex-shrink: 0
+    align-self: stretch
+    height: 100%
+
+  &__results:empty
+    display: none
+
+  &__add-record:empty
+    display: none
+
+@at-root a.c-formatic-search__clear
+  speak: none
+  font-style: normal
+  font-weight: normal
+  font-variant: normal
+  text-transform: none
+  text-decoration: none
+
+  &::before
+    content: "\00d7"

data/app/assets/stylesheets/formatic/formatic.css

@@ -159,6 +159,31 @@
   background-size: 200% 200%;
 }
 
+.c-formatic-search {
+  display: grid;
+  grid-template-columns: auto;
+  gap: 0.4rem;
+}
+.c-formatic-search__query {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+}
+.c-formatic-search__query input {
+  flex-grow: 1;
+  min-width: 0;
+}
+.c-formatic-search__selected, .c-formatic-search__results, .c-formatic-search__clear {
+  display: grid;
+  gap: 0.2rem;
+}
+.c-formatic-search__results:empty {
+  display: none;
+}
+.c-formatic-search__add-record:empty {
+  display: none;
+}
+
 .c-formatic-wrapper.is-required .c-formatic-select {
   border-left-color: rgb(240, 30, 80);
   border-left-width: 2px;

data/app/assets/stylesheets/formatic/formatic.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["generics/flip.sass","components/wrapper.sass","../../../../node_modules/iglu/iglu/font-size/tools/_sizing.sass","../../../../node_modules/iglu/iglu/spacing/tools/_margin.sass","settings/_colors.sass","components/checklist.sass","components/date.sass","tools/_mandatory.sass","../../../../node_modules/iglu/iglu/spacing/tools/_padding_immediate.sass","tools/_link.sass","tools/_terminal.sass","tools/_cloud.sass","components/stepper.sass","components/time.sass","components/toggle.sass","utilities/container.sass","scopes/form.sass","tools/_theme.sass"],"names":[],"mappings":"AAAA;EACE;IACE;;;ACGJ;EACE;EACA;EACA;EACA;;ACGD;EACE;;ACiED;EACE;;AFlEF;EACE;;AAGA;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AAEJ;EAEE;;AAEF;EACE,OGpBY;;AHsBZ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACE;;AE8BF;EACE;;AD/DH;EACE;;ADmCD;EACE;EACA;EACA;;;AAEJ;EACE;IACE;IACA;IACA;IACA;;;AIlDJ;EACE;EACA;;;ACQA;EACE;EACA;EACA;;AH6DF;EACE;;AIxEF;EACE,mBHCY;EGAZ;;ADeF;EACE;EAEA;EACA;EACA;EACA;;AACA;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AHIF;EACE;;AKnCF;EACE;;ACNF;EHuCI,OFtCE;;AFcP;EACE;;AMHD;EACE;;ANHH;EACE;;AQZD;EACE;;AJgDF;EACE;;AJ/CH;EACE;;AIiDD;EACE;;AItDF;EACE;;AREH;EACE;;AIsDD;EACE;;AAEF;EACE;;AG9DF;EHgEI,OF9DE;;AKFN;EHoEI,OFhEU;;AEkEd;EACE;EACA;EACA;;;ACvEF;EACE,mBHCY;EGAZ;;AIJF;EAGE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;;ACXJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AVIH;EACE;;AUFD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AVhBH;EACE;;ACyDD;EACE;;ASvCF;EACE,OR3BU;;;AMTZ;EACE;;ACDF;EAGE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AJbF;EACE,mBHCY;EGAZ;;;AIJF;EAGE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AJbF;EACE,mBHCY;EGAZ;;;AMCF;EACE;EACA;EACA;;AViEF;EACE;;AIxEF;EACE,mBHCY;EGAZ;;;AOFJ;EAGE;EACA;EACA;;AZID;EACE;;AYFD;EACE;EAGA;EACA;;AAEA;EACE;;AZXL;EACE;;AYaD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YVrBU;;AUuBV;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBVvCE;EUwCF;;AAGJ;EACE;EACA;;AAGA;EACE,kBV7CO;;AU+CP;EACE,kBVlDQ;;AUqDZ;EACE;EACA,kBVzDE;;AU4DJ;EACE;;AACF;EACE;;AAGF;EACE;;AACF;EACE;;AAGJ;EACE;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA,OV7EW;;AFLd;AAAA;EACE;;AYsFD;EACE;EACA;EACA;;;AC9FJ;EACE;;;ACKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASE;EACA;EACA;EACA;EACA;EACA,eZdU;EYeV;EACA;EACA;EACA;EACA;EACA;EACA;;AdfH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AKVD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE,mBHCY;EGAZ;;AS4BF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;;AC3CF;ED+CE;IACE","file":"formatic.css"}
+{"version":3,"sourceRoot":"","sources":["generics/flip.sass","components/wrapper.sass","../../../../node_modules/iglu/iglu/font-size/tools/_sizing.sass","../../../../node_modules/iglu/iglu/spacing/tools/_margin.sass","settings/_colors.sass","components/checklist.sass","components/date.sass","tools/_mandatory.sass","../../../../node_modules/iglu/iglu/spacing/tools/_padding_immediate.sass","tools/_link.sass","tools/_terminal.sass","components/search.sass","tools/_cloud.sass","components/stepper.sass","components/time.sass","components/toggle.sass","utilities/container.sass","scopes/form.sass","tools/_theme.sass"],"names":[],"mappings":"AAAA;EACE;IACE;;;ACGJ;EACE;EACA;EACA;EACA;;ACGD;EACE;;ACiED;EACE;;AFlEF;EACE;;AAGA;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AAEJ;EAEE;;AAEF;EACE,OGpBY;;AHsBZ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACE;;AE8BF;EACE;;AD/DH;EACE;;ADmCD;EACE;EACA;EACA;;;AAEJ;EACE;IACE;IACA;IACA;IACA;;;AIlDJ;EACE;EACA;;;ACQA;EACE;EACA;EACA;;AH6DF;EACE;;AIxEF;EACE,mBHCY;EGAZ;;ADeF;EACE;EAEA;EACA;EACA;EACA;;AACA;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AHIF;EACE;;AKnCF;EACE;;ACNF;EHuCI,OFtCE;;AFcP;EACE;;AMHD;EACE;;ANHH;EACE;;AQZD;EACE;;AJgDF;EACE;;AJ/CH;EACE;;AIiDD;EACE;;AItDF;EACE;;AREH;EACE;;AIsDD;EACE;;AAEF;EACE;;AG9DF;EHgEI,OF9DE;;AKFN;EHoEI,OFhEU;;AEkEd;EACE;EACA;EACA;;;AK1EJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEJ;EAGE;EACA;;AAEF;EACE;;AAEF;EACE;;;AJrBF;EACE,mBHCY;EGAZ;;AKJF;EAGE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;;ACXJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AXIH;EACE;;AWFD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AXhBH;EACE;;ACyDD;EACE;;AUvCF;EACE,OT3BU;;;AMTZ;EACE;;AEDF;EAGE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;ALbF;EACE,mBHCY;EGAZ;;;AKJF;EAGE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;ALbF;EACE,mBHCY;EGAZ;;;AOCF;EACE;EACA;EACA;;AXiEF;EACE;;AIxEF;EACE,mBHCY;EGAZ;;;AQFJ;EAGE;EACA;EACA;;AbID;EACE;;AaFD;EACE;EAGA;EACA;;AAEA;EACE;;AbXL;EACE;;AaaD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YXrBU;;AWuBV;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBXvCE;EWwCF;;AAGJ;EACE;EACA;;AAGA;EACE,kBX7CO;;AW+CP;EACE,kBXlDQ;;AWqDZ;EACE;EACA,kBXzDE;;AW4DJ;EACE;;AACF;EACE;;AAGF;EACE;;AACF;EACE;;AAGJ;EACE;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA,OX7EW;;AFLd;AAAA;EACE;;AasFD;EACE;EACA;EACA;;;AC9FJ;EACE;;;ACKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASE;EACA;EACA;EACA;EACA;EACA,ebdU;EaeV;EACA;EACA;EACA;EACA;EACA;EACA;;AffH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AKVD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE,mBHCY;EGAZ;;AU4BF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;;AC3CF;ED+CE;IACE","file":"formatic.css"}

data/app/assets/stylesheets/formatic.sass

@@ -5,6 +5,7 @@
 @use "formatic/components/wrapper.sass" // Wrapper comes first, rest alphabetically
 @use "formatic/components/checklist.sass"
 @use "formatic/components/date.sass"
+@use "formatic/components/search.sass"
 @use "formatic/components/select.sass"
 @use "formatic/components/stepper.sass"
 @use "formatic/components/string.sass"

data/app/components/formatic/date.rb

@@ -111,7 +111,8 @@ module Formatic
     end
 
     def collection_for_year
-      result = (30.years.ago.year..10.years.from_now.year)
+      lower = skip_past ? ::Time.current.year : 30.years.ago.year
+      result = (lower..10.years.from_now.year)
       return result if wrapper.required?
 
       result.to_a.prepend nil

data/app/components/formatic/search/choice.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Formatic
+  class Search
+    # One row in the search results.
+    class Choice < ::Formatic::ApplicationComponent
+      option :record_id
+
+      erb_template <<~ERB
+        <div class="js-formatic-search__choice" data-record-id="<%= record_id %>"><%= content %></div>
+      ERB
+    end
+  end
+end

data/app/components/formatic/search/clear.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Formatic
+  class Search
+    # The control that clears the selected record.
+    class Clear < ::Formatic::ApplicationComponent
+      erb_template <<~ERB
+        <a href="#" class="c-formatic-search__clear js-formatic-search__clear" title="Remove"></a>
+      ERB
+    end
+  end
+end

data/app/components/formatic/search/frontend.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Formatic
+  class Search
+    # Builds one search JSON record from the app partials.
+    class Frontend
+      def self.json(id:, choice:, selected:)
+        {
+          id: id,
+          choice: render_html(::Formatic::Search::Choice.new(record_id: id).with_content(choice)),
+          selected: render_html(::Formatic::Search::Selected.new.with_content(selected))
+        }
+      end
+
+      def self.render_html(component)
+        ApplicationController.render(component)
+      end
+      private_class_method :render_html
+    end
+  end
+end

data/app/components/formatic/search/selected.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Formatic
+  class Search
+    # The record that is currently chosen.
+    class Selected < ::Formatic::ApplicationComponent
+      option :readonly, default: -> { false }
+
+      erb_template <<~ERB
+        <div class="c-formatic-search__selection">
+          <div class="c-formatic-search__selected-record"><%= content %></div>
+          <% unless readonly %>
+            <div class="c-formatic-search__actions"><%= render ::Formatic::Search::Clear.new %></div>
+          <% end %>
+        </div>
+      ERB
+    end
+  end
+end

data/app/components/formatic/search.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+require 'formatic/templates/search'
+
+module Formatic
+  # A search field backed by a JSON endpoint.
+  class Search < ::Formatic::Base
+    option :url
+    option :record_name, as: :manual_record_name, optional: true
+    option :exclude_ids, default: -> { [] }
+    option :placeholder, as: :manual_placeholder, optional: true
+
+    renders_one :selected_record
+    renders_one :add_record
+
+    erb_template(::Formatic::Templates::Search.call)
+
+    def record_name
+      manual_record_name || f.object.model_name.param_key
+    end
+
+    def query_input_id
+      f.field_id(attribute_name)
+    end
+
+    def search_placeholder
+      manual_placeholder.presence || wrapper.placeholder
+    end
+  end
+end

data/config/importmap.rb

@@ -5,6 +5,9 @@ pin 'formatic', to: 'formatic/setup.js'
 pin 'formatic/date', to: 'formatic/date.js'
 pin 'formatic/file', to: 'formatic/file.js'
 pin 'formatic/select', to: 'formatic/select.js'
+pin 'formatic/search', to: 'formatic/search.js'
+pin 'formatic/search_record', to: 'formatic/search_record.js'
+pin 'formatic/search_requests', to: 'formatic/search_requests.js'
 pin 'formatic/stepper', to: 'formatic/stepper.js'
 pin 'formatic/string', to: 'formatic/string.js'
 pin 'formatic/textarea', to: 'formatic/textarea.js'

data/lib/formatic/engine.rb

@@ -53,6 +53,11 @@ module Formatic
         require_relative '../../app/components/formatic/checklist'
         require_relative '../../app/components/formatic/date'
         require_relative '../../app/components/formatic/select'
+        require_relative '../../app/components/formatic/search'
+        require_relative '../../app/components/formatic/search/clear'
+        require_relative '../../app/components/formatic/search/choice'
+        require_relative '../../app/components/formatic/search/selected'
+        require_relative '../../app/components/formatic/search/frontend'
         require_relative '../../app/components/formatic/string'
         require_relative '../../app/components/formatic/stepper'
         require_relative '../../app/components/formatic/textarea'

data/lib/formatic/templates/search.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module Formatic
+  module Templates
+    # Holds the ERB template for this component.
+    module Search
+      TEMPLATE = <<~ERB
+        <%= render wrapper do |formatic_wrapper| %>
+          <% formatic_wrapper.with_input do %>
+            <div class="c-formatic-search s-formatic js-formatic-search">
+              <input type="hidden" class="js-formatic-search__url" value="<%= url %>">
+              <input type="hidden" class="js-formatic-search__record-name" value="<%= record_name %>">
+              <input type="hidden" class="js-formatic-search__attribute-name" value="<%= attribute_name %>">
+              <input type="hidden" class="js-formatic-search__exclude-ids" value="<%= exclude_ids.join(',') %>">
+
+              <%= f.hidden_field attribute_name,
+                                 id: nil,
+                                 value:,
+                                 class: 'js-formatic-search__value' %>
+
+              <div class="c-formatic-search__selected js-formatic-search__selected">
+                <% if selected_record? %>
+                  <%= render ::Formatic::Search::Selected.new(readonly: readonly).with_content(selected_record) %>
+                <% end %>
+              </div>
+
+              <% unless readonly %>
+                <div class="c-formatic-search__query">
+                  <%= helpers.tag.input type: 'search',
+                                        id: query_input_id,
+                                        placeholder: search_placeholder,
+                                        autocomplete: 'off',
+                                        class: 'js-formatic-search__query-input' %>
+                </div>
+
+                <div class="c-formatic-search__results js-formatic-search__results"></div>
+                <div class="c-formatic-search__add-record js-formatic-search__add-record" hidden><%= add_record %></div>
+              <% end %>
+            </div>
+          <% end %>
+        <% end %>
+      ERB
+
+      private_constant :TEMPLATE
+
+      def self.call
+        TEMPLATE
+      end
+    end
+  end
+end

data/lib/formatic/testing/capybara.rb

@@ -0,0 +1,94 @@
+# frozen_string_literal: true
+
+require 'json'
+require 'calls'
+
+module Formatic
+  module Testing
+    module Capybara
+      module Search
+        def select_record_from_search(query, from:)
+          SearchSelector.call(page: page, query:, from:)
+        end
+
+        class SearchSelector
+          include Calls
+
+          class SelectionError < ::StandardError; end
+
+          option :page
+          option :query
+          option :from
+
+          def call
+            ensure_rack_test_driver!
+            query_field = page.find_field(from)
+            component = search_component(query_field)
+            record = matching_record(search_records(component), query)
+
+            raise SelectionError, "No result matching #{query.inspect} from #{from.inspect}" unless record
+
+            apply_selection(component, query_field, record)
+            record
+          end
+
+          private
+
+          def ensure_rack_test_driver!
+            require 'capybara/rack_test/driver'
+            return if page.driver.is_a?(::Capybara::RackTest::Driver)
+
+            raise ArgumentError, 'select_record_from_search requires Capybara RackTest'
+          end
+
+          def search_component(query_field)
+            query_field.find(:xpath, 'ancestor::div[contains(@class, "js-formatic-search")][1]')
+          end
+
+          def search_records(component)
+            response = search_request(configured_value(component, 'resource'), search_params(component))
+
+            raise SelectionError, "Search for #{from.inspect} returned HTTP #{response.status}" unless response.ok?
+
+            JSON.parse(response.body).fetch('records')
+          end
+
+          def search_params(component)
+            {
+              query: query,
+              record_name: configured_value(component, 'record-name'),
+              attribute_name: configured_value(component, 'attribute-name'),
+              exclude_ids: configured_value(component, 'exclude-ids')
+            }
+          end
+
+          def configured_value(component, class_suffix)
+            component.find(".js-formatic-search__#{class_suffix}", visible: :all).value
+          end
+
+          def search_request(url, params)
+            browser = page.driver.browser
+            browser.current_session.restore_state do
+              browser.get(url, params, 'HTTP_ACCEPT' => 'application/json')
+            end
+          end
+
+          def matching_record(records, query)
+            records.find do |record|
+              text = record.fetch('choice').gsub(/<[^>]*>/, ' ')
+              text.downcase.include?(query.downcase)
+            end
+          end
+
+          def apply_selection(component, query_field, record)
+            component.find('.js-formatic-search__value', visible: :all).set(record.fetch('id').to_s)
+            selected = component.find('.js-formatic-search__selected', visible: :all)
+            selected.native.inner_html = record.fetch('selected')
+            component.find('.js-formatic-search__results', visible: :all).native.inner_html = ''
+            query_field.set('')
+          end
+        end
+      end
+    end
+  end
+end

data/lib/formatic/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Formatic
-  VERSION = '0.4.3'
+  VERSION = '0.5.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: formatic
 version: !ruby/object:Gem::Version
-  version: 0.4.3
+  version: 0.5.0
 platform: ruby
 authors:
 - halo
@@ -119,6 +119,9 @@ files:
 - README.md
 - app/assets/javascript/declarations/date.d.ts
 - app/assets/javascript/declarations/file.d.ts
+- app/assets/javascript/declarations/search.d.ts
+- app/assets/javascript/declarations/search_record.d.ts
+- app/assets/javascript/declarations/search_requests.d.ts
 - app/assets/javascript/declarations/select.d.ts
 - app/assets/javascript/declarations/setup.d.ts
 - app/assets/javascript/declarations/stepper.d.ts
@@ -129,6 +132,12 @@ files:
 - app/assets/javascript/formatic/date.js.map
 - app/assets/javascript/formatic/file.js
 - app/assets/javascript/formatic/file.js.map
+- app/assets/javascript/formatic/search.js
+- app/assets/javascript/formatic/search.js.map
+- app/assets/javascript/formatic/search_record.js
+- app/assets/javascript/formatic/search_record.js.map
+- app/assets/javascript/formatic/search_requests.js
+- app/assets/javascript/formatic/search_requests.js.map
 - app/assets/javascript/formatic/select.js
 - app/assets/javascript/formatic/select.js.map
 - app/assets/javascript/formatic/setup.js
@@ -142,6 +151,9 @@ files:
 - app/assets/javascript/formatic/toggle.js.map
 - app/assets/javascript/src/date.ts
 - app/assets/javascript/src/file.ts
+- app/assets/javascript/src/search.ts
+- app/assets/javascript/src/search_record.ts
+- app/assets/javascript/src/search_requests.ts
 - app/assets/javascript/src/select.ts
 - app/assets/javascript/src/stepper.ts
 - app/assets/javascript/src/string.ts
@@ -150,6 +162,7 @@ files:
 - app/assets/stylesheets/formatic.sass
 - app/assets/stylesheets/formatic/components/checklist.sass
 - app/assets/stylesheets/formatic/components/date.sass
+- app/assets/stylesheets/formatic/components/search.sass
 - app/assets/stylesheets/formatic/components/select.sass
 - app/assets/stylesheets/formatic/components/stepper.sass
 - app/assets/stylesheets/formatic/components/string.sass
@@ -176,6 +189,11 @@ files:
 - app/components/formatic/date.rb
 - app/components/formatic/file.rb
 - app/components/formatic/files.rb
+- app/components/formatic/search.rb
+- app/components/formatic/search/choice.rb
+- app/components/formatic/search/clear.rb
+- app/components/formatic/search/frontend.rb
+- app/components/formatic/search/selected.rb
 - app/components/formatic/select.rb
 - app/components/formatic/stepper.rb
 - app/components/formatic/string.rb
@@ -196,8 +214,10 @@ files:
 - lib/formatic/engine.rb
 - lib/formatic/safe_join.rb
 - lib/formatic/templates/date.rb
+- lib/formatic/templates/search.rb
 - lib/formatic/templates/select.rb
 - lib/formatic/templates/wrapper.rb
+- lib/formatic/testing/capybara.rb
 - lib/formatic/version.rb
 - lib/formatic/vscode_snippets.rb
 - lib/formatic/wrappers/alternative_attribute_name.rb