@brytdesigns/web-component-dialog 3.3.2 → 3.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { createGuardedEffect, createRemoteContext, getContextFromProvider, toHyphenated } from "@brytdesigns/web-component-core/utils";
|
|
1
|
+
import { consumeContext, createGuardedEffect, createRemoteContext, getContextFromProvider, toHyphenated } from "@brytdesigns/web-component-core/utils";
|
|
2
2
|
import { awaitAllAnimations } from "@brytdesigns/web-component-core/animation";
|
|
3
3
|
import { createSignal, merge, omit, untrack } from "solid-js";
|
|
4
4
|
import { abortablePromise } from "@brytdesigns/web-component-core/promise";
|
|
5
|
-
import {
|
|
5
|
+
import { createContext, provide } from "component-register";
|
|
6
6
|
//#region src/hooks/useDialog.ts
|
|
7
7
|
function initializeDialogContext(props) {
|
|
8
8
|
const stateProps = omit(props, "root");
|
|
@@ -79,7 +79,7 @@ var useDialogContext = (context) => {
|
|
|
79
79
|
}];
|
|
80
80
|
};
|
|
81
81
|
var useDialog = (element) => {
|
|
82
|
-
const context =
|
|
82
|
+
const context = consumeContext(DialogContextState, element);
|
|
83
83
|
if (!context) throw new Error("DialogContext not found! Please ensure to wrap your custom element with a dialog-context element.");
|
|
84
84
|
return useDialogContext(context);
|
|
85
85
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDialog.js","names":[],"sources":["../../../src/hooks/useDialog.ts"],"sourcesContent":["import { awaitAllAnimations } from \"@brytdesigns/web-component-core/animation\";\nimport { abortablePromise } from \"@brytdesigns/web-component-core/promise\";\nimport {\n\tcreateGuardedEffect,\n\tcreateRemoteContext,\n\tgetContextFromProvider,\n\ttoHyphenated,\n} from \"@brytdesigns/web-component-core/utils\";\nimport {\n\
|
|
1
|
+
{"version":3,"file":"useDialog.js","names":[],"sources":["../../../src/hooks/useDialog.ts"],"sourcesContent":["import { awaitAllAnimations } from \"@brytdesigns/web-component-core/animation\";\nimport { abortablePromise } from \"@brytdesigns/web-component-core/promise\";\nimport {\n\tconsumeContext,\n\tcreateGuardedEffect,\n\tcreateRemoteContext,\n\tgetContextFromProvider,\n\ttoHyphenated,\n} from \"@brytdesigns/web-component-core/utils\";\nimport {\n\tcreateContext,\n\ttype ICustomElement,\n\tprovide,\n} from \"component-register\";\nimport type { AnimationPlaybackControlsWithThen } from \"motion\";\nimport { createSignal, merge, omit, untrack } from \"solid-js\";\n\ntype StoreContext = {\n\tanimationQueue: AnimationPlaybackControlsWithThen[];\n};\n\ntype CreateContextOptions = {\n\troot: HTMLElement & ICustomElement;\n\tisOpen: boolean;\n\tisAnimating: boolean;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype DialogContext = ReturnType<typeof initializeDialogContext>;\n\nfunction initializeDialogContext(props: CreateContextOptions) {\n\t// `omit` returns only the rest; `root` is read straight off `props`.\n\tconst stateProps = omit(props, \"root\");\n\t/**\n\t * The animation queue is a SIGNAL, not a store.\n\t *\n\t * A store deep-proxies what you put in it, and what goes in here is a list of\n\t * live Motion playback controls. Proxied, every `.finished`, `.state` and\n\t * `.then` on them became a reactive read from a non-tracking scope — hundreds\n\t * of STRICT_READ_UNTRACKED reports under any interaction, and a proxy hop on\n\t * every property access of an object that is not state at all.\n\t *\n\t * Nothing here needs per-property reactivity: the queue is replaced wholesale\n\t * and read wholesale. A signal is the right primitive, and it hands the\n\t * controls back exactly as they went in.\n\t */\n\tconst [animationQueue, setAnimationQueue] = createSignal<\n\t\tAnimationPlaybackControlsWithThen[]\n\t>([]);\n\n\tcreateGuardedEffect(animationQueue, (queue) => {\n\t\tif (!queue.length) return;\n\t\tconst controller = new AbortController();\n\t\tconst animations = awaitAllAnimations(queue);\n\t\tconst abortableAnimations = abortablePromise(animations, controller.signal);\n\t\tsetElementState(\"isAnimating\", true);\n\t\tabortableAnimations.finally(() => {\n\t\t\t// No `batch` in v2 — writes stage and flush together by default.\n\t\t\tsetElementState(\"isAnimating\", false);\n\t\t\tsetAnimationQueue([]);\n\t\t});\n\n\t\t// v2 treats the apply phase's return value as the cleanup.\n\t\treturn () => {\n\t\t\tcontroller.abort(\"Aborting dialog animations\");\n\t\t};\n\t});\n\n\tfunction setElementState(\n\t\tkey: keyof Omit<CreateContextOptions, \"root\">,\n\t\tvalue: boolean | ((v: boolean) => boolean),\n\t) {\n\t\tconst currentValue = untrack(() => props[key]);\n\t\tif (typeof value === \"function\") {\n\t\t\tconst result = value(currentValue || false);\n\t\t\tif (`${currentValue}` === `${result}`) return;\n\t\t\tprops.root.setAttribute(toHyphenated(key), `${result}`);\n\t\t\treturn;\n\t\t}\n\t\tif (`${currentValue}` === `${value}`) return;\n\t\treturn props.root.setAttribute(toHyphenated(key), `${value}`);\n\t}\n\n\treturn [\n\t\tmerge(stateProps, {\n\t\t\tget animationQueue() {\n\t\t\t\treturn animationQueue();\n\t\t\t},\n\t\t}),\n\t\t{ setElementState, setAnimationQueue },\n\t] as const;\n}\n\nconst DialogContextState = createContext(initializeDialogContext);\n\nexport const provideDialogContext = (\n\tinitialState: Omit<CreateContextOptions, \"root\">,\n\telement: WalkableNode,\n): DialogContext => {\n\tconst props = merge(initialState, { root: element });\n\treturn provide(DialogContextState, props, element);\n};\n\nexport const useDialogContext = (context: DialogContext) => {\n\tconst [state, { setElementState, setAnimationQueue }] = context;\n\n\tfunction updateAnimationQueue(animation: AnimationPlaybackControlsWithThen) {\n\t\t// v2 store setters are draft-first, but this one REPLACES the array\n\t\t// rather than pushing into it. The effect above computes\n\t\t// `store.animationQueue` — the property, not its contents — so an\n\t\t// in-place `push` leaves that property pointing at the same array and\n\t\t// the effect never re-runs. Both `drawer` and `modal` shipped that way,\n\t\t// and never published `is-animating` at all as a result.\n\t\tsetAnimationQueue((queue) => [...queue, animation]);\n\t}\n\n\tfunction close() {\n\t\tsetElementState(\"isOpen\", false);\n\t}\n\n\tfunction open() {\n\t\tsetElementState(\"isOpen\", true);\n\t}\n\n\tfunction toggle() {\n\t\tsetElementState(\"isOpen\", (isOpen) => !isOpen);\n\t}\n\n\treturn [state, { updateAnimationQueue, close, open, toggle }] as const;\n};\n\nexport const useDialog = (element: HTMLElement & ICustomElement) => {\n\tconst context = consumeContext<DialogContext>(DialogContextState, element);\n\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t\"DialogContext not found! Please ensure to wrap your custom element with a dialog-context element.\",\n\t\t);\n\t}\n\n\treturn useDialogContext(context);\n};\n\nexport const useDialogAt =\n\tcreateRemoteContext<DialogContext>(DialogContextState);\n\nexport const getDialogContext = (element: Element) => {\n\tconst context = getContextFromProvider<DialogContext>(\n\t\tDialogContextState,\n\t\telement,\n\t);\n\treturn useDialogContext(context);\n};\n"],"mappings":";;;;;;AA+BA,SAAS,wBAAwB,OAA6B;CAE7D,MAAM,aAAa,KAAK,OAAO,MAAM;;;;;;;;;;;;;;CAcrC,MAAM,CAAC,gBAAgB,qBAAqB,aAE1C,CAAC,CAAC;CAEJ,oBAAoB,iBAAiB,UAAU;EAC9C,IAAI,CAAC,MAAM,QAAQ;EACnB,MAAM,aAAa,IAAI,gBAAgB;EACvC,MAAM,aAAa,mBAAmB,KAAK;EAC3C,MAAM,sBAAsB,iBAAiB,YAAY,WAAW,MAAM;EAC1E,gBAAgB,eAAe,IAAI;EACnC,oBAAoB,cAAc;GAEjC,gBAAgB,eAAe,KAAK;GACpC,kBAAkB,CAAC,CAAC;EACrB,CAAC;EAGD,aAAa;GACZ,WAAW,MAAM,4BAA4B;EAC9C;CACD,CAAC;CAED,SAAS,gBACR,KACA,OACC;EACD,MAAM,eAAe,cAAc,MAAM,IAAI;EAC7C,IAAI,OAAO,UAAU,YAAY;GAChC,MAAM,SAAS,MAAM,gBAAgB,KAAK;GAC1C,IAAI,GAAG,mBAAmB,GAAG,UAAU;GACvC,MAAM,KAAK,aAAa,aAAa,GAAG,GAAG,GAAG,QAAQ;GACtD;EACD;EACA,IAAI,GAAG,mBAAmB,GAAG,SAAS;EACtC,OAAO,MAAM,KAAK,aAAa,aAAa,GAAG,GAAG,GAAG,OAAO;CAC7D;CAEA,OAAO,CACN,MAAM,YAAY,EACjB,IAAI,iBAAiB;EACpB,OAAO,eAAe;CACvB,EACD,CAAC,GACD;EAAE;EAAiB;CAAkB,CACtC;AACD;AAEA,IAAM,qBAAqB,cAAc,uBAAuB;AAEhE,IAAa,wBACZ,cACA,YACmB;CACnB,MAAM,QAAQ,MAAM,cAAc,EAAE,MAAM,QAAQ,CAAC;CACnD,OAAO,QAAQ,oBAAoB,OAAO,OAAO;AAClD;AAEA,IAAa,oBAAoB,YAA2B;CAC3D,MAAM,CAAC,OAAO,EAAE,iBAAiB,uBAAuB;CAExD,SAAS,qBAAqB,WAA8C;EAO3E,mBAAmB,UAAU,CAAC,GAAG,OAAO,SAAS,CAAC;CACnD;CAEA,SAAS,QAAQ;EAChB,gBAAgB,UAAU,KAAK;CAChC;CAEA,SAAS,OAAO;EACf,gBAAgB,UAAU,IAAI;CAC/B;CAEA,SAAS,SAAS;EACjB,gBAAgB,WAAW,WAAW,CAAC,MAAM;CAC9C;CAEA,OAAO,CAAC,OAAO;EAAE;EAAsB;EAAO;EAAM;CAAO,CAAC;AAC7D;AAEA,IAAa,aAAa,YAA0C;CACnE,MAAM,UAAU,eAA8B,oBAAoB,OAAO;CAEzE,IAAI,CAAC,SACJ,MAAM,IAAI,MACT,mGACD;CAGD,OAAO,iBAAiB,OAAO;AAChC;AAEA,IAAa,cACZ,oBAAmC,kBAAkB;AAEtD,IAAa,oBAAoB,YAAqB;CAKrD,OAAO,iBAJS,uBACf,oBACA,OAEuB,CAAO;AAChC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brytdesigns/web-component-dialog",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.4.0",
|
|
4
4
|
"description": "Headless dialog web component — drawers and modals in one element",
|
|
5
5
|
"main": "./dist/main/index.js",
|
|
6
6
|
"module": "./dist/main/index.js",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"license": "ISC",
|
|
21
21
|
"peer-dependencies": {},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@brytdesigns/web-component-core": "3.
|
|
23
|
+
"@brytdesigns/web-component-core": "3.4.0",
|
|
24
24
|
"body-scroll-lock-upgrade": "^1.1.0",
|
|
25
25
|
"component-register": "0.8.7",
|
|
26
26
|
"motion": "^12.43.0",
|