@number-flow/react 0.3.2 → 0.3.4

package/dist/index.d.mts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { NumberFlowLite, Value, Format, Props } from 'number-flow';
-export { Format, Trend, Value } from 'number-flow';
+export { Format, NumberPartType, Trend, Value } from 'number-flow';
 
-declare const OBSERVED_ATTRIBUTES: readonly ["parts"];
+declare const OBSERVED_ATTRIBUTES: readonly ["data"];
 type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number];
 declare class NumberFlowElement extends NumberFlowLite {
-    static observedAttributes: readonly ["parts"] | never[];
+    static observedAttributes: readonly ["data"] | never[];
     attributeChangedCallback(attr: ObservedAttribute, _oldValue: string, newValue: string): void;
 }
 type BaseProps = React.HTMLAttributes<NumberFlowElement> & Partial<Props> & {
@@ -18,6 +18,8 @@ type NumberFlowProps = BaseProps & {
     value: Value;
     locales?: Intl.LocalesArgument;
     format?: Format;
+    prefix?: string;
+    suffix?: string;
 };
 declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<NumberFlowElement> & Partial<Props> & {
     isolate?: boolean;
@@ -28,6 +30,8 @@ declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<N
     value: Value;
     locales?: Intl.LocalesArgument;
     format?: Format;
+    prefix?: string;
+    suffix?: string;
 } & React.RefAttributes<NumberFlowElement>>;
 
 declare function useCanAnimate({ respectMotionPreference }?: {

package/dist/index.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { NumberFlowLite, Value, Format, Props } from 'number-flow';
-export { Format, Trend, Value } from 'number-flow';
+export { Format, NumberPartType, Trend, Value } from 'number-flow';
 
-declare const OBSERVED_ATTRIBUTES: readonly ["parts"];
+declare const OBSERVED_ATTRIBUTES: readonly ["data"];
 type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number];
 declare class NumberFlowElement extends NumberFlowLite {
-    static observedAttributes: readonly ["parts"] | never[];
+    static observedAttributes: readonly ["data"] | never[];
     attributeChangedCallback(attr: ObservedAttribute, _oldValue: string, newValue: string): void;
 }
 type BaseProps = React.HTMLAttributes<NumberFlowElement> & Partial<Props> & {
@@ -18,6 +18,8 @@ type NumberFlowProps = BaseProps & {
     value: Value;
     locales?: Intl.LocalesArgument;
     format?: Format;
+    prefix?: string;
+    suffix?: string;
 };
 declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<NumberFlowElement> & Partial<Props> & {
     isolate?: boolean;
@@ -28,6 +30,8 @@ declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<N
     value: Value;
     locales?: Intl.LocalesArgument;
     format?: Format;
+    prefix?: string;
+    suffix?: string;
 } & React.RefAttributes<NumberFlowElement>>;
 
 declare function useCanAnimate({ respectMotionPreference }?: {

package/dist/index.js

@@ -45,9 +45,10 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
 var import_number_flow = require("number-flow");
+var import_esm_env = require("esm-env");
 var REACT_MAJOR = parseInt(React.version.match(/^(\d+)\./)?.[1]);
 var isReact19 = REACT_MAJOR >= 19;
-var OBSERVED_ATTRIBUTES = ["parts"];
+var OBSERVED_ATTRIBUTES = ["data"];
 var NumberFlowElement = class extends import_number_flow.NumberFlowLite {
   attributeChangedCallback(attr, _oldValue, newValue) {
     this[attr] = JSON.parse(newValue);
@@ -56,7 +57,7 @@ var NumberFlowElement = class extends import_number_flow.NumberFlowLite {
 NumberFlowElement.observedAttributes = isReact19 ? [] : OBSERVED_ATTRIBUTES;
 (0, import_number_flow.define)("number-flow-react", NumberFlowElement);
 var formatters = {};
-var serializeParts = isReact19 ? (p) => p : JSON.stringify;
+var serializeData = isReact19 ? (p) => p : JSON.stringify;
 function splitProps(props) {
   const {
     transformTiming,
@@ -88,15 +89,15 @@ var NumberFlowImpl = class extends React.Component {
     __privateAdd(this, _el);
     this.handleRef = this.handleRef.bind(this);
   }
-  // Update the non-`parts` props to avoid JSON serialization
-  // Parts needs to be set in render still:
-  updateNonPartsProps(prevProps) {
+  // Update the non-`data` props to avoid JSON serialization
+  // Data needs to be set in render still:
+  updateNonDataProps(prevProps) {
     if (!__privateGet(this, _el)) return;
     __privateGet(this, _el).manual = !this.props.isolate;
-    const [nonParts] = splitProps(this.props);
+    const [nonData] = splitProps(this.props);
     Object.assign(
       __privateGet(this, _el),
-      Object.fromEntries(Object.entries(nonParts).filter(([_, v]) => v != null))
+      Object.fromEntries(Object.entries(nonData).filter(([_, v]) => v != null))
     );
     if (prevProps?.onAnimationsStart)
       __privateGet(this, _el).removeEventListener("animationsstart", prevProps.onAnimationsStart);
@@ -111,14 +112,14 @@ var NumberFlowImpl = class extends React.Component {
       __privateGet(this, _el).addEventListener("animationsfinish", this.props.onAnimationsFinish);
   }
   componentDidMount() {
-    this.updateNonPartsProps();
+    this.updateNonDataProps();
     if (isReact19 && __privateGet(this, _el)) {
-      __privateGet(this, _el).parts = this.props.parts;
+      __privateGet(this, _el).data = this.props.data;
     }
   }
   getSnapshotBeforeUpdate(prevProps) {
-    this.updateNonPartsProps(prevProps);
-    if (this.props.isolate || this.props.animated === false || prevProps.parts === this.props.parts)
+    this.updateNonDataProps(prevProps);
+    if (this.props.isolate || this.props.animated === false || prevProps.data === this.props.data)
       return false;
     __privateGet(this, _el)?.willUpdate();
     return true;
@@ -131,7 +132,19 @@ var NumberFlowImpl = class extends React.Component {
     __privateSet(this, _el, el);
   }
   render() {
-    const [_, { innerRef, className, parts, willChange, isolate, ...rest }] = splitProps(this.props);
+    const [
+      _,
+      {
+        innerRef,
+        className,
+        data,
+        willChange,
+        isolate,
+        onAnimationsStart,
+        onAnimationsFinish,
+        ...rest
+      }
+    ] = splitProps(this.props);
     return (
       // @ts-expect-error missing types
       /* @__PURE__ */ React.createElement(
@@ -140,28 +153,31 @@ var NumberFlowImpl = class extends React.Component {
           ref: this.handleRef,
           "data-will-change": willChange ? "" : void 0,
           class: className,
+          "aria-label": data.valueAsString,
           ...rest,
-          dangerouslySetInnerHTML: { __html: (0, import_number_flow.render)({ formatted: parts.formatted, willChange }) },
-          parts: serializeParts(parts)
+          role: "img",
+          dangerouslySetInnerHTML: { __html: import_esm_env.BROWSER ? "" : (0, import_number_flow.renderInnerHTML)(data) },
+          suppressHydrationWarning: true,
+          data: serializeData(data)
         }
       )
     );
   }
 };
 _el = new WeakMap();
-var NumberFlow = React.forwardRef(function NumberFlow2({ value, locales, format, ...props }, _ref) {
+var NumberFlow = React.forwardRef(function NumberFlow2({ value, locales, format, prefix, suffix, ...props }, _ref) {
   React.useImperativeHandle(_ref, () => ref.current, []);
   const ref = React.useRef();
   const localesString = React.useMemo(() => locales ? JSON.stringify(locales) : "", [locales]);
   const formatString = React.useMemo(() => format ? JSON.stringify(format) : "", [format]);
-  const parts = React.useMemo(() => {
+  const data = React.useMemo(() => {
     const formatter = formatters[`${localesString}:${formatString}`] ??= new Intl.NumberFormat(
       locales,
       format
     );
-    return (0, import_number_flow.partitionParts)(value, formatter);
-  }, [value, localesString, formatString]);
-  return /* @__PURE__ */ React.createElement(NumberFlowImpl, { ...props, parts, innerRef: ref });
+    return (0, import_number_flow.formatToData)(value, formatter, prefix, suffix);
+  }, [value, localesString, formatString, prefix, suffix]);
+  return /* @__PURE__ */ React.createElement(NumberFlowImpl, { ...props, data, innerRef: ref });
 });
 var src_default = NumberFlow;
 function useCanAnimate({ respectMotionPreference = true } = {}) {

package/dist/index.mjs

@@ -10,16 +10,17 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
 // src/index.tsx
 import * as React from "react";
 import {
-  render,
-  partitionParts,
+  renderInnerHTML,
+  formatToData,
   NumberFlowLite,
   prefersReducedMotion,
   canAnimate as _canAnimate,
   define
 } from "number-flow";
+import { BROWSER } from "esm-env";
 var REACT_MAJOR = parseInt(React.version.match(/^(\d+)\./)?.[1]);
 var isReact19 = REACT_MAJOR >= 19;
-var OBSERVED_ATTRIBUTES = ["parts"];
+var OBSERVED_ATTRIBUTES = ["data"];
 var NumberFlowElement = class extends NumberFlowLite {
   attributeChangedCallback(attr, _oldValue, newValue) {
     this[attr] = JSON.parse(newValue);
@@ -28,7 +29,7 @@ var NumberFlowElement = class extends NumberFlowLite {
 NumberFlowElement.observedAttributes = isReact19 ? [] : OBSERVED_ATTRIBUTES;
 define("number-flow-react", NumberFlowElement);
 var formatters = {};
-var serializeParts = isReact19 ? (p) => p : JSON.stringify;
+var serializeData = isReact19 ? (p) => p : JSON.stringify;
 function splitProps(props) {
   const {
     transformTiming,
@@ -60,15 +61,15 @@ var NumberFlowImpl = class extends React.Component {
     __privateAdd(this, _el);
     this.handleRef = this.handleRef.bind(this);
   }
-  // Update the non-`parts` props to avoid JSON serialization
-  // Parts needs to be set in render still:
-  updateNonPartsProps(prevProps) {
+  // Update the non-`data` props to avoid JSON serialization
+  // Data needs to be set in render still:
+  updateNonDataProps(prevProps) {
     if (!__privateGet(this, _el)) return;
     __privateGet(this, _el).manual = !this.props.isolate;
-    const [nonParts] = splitProps(this.props);
+    const [nonData] = splitProps(this.props);
     Object.assign(
       __privateGet(this, _el),
-      Object.fromEntries(Object.entries(nonParts).filter(([_, v]) => v != null))
+      Object.fromEntries(Object.entries(nonData).filter(([_, v]) => v != null))
     );
     if (prevProps?.onAnimationsStart)
       __privateGet(this, _el).removeEventListener("animationsstart", prevProps.onAnimationsStart);
@@ -83,14 +84,14 @@ var NumberFlowImpl = class extends React.Component {
       __privateGet(this, _el).addEventListener("animationsfinish", this.props.onAnimationsFinish);
   }
   componentDidMount() {
-    this.updateNonPartsProps();
+    this.updateNonDataProps();
     if (isReact19 && __privateGet(this, _el)) {
-      __privateGet(this, _el).parts = this.props.parts;
+      __privateGet(this, _el).data = this.props.data;
     }
   }
   getSnapshotBeforeUpdate(prevProps) {
-    this.updateNonPartsProps(prevProps);
-    if (this.props.isolate || this.props.animated === false || prevProps.parts === this.props.parts)
+    this.updateNonDataProps(prevProps);
+    if (this.props.isolate || this.props.animated === false || prevProps.data === this.props.data)
       return false;
     __privateGet(this, _el)?.willUpdate();
     return true;
@@ -103,7 +104,19 @@ var NumberFlowImpl = class extends React.Component {
     __privateSet(this, _el, el);
   }
   render() {
-    const [_, { innerRef, className, parts, willChange, isolate, ...rest }] = splitProps(this.props);
+    const [
+      _,
+      {
+        innerRef,
+        className,
+        data,
+        willChange,
+        isolate,
+        onAnimationsStart,
+        onAnimationsFinish,
+        ...rest
+      }
+    ] = splitProps(this.props);
     return (
       // @ts-expect-error missing types
       /* @__PURE__ */ React.createElement(
@@ -112,28 +125,31 @@ var NumberFlowImpl = class extends React.Component {
           ref: this.handleRef,
           "data-will-change": willChange ? "" : void 0,
           class: className,
+          "aria-label": data.valueAsString,
           ...rest,
-          dangerouslySetInnerHTML: { __html: render({ formatted: parts.formatted, willChange }) },
-          parts: serializeParts(parts)
+          role: "img",
+          dangerouslySetInnerHTML: { __html: BROWSER ? "" : renderInnerHTML(data) },
+          suppressHydrationWarning: true,
+          data: serializeData(data)
         }
       )
     );
   }
 };
 _el = new WeakMap();
-var NumberFlow = React.forwardRef(function NumberFlow2({ value, locales, format, ...props }, _ref) {
+var NumberFlow = React.forwardRef(function NumberFlow2({ value, locales, format, prefix, suffix, ...props }, _ref) {
   React.useImperativeHandle(_ref, () => ref.current, []);
   const ref = React.useRef();
   const localesString = React.useMemo(() => locales ? JSON.stringify(locales) : "", [locales]);
   const formatString = React.useMemo(() => format ? JSON.stringify(format) : "", [format]);
-  const parts = React.useMemo(() => {
+  const data = React.useMemo(() => {
     const formatter = formatters[`${localesString}:${formatString}`] ??= new Intl.NumberFormat(
       locales,
       format
     );
-    return partitionParts(value, formatter);
-  }, [value, localesString, formatString]);
-  return /* @__PURE__ */ React.createElement(NumberFlowImpl, { ...props, parts, innerRef: ref });
+    return formatToData(value, formatter, prefix, suffix);
+  }, [value, localesString, formatString, prefix, suffix]);
+  return /* @__PURE__ */ React.createElement(NumberFlowImpl, { ...props, data, innerRef: ref });
 });
 var src_default = NumberFlow;
 function useCanAnimate({ respectMotionPreference = true } = {}) {

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.2",
+  "version": "0.3.4",
   "author": {
     "name": "Maxwell Barvian",
     "email": "max@barvian.me",
@@ -48,7 +48,8 @@
     }
   },
   "dependencies": {
-    "number-flow": "0.3.7"
+    "esm-env": "^1.1.4",
+    "number-flow": "0.3.9"
   },
   "devDependencies": {
     "@playwright/test": "^1.48.0",