@pythia-software/query-table-ui 0.9.4 → 0.9.6

package/README.md

@@ -234,6 +234,15 @@ full workbenches use the shared modal/sheet foundation with Apply/Cancel and foc
 containment. Native selects, expandable sections, and formula autocomplete keep
 their respective form, disclosure, and combobox interactions.
 
+Distinct filter values use a freeform combobox. Focus or click the value input
+to open suggestions; Arrow Up/Down highlights a choice and Enter selects it.
+Escape dismisses suggestions and Tab leaves without selecting. The menu sizes
+to its contents independently of the compact input, wraps long values, and
+scrolls within the viewport, including inside mobile filter dialogs. Loading,
+unavailable suggestions, and no matches never prevent typing arbitrary values.
+While fetching new suggestions, matching values from the previous response stay
+visible and selectable. A loading message appears only when no known values match.
+
 ## Tag/set filters
 
 Set `filter.editor: "set"` on a `textarray` field to use the native WHERE
@@ -370,6 +379,54 @@ status indicators an accessible label on their wrapper.
 
 ## Mobile behavior
 
+### Responsive target sizing
+
+Set the public, unitless `--qt-touch-target-scale` CSS custom property to
+configure the **added** touch-target size in the bundled theme:
+
+| Value | Target sizing |
+| --- | --- |
+| `1` (default, including when unset) | Existing responsive enlargement |
+| `0.5` | Half the added size |
+| `0` | Desktop target sizing with the responsive layout |
+
+```css
+/* Scope to a host wrapper containing the builder, table and metrics. */
+.pharos-query-table {
+  --qt-touch-target-scale: 0.5;
+}
+```
+
+For each enlarged dimension, the theme uses
+`desktop + (responsive - desktop) * scale`. A desktop 24px button that normally
+grows to 44px therefore becomes 34px at `0.5`. Each control uses its own desktop
+baseline, including its line box, padding and borders; collapse controls, chips,
+picker rows and editor buttons have different baselines. Narrow and coarse
+pointer rules use the final responsive size once, so matching both does not
+compound the enlargement. Use a number from `0` to `1`, without a unit.
+
+The setting covers query actions/chips, table cells/actions, picker and menu
+rows, selection actions, saved-query controls, JSON controls, and select,
+property and metric editor controls. Content remains a lower bound: wrapped
+labels, icons, native controls and the retained mobile input fonts can require
+more room than the scaled minimum. Existing responsive size reductions stay
+compact. Layout widths, wrapping, sheets, scrolling, focus behavior, drag/touch
+actions, breakpoints and input font sizes are independent of the factor.
+
+Use `:root` for an application-wide setting, or a wrapper for independent
+instances. Built-in portaled menus, pickers, dialogs and sheets inherit the
+setting from their trigger/overlay anchor through the same theme propagation
+as the palette, including live ancestor `class`, `style` and `data-theme`
+changes. Keep standalone overlays beneath that wrapper in the React tree (and
+their anchor within it). Host-owned portals and controls with custom styling
+must propagate/apply their own sizing. `QueryBuilder`'s `compact` prop controls
+clause presentation separately.
+
+Run `npm run test:touch-targets` with `npm run demo` running to check relative
+sizing, scoped portal updates and interactions in Chromium and WebKit.
+
+### Responsive layout and interactions
+
 The bundled theme keeps the table as a horizontally scrollable grid on narrow
 screens so columns remain comparable. Narrow screens (up to 760px) and short,
 touch-based landscape viewports use a mobile interaction model:

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, SetStateAction, ButtonHTMLAttributes, CSSProperties, PointerEvent, Ref, MutableRefObject } from 'react';
+import { ReactNode, SetStateAction, CSSProperties, ButtonHTMLAttributes, PointerEvent, Ref, MutableRefObject } from 'react';
 import { FieldDef, QueryState, LinkTargets, CellDisplay, JsonCellDisplay, RowId, AggregationClause, AggregationBucket, AggregationResultEntry, MetricValue, SavedQuery, FieldStats, WhereClause, MetricValueFormat, FieldSchema, PropertyViewState, RelationshipAdapter, ObjectReference, PropertyFormat, PropertyViewStorage, ItemPropertyMode, FormulaFunction, GroupedRow } from '@pythia-software/query-table-core';
 import { ItemDetailsApi, SelectionApi, ColumnDragApi, QueryTableApi, QueryFilterApi, AggregationsApi, SavedQueriesApi, RequestActivityApi, PropertyViewApi, GroupingApi } from '@pythia-software/query-table-react';
 import { Placement } from '@floating-ui/react';
@@ -346,7 +346,11 @@ interface FloatingOverlayOptions {
     anchor: OverlayAnchor;
     onClose: () => void;
     returnFocus?: HTMLElement | null | undefined;
-    width?: number | undefined;
+    width?: CSSProperties["width"] | undefined;
+    /** Combobox suggestions remain anchored on mobile and keep focus in their input. */
+    modalOnMobile?: boolean | undefined;
+    retainAnchorFocus?: boolean | undefined;
+    maxHeight?: number | undefined;
     placement?: Placement | undefined;
     nodeId?: string | undefined;
 }