@xeplr/ui-utils 1.0.0 → 1.0.2

package/src/dropdown/designs/dropdown.css

@@ -0,0 +1,226 @@
+/* Uses @xeplr/ui-account's --xeplr-* theme tokens when available (see
+   xeplr-ui-account/src/designs/theme.css — apply .xeplr-theme-light/-dark on
+   an ancestor to pick a theme); falls back to the original dark hex values
+   when that stylesheet isn't loaded, so this still renders sensibly standalone. */
+
+.xeplr-dropdown {
+  position: relative;
+  font-family: system-ui, -apple-system, sans-serif;
+  color: var(--xeplr-text-primary, #e0e0e0);
+}
+
+.xeplr-dropdown-trigger {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 40px;
+  background: var(--xeplr-input-bg, #1a1a1a);
+  border: 1px solid var(--xeplr-input-border, #444);
+  border-radius: 6px;
+  padding: 6px 10px 6px 12px;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--xeplr-input-text, #e0e0e0);
+}
+
+.xeplr-dropdown-open .xeplr-dropdown-trigger {
+  border-color: var(--xeplr-accent, #646cff);
+  box-shadow: 0 0 0 2px rgba(100, 108, 255, 0.18);
+}
+
+.xeplr-dropdown-disabled .xeplr-dropdown-trigger {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.xeplr-dropdown-placeholder { color: var(--xeplr-input-placeholder, #888); flex: 1; }
+.xeplr-dropdown-selected-single { flex: 1; }
+.xeplr-dropdown-selected-multi { flex: 1; }
+.xeplr-dropdown-selected-more { color: var(--xeplr-text-secondary, #888bbf); margin-left: 6px; font-size: 12px; }
+
+.xeplr-dropdown-caret {
+  margin-left: auto;
+  color: var(--xeplr-text-muted, #888);
+  font-size: 14px;
+}
+
+.xeplr-dropdown-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  flex: 1;
+}
+
+.xeplr-dropdown-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--xeplr-tag-bg, #232540);
+  border-radius: 999px;
+  padding: 3px 4px 3px 10px;
+  font-size: 12px;
+  color: var(--xeplr-tag-text, #c8cbe8);
+}
+
+.xeplr-dropdown-chip-x {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--xeplr-bg-primary, #1a1a1a);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+}
+
+.xeplr-dropdown-chip-x:hover { background: var(--xeplr-danger, #e25555); color: var(--xeplr-accent-text, #fff); }
+
+.xeplr-dropdown-panel {
+  display: none;
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  right: 0;
+  background: var(--xeplr-bg-tertiary, #141625);
+  border: 1px solid var(--xeplr-border-primary, #444);
+  border-radius: 6px;
+  box-shadow: var(--xeplr-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.55));
+  z-index: 50;
+  overflow: hidden;
+  max-height: 360px;
+  overflow-y: auto;
+}
+
+.xeplr-dropdown-panel-open { display: block; }
+
+.xeplr-dropdown-search {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--xeplr-border-secondary, #2a2d44);
+  background: var(--xeplr-bg-secondary, #1a1c30);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.xeplr-dropdown-search-input {
+  width: 100%;
+  background: var(--xeplr-input-bg, #0e0f1c);
+  border: 1px solid var(--xeplr-input-border, #2a2d44);
+  border-radius: 4px;
+  color: var(--xeplr-input-text, #e0e0e0);
+  padding: 7px 10px;
+  font-size: 13px;
+  outline: none;
+}
+
+.xeplr-dropdown-search-input:focus {
+  border-color: var(--xeplr-accent, #646cff);
+}
+
+.xeplr-dropdown-state {
+  padding: 14px 16px;
+  color: var(--xeplr-text-secondary, #888bbf);
+  font-size: 13px;
+  text-align: center;
+}
+
+.xeplr-dropdown-state-error { color: var(--xeplr-danger, #e25555); }
+
+.xeplr-dropdown-row {
+  display: grid;
+  grid-template-columns: auto 32px 1fr;
+  gap: 10px;
+  align-items: center;
+  padding: 9px 12px;
+  cursor: pointer;
+  border-bottom: 1px solid var(--xeplr-border-secondary, #1f2236);
+}
+
+.xeplr-dropdown-single .xeplr-dropdown-row {
+  grid-template-columns: 32px 1fr;
+}
+
+.xeplr-dropdown-row:hover { background: var(--xeplr-bg-hover, #1c1f33); }
+.xeplr-dropdown-row-selected { background: var(--xeplr-bg-active, rgba(100, 108, 255, 0.13)); }
+
+.xeplr-dropdown-check {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  border: 1.5px solid var(--xeplr-input-border, #444);
+  background: var(--xeplr-input-bg, #0e0f1c);
+  display: grid;
+  place-items: center;
+  font-size: 11px;
+  color: transparent;
+}
+
+.xeplr-dropdown-check-on {
+  background: var(--xeplr-accent, #646cff);
+  border-color: var(--xeplr-accent, #646cff);
+  color: var(--xeplr-accent-text, #fff);
+}
+
+.xeplr-dropdown-avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: var(--xeplr-tag-bg, #232540);
+  color: var(--xeplr-tag-text, #b8bbe0);
+  display: grid;
+  place-items: center;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.xeplr-dropdown-info {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.xeplr-dropdown-name {
+  font-size: 13px;
+  color: var(--xeplr-text-primary, #e6e8f5);
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.xeplr-dropdown-meta {
+  font-size: 11px;
+  color: var(--xeplr-text-secondary, #888bbf);
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.xeplr-dropdown-footer {
+  padding: 8px 12px;
+  border-top: 1px solid var(--xeplr-border-secondary, #2a2d44);
+  background: var(--xeplr-bg-secondary, #1a1c30);
+  text-align: right;
+}
+
+.xeplr-dropdown-clear {
+  font-size: 12px;
+  color: var(--xeplr-text-secondary, #888bbf);
+  cursor: pointer;
+}
+
+.xeplr-dropdown-clear:hover { color: var(--xeplr-danger, #e25555); }
+
+.xeplr-dropdown-create {
+  border-top: 1px solid var(--xeplr-border-secondary, #2a2d44);
+  color: var(--xeplr-accent, #9fb2ff);
+}
+.xeplr-dropdown-create:hover { background: var(--xeplr-bg-hover, #232744); }
+.xeplr-dropdown-create .xeplr-dropdown-name { color: var(--xeplr-accent, #9fb2ff); font-weight: 600; }
+.xeplr-dropdown-create-plus {
+  background: var(--xeplr-tag-bg, #2a2f52);
+  color: var(--xeplr-accent, #9fb2ff);
+  font-weight: 700;
+}

package/src/dropdown/designs/index.js

@@ -0,0 +1 @@
+export { default as DropdownSample } from './DropdownSample.jsx';

package/src/dropdown/dropdown.js

@@ -0,0 +1,75 @@
+/**
+ * Dropdown — pure model. No React.
+ *
+ * Two sources:
+ *   - 'static'  → caller passes `options` directly
+ *   - 'dynamic' → caller passes `fetchData` (returns Promise<Array>)
+ *
+ * Two modes: 'single' or 'multi'.
+ *
+ * Items default to { id, name }. Other shapes are supported via the `keys`
+ * prop, an array where keys[0] is the id field, keys[1] is the display name
+ * (also used for sort + search), and the remainder are "extra" fields shown
+ * as metadata in each row (also searchable).
+ */
+
+export var DROPDOWN_MODES = ['single', 'multi'];
+
+/**
+ * Turn a `keys` array (or undefined) into a structured shape.
+ * keys[0] = id, keys[1] = name, keys[2..] = extras.
+ */
+export function normalizeKeys(keys) {
+  var arr = Array.isArray(keys) && keys.length >= 2 ? keys : ['id', 'name'];
+  return {
+    id: arr[0],
+    name: arr[1],
+    extras: arr.slice(2)
+  };
+}
+
+/**
+ * Sort items ascending by the named key, case-insensitive for strings.
+ */
+export function sortByKey(items, key) {
+  if (!Array.isArray(items)) return [];
+  var copy = items.slice();
+  copy.sort(function(a, b) {
+    var av = a == null ? '' : a[key];
+    var bv = b == null ? '' : b[key];
+    if (typeof av === 'string') av = av.toLowerCase();
+    if (typeof bv === 'string') bv = bv.toLowerCase();
+    if (av < bv) return -1;
+    if (av > bv) return 1;
+    return 0;
+  });
+  return copy;
+}
+
+/**
+ * Filter items where any of `searchKeys` contains `query` (case-insensitive).
+ * Empty query returns all items.
+ */
+export function filterByQuery(items, query, searchKeys) {
+  if (!query) return items;
+  var q = String(query).toLowerCase();
+  return items.filter(function(item) {
+    for (var i = 0; i < searchKeys.length; i++) {
+      var v = item[searchKeys[i]];
+      if (v != null && String(v).toLowerCase().indexOf(q) !== -1) return true;
+    }
+    return false;
+  });
+}
+
+/**
+ * Find items whose ids match the given selection.
+ * `selection` is an array of ids; returns an array of items in the same order
+ * as the master list (preserves stability across reorders).
+ */
+export function pickSelected(items, selection, idKey) {
+  if (!selection || selection.length === 0) return [];
+  var set = {};
+  for (var i = 0; i < selection.length; i++) set[selection[i]] = true;
+  return items.filter(function(item) { return set[item[idKey]]; });
+}

package/src/dropdown/pages.jsx

@@ -0,0 +1,10 @@
+import { useDropdownController } from './useDropdownController.js';
+import DropdownSample from './designs/DropdownSample.jsx';
+import { useDesignValidator } from '../fileUpload/validateDesign.js';
+import { DROPDOWN_RULES } from './validateDesign.js';
+
+export function DropdownPage(props) {
+  var controller = useDropdownController(props);
+  var ref = useDesignValidator('DropdownPage', DROPDOWN_RULES);
+  return <div ref={ref}><DropdownSample {...controller} /></div>;
+}

package/src/dropdown/useDropdownController.js

@@ -0,0 +1,254 @@
+import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import {
+  DROPDOWN_MODES,
+  normalizeKeys,
+  sortByKey,
+  filterByQuery,
+  pickSelected
+} from './dropdown.js';
+
+/**
+ * @param {object} props
+ * @param {'single'|'multi'} [props.mode='single']
+ * @param {Array} [props.options]                 — static items
+ * @param {() => Promise<Array>} [props.fetchData] — dynamic loader
+ * @param {Array<string>} [props.keys]            — [idKey, nameKey, ...extraKeys]; default ['id','name']
+ * @param {*} [props.value]                       — controlled selection (id, or id[])
+ * @param {*} [props.defaultValue]                — uncontrolled initial selection
+ * @param {(value, items) => void} [props.onChange]
+ * @param {string} [props.placeholder='Select…']
+ * @param {boolean} [props.searchable=true]
+ * @param {boolean} [props.disabled]
+ * @param {(name:string) => Promise<*>} [props.onCreate] — create a new option from the typed
+ *   name via your API; return the created item (or its id) and it is auto-selected.
+ * @param {boolean} [props.allowCreate=true] — show the "add new" affordance when onCreate is set
+ * @param {string} [props.createLabel='Add'] — label prefix on the create row (e.g. 'Add company')
+ */
+export function useDropdownController(props) {
+  props = props || {};
+  var mode = props.mode || 'single';
+  if (DROPDOWN_MODES.indexOf(mode) === -1) {
+    throw new Error('[xeplr-ui-utils:Dropdown] Unknown mode: ' + mode + '. Expected one of ' + DROPDOWN_MODES.join(', '));
+  }
+
+  var keys = useMemo(function() { return normalizeKeys(props.keys); }, [props.keys]);
+  var source = props.fetchData ? 'dynamic' : 'static';
+  var searchable = props.searchable !== false;
+  var canCreate = !!props.onCreate && props.allowCreate !== false;
+
+  var [dynamicItems, setDynamicItems] = useState([]);
+  var [loading, setLoading] = useState(false);
+  var [error, setError] = useState('');
+  var [query, setQuery] = useState('');
+  var [isOpen, setIsOpen] = useState(false);
+  var [creating, setCreating] = useState(false);
+  var [createError, setCreateError] = useState('');
+
+  var isControlled = props.value !== undefined;
+  var initialSelection = useMemo(function() {
+    var v = isControlled ? props.value : props.defaultValue;
+    if (v === undefined || v === null) return [];
+    return Array.isArray(v) ? v.slice() : [v];
+  }, [isControlled, props.value, props.defaultValue]);
+
+  var [selection, setSelection] = useState(initialSelection);
+
+  useEffect(function() {
+    if (isControlled) {
+      var v = props.value;
+      setSelection(v === null || v === undefined ? [] : (Array.isArray(v) ? v.slice() : [v]));
+    }
+  }, [isControlled, props.value]);
+
+  // Static items are derived (no state — avoids re-render loops if caller
+  // passes a new `options` array reference each render). Dynamic items come
+  // from the fetch effect below.
+  var items = useMemo(function() {
+    if (source === 'static') return sortByKey(props.options || [], keys.name);
+    return dynamicItems;
+  }, [source, props.options, dynamicItems, keys.name]);
+
+  // Load dynamic data on mount.
+  var fetchedRef = useRef(false);
+  useEffect(function() {
+    if (source !== 'dynamic' || fetchedRef.current) return;
+    fetchedRef.current = true;
+    setLoading(true);
+    setError('');
+    Promise.resolve()
+      .then(function() { return props.fetchData(); })
+      .then(function(data) {
+        setDynamicItems(sortByKey(Array.isArray(data) ? data : [], keys.name));
+      })
+      .catch(function(err) {
+        setError(err && err.message ? err.message : 'Failed to load options');
+      })
+      .finally(function() {
+        setLoading(false);
+      });
+  }, [source]);
+
+  function refresh() {
+    if (source !== 'dynamic') return;
+    setLoading(true);
+    setError('');
+    Promise.resolve()
+      .then(function() { return props.fetchData(); })
+      .then(function(data) {
+        setDynamicItems(sortByKey(Array.isArray(data) ? data : [], keys.name));
+      })
+      .catch(function(err) {
+        setError(err && err.message ? err.message : 'Failed to load options');
+      })
+      .finally(function() {
+        setLoading(false);
+      });
+  }
+
+  var searchKeys = useMemo(function() {
+    return [keys.name].concat(keys.extras);
+  }, [keys]);
+
+  var filteredItems = useMemo(function() {
+    return filterByQuery(items, query, searchKeys);
+  }, [items, query, searchKeys]);
+
+  var selectedItems = useMemo(function() {
+    return pickSelected(items, selection, keys.id);
+  }, [items, selection, keys.id]);
+
+  function open() { if (!props.disabled) setIsOpen(true); }
+  function close() { setIsOpen(false); setQuery(''); }
+  function toggle() { isOpen ? close() : open(); }
+
+  function emit(nextSelection, itemsOverride) {
+    var nextItems = pickSelected(itemsOverride || items, nextSelection, keys.id);
+    if (props.onChange) {
+      props.onChange(mode === 'single' ? (nextSelection[0] || null) : nextSelection, nextItems);
+    }
+  }
+
+  // Create a new option from the typed name via props.onCreate, then reload the
+  // (dynamic) options so the new row carries its real server id, and select it.
+  function createItem(rawName) {
+    var name = String(rawName != null ? rawName : query).trim();
+    if (!name || !props.onCreate) return Promise.resolve();
+    setCreating(true);
+    setCreateError('');
+    return Promise.resolve()
+      .then(function() { return props.onCreate(name); })
+      .then(function(created) {
+        if (source === 'dynamic' && props.fetchData) {
+          return Promise.resolve(props.fetchData()).then(function(data) {
+            var fresh = sortByKey(Array.isArray(data) ? data : [], keys.name);
+            setDynamicItems(fresh);
+            return { created: created, fresh: fresh };
+          });
+        }
+        return { created: created, fresh: items };
+      })
+      .then(function(ctx) {
+        var created = ctx.created;
+        var fresh = ctx.fresh;
+        var newId = null;
+        if (created && typeof created === 'object') newId = created[keys.id];
+        else if (created !== undefined && created !== null) newId = created;
+        if (newId == null) {
+          var match = fresh.filter(function(it) { return it[keys.name] === name; })[0];
+          if (match) newId = match[keys.id];
+        }
+        if (newId == null) return;   // created, but couldn't resolve an id — leave unselected
+        var next = mode === 'single'
+          ? [newId]
+          : (selection.indexOf(newId) === -1 ? selection.concat(newId) : selection);
+        if (!isControlled) setSelection(next);
+        emit(next, fresh);
+        if (mode === 'single') close();
+      })
+      .catch(function(err) {
+        setCreateError(err && err.message ? err.message : 'Failed to add');
+      })
+      .finally(function() {
+        setCreating(false);
+      });
+  }
+
+  function selectItem(itemId) {
+    var next;
+    if (mode === 'single') {
+      next = [itemId];
+      if (!isControlled) setSelection(next);
+      emit(next);
+      close();
+      return;
+    }
+    var has = selection.indexOf(itemId) !== -1;
+    next = has ? selection.filter(function(id) { return id !== itemId; }) : selection.concat(itemId);
+    if (!isControlled) setSelection(next);
+    emit(next);
+  }
+
+  function removeSelection(itemId) {
+    var next = selection.filter(function(id) { return id !== itemId; });
+    if (!isControlled) setSelection(next);
+    emit(next);
+  }
+
+  function clearSelection() {
+    if (!isControlled) setSelection([]);
+    emit([]);
+  }
+
+  function handleSearch(e) {
+    setQuery(e.target.value);
+  }
+
+  // Click-outside support — design wires this onto its container ref.
+  var rootRef = useRef(null);
+  useEffect(function() {
+    if (!isOpen) return;
+    function onDocClick(e) {
+      if (rootRef.current && !rootRef.current.contains(e.target)) {
+        close();
+      }
+    }
+    document.addEventListener('mousedown', onDocClick);
+    return function() { document.removeEventListener('mousedown', onDocClick); };
+  }, [isOpen]);
+
+  var isSelected = useCallback(function(itemId) {
+    return selection.indexOf(itemId) !== -1;
+  }, [selection]);
+
+  return {
+    mode,
+    source,
+    keys,
+    searchable,
+    canCreate,
+    createLabel: props.createLabel || 'Add',
+    creating,
+    createError,
+    createItem,
+    placeholder: props.placeholder || 'Select…',
+    disabled: !!props.disabled,
+    items,
+    filteredItems,
+    selectedItems,
+    selection,
+    loading,
+    error,
+    query,
+    isOpen,
+    rootRef,
+    isSelected,
+    open,
+    close,
+    toggle,
+    selectItem,
+    removeSelection,
+    clearSelection,
+    handleSearch,
+    refresh
+  };
+}

package/src/dropdown/validateDesign.js

@@ -0,0 +1,4 @@
+export var DROPDOWN_RULES = [
+  { selector: '.xeplr-dropdown-trigger, [role="combobox"]', label: 'Trigger element (combobox)' },
+  { selector: '.xeplr-dropdown-panel, [role="listbox"]', label: 'Options panel (listbox)' }
+];

package/src/fileUpload/validateDesign.js

@@ -1,11 +1,17 @@
 import { useEffect, useRef } from 'react';
 
 /**
- * Validates that required elements exist in the rendered design.
- * Throws a visible error if any required element is missing.
+ * Validates that required elements exist in the rendered design, and reports
+ * loudly when they don't — console.error plus a data-xeplr-design-invalid
+ * marker on the container.
+ *
+ * A rule matches by id, role or selector. `anyOf` takes a list of selectors
+ * and passes when ANY one is present — which is what a design with tabs or
+ * steps needs, since only the current one is mounted and demanding all of
+ * them at once can never pass.
  *
  * @param {string} componentName - Name of the page (for error messages)
- * @param {Array<{id?: string, role?: string, selector?: string, label: string}>} requiredElements
+ * @param {Array<{id?: string, role?: string, selector?: string, anyOf?: string[], label: string}>} requiredElements
  */
 export function useDesignValidator(componentName, requiredElements) {
   var containerRef = useRef(null);
@@ -22,20 +28,33 @@ export function useDesignValidator(componentName, requiredElements) {
         found = !!containerRef.current.querySelector('#' + rule.id);
       } else if (rule.role) {
         found = !!containerRef.current.querySelector('[role="' + rule.role + '"]');
+      } else if (rule.anyOf) {
+        for (var j = 0; j < rule.anyOf.length && !found; j++) {
+          found = !!containerRef.current.querySelector(rule.anyOf[j]);
+        }
       } else if (rule.selector) {
         found = !!containerRef.current.querySelector(rule.selector);
       }
 
       if (!found) {
-        missing.push(rule.label + (rule.id ? ' (id="' + rule.id + '")' : '') + (rule.selector ? ' (' + rule.selector + ')' : ''));
+        var where = rule.id ? ' (id="' + rule.id + '")'
+          : rule.anyOf ? ' (one of: ' + rule.anyOf.join(', ') + ')'
+          : rule.selector ? ' (' + rule.selector + ')' : '';
+        missing.push(rule.label + where);
       }
     }
 
     if (missing.length > 0) {
-      throw new Error(
-        '[xeplr-ui-utils] ' + componentName + ' design is missing required elements:\n' +
-        missing.map(function(m) { return '  - ' + m; }).join('\n')
-      );
+      // Reported, not thrown. Throwing from an effect gives React nothing to
+      // catch, so a design rule — a development-time check — took the whole
+      // application down with it. The container is marked so the failure is
+      // visible on the page as well as in the console, which is what "fail
+      // loudly" was ever meant to buy.
+      var message = '[xeplr-ui-utils] ' + componentName + ' design is missing required elements:\n' +
+        missing.map(function(m) { return '  - ' + m; }).join('\n');
+      console.error(message);
+      containerRef.current.setAttribute('data-xeplr-design-invalid', componentName);
+      containerRef.current.setAttribute('title', message);
     }
   }, []);
 

package/src/gridDisplayer/designs/GridDisplayerSample.jsx

@@ -0,0 +1,58 @@
+import './gridDisplayer.css';
+
+export default function GridDisplayerSample({
+  query, setQuery,
+  sortFields, sortValue, setSortValue,
+  displayRows, tileFormatComponent, onSelect, onAddNew
+}) {
+  var TileFormatComponent = tileFormatComponent;
+
+  return (
+    <div className="xeplr-grid-displayer">
+      <div className="xeplr-grid-toolbar">
+        <input
+          type="text"
+          className="xeplr-grid-search"
+          placeholder="Search…"
+          value={query}
+          onChange={function(e) { setQuery(e.target.value); }}
+        />
+        {sortFields.length > 0 && (
+          <select
+            className="xeplr-grid-sort-select"
+            value={sortValue || ''}
+            onChange={function(e) { setSortValue(e.target.value || null); }}
+          >
+            {sortFields.map(function(f) {
+              return <option key={f.value} value={f.value}>{f.label}</option>;
+            })}
+          </select>
+        )}
+      </div>
+
+      <div className="xeplr-grid">
+        {onAddNew && (
+          <div className="xeplr-grid-tile xeplr-grid-tile-add" onClick={onAddNew}>
+            <TileFormatComponent isAddTile />
+          </div>
+        )}
+
+        {displayRows.map(function(row) {
+          return (
+            <div
+              key={row.id}
+              className="xeplr-grid-tile"
+              onClick={onSelect ? function() { onSelect(row); } : undefined}
+            >
+              <TileFormatComponent row={row} />
+            </div>
+          );
+        })}
+
+        {displayRows.length === 0 && !onAddNew && (
+          <div className="xeplr-grid-empty">No matches</div>
+        )}
+      </div>
+    </div>
+  );
+}