fontdue-js 3.5.1 → 3.7.0

package/dist/components/TypeTester/TypeTesterStandalone.d.ts

@@ -3,6 +3,7 @@ import { Alignment, Direction, FeaturesProp } from './types.js';
 import { SerializablePreloadedQuery, type LoadQueryOptions } from '../../relay/loadSerializableQuery.js';
 import { TypeTesterStandaloneQuery } from '../../__generated__/TypeTesterStandaloneQuery.graphql.js';
 import { Config } from '../ConfigContext.js';
+import type { TruncateOption } from './truncate.js';
 interface TypeTesterStandaloneComponent_props {
     lineHeight?: number | null;
     letterSpacing?: number | null;
@@ -22,6 +23,7 @@ interface TypeTesterStandaloneComponent_props {
     direction?: Direction;
     alignment?: Alignment;
     autofit?: boolean;
+    truncate?: TruncateOption;
     onFocus?: () => void;
     onBlur?: () => void;
 }

package/dist/components/TypeTester/TypeTesterStandalone.js

@@ -30,6 +30,7 @@ function TypeTesterStandaloneComponent(_ref) {
     alignment,
     fontSize,
     autofit,
+    truncate,
     onFocus,
     onBlur,
     data
@@ -95,6 +96,7 @@ function TypeTesterStandaloneComponent(_ref) {
     features: normalizeFeaturesProp(features),
     productId: ((_data$viewer2 = data.viewer) === null || _data$viewer2 === void 0 ? void 0 : (_data$viewer2$fontSty = _data$viewer2.fontStyle) === null || _data$viewer2$fontSty === void 0 ? void 0 : (_data$viewer2$fontSty2 = _data$viewer2$fontSty.family) === null || _data$viewer2$fontSty2 === void 0 ? void 0 : (_data$viewer2$fontSty3 = _data$viewer2$fontSty2.parent) === null || _data$viewer2$fontSty3 === void 0 ? void 0 : _data$viewer2$fontSty3.id) ?? ((_data$viewer3 = data.viewer) === null || _data$viewer3 === void 0 ? void 0 : (_data$viewer3$fontSty = _data$viewer3.fontStyle) === null || _data$viewer3$fontSty === void 0 ? void 0 : (_data$viewer3$fontSty2 = _data$viewer3$fontSty.family) === null || _data$viewer3$fontSty2 === void 0 ? void 0 : _data$viewer3$fontSty2.id),
     groupEdit: false,
+    truncate: truncate,
     onFocus: onFocus,
     onBlur: onBlur
   }));

package/dist/components/TypeTester/TypeTesterStandaloneElement.d.ts

@@ -13,6 +13,7 @@ interface TypeTesterElement_props {
     direction?: string;
     alignment?: string;
     autofit?: string;
+    truncate?: string;
 }
 export declare const TypeTesterStandaloneElement: React.FC<TypeTesterElement_props>;
 export default TypeTesterStandaloneElement;

package/dist/components/TypeTester/TypeTesterStandaloneElement.js

@@ -2,6 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React from 'react';
 import TypeTesterStandalone from './TypeTesterStandalone.js';
 import { parseVariableSettings } from './parseVariableSettings.js';
+import { parseTruncateAttribute } from './truncate.js';
 const isAlignment = str => {
   return str === 'left' || str === 'center' || str === 'right';
 };
@@ -26,6 +27,7 @@ export const TypeTesterStandaloneElement = _ref => {
     alignment,
     direction,
     autofit,
+    truncate,
     ...rest
   } = _ref;
   return /*#__PURE__*/React.createElement(TypeTesterStandalone, _extends({
@@ -41,7 +43,8 @@ export const TypeTesterStandaloneElement = _ref => {
     })) : undefined,
     alignment: isAlignment(alignment) ? alignment : undefined,
     direction: isDirection(direction) ? direction : undefined,
-    variableSettings: parseVariableSettings(variableSettings)
+    variableSettings: parseVariableSettings(variableSettings),
+    truncate: parseTruncateAttribute(truncate, 'fontdue-type-tester')
   }, rest));
 };
 export default TypeTesterStandaloneElement;

package/dist/components/TypeTester/TypeTesterVariableAxes.js

@@ -35,15 +35,7 @@ const TypeTesterVariableAxes = _ref => {
   }, [requestedAxesKey, availableAxesKey]);
   if (!variableSettings) return null;
   if (!axes) return null;
-  const handleChange = (axis, value) => {
-    setVariableSettings({
-      ...variableSettings,
-      [axis]: value
-    });
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "type-tester__variable-axes"
-  }, axes.filter(showAxis => showAxis in variableSettings) // only show the slider if the value is set
+  const visibleAxes = axes.filter(showAxis => showAxis in variableSettings) // only show the slider if the value is set
   .map(showAxis => {
     var _fontStyle$variableAx;
     return (_fontStyle$variableAx = fontStyle.variableAxes) === null || _fontStyle$variableAx === void 0 ? void 0 : _fontStyle$variableAx.find(_ref2 => {
@@ -52,7 +44,21 @@ const TypeTesterVariableAxes = _ref => {
       } = _ref2;
       return axis === showAxis;
     });
-  }).filter(notEmpty).map(_ref3 => {
+  }).filter(notEmpty);
+
+  // Nothing to show (static style, or every requested axis is missing): render
+  // no container at all, so its margin/padding/border in the toolbar, features
+  // panel and dropdown placements never leave an empty gap behind.
+  if (visibleAxes.length === 0) return null;
+  const handleChange = (axis, value) => {
+    setVariableSettings({
+      ...variableSettings,
+      [axis]: value
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "type-tester__variable-axes"
+  }, visibleAxes.map(_ref3 => {
     let {
       axis,
       name,

package/dist/components/TypeTester/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TypeTester_fontStyle$key } from '../../__generated__/TypeTester_fontStyle.graphql.js';
 import { Alignment, TypeTesterAxesPosition } from './types.js';
+import type { TruncateOption } from './truncate.js';
 export interface TypeTesterConfig {
     min?: number;
     max?: number;
@@ -15,7 +16,7 @@ export interface TypeTesterConfig {
     toolsPosition?: 'inline' | 'floating';
     selectButtonStyle?: 'inline' | 'outlined';
     selectButtonLabel?: string;
-    truncate?: boolean | number;
+    truncate?: TruncateOption;
     bulletStyle?: 'square' | 'round';
     priceText?: boolean;
     autofitOnChange?: boolean;
@@ -61,6 +62,7 @@ export interface TypeTesterBaseProps {
     features?: ReadonlyArray<string> | null;
     axes?: ReadonlyArray<string> | null;
     groupEdit?: boolean;
+    truncate?: TruncateOption;
     onFocus?: () => void;
     onBlur?: () => void;
 }

package/dist/components/TypeTester/index.js

@@ -26,6 +26,7 @@ const TypeTester = _ref => {
     features,
     axes,
     groupEdit,
+    truncate,
     onStyleSelect,
     isLoading
   } = _ref;
@@ -150,7 +151,7 @@ const TypeTester = _ref => {
         ref: contentRef,
         fontStyles: style,
         verticalMetrics: verticalMetrics,
-        truncate: config.truncate,
+        truncate: truncate ?? config.truncate,
         direction: props.direction,
         min: config.size.min,
         max: config.size.max,

package/dist/components/TypeTester/truncate.d.ts

@@ -0,0 +1,12 @@
+export interface TruncateConfig {
+    lines?: number;
+    expandOnFocus?: boolean;
+}
+export type TruncateOption = boolean | number | TruncateConfig;
+export interface ResolvedTruncate {
+    lines: number;
+    expandOnFocus: boolean;
+}
+export declare const normalizeTruncate: (value?: TruncateOption) => ResolvedTruncate;
+export declare const shouldTruncate: ({ lines, expandOnFocus }: ResolvedTruncate, focused: boolean) => boolean;
+export declare const parseTruncateAttribute: (input: string | undefined, elementName: string) => TruncateOption | undefined;

package/dist/components/TypeTester/truncate.js

@@ -0,0 +1,95 @@
+// Shape and normalization for the type tester's `truncate` option, shared by
+// the styler and by the custom element attribute parsers.
+
+const toLines = value => Number.isFinite(value) ? Math.max(0, Math.floor(value)) : 0;
+export const normalizeTruncate = value => {
+  if (value === true) return {
+    lines: 1,
+    expandOnFocus: true
+  };
+  if (typeof value === 'number') return {
+    lines: toLines(value),
+    expandOnFocus: false
+  };
+  if (value && typeof value === 'object') return {
+    lines: value.lines === undefined ? 0 : toLines(value.lines),
+    expandOnFocus: value.expandOnFocus ?? false
+  };
+  return {
+    lines: 0,
+    expandOnFocus: false
+  };
+};
+
+// Whether the cap applies right now. Split out from the styler so the one
+// behaviour FD-191 changes is unit-testable without a DOM.
+export const shouldTruncate = (_ref, focused) => {
+  let {
+    lines,
+    expandOnFocus
+  } = _ref;
+  return lines > 0 && !(focused && expandOnFocus);
+};
+
+// A line count, or `true`/`false`.
+const parseLineCount = token => {
+  if (token === 'true') return 1;
+  if (token === 'false') return 0;
+  const lines = Number(token);
+  if (token !== '' && Number.isInteger(lines) && lines >= 0) return lines;
+  return undefined;
+};
+
+// The optional second word: what kind of cap this is. Adjectives rather than
+// imperatives, both because every other enumerated value in the config is one
+// (`inline`/`floating`, `square`/`round`, `panel`/`dropdown`) and because they
+// describe the cap accurately — nothing expands until a visitor clicks, so the
+// cap is expandable, not expanding.
+//
+// Written out rather than looked up in an object so that `constructor` and
+// friends are words like any other instead of inherited Object members.
+const parseFocusWord = token => {
+  if (token === 'expandable') return true;
+  if (token === 'fixed') return false;
+  return undefined;
+};
+
+// `truncate="15"` caps at 15 lines, `truncate="true"` is the legacy one-line
+// preview, and `truncate="false"` or `truncate="0"` turns it off for this
+// tester.
+//
+// A second word says what kind of cap it is, which is the half of the object
+// form (`expandOnFocus`) an attribute otherwise cannot carry:
+// `truncate="15 expandable"` caps at 15 lines and still opens to the full
+// paragraph when clicked, and `truncate="15 fixed"` spells out the default.
+// Without it the scalar forms are untouched, so `truncate="true"` is still the
+// boolean shorthand and `truncate="15"` still holds through focus.
+//
+// An absent attribute returns undefined so the tester inherits the site
+// config. Anything else, including a valueless `truncate`, an unknown second
+// word or a third one, warns and inherits: following parseVariableSettings, a
+// typo must not silently read as "off". The warning lists the accepted forms,
+// because the failure that grammar shipped in 3.4.1 was silent — a rejected
+// value simply did nothing, with nothing in the markup explaining why.
+export const parseTruncateAttribute = (input, elementName) => {
+  if (input === undefined) return undefined;
+  const [countToken = '', focusToken, ...rest] = input.trim().split(/\s+/);
+  const lines = parseLineCount(countToken);
+  const expandOnFocus = focusToken === undefined ? undefined : parseFocusWord(focusToken);
+  if (lines === undefined || rest.length > 0 || focusToken !== undefined && expandOnFocus === undefined) {
+    console.warn(`${elementName} failed to parse truncate value: "${input}", ignoring. ` + 'Expected a line count, "true", or "false", optionally followed by ' + '"expandable" or "fixed" — e.g. "15", "true", "15 expandable".');
+    return undefined;
+  }
+
+  // No second word: return the scalar the caller wrote, so the existing forms
+  // keep their exact shape rather than becoming objects that normalize the same.
+  if (expandOnFocus === undefined) {
+    if (countToken === 'true') return true;
+    if (countToken === 'false') return false;
+    return lines;
+  }
+  return {
+    lines,
+    expandOnFocus
+  };
+};

package/dist/components/TypeTester/useTypeTesterStyler.d.ts

@@ -2,6 +2,7 @@ import { EditorState } from 'draft-js';
 import { Alignment } from './types.js';
 import { VariableSettings } from '../../utils.js';
 import { VerticalMetrics } from '../useFontStyle.js';
+import { TruncateOption } from './truncate.js';
 export type ColumnsConfig = false | {
     count: 'auto' | number;
     width: string;
@@ -20,7 +21,7 @@ export interface UseTypeTesterStylerProps {
     letterSpacing: number;
     features: string[];
     focused: boolean;
-    truncate: boolean | number;
+    truncate: TruncateOption;
     fontStyles: React.CSSProperties;
     verticalMetrics?: VerticalMetrics | null;
     content: EditorState;
@@ -32,5 +33,6 @@ export interface UseTypeTesterStylerProps {
 declare const useTypeTesterStyler: ({ size, autofit, autofitOnChange, features, setSize, min, max, truncate, focused, lineHeight, letterSpacing, fontStyles, verticalMetrics, content, contentEdited, alignment, variableSettings, columns, }: UseTypeTesterStylerProps) => {
     ref: import("react").RefObject<HTMLDivElement | null>;
     style: import("react").CSSProperties;
+    truncated: boolean;
 };
 export default useTypeTesterStyler;

package/dist/components/TypeTester/useTypeTesterStyler.js

@@ -1,6 +1,7 @@
 import "../../global-shim.js";
 import { useLayoutEffect } from 'react';
 import useAutofit from '../../hooks/useAutofit.js';
+import { normalizeTruncate, shouldTruncate as resolveShouldTruncate } from './truncate.js';
 const useTypeTesterStyler = _ref => {
   let {
     size,
@@ -39,6 +40,7 @@ const useTypeTesterStyler = _ref => {
     fontWeight: fontStyles.fontWeight,
     fontStyle: fontStyles.fontStyle,
     fontVariationSettings,
+    fontFeatureSettings,
     enabled: autofit && (!contentEdited || autofitOnChange),
     padding: sideBuffer
   });
@@ -53,11 +55,21 @@ const useTypeTesterStyler = _ref => {
     }
   }, [autofitSize]);
 
-  // `truncate` is `true` (1 line), a positive number (that many lines), or
-  // falsy (off). Editing always shows the full paragraph, so only truncate
-  // when the tester is not focused.
-  const truncateLines = truncate === true ? 1 : typeof truncate === 'number' ? Math.max(0, Math.floor(truncate)) : 0;
-  const shouldTruncate = truncateLines > 0 && !focused;
+  // `truncate` is `true` (the original one-line preview), a line count, an
+  // explicit `{ lines, expandOnFocus }`, or falsy (off). `expandOnFocus`
+  // decides whether clicking in lifts the cap: true for the one-line preview,
+  // which exists to bloom open, and false for a line count, where the
+  // paragraph has to stay N lines while it is edited (FD-191). For a line
+  // count nothing below depends on `focused` any more, so focusing a truncated
+  // tester is a zero-reflow event.
+  const {
+    lines: truncateLines,
+    expandOnFocus
+  } = normalizeTruncate(truncate);
+  const shouldTruncate = resolveShouldTruncate({
+    lines: truncateLines,
+    expandOnFocus
+  }, focused);
 
   // How far a line's ink spills past its line-box, top and bottom, as a fraction
   // of the font-size (em). `fontLoader` feeds these exact metrics into the
@@ -131,7 +143,23 @@ const useTypeTesterStyler = _ref => {
       paddingRight: sideBearing,
       marginTop: `${-lineOverflowEm}em`,
       marginBottom: `${-lineOverflowEm}em`,
-      overflow: 'hidden',
+      // `clip`, not `hidden`, once the cap outlives focus. A hidden box is
+      // still a scroll container, so the browser scrolls it to chase a
+      // caret past line N, and the offset is unrecoverable because there is
+      // no scrollbar and wheel events are ignored (measured: WebKit slides
+      // a whole column away on the first keystroke past the cap, and it
+      // survives blur). A clipped box is not a scroll container at all, so
+      // the visible lines can never slide.
+      //
+      // `expandOnFocus` stays on `hidden`, because there the cap is lifted
+      // before a caret can enter the box. That distinction is load-bearing:
+      // an unsupported CSSOM value is a no-op that leaves the previous
+      // inline value in place, so on an engine without `clip` a branch that
+      // toggles on focus would keep the `overflow: visible` written by the
+      // untruncated branch below and stop clipping for good. The branch
+      // that uses `clip` never toggles, so on those engines it falls
+      // through to the `[data-truncated]` rule in _type-tester.scss.
+      overflow: expandOnFocus ? 'hidden' : 'clip',
       // Fill each column to its full N lines before spilling to the next, and
       // allow a final column with a single line — otherwise the default
       // `widows: 2` / `column-fill: balance` rebalance a 4-line paragraph into
@@ -156,7 +184,8 @@ const useTypeTesterStyler = _ref => {
   };
   return {
     ref,
-    style
+    style,
+    truncated: shouldTruncate
   };
 };
 export default useTypeTesterStyler;

package/dist/components/TypeTesters/TypeTestersElement.d.ts

@@ -7,6 +7,7 @@ interface TypeTestersElementProps {
     features?: string;
     tags?: string;
     excludeTags?: string;
+    truncate?: string;
 }
-declare function TypeTestersElement({ autofit, tags, excludeTags, defaultMode, features, ...rest }: TypeTestersElementProps): React.JSX.Element;
+declare function TypeTestersElement({ autofit, tags, excludeTags, defaultMode, features, truncate, ...rest }: TypeTestersElementProps): React.JSX.Element;
 export default TypeTestersElement;

package/dist/components/TypeTesters/TypeTestersElement.js

@@ -1,6 +1,7 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
 import TypeTesters from './index.js';
+import { parseTruncateAttribute } from '../TypeTester/truncate.js';
 const getDefaultMode = (stringValue, autofit) => {
   if (autofit) return 'local';
   if (stringValue === 'group') return 'group';
@@ -13,6 +14,7 @@ function TypeTestersElement(_ref) {
     excludeTags,
     defaultMode,
     features,
+    truncate,
     ...rest
   } = _ref;
   return /*#__PURE__*/React.createElement(TypeTesters, _extends({
@@ -20,7 +22,8 @@ function TypeTestersElement(_ref) {
     excludeTags: excludeTags === null || excludeTags === void 0 ? void 0 : excludeTags.split(','),
     autofit: autofit ? autofit === 'true' : undefined,
     defaultMode: getDefaultMode(defaultMode, autofit === 'true'),
-    features: features === null || features === void 0 ? void 0 : features.split(',')
+    features: features === null || features === void 0 ? void 0 : features.split(','),
+    truncate: parseTruncateAttribute(truncate, 'fontdue-type-testers')
   }, rest));
 }
 export default TypeTestersElement;

package/dist/components/TypeTesters/index.d.ts

@@ -4,11 +4,13 @@ import { TypeTestersSlugQuery } from '../../__generated__/TypeTestersSlugQuery.g
 import { Config } from '../ConfigContext.js';
 import { FeaturesProp } from '../TypeTester/types.js';
 import { SerializablePreloadedQuery, type LoadQueryOptions } from '../../relay/loadSerializableQuery.js';
+import type { TruncateOption } from '../TypeTester/truncate.js';
 export interface TypeTesters_props {
     collectionId?: string;
     collectionSlug?: string;
     defaultMode?: 'group' | 'local';
     autofit?: boolean;
+    truncate?: TruncateOption;
     features?: FeaturesProp;
     tags?: string[] | null;
     excludeTags?: string[] | null;

package/dist/components/elements/StoreModalContainer/StoreModalContainerContext.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 interface StoreModalContainerContextProps {
     scrollToTop?: () => void;
+    scrollContainer?: React.RefObject<HTMLDivElement | null>;
 }
 declare const _default: React.Context<StoreModalContainerContextProps>;
 export default _default;

package/dist/components/elements/StoreModalContainer/index.js

@@ -1,4 +1,4 @@
-import React, { useRef, useCallback } from 'react';
+import React, { useRef, useCallback, useMemo } from 'react';
 import { ArrowLeft, CartNew, X } from '../../Icons/index.js';
 import StoreModalContainerContext from './StoreModalContainerContext.js';
 const StoreModalContainer = _ref => {
@@ -25,10 +25,15 @@ const StoreModalContainer = _ref => {
       left: 0
     });
   }, [container]);
+
+  // Stable, so an effect that depends on the context value (the index's
+  // load-more observer) isn't rebuilt on every render of the modal.
+  const context = useMemo(() => ({
+    scrollToTop: handleScrollToTop,
+    scrollContainer: container
+  }), [handleScrollToTop]);
   return /*#__PURE__*/React.createElement(StoreModalContainerContext.Provider, {
-    value: {
-      scrollToTop: handleScrollToTop
-    }
+    value: context
   }, /*#__PURE__*/React.createElement("div", {
     className: "store-modal__container__overlay",
     "data-route": routeName

package/dist/components/elements/StoreModalIndexLoadMore/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface StoreModalIndexLoadMoreProps {
+    sentinelRef: (node: Element | null) => void;
+    onClick: () => void;
+    loading: boolean;
+}
+declare const StoreModalIndexLoadMore: React.FunctionComponent<StoreModalIndexLoadMoreProps>;
+export default StoreModalIndexLoadMore;

package/dist/components/elements/StoreModalIndexLoadMore/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+// Sits after the last collection while more remain. The button is what a
+// visitor sees while a page is on its way, and the way to go on without
+// scrolling — with a keyboard, or if the observer never fires.
+const StoreModalIndexLoadMore = _ref => {
+  let {
+    sentinelRef,
+    onClick,
+    loading
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "store-modal__index__load-more",
+    ref: sentinelRef
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "store-modal__index__load-more__button",
+    onClick: onClick,
+    disabled: loading
+  }, loading ? 'Loading…' : 'Load more'));
+};
+export default StoreModalIndexLoadMore;

package/dist/components/elements/StoreModalUnifiedCheckout.d.ts

@@ -27,7 +27,7 @@
  *    - The Pay button is always enabled (as long as EULA is checked) even if billing
  *      info isn't fully saved yet
  *    - This is intentional: we need to allow the user to click Pay so we can call
- *      elements.submit(), which triggers Stripe's validation and shows any validation
+ *      validateElements(), which triggers Stripe's validation and shows any validation
  *      errors inline in the Stripe UI elements
  *    - After Stripe validation passes, we check if billing identity is saved
  *    - If not saved, we show an error message above the Pay button asking them to

package/dist/components/elements/StoreModalUnifiedCheckout.js

@@ -32,7 +32,7 @@ import _StoreModalUnifiedCheckout_viewer from "../../__generated__/StoreModalUni
  *    - The Pay button is always enabled (as long as EULA is checked) even if billing
  *      info isn't fully saved yet
  *    - This is intentional: we need to allow the user to click Pay so we can call
- *      elements.submit(), which triggers Stripe's validation and shows any validation
+ *      validateElements(), which triggers Stripe's validation and shows any validation
  *      errors inline in the Stripe UI elements
  *    - After Stripe validation passes, we check if billing identity is saved
  *    - If not saved, we show an error message above the Pay button asking them to
@@ -79,6 +79,8 @@ import { Check, X } from '../Icons/index.js';
 import ConfigContext from '../ConfigContext.js';
 import { Price } from '../Price/index.js';
 import { sendOrderTracking } from '../Cart/orderTracking.js';
+import { trackPaymentInfoEntered } from '../Cart/storefrontEvents.js';
+import { validateAddressElements, validateElements } from '../../stripeElements.js';
 import { useRecaptchaTimeout, isRecaptchaScriptLoaded, RECAPTCHA_UNAVAILABLE_MESSAGE } from '../../hooks/useRecaptchaTimeout.js';
 
 /* const LICENSEE_REQUIRED_FIELDS = ['organization', 'country'] as (keyof Identity)[]; */
@@ -286,6 +288,16 @@ export default function StoreModalUnifiedCheckout(_ref2) {
   useEffect(() => {
     sendOrderTracking(environment);
   }, [environment]);
+
+  // The Payment Element reports every keystroke; the first time the details
+  // are complete is the "Payment Info Entered" moment. The server keeps it to
+  // one per order, so this only saves requests.
+  const paymentInfoTracked = useRef(false);
+  const handlePaymentChange = useCallback(event => {
+    if (!event.complete || paymentInfoTracked.current) return;
+    paymentInfoTracked.current = true;
+    trackPaymentInfoEntered(environment);
+  }, [environment]);
   const [error, setError] = useState(null);
   const [errorsObject, setErrorsObject] = useState(null);
   const [customerErrorsObject, setCustomerErrorsObject] = useState(null);
@@ -559,14 +571,10 @@ export default function StoreModalUnifiedCheckout(_ref2) {
   // Otherwise, only show when user has selected "Your client" option
   const showLicenseeSection = order.customer && (hasCountryMismatch || !(order.licenseeIsBillingIdentity ?? false));
   const handleCheckout = useCallback(async () => {
-    // Validate Stripe elements first
-    if (elements) {
-      const result = await elements.submit();
-      if (result.error) {
-        // Stripe will show validation errors in the UI
-        return;
-      }
-    }
+    // Validate the licensee address first; Stripe shows any errors in the UI.
+    // Not `elements.submit()`: a Stripe Tax order has no PaymentIntent, so
+    // this Elements group has no session and Stripe.js would throw.
+    if (!(await validateAddressElements(elements))) return;
 
     // If licensee section is shown, save licensee data before navigating to checkout
     if (showLicenseeSection) {
@@ -599,14 +607,8 @@ export default function StoreModalUnifiedCheckout(_ref2) {
       return;
     }
 
-    // Validate Stripe elements first
-    if (elements) {
-      const result = await elements.submit();
-      if (result.error) {
-        // Stripe will show validation errors in the UI
-        return;
-      }
-    }
+    // Validate Stripe elements first; Stripe shows any errors in the UI
+    if (!(await validateElements(elements))) return;
 
     // If billing identity is not saved yet, don't proceed with payment
     // The validation above will show errors for incomplete fields
@@ -798,6 +800,7 @@ export default function StoreModalUnifiedCheckout(_ref2) {
   }, /*#__PURE__*/React.createElement(Sentry.ErrorBoundary, {
     fallback: /*#__PURE__*/React.createElement("div", null, "Something went wrong")
   }, /*#__PURE__*/React.createElement(PaymentElement, {
+    onChange: handlePaymentChange,
     options: {
       layout: {
         type: 'tabs',

package/dist/components/useInfiniteScroll.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+interface UseInfiniteScrollOptions {
+    enabled: boolean;
+    onLoadMore: () => void;
+    rootRef?: React.RefObject<Element | null>;
+    rootMargin?: string;
+}
+/**
+ * Calls `onLoadMore` when a sentinel element scrolls into view, for lists that
+ * page as the visitor reaches the end of them.
+ *
+ * Returns a ref callback to put on that sentinel — render it after the last
+ * item, and only while there is more to load:
+ *
+ *     const sentinelRef = useInfiniteScroll({
+ *       enabled: hasNext && !isLoadingNext,
+ *       onLoadMore: () => loadNext(25),
+ *       rootRef: scrollContainer,
+ *     });
+ *
+ *     {hasNext && <div ref={sentinelRef} />}
+ *
+ * The sentinel is tracked as state rather than a ref so that mounting and
+ * unmounting it re-runs the effect; `onLoadMore` is read through a ref, so a
+ * fresh callback on every render doesn't tear the observer down and rebuild it.
+ */
+declare const useInfiniteScroll: ({ enabled, onLoadMore, rootRef, rootMargin, }: UseInfiniteScrollOptions) => ((node: Element | null) => void);
+export default useInfiniteScroll;

package/dist/components/useInfiniteScroll.js

@@ -0,0 +1,50 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+/**
+ * Calls `onLoadMore` when a sentinel element scrolls into view, for lists that
+ * page as the visitor reaches the end of them.
+ *
+ * Returns a ref callback to put on that sentinel — render it after the last
+ * item, and only while there is more to load:
+ *
+ *     const sentinelRef = useInfiniteScroll({
+ *       enabled: hasNext && !isLoadingNext,
+ *       onLoadMore: () => loadNext(25),
+ *       rootRef: scrollContainer,
+ *     });
+ *
+ *     {hasNext && <div ref={sentinelRef} />}
+ *
+ * The sentinel is tracked as state rather than a ref so that mounting and
+ * unmounting it re-runs the effect; `onLoadMore` is read through a ref, so a
+ * fresh callback on every render doesn't tear the observer down and rebuild it.
+ */
+const useInfiniteScroll = _ref => {
+  let {
+    enabled,
+    onLoadMore,
+    rootRef,
+    rootMargin
+  } = _ref;
+  const [sentinel, setSentinel] = useState(null);
+  const savedOnLoadMore = useRef(onLoadMore);
+  savedOnLoadMore.current = onLoadMore;
+  useEffect(() => {
+    if (!sentinel || !enabled) return;
+    // Absent while server-rendering, and in test environments without one.
+    if (typeof IntersectionObserver === 'undefined') return;
+    const observer = new IntersectionObserver(entries => {
+      if (entries.some(entry => entry.isIntersecting)) {
+        savedOnLoadMore.current();
+      }
+    }, {
+      root: (rootRef === null || rootRef === void 0 ? void 0 : rootRef.current) ?? null,
+      rootMargin
+    });
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [sentinel, enabled, rootRef, rootMargin]);
+  return setSentinel;
+};
+export default useInfiniteScroll;