fontdue-js 3.6.0 → 3.7.0

package/dist/components/TypeTester/useTypeTesterStyler.js

@@ -40,6 +40,7 @@ const useTypeTesterStyler = _ref => {
     fontWeight: fontStyles.fontWeight,
     fontStyle: fontStyles.fontStyle,
     fontVariationSettings,
+    fontFeatureSettings,
     enabled: autofit && (!contentEdited || autofitOnChange),
     padding: sideBuffer
   });

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.js

@@ -79,6 +79,7 @@ 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';
 
@@ -287,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);
@@ -789,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;

package/dist/fontdue.css

@@ -2038,6 +2038,39 @@ input:checked + .checkbox__icon {
   font-size: 20px;
 }
 
+.store-modal__index__load-more {
+  grid-column: 1/-1;
+  padding-bottom: 20px;
+  text-align: center;
+}
+
+.store-modal__index__load-more__button {
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-decoration: inherit;
+  text-align: inherit;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  margin: 0;
+  appearance: none;
+  text-transform: inherit;
+}
+.store-modal__index__load-more__button:active, .store-modal__index__load-more__button:focus {
+  outline: none;
+}
+.store-modal__index__load-more__button:not(:disabled) {
+  cursor: pointer;
+}
+.store-modal__index__load-more__button {
+  color: var(--secondary_text_color);
+  text-decoration: underline;
+}
+.store-modal__index__load-more__button:disabled {
+  text-decoration: none;
+}
+
 .store-modal__page__body:has(> .store-modal__index-item__button) {
   display: grid;
   grid-template-columns: auto 1fr auto;

package/dist/hooks/useAutofit.d.ts

@@ -8,6 +8,7 @@ export interface UseAutofitProps {
     fontWeight?: React.CSSProperties['fontWeight'];
     fontStyle?: string;
     fontVariationSettings?: string;
+    fontFeatureSettings?: string;
     enabled?: boolean;
     padding?: number;
 }
@@ -16,5 +17,5 @@ export interface UseAutofitResult {
     fontSize: number;
     ready: boolean;
 }
-declare const useAutofit: ({ text, fontFamily, fontSize: externalFontSize, min, max, letterSpacing, fontWeight, fontStyle, fontVariationSettings, enabled, padding, }: UseAutofitProps) => UseAutofitResult;
+declare const useAutofit: ({ text, fontFamily, fontSize: externalFontSize, min, max, letterSpacing, fontWeight, fontStyle, fontVariationSettings, fontFeatureSettings, enabled, padding, }: UseAutofitProps) => UseAutofitResult;
 export default useAutofit;

package/dist/hooks/useAutofit.js

@@ -9,7 +9,8 @@ function getCanvasContext() {
   return sharedCanvas.getContext('2d');
 }
 
-// DOM measurement (fallback for variable fonts)
+// DOM measurement (fallback for variable fonts and OpenType features, which
+// canvas can't express: `ctx.font` takes neither variation nor feature settings)
 let measureEl = null;
 function getMeasureElement() {
   if (!measureEl) {
@@ -31,7 +32,7 @@ function measureWithCanvas(text, fontFamily, fontWeight, fontStyleValue, letterS
   ctx.letterSpacing = '0px';
   return width;
 }
-function measureWithDOM(text, fontFamily, fontWeight, fontStyleValue, letterSpacing, fontVariationSettings) {
+function measureWithDOM(text, fontFamily, fontWeight, fontStyleValue, letterSpacing, fontVariationSettings, fontFeatureSettings) {
   const el = getMeasureElement();
   el.style.fontFamily = fontFamily;
   el.style.fontWeight = `${fontWeight}`;
@@ -39,6 +40,7 @@ function measureWithDOM(text, fontFamily, fontWeight, fontStyleValue, letterSpac
   el.style.fontSize = `${REF_SIZE}px`;
   el.style.letterSpacing = `${letterSpacing}em`;
   el.style.fontVariationSettings = fontVariationSettings;
+  el.style.fontFeatureSettings = fontFeatureSettings;
   el.textContent = text;
   return el.getBoundingClientRect().width;
 }
@@ -53,6 +55,7 @@ const useAutofit = _ref => {
     fontWeight = 400,
     fontStyle = 'normal',
     fontVariationSettings,
+    fontFeatureSettings,
     enabled = true,
     padding = 0
   } = _ref;
@@ -83,7 +86,10 @@ const useAutofit = _ref => {
     // Split by newlines and measure the widest line, since the rendered
     // text preserves line breaks (Draft.js uses white-space: pre-wrap).
     const lines = text.split('\n');
-    const measure = fontVariationSettings ? line => measureWithDOM(line, fontFamily, fontWeight, fontStyle, letterSpacing, fontVariationSettings) : line => measureWithCanvas(line, fontFamily, fontWeight, fontStyle, letterSpacing);
+    // Enabled features can change glyph widths (stylistic sets, small caps,
+    // ligatures), so the text has to be measured with them applied. The
+    // measure element is shared, so both settings are written on every call.
+    const measure = fontVariationSettings || fontFeatureSettings ? line => measureWithDOM(line, fontFamily, fontWeight, fontStyle, letterSpacing, fontVariationSettings || 'normal', fontFeatureSettings || 'normal') : line => measureWithCanvas(line, fontFamily, fontWeight, fontStyle, letterSpacing);
     const refWidth = Math.max(...lines.map(measure));
     if (refWidth <= 0) return;
 
@@ -92,7 +98,7 @@ const useAutofit = _ref => {
     const newSize = Math.min(Math.max(min, Math.floor(availableWidth / (refWidth / REF_SIZE))), max);
     setFontSize(newSize);
     if (!measured) setMeasured(true);
-  }, [text, fontFamily, fontWeight, fontStyle, fontVariationSettings, letterSpacing, containerWidth, enabled, min, max, padding, fontVersion]);
+  }, [text, fontFamily, fontWeight, fontStyle, fontVariationSettings, fontFeatureSettings, letterSpacing, containerWidth, enabled, min, max, padding, fontVersion]);
   if (!enabled) return {
     ref,
     fontSize: externalFontSize,

package/dist/reducer.d.ts

@@ -1,10 +1,10 @@
-import { CollectionStyleSkusMap } from './components/Root/productState.js';
+import { SkuStyleIds } from './components/Root/productState.js';
 import { Reducer } from 'redux';
 import { productState_Query$data } from './__generated__/productState_Query.graphql.js';
 import type { RouteConfig } from './components/StoreModal/routes.js';
-import { collectionSkuIdsDifferences, isSelected } from './utils.js';
+import { isSelected } from './selection.js';
 import { Config } from './components/ConfigContext.js';
-export { collectionSkuIdsDifferences, isSelected };
+export { isSelected };
 interface LicenseOptionSpec {
     licenseId: string;
     licenseOptions: {
@@ -22,8 +22,9 @@ export interface FontdueState {
     selectedSkuIds: {
         [skuId: string]: boolean;
     };
+    requestedSkuIds: string[];
     licenseOptions: LicenseOptionSpec[];
-    collectionStyleSkus: CollectionStyleSkusMap;
+    skuStyleIds: SkuStyleIds;
     collectionSkus: {
         [collectionSkuId: string]: string | null;
     };
@@ -94,7 +95,6 @@ export type FontdueAction = {
     type: 'UPDATE_LICENSEE_IS_BILLING_IDENTITY';
     value: boolean;
 };
-export declare const collectionSkuIdWithDiscount: (state: FontdueState, skuId: string) => [string, number] | [null, null];
 declare const reducer: Reducer<FontdueState, FontdueAction>;
 export declare function createDefaultStore(config: Config | undefined): import("redux").Store<FontdueState, FontdueAction, unknown>;
 export default reducer;

package/dist/reducer.js

@@ -1,9 +1,9 @@
 import { populateProductStateReducer } from './components/Root/productState.js';
 import { createStore } from 'redux';
 import { shallowEqual } from 'react-redux';
-import { collectionSkuIdsDifferences, collTransitivelyContainsSkuId, isSelected } from './utils.js';
+import { isSelected, repriceSelection, selectSku } from './selection.js';
 import { makeConfig } from './components/ConfigContext.js';
-export { collectionSkuIdsDifferences, isSelected };
+export { isSelected };
 const unselectLicense = (state, action) => {
   if (!(action.type === 'PRECART_UNSELECT_LICENSE' || action.type === 'PRECART_TOGGLE_LICENSE')) return state;
   return {
@@ -61,96 +61,17 @@ const selectLicenseOption = (state, action) => {
     })
   };
 };
-export const collectionSkuIdWithDiscount = (state, skuId) => {
-  const differences = collectionSkuIdsDifferences(state, skuId);
-  const collectionId = Object.keys(differences).filter(collSkuId => differences[collSkuId] <= state.skuPrices[skuId]).reduce((smallest, key) => {
-    if (!smallest || differences[key] < differences[smallest]) return key;
-    if (differences[key] === differences[smallest]) {
-      // When differences are equal, prefer a collection that is not the
-      // SKU being selected — this ensures collection bundles are preferred
-      // over selecting the family itself at the same price
-      if (smallest === skuId && key !== skuId) return key;
-      // Among non-self candidates, prefer the one covering more unique
-      // font styles — this ensures the most comprehensive collection wins
-      if (smallest !== skuId && key !== skuId) {
-        var _state$collectionStyl, _state$collectionStyl2;
-        const smallestStyles = new Set((_state$collectionStyl = state.collectionStyleSkus[smallest]) === null || _state$collectionStyl === void 0 ? void 0 : _state$collectionStyl.fontStyleSkuIds).size;
-        const keyStyles = new Set((_state$collectionStyl2 = state.collectionStyleSkus[key]) === null || _state$collectionStyl2 === void 0 ? void 0 : _state$collectionStyl2.fontStyleSkuIds).size;
-        if (keyStyles > smallestStyles) return key;
-      }
-    }
-    return smallest;
-  }, null);
-  if (collectionId) return [collectionId, differences[collectionId]];
-  return [null, null];
-};
-const selectedCollectionSkuIdContainingSkuId = (state, skuId) => Object.keys(state.selectedSkuIds).filter(id => state.selectedSkuIds[id] === true).find(selectedSkuId => collTransitivelyContainsSkuId(state.collectionStyleSkus, selectedSkuId, skuId));
-const setKeysFalse = (acc, key) => {
-  acc[key] = false;
-  return acc;
-};
-const unselectedMembersSkuIds = (state, action) => {
-  if (action.type !== 'SELECT_SKU_ID') throw new Error('Wrong action ${action.type}');
-  const {
-    skuId,
-    selected
-  } = action;
-  if (!selected) return {}; // only do this in case we are selecting something
-
-  // Recursively collect all descendant SKU IDs so that transitive
-  // selections (e.g., collection bundle → family → bundle) are all
-  // marked as false
-  const result = {};
-  const collectMembers = collSkuId => {
-    const members = state.collectionStyleSkus[collSkuId];
-    if (!members) return;
-    for (const id of members.fontStyleSkuIds) {
-      result[id] = false;
-    }
-    for (const id of members.childrenSkuIds) {
-      result[id] = false;
-      collectMembers(id);
-    }
-  };
-  collectMembers(skuId);
-  return result;
-};
 const selectSkuId = (state, action) => {
   if (action.type !== 'SELECT_SKU_ID') return state;
-  const {
-    skuId,
-    selected
-  } = action;
-  let actualSkuId = skuId;
-  if (selected) {
-    // check if selecting any collections instead of this sku
-    // would reduce the selection price
-    const [collectionSkuId, _amount] = collectionSkuIdWithDiscount(state, skuId);
-    actualSkuId = collectionSkuId || actualSkuId;
-  } else if (state.selectedSkuIds[skuId] === false) {
-    // we're clicking "deselect" on an item that's not actually selected,
-    // it's a member of a collection which is selected. in this case
-    // we'll find the collection and deselect that collection instead
-    const parentId = selectedCollectionSkuIdContainingSkuId(state, skuId);
-    if (parentId) actualSkuId = parentId;
-  }
   return {
-    ...state,
-    precartOpen: true,
-    selectedSkuIds: {
-      ...state.selectedSkuIds,
-      [actualSkuId]: selected,
-      ...unselectedMembersSkuIds(state, {
-        ...action,
-        skuId: actualSkuId,
-        selected
-      })
-    }
+    ...selectSku(state, action.skuId, action.selected),
+    precartOpen: true
   };
 };
 const unselectSkus = state => ({
   ...state,
-  selectedSkuIds: {}
+  selectedSkuIds: {},
+  requestedSkuIds: []
 });
 const storeModalNavigate = (state, action) => {
   if (action.type !== 'STORE_MODAL_NAVIGATE') return state;
@@ -197,7 +118,7 @@ const reducer = (state, action) => {
   if (!state) throw 'Reducer called without state';
   switch (action.type) {
     case 'POPULATE_PRODUCT_STATE':
-      return populateProductStateReducer(state, action);
+      return repriceSelection(populateProductStateReducer(state, action));
     case 'PRECART_TOGGLE_LICENSE':
       return toggleLicense(state, action);
     case 'PRECART_UNSELECT_LICENSE':
@@ -260,10 +181,11 @@ export function createDefaultStore(config) {
   return createStore(reducer, {
     selectedSkuIds: {},
     // { [skuId]: Boolean }
+    requestedSkuIds: [],
     licenseOptions: [],
     cartOpen: false,
     precartOpen: false,
-    collectionStyleSkus: {},
+    skuStyleIds: {},
     skuPrices: {},
     collectionSkus: {},
     fetchedCollectionIds: [],

package/dist/selection.d.ts

@@ -0,0 +1,40 @@
+import type { FontdueState } from './reducer.js';
+type Catalog = Pick<FontdueState, 'skuStyleIds' | 'skuPrices'>;
+/**
+ * The cheapest set of SKUs in which each of `picks` sits inside one SKU
+ * granting all of its styles, sorted. Picks whose styles or price aren't known
+ * are left out.
+ *
+ * @example
+ *   cheapestSkuIds(['sku:bold', 'sku:regular', 'sku:light'], catalog)
+ *   // => ['sku:light+regular+bold'] rather than a pair plus a single
+ */
+export declare const cheapestSkuIds: (picks: readonly string[], catalog: Catalog) => string[];
+/**
+ * Re-derives `selectedSkuIds` from the picks. A pick whose styles or price
+ * aren't known yet – selected from the host page before its product data
+ * arrived – is bought as it is until they are.
+ */
+export declare const repriceSelection: (state: FontdueState) => FontdueState;
+/**
+ * Adds a pick, or takes out every pick sharing a style with the clicked SKU.
+ *
+ * If what's left is still cheapest bought with a SKU granting the clicked one's
+ * styles anyway – it's part of a bundle that costs no more without it – the
+ * click would change nothing, so the picks inside the selected SKUs granting
+ * them go too, as deselecting a member of a selected bundle always has.
+ */
+export declare const selectSku: (state: FontdueState, skuId: string, selected: boolean) => FontdueState;
+/**
+ * Whether a SKU – or a style with no SKU of its own – is in the selection:
+ * selected itself, or every style it grants is granted by what is selected.
+ */
+export declare const isSelected: (skuIdOrStyleId: string | null) => (state: FontdueState) => boolean;
+/**
+ * What picking a SKU would add to the selection's price: the cheapest
+ * combination with it, less the current one. Never more than the SKU's own
+ * price, and less when it completes a cheaper bundle – the Store Modal's
+ * “+$X”. Null when the SKU's styles or price aren't known.
+ */
+export declare const additionalCost: (state: FontdueState, skuId: string) => number | null;
+export {};