@radix-ui/react-primitive 0.1.5-rc.3 → 0.1.5-rc.32

package/dist/index.d.ts

@@ -11,6 +11,43 @@ export type PrimitivePropsWithRef<E extends React.ElementType> = React.Component
 interface PrimitiveForwardRefComponent<E extends React.ElementType> extends React.ForwardRefExoticComponent<PrimitivePropsWithRef<E>> {
 }
 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
+ *
+ * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350
+ *
+ * `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’))}
+ *
+ * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's  not recommended to use
+ * this utility with them. This is because it's possible for those handlers to be called implicitly during render
+ * e.g. when focus is within a component as it is unmounted, or when managing focus on mount.
+ */
+export function dispatchDiscreteCustomEvent<E extends CustomEvent>(target: E['target'], event: E): void;
 export const Root: Primitives;
 
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"mappings":";AAGA,QAAA,MAAM,sGAcI,CAAC;AAKX,qBAAqB,CAAC,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,KAAK,SAAS,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAC7G,qCAA8B,CAAC,SAAS,MAAM,WAAW,IAAI,gBAC3D,MAAM,cAAc,CAAC,CAAC,CAAC,CACxB,CAAC;AAEF,kBAAkB;KAAG,CAAC,IAAI,YAAY,CAAC,MAAM,CAAC,GAAG,6BAA6B,CAAC,CAAC;CAAE,CAAC;AACnF,kCAA2B,CAAC,SAAS,MAAM,WAAW,IAAI,MAAM,qBAAqB,CAAC,CAAC,CAAC,GAAG;IACzF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,uCAAuC,CAAC,SAAS,MAAM,WAAW,CAChE,SAAQ,KAAK,CAAC,yBAAyB,CAAC,sBAAsB,CAAC,CAAC,CAAC;CAAG;AAMtE,OAAA,MAAM,qBAoBL,CAAC;AAMF,OAAA,MAAM,gBAAgB,CAAC","sources":["packages/react/primitive/src/packages/react/primitive/src/Primitive.tsx","packages/react/primitive/src/packages/react/primitive/src/index.ts","packages/react/primitive/src/index.ts"],"sourcesContent":[null,null,"export * from './Primitive';\n"],"names":[],"version":3,"file":"index.d.ts.map"}
+{"mappings":";AAIA,QAAA,MAAM,sGAcI,CAAC;AAKX,qBAAqB,CAAC,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,KAAK,SAAS,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAC7G,qCAA8B,CAAC,SAAS,MAAM,WAAW,IAAI,gBAC3D,MAAM,cAAc,CAAC,CAAC,CAAC,CACxB,CAAC;AAEF,kBAAkB;KAAG,CAAC,IAAI,YAAY,CAAC,MAAM,CAAC,GAAG,6BAA6B,CAAC,CAAC;CAAE,CAAC;AACnF,kCAA2B,CAAC,SAAS,MAAM,WAAW,IAAI,MAAM,qBAAqB,CAAC,CAAC,CAAC,GAAG;IACzF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,uCAAuC,CAAC,SAAS,MAAM,WAAW,CAChE,SAAQ,KAAK,CAAC,yBAAyB,CAAC,sBAAsB,CAAC,CAAC,CAAC;CAAG;AAMtE,OAAA,MAAM,qBAoBc,CAAC;AAUrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,4CAAqC,CAAC,SAAS,WAAW,EAAE,MAAM,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,QAExF;AAID,OAAA,MAAM,gBAAgB,CAAC","sources":["packages/react/primitive/src/packages/react/primitive/src/Primitive.tsx","packages/react/primitive/src/packages/react/primitive/src/index.ts","packages/react/primitive/src/index.ts"],"sourcesContent":[null,null,"export * from './Primitive';\n"],"names":[],"version":3,"file":"index.d.ts.map"}

package/dist/index.js

@@ -1,5 +1,6 @@
 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");
 
 function $parcel$exportWildcard(dest, source) {
@@ -27,10 +28,12 @@ function $parcel$export(e, n, v, s) {
 var $c3def6332c2749a6$exports = {};
 
 $parcel$export($c3def6332c2749a6$exports, "Primitive", () => $c3def6332c2749a6$export$250ffa63cdc0d034);
+$parcel$export($c3def6332c2749a6$exports, "dispatchDiscreteCustomEvent", () => $c3def6332c2749a6$export$6d1a0317bde7de7f);
 $parcel$export($c3def6332c2749a6$exports, "Root", () => $c3def6332c2749a6$export$be92b6f5f03c0fe9);
 
 
 
+
 const $c3def6332c2749a6$var$NODES = [
     'a',
     'button',
@@ -50,22 +53,66 @@ const $c3def6332c2749a6$var$NODES = [
 // prettier-ignore
 /* -------------------------------------------------------------------------------------------------
  * Primitive
- * -----------------------------------------------------------------------------------------------*/ const $c3def6332c2749a6$export$250ffa63cdc0d034 = $c3def6332c2749a6$var$NODES.reduce((primitive, node)=>({
+ * -----------------------------------------------------------------------------------------------*/ const $c3def6332c2749a6$export$250ffa63cdc0d034 = $c3def6332c2749a6$var$NODES.reduce((primitive, node)=>{
+    const Node = /*#__PURE__*/ $iMixA$react.forwardRef((props, forwardedRef)=>{
+        const { asChild: asChild , ...primitiveProps } = props;
+        const Comp = asChild ? $iMixA$radixuireactslot.Slot : node;
+        $iMixA$react.useEffect(()=>{
+            window[Symbol.for('radix-ui')] = true;
+        }, []); // DEPRECATED
+        return /*#__PURE__*/ $iMixA$react.createElement(Comp, ($parcel$interopDefault($iMixA$babelruntimehelpersextends))({}, primitiveProps, {
+            ref: forwardedRef
+        }));
+    });
+    Node.displayName = `Primitive.${node}`;
+    return {
         ...primitive,
-        [node]: /*#__PURE__*/ $iMixA$react.forwardRef((props, forwardedRef)=>{
-            const { asChild: asChild , ...primitiveProps } = props;
-            const Comp = asChild ? $iMixA$radixuireactslot.Slot : node;
-            $iMixA$react.useEffect(()=>{
-                window[Symbol.for('radix-ui')] = true;
-            }, []); // DEPRECATED
-            return /*#__PURE__*/ $iMixA$react.createElement(Comp, ($parcel$interopDefault($iMixA$babelruntimehelpersextends))({}, primitiveProps, {
-                ref: forwardedRef
-            }));
-        })
-    })
-, {});
+        [node]: Node
+    };
+}, {});
 /* -----------------------------------------------------------------------------------------------*/ 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
+ *
+ * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350
+ *
+ * `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’))}
+ *
+ * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's  not recommended to use
+ * this utility with them. This is because it's possible for those handlers to be called implicitly during render
+ * e.g. when focus is within a component as it is unmounted, or when managing focus on mount.
+ */ function $c3def6332c2749a6$export$6d1a0317bde7de7f(target, event) {
+    if (target) $iMixA$reactdom.flushSync(()=>target.dispatchEvent(event)
+    );
+}
+/* -----------------------------------------------------------------------------------------------*/ const $c3def6332c2749a6$export$be92b6f5f03c0fe9 = $c3def6332c2749a6$export$250ffa63cdc0d034;
 
 
 $parcel$exportWildcard(module.exports, $c3def6332c2749a6$exports);

package/dist/index.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;A;;;ACGA,MAAME,2BAAK,GAAG;IACZ,GADY;IAEZ,QAFY;IAGZ,KAHY;IAIZ,IAJY;IAKZ,IALY;IAMZ,KANY;IAOZ,IAPY;IAQZ,KARY;IASZ,IATY;IAUZ,GAVY;IAWZ,MAXY;IAYZ,KAZY;IAaZ,IAbY;CAAd,A,EAgBA,8CAhBA;AAiBA,gEAAA;AACA,kBAAA;AAcA;;oGAEA,CAEA,MAAMC,yCAAS,GAAGD,2BAAK,CAACE,MAAN,CAChB,CAACC,SAAD,EAAYC,IAAZ,GAAsB,CAAA;QACpB,GAAGD,SADiB;QAEpB,CAACC,IAAD,CAAA,EAAA,aAAQN,CAAAA,uBAAA,CAAiB,CAACQ,KAAD,EAA4CC,YAA5C,GAAkE;YACzF,MAAM,E,SAAEC,OAAF,CAAA,EAAW,GAAGC,cAAH,EAAX,GAAiCH,KAAvC,AAAM;YACN,MAAMI,IAAS,GAAGF,OAAO,GAAGT,4BAAH,GAAUK,IAAnC,AAAA;YAEAN,sBAAA,CAAgB,IAAM;gBACnBc,MAAD,CAAgBC,MAAM,CAACC,GAAP,CAAW,UAAX,CAAhB,CAAA,GAA0C,IAA1C,CAACF;aADH,EAEG,EAFH,CAAA,CAJyF,CAQzF,aAFC;YAOD,OAAA,aAAO,CAAA,0BAAA,CAAC,IAAD,EAAA,2DAAA,CAAA,EAAA,EAAUH,cAAV,EAAP;gBAAiC,GAAG,EAAEF,YAAL;aAA1B,CAAA,CAAP,CAAO;SAbD,CAcP;KAhBH,CAAA;AADgB,EAmBhB,EAnBgB,CAAlB,AACwB;AAqBxB,oGAAA,CAEA,MAAMc,8BAAQ,GAAI,CAAA,wKAAA,CAAlB,AAAA;AAEA,MAAMC,yCAAI,GAAGrB,yCAAb,AAAA;;ADjEA","sources":["packages/react/primitive/src/index.ts","packages/react/primitive/src/Primitive.tsx"],"sourcesContent":["export * from './Primitive';\n","import * as React from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nconst NODES = [\n  'a',\n  'button',\n  'div',\n  'h2',\n  'h3',\n  'img',\n  'li',\n  'nav',\n  'ol',\n  'p',\n  'span',\n  'svg',\n  'ul',\n] as const;\n\n// Temporary while we await merge of this fix:\n// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55396\n// prettier-ignore\ntype PropsWithoutRef<P> = P extends any ? ('ref' extends keyof P ? Pick<P, Exclude<keyof P, 'ref'>> : P) : P;\ntype ComponentPropsWithoutRef<T extends React.ElementType> = PropsWithoutRef<\n  React.ComponentProps<T>\n>;\n\ntype Primitives = { [E in typeof NODES[number]]: PrimitiveForwardRefComponent<E> };\ntype PrimitivePropsWithRef<E extends React.ElementType> = React.ComponentPropsWithRef<E> & {\n  asChild?: boolean;\n};\n\ninterface PrimitiveForwardRefComponent<E extends React.ElementType>\n  extends React.ForwardRefExoticComponent<PrimitivePropsWithRef<E>> {}\n\n/* -------------------------------------------------------------------------------------------------\n * Primitive\n * -----------------------------------------------------------------------------------------------*/\n\nconst Primitive = NODES.reduce(\n  (primitive, node) => ({\n    ...primitive,\n    [node]: React.forwardRef((props: PrimitivePropsWithRef<typeof node>, forwardedRef: any) => {\n      const { asChild, ...primitiveProps } = props;\n      const Comp: any = asChild ? Slot : node;\n\n      React.useEffect(() => {\n        (window as any)[Symbol.for('radix-ui')] = true;\n      }, []);\n\n      // DEPRECATED\n      if (process.env.NODE_ENV === 'development' && (props as any).as) {\n        console.warn(AS_ERROR);\n      }\n\n      return <Comp {...primitiveProps} ref={forwardedRef} />;\n    }),\n  }),\n  {} as Primitives\n);\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst 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`;\n\nconst Root = Primitive;\n\nexport {\n  Primitive,\n  //\n  Root,\n};\nexport type { ComponentPropsWithoutRef, PrimitivePropsWithRef };\n"],"names":["React","Slot","NODES","Primitive","reduce","primitive","node","forwardRef","props","forwardedRef","asChild","primitiveProps","Comp","useEffect","window","Symbol","for","process","env","NODE_ENV","as","console","warn","AS_ERROR","Root"],"version":3,"file":"index.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;A;;;;ACIA,MAAMG,2BAAK,GAAG;IACZ,GADY;IAEZ,QAFY;IAGZ,KAHY;IAIZ,IAJY;IAKZ,IALY;IAMZ,KANY;IAOZ,IAPY;IAQZ,KARY;IASZ,IATY;IAUZ,GAVY;IAWZ,MAXY;IAYZ,KAZY;IAaZ,IAbY;CAAd,A,EAgBA,8CAhBA;AAiBA,gEAAA;AACA,kBAAA;AAcA;;oGAEA,CAEA,MAAMC,yCAAS,GAAGD,2BAAK,CAACE,MAAN,CAAa,CAACC,SAAD,EAAYC,IAAZ,GAAqB;IAClD,MAAMC,IAAI,GAAA,aAAGR,CAAAA,uBAAA,CAAiB,CAACU,KAAD,EAA4CC,YAA5C,GAAkE;QAC9F,MAAM,E,SAAEC,OAAF,CAAA,EAAW,GAAGC,cAAH,EAAX,GAAiCH,KAAvC,AAAM;QACN,MAAMI,IAAS,GAAGF,OAAO,GAAGV,4BAAH,GAAUK,IAAnC,AAAA;QAEAP,sBAAA,CAAgB,IAAM;YACnBgB,MAAD,CAAgBC,MAAM,CAACC,GAAP,CAAW,UAAX,CAAhB,CAAA,GAA0C,IAA1C,CAACF;SADH,EAEG,EAFH,CAAA,CAJ8F,CAQ9F,aAFC;QAOD,OAAA,aAAO,CAAA,0BAAA,CAAC,IAAD,EAAA,2DAAA,CAAA,EAAA,EAAUH,cAAV,EAAP;YAAiC,GAAG,EAAEF,YAAL;SAA1B,CAAA,CAAP,CAAO;KAbI,CAAb,AAcC;IAEDH,IAAI,CAACkB,WAAL,GAAoB,CAAA,UAAA,EAAYnB,IAAK,CAAA,CAArC,CAAAC;IAEA,OAAO;QAAE,GAAGF,SAAL;QAAgB,CAACC,IAAD,CAAA,EAAQC,IAAR;KAAvB,CAAO;CAnBS,EAoBf,EApBe,CAAlB,AAoBC;AAED,oGAAA,CAEA,MAAMiB,8BAAQ,GAAI,CAAA,wKAAA,CAAlB,AAAA;AAEA;;oGAEA,CAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCA,CAEA,SAASE,yCAAT,CAA4DC,MAA5D,EAAiFC,KAAjF,EAA2F;IACzF,IAAID,MAAJ,EAAY3B,yBAAA,CAAmB,IAAM2B,MAAM,CAACG,aAAP,CAAqBF,KAArB,CAAzB;IAAA,CAAZ,CAAA;CACD;AAED,oGAAA,CAEA,MAAMG,yCAAI,GAAG5B,yCAAb,AAAA;;ADjHA","sources":["packages/react/primitive/src/index.ts","packages/react/primitive/src/Primitive.tsx"],"sourcesContent":["export * from './Primitive';\n","import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { Slot } from '@radix-ui/react-slot';\n\nconst NODES = [\n  'a',\n  'button',\n  'div',\n  'h2',\n  'h3',\n  'img',\n  'li',\n  'nav',\n  'ol',\n  'p',\n  'span',\n  'svg',\n  'ul',\n] as const;\n\n// Temporary while we await merge of this fix:\n// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55396\n// prettier-ignore\ntype PropsWithoutRef<P> = P extends any ? ('ref' extends keyof P ? Pick<P, Exclude<keyof P, 'ref'>> : P) : P;\ntype ComponentPropsWithoutRef<T extends React.ElementType> = PropsWithoutRef<\n  React.ComponentProps<T>\n>;\n\ntype Primitives = { [E in typeof NODES[number]]: PrimitiveForwardRefComponent<E> };\ntype PrimitivePropsWithRef<E extends React.ElementType> = React.ComponentPropsWithRef<E> & {\n  asChild?: boolean;\n};\n\ninterface PrimitiveForwardRefComponent<E extends React.ElementType>\n  extends React.ForwardRefExoticComponent<PrimitivePropsWithRef<E>> {}\n\n/* -------------------------------------------------------------------------------------------------\n * Primitive\n * -----------------------------------------------------------------------------------------------*/\n\nconst Primitive = NODES.reduce((primitive, node) => {\n  const Node = React.forwardRef((props: PrimitivePropsWithRef<typeof node>, forwardedRef: any) => {\n    const { asChild, ...primitiveProps } = props;\n    const Comp: any = asChild ? Slot : node;\n\n    React.useEffect(() => {\n      (window as any)[Symbol.for('radix-ui')] = true;\n    }, []);\n\n    // DEPRECATED\n    if (process.env.NODE_ENV === 'development' && (props as any).as) {\n      console.warn(AS_ERROR);\n    }\n\n    return <Comp {...primitiveProps} ref={forwardedRef} />;\n  });\n\n  Node.displayName = `Primitive.${node}`;\n\n  return { ...primitive, [node]: Node };\n}, {} as Primitives);\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst 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`;\n\n/* -------------------------------------------------------------------------------------------------\n * Utils\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * Flush custom event dispatch\n * https://github.com/radix-ui/primitives/pull/1378\n *\n * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types.\n *\n * Internally, React prioritises events in the following order:\n *  - discrete\n *  - continuous\n *  - default\n *\n * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350\n *\n * `discrete` is an  important distinction as updates within these events are applied immediately.\n * React however, is not able to infer the priority of custom event types due to how they are detected internally.\n * Because of this, it's possible for updates from custom events to be unexpectedly batched when\n * dispatched by another `discrete` event.\n *\n * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch.\n * This utility should be used when dispatching a custom event from within another `discrete` event, this utility\n * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event.\n * For example:\n *\n * dispatching a known click 👎\n * target.dispatchEvent(new Event(‘click’))\n *\n * dispatching a custom type within a non-discrete event 👎\n * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(‘customType’))}\n *\n * dispatching a custom type within a `discrete` event 👍\n * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(‘customType’))}\n *\n * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's  not recommended to use\n * this utility with them. This is because it's possible for those handlers to be called implicitly during render\n * e.g. when focus is within a component as it is unmounted, or when managing focus on mount.\n */\n\nfunction dispatchDiscreteCustomEvent<E extends CustomEvent>(target: E['target'], event: E) {\n  if (target) ReactDOM.flushSync(() => target.dispatchEvent(event));\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = Primitive;\n\nexport {\n  Primitive,\n  //\n  Root,\n  //\n  dispatchDiscreteCustomEvent,\n};\nexport type { ComponentPropsWithoutRef, PrimitivePropsWithRef };\n"],"names":["React","ReactDOM","Slot","NODES","Primitive","reduce","primitive","node","Node","forwardRef","props","forwardedRef","asChild","primitiveProps","Comp","useEffect","window","Symbol","for","process","env","NODE_ENV","as","console","warn","AS_ERROR","displayName","dispatchDiscreteCustomEvent","target","event","flushSync","dispatchEvent","Root"],"version":3,"file":"index.js.map"}

package/dist/index.module.js

@@ -1,5 +1,6 @@
 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";
 
 function $parcel$export(e, n, v, s) {
@@ -8,10 +9,12 @@ function $parcel$export(e, n, v, s) {
 var $8927f6f2acc4f386$exports = {};
 
 $parcel$export($8927f6f2acc4f386$exports, "Primitive", () => $8927f6f2acc4f386$export$250ffa63cdc0d034);
+$parcel$export($8927f6f2acc4f386$exports, "dispatchDiscreteCustomEvent", () => $8927f6f2acc4f386$export$6d1a0317bde7de7f);
 $parcel$export($8927f6f2acc4f386$exports, "Root", () => $8927f6f2acc4f386$export$be92b6f5f03c0fe9);
 
 
 
+
 const $8927f6f2acc4f386$var$NODES = [
     'a',
     'button',
@@ -31,25 +34,69 @@ const $8927f6f2acc4f386$var$NODES = [
 // prettier-ignore
 /* -------------------------------------------------------------------------------------------------
  * Primitive
- * -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$250ffa63cdc0d034 = $8927f6f2acc4f386$var$NODES.reduce((primitive, node)=>({
+ * -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$250ffa63cdc0d034 = $8927f6f2acc4f386$var$NODES.reduce((primitive, node)=>{
+    const Node = /*#__PURE__*/ $4q5Fq$forwardRef((props, forwardedRef)=>{
+        const { asChild: asChild , ...primitiveProps } = props;
+        const Comp = asChild ? $4q5Fq$Slot : node;
+        $4q5Fq$useEffect(()=>{
+            window[Symbol.for('radix-ui')] = true;
+        }, []); // DEPRECATED
+        return /*#__PURE__*/ $4q5Fq$createElement(Comp, $4q5Fq$babelruntimehelpersesmextends({}, primitiveProps, {
+            ref: forwardedRef
+        }));
+    });
+    Node.displayName = `Primitive.${node}`;
+    return {
         ...primitive,
-        [node]: /*#__PURE__*/ $4q5Fq$forwardRef((props, forwardedRef)=>{
-            const { asChild: asChild , ...primitiveProps } = props;
-            const Comp = asChild ? $4q5Fq$Slot : node;
-            $4q5Fq$useEffect(()=>{
-                window[Symbol.for('radix-ui')] = true;
-            }, []); // DEPRECATED
-            return /*#__PURE__*/ $4q5Fq$createElement(Comp, $4q5Fq$babelruntimehelpersesmextends({}, primitiveProps, {
-                ref: forwardedRef
-            }));
-        })
-    })
-, {});
+        [node]: Node
+    };
+}, {});
 /* -----------------------------------------------------------------------------------------------*/ 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
+ *
+ * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350
+ *
+ * `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’))}
+ *
+ * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's  not recommended to use
+ * this utility with them. This is because it's possible for those handlers to be called implicitly during render
+ * e.g. when focus is within a component as it is unmounted, or when managing focus on mount.
+ */ function $8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event) {
+    if (target) $4q5Fq$flushSync(()=>target.dispatchEvent(event)
+    );
+}
+/* -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$be92b6f5f03c0fe9 = $8927f6f2acc4f386$export$250ffa63cdc0d034;
 
 
 
 
-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/dist/index.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;A;;;ACGA,MAAME,2BAAK,GAAG;IACZ,GADY;IAEZ,QAFY;IAGZ,KAHY;IAIZ,IAJY;IAKZ,IALY;IAMZ,KANY;IAOZ,IAPY;IAQZ,KARY;IASZ,IATY;IAUZ,GAVY;IAWZ,MAXY;IAYZ,KAZY;IAaZ,IAbY;CAAd,A,EAgBA,8CAhBA;AAiBA,gEAAA;AACA,kBAAA;AAcA;;oGAEA,CAEA,MAAMC,yCAAS,GAAGD,2BAAK,CAACE,MAAN,CAChB,CAACC,SAAD,EAAYC,IAAZ,GAAsB,CAAA;QACpB,GAAGD,SADiB;QAEpB,CAACC,IAAD,CAAA,EAAA,aAAQN,CAAAA,iBAAA,CAAiB,CAACQ,KAAD,EAA4CC,YAA5C,GAAkE;YACzF,MAAM,E,SAAEC,OAAF,CAAA,EAAW,GAAGC,cAAH,EAAX,GAAiCH,KAAvC,AAAM;YACN,MAAMI,IAAS,GAAGF,OAAO,GAAGT,WAAH,GAAUK,IAAnC,AAAA;YAEAN,gBAAA,CAAgB,IAAM;gBACnBc,MAAD,CAAgBC,MAAM,CAACC,GAAP,CAAW,UAAX,CAAhB,CAAA,GAA0C,IAA1C,CAACF;aADH,EAEG,EAFH,CAAA,CAJyF,CAQzF,aAFC;YAOD,OAAA,aAAO,CAAA,oBAAA,CAAC,IAAD,EAAA,oCAAA,CAAA,EAAA,EAAUH,cAAV,EAAP;gBAAiC,GAAG,EAAEF,YAAL;aAA1B,CAAA,CAAP,CAAO;SAbD,CAcP;KAhBH,CAAA;AADgB,EAmBhB,EAnBgB,CAAlB,AACwB;AAqBxB,oGAAA,CAEA,MAAMc,8BAAQ,GAAI,CAAA,wKAAA,CAAlB,AAAA;AAEA,MAAMC,yCAAI,GAAGrB,yCAAb,AAAA;;ADjEA","sources":["packages/react/primitive/src/index.ts","packages/react/primitive/src/Primitive.tsx"],"sourcesContent":["export * from './Primitive';\n","import * as React from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nconst NODES = [\n  'a',\n  'button',\n  'div',\n  'h2',\n  'h3',\n  'img',\n  'li',\n  'nav',\n  'ol',\n  'p',\n  'span',\n  'svg',\n  'ul',\n] as const;\n\n// Temporary while we await merge of this fix:\n// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55396\n// prettier-ignore\ntype PropsWithoutRef<P> = P extends any ? ('ref' extends keyof P ? Pick<P, Exclude<keyof P, 'ref'>> : P) : P;\ntype ComponentPropsWithoutRef<T extends React.ElementType> = PropsWithoutRef<\n  React.ComponentProps<T>\n>;\n\ntype Primitives = { [E in typeof NODES[number]]: PrimitiveForwardRefComponent<E> };\ntype PrimitivePropsWithRef<E extends React.ElementType> = React.ComponentPropsWithRef<E> & {\n  asChild?: boolean;\n};\n\ninterface PrimitiveForwardRefComponent<E extends React.ElementType>\n  extends React.ForwardRefExoticComponent<PrimitivePropsWithRef<E>> {}\n\n/* -------------------------------------------------------------------------------------------------\n * Primitive\n * -----------------------------------------------------------------------------------------------*/\n\nconst Primitive = NODES.reduce(\n  (primitive, node) => ({\n    ...primitive,\n    [node]: React.forwardRef((props: PrimitivePropsWithRef<typeof node>, forwardedRef: any) => {\n      const { asChild, ...primitiveProps } = props;\n      const Comp: any = asChild ? Slot : node;\n\n      React.useEffect(() => {\n        (window as any)[Symbol.for('radix-ui')] = true;\n      }, []);\n\n      // DEPRECATED\n      if (process.env.NODE_ENV === 'development' && (props as any).as) {\n        console.warn(AS_ERROR);\n      }\n\n      return <Comp {...primitiveProps} ref={forwardedRef} />;\n    }),\n  }),\n  {} as Primitives\n);\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst 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`;\n\nconst Root = Primitive;\n\nexport {\n  Primitive,\n  //\n  Root,\n};\nexport type { ComponentPropsWithoutRef, PrimitivePropsWithRef };\n"],"names":["React","Slot","NODES","Primitive","reduce","primitive","node","forwardRef","props","forwardedRef","asChild","primitiveProps","Comp","useEffect","window","Symbol","for","process","env","NODE_ENV","as","console","warn","AS_ERROR","Root"],"version":3,"file":"index.module.js.map"}
+{"mappings":";;;;;;;;;;;;;A;;;;ACIA,MAAMG,2BAAK,GAAG;IACZ,GADY;IAEZ,QAFY;IAGZ,KAHY;IAIZ,IAJY;IAKZ,IALY;IAMZ,KANY;IAOZ,IAPY;IAQZ,KARY;IASZ,IATY;IAUZ,GAVY;IAWZ,MAXY;IAYZ,KAZY;IAaZ,IAbY;CAAd,A,EAgBA,8CAhBA;AAiBA,gEAAA;AACA,kBAAA;AAcA;;oGAEA,CAEA,MAAMC,yCAAS,GAAGD,2BAAK,CAACE,MAAN,CAAa,CAACC,SAAD,EAAYC,IAAZ,GAAqB;IAClD,MAAMC,IAAI,GAAA,aAAGR,CAAAA,iBAAA,CAAiB,CAACU,KAAD,EAA4CC,YAA5C,GAAkE;QAC9F,MAAM,E,SAAEC,OAAF,CAAA,EAAW,GAAGC,cAAH,EAAX,GAAiCH,KAAvC,AAAM;QACN,MAAMI,IAAS,GAAGF,OAAO,GAAGV,WAAH,GAAUK,IAAnC,AAAA;QAEAP,gBAAA,CAAgB,IAAM;YACnBgB,MAAD,CAAgBC,MAAM,CAACC,GAAP,CAAW,UAAX,CAAhB,CAAA,GAA0C,IAA1C,CAACF;SADH,EAEG,EAFH,CAAA,CAJ8F,CAQ9F,aAFC;QAOD,OAAA,aAAO,CAAA,oBAAA,CAAC,IAAD,EAAA,oCAAA,CAAA,EAAA,EAAUH,cAAV,EAAP;YAAiC,GAAG,EAAEF,YAAL;SAA1B,CAAA,CAAP,CAAO;KAbI,CAAb,AAcC;IAEDH,IAAI,CAACkB,WAAL,GAAoB,CAAA,UAAA,EAAYnB,IAAK,CAAA,CAArC,CAAAC;IAEA,OAAO;QAAE,GAAGF,SAAL;QAAgB,CAACC,IAAD,CAAA,EAAQC,IAAR;KAAvB,CAAO;CAnBS,EAoBf,EApBe,CAAlB,AAoBC;AAED,oGAAA,CAEA,MAAMiB,8BAAQ,GAAI,CAAA,wKAAA,CAAlB,AAAA;AAEA;;oGAEA,CAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCA,CAEA,SAASE,yCAAT,CAA4DC,MAA5D,EAAiFC,KAAjF,EAA2F;IACzF,IAAID,MAAJ,EAAY3B,gBAAA,CAAmB,IAAM2B,MAAM,CAACG,aAAP,CAAqBF,KAArB,CAAzB;IAAA,CAAZ,CAAA;CACD;AAED,oGAAA,CAEA,MAAMG,yCAAI,GAAG5B,yCAAb,AAAA;;ADjHA","sources":["packages/react/primitive/src/index.ts","packages/react/primitive/src/Primitive.tsx"],"sourcesContent":["export * from './Primitive';\n","import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { Slot } from '@radix-ui/react-slot';\n\nconst NODES = [\n  'a',\n  'button',\n  'div',\n  'h2',\n  'h3',\n  'img',\n  'li',\n  'nav',\n  'ol',\n  'p',\n  'span',\n  'svg',\n  'ul',\n] as const;\n\n// Temporary while we await merge of this fix:\n// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55396\n// prettier-ignore\ntype PropsWithoutRef<P> = P extends any ? ('ref' extends keyof P ? Pick<P, Exclude<keyof P, 'ref'>> : P) : P;\ntype ComponentPropsWithoutRef<T extends React.ElementType> = PropsWithoutRef<\n  React.ComponentProps<T>\n>;\n\ntype Primitives = { [E in typeof NODES[number]]: PrimitiveForwardRefComponent<E> };\ntype PrimitivePropsWithRef<E extends React.ElementType> = React.ComponentPropsWithRef<E> & {\n  asChild?: boolean;\n};\n\ninterface PrimitiveForwardRefComponent<E extends React.ElementType>\n  extends React.ForwardRefExoticComponent<PrimitivePropsWithRef<E>> {}\n\n/* -------------------------------------------------------------------------------------------------\n * Primitive\n * -----------------------------------------------------------------------------------------------*/\n\nconst Primitive = NODES.reduce((primitive, node) => {\n  const Node = React.forwardRef((props: PrimitivePropsWithRef<typeof node>, forwardedRef: any) => {\n    const { asChild, ...primitiveProps } = props;\n    const Comp: any = asChild ? Slot : node;\n\n    React.useEffect(() => {\n      (window as any)[Symbol.for('radix-ui')] = true;\n    }, []);\n\n    // DEPRECATED\n    if (process.env.NODE_ENV === 'development' && (props as any).as) {\n      console.warn(AS_ERROR);\n    }\n\n    return <Comp {...primitiveProps} ref={forwardedRef} />;\n  });\n\n  Node.displayName = `Primitive.${node}`;\n\n  return { ...primitive, [node]: Node };\n}, {} as Primitives);\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst 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`;\n\n/* -------------------------------------------------------------------------------------------------\n * Utils\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * Flush custom event dispatch\n * https://github.com/radix-ui/primitives/pull/1378\n *\n * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types.\n *\n * Internally, React prioritises events in the following order:\n *  - discrete\n *  - continuous\n *  - default\n *\n * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350\n *\n * `discrete` is an  important distinction as updates within these events are applied immediately.\n * React however, is not able to infer the priority of custom event types due to how they are detected internally.\n * Because of this, it's possible for updates from custom events to be unexpectedly batched when\n * dispatched by another `discrete` event.\n *\n * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch.\n * This utility should be used when dispatching a custom event from within another `discrete` event, this utility\n * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event.\n * For example:\n *\n * dispatching a known click 👎\n * target.dispatchEvent(new Event(‘click’))\n *\n * dispatching a custom type within a non-discrete event 👎\n * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(‘customType’))}\n *\n * dispatching a custom type within a `discrete` event 👍\n * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(‘customType’))}\n *\n * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's  not recommended to use\n * this utility with them. This is because it's possible for those handlers to be called implicitly during render\n * e.g. when focus is within a component as it is unmounted, or when managing focus on mount.\n */\n\nfunction dispatchDiscreteCustomEvent<E extends CustomEvent>(target: E['target'], event: E) {\n  if (target) ReactDOM.flushSync(() => target.dispatchEvent(event));\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = Primitive;\n\nexport {\n  Primitive,\n  //\n  Root,\n  //\n  dispatchDiscreteCustomEvent,\n};\nexport type { ComponentPropsWithoutRef, PrimitivePropsWithRef };\n"],"names":["React","ReactDOM","Slot","NODES","Primitive","reduce","primitive","node","Node","forwardRef","props","forwardedRef","asChild","primitiveProps","Comp","useEffect","window","Symbol","for","process","env","NODE_ENV","as","console","warn","AS_ERROR","displayName","dispatchDiscreteCustomEvent","target","event","flushSync","dispatchEvent","Root"],"version":3,"file":"index.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radix-ui/react-primitive",
-  "version": "0.1.5-rc.3",
+  "version": "0.1.5-rc.32",
   "license": "MIT",
   "source": "src/index.ts",
   "main": "dist/index.js",
@@ -17,13 +17,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@radix-ui/react-slot": "0.1.3-rc.3"
+    "@radix-ui/react-slot": "0.1.3-rc.32"
   },
   "devDependencies": {
     "@testing-library/react": "^10.4.8"
   },
   "peerDependencies": {
-    "react": "^16.8 || ^17.0 || ^18.0"
+    "react": "^16.8 || ^17.0 || ^18.0",
+    "react-dom": "^16.8 || ^17.0 || ^18.0"
   },
   "homepage": "https://radix-ui.com/primitives",
   "repository": {