@number-flow/react 0.2.6 → 0.3.1

package/dist/index.d.mts

@@ -5,26 +5,25 @@ export { Format, Trend, Value } from 'number-flow';
 declare const OBSERVED_ATTRIBUTES: readonly ["parts"];
 type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number];
 declare class NumberFlowElement extends NumberFlowLite {
-    static observedAttributes: readonly ["parts"];
+    static observedAttributes: readonly ["parts"] | never[];
     attributeChangedCallback(attr: ObservedAttribute, _oldValue: string, newValue: string): void;
 }
-type NonPartsProps = Omit<Props, 'manual'>;
-type BaseProps = React.HTMLAttributes<NumberFlowElement> & Partial<NonPartsProps> & {
+type BaseProps = React.HTMLAttributes<NumberFlowElement> & Partial<Props> & {
     isolate?: boolean;
     willChange?: boolean;
-    onAnimationsStart?: () => void;
-    onAnimationsFinish?: () => void;
+    onAnimationsStart?: (e: CustomEvent<undefined>) => void;
+    onAnimationsFinish?: (e: CustomEvent<undefined>) => void;
 };
 type NumberFlowProps = BaseProps & {
     value: Value;
     locales?: Intl.LocalesArgument;
     format?: Format;
 };
-declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<NumberFlowElement> & Partial<NonPartsProps> & {
+declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<NumberFlowElement> & Partial<Props> & {
     isolate?: boolean;
     willChange?: boolean;
-    onAnimationsStart?: () => void;
-    onAnimationsFinish?: () => void;
+    onAnimationsStart?: (e: CustomEvent<undefined>) => void;
+    onAnimationsFinish?: (e: CustomEvent<undefined>) => void;
 } & {
     value: Value;
     locales?: Intl.LocalesArgument;

package/dist/index.d.ts

@@ -5,26 +5,25 @@ export { Format, Trend, Value } from 'number-flow';
 declare const OBSERVED_ATTRIBUTES: readonly ["parts"];
 type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number];
 declare class NumberFlowElement extends NumberFlowLite {
-    static observedAttributes: readonly ["parts"];
+    static observedAttributes: readonly ["parts"] | never[];
     attributeChangedCallback(attr: ObservedAttribute, _oldValue: string, newValue: string): void;
 }
-type NonPartsProps = Omit<Props, 'manual'>;
-type BaseProps = React.HTMLAttributes<NumberFlowElement> & Partial<NonPartsProps> & {
+type BaseProps = React.HTMLAttributes<NumberFlowElement> & Partial<Props> & {
     isolate?: boolean;
     willChange?: boolean;
-    onAnimationsStart?: () => void;
-    onAnimationsFinish?: () => void;
+    onAnimationsStart?: (e: CustomEvent<undefined>) => void;
+    onAnimationsFinish?: (e: CustomEvent<undefined>) => void;
 };
 type NumberFlowProps = BaseProps & {
     value: Value;
     locales?: Intl.LocalesArgument;
     format?: Format;
 };
-declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<NumberFlowElement> & Partial<NonPartsProps> & {
+declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<NumberFlowElement> & Partial<Props> & {
     isolate?: boolean;
     willChange?: boolean;
-    onAnimationsStart?: () => void;
-    onAnimationsFinish?: () => void;
+    onAnimationsStart?: (e: CustomEvent<undefined>) => void;
+    onAnimationsFinish?: (e: CustomEvent<undefined>) => void;
 } & {
     value: Value;
     locales?: Intl.LocalesArgument;

package/dist/index.js

@@ -45,15 +45,16 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
 var import_number_flow = require("number-flow");
-var isReact19 = React.version.startsWith("19.");
+var REACT_MAJOR = parseInt(React.version.match(/^(\d+)\./)?.[1]);
+var isReact19 = REACT_MAJOR >= 19;
 var OBSERVED_ATTRIBUTES = ["parts"];
 var NumberFlowElement = class extends import_number_flow.NumberFlowLite {
   attributeChangedCallback(attr, _oldValue, newValue) {
     this[attr] = JSON.parse(newValue);
   }
 };
-NumberFlowElement.observedAttributes = OBSERVED_ATTRIBUTES;
-NumberFlowElement.define();
+NumberFlowElement.observedAttributes = isReact19 ? [] : OBSERVED_ATTRIBUTES;
+(0, import_number_flow.define)("number-flow-react", NumberFlowElement);
 var formatters = {};
 var serializeParts = isReact19 ? (p) => p : JSON.stringify;
 function splitProps(props) {
@@ -102,7 +103,10 @@ var NumberFlowImpl = class extends React.Component {
     if (this.props.onAnimationsStart)
       __privateGet(this, _el).addEventListener("animationsstart", this.props.onAnimationsStart);
     if (prevProps?.onAnimationsFinish)
-      __privateGet(this, _el).removeEventListener("animationsfinish", prevProps.onAnimationsFinish);
+      __privateGet(this, _el).removeEventListener(
+        "animationsfinish",
+        prevProps.onAnimationsFinish
+      );
     if (this.props.onAnimationsFinish)
       __privateGet(this, _el).addEventListener("animationsfinish", this.props.onAnimationsFinish);
   }
@@ -131,7 +135,7 @@ var NumberFlowImpl = class extends React.Component {
     return (
       // @ts-expect-error missing types
       /* @__PURE__ */ React.createElement(
-        "number-flow",
+        "number-flow-react",
         {
           ref: this.handleRef,
           "data-will-change": willChange ? "" : void 0,

package/dist/index.mjs

@@ -14,17 +14,19 @@ import {
   partitionParts,
   NumberFlowLite,
   prefersReducedMotion,
-  canAnimate as _canAnimate
+  canAnimate as _canAnimate,
+  define
 } from "number-flow";
-var isReact19 = React.version.startsWith("19.");
+var REACT_MAJOR = parseInt(React.version.match(/^(\d+)\./)?.[1]);
+var isReact19 = REACT_MAJOR >= 19;
 var OBSERVED_ATTRIBUTES = ["parts"];
 var NumberFlowElement = class extends NumberFlowLite {
   attributeChangedCallback(attr, _oldValue, newValue) {
     this[attr] = JSON.parse(newValue);
   }
 };
-NumberFlowElement.observedAttributes = OBSERVED_ATTRIBUTES;
-NumberFlowElement.define();
+NumberFlowElement.observedAttributes = isReact19 ? [] : OBSERVED_ATTRIBUTES;
+define("number-flow-react", NumberFlowElement);
 var formatters = {};
 var serializeParts = isReact19 ? (p) => p : JSON.stringify;
 function splitProps(props) {
@@ -73,7 +75,10 @@ var NumberFlowImpl = class extends React.Component {
     if (this.props.onAnimationsStart)
       __privateGet(this, _el).addEventListener("animationsstart", this.props.onAnimationsStart);
     if (prevProps?.onAnimationsFinish)
-      __privateGet(this, _el).removeEventListener("animationsfinish", prevProps.onAnimationsFinish);
+      __privateGet(this, _el).removeEventListener(
+        "animationsfinish",
+        prevProps.onAnimationsFinish
+      );
     if (this.props.onAnimationsFinish)
       __privateGet(this, _el).addEventListener("animationsfinish", this.props.onAnimationsFinish);
   }
@@ -102,7 +107,7 @@ var NumberFlowImpl = class extends React.Component {
     return (
       // @ts-expect-error missing types
       /* @__PURE__ */ React.createElement(
-        "number-flow",
+        "number-flow-react",
         {
           ref: this.handleRef,
           "data-will-change": willChange ? "" : void 0,

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.6",
+  "version": "0.3.1",
   "author": {
     "name": "Maxwell Barvian",
     "email": "max@barvian.me",
@@ -48,7 +48,7 @@
     }
   },
   "dependencies": {
-    "number-flow": "0.3.4"
+    "number-flow": "0.3.6"
   },
   "devDependencies": {
     "@playwright/test": "^1.48.0",