@magicx-eng/ai-autocomplete-vanilla 0.45.0 → 0.47.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -1
- package/dist/index.d.mts +73 -2
- package/dist/index.d.ts +73 -2
- package/dist/index.js +206 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +206 -2
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -167,8 +167,11 @@ ac.setMode("dark"); // Switch color mode
|
|
|
167
167
|
ac.update({ animations: false, optionsPosition: "above" });
|
|
168
168
|
ac.selectProduct(product); // Emit onProductSelect (Tier 3 / custom strips)
|
|
169
169
|
ac.getResult(); // The AutocompleteResult as it stands right now
|
|
170
|
+
ac.getRequestId(); // The latest applied /suggest request ID, or null
|
|
170
171
|
```
|
|
171
172
|
|
|
173
|
+
`ac.getRequestId()` returns the `meta.request_id` of the latest applied `/suggest` request. Use this ID to join your own events to the suggestion response that was on screen. It returns `null` before a response applies and after `reset()`, until a new response applies. While a request is pending, it keeps the previous applied ID. Superseded responses do not change it.
|
|
174
|
+
|
|
172
175
|
> **Tier 1 auto-resets** after both Enter key and built-in submit-button clicks — your `onSubmit` runs, then the SDK clears the input and starts a new session. You don't need to call `ac.reset()` yourself in Tier 1. Pass `resetOnSubmit: false` to keep the query in place instead — useful when `onSubmit` navigates to a results page, where a cleared field would flash empty until the next page paints — and call `ac.reset()` yourself when you want a fresh session.
|
|
173
176
|
|
|
174
177
|
> `autoFocus`, `focus()`, and `blur()` only operate on the contentEditable editor the library owns (Tier 1 / `renderMode: "full"`). In Tier 2/3, the consumer owns the input and calls `.focus()` / `.blur()` on their own element; the `onFocus` / `onBlur` callbacks still fire whenever `setFocused()` is called.
|
|
@@ -944,6 +947,16 @@ document.getElementById("my-autocomplete")
|
|
|
944
947
|
.style.setProperty("--aia-pill-bg", newColor);
|
|
945
948
|
```
|
|
946
949
|
|
|
950
|
+
### Short screens
|
|
951
|
+
|
|
952
|
+
When the open dropdown would run past the edge of the visible screen — most often a phone with its on-screen keyboard up, or a short browser window — it shrinks to the space that is left and scrolls as one: the options, the product strip and the footer move together, so scrolling down past the last option brings the products into view. The pill bar scrolls with them. Each time the dropdown opens it checks again, and while it is open it follows the keyboard opening and closing and the page scrolling.
|
|
953
|
+
|
|
954
|
+
While fitted, the dropdown root carries `data-aia-fit`, and the height it is capped at is in its `--aia-dropdown-fit-height` property. Every option shows in that one scroll, so the option list's usual limit of visible rows does not apply.
|
|
955
|
+
|
|
956
|
+
### Dismissing the keyboard
|
|
957
|
+
|
|
958
|
+
On a phone or tablet, the shopper can put the keyboard away to see the whole dropdown: a tap on the page, or the keyboard's own done / hide key, closes the keyboard and leaves the dropdown open. The next tap outside the search box and dropdown closes it. Scrolling the page doesn't, and neither does tapping inside the dropdown. A tap on a link, button or other field outside it is treated as moving on, and closes the dropdown straight away as before. With a mouse, a click outside closes the dropdown at once, as it always has. While the dropdown is held open this way, `isDropdownOpen` stays `true` and `isFocused` is `false`.
|
|
959
|
+
|
|
947
960
|
### Selector Hooks
|
|
948
961
|
|
|
949
962
|
For styling beyond the CSS variables, target these stable `data-aia-*` attributes:
|
|
@@ -961,7 +974,7 @@ For styling beyond the CSS variables, target these stable `data-aia-*` attribute
|
|
|
961
974
|
| `[data-aia-skip]` | The pill bar's trailing "skip" button. Tune via `--aia-skip-font-size` / `--aia-skip-color` / `--aia-skip-color-hover` / `--aia-skip-hover-bg` |
|
|
962
975
|
| `[data-aia-option]` | Each suggestion option |
|
|
963
976
|
| `[data-aia-scroll-arrow]` | The "more below" arrow on the dropdown — carries `data-aia-visible` while shown |
|
|
964
|
-
| `[data-aia-dropdown]` | The dropdown root (listbox). Carries `data-aia-has-products` while the product strip has cards. |
|
|
977
|
+
| `[data-aia-dropdown]` | The dropdown root (listbox). Carries `data-aia-has-products` while the product strip has cards, and `data-aia-fit` while it is fitted to a short screen (see [Short screens](#short-screens)). |
|
|
965
978
|
| `[data-aia-datepicker]` | The calendar, rendered in place of the option list for a date parameter |
|
|
966
979
|
| `[data-aia-date-month]` | The "March 2026" header label |
|
|
967
980
|
| `[data-aia-date-prev]` / `[data-aia-date-next]` | The month arrows |
|
package/dist/index.d.mts
CHANGED
|
@@ -709,6 +709,13 @@ interface CoreInputState {
|
|
|
709
709
|
skipNextFetch: boolean;
|
|
710
710
|
lastRawQuery: string;
|
|
711
711
|
isFocused: boolean;
|
|
712
|
+
/**
|
|
713
|
+
* The open dropdown stays up through a blur. Latched on while the panel is
|
|
714
|
+
* open and focused on a touch-primary device, and released by the next tap
|
|
715
|
+
* outside the widget, so dismissing the keyboard leaves the panel on screen.
|
|
716
|
+
* See controllers/holdOpenController.ts.
|
|
717
|
+
*/
|
|
718
|
+
dropdownHeld: boolean;
|
|
712
719
|
/**
|
|
713
720
|
* Re-edit state: while non-null, the user is editing a bold completed param.
|
|
714
721
|
* The snapshot stays here even after the param is removed from
|
|
@@ -945,7 +952,9 @@ interface CoreOptions {
|
|
|
945
952
|
/**
|
|
946
953
|
* BCP 47 language tag (e.g. `"es"`), sent with every suggestion request and telemetry event.
|
|
947
954
|
* Default: the browser language (`navigator.language`), else `"en-US"`.
|
|
948
|
-
* Only an explicit value selects the SDK
|
|
955
|
+
* Only an explicit value selects the SDK UI language. The browser language does not.
|
|
956
|
+
* UI languages: en, es, fr, pt-BR, it, tr, id, pl, de, nl, sv, nb, da, fi, ja, ko, zh-CN and zh-TW.
|
|
957
|
+
* Unsupported languages use English.
|
|
949
958
|
*/
|
|
950
959
|
language?: string;
|
|
951
960
|
/**
|
|
@@ -1140,6 +1149,7 @@ declare class AIAutocomplete {
|
|
|
1140
1149
|
private fetchController;
|
|
1141
1150
|
private keyboardController;
|
|
1142
1151
|
private pillsController;
|
|
1152
|
+
private holdOpen;
|
|
1143
1153
|
private productsController;
|
|
1144
1154
|
private optionSource;
|
|
1145
1155
|
private reEdit;
|
|
@@ -1368,6 +1378,8 @@ declare class AIAutocomplete {
|
|
|
1368
1378
|
* custom submit button, a "save draft" action).
|
|
1369
1379
|
*/
|
|
1370
1380
|
getResult(): AutocompleteResult;
|
|
1381
|
+
/** Returns the latest applied /suggest request ID, or null before a response or after reset. */
|
|
1382
|
+
getRequestId(): string | null;
|
|
1371
1383
|
private buildResult;
|
|
1372
1384
|
get listboxId(): string;
|
|
1373
1385
|
get isReady(): boolean;
|
|
@@ -2276,6 +2288,65 @@ declare function productImageSources(url: string | null | undefined): string[];
|
|
|
2276
2288
|
*/
|
|
2277
2289
|
declare function productImageSrc(url: string | null | undefined): string | undefined;
|
|
2278
2290
|
|
|
2291
|
+
/**
|
|
2292
|
+
* Fit the open dropdown to the part of the screen the shopper can actually see.
|
|
2293
|
+
*
|
|
2294
|
+
* On a phone the on-screen keyboard takes half the screen, and a dropdown laid
|
|
2295
|
+
* out for the full height runs underneath it: the options fit, the product
|
|
2296
|
+
* strip below them is cut off, and there is no way to scroll to it — the
|
|
2297
|
+
* options grid scrolls on its own and the strip is outside it (2026-10-26,
|
|
2298
|
+
* from a Shopify storefront on Android). The same happens in any window too
|
|
2299
|
+
* short for the panel.
|
|
2300
|
+
*
|
|
2301
|
+
* So when the open panel would run past the bottom of the visible viewport
|
|
2302
|
+
* (the top, for `optionsPosition="above"`), it switches to a fitted layout:
|
|
2303
|
+
*
|
|
2304
|
+
* - `data-aia-fit` on the dropdown, and its height capped at the space left
|
|
2305
|
+
* between it and the viewport's edge (`--aia-dropdown-fit-height`, never
|
|
2306
|
+
* below MIN_FIT_HEIGHT_PX).
|
|
2307
|
+
* - The stylesheets (the fit block in each appearance copy) then make the
|
|
2308
|
+
* section stack the one scroll box and lift the options grid's own row cap,
|
|
2309
|
+
* so options, product strip and footer scroll together and the strip is
|
|
2310
|
+
* reached by scrolling down past the last option.
|
|
2311
|
+
*
|
|
2312
|
+
* The visible viewport is `window.visualViewport` where there is one: it is
|
|
2313
|
+
* what the keyboard shrinks (Chrome on Android resizes only the visual
|
|
2314
|
+
* viewport by default, iOS Safari never resizes the layout one), so
|
|
2315
|
+
* `innerHeight` alone would never see the keyboard.
|
|
2316
|
+
*
|
|
2317
|
+
* Once a panel is fitted it stays fitted until it closes. Fitted and unfitted
|
|
2318
|
+
* look the same whenever everything fits — the only difference is whether a
|
|
2319
|
+
* long option list scrolls on its own or with the rest — so there is no
|
|
2320
|
+
* reason to measure the unfitted height again (which would mean undoing the
|
|
2321
|
+
* layout, and the shopper's scroll position with it). Each opening decides
|
|
2322
|
+
* afresh.
|
|
2323
|
+
*
|
|
2324
|
+
* The DOM differs per package, so like the scroll arrow the behaviour lives in
|
|
2325
|
+
* this one controller: each package hands it its dropdown element and a way
|
|
2326
|
+
* to tell whether the panel is open, and calls `update()` after every render.
|
|
2327
|
+
* The controller listens for viewport and page scrolling changes itself.
|
|
2328
|
+
*/
|
|
2329
|
+
/** Present on the dropdown while it is fitted to the visible viewport. */
|
|
2330
|
+
declare const VIEWPORT_FIT_ATTR = "data-aia-fit";
|
|
2331
|
+
/** Inline custom property on the dropdown: the height it is capped at while fitted. */
|
|
2332
|
+
declare const VIEWPORT_FIT_HEIGHT_VAR = "--aia-dropdown-fit-height";
|
|
2333
|
+
interface ViewportFitArgs {
|
|
2334
|
+
/** The `[data-aia-dropdown]` element. */
|
|
2335
|
+
dropdown: HTMLElement;
|
|
2336
|
+
/**
|
|
2337
|
+
* Whether the panel is open right now. False during the close fade too, so
|
|
2338
|
+
* a closing panel keeps the layout it fades out in.
|
|
2339
|
+
*/
|
|
2340
|
+
isOpen: () => boolean;
|
|
2341
|
+
}
|
|
2342
|
+
interface ViewportFitController {
|
|
2343
|
+
/** Re-measure after a render. */
|
|
2344
|
+
update(): void;
|
|
2345
|
+
/** Drop the listeners. Leaves the dropdown's attributes as they are. */
|
|
2346
|
+
destroy(): void;
|
|
2347
|
+
}
|
|
2348
|
+
declare function attachViewportFit({ dropdown, isOpen }: ViewportFitArgs): ViewportFitController;
|
|
2349
|
+
|
|
2279
2350
|
type Listener<S> = (next: S, prev: S) => void;
|
|
2280
2351
|
interface Store<S> {
|
|
2281
2352
|
get: () => S;
|
|
@@ -2481,4 +2552,4 @@ interface SubmitResultExtras {
|
|
|
2481
2552
|
*/
|
|
2482
2553
|
declare function buildSubmitResult(text: string, completedParams: CompletedParamState[], skippedParams?: SkippedParamState[], extras?: SubmitResultExtras): AutocompleteResult;
|
|
2483
2554
|
|
|
2484
|
-
export { AIAutocomplete, type APIConfig, type APIKeyConfig, ATTRIBUTION_URL, type AccessTokenConfig, type AccessTokenResult, type AppearanceMode, type AutocompleteRequest, type AutocompleteResponse, type AutocompleteResult, type CompletedParam, type CompletedParamState, type CoreOptions, type CoreState, type CustomFieldsReport, DATE_RANGE_META_END, DATE_RANGE_META_START, DEFAULT_OPTION_COUNT_UNIT, type DateMonthView, type DateRange, type DateSelection, type ExpressedFilter, type FilterOp, type FormatType, type IdentifiedParam, type IdentifiedParamState, type InputItem, type LooseDateOptions, type MatchedItem, type MatchedItems, ModeController, OPTIONS_GRID_MOBILE_QUERY, OPTION_ENTER_DELAY_VAR, OPTION_ENTER_FADE_MS, OPTION_ENTER_RISE_MS, OPTION_ENTER_RISE_PX, OPTION_ENTER_STAGGER_MS, OPTION_IMAGE_WIDTH, type OptionOverride, type OptionOverrides, type OptionsGridLayout, type OptionsGridPlan, PLACEHOLDER_FADE_OUT_MS, PLACEHOLDER_LEAVING_ATTR, PLACEHOLDER_SWAP_GAP_MS, PLACEHOLDER_TYPE_MS, PLACEHOLDER_WORD_PAUSE_MS, PRODUCT_IMAGE_WIDTH, PRODUCT_PATH_PREFIX, PRODUCT_ROW_PX_PER_LINE, type Product, type ProductImageFallback, type ProductRowMetrics, type ProductRowWheel, type ProductsConfig, type ProductsLayout, RANGE_SEPARATOR, type RecentlySuggested, type RenderMode, SCHEMA_VERSION, SCROLL_ARROW_ATTR, SCROLL_ARROW_BOTTOM_VAR, SCROLL_ARROW_CLASS, SCROLL_ARROW_FADE_MS, SCROLL_ARROW_LABEL, SCROLL_ARROW_SCROLL_IDLE_MS, SCROLL_ARROW_VISIBLE_ATTR, SKIPPED_PARAM_TEXT, type ScrollArrowArgs, type ScrollArrowController, type Segment, type SkippedParamState, type Store, type SubmitResultExtras, type Suggestion, type SuggestionOption, type SuggestionType, type TaskKind, type UIStrings, WEEKDAY_LABELS, addMonths, attachProductRowWheel, attachScrollArrow, buildAttributionUrl, buildDateOptions, buildQuery, buildSubmitResult, cellDay, cellIso, chipIdFromTap, computeOptionsGridLayout, containScroll, createStore, cursorIsAtEnd, dateCellMarks, dateSelectionFor, extractPlainText, formatAbsoluteDate, formatDate, formatDateRange, formatOptionCount, getCursorOffset, getFooterHint, identifiedParamLabel, isCalendarFormat, isOptionsGridMobileViewport, isoDate, keepCaretOnChip, measureOptionsGrid, monthLabel, needsOptionsGridMeasurement, optionCountLabel, optionEnterDelayMs, optionHasImage, optionImageSources, optionImageSrc, optionLabel, optionsEntranceDurationMs, optionsGridTemplateColumns, parseDate, parseLooseDate, parseLooseDateRange, plainTextLength, planOptionsGrid, previousGraphemeBoundary, productFromMatchedItem, productImageSources, productImageSrc, productInitial, productRowWheelTarget, productsFromCustomFields, renderEditableContent, resolveFormatType, resolveIdentifiedDate, sameOptionRows, sanitizeOptionIconSvg, scrollCaretIntoView, selectedIsoFromText, selectedRangeFor, setCursorOffset, shopifyImageSrc, toWireIdentifiedParams, uiStringsFor, visibleDateRange, withSkippedParams };
|
|
2555
|
+
export { AIAutocomplete, type APIConfig, type APIKeyConfig, ATTRIBUTION_URL, type AccessTokenConfig, type AccessTokenResult, type AppearanceMode, type AutocompleteRequest, type AutocompleteResponse, type AutocompleteResult, type CompletedParam, type CompletedParamState, type CoreOptions, type CoreState, type CustomFieldsReport, DATE_RANGE_META_END, DATE_RANGE_META_START, DEFAULT_OPTION_COUNT_UNIT, type DateMonthView, type DateRange, type DateSelection, type ExpressedFilter, type FilterOp, type FormatType, type IdentifiedParam, type IdentifiedParamState, type InputItem, type LooseDateOptions, type MatchedItem, type MatchedItems, ModeController, OPTIONS_GRID_MOBILE_QUERY, OPTION_ENTER_DELAY_VAR, OPTION_ENTER_FADE_MS, OPTION_ENTER_RISE_MS, OPTION_ENTER_RISE_PX, OPTION_ENTER_STAGGER_MS, OPTION_IMAGE_WIDTH, type OptionOverride, type OptionOverrides, type OptionsGridLayout, type OptionsGridPlan, PLACEHOLDER_FADE_OUT_MS, PLACEHOLDER_LEAVING_ATTR, PLACEHOLDER_SWAP_GAP_MS, PLACEHOLDER_TYPE_MS, PLACEHOLDER_WORD_PAUSE_MS, PRODUCT_IMAGE_WIDTH, PRODUCT_PATH_PREFIX, PRODUCT_ROW_PX_PER_LINE, type Product, type ProductImageFallback, type ProductRowMetrics, type ProductRowWheel, type ProductsConfig, type ProductsLayout, RANGE_SEPARATOR, type RecentlySuggested, type RenderMode, SCHEMA_VERSION, SCROLL_ARROW_ATTR, SCROLL_ARROW_BOTTOM_VAR, SCROLL_ARROW_CLASS, SCROLL_ARROW_FADE_MS, SCROLL_ARROW_LABEL, SCROLL_ARROW_SCROLL_IDLE_MS, SCROLL_ARROW_VISIBLE_ATTR, SKIPPED_PARAM_TEXT, type ScrollArrowArgs, type ScrollArrowController, type Segment, type SkippedParamState, type Store, type SubmitResultExtras, type Suggestion, type SuggestionOption, type SuggestionType, type TaskKind, type UIStrings, VIEWPORT_FIT_ATTR, VIEWPORT_FIT_HEIGHT_VAR, type ViewportFitArgs, type ViewportFitController, WEEKDAY_LABELS, addMonths, attachProductRowWheel, attachScrollArrow, attachViewportFit, buildAttributionUrl, buildDateOptions, buildQuery, buildSubmitResult, cellDay, cellIso, chipIdFromTap, computeOptionsGridLayout, containScroll, createStore, cursorIsAtEnd, dateCellMarks, dateSelectionFor, extractPlainText, formatAbsoluteDate, formatDate, formatDateRange, formatOptionCount, getCursorOffset, getFooterHint, identifiedParamLabel, isCalendarFormat, isOptionsGridMobileViewport, isoDate, keepCaretOnChip, measureOptionsGrid, monthLabel, needsOptionsGridMeasurement, optionCountLabel, optionEnterDelayMs, optionHasImage, optionImageSources, optionImageSrc, optionLabel, optionsEntranceDurationMs, optionsGridTemplateColumns, parseDate, parseLooseDate, parseLooseDateRange, plainTextLength, planOptionsGrid, previousGraphemeBoundary, productFromMatchedItem, productImageSources, productImageSrc, productInitial, productRowWheelTarget, productsFromCustomFields, renderEditableContent, resolveFormatType, resolveIdentifiedDate, sameOptionRows, sanitizeOptionIconSvg, scrollCaretIntoView, selectedIsoFromText, selectedRangeFor, setCursorOffset, shopifyImageSrc, toWireIdentifiedParams, uiStringsFor, visibleDateRange, withSkippedParams };
|
package/dist/index.d.ts
CHANGED
|
@@ -709,6 +709,13 @@ interface CoreInputState {
|
|
|
709
709
|
skipNextFetch: boolean;
|
|
710
710
|
lastRawQuery: string;
|
|
711
711
|
isFocused: boolean;
|
|
712
|
+
/**
|
|
713
|
+
* The open dropdown stays up through a blur. Latched on while the panel is
|
|
714
|
+
* open and focused on a touch-primary device, and released by the next tap
|
|
715
|
+
* outside the widget, so dismissing the keyboard leaves the panel on screen.
|
|
716
|
+
* See controllers/holdOpenController.ts.
|
|
717
|
+
*/
|
|
718
|
+
dropdownHeld: boolean;
|
|
712
719
|
/**
|
|
713
720
|
* Re-edit state: while non-null, the user is editing a bold completed param.
|
|
714
721
|
* The snapshot stays here even after the param is removed from
|
|
@@ -945,7 +952,9 @@ interface CoreOptions {
|
|
|
945
952
|
/**
|
|
946
953
|
* BCP 47 language tag (e.g. `"es"`), sent with every suggestion request and telemetry event.
|
|
947
954
|
* Default: the browser language (`navigator.language`), else `"en-US"`.
|
|
948
|
-
* Only an explicit value selects the SDK
|
|
955
|
+
* Only an explicit value selects the SDK UI language. The browser language does not.
|
|
956
|
+
* UI languages: en, es, fr, pt-BR, it, tr, id, pl, de, nl, sv, nb, da, fi, ja, ko, zh-CN and zh-TW.
|
|
957
|
+
* Unsupported languages use English.
|
|
949
958
|
*/
|
|
950
959
|
language?: string;
|
|
951
960
|
/**
|
|
@@ -1140,6 +1149,7 @@ declare class AIAutocomplete {
|
|
|
1140
1149
|
private fetchController;
|
|
1141
1150
|
private keyboardController;
|
|
1142
1151
|
private pillsController;
|
|
1152
|
+
private holdOpen;
|
|
1143
1153
|
private productsController;
|
|
1144
1154
|
private optionSource;
|
|
1145
1155
|
private reEdit;
|
|
@@ -1368,6 +1378,8 @@ declare class AIAutocomplete {
|
|
|
1368
1378
|
* custom submit button, a "save draft" action).
|
|
1369
1379
|
*/
|
|
1370
1380
|
getResult(): AutocompleteResult;
|
|
1381
|
+
/** Returns the latest applied /suggest request ID, or null before a response or after reset. */
|
|
1382
|
+
getRequestId(): string | null;
|
|
1371
1383
|
private buildResult;
|
|
1372
1384
|
get listboxId(): string;
|
|
1373
1385
|
get isReady(): boolean;
|
|
@@ -2276,6 +2288,65 @@ declare function productImageSources(url: string | null | undefined): string[];
|
|
|
2276
2288
|
*/
|
|
2277
2289
|
declare function productImageSrc(url: string | null | undefined): string | undefined;
|
|
2278
2290
|
|
|
2291
|
+
/**
|
|
2292
|
+
* Fit the open dropdown to the part of the screen the shopper can actually see.
|
|
2293
|
+
*
|
|
2294
|
+
* On a phone the on-screen keyboard takes half the screen, and a dropdown laid
|
|
2295
|
+
* out for the full height runs underneath it: the options fit, the product
|
|
2296
|
+
* strip below them is cut off, and there is no way to scroll to it — the
|
|
2297
|
+
* options grid scrolls on its own and the strip is outside it (2026-10-26,
|
|
2298
|
+
* from a Shopify storefront on Android). The same happens in any window too
|
|
2299
|
+
* short for the panel.
|
|
2300
|
+
*
|
|
2301
|
+
* So when the open panel would run past the bottom of the visible viewport
|
|
2302
|
+
* (the top, for `optionsPosition="above"`), it switches to a fitted layout:
|
|
2303
|
+
*
|
|
2304
|
+
* - `data-aia-fit` on the dropdown, and its height capped at the space left
|
|
2305
|
+
* between it and the viewport's edge (`--aia-dropdown-fit-height`, never
|
|
2306
|
+
* below MIN_FIT_HEIGHT_PX).
|
|
2307
|
+
* - The stylesheets (the fit block in each appearance copy) then make the
|
|
2308
|
+
* section stack the one scroll box and lift the options grid's own row cap,
|
|
2309
|
+
* so options, product strip and footer scroll together and the strip is
|
|
2310
|
+
* reached by scrolling down past the last option.
|
|
2311
|
+
*
|
|
2312
|
+
* The visible viewport is `window.visualViewport` where there is one: it is
|
|
2313
|
+
* what the keyboard shrinks (Chrome on Android resizes only the visual
|
|
2314
|
+
* viewport by default, iOS Safari never resizes the layout one), so
|
|
2315
|
+
* `innerHeight` alone would never see the keyboard.
|
|
2316
|
+
*
|
|
2317
|
+
* Once a panel is fitted it stays fitted until it closes. Fitted and unfitted
|
|
2318
|
+
* look the same whenever everything fits — the only difference is whether a
|
|
2319
|
+
* long option list scrolls on its own or with the rest — so there is no
|
|
2320
|
+
* reason to measure the unfitted height again (which would mean undoing the
|
|
2321
|
+
* layout, and the shopper's scroll position with it). Each opening decides
|
|
2322
|
+
* afresh.
|
|
2323
|
+
*
|
|
2324
|
+
* The DOM differs per package, so like the scroll arrow the behaviour lives in
|
|
2325
|
+
* this one controller: each package hands it its dropdown element and a way
|
|
2326
|
+
* to tell whether the panel is open, and calls `update()` after every render.
|
|
2327
|
+
* The controller listens for viewport and page scrolling changes itself.
|
|
2328
|
+
*/
|
|
2329
|
+
/** Present on the dropdown while it is fitted to the visible viewport. */
|
|
2330
|
+
declare const VIEWPORT_FIT_ATTR = "data-aia-fit";
|
|
2331
|
+
/** Inline custom property on the dropdown: the height it is capped at while fitted. */
|
|
2332
|
+
declare const VIEWPORT_FIT_HEIGHT_VAR = "--aia-dropdown-fit-height";
|
|
2333
|
+
interface ViewportFitArgs {
|
|
2334
|
+
/** The `[data-aia-dropdown]` element. */
|
|
2335
|
+
dropdown: HTMLElement;
|
|
2336
|
+
/**
|
|
2337
|
+
* Whether the panel is open right now. False during the close fade too, so
|
|
2338
|
+
* a closing panel keeps the layout it fades out in.
|
|
2339
|
+
*/
|
|
2340
|
+
isOpen: () => boolean;
|
|
2341
|
+
}
|
|
2342
|
+
interface ViewportFitController {
|
|
2343
|
+
/** Re-measure after a render. */
|
|
2344
|
+
update(): void;
|
|
2345
|
+
/** Drop the listeners. Leaves the dropdown's attributes as they are. */
|
|
2346
|
+
destroy(): void;
|
|
2347
|
+
}
|
|
2348
|
+
declare function attachViewportFit({ dropdown, isOpen }: ViewportFitArgs): ViewportFitController;
|
|
2349
|
+
|
|
2279
2350
|
type Listener<S> = (next: S, prev: S) => void;
|
|
2280
2351
|
interface Store<S> {
|
|
2281
2352
|
get: () => S;
|
|
@@ -2481,4 +2552,4 @@ interface SubmitResultExtras {
|
|
|
2481
2552
|
*/
|
|
2482
2553
|
declare function buildSubmitResult(text: string, completedParams: CompletedParamState[], skippedParams?: SkippedParamState[], extras?: SubmitResultExtras): AutocompleteResult;
|
|
2483
2554
|
|
|
2484
|
-
export { AIAutocomplete, type APIConfig, type APIKeyConfig, ATTRIBUTION_URL, type AccessTokenConfig, type AccessTokenResult, type AppearanceMode, type AutocompleteRequest, type AutocompleteResponse, type AutocompleteResult, type CompletedParam, type CompletedParamState, type CoreOptions, type CoreState, type CustomFieldsReport, DATE_RANGE_META_END, DATE_RANGE_META_START, DEFAULT_OPTION_COUNT_UNIT, type DateMonthView, type DateRange, type DateSelection, type ExpressedFilter, type FilterOp, type FormatType, type IdentifiedParam, type IdentifiedParamState, type InputItem, type LooseDateOptions, type MatchedItem, type MatchedItems, ModeController, OPTIONS_GRID_MOBILE_QUERY, OPTION_ENTER_DELAY_VAR, OPTION_ENTER_FADE_MS, OPTION_ENTER_RISE_MS, OPTION_ENTER_RISE_PX, OPTION_ENTER_STAGGER_MS, OPTION_IMAGE_WIDTH, type OptionOverride, type OptionOverrides, type OptionsGridLayout, type OptionsGridPlan, PLACEHOLDER_FADE_OUT_MS, PLACEHOLDER_LEAVING_ATTR, PLACEHOLDER_SWAP_GAP_MS, PLACEHOLDER_TYPE_MS, PLACEHOLDER_WORD_PAUSE_MS, PRODUCT_IMAGE_WIDTH, PRODUCT_PATH_PREFIX, PRODUCT_ROW_PX_PER_LINE, type Product, type ProductImageFallback, type ProductRowMetrics, type ProductRowWheel, type ProductsConfig, type ProductsLayout, RANGE_SEPARATOR, type RecentlySuggested, type RenderMode, SCHEMA_VERSION, SCROLL_ARROW_ATTR, SCROLL_ARROW_BOTTOM_VAR, SCROLL_ARROW_CLASS, SCROLL_ARROW_FADE_MS, SCROLL_ARROW_LABEL, SCROLL_ARROW_SCROLL_IDLE_MS, SCROLL_ARROW_VISIBLE_ATTR, SKIPPED_PARAM_TEXT, type ScrollArrowArgs, type ScrollArrowController, type Segment, type SkippedParamState, type Store, type SubmitResultExtras, type Suggestion, type SuggestionOption, type SuggestionType, type TaskKind, type UIStrings, WEEKDAY_LABELS, addMonths, attachProductRowWheel, attachScrollArrow, buildAttributionUrl, buildDateOptions, buildQuery, buildSubmitResult, cellDay, cellIso, chipIdFromTap, computeOptionsGridLayout, containScroll, createStore, cursorIsAtEnd, dateCellMarks, dateSelectionFor, extractPlainText, formatAbsoluteDate, formatDate, formatDateRange, formatOptionCount, getCursorOffset, getFooterHint, identifiedParamLabel, isCalendarFormat, isOptionsGridMobileViewport, isoDate, keepCaretOnChip, measureOptionsGrid, monthLabel, needsOptionsGridMeasurement, optionCountLabel, optionEnterDelayMs, optionHasImage, optionImageSources, optionImageSrc, optionLabel, optionsEntranceDurationMs, optionsGridTemplateColumns, parseDate, parseLooseDate, parseLooseDateRange, plainTextLength, planOptionsGrid, previousGraphemeBoundary, productFromMatchedItem, productImageSources, productImageSrc, productInitial, productRowWheelTarget, productsFromCustomFields, renderEditableContent, resolveFormatType, resolveIdentifiedDate, sameOptionRows, sanitizeOptionIconSvg, scrollCaretIntoView, selectedIsoFromText, selectedRangeFor, setCursorOffset, shopifyImageSrc, toWireIdentifiedParams, uiStringsFor, visibleDateRange, withSkippedParams };
|
|
2555
|
+
export { AIAutocomplete, type APIConfig, type APIKeyConfig, ATTRIBUTION_URL, type AccessTokenConfig, type AccessTokenResult, type AppearanceMode, type AutocompleteRequest, type AutocompleteResponse, type AutocompleteResult, type CompletedParam, type CompletedParamState, type CoreOptions, type CoreState, type CustomFieldsReport, DATE_RANGE_META_END, DATE_RANGE_META_START, DEFAULT_OPTION_COUNT_UNIT, type DateMonthView, type DateRange, type DateSelection, type ExpressedFilter, type FilterOp, type FormatType, type IdentifiedParam, type IdentifiedParamState, type InputItem, type LooseDateOptions, type MatchedItem, type MatchedItems, ModeController, OPTIONS_GRID_MOBILE_QUERY, OPTION_ENTER_DELAY_VAR, OPTION_ENTER_FADE_MS, OPTION_ENTER_RISE_MS, OPTION_ENTER_RISE_PX, OPTION_ENTER_STAGGER_MS, OPTION_IMAGE_WIDTH, type OptionOverride, type OptionOverrides, type OptionsGridLayout, type OptionsGridPlan, PLACEHOLDER_FADE_OUT_MS, PLACEHOLDER_LEAVING_ATTR, PLACEHOLDER_SWAP_GAP_MS, PLACEHOLDER_TYPE_MS, PLACEHOLDER_WORD_PAUSE_MS, PRODUCT_IMAGE_WIDTH, PRODUCT_PATH_PREFIX, PRODUCT_ROW_PX_PER_LINE, type Product, type ProductImageFallback, type ProductRowMetrics, type ProductRowWheel, type ProductsConfig, type ProductsLayout, RANGE_SEPARATOR, type RecentlySuggested, type RenderMode, SCHEMA_VERSION, SCROLL_ARROW_ATTR, SCROLL_ARROW_BOTTOM_VAR, SCROLL_ARROW_CLASS, SCROLL_ARROW_FADE_MS, SCROLL_ARROW_LABEL, SCROLL_ARROW_SCROLL_IDLE_MS, SCROLL_ARROW_VISIBLE_ATTR, SKIPPED_PARAM_TEXT, type ScrollArrowArgs, type ScrollArrowController, type Segment, type SkippedParamState, type Store, type SubmitResultExtras, type Suggestion, type SuggestionOption, type SuggestionType, type TaskKind, type UIStrings, VIEWPORT_FIT_ATTR, VIEWPORT_FIT_HEIGHT_VAR, type ViewportFitArgs, type ViewportFitController, WEEKDAY_LABELS, addMonths, attachProductRowWheel, attachScrollArrow, attachViewportFit, buildAttributionUrl, buildDateOptions, buildQuery, buildSubmitResult, cellDay, cellIso, chipIdFromTap, computeOptionsGridLayout, containScroll, createStore, cursorIsAtEnd, dateCellMarks, dateSelectionFor, extractPlainText, formatAbsoluteDate, formatDate, formatDateRange, formatOptionCount, getCursorOffset, getFooterHint, identifiedParamLabel, isCalendarFormat, isOptionsGridMobileViewport, isoDate, keepCaretOnChip, measureOptionsGrid, monthLabel, needsOptionsGridMeasurement, optionCountLabel, optionEnterDelayMs, optionHasImage, optionImageSources, optionImageSrc, optionLabel, optionsEntranceDurationMs, optionsGridTemplateColumns, parseDate, parseLooseDate, parseLooseDateRange, plainTextLength, planOptionsGrid, previousGraphemeBoundary, productFromMatchedItem, productImageSources, productImageSrc, productInitial, productRowWheelTarget, productsFromCustomFields, renderEditableContent, resolveFormatType, resolveIdentifiedDate, sameOptionRows, sanitizeOptionIconSvg, scrollCaretIntoView, selectedIsoFromText, selectedRangeFor, setCursorOffset, shopifyImageSrc, toWireIdentifiedParams, uiStringsFor, visibleDateRange, withSkippedParams };
|