npm - @w3ux/react-odometer - Versions diffs - 2.3.10 → 2.3.13 - Mend

@w3ux/react-odometer 2.3.10 → 2.3.13

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.

Files changed (5) hide show

package/index.cjs CHANGED Viewed

@@ -25,7 +25,6 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 var import_react = require("react");
-var import_hooks = require("@w3ux/hooks");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Odometer = ({
   value,
@@ -55,47 +54,33 @@ var Odometer = ({
   const [initialized, setInitialized] = (0, import_react.useState)(false);
   const [odometerRef] = (0, import_react.useState)((0, import_react.createRef)());
   const [digitRefs, setDigitRefs] = (0, import_react.useState)([]);
-  const digitWidths = (0, import_react.useRef)({});
+  const [allDigitRefs, setAllDigitRefs] = (0, import_react.useState)({});
   const activeTransitionCounter = (0, import_react.useRef)(0);
   const DURATION_MS = 750;
   const DURATION_SECS = `${DURATION_MS / 1e3}s`;
-  const handleValueDigitRefs = (v) => {
-    v = String(v) === "0" ? Number(v).toFixed(zeroDecimals) : v;
-    const newDigits = v.toString().split("").map((v2) => v2 === "." ? "dot" : v2).map((v2) => v2 === "," ? "comma" : v2);
-    setDigits(newDigits);
-    if (!initialized) {
-      setInitialized(true);
-    } else {
-      setStatus("new");
-      setPrevDigits(digits);
-    }
-    setDigitRefs(
-      Array.from({ length: newDigits.length }, () => (0, import_react.createRef)())
-    );
-  };
   (0, import_react.useEffect)(() => {
-    handleValueDigitRefs(value);
+    const all = Object.fromEntries(
+      Object.values(allDigits).map((v) => [`d_${v}`, (0, import_react.createRef)()])
+    );
+    setAllDigitRefs(all);
   }, []);
-  (0, import_react.useEffect)(() => {
-    if (digitRefs.length > 0 && !digitRefs.find((d) => d.current === null)) {
-      digitRefs.forEach((ref, i) => {
-        if (ref.current) {
-          const childSpan = ref.current.querySelector(
-            ".odometer-child"
-          );
-          const width = childSpan?.offsetWidth;
-          const digit = digits[i];
-          if (width && !digitWidths.current[digit]) {
-            digitWidths.current[digit] = width;
-          }
-        }
-      });
+  (0, import_react.useLayoutEffect)(() => {
+    if (Object.keys(allDigitRefs)) {
+      value = String(value) === "0" ? Number(value).toFixed(zeroDecimals) : value;
+      const newDigits = value.toString().split("").map((v) => v === "." ? "dot" : v).map((v) => v === "," ? "comma" : v);
+      setDigits(newDigits);
+      if (!initialized) {
+        setInitialized(true);
+      } else {
+        setStatus("new");
+        setPrevDigits(digits);
+      }
+      setDigitRefs(
+        Array.from({ length: newDigits.length }, () => (0, import_react.createRef)())
+      );
     }
-  }, [digitRefs, digits]);
-  (0, import_hooks.useEffectIgnoreInitial)(() => {
-    handleValueDigitRefs(value);
   }, [value]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react.useLayoutEffect)(() => {
     if (status === "new" && !digitRefs.find((d) => d.current === null)) {
       setStatus("transition");
       activeTransitionCounter.current++;
@@ -111,104 +96,119 @@ var Odometer = ({
   let lineHeight = odometerCurrent ? window.getComputedStyle(odometerCurrent).lineHeight : "inherit";
   lineHeight = lineHeight === "normal" ? "1.1rem" : lineHeight;
   let foundDecimal = false;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "odometer", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "odometer-inner", ref: odometerRef, children: [
-    spaceBefore ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { paddingLeft: spaceBefore } }) : null,
-    digits.map((d, i) => {
-      if (d === "dot") {
-        foundDecimal = true;
-      }
-      let childDigits = null;
-      if (status === "transition") {
-        const digitsToAnimate = [];
-        const digitIndex = allDigits.indexOf(digits[i]);
-        const prevDigitIndex = allDigits.indexOf(prevDigits[i]);
-        const difference = Math.abs(digitIndex - prevDigitIndex);
-        const delay = `${0.01 * (digits.length - i - 1)}s`;
-        const direction = digitIndex === prevDigitIndex ? "none" : "down";
-        const animClass = `slide-${direction}-${difference} `;
-        digitsToAnimate.push(prevDigits[i]);
-        if (digitIndex < prevDigitIndex) {
-          digitsToAnimate.push(
-            ...Array.from(
-              { length: difference },
-              (_, k) => allDigits[prevDigitIndex - k - 1]
-            )
-          );
-        } else {
-          digitsToAnimate.push(
-            ...Array.from(
-              { length: difference },
-              (_, k) => allDigits[k + prevDigitIndex + 1]
-            )
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    allDigits.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        ref: allDigitRefs[`d_${d}`],
+        style: {
+          opacity: 0,
+          position: "fixed",
+          display: "inline-block",
+          top: "-999%",
+          left: "-999%",
+          userSelect: "none"
+        },
+        children: d === "dot" ? "." : d === "comma" ? "," : d
+      },
+      `odometer_template_digit_${i}`
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "odometer", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "odometer-inner", ref: odometerRef, children: [
+      spaceBefore ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { paddingLeft: spaceBefore } }) : null,
+      digits.map((d, i) => {
+        if (d === "dot") {
+          foundDecimal = true;
+        }
+        let childDigits = null;
+        if (status === "transition") {
+          const digitsToAnimate = [];
+          const digitIndex = allDigits.indexOf(digits[i]);
+          const prevDigitIndex = allDigits.indexOf(prevDigits[i]);
+          const difference = Math.abs(digitIndex - prevDigitIndex);
+          const delay = `${0.01 * (digits.length - i - 1)}s`;
+          const direction = digitIndex === prevDigitIndex ? "none" : "down";
+          const animClass = `slide-${direction}-${difference} `;
+          digitsToAnimate.push(prevDigits[i]);
+          if (digitIndex < prevDigitIndex) {
+            digitsToAnimate.push(
+              ...Array.from(
+                { length: difference },
+                (_, k) => allDigits[prevDigitIndex - k - 1]
+              )
+            );
+          } else {
+            digitsToAnimate.push(
+              ...Array.from(
+                { length: difference },
+                (_, k) => allDigits[k + prevDigitIndex + 1]
+              )
+            );
+          }
+          childDigits = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                animationName: direction === "none" ? void 0 : animClass,
+                animationDuration: direction === "none" ? void 0 : DURATION_SECS,
+                animationFillMode: "forwards",
+                animationTimingFunction: "cubic-bezier(0.1, 1, 0.2, 1)",
+                animationDelay: delay,
+                color: foundDecimal ? decimalColor : wholeColor,
+                userSelect: "none"
+              },
+              children: digitsToAnimate.map((c, j) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  className: "odometer-digit odometer-child",
+                  style: {
+                    top: j === 0 ? 0 : `${100 * j}%`,
+                    height: lineHeight,
+                    lineHeight
+                  },
+                  children: c === "dot" ? "." : c === "comma" ? "," : c
+                },
+                `child_digit_${j}`
+              ))
+            }
           );
         }
-        childDigits = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "span",
           {
+            ref: digitRefs[i],
+            className: "odometer-digit",
             style: {
-              position: "absolute",
-              top: 0,
-              left: 0,
-              animationName: direction === "none" ? void 0 : animClass,
-              animationDuration: direction === "none" ? void 0 : DURATION_SECS,
-              animationFillMode: "forwards",
-              animationTimingFunction: "cubic-bezier(0.1, 1, 0.2, 1)",
-              animationDelay: delay,
               color: foundDecimal ? decimalColor : wholeColor,
-              userSelect: "none"
+              height: lineHeight,
+              lineHeight,
+              paddingRight: status === "transition" ? `${allDigitRefs[`d_${d}`]?.current?.offsetWidth}px` : "0"
             },
-            children: digitsToAnimate.map((c, j) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "span",
-              {
-                className: "odometer-digit odometer-child",
-                style: {
-                  top: j === 0 ? 0 : `${100 * j}%`,
-                  height: lineHeight,
-                  lineHeight
-                },
-                children: c === "dot" ? "." : c === "comma" ? "," : c
-              },
-              `child_digit_${j}`
-            ))
-          }
-        );
-      }
-      const offsetWidth = digitWidths.current[d];
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "span",
-        {
-          ref: digitRefs[i],
-          className: "odometer-digit",
-          style: {
-            color: foundDecimal ? decimalColor : wholeColor,
-            height: lineHeight,
-            lineHeight,
-            minWidth: offsetWidth ? `${offsetWidth}px` : void 0
+            children: [
+              status === "inactive" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  className: "odometer-digit odometer-child",
+                  style: {
+                    top: 0,
+                    height: lineHeight,
+                    lineHeight,
+                    width: `${allDigitRefs[`d_${d}`]?.current?.offsetWidth}px`
+                  },
+                  children: d === "dot" ? "." : d === "comma" ? "," : d
+                }
+              ),
+              status === "transition" && childDigits
+            ]
           },
-          children: [
-            status === "inactive" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "span",
-              {
-                className: "odometer-digit odometer-child",
-                style: {
-                  position: offsetWidth ? "absolute" : "relative",
-                  top: offsetWidth ? 0 : void 0,
-                  left: offsetWidth ? 0 : void 0,
-                  height: lineHeight,
-                  lineHeight,
-                  width: offsetWidth ? `${offsetWidth}px` : "auto"
-                },
-                children: d === "dot" ? "." : d === "comma" ? "," : d
-              }
-            ),
-            status === "transition" && childDigits
-          ]
-        },
-        `digit_${i}`
-      );
-    }),
-    spaceAfter ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { paddingRight: spaceAfter } }) : null
-  ] }) });
+          `digit_${i}`
+        );
+      }),
+      spaceAfter ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { paddingRight: spaceAfter } }) : null
+    ] }) })
+  ] });
 };
 var index_default = Odometer;
 // Annotate the CommonJS export names for ESM import in node:

package/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.tsx"],"sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only /\n\nimport { createRef, useEffect, useRef, useState } from 'react'\nimport './index.css'\nimport { useEffectIgnoreInitial } from '@w3ux/hooks'\nimport type { Digit, DigitRef, Direction, Props, Status } from './types'\n\nexport const Odometer = ({\n\tvalue,\n\tspaceBefore = 0,\n\tspaceAfter = '0.25rem',\n\twholeColor = 'var(--text-color-primary)',\n\tdecimalColor = 'var(--text-color-secondary)',\n\tzeroDecimals = 0,\n}: Props) => {\n\t// Store all possible digits.\n\tconst [allDigits] = useState<Digit[]>([\n\t\t'comma',\n\t\t'dot',\n\t\t'0',\n\t\t'1',\n\t\t'2',\n\t\t'3',\n\t\t'4',\n\t\t'5',\n\t\t'6',\n\t\t'7',\n\t\t'8',\n\t\t'9',\n\t])\n\n\t// Store the digits of the current value.\n\tconst [digits, setDigits] = useState<Digit[]>([])\n\n\t// Store digits of the previous value.\n\tconst [prevDigits, setPrevDigits] = useState<Digit[]>([])\n\n\t// Store the status of the odometer (transitioning or stable).\n\tconst [status, setStatus] = useState<Status>('inactive')\n\n\t// Store whether component has initialized.\n\tconst [initialized, setInitialized] = useState<boolean>(false)\n\n\t// Store ref of the odometer.\n\tconst [odometerRef] = useState(createRef<HTMLSpanElement>())\n\n\t// Store refs of each digit.\n\tconst [digitRefs, setDigitRefs] = useState<DigitRef[]>([])\n\n\t// Store measured widths for each digit character.\n\tconst digitWidths = useRef<Record<string, number>>({})\n\n\t// Keep track of active transitions.\n\tconst activeTransitionCounter = useRef<number>(0)\n\n\t// Transition duration.\n\tconst DURATION_MS = 750\n\tconst DURATION_SECS = `${DURATION_MS / 1000}s`\n\n\t// Set digit refs for a value.\n\tconst handleValueDigitRefs = (v: string \| number) => {\n\t\tv = String(v) === '0' ? Number(v).toFixed(zeroDecimals) : v\n\n\t\tconst newDigits = v\n\t\t\t.toString()\n\t\t\t.split('')\n\t\t\t.map((v) => (v === '.' ? 'dot' : v))\n\t\t\t.map((v) => (v === ',' ? 'comma' : v)) as Digit[]\n\n\t\tsetDigits(newDigits)\n\n\t\tif (!initialized) {\n\t\t\tsetInitialized(true)\n\t\t} else {\n\t\t\tsetStatus('new')\n\t\t\tsetPrevDigits(digits)\n\t\t}\n\t\tsetDigitRefs(\n\t\t\tArray.from({ length: newDigits.length }, () => createRef() as DigitRef),\n\t\t)\n\t}\n\n\t// Phase 0: initialize with first value.\n\tuseEffect(() => {\n\t\thandleValueDigitRefs(value)\n\t}, [])\n\n\t// Phase 1: measure digit widths after refs are attached.\n\tuseEffect(() => {\n\t\tif (digitRefs.length > 0 && !digitRefs.find((d) => d.current === null)) {\n\t\t\tdigitRefs.forEach((ref, i) => {\n\t\t\t\tif (ref.current) {\n\t\t\t\t\t// Measure the child span's width\n\t\t\t\t\tconst childSpan = ref.current.querySelector(\n\t\t\t\t\t\t'.odometer-child',\n\t\t\t\t\t) as HTMLSpanElement\n\t\t\t\t\tconst width = childSpan?.offsetWidth\n\t\t\t\t\tconst digit = digits[i]\n\t\t\t\t\tif (width && !digitWidths.current[digit]) {\n\t\t\t\t\t\tdigitWidths.current[digit] = width\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t})\n\t\t}\n\t}, [digitRefs, digits])\n\n\t// Phase 2: new digits and refs are added to the odometer.\n\tuseEffectIgnoreInitial(() => {\n\t\thandleValueDigitRefs(value)\n\t}, [value])\n\n\t// Phase 3: set up digit transition.\n\tuseEffect(() => {\n\t\tif (status === 'new' && !digitRefs.find((d) => d.current === null)) {\n\t\t\tsetStatus('transition')\n\t\t\tactiveTransitionCounter.current++\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tactiveTransitionCounter.current--\n\t\t\t\tif (activeTransitionCounter.current === 0) {\n\t\t\t\t\tsetStatus('inactive')\n\t\t\t\t}\n\t\t\t}, DURATION_MS)\n\t\t}\n\t}, [status, digitRefs])\n\n\tconst odometerCurrent: HTMLSpanElement \| null = odometerRef.current\n\tlet lineHeight = odometerCurrent\n\t\t? window.getComputedStyle(odometerCurrent).lineHeight\n\t\t: 'inherit'\n\n\t// Fallback line height to `1.1rem` if `normal`.\n\tlineHeight = lineHeight === 'normal' ? '1.1rem' : lineHeight\n\n\t// Track whether decimal point has been found.\n\tlet foundDecimal = false\n\n\treturn (\n\t\t<span className=\"odometer\">\n\t\t\t<span className=\"odometer-inner\" ref={odometerRef}>\n\t\t\t\t{spaceBefore ? <span style={{ paddingLeft: spaceBefore }} /> : null}\n\t\t\t\t{digits.map((d, i) => {\n\t\t\t\t\tif (d === 'dot') {\n\t\t\t\t\t\tfoundDecimal = true\n\t\t\t\t\t}\n\n\t\t\t\t\t// If transitioning, get digits needed to animate.\n\t\t\t\t\tlet childDigits = null\n\t\t\t\t\tif (status === 'transition') {\n\t\t\t\t\t\tconst digitsToAnimate = []\n\t\t\t\t\t\tconst digitIndex = allDigits.indexOf(digits[i])\n\t\t\t\t\t\tconst prevDigitIndex = allDigits.indexOf(prevDigits[i])\n\t\t\t\t\t\tconst difference = Math.abs(digitIndex - prevDigitIndex)\n\t\t\t\t\t\tconst delay = `${0.01 (digits.length - i - 1)}s`\n\t\t\t\t\t\tconst direction: Direction =\n\t\t\t\t\t\t\tdigitIndex === prevDigitIndex ? 'none' : 'down'\n\t\t\t\t\t\tconst animClass = `slide-${direction}-${difference} `\n\n\t\t\t\t\t\t// Push current prev digit to stop of stack.\n\t\t\t\t\t\tdigitsToAnimate.push(prevDigits[i])\n\n\t\t\t\t\t\t// If transitioning between two digits, animate all digits in between.\n\t\t\t\t\t\tif (digitIndex < prevDigitIndex) {\n\t\t\t\t\t\t\tdigitsToAnimate.push(\n\t\t\t\t\t\t\t\t...Array.from(\n\t\t\t\t\t\t\t\t\t{ length: difference },\n\t\t\t\t\t\t\t\t\t(_, k) => allDigits[prevDigitIndex - k - 1],\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tdigitsToAnimate.push(\n\t\t\t\t\t\t\t\t...Array.from(\n\t\t\t\t\t\t\t\t\t{ length: difference },\n\t\t\t\t\t\t\t\t\t(_, k) => allDigits[k + prevDigitIndex + 1],\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tchildDigits = (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\t\t\tanimationName: direction === 'none' ? undefined : animClass,\n\t\t\t\t\t\t\t\t\tanimationDuration:\n\t\t\t\t\t\t\t\t\t\tdirection === 'none' ? undefined : DURATION_SECS,\n\t\t\t\t\t\t\t\t\tanimationFillMode: 'forwards',\n\t\t\t\t\t\t\t\t\tanimationTimingFunction: 'cubic-bezier(0.1, 1, 0.2, 1)',\n\t\t\t\t\t\t\t\t\tanimationDelay: delay,\n\t\t\t\t\t\t\t\t\tcolor: foundDecimal ? decimalColor : wholeColor,\n\t\t\t\t\t\t\t\t\tuserSelect: 'none',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{digitsToAnimate.map((c, j) => (\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tkey={`child_digit_${j}`}\n\t\t\t\t\t\t\t\t\t\tclassName=\"odometer-digit odometer-child\"\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\ttop: j === 0 ? 0 : `${100 * j}%`,\n\t\t\t\t\t\t\t\t\t\t\theight: lineHeight,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{c === 'dot' ? '.' : c === 'comma' ? ',' : c}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\n\t\t\t\t\tconst offsetWidth = digitWidths.current[d]\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tkey={`digit_${i}`}\n\t\t\t\t\t\t\tref={digitRefs[i]}\n\t\t\t\t\t\t\tclassName=\"odometer-digit\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: foundDecimal ? decimalColor : wholeColor,\n\t\t\t\t\t\t\t\theight: lineHeight,\n\t\t\t\t\t\t\t\tlineHeight,\n\t\t\t\t\t\t\t\tminWidth: offsetWidth ? `${offsetWidth}px` : undefined,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{status === 'inactive' && (\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclassName=\"odometer-digit odometer-child\"\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tposition: offsetWidth ? 'absolute' : 'relative',\n\t\t\t\t\t\t\t\t\t\ttop: offsetWidth ? 0 : undefined,\n\t\t\t\t\t\t\t\t\t\tleft: offsetWidth ? 0 : undefined,\n\t\t\t\t\t\t\t\t\t\theight: lineHeight,\n\t\t\t\t\t\t\t\t\t\tlineHeight,\n\t\t\t\t\t\t\t\t\t\twidth: offsetWidth ? `${offsetWidth}px` : 'auto',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{d === 'dot' ? '.' : d === 'comma' ? ',' : d}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{status === 'transition' && childDigits}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t\t{spaceAfter ? <span style={{ paddingRight: spaceAfter }} /> : null}\n\t\t\t</span>\n\t\t</span>\n\t)\n}\n\nexport default Odometer\n"],"mappings":"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","names":["v"]}
1	+ {"version":3,"sources":["../src/index.tsx"],"sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only /\n\nimport type { RefObject } from 'react'\nimport { createRef, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport './index.css'\nimport type { Digit, DigitRef, Direction, Props, Status } from './types'\n\nexport const Odometer = ({\n\tvalue,\n\tspaceBefore = 0,\n\tspaceAfter = '0.25rem',\n\twholeColor = 'var(--text-color-primary)',\n\tdecimalColor = 'var(--text-color-secondary)',\n\tzeroDecimals = 0,\n}: Props) => {\n\t// Store all possible digits.\n\tconst [allDigits] = useState<Digit[]>([\n\t\t'comma',\n\t\t'dot',\n\t\t'0',\n\t\t'1',\n\t\t'2',\n\t\t'3',\n\t\t'4',\n\t\t'5',\n\t\t'6',\n\t\t'7',\n\t\t'8',\n\t\t'9',\n\t])\n\n\t// Store the digits of the current value.\n\tconst [digits, setDigits] = useState<Digit[]>([])\n\n\t// Store digits of the previous value.\n\tconst [prevDigits, setPrevDigits] = useState<Digit[]>([])\n\n\t// Store the status of the odometer (transitioning or stable).\n\tconst [status, setStatus] = useState<Status>('inactive')\n\n\t// Store whether component has iniiialized.\n\tconst [initialized, setInitialized] = useState<boolean>(false)\n\n\t// Store ref of the odometer.\n\tconst [odometerRef] = useState(createRef<HTMLSpanElement>())\n\n\t// Store refs of each digit.\n\tconst [digitRefs, setDigitRefs] = useState<DigitRef[]>([])\n\n\t// Store refs of each `all` digit.\n\tconst [allDigitRefs, setAllDigitRefs] = useState<\n\t\tRecord<string, RefObject<HTMLSpanElement \| null>>\n\t>({})\n\n\t// Keep track of active transitions.\n\tconst activeTransitionCounter = useRef<number>(0)\n\n\t// Transition duration.\n\tconst DURATION_MS = 750\n\tconst DURATION_SECS = `${DURATION_MS / 1000}s`\n\n\t// Phase 0: populate `allDigitRefs`.\n\tuseEffect(() => {\n\t\tconst all: Record<\n\t\t\tstring,\n\t\t\tRefObject<HTMLSpanElement \| null>\n\t\t> = Object.fromEntries(\n\t\t\tObject.values(allDigits).map((v) => [`d_${v}`, createRef()]),\n\t\t)\n\n\t\tsetAllDigitRefs(all)\n\t}, [])\n\n\t// Phase 1: new digits and refs are added to the odometer.\n\tuseLayoutEffect(() => {\n\t\tif (Object.keys(allDigitRefs)) {\n\t\t\tvalue =\n\t\t\t\tString(value) === '0' ? Number(value).toFixed(zeroDecimals) : value\n\n\t\t\tconst newDigits = value\n\t\t\t\t.toString()\n\t\t\t\t.split('')\n\t\t\t\t.map((v) => (v === '.' ? 'dot' : v))\n\t\t\t\t.map((v) => (v === ',' ? 'comma' : v)) as Digit[]\n\n\t\t\tsetDigits(newDigits)\n\n\t\t\tif (!initialized) {\n\t\t\t\tsetInitialized(true)\n\t\t\t} else {\n\t\t\t\tsetStatus('new')\n\t\t\t\tsetPrevDigits(digits)\n\t\t\t}\n\t\t\tsetDigitRefs(\n\t\t\t\tArray.from({ length: newDigits.length }, () => createRef() as DigitRef),\n\t\t\t)\n\t\t}\n\t}, [value])\n\n\t// Phase 2: set up digit transition.\n\tuseLayoutEffect(() => {\n\t\tif (status === 'new' && !digitRefs.find((d) => d.current === null)) {\n\t\t\tsetStatus('transition')\n\t\t\tactiveTransitionCounter.current++\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tactiveTransitionCounter.current--\n\t\t\t\tif (activeTransitionCounter.current === 0) {\n\t\t\t\t\tsetStatus('inactive')\n\t\t\t\t}\n\t\t\t}, DURATION_MS)\n\t\t}\n\t}, [status, digitRefs])\n\n\tconst odometerCurrent: HTMLSpanElement \| null = odometerRef.current\n\tlet lineHeight = odometerCurrent\n\t\t? window.getComputedStyle(odometerCurrent).lineHeight\n\t\t: 'inherit'\n\n\t// Fallback line height to `1.1rem` if `normal`.\n\tlineHeight = lineHeight === 'normal' ? '1.1rem' : lineHeight\n\n\t// Track whether decimal point has been found.\n\tlet foundDecimal = false\n\n\treturn (\n\t\t<>\n\t\t\t{allDigits.map((d, i) => (\n\t\t\t\t<span\n\t\t\t\t\tkey={`odometer_template_digit_${i}`}\n\t\t\t\t\tref={allDigitRefs[`d_${d}`]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\tposition: 'fixed',\n\t\t\t\t\t\tdisplay: 'inline-block',\n\t\t\t\t\t\ttop: '-999%',\n\t\t\t\t\t\tleft: '-999%',\n\t\t\t\t\t\tuserSelect: 'none',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{d === 'dot' ? '.' : d === 'comma' ? ',' : d}\n\t\t\t\t</span>\n\t\t\t))}\n\t\t\t<span className=\"odometer\">\n\t\t\t\t<span className=\"odometer-inner\" ref={odometerRef}>\n\t\t\t\t\t{spaceBefore ? <span style={{ paddingLeft: spaceBefore }} /> : null}\n\t\t\t\t\t{digits.map((d, i) => {\n\t\t\t\t\t\tif (d === 'dot') {\n\t\t\t\t\t\t\tfoundDecimal = true\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// If transitioning, get digits needed to animate.\n\t\t\t\t\t\tlet childDigits = null\n\t\t\t\t\t\tif (status === 'transition') {\n\t\t\t\t\t\t\tconst digitsToAnimate = []\n\t\t\t\t\t\t\tconst digitIndex = allDigits.indexOf(digits[i])\n\t\t\t\t\t\t\tconst prevDigitIndex = allDigits.indexOf(prevDigits[i])\n\t\t\t\t\t\t\tconst difference = Math.abs(digitIndex - prevDigitIndex)\n\t\t\t\t\t\t\tconst delay = `${0.01 (digits.length - i - 1)}s`\n\t\t\t\t\t\t\tconst direction: Direction =\n\t\t\t\t\t\t\t\tdigitIndex === prevDigitIndex ? 'none' : 'down'\n\t\t\t\t\t\t\tconst animClass = `slide-${direction}-${difference} `\n\n\t\t\t\t\t\t\t// Push current prev digit to stop of stack.\n\t\t\t\t\t\t\tdigitsToAnimate.push(prevDigits[i])\n\n\t\t\t\t\t\t\t// If transitioning between two digits, animate all digits in between.\n\t\t\t\t\t\t\tif (digitIndex < prevDigitIndex) {\n\t\t\t\t\t\t\t\tdigitsToAnimate.push(\n\t\t\t\t\t\t\t\t\t...Array.from(\n\t\t\t\t\t\t\t\t\t\t{ length: difference },\n\t\t\t\t\t\t\t\t\t\t(_, k) => allDigits[prevDigitIndex - k - 1],\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tdigitsToAnimate.push(\n\t\t\t\t\t\t\t\t\t...Array.from(\n\t\t\t\t\t\t\t\t\t\t{ length: difference },\n\t\t\t\t\t\t\t\t\t\t(_, k) => allDigits[k + prevDigitIndex + 1],\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tchildDigits = (\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\t\t\t\tanimationName: direction === 'none' ? undefined : animClass,\n\t\t\t\t\t\t\t\t\t\tanimationDuration:\n\t\t\t\t\t\t\t\t\t\t\tdirection === 'none' ? undefined : DURATION_SECS,\n\t\t\t\t\t\t\t\t\t\tanimationFillMode: 'forwards',\n\t\t\t\t\t\t\t\t\t\tanimationTimingFunction: 'cubic-bezier(0.1, 1, 0.2, 1)',\n\t\t\t\t\t\t\t\t\t\tanimationDelay: delay,\n\t\t\t\t\t\t\t\t\t\tcolor: foundDecimal ? decimalColor : wholeColor,\n\t\t\t\t\t\t\t\t\t\tuserSelect: 'none',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{digitsToAnimate.map((c, j) => (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tkey={`child_digit_${j}`}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"odometer-digit odometer-child\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\ttop: j === 0 ? 0 : `${100 * j}%`,\n\t\t\t\t\t\t\t\t\t\t\t\theight: lineHeight,\n\t\t\t\t\t\t\t\t\t\t\t\tlineHeight,\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{c === 'dot' ? '.' : c === 'comma' ? ',' : c}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tkey={`digit_${i}`}\n\t\t\t\t\t\t\t\tref={digitRefs[i]}\n\t\t\t\t\t\t\t\tclassName=\"odometer-digit\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: foundDecimal ? decimalColor : wholeColor,\n\t\t\t\t\t\t\t\t\theight: lineHeight,\n\t\t\t\t\t\t\t\t\tlineHeight,\n\t\t\t\t\t\t\t\t\tpaddingRight:\n\t\t\t\t\t\t\t\t\t\tstatus === 'transition'\n\t\t\t\t\t\t\t\t\t\t\t? `${allDigitRefs[`d_${d}`]?.current?.offsetWidth}px`\n\t\t\t\t\t\t\t\t\t\t\t: '0',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{status === 'inactive' && (\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclassName=\"odometer-digit odometer-child\"\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t\t\t\t\theight: lineHeight,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight,\n\t\t\t\t\t\t\t\t\t\t\twidth: `${\n\t\t\t\t\t\t\t\t\t\t\t\tallDigitRefs[`d_${d}`]?.current?.offsetWidth\n\t\t\t\t\t\t\t\t\t\t\t}px`,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{d === 'dot' ? '.' : d === 'comma' ? ',' : d}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{status === 'transition' && childDigits}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t\t{spaceAfter ? <span style={{ paddingRight: spaceAfter }} /> : null}\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t</>\n\t)\n}\n\nexport default Odometer\n"],"mappings":"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","names":[]}

package/index.js CHANGED Viewed

@@ -1,7 +1,6 @@
 // src/index.tsx
-import { createRef, useEffect, useRef, useState } from "react";
-import { useEffectIgnoreInitial } from "@w3ux/hooks";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { createRef, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var Odometer = ({
   value,
   spaceBefore = 0,
@@ -30,47 +29,33 @@ var Odometer = ({
   const [initialized, setInitialized] = useState(false);
   const [odometerRef] = useState(createRef());
   const [digitRefs, setDigitRefs] = useState([]);
-  const digitWidths = useRef({});
+  const [allDigitRefs, setAllDigitRefs] = useState({});
   const activeTransitionCounter = useRef(0);
   const DURATION_MS = 750;
   const DURATION_SECS = `${DURATION_MS / 1e3}s`;
-  const handleValueDigitRefs = (v) => {
-    v = String(v) === "0" ? Number(v).toFixed(zeroDecimals) : v;
-    const newDigits = v.toString().split("").map((v2) => v2 === "." ? "dot" : v2).map((v2) => v2 === "," ? "comma" : v2);
-    setDigits(newDigits);
-    if (!initialized) {
-      setInitialized(true);
-    } else {
-      setStatus("new");
-      setPrevDigits(digits);
-    }
-    setDigitRefs(
-      Array.from({ length: newDigits.length }, () => createRef())
-    );
-  };
   useEffect(() => {
-    handleValueDigitRefs(value);
+    const all = Object.fromEntries(
+      Object.values(allDigits).map((v) => [`d_${v}`, createRef()])
+    );
+    setAllDigitRefs(all);
   }, []);
-  useEffect(() => {
-    if (digitRefs.length > 0 && !digitRefs.find((d) => d.current === null)) {
-      digitRefs.forEach((ref, i) => {
-        if (ref.current) {
-          const childSpan = ref.current.querySelector(
-            ".odometer-child"
-          );
-          const width = childSpan?.offsetWidth;
-          const digit = digits[i];
-          if (width && !digitWidths.current[digit]) {
-            digitWidths.current[digit] = width;
-          }
-        }
-      });
+  useLayoutEffect(() => {
+    if (Object.keys(allDigitRefs)) {
+      value = String(value) === "0" ? Number(value).toFixed(zeroDecimals) : value;
+      const newDigits = value.toString().split("").map((v) => v === "." ? "dot" : v).map((v) => v === "," ? "comma" : v);
+      setDigits(newDigits);
+      if (!initialized) {
+        setInitialized(true);
+      } else {
+        setStatus("new");
+        setPrevDigits(digits);
+      }
+      setDigitRefs(
+        Array.from({ length: newDigits.length }, () => createRef())
+      );
     }
-  }, [digitRefs, digits]);
-  useEffectIgnoreInitial(() => {
-    handleValueDigitRefs(value);
   }, [value]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (status === "new" && !digitRefs.find((d) => d.current === null)) {
       setStatus("transition");
       activeTransitionCounter.current++;
@@ -86,104 +71,119 @@ var Odometer = ({
   let lineHeight = odometerCurrent ? window.getComputedStyle(odometerCurrent).lineHeight : "inherit";
   lineHeight = lineHeight === "normal" ? "1.1rem" : lineHeight;
   let foundDecimal = false;
-  return /* @__PURE__ */ jsx("span", { className: "odometer", children: /* @__PURE__ */ jsxs("span", { className: "odometer-inner", ref: odometerRef, children: [
-    spaceBefore ? /* @__PURE__ */ jsx("span", { style: { paddingLeft: spaceBefore } }) : null,
-    digits.map((d, i) => {
-      if (d === "dot") {
-        foundDecimal = true;
-      }
-      let childDigits = null;
-      if (status === "transition") {
-        const digitsToAnimate = [];
-        const digitIndex = allDigits.indexOf(digits[i]);
-        const prevDigitIndex = allDigits.indexOf(prevDigits[i]);
-        const difference = Math.abs(digitIndex - prevDigitIndex);
-        const delay = `${0.01 * (digits.length - i - 1)}s`;
-        const direction = digitIndex === prevDigitIndex ? "none" : "down";
-        const animClass = `slide-${direction}-${difference} `;
-        digitsToAnimate.push(prevDigits[i]);
-        if (digitIndex < prevDigitIndex) {
-          digitsToAnimate.push(
-            ...Array.from(
-              { length: difference },
-              (_, k) => allDigits[prevDigitIndex - k - 1]
-            )
-          );
-        } else {
-          digitsToAnimate.push(
-            ...Array.from(
-              { length: difference },
-              (_, k) => allDigits[k + prevDigitIndex + 1]
-            )
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    allDigits.map((d, i) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: allDigitRefs[`d_${d}`],
+        style: {
+          opacity: 0,
+          position: "fixed",
+          display: "inline-block",
+          top: "-999%",
+          left: "-999%",
+          userSelect: "none"
+        },
+        children: d === "dot" ? "." : d === "comma" ? "," : d
+      },
+      `odometer_template_digit_${i}`
+    )),
+    /* @__PURE__ */ jsx("span", { className: "odometer", children: /* @__PURE__ */ jsxs("span", { className: "odometer-inner", ref: odometerRef, children: [
+      spaceBefore ? /* @__PURE__ */ jsx("span", { style: { paddingLeft: spaceBefore } }) : null,
+      digits.map((d, i) => {
+        if (d === "dot") {
+          foundDecimal = true;
+        }
+        let childDigits = null;
+        if (status === "transition") {
+          const digitsToAnimate = [];
+          const digitIndex = allDigits.indexOf(digits[i]);
+          const prevDigitIndex = allDigits.indexOf(prevDigits[i]);
+          const difference = Math.abs(digitIndex - prevDigitIndex);
+          const delay = `${0.01 * (digits.length - i - 1)}s`;
+          const direction = digitIndex === prevDigitIndex ? "none" : "down";
+          const animClass = `slide-${direction}-${difference} `;
+          digitsToAnimate.push(prevDigits[i]);
+          if (digitIndex < prevDigitIndex) {
+            digitsToAnimate.push(
+              ...Array.from(
+                { length: difference },
+                (_, k) => allDigits[prevDigitIndex - k - 1]
+              )
+            );
+          } else {
+            digitsToAnimate.push(
+              ...Array.from(
+                { length: difference },
+                (_, k) => allDigits[k + prevDigitIndex + 1]
+              )
+            );
+          }
+          childDigits = /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                animationName: direction === "none" ? void 0 : animClass,
+                animationDuration: direction === "none" ? void 0 : DURATION_SECS,
+                animationFillMode: "forwards",
+                animationTimingFunction: "cubic-bezier(0.1, 1, 0.2, 1)",
+                animationDelay: delay,
+                color: foundDecimal ? decimalColor : wholeColor,
+                userSelect: "none"
+              },
+              children: digitsToAnimate.map((c, j) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "odometer-digit odometer-child",
+                  style: {
+                    top: j === 0 ? 0 : `${100 * j}%`,
+                    height: lineHeight,
+                    lineHeight
+                  },
+                  children: c === "dot" ? "." : c === "comma" ? "," : c
+                },
+                `child_digit_${j}`
+              ))
+            }
           );
         }
-        childDigits = /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsxs(
           "span",
           {
+            ref: digitRefs[i],
+            className: "odometer-digit",
             style: {
-              position: "absolute",
-              top: 0,
-              left: 0,
-              animationName: direction === "none" ? void 0 : animClass,
-              animationDuration: direction === "none" ? void 0 : DURATION_SECS,
-              animationFillMode: "forwards",
-              animationTimingFunction: "cubic-bezier(0.1, 1, 0.2, 1)",
-              animationDelay: delay,
               color: foundDecimal ? decimalColor : wholeColor,
-              userSelect: "none"
+              height: lineHeight,
+              lineHeight,
+              paddingRight: status === "transition" ? `${allDigitRefs[`d_${d}`]?.current?.offsetWidth}px` : "0"
             },
-            children: digitsToAnimate.map((c, j) => /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "odometer-digit odometer-child",
-                style: {
-                  top: j === 0 ? 0 : `${100 * j}%`,
-                  height: lineHeight,
-                  lineHeight
-                },
-                children: c === "dot" ? "." : c === "comma" ? "," : c
-              },
-              `child_digit_${j}`
-            ))
-          }
-        );
-      }
-      const offsetWidth = digitWidths.current[d];
-      return /* @__PURE__ */ jsxs(
-        "span",
-        {
-          ref: digitRefs[i],
-          className: "odometer-digit",
-          style: {
-            color: foundDecimal ? decimalColor : wholeColor,
-            height: lineHeight,
-            lineHeight,
-            minWidth: offsetWidth ? `${offsetWidth}px` : void 0
+            children: [
+              status === "inactive" && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "odometer-digit odometer-child",
+                  style: {
+                    top: 0,
+                    height: lineHeight,
+                    lineHeight,
+                    width: `${allDigitRefs[`d_${d}`]?.current?.offsetWidth}px`
+                  },
+                  children: d === "dot" ? "." : d === "comma" ? "," : d
+                }
+              ),
+              status === "transition" && childDigits
+            ]
           },
-          children: [
-            status === "inactive" && /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "odometer-digit odometer-child",
-                style: {
-                  position: offsetWidth ? "absolute" : "relative",
-                  top: offsetWidth ? 0 : void 0,
-                  left: offsetWidth ? 0 : void 0,
-                  height: lineHeight,
-                  lineHeight,
-                  width: offsetWidth ? `${offsetWidth}px` : "auto"
-                },
-                children: d === "dot" ? "." : d === "comma" ? "," : d
-              }
-            ),
-            status === "transition" && childDigits
-          ]
-        },
-        `digit_${i}`
-      );
-    }),
-    spaceAfter ? /* @__PURE__ */ jsx("span", { style: { paddingRight: spaceAfter } }) : null
-  ] }) });
+          `digit_${i}`
+        );
+      }),
+      spaceAfter ? /* @__PURE__ */ jsx("span", { style: { paddingRight: spaceAfter } }) : null
+    ] }) })
+  ] });
 };
 var index_default = Odometer;
 export {

package/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.tsx"],"sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only /\n\nimport { createRef, useEffect, useRef, useState } from 'react'\nimport './index.css'\nimport { useEffectIgnoreInitial } from '@w3ux/hooks'\nimport type { Digit, DigitRef, Direction, Props, Status } from './types'\n\nexport const Odometer = ({\n\tvalue,\n\tspaceBefore = 0,\n\tspaceAfter = '0.25rem',\n\twholeColor = 'var(--text-color-primary)',\n\tdecimalColor = 'var(--text-color-secondary)',\n\tzeroDecimals = 0,\n}: Props) => {\n\t// Store all possible digits.\n\tconst [allDigits] = useState<Digit[]>([\n\t\t'comma',\n\t\t'dot',\n\t\t'0',\n\t\t'1',\n\t\t'2',\n\t\t'3',\n\t\t'4',\n\t\t'5',\n\t\t'6',\n\t\t'7',\n\t\t'8',\n\t\t'9',\n\t])\n\n\t// Store the digits of the current value.\n\tconst [digits, setDigits] = useState<Digit[]>([])\n\n\t// Store digits of the previous value.\n\tconst [prevDigits, setPrevDigits] = useState<Digit[]>([])\n\n\t// Store the status of the odometer (transitioning or stable).\n\tconst [status, setStatus] = useState<Status>('inactive')\n\n\t// Store whether component has initialized.\n\tconst [initialized, setInitialized] = useState<boolean>(false)\n\n\t// Store ref of the odometer.\n\tconst [odometerRef] = useState(createRef<HTMLSpanElement>())\n\n\t// Store refs of each digit.\n\tconst [digitRefs, setDigitRefs] = useState<DigitRef[]>([])\n\n\t// Store measured widths for each digit character.\n\tconst digitWidths = useRef<Record<string, number>>({})\n\n\t// Keep track of active transitions.\n\tconst activeTransitionCounter = useRef<number>(0)\n\n\t// Transition duration.\n\tconst DURATION_MS = 750\n\tconst DURATION_SECS = `${DURATION_MS / 1000}s`\n\n\t// Set digit refs for a value.\n\tconst handleValueDigitRefs = (v: string \| number) => {\n\t\tv = String(v) === '0' ? Number(v).toFixed(zeroDecimals) : v\n\n\t\tconst newDigits = v\n\t\t\t.toString()\n\t\t\t.split('')\n\t\t\t.map((v) => (v === '.' ? 'dot' : v))\n\t\t\t.map((v) => (v === ',' ? 'comma' : v)) as Digit[]\n\n\t\tsetDigits(newDigits)\n\n\t\tif (!initialized) {\n\t\t\tsetInitialized(true)\n\t\t} else {\n\t\t\tsetStatus('new')\n\t\t\tsetPrevDigits(digits)\n\t\t}\n\t\tsetDigitRefs(\n\t\t\tArray.from({ length: newDigits.length }, () => createRef() as DigitRef),\n\t\t)\n\t}\n\n\t// Phase 0: initialize with first value.\n\tuseEffect(() => {\n\t\thandleValueDigitRefs(value)\n\t}, [])\n\n\t// Phase 1: measure digit widths after refs are attached.\n\tuseEffect(() => {\n\t\tif (digitRefs.length > 0 && !digitRefs.find((d) => d.current === null)) {\n\t\t\tdigitRefs.forEach((ref, i) => {\n\t\t\t\tif (ref.current) {\n\t\t\t\t\t// Measure the child span's width\n\t\t\t\t\tconst childSpan = ref.current.querySelector(\n\t\t\t\t\t\t'.odometer-child',\n\t\t\t\t\t) as HTMLSpanElement\n\t\t\t\t\tconst width = childSpan?.offsetWidth\n\t\t\t\t\tconst digit = digits[i]\n\t\t\t\t\tif (width && !digitWidths.current[digit]) {\n\t\t\t\t\t\tdigitWidths.current[digit] = width\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t})\n\t\t}\n\t}, [digitRefs, digits])\n\n\t// Phase 2: new digits and refs are added to the odometer.\n\tuseEffectIgnoreInitial(() => {\n\t\thandleValueDigitRefs(value)\n\t}, [value])\n\n\t// Phase 3: set up digit transition.\n\tuseEffect(() => {\n\t\tif (status === 'new' && !digitRefs.find((d) => d.current === null)) {\n\t\t\tsetStatus('transition')\n\t\t\tactiveTransitionCounter.current++\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tactiveTransitionCounter.current--\n\t\t\t\tif (activeTransitionCounter.current === 0) {\n\t\t\t\t\tsetStatus('inactive')\n\t\t\t\t}\n\t\t\t}, DURATION_MS)\n\t\t}\n\t}, [status, digitRefs])\n\n\tconst odometerCurrent: HTMLSpanElement \| null = odometerRef.current\n\tlet lineHeight = odometerCurrent\n\t\t? window.getComputedStyle(odometerCurrent).lineHeight\n\t\t: 'inherit'\n\n\t// Fallback line height to `1.1rem` if `normal`.\n\tlineHeight = lineHeight === 'normal' ? '1.1rem' : lineHeight\n\n\t// Track whether decimal point has been found.\n\tlet foundDecimal = false\n\n\treturn (\n\t\t<span className=\"odometer\">\n\t\t\t<span className=\"odometer-inner\" ref={odometerRef}>\n\t\t\t\t{spaceBefore ? <span style={{ paddingLeft: spaceBefore }} /> : null}\n\t\t\t\t{digits.map((d, i) => {\n\t\t\t\t\tif (d === 'dot') {\n\t\t\t\t\t\tfoundDecimal = true\n\t\t\t\t\t}\n\n\t\t\t\t\t// If transitioning, get digits needed to animate.\n\t\t\t\t\tlet childDigits = null\n\t\t\t\t\tif (status === 'transition') {\n\t\t\t\t\t\tconst digitsToAnimate = []\n\t\t\t\t\t\tconst digitIndex = allDigits.indexOf(digits[i])\n\t\t\t\t\t\tconst prevDigitIndex = allDigits.indexOf(prevDigits[i])\n\t\t\t\t\t\tconst difference = Math.abs(digitIndex - prevDigitIndex)\n\t\t\t\t\t\tconst delay = `${0.01 (digits.length - i - 1)}s`\n\t\t\t\t\t\tconst direction: Direction =\n\t\t\t\t\t\t\tdigitIndex === prevDigitIndex ? 'none' : 'down'\n\t\t\t\t\t\tconst animClass = `slide-${direction}-${difference} `\n\n\t\t\t\t\t\t// Push current prev digit to stop of stack.\n\t\t\t\t\t\tdigitsToAnimate.push(prevDigits[i])\n\n\t\t\t\t\t\t// If transitioning between two digits, animate all digits in between.\n\t\t\t\t\t\tif (digitIndex < prevDigitIndex) {\n\t\t\t\t\t\t\tdigitsToAnimate.push(\n\t\t\t\t\t\t\t\t...Array.from(\n\t\t\t\t\t\t\t\t\t{ length: difference },\n\t\t\t\t\t\t\t\t\t(_, k) => allDigits[prevDigitIndex - k - 1],\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tdigitsToAnimate.push(\n\t\t\t\t\t\t\t\t...Array.from(\n\t\t\t\t\t\t\t\t\t{ length: difference },\n\t\t\t\t\t\t\t\t\t(_, k) => allDigits[k + prevDigitIndex + 1],\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tchildDigits = (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\t\t\tanimationName: direction === 'none' ? undefined : animClass,\n\t\t\t\t\t\t\t\t\tanimationDuration:\n\t\t\t\t\t\t\t\t\t\tdirection === 'none' ? undefined : DURATION_SECS,\n\t\t\t\t\t\t\t\t\tanimationFillMode: 'forwards',\n\t\t\t\t\t\t\t\t\tanimationTimingFunction: 'cubic-bezier(0.1, 1, 0.2, 1)',\n\t\t\t\t\t\t\t\t\tanimationDelay: delay,\n\t\t\t\t\t\t\t\t\tcolor: foundDecimal ? decimalColor : wholeColor,\n\t\t\t\t\t\t\t\t\tuserSelect: 'none',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{digitsToAnimate.map((c, j) => (\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tkey={`child_digit_${j}`}\n\t\t\t\t\t\t\t\t\t\tclassName=\"odometer-digit odometer-child\"\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\ttop: j === 0 ? 0 : `${100 * j}%`,\n\t\t\t\t\t\t\t\t\t\t\theight: lineHeight,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{c === 'dot' ? '.' : c === 'comma' ? ',' : c}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\n\t\t\t\t\tconst offsetWidth = digitWidths.current[d]\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tkey={`digit_${i}`}\n\t\t\t\t\t\t\tref={digitRefs[i]}\n\t\t\t\t\t\t\tclassName=\"odometer-digit\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: foundDecimal ? decimalColor : wholeColor,\n\t\t\t\t\t\t\t\theight: lineHeight,\n\t\t\t\t\t\t\t\tlineHeight,\n\t\t\t\t\t\t\t\tminWidth: offsetWidth ? `${offsetWidth}px` : undefined,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{status === 'inactive' && (\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclassName=\"odometer-digit odometer-child\"\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tposition: offsetWidth ? 'absolute' : 'relative',\n\t\t\t\t\t\t\t\t\t\ttop: offsetWidth ? 0 : undefined,\n\t\t\t\t\t\t\t\t\t\tleft: offsetWidth ? 0 : undefined,\n\t\t\t\t\t\t\t\t\t\theight: lineHeight,\n\t\t\t\t\t\t\t\t\t\tlineHeight,\n\t\t\t\t\t\t\t\t\t\twidth: offsetWidth ? `${offsetWidth}px` : 'auto',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{d === 'dot' ? '.' : d === 'comma' ? ',' : d}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{status === 'transition' && childDigits}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t\t{spaceAfter ? <span style={{ paddingRight: spaceAfter }} /> : null}\n\t\t\t</span>\n\t\t</span>\n\t)\n}\n\nexport default Odometer\n"],"mappings":"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","names":["v"]}
1	+ {"version":3,"sources":["../src/index.tsx"],"sourcesContent":["/* @license Copyright 2024 w3ux authors & contributors\nSPDX-License-Identifier: GPL-3.0-only /\n\nimport type { RefObject } from 'react'\nimport { createRef, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport './index.css'\nimport type { Digit, DigitRef, Direction, Props, Status } from './types'\n\nexport const Odometer = ({\n\tvalue,\n\tspaceBefore = 0,\n\tspaceAfter = '0.25rem',\n\twholeColor = 'var(--text-color-primary)',\n\tdecimalColor = 'var(--text-color-secondary)',\n\tzeroDecimals = 0,\n}: Props) => {\n\t// Store all possible digits.\n\tconst [allDigits] = useState<Digit[]>([\n\t\t'comma',\n\t\t'dot',\n\t\t'0',\n\t\t'1',\n\t\t'2',\n\t\t'3',\n\t\t'4',\n\t\t'5',\n\t\t'6',\n\t\t'7',\n\t\t'8',\n\t\t'9',\n\t])\n\n\t// Store the digits of the current value.\n\tconst [digits, setDigits] = useState<Digit[]>([])\n\n\t// Store digits of the previous value.\n\tconst [prevDigits, setPrevDigits] = useState<Digit[]>([])\n\n\t// Store the status of the odometer (transitioning or stable).\n\tconst [status, setStatus] = useState<Status>('inactive')\n\n\t// Store whether component has iniiialized.\n\tconst [initialized, setInitialized] = useState<boolean>(false)\n\n\t// Store ref of the odometer.\n\tconst [odometerRef] = useState(createRef<HTMLSpanElement>())\n\n\t// Store refs of each digit.\n\tconst [digitRefs, setDigitRefs] = useState<DigitRef[]>([])\n\n\t// Store refs of each `all` digit.\n\tconst [allDigitRefs, setAllDigitRefs] = useState<\n\t\tRecord<string, RefObject<HTMLSpanElement \| null>>\n\t>({})\n\n\t// Keep track of active transitions.\n\tconst activeTransitionCounter = useRef<number>(0)\n\n\t// Transition duration.\n\tconst DURATION_MS = 750\n\tconst DURATION_SECS = `${DURATION_MS / 1000}s`\n\n\t// Phase 0: populate `allDigitRefs`.\n\tuseEffect(() => {\n\t\tconst all: Record<\n\t\t\tstring,\n\t\t\tRefObject<HTMLSpanElement \| null>\n\t\t> = Object.fromEntries(\n\t\t\tObject.values(allDigits).map((v) => [`d_${v}`, createRef()]),\n\t\t)\n\n\t\tsetAllDigitRefs(all)\n\t}, [])\n\n\t// Phase 1: new digits and refs are added to the odometer.\n\tuseLayoutEffect(() => {\n\t\tif (Object.keys(allDigitRefs)) {\n\t\t\tvalue =\n\t\t\t\tString(value) === '0' ? Number(value).toFixed(zeroDecimals) : value\n\n\t\t\tconst newDigits = value\n\t\t\t\t.toString()\n\t\t\t\t.split('')\n\t\t\t\t.map((v) => (v === '.' ? 'dot' : v))\n\t\t\t\t.map((v) => (v === ',' ? 'comma' : v)) as Digit[]\n\n\t\t\tsetDigits(newDigits)\n\n\t\t\tif (!initialized) {\n\t\t\t\tsetInitialized(true)\n\t\t\t} else {\n\t\t\t\tsetStatus('new')\n\t\t\t\tsetPrevDigits(digits)\n\t\t\t}\n\t\t\tsetDigitRefs(\n\t\t\t\tArray.from({ length: newDigits.length }, () => createRef() as DigitRef),\n\t\t\t)\n\t\t}\n\t}, [value])\n\n\t// Phase 2: set up digit transition.\n\tuseLayoutEffect(() => {\n\t\tif (status === 'new' && !digitRefs.find((d) => d.current === null)) {\n\t\t\tsetStatus('transition')\n\t\t\tactiveTransitionCounter.current++\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tactiveTransitionCounter.current--\n\t\t\t\tif (activeTransitionCounter.current === 0) {\n\t\t\t\t\tsetStatus('inactive')\n\t\t\t\t}\n\t\t\t}, DURATION_MS)\n\t\t}\n\t}, [status, digitRefs])\n\n\tconst odometerCurrent: HTMLSpanElement \| null = odometerRef.current\n\tlet lineHeight = odometerCurrent\n\t\t? window.getComputedStyle(odometerCurrent).lineHeight\n\t\t: 'inherit'\n\n\t// Fallback line height to `1.1rem` if `normal`.\n\tlineHeight = lineHeight === 'normal' ? '1.1rem' : lineHeight\n\n\t// Track whether decimal point has been found.\n\tlet foundDecimal = false\n\n\treturn (\n\t\t<>\n\t\t\t{allDigits.map((d, i) => (\n\t\t\t\t<span\n\t\t\t\t\tkey={`odometer_template_digit_${i}`}\n\t\t\t\t\tref={allDigitRefs[`d_${d}`]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\tposition: 'fixed',\n\t\t\t\t\t\tdisplay: 'inline-block',\n\t\t\t\t\t\ttop: '-999%',\n\t\t\t\t\t\tleft: '-999%',\n\t\t\t\t\t\tuserSelect: 'none',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{d === 'dot' ? '.' : d === 'comma' ? ',' : d}\n\t\t\t\t</span>\n\t\t\t))}\n\t\t\t<span className=\"odometer\">\n\t\t\t\t<span className=\"odometer-inner\" ref={odometerRef}>\n\t\t\t\t\t{spaceBefore ? <span style={{ paddingLeft: spaceBefore }} /> : null}\n\t\t\t\t\t{digits.map((d, i) => {\n\t\t\t\t\t\tif (d === 'dot') {\n\t\t\t\t\t\t\tfoundDecimal = true\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// If transitioning, get digits needed to animate.\n\t\t\t\t\t\tlet childDigits = null\n\t\t\t\t\t\tif (status === 'transition') {\n\t\t\t\t\t\t\tconst digitsToAnimate = []\n\t\t\t\t\t\t\tconst digitIndex = allDigits.indexOf(digits[i])\n\t\t\t\t\t\t\tconst prevDigitIndex = allDigits.indexOf(prevDigits[i])\n\t\t\t\t\t\t\tconst difference = Math.abs(digitIndex - prevDigitIndex)\n\t\t\t\t\t\t\tconst delay = `${0.01 (digits.length - i - 1)}s`\n\t\t\t\t\t\t\tconst direction: Direction =\n\t\t\t\t\t\t\t\tdigitIndex === prevDigitIndex ? 'none' : 'down'\n\t\t\t\t\t\t\tconst animClass = `slide-${direction}-${difference} `\n\n\t\t\t\t\t\t\t// Push current prev digit to stop of stack.\n\t\t\t\t\t\t\tdigitsToAnimate.push(prevDigits[i])\n\n\t\t\t\t\t\t\t// If transitioning between two digits, animate all digits in between.\n\t\t\t\t\t\t\tif (digitIndex < prevDigitIndex) {\n\t\t\t\t\t\t\t\tdigitsToAnimate.push(\n\t\t\t\t\t\t\t\t\t...Array.from(\n\t\t\t\t\t\t\t\t\t\t{ length: difference },\n\t\t\t\t\t\t\t\t\t\t(_, k) => allDigits[prevDigitIndex - k - 1],\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tdigitsToAnimate.push(\n\t\t\t\t\t\t\t\t\t...Array.from(\n\t\t\t\t\t\t\t\t\t\t{ length: difference },\n\t\t\t\t\t\t\t\t\t\t(_, k) => allDigits[k + prevDigitIndex + 1],\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tchildDigits = (\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\t\t\t\tanimationName: direction === 'none' ? undefined : animClass,\n\t\t\t\t\t\t\t\t\t\tanimationDuration:\n\t\t\t\t\t\t\t\t\t\t\tdirection === 'none' ? undefined : DURATION_SECS,\n\t\t\t\t\t\t\t\t\t\tanimationFillMode: 'forwards',\n\t\t\t\t\t\t\t\t\t\tanimationTimingFunction: 'cubic-bezier(0.1, 1, 0.2, 1)',\n\t\t\t\t\t\t\t\t\t\tanimationDelay: delay,\n\t\t\t\t\t\t\t\t\t\tcolor: foundDecimal ? decimalColor : wholeColor,\n\t\t\t\t\t\t\t\t\t\tuserSelect: 'none',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{digitsToAnimate.map((c, j) => (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tkey={`child_digit_${j}`}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"odometer-digit odometer-child\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\ttop: j === 0 ? 0 : `${100 * j}%`,\n\t\t\t\t\t\t\t\t\t\t\t\theight: lineHeight,\n\t\t\t\t\t\t\t\t\t\t\t\tlineHeight,\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{c === 'dot' ? '.' : c === 'comma' ? ',' : c}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tkey={`digit_${i}`}\n\t\t\t\t\t\t\t\tref={digitRefs[i]}\n\t\t\t\t\t\t\t\tclassName=\"odometer-digit\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: foundDecimal ? decimalColor : wholeColor,\n\t\t\t\t\t\t\t\t\theight: lineHeight,\n\t\t\t\t\t\t\t\t\tlineHeight,\n\t\t\t\t\t\t\t\t\tpaddingRight:\n\t\t\t\t\t\t\t\t\t\tstatus === 'transition'\n\t\t\t\t\t\t\t\t\t\t\t? `${allDigitRefs[`d_${d}`]?.current?.offsetWidth}px`\n\t\t\t\t\t\t\t\t\t\t\t: '0',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{status === 'inactive' && (\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclassName=\"odometer-digit odometer-child\"\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t\t\t\t\theight: lineHeight,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight,\n\t\t\t\t\t\t\t\t\t\t\twidth: `${\n\t\t\t\t\t\t\t\t\t\t\t\tallDigitRefs[`d_${d}`]?.current?.offsetWidth\n\t\t\t\t\t\t\t\t\t\t\t}px`,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{d === 'dot' ? '.' : d === 'comma' ? ',' : d}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{status === 'transition' && childDigits}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t\t{spaceAfter ? <span style={{ paddingRight: spaceAfter }} /> : null}\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t</>\n\t)\n}\n\nexport default Odometer\n"],"mappings":"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","names":[]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@w3ux/react-odometer",
-  "version": "2.3.10",
+  "version": "2.3.13",
   "license": "GPL-3.0-only",
   "type": "module",
   "description": "An odometer effect used for number and balance transitions",
@@ -33,9 +33,6 @@
       "require": "./index.css"
     }
   },
-  "dependencies": {
-    "@w3ux/hooks": "^2.4.0"
-  },
   "peerDependencies": {
     "react": "^19.1.0",
     "react-dom": "^19.1.0"