@radix-ui/react-primitive - npm Package Compare versions

Comparing version 0.1.5-rc.12 to 0.1.5-rc.13

dist/index.d.ts

@@ -14,4 +14,35 @@ import * as React from "react";
 export const Primitive: Primitives;
+/**
+ * Flush custom event dispatch
+ * https://github.com/radix-ui/primitives/pull/1378
+ *
+ * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types.
+ *
+ * Internally, React prioritises events in the following order:
+ *  - discrete
+ *  - continuous
+ *  - default
+ *
+ * `discrete` is an  important distinction as updates within these events are applied immediately.
+ * React however, is not able to infer the priority of custom event types due to how they are detected internally.
+ * Because of this, it's possible for updates from custom events to be unexpectedly batched when
+ * dispatched by another `discrete` event.
+ *
+ * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch.
+ * This utility should be used when dispatching a custom event from within another `discrete` event, this utility
+ * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event.
+ * For example:
+ *
+ * dispatching a known click 👎
+ * target.dispatchEvent(new Event(‘click’))
+ *
+ * dispatching a custom type within a non-discrete event 👎
+ * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(‘customType’))}
+ *
+ * dispatching a custom type within a `discrete` event 👍
+ * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(‘customType’))}
+ */
+export function dispatchDiscreteCustomEvent<E extends CustomEvent>(target: E['target'], event: E): void;
 export const Root: Primitives;
 
 //# sourceMappingURL=index.d.ts.map

dist/index.js

 var $iMixA$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
 var $iMixA$react = require("react");
+var $iMixA$reactdom = require("react-dom");
 var $iMixA$radixuireactslot = require("@radix-ui/react-slot");
@@ -30,2 +31,3 @@
 $parcel$export($c3def6332c2749a6$exports, "Primitive", () => $c3def6332c2749a6$export$250ffa63cdc0d034);
+$parcel$export($c3def6332c2749a6$exports, "dispatchDiscreteCustomEvent", () => $c3def6332c2749a6$export$6d1a0317bde7de7f);
 $parcel$export($c3def6332c2749a6$exports, "Root", () => $c3def6332c2749a6$export$be92b6f5f03c0fe9);
@@ -35,2 +37,3 @@
 
+
 const $c3def6332c2749a6$var$NODES = [
@@ -70,3 +73,38 @@ 'a',
 /* -----------------------------------------------------------------------------------------------*/ const $c3def6332c2749a6$var$AS_ERROR = `Warning: The \`as\` prop has been removed in favour of \`asChild\`. For details, see https://radix-ui.com/docs/primitives/overview/styling#changing-the-rendered-element`;
-const $c3def6332c2749a6$export$be92b6f5f03c0fe9 = $c3def6332c2749a6$export$250ffa63cdc0d034;
+/* -------------------------------------------------------------------------------------------------
+ * Utils
+ * -----------------------------------------------------------------------------------------------*/ /**
+ * Flush custom event dispatch
+ * https://github.com/radix-ui/primitives/pull/1378
+ *
+ * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types.
+ *
+ * Internally, React prioritises events in the following order:
+ *  - discrete
+ *  - continuous
+ *  - default
+ *
+ * `discrete` is an  important distinction as updates within these events are applied immediately.
+ * React however, is not able to infer the priority of custom event types due to how they are detected internally.
+ * Because of this, it's possible for updates from custom events to be unexpectedly batched when
+ * dispatched by another `discrete` event.
+ *
+ * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch.
+ * This utility should be used when dispatching a custom event from within another `discrete` event, this utility
+ * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event.
+ * For example:
+ *
+ * dispatching a known click 👎
+ * target.dispatchEvent(new Event(‘click’))
+ *
+ * dispatching a custom type within a non-discrete event 👎
+ * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(‘customType’))}
+ *
+ * dispatching a custom type within a `discrete` event 👍
+ * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(‘customType’))}
+ */ function $c3def6332c2749a6$export$6d1a0317bde7de7f(target, event) {
+    if (target) $iMixA$reactdom.flushSync(()=>target.dispatchEvent(event)
+    );
+}
+/* -----------------------------------------------------------------------------------------------*/ const $c3def6332c2749a6$export$be92b6f5f03c0fe9 = $c3def6332c2749a6$export$250ffa63cdc0d034;
 
@@ -73,0 +111,0 @@

dist/index.module.js

 import $4q5Fq$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
 import {forwardRef as $4q5Fq$forwardRef, useEffect as $4q5Fq$useEffect, createElement as $4q5Fq$createElement} from "react";
+import {flushSync as $4q5Fq$flushSync} from "react-dom";
 import {Slot as $4q5Fq$Slot} from "@radix-ui/react-slot";
@@ -11,2 +12,3 @@
 $parcel$export($8927f6f2acc4f386$exports, "Primitive", () => $8927f6f2acc4f386$export$250ffa63cdc0d034);
+$parcel$export($8927f6f2acc4f386$exports, "dispatchDiscreteCustomEvent", () => $8927f6f2acc4f386$export$6d1a0317bde7de7f);
 $parcel$export($8927f6f2acc4f386$exports, "Root", () => $8927f6f2acc4f386$export$be92b6f5f03c0fe9);
@@ -16,2 +18,3 @@
 
+
 const $8927f6f2acc4f386$var$NODES = [
@@ -51,3 +54,38 @@ 'a',
 /* -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$var$AS_ERROR = `Warning: The \`as\` prop has been removed in favour of \`asChild\`. For details, see https://radix-ui.com/docs/primitives/overview/styling#changing-the-rendered-element`;
-const $8927f6f2acc4f386$export$be92b6f5f03c0fe9 = $8927f6f2acc4f386$export$250ffa63cdc0d034;
+/* -------------------------------------------------------------------------------------------------
+ * Utils
+ * -----------------------------------------------------------------------------------------------*/ /**
+ * Flush custom event dispatch
+ * https://github.com/radix-ui/primitives/pull/1378
+ *
+ * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types.
+ *
+ * Internally, React prioritises events in the following order:
+ *  - discrete
+ *  - continuous
+ *  - default
+ *
+ * `discrete` is an  important distinction as updates within these events are applied immediately.
+ * React however, is not able to infer the priority of custom event types due to how they are detected internally.
+ * Because of this, it's possible for updates from custom events to be unexpectedly batched when
+ * dispatched by another `discrete` event.
+ *
+ * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch.
+ * This utility should be used when dispatching a custom event from within another `discrete` event, this utility
+ * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event.
+ * For example:
+ *
+ * dispatching a known click 👎
+ * target.dispatchEvent(new Event(‘click’))
+ *
+ * dispatching a custom type within a non-discrete event 👎
+ * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(‘customType’))}
+ *
+ * dispatching a custom type within a `discrete` event 👍
+ * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(‘customType’))}
+ */ function $8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event) {
+    if (target) $4q5Fq$flushSync(()=>target.dispatchEvent(event)
+    );
+}
+/* -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$be92b6f5f03c0fe9 = $8927f6f2acc4f386$export$250ffa63cdc0d034;
 
@@ -57,3 +95,3 @@
 
-export {$8927f6f2acc4f386$export$250ffa63cdc0d034 as Primitive, $8927f6f2acc4f386$export$be92b6f5f03c0fe9 as Root};
+export {$8927f6f2acc4f386$export$250ffa63cdc0d034 as Primitive, $8927f6f2acc4f386$export$6d1a0317bde7de7f as dispatchDiscreteCustomEvent, $8927f6f2acc4f386$export$be92b6f5f03c0fe9 as Root};
 //# sourceMappingURL=index.module.js.map

package.json

 {
   "name": "@radix-ui/react-primitive",
-  "version": "0.1.5-rc.12",
+  "version": "0.1.5-rc.13",
   "license": "MIT",
@@ -20,3 +20,3 @@ "source": "src/index.ts",
     "@babel/runtime": "^7.13.10",
-    "@radix-ui/react-slot": "0.1.3-rc.12"
+    "@radix-ui/react-slot": "0.1.3-rc.13"
   },
@@ -27,3 +27,4 @@ "devDependencies": {
   "peerDependencies": {
-    "react": "^16.8 || ^17.0 || ^18.0"
+    "react": "^16.8 || ^17.0 || ^18.0",
+    "react-dom": "^16.8 || ^17.0 || ^18.0"
   },
@@ -30,0 +31,0 @@ "homepage": "https://radix-ui.com/primitives",

No alert changes

Improved metrics

Total package byte prevSize

25869

70.82%

Lines of code

231

83.33%

Worsened metrics

Dependency count

4

33.33%

Dependency changes

• + Added

  @radix-ui/react-compose-refs@0.1.1-rc.13
  (transitive)

• + Added

  @radix-ui/react-slot@0.1.3-rc.13
  (transitive)

• + Added

  react-dom@18.3.1
  (transitive)

• + Added

  scheduler@0.23.2
  (transitive)

• - Removed

  @radix-ui/react-compose-refs@0.1.1-rc.12
  (transitive)

• - Removed

  @radix-ui/react-slot@0.1.3-rc.12
  (transitive)

• Updated

  @radix-ui/react-slot@0.1.3-rc.13