fontdue-js 2.22.0 → 2.22.1

package/dist-cjs/fontLoader.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isFontLoaded = isFontLoaded;
+exports.loadFont = loadFont;
+const cache = new Map();
+const loaded = new Set();
+function isFontLoaded(fontFamily) {
+  return loaded.has(fontFamily);
+}
+async function loadFont(fontFamily, sources, verticalMetrics) {
+  // Return cached promise if loading is in progress or complete
+  const existing = cache.get(fontFamily);
+  if (existing) return existing;
+  const promise = doLoadFont(fontFamily, sources, verticalMetrics);
+  cache.set(fontFamily, promise);
+  promise.catch(() => {
+    cache.delete(fontFamily);
+    loaded.delete(fontFamily);
+  });
+  return promise;
+}
+async function doLoadFont(fontFamily, sources, verticalMetrics) {
+  const validSources = sources.filter(s => s != null && s.url != null);
+  const source = validSources.find(s => s.format === 'woff2') ?? validSources[0];
+  if (!source || !source.url) throw new Error(`No font sources for ${fontFamily}`);
+  const response = await fetch(source.url);
+  if (!response.ok) throw new Error(`Failed to fetch font: ${response.status}`);
+  const buffer = await response.arrayBuffer();
+  const descriptors = {
+    weight: '400',
+    style: 'normal',
+    display: 'block'
+  };
+  if (verticalMetrics && verticalMetrics.unitsPerEm > 0) {
+    const {
+      unitsPerEm,
+      ascender,
+      descender,
+      lineGap
+    } = verticalMetrics;
+    descriptors.ascentOverride = `${ascender / unitsPerEm * 100}%`;
+    descriptors.descentOverride = `${descender / unitsPerEm * -100}%`;
+    if (lineGap != null) {
+      descriptors.lineGapOverride = `${lineGap / unitsPerEm * 100}%`;
+    }
+  }
+  const fontFace = new FontFace(fontFamily, buffer, descriptors);
+  await fontFace.load();
+  document.fonts.add(fontFace);
+  loaded.add(fontFamily);
+  return fontFace;
+}

package/dist-cjs/global-shim.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+// fbjs (transitive via draft-js) references Node's `global` at module init.
+// Browsers don't define `global`, so hydration blows up with a ReferenceError.
+// ESM evaluates imports in source order, so importing this first ensures the
+// alias is in place before fbjs/setImmediate evaluates.
+if (typeof globalThis.global === 'undefined') {
+  globalThis.global = globalThis;
+}

package/dist-cjs/hooks/useAutofit.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _resizeObserver = _interopRequireDefault(require("@react-hook/resize-observer"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const REF_SIZE = 100;
+
+// Canvas measurement (fast path)
+let sharedCanvas = null;
+function getCanvasContext() {
+  if (!sharedCanvas) sharedCanvas = document.createElement('canvas');
+  return sharedCanvas.getContext('2d');
+}
+
+// DOM measurement (fallback for variable fonts)
+let measureEl = null;
+function getMeasureElement() {
+  if (!measureEl) {
+    measureEl = document.createElement('span');
+    measureEl.style.position = 'absolute';
+    measureEl.style.top = '-9999px';
+    measureEl.style.left = '-9999px';
+    measureEl.style.whiteSpace = 'pre';
+    measureEl.style.visibility = 'hidden';
+    document.body.appendChild(measureEl);
+  }
+  return measureEl;
+}
+function measureWithCanvas(text, fontFamily, fontWeight, fontStyleValue, letterSpacing) {
+  const ctx = getCanvasContext();
+  ctx.font = `${fontStyleValue} ${fontWeight} ${REF_SIZE}px ${fontFamily}`;
+  ctx.letterSpacing = `${letterSpacing}em`;
+  const width = ctx.measureText(text).width;
+  ctx.letterSpacing = '0px';
+  return width;
+}
+function measureWithDOM(text, fontFamily, fontWeight, fontStyleValue, letterSpacing, fontVariationSettings) {
+  const el = getMeasureElement();
+  el.style.fontFamily = fontFamily;
+  el.style.fontWeight = `${fontWeight}`;
+  el.style.fontStyle = fontStyleValue;
+  el.style.fontSize = `${REF_SIZE}px`;
+  el.style.letterSpacing = `${letterSpacing}em`;
+  el.style.fontVariationSettings = fontVariationSettings;
+  el.textContent = text;
+  return el.getBoundingClientRect().width;
+}
+const useAutofit = ({
+  text,
+  fontFamily,
+  fontSize: externalFontSize,
+  min = 8,
+  max = 999,
+  letterSpacing = 0,
+  fontWeight = 400,
+  fontStyle = 'normal',
+  fontVariationSettings,
+  enabled = true,
+  padding = 0
+}) => {
+  const ref = (0, _react.useRef)(null);
+  const [fontSize, setFontSize] = (0, _react.useState)(externalFontSize);
+  const [containerWidth, setContainerWidth] = (0, _react.useState)(0);
+  const [fontVersion, setFontVersion] = (0, _react.useState)(0);
+  const [measured, setMeasured] = (0, _react.useState)(false);
+  (0, _resizeObserver.default)(ref, entry => {
+    setContainerWidth(entry.contentRect.width);
+  });
+
+  // Trigger re-measurement when the font becomes available.
+  // If already loaded (e.g. parent waited for font), the promise
+  // resolves as a microtask and the re-measurement is near-instant.
+  (0, _react.useLayoutEffect)(() => {
+    if (!enabled || !fontFamily) return;
+    const fontString = `${fontStyle} ${fontWeight} ${REF_SIZE}px ${fontFamily}`;
+    document.fonts.load(fontString).then(() => {
+      setFontVersion(v => v + 1);
+    });
+  }, [fontFamily, fontWeight, fontStyle, enabled]);
+  (0, _react.useLayoutEffect)(() => {
+    if (!enabled) return;
+    const availableWidth = containerWidth - padding;
+    if (availableWidth <= 0 || !text) return;
+
+    // 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);
+    const refWidth = Math.max(...lines.map(measure));
+    if (refWidth <= 0) return;
+
+    // Text width scales linearly with font size.
+    // Floor to avoid sub-pixel rounding that causes text to wrap.
+    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]);
+  if (!enabled) return {
+    ref,
+    fontSize: externalFontSize,
+    ready: true
+  };
+  return {
+    ref,
+    fontSize,
+    ready: measured
+  };
+};
+var _default = useAutofit;
+exports.default = _default;

package/dist-cjs/hooks/useLicenseAndOrderVariables.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLicenseAndOrderVariables = useLicenseAndOrderVariables;
+var _react = require("react");
+var _reactRedux = require("react-redux");
+function useLicenseAndOrderVariables() {
+  // Select raw data from Redux with shallow equality check
+  const licenseOptions = (0, _reactRedux.useSelector)(state => state.licenseOptions, _reactRedux.shallowEqual);
+
+  // Select order variables from Redux
+  const orderVariableSelections = (0, _reactRedux.useSelector)(state => state.orderVariableSelections, _reactRedux.shallowEqual);
+
+  // Memoize the transformed license options data
+  const licenseOptionsSpecs = (0, _react.useMemo)(() => licenseOptions.length > 0 ? licenseOptions.map(spec => ({
+    licenseId: spec.licenseId,
+    licenseOptionIds: Object.values(spec.licenseOptions).filter(Boolean)
+  })) : [], [licenseOptions]);
+  return {
+    licenseOptionsSpecs,
+    orderVariableSelections
+  };
+}

package/dist-cjs/hooks/useRefetchOnLicenseChanges.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRefetchOnLicenseChanges = useRefetchOnLicenseChanges;
+var _react = require("react");
+var _relayRuntime = require("relay-runtime");
+var _useLicenseAndOrderVariables = require("./useLicenseAndOrderVariables");
+/**
+ * Custom hook to handle refetching data when license options or order variables change.
+ * Uses a two-step process to prevent UI flickering:
+ * 1. Fetches new data into the store
+ * 2. Updates the component with a store-only policy
+ */
+function useRefetchOnLicenseChanges({
+  environment,
+  refetch,
+  query,
+  variables = {}
+}) {
+  const {
+    licenseOptionsSpecs,
+    orderVariableSelections
+  } = (0, _useLicenseAndOrderVariables.useLicenseAndOrderVariables)();
+  (0, _react.useEffect)(() => {
+    let mounted = true;
+
+    // First fetch the data into the store
+    const subscription = (0, _relayRuntime.fetchQuery)(environment, query, {
+      ...variables,
+      licenseOptions: licenseOptionsSpecs,
+      orderVariables: orderVariableSelections
+    }).subscribe({
+      complete: () => {
+        // Only update if component is still mounted
+        if (mounted) {
+          // Then update from store only to prevent flickering
+          refetch({
+            ...variables,
+            licenseOptions: licenseOptionsSpecs,
+            orderVariables: orderVariableSelections
+          }, {
+            fetchPolicy: 'store-only'
+          });
+        }
+      },
+      error: error => {
+        if (mounted) {
+          console.error('Failed to refetch data:', error);
+        }
+      }
+    });
+    return () => {
+      mounted = false;
+      // Cancel the fetch operation if it's still pending
+      subscription.unsubscribe();
+    };
+  }, [licenseOptionsSpecs, orderVariableSelections, environment, query, variables]);
+}

package/dist-cjs/hooks.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNewPortalElement = void 0;
+var _react = require("react");
+const useNewPortalElement = () => {
+  const elementRef = (0, _react.useRef)(document.createElement('div'));
+  (0, _react.useEffect)(() => {
+    document.body.appendChild(elementRef.current);
+    return () => {
+      elementRef.current.remove();
+    };
+  }, []);
+  return elementRef;
+};
+exports.useNewPortalElement = useNewPortalElement;

package/dist-cjs/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "configure", {
+  enumerable: true,
+  get: function () {
+    return _config.configure;
+  }
+});
+Object.defineProperty(exports, "getConfig", {
+  enumerable: true,
+  get: function () {
+    return _config.getConfig;
+  }
+});
+var _config = require("./config");

package/dist-cjs/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

package/dist-cjs/react-ranger.d.js

@@ -0,0 +1 @@
+"use strict";

package/dist-cjs/react-ranger.js

@@ -0,0 +1,301 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRanger = useRanger;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const getBoundingClientRect = element => {
+  const rect = element.getBoundingClientRect();
+  return {
+    left: Math.ceil(rect.left),
+    width: Math.ceil(rect.width)
+  };
+};
+const sortNumList = arr => [...arr].sort((a, b) => Number(a) - Number(b));
+const useGetLatest = val => {
+  const ref = _react.default.useRef(val);
+  ref.current = val;
+  return _react.default.useCallback(() => ref.current, []);
+};
+const linearInterpolator = {
+  getPercentageForValue: (val, min, max) => {
+    return Math.max(0, Math.min(100, (val - min) / (max - min) * 100));
+  },
+  getValueForClientX: (clientX, trackDims, min, max) => {
+    const {
+      left,
+      width
+    } = trackDims;
+    const percentageValue = (clientX - left) / width;
+    const value = (max - min) * percentageValue;
+    return value + min;
+  }
+};
+function useRanger({
+  interpolator = linearInterpolator,
+  tickSize = 10,
+  values,
+  min,
+  max,
+  ticks: controlledTicks,
+  steps,
+  onChange,
+  onDrag,
+  stepSize
+}) {
+  const [activeHandleIndex, setActiveHandleIndex] = _react.default.useState(null);
+  const [tempValues, setTempValues] = _react.default.useState();
+  const getLatest = useGetLatest({
+    activeHandleIndex,
+    onChange,
+    onDrag,
+    values,
+    tempValues
+  });
+  const trackElRef = _react.default.useRef();
+  const getValueForClientX = _react.default.useCallback(clientX => {
+    const trackDims = getBoundingClientRect(trackElRef.current);
+    return interpolator.getValueForClientX(clientX, trackDims, min, max);
+  }, [interpolator, max, min]);
+  const getNextStep = _react.default.useCallback((val, direction) => {
+    if (steps) {
+      let currIndex = steps.indexOf(val);
+      let nextIndex = currIndex + direction;
+      if (nextIndex >= 0 && nextIndex < steps.length) {
+        return steps[nextIndex];
+      } else {
+        return val;
+      }
+    } else {
+      if (process.env.NODE_ENV !== 'production') {
+        if (typeof stepSize === 'undefined') {
+          throw new Error('Warning: The option `stepSize` is expected in `useRanger`, but its value is `undefined`');
+        }
+      }
+      let nextVal = val + stepSize * direction;
+      if (nextVal >= min && nextVal <= max) {
+        return nextVal;
+      } else {
+        return val;
+      }
+    }
+  }, [max, min, stepSize, steps]);
+  const roundToStep = _react.default.useCallback(val => {
+    let left = min;
+    let right = max;
+    if (steps) {
+      steps.forEach(step => {
+        if (step <= val && step > left) {
+          left = step;
+        }
+        if (step >= val && step < right) {
+          right = step;
+        }
+      });
+    } else {
+      if (process.env.NODE_ENV !== 'production') {
+        if (typeof stepSize === 'undefined') {
+          throw new Error('Warning: The option `stepSize` is expected in `useRanger`, but its value is `undefined`');
+        }
+      }
+      while (left < val && left + stepSize < val) {
+        left += stepSize;
+      }
+      right = Math.min(left + stepSize, max);
+    }
+    if (val - left < right - val) {
+      return left;
+    }
+    return right;
+  }, [max, min, stepSize, steps]);
+  const handleDrag = _react.default.useCallback(e => {
+    const {
+      activeHandleIndex,
+      onDrag
+    } = getLatest();
+    const clientX = e.type === 'touchmove' ? e.changedTouches[0].clientX : e.clientX;
+    const newValue = getValueForClientX(clientX);
+    const newRoundedValue = roundToStep(newValue);
+    const newValues = [...values.slice(0, activeHandleIndex), newRoundedValue, ...values.slice(activeHandleIndex + 1)];
+    if (onDrag) {
+      onDrag(newValues);
+    } else {
+      setTempValues(newValues);
+    }
+  }, [getLatest, getValueForClientX, roundToStep, values]);
+  const handleKeyDown = _react.default.useCallback((e, i) => {
+    const {
+      values,
+      onChange = () => {}
+    } = getLatest();
+    // Left Arrow || Right Arrow
+    if (e.keyCode === 37 || e.keyCode === 39) {
+      setActiveHandleIndex(i);
+      const direction = e.keyCode === 37 ? -1 : 1;
+      const newValue = getNextStep(values[i], direction);
+      const newValues = [...values.slice(0, i), newValue, ...values.slice(i + 1)];
+      const sortedValues = sortNumList(newValues);
+      onChange(sortedValues);
+    }
+  }, [getLatest, getNextStep]);
+  const handlePress = _react.default.useCallback((e, i) => {
+    setActiveHandleIndex(i);
+    const handleRelease = e => {
+      const {
+        tempValues,
+        values,
+        onChange = () => {},
+        onDrag = () => {}
+      } = getLatest();
+      document.removeEventListener('mousemove', handleDrag);
+      document.removeEventListener('touchmove', handleDrag);
+      document.removeEventListener('mouseup', handleRelease);
+      document.removeEventListener('touchend', handleRelease);
+      const sortedValues = sortNumList(tempValues || values);
+      onChange(sortedValues);
+      onDrag(sortedValues);
+      setActiveHandleIndex(null);
+      setTempValues();
+    };
+    document.addEventListener('mousemove', handleDrag);
+    document.addEventListener('touchmove', handleDrag);
+    document.addEventListener('mouseup', handleRelease);
+    document.addEventListener('touchend', handleRelease);
+  }, [getLatest, handleDrag]);
+  const getPercentageForValue = _react.default.useCallback(val => {
+    const pct = interpolator.getPercentageForValue(val, min, max);
+    // Round to 4 decimal places for consistent SSR/client hydration
+    return Math.round(pct * 10000) / 10000;
+  }, [interpolator, max, min]);
+
+  // Build the ticks
+  const ticks = _react.default.useMemo(() => {
+    let ticks = controlledTicks || steps;
+    if (!ticks) {
+      ticks = [min];
+      while (ticks[ticks.length - 1] < max - tickSize) {
+        ticks.push(ticks[ticks.length - 1] + tickSize);
+      }
+      ticks.push(max);
+    }
+    return ticks.map((value, i) => ({
+      value,
+      getTickProps: ({
+        key = i,
+        style = {},
+        ...rest
+      } = {}) => ({
+        key,
+        style: {
+          position: 'absolute',
+          width: 0,
+          left: `${getPercentageForValue(value)}%`,
+          transform: `translateX(-50%)`,
+          ...style
+        },
+        ...rest
+      })
+    }));
+  }, [controlledTicks, getPercentageForValue, max, min, steps, tickSize]);
+  const segments = _react.default.useMemo(() => {
+    const sortedValues = sortNumList(tempValues || values);
+    return [...sortedValues, max].map((value, i) => ({
+      value,
+      getSegmentProps: ({
+        key = i,
+        style = {},
+        ...rest
+      } = {}) => {
+        const left = getPercentageForValue(sortedValues[i - 1] ? sortedValues[i - 1] : min);
+        const width = getPercentageForValue(value) - left;
+        return {
+          key,
+          style: {
+            position: 'absolute',
+            left: `${left}%`,
+            width: `${width}%`,
+            ...style
+          },
+          ...rest
+        };
+      }
+    }));
+  }, [getPercentageForValue, max, min, tempValues, values]);
+  const handles = _react.default.useMemo(() => (tempValues || values).map((value, i) => ({
+    value,
+    active: i === activeHandleIndex,
+    getHandleProps: ({
+      key = i,
+      ref,
+      innerRef = () => {},
+      onKeyDown,
+      onMouseDown,
+      onTouchStart,
+      style = {},
+      ...rest
+    } = {}) => ({
+      key,
+      onKeyDown: e => {
+        e.persist();
+        handleKeyDown(e, i);
+        if (onKeyDown) onKeyDown(e);
+      },
+      onMouseDown: e => {
+        e.persist();
+        handlePress(e, i);
+        if (onMouseDown) onMouseDown(e);
+      },
+      onTouchStart: e => {
+        e.persist();
+        handlePress(e, i);
+        if (onTouchStart) onTouchStart(e);
+      },
+      role: 'slider',
+      'aria-valuemin': min,
+      'aria-valuemax': max,
+      'aria-valuenow': value,
+      style: {
+        position: 'absolute',
+        top: '50%',
+        left: `${getPercentageForValue(value)}%`,
+        zIndex: i === activeHandleIndex ? '1' : '0',
+        transform: 'translate(-50%, -50%)',
+        ...style
+      },
+      ...rest
+    })
+  })), [activeHandleIndex, getPercentageForValue, handleKeyDown, handlePress, min, max, tempValues, values]);
+  const getTrackProps = ({
+    style = {},
+    ref,
+    ...rest
+  } = {}) => {
+    return {
+      ref: el => {
+        trackElRef.current = el;
+        if (ref) {
+          if (typeof ref === 'function') {
+            ref(el);
+          } else {
+            ref.current = el;
+          }
+        }
+      },
+      style: {
+        position: 'relative',
+        userSelect: 'none',
+        ...style
+      },
+      ...rest
+    };
+  };
+  return {
+    activeHandleIndex,
+    getTrackProps,
+    ticks,
+    segments,
+    handles
+  };
+}