@huin-core/react-primitive 1.0.2 → 1.0.3

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,52 @@
1
+ import * as React from 'react';
2
+
3
+ declare const NODES: readonly ["a", "button", "div", "form", "h2", "h3", "img", "input", "textarea", "label", "li", "nav", "ol", "p", "span", "svg", "ul"];
4
+ type Primitives = {
5
+ [E in (typeof NODES)[number]]: PrimitiveForwardRefComponent<E>;
6
+ };
7
+ type PrimitivePropsWithRef<E extends React.ElementType> = React.ComponentPropsWithRef<E> & {
8
+ asChild?: boolean;
9
+ };
10
+ interface PrimitiveForwardRefComponent<E extends React.ElementType> extends React.ForwardRefExoticComponent<PrimitivePropsWithRef<E>> {
11
+ }
12
+ declare const Primitive: Primitives;
13
+ /**
14
+ * Flush custom event dispatch
15
+ * https://github.com/firatorhan/huin-core/pull/1378
16
+ *
17
+ * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types.
18
+ *
19
+ * Internally, React prioritises events in the following order:
20
+ * - discrete
21
+ * - continuous
22
+ * - default
23
+ *
24
+ * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350
25
+ *
26
+ * `discrete` is an important distinction as updates within these events are applied immediately.
27
+ * React however, is not able to infer the priority of custom event types due to how they are detected internally.
28
+ * Because of this, it's possible for updates from custom events to be unexpectedly batched when
29
+ * dispatched by another `discrete` event.
30
+ *
31
+ * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch.
32
+ * This utility should be used when dispatching a custom event from within another `discrete` event, this utility
33
+ * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event.
34
+ * For example:
35
+ *
36
+ * dispatching a known click 👎
37
+ * target.dispatchEvent(new Event(‘click’))
38
+ *
39
+ * dispatching a custom type within a non-discrete event 👎
40
+ * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(‘customType’))}
41
+ *
42
+ * dispatching a custom type within a `discrete` event 👍
43
+ * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(‘customType’))}
44
+ *
45
+ * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's not recommended to use
46
+ * this utility with them. This is because it's possible for those handlers to be called implicitly during render
47
+ * e.g. when focus is within a component as it is unmounted, or when managing focus on mount.
48
+ */
49
+ declare function dispatchDiscreteCustomEvent<E extends CustomEvent>(target: E['target'], event: E): void;
50
+ declare const Root: Primitives;
51
+
52
+ export { Primitive, type PrimitivePropsWithRef, Root, dispatchDiscreteCustomEvent };
@@ -0,0 +1,52 @@
1
+ import * as React from 'react';
2
+
3
+ declare const NODES: readonly ["a", "button", "div", "form", "h2", "h3", "img", "input", "textarea", "label", "li", "nav", "ol", "p", "span", "svg", "ul"];
4
+ type Primitives = {
5
+ [E in (typeof NODES)[number]]: PrimitiveForwardRefComponent<E>;
6
+ };
7
+ type PrimitivePropsWithRef<E extends React.ElementType> = React.ComponentPropsWithRef<E> & {
8
+ asChild?: boolean;
9
+ };
10
+ interface PrimitiveForwardRefComponent<E extends React.ElementType> extends React.ForwardRefExoticComponent<PrimitivePropsWithRef<E>> {
11
+ }
12
+ declare const Primitive: Primitives;
13
+ /**
14
+ * Flush custom event dispatch
15
+ * https://github.com/firatorhan/huin-core/pull/1378
16
+ *
17
+ * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types.
18
+ *
19
+ * Internally, React prioritises events in the following order:
20
+ * - discrete
21
+ * - continuous
22
+ * - default
23
+ *
24
+ * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350
25
+ *
26
+ * `discrete` is an important distinction as updates within these events are applied immediately.
27
+ * React however, is not able to infer the priority of custom event types due to how they are detected internally.
28
+ * Because of this, it's possible for updates from custom events to be unexpectedly batched when
29
+ * dispatched by another `discrete` event.
30
+ *
31
+ * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch.
32
+ * This utility should be used when dispatching a custom event from within another `discrete` event, this utility
33
+ * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event.
34
+ * For example:
35
+ *
36
+ * dispatching a known click 👎
37
+ * target.dispatchEvent(new Event(‘click’))
38
+ *
39
+ * dispatching a custom type within a non-discrete event 👎
40
+ * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(‘customType’))}
41
+ *
42
+ * dispatching a custom type within a `discrete` event 👍
43
+ * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(‘customType’))}
44
+ *
45
+ * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's not recommended to use
46
+ * this utility with them. This is because it's possible for those handlers to be called implicitly during render
47
+ * e.g. when focus is within a component as it is unmounted, or when managing focus on mount.
48
+ */
49
+ declare function dispatchDiscreteCustomEvent<E extends CustomEvent>(target: E['target'], event: E): void;
50
+ declare const Root: Primitives;
51
+
52
+ export { Primitive, type PrimitivePropsWithRef, Root, dispatchDiscreteCustomEvent };
package/dist/index.js ADDED
@@ -0,0 +1,79 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+
30
+ // packages/react/primitive/src/index.ts
31
+ var src_exports = {};
32
+ __export(src_exports, {
33
+ Primitive: () => Primitive,
34
+ Root: () => Root,
35
+ dispatchDiscreteCustomEvent: () => dispatchDiscreteCustomEvent
36
+ });
37
+ module.exports = __toCommonJS(src_exports);
38
+
39
+ // packages/react/primitive/src/Primitive.tsx
40
+ var React = __toESM(require("react"));
41
+ var ReactDOM = __toESM(require("react-dom"));
42
+ var import_react_slot = require("@huin-core/react-slot");
43
+ var import_jsx_runtime = require("react/jsx-runtime");
44
+ var NODES = [
45
+ "a",
46
+ "button",
47
+ "div",
48
+ "form",
49
+ "h2",
50
+ "h3",
51
+ "img",
52
+ "input",
53
+ "textarea",
54
+ "label",
55
+ "li",
56
+ "nav",
57
+ "ol",
58
+ "p",
59
+ "span",
60
+ "svg",
61
+ "ul"
62
+ ];
63
+ var Primitive = NODES.reduce((primitive, node) => {
64
+ const Node = React.forwardRef((props, forwardedRef) => {
65
+ const { asChild, ...primitiveProps } = props;
66
+ const Comp = asChild ? import_react_slot.Slot : node;
67
+ if (typeof window !== "undefined") {
68
+ window[Symbol.for("huin-core")] = true;
69
+ }
70
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
71
+ });
72
+ Node.displayName = `Primitive.${node}`;
73
+ return { ...primitive, [node]: Node };
74
+ }, {});
75
+ function dispatchDiscreteCustomEvent(target, event) {
76
+ if (target) ReactDOM.flushSync(() => target.dispatchEvent(event));
77
+ }
78
+ var Root = Primitive;
79
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../src/index.ts", "../src/Primitive.tsx"],
4
+ "sourcesContent": ["export {\n Primitive,\n //\n Root,\n //\n dispatchDiscreteCustomEvent,\n} from './Primitive';\nexport type { PrimitivePropsWithRef } from './Primitive';\n", "import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { Slot } from '@huin-core/react-slot';\n\nconst NODES = [\n 'a',\n 'button',\n 'div',\n 'form',\n 'h2',\n 'h3',\n 'img',\n 'input',\n 'textarea',\n 'label',\n 'li',\n 'nav',\n 'ol',\n 'p',\n 'span',\n 'svg',\n 'ul',\n] as const;\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 if (typeof window !== 'undefined') {\n (window as any)[Symbol.for('huin-core')] = true;\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 * Utils\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * Flush custom event dispatch\n * https://github.com/firatorhan/huin-core/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 \uD83D\uDC4E\n * target.dispatchEvent(new Event(\u2018click\u2019))\n *\n * dispatching a custom type within a non-discrete event \uD83D\uDC4E\n * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(\u2018customType\u2019))}\n *\n * dispatching a custom type within a `discrete` event \uD83D\uDC4D\n * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(\u2018customType\u2019))}\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 { PrimitivePropsWithRef };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,eAA0B;AAC1B,wBAAqB;AA2CV;AAzCX,IAAM,QAAQ;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAcA,IAAM,YAAY,MAAM,OAAO,CAAC,WAAW,SAAS;AAClD,QAAM,OAAa,iBAAW,CAAC,OAA2C,iBAAsB;AAC9F,UAAM,EAAE,SAAS,GAAG,eAAe,IAAI;AACvC,UAAM,OAAY,UAAU,yBAAO;AAEnC,QAAI,OAAO,WAAW,aAAa;AACjC,MAAC,OAAe,OAAO,IAAI,WAAW,CAAC,IAAI;AAAA,IAC7C;AAEA,WAAO,4CAAC,QAAM,GAAG,gBAAgB,KAAK,cAAc;AAAA,EACtD,CAAC;AAED,OAAK,cAAc,aAAa,IAAI;AAEpC,SAAO,EAAE,GAAG,WAAW,CAAC,IAAI,GAAG,KAAK;AACtC,GAAG,CAAC,CAAe;AA2CnB,SAAS,4BAAmD,QAAqB,OAAU;AACzF,MAAI,OAAQ,CAAS,mBAAU,MAAM,OAAO,cAAc,KAAK,CAAC;AAClE;AAIA,IAAM,OAAO;",
6
+ "names": []
7
+ }
package/dist/index.mjs ADDED
@@ -0,0 +1,46 @@
1
+ // packages/react/primitive/src/Primitive.tsx
2
+ import * as React from "react";
3
+ import * as ReactDOM from "react-dom";
4
+ import { Slot } from "@huin-core/react-slot";
5
+ import { jsx } from "react/jsx-runtime";
6
+ var NODES = [
7
+ "a",
8
+ "button",
9
+ "div",
10
+ "form",
11
+ "h2",
12
+ "h3",
13
+ "img",
14
+ "input",
15
+ "textarea",
16
+ "label",
17
+ "li",
18
+ "nav",
19
+ "ol",
20
+ "p",
21
+ "span",
22
+ "svg",
23
+ "ul"
24
+ ];
25
+ var Primitive = NODES.reduce((primitive, node) => {
26
+ const Node = React.forwardRef((props, forwardedRef) => {
27
+ const { asChild, ...primitiveProps } = props;
28
+ const Comp = asChild ? Slot : node;
29
+ if (typeof window !== "undefined") {
30
+ window[Symbol.for("huin-core")] = true;
31
+ }
32
+ return /* @__PURE__ */ jsx(Comp, { ...primitiveProps, ref: forwardedRef });
33
+ });
34
+ Node.displayName = `Primitive.${node}`;
35
+ return { ...primitive, [node]: Node };
36
+ }, {});
37
+ function dispatchDiscreteCustomEvent(target, event) {
38
+ if (target) ReactDOM.flushSync(() => target.dispatchEvent(event));
39
+ }
40
+ var Root = Primitive;
41
+ export {
42
+ Primitive,
43
+ Root,
44
+ dispatchDiscreteCustomEvent
45
+ };
46
+ //# sourceMappingURL=index.mjs.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../src/Primitive.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { Slot } from '@huin-core/react-slot';\n\nconst NODES = [\n 'a',\n 'button',\n 'div',\n 'form',\n 'h2',\n 'h3',\n 'img',\n 'input',\n 'textarea',\n 'label',\n 'li',\n 'nav',\n 'ol',\n 'p',\n 'span',\n 'svg',\n 'ul',\n] as const;\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 if (typeof window !== 'undefined') {\n (window as any)[Symbol.for('huin-core')] = true;\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 * Utils\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * Flush custom event dispatch\n * https://github.com/firatorhan/huin-core/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 \uD83D\uDC4E\n * target.dispatchEvent(new Event(\u2018click\u2019))\n *\n * dispatching a custom type within a non-discrete event \uD83D\uDC4E\n * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(\u2018customType\u2019))}\n *\n * dispatching a custom type within a `discrete` event \uD83D\uDC4D\n * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(\u2018customType\u2019))}\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 { PrimitivePropsWithRef };\n"],
5
+ "mappings": ";AAAA,YAAY,WAAW;AACvB,YAAY,cAAc;AAC1B,SAAS,YAAY;AA2CV;AAzCX,IAAM,QAAQ;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAcA,IAAM,YAAY,MAAM,OAAO,CAAC,WAAW,SAAS;AAClD,QAAM,OAAa,iBAAW,CAAC,OAA2C,iBAAsB;AAC9F,UAAM,EAAE,SAAS,GAAG,eAAe,IAAI;AACvC,UAAM,OAAY,UAAU,OAAO;AAEnC,QAAI,OAAO,WAAW,aAAa;AACjC,MAAC,OAAe,OAAO,IAAI,WAAW,CAAC,IAAI;AAAA,IAC7C;AAEA,WAAO,oBAAC,QAAM,GAAG,gBAAgB,KAAK,cAAc;AAAA,EACtD,CAAC;AAED,OAAK,cAAc,aAAa,IAAI;AAEpC,SAAO,EAAE,GAAG,WAAW,CAAC,IAAI,GAAG,KAAK;AACtC,GAAG,CAAC,CAAe;AA2CnB,SAAS,4BAAmD,QAAqB,OAAU;AACzF,MAAI,OAAQ,CAAS,mBAAU,MAAM,OAAO,cAAc,KAAK,CAAC;AAClE;AAIA,IAAM,OAAO;",
6
+ "names": []
7
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@huin-core/react-primitive",
3
- "version": "1.0.2",
3
+ "version": "1.0.3",
4
4
  "license": "MIT",
5
5
  "exports": {
6
6
  ".": {