@brytdesigns/web-component-drawer 1.0.26 → 1.0.27

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.
package/dist/esm/index.js CHANGED
@@ -202,69 +202,73 @@ var Component2 = (props, { element }) => {
202
202
  `${Name2}: action prop must be 'close', 'open', or 'toggle'`
203
203
  );
204
204
  if (!on5) return console.warn(`${Name2}: on prop is required!`);
205
- const target = document.querySelector(targetProp);
206
- if (!target)
207
- return console.warn(`${Name2}: target element not found!`, {
208
- element,
209
- target: targetProp
210
- });
211
- const controller = new AbortController();
212
- invokeOnLoaded(
213
- () => {
214
- createRoot((dispose) => {
215
- const [state, { open, close, toggle }] = getDrawerContext(target);
216
- switch (on5) {
217
- case "enter": {
218
- let unsubscribe = null;
219
- if (action === "toggle") {
220
- unsubscribe = observeElementInViewport(element, open, close);
205
+ try {
206
+ const target = document.querySelector(targetProp);
207
+ if (!target)
208
+ return console.warn(`${Name2}: target element not found!`, {
209
+ element,
210
+ target: targetProp
211
+ });
212
+ const controller = new AbortController();
213
+ invokeOnLoaded(
214
+ () => {
215
+ createRoot((dispose) => {
216
+ const [state, { open, close, toggle }] = getDrawerContext(target);
217
+ switch (on5) {
218
+ case "enter": {
219
+ let unsubscribe = null;
220
+ if (action === "toggle") {
221
+ unsubscribe = observeElementInViewport(element, open, close);
222
+ }
223
+ if (unsubscribe) onCleanup(unsubscribe);
224
+ break;
221
225
  }
222
- if (unsubscribe) onCleanup(unsubscribe);
223
- break;
224
- }
225
- case "exit": {
226
- let unsubscribe = null;
227
- if (action === "toggle") {
228
- unsubscribe = observeElementInViewport(element, close, open);
226
+ case "exit": {
227
+ let unsubscribe = null;
228
+ if (action === "toggle") {
229
+ unsubscribe = observeElementInViewport(element, close, open);
230
+ }
231
+ if (unsubscribe) onCleanup(unsubscribe);
232
+ break;
233
+ }
234
+ default: {
235
+ element.addEventListener(
236
+ on5,
237
+ (event) => {
238
+ if (preventDefault) event.preventDefault();
239
+ if (state.isAnimating) return;
240
+ switch (action) {
241
+ case "close":
242
+ close();
243
+ break;
244
+ case "open":
245
+ open();
246
+ break;
247
+ case "toggle":
248
+ toggle();
249
+ break;
250
+ }
251
+ },
252
+ { signal: controller.signal }
253
+ );
254
+ break;
229
255
  }
230
- if (unsubscribe) onCleanup(unsubscribe);
231
- break;
232
- }
233
- default: {
234
- element.addEventListener(
235
- on5,
236
- (event) => {
237
- if (preventDefault) event.preventDefault();
238
- if (state.isAnimating) return;
239
- switch (action) {
240
- case "close":
241
- close();
242
- break;
243
- case "open":
244
- open();
245
- break;
246
- case "toggle":
247
- toggle();
248
- break;
249
- }
250
- },
251
- { signal: controller.signal }
252
- );
253
- break;
254
256
  }
255
- }
256
- createEffect(() => {
257
- element.setAttribute("is-open", `${state.isOpen}`);
258
- element.setAttribute("is-animating", `${state.isAnimating}`);
257
+ createEffect(() => {
258
+ element.setAttribute("is-open", `${state.isOpen}`);
259
+ element.setAttribute("is-animating", `${state.isAnimating}`);
260
+ });
261
+ controller.signal.addEventListener("abort", dispose);
259
262
  });
260
- controller.signal.addEventListener("abort", dispose);
261
- });
262
- },
263
- { signal: controller.signal }
264
- );
265
- return onCleanup(() => {
266
- controller.abort();
267
- });
263
+ },
264
+ { signal: controller.signal }
265
+ );
266
+ return onCleanup(() => {
267
+ controller.abort();
268
+ });
269
+ } catch (error) {
270
+ console.error(error);
271
+ }
268
272
  });
269
273
  };
270
274
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/drawer-content.ts","../../src/hooks/useDrawer.ts","../../src/consts.ts","../../src/components/drawer-trigger.ts","../../src/components/drawer-backdrop.ts","../../src/components/drawer-context.ts","../../src/utils.ts","../../src/index.ts"],"names":["state","open","createEffect","on","onCleanup","element","Component","Name","onMount","getTransitionConfig","animate","splitProps","focusTrap"],"mappings":"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","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport { createEffect, on, onCleanup, onMount } from \"solid-js\";\nimport { animate } from \"motion\";\nimport { getTransitionConfig } from \"@brytdesigns/web-component-core/animation\";\n\nimport { useDrawer } from \"../hooks/index.js\";\nimport { POSITION, type Position } from \"../consts.js\";\n\ntype DrawerContentProps = {};\n\nexport const Name = `drawer-content`;\n\nexport const Component: CorrectComponentType<DrawerContentProps> = (\n _,\n { element },\n) => {\n const [state, { updateAnimationQueue }] = useDrawer(element);\n\n let isFirstRender = true;\n\n createEffect(\n on(\n () => state.isOpen,\n (isOpen) => {\n if (!isOpen || isFirstRender) return;\n const animation = enter(element);\n updateAnimationQueue(animation);\n return onCleanup(() => {\n if (animation.state !== \"finished\") animation.complete();\n });\n },\n ),\n );\n\n createEffect(\n on(\n () => state.isOpen,\n (isOpen) => {\n if (isOpen || isFirstRender) return;\n const animation = exit(element);\n updateAnimationQueue(animation);\n return onCleanup(() => {\n if (animation.state !== \"finished\") animation.complete();\n });\n },\n ),\n );\n\n onMount(() => {\n isFirstRender = false;\n });\n\n function enter(element: HTMLElement) {\n const style = window.getComputedStyle(element);\n const transition = getTransitionConfig(style);\n let position = style.getPropertyValue(\"--drawer--position\") as Position;\n if (!position) position = POSITION.LEFT;\n\n let transform: Record<string, string[]> = {\n x: [\"var(--drawer--slide-from)\", \"var(--drawer--slide-to)\"],\n };\n\n if (position === POSITION.TOP || position === POSITION.BOTTOM) {\n transform = {\n y: [\"var(--drawer--slide-from)\", \"var(--drawer--slide-to)\"],\n };\n }\n\n return animate(\n element,\n {\n ...transform,\n },\n transition,\n );\n }\n\n function exit(element: HTMLElement) {\n const style = window.getComputedStyle(element);\n const transition = getTransitionConfig(style);\n let position = style.getPropertyValue(\"--drawer--position\") as Position;\n if (!position) position = POSITION.LEFT;\n\n let transform: Record<string, string[]> = {\n x: [\"var(--drawer--slide-to)\", \"var(--drawer--slide-from)\"],\n };\n\n if (position === POSITION.TOP || position === POSITION.BOTTOM) {\n transform = {\n y: [\"var(--drawer--slide-to)\", \"var(--drawer--slide-from)\"],\n };\n }\n\n return animate(\n element,\n {\n ...transform,\n },\n transition,\n );\n }\n};\n","import {\n type ICustomElement,\n createContext,\n provide,\n consume,\n} from \"component-register\";\nimport {\n createEffect,\n on,\n batch,\n splitProps,\n untrack,\n mergeProps,\n onCleanup,\n} from \"solid-js\";\nimport { createStore } from \"solid-js/store\";\nimport {\n toHyphenated,\n getContextFromProvider,\n} from \"@brytdesigns/web-component-utils\";\n\nimport type { AnimationPlaybackControlsWithThen } from \"motion\";\nimport { abortablePromise } from \"@brytdesigns/web-component-core/promise\";\nimport { awaitAllAnimations } from \"@brytdesigns/web-component-core/animation\";\n\ntype StoreContext = {\n animationQueue: AnimationPlaybackControlsWithThen[];\n};\n\ntype CreateContextOptions = {\n root: HTMLElement & ICustomElement;\n isOpen: boolean;\n isAnimating: boolean;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype DrawerContext = ReturnType<typeof initializeDrawerContext>;\n\nfunction initializeDrawerContext(props: CreateContextOptions) {\n const [_internal, _state] = splitProps(props, [\"root\"]);\n const [store, setStore] = createStore<StoreContext>({ animationQueue: [] });\n\n createEffect(\n on(\n () => store.animationQueue,\n (animationQueue) => {\n if (!animationQueue.length) return;\n const controller = new AbortController();\n const animations = awaitAllAnimations(animationQueue);\n const abortableAnimations = abortablePromise(\n animations,\n controller.signal,\n );\n setElementState(\"isAnimating\", true);\n abortableAnimations.finally(() => {\n batch(() => {\n setElementState(\"isAnimating\", false);\n setStore(\"animationQueue\", []);\n });\n });\n\n return onCleanup(() => {\n controller.abort(\"Aborting drawer animations\");\n });\n },\n ),\n );\n\n function setElementState(\n key: keyof Omit<CreateContextOptions, \"root\">,\n value: boolean | ((v: boolean) => boolean),\n ) {\n const currentValue = untrack(() => props[key]);\n if (typeof value === \"function\") {\n const result = value(currentValue || false);\n if (`${currentValue}` === `${result}`) return;\n _internal.root.setAttribute(toHyphenated(key), `${result}`);\n return;\n }\n if (`${currentValue}` === `${value}`) return;\n return _internal.root.setAttribute(toHyphenated(key), `${value}`);\n }\n\n return [mergeProps(_state, store), { setElementState, setStore }] as const;\n}\n\nconst DrawerContextState = createContext(initializeDrawerContext);\n\nexport const provideDrawerContext = (\n initialState: Omit<CreateContextOptions, \"root\">,\n element: WalkableNode,\n): DrawerContext => {\n const props = mergeProps(initialState, { root: element });\n return provide(DrawerContextState, props, element);\n};\n\nexport const useDrawerContext = (context: DrawerContext) => {\n const [state, { setElementState, setStore: setState }] = context;\n\n function updateAnimationQueue(animation: AnimationPlaybackControlsWithThen) {\n setState(\"animationQueue\", (state) => [...state, animation]);\n }\n\n function close() {\n setElementState(\"isOpen\", false);\n }\n\n function open() {\n setElementState(\"isOpen\", true);\n }\n\n function toggle() {\n setElementState(\"isOpen\", (open) => !open);\n }\n\n return [state, { updateAnimationQueue, close, open, toggle }] as const;\n};\n\nexport const useDrawer = (element: HTMLElement & ICustomElement) => {\n const context: DrawerContext = consume(DrawerContextState, element);\n\n if (!context) {\n throw console.error(\n \"DrawerContext not found! Please ensure to wrap your custom element with drawer-context element.\",\n );\n }\n\n return useDrawerContext(context);\n};\n\nexport const getDrawerContext = (element: Element) => {\n const context = getContextFromProvider<DrawerContext>(\n DrawerContextState,\n element,\n );\n return useDrawerContext(context);\n};\n","export type Position = (typeof POSITION)[keyof typeof POSITION];\nexport type Action = (typeof ACTION)[keyof typeof ACTION];\n\nexport const POSITION = {\n TOP: \"top\",\n BOTTOM: \"bottom\",\n LEFT: \"left\",\n RIGHT: \"right\",\n} as const;\n\nexport const ACTION = {\n OPEN: \"open\",\n CLOSE: \"close\",\n TOGGLE: \"toggle\",\n};\n\nexport const EVENT_NAMESPACE = `bryt:drawer` as const;\n","import {\n invokeOnLoaded,\n type CorrectComponentType,\n} from \"@brytdesigns/web-component-utils\";\nimport type { Action } from \"../consts\";\n\nimport { createEffect, createRoot, on as _on, onCleanup } from \"solid-js\";\nimport { observeElementInViewport } from \"observe-element-in-viewport\";\n\nimport { getDrawerContext } from \"../hooks/index.js\";\n\ntype DrawerTriggerProps = {\n target?: string;\n action?: Action | \"\";\n on?: keyof HTMLElementEventMap | \"enter\" | \"exit\";\n preventDefault: boolean;\n};\n\nexport const Name = \"drawer-trigger\";\n\nexport const Component: CorrectComponentType<DrawerTriggerProps> = (\n props,\n { element },\n) => {\n createEffect(() => {\n const targetProp = props.target,\n action = props.action,\n on = props.on,\n preventDefault = props.preventDefault;\n\n if (!targetProp)\n return console.warn(`${Name}: target prop is required!`, element);\n if (!action)\n return console.warn(`${Name}: action prop is required!`, element);\n if (action !== \"close\" && action !== \"open\" && action !== \"toggle\")\n return console.warn(\n `${Name}: action prop must be 'close', 'open', or 'toggle'`,\n );\n if (!on) return console.warn(`${Name}: on prop is required!`);\n\n const target = document.querySelector(targetProp);\n if (!target)\n return console.warn(`${Name}: target element not found!`, {\n element,\n target: targetProp,\n });\n\n const controller = new AbortController();\n\n invokeOnLoaded(\n () => {\n createRoot((dispose) => {\n const [state, { open, close, toggle }] = getDrawerContext(target);\n\n switch (on) {\n case \"enter\": {\n let unsubscribe = null;\n if (action === \"toggle\") {\n unsubscribe = observeElementInViewport(element, open, close);\n }\n\n if (unsubscribe) onCleanup(unsubscribe);\n break;\n }\n case \"exit\": {\n let unsubscribe = null;\n if (action === \"toggle\") {\n unsubscribe = observeElementInViewport(element, close, open);\n }\n\n if (unsubscribe) onCleanup(unsubscribe);\n break;\n }\n\n default: {\n element.addEventListener(\n on,\n (event) => {\n if (preventDefault) event.preventDefault();\n if (state.isAnimating) return;\n switch (action) {\n case \"close\":\n close();\n break;\n case \"open\":\n open();\n break;\n case \"toggle\":\n toggle();\n break;\n }\n },\n { signal: controller.signal },\n );\n break;\n }\n }\n\n createEffect(() => {\n element.setAttribute(\"is-open\", `${state.isOpen}`);\n element.setAttribute(\"is-animating\", `${state.isAnimating}`);\n });\n\n controller.signal.addEventListener(\"abort\", dispose);\n });\n },\n { signal: controller.signal },\n );\n\n return onCleanup(() => {\n controller.abort();\n });\n });\n};\n","import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport { createEffect, onMount, on, onCleanup } from \"solid-js\";\nimport { animate } from \"motion\";\nimport { getTransitionConfig } from \"@brytdesigns/web-component-core/animation\";\n\nimport { useDrawer } from \"../hooks/index.js\";\n\ntype DrawerBackdropProps = {};\n\nexport const Name = `drawer-backdrop`;\n\nexport const Component: CorrectComponentType<DrawerBackdropProps> = (\n _,\n { element },\n) => {\n const [state, { updateAnimationQueue, close }] = useDrawer(element);\n const controller = new AbortController();\n\n let isFirstRender = true;\n\n createEffect(\n on(\n () => state.isOpen,\n (isOpen) => {\n if (!isOpen || isFirstRender) return;\n const animation = enter(element);\n updateAnimationQueue(animation);\n return onCleanup(() => {\n if (animation.state !== \"finished\") animation.complete();\n });\n },\n ),\n );\n\n createEffect(\n on(\n () => state.isOpen,\n (isOpen) => {\n if (isOpen || isFirstRender) return;\n const animation = exit(element);\n updateAnimationQueue(animation);\n return onCleanup(() => {\n if (animation.state !== \"finished\") animation.complete();\n });\n },\n ),\n );\n\n onMount(() => {\n isFirstRender = false;\n });\n\n function enter(element: HTMLElement) {\n const style = window.getComputedStyle(element);\n const options = getTransitionConfig(style);\n return animate(\n element,\n {\n opacity: [`var(--drawer--opacity-from)`, `var(--drawer--opacity-to)`],\n },\n options,\n );\n }\n\n function exit(element: HTMLElement) {\n const style = window.getComputedStyle(element);\n const options = getTransitionConfig(style);\n return animate(\n element,\n {\n opacity: [`var(--drawer--opacity-to)`, `var(--drawer--opacity-from)`],\n },\n options,\n );\n }\n\n element.addEventListener(\n \"click\",\n () => {\n if (state.isAnimating) return;\n close();\n },\n {\n signal: controller.signal,\n },\n );\n\n onCleanup(() => {\n controller.abort();\n });\n\n isFirstRender = false;\n};\n","import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport { createEffect, on, onCleanup, splitProps } from \"solid-js\";\nimport { enableBodyScroll, disableBodyScroll } from \"body-scroll-lock-upgrade\";\nimport { createFocusTrap } from \"@brytdesigns/web-component-core/focusTrap\";\n\nimport { provideDrawerContext, useDrawerContext } from \"../hooks/index.js\";\nimport { hideElement, showElement } from \"../utils.js\";\n\ntype DrawerContextProps = {\n isOpen: boolean;\n id: string;\n closeOnEscape: boolean;\n shouldTrapFocus: boolean;\n isAnimating: boolean;\n debug?: boolean;\n};\n\nexport const Name = `drawer-context`;\n\nexport const Component: CorrectComponentType<DrawerContextProps> = (\n props,\n { element },\n) => {\n const [contextProps, restProps] = splitProps(props, [\n \"isOpen\",\n \"isAnimating\",\n ]);\n\n const context = provideDrawerContext(contextProps, element);\n\n const [state, { setElementState }] = context;\n\n const [_, { updateAnimationQueue, ...events }] = useDrawerContext(context);\n\n element.actions = events;\n\n const focusTrap = createFocusTrap(element, () => ({\n allowOutsideClick: true,\n escapeDeactivates: restProps.closeOnEscape,\n onDeactivate: () => {\n setElementState(\"isOpen\", false);\n },\n }));\n\n createEffect(() => {\n if (!props.debug) return;\n console.table({\n ...state,\n });\n });\n\n createEffect(\n on(\n () => state.isOpen,\n (isOpen) => {\n const eventName = isOpen ? \"drawer:open\" : \"drawer:close\";\n element.dispatchEvent(\n new CustomEvent(eventName, {\n bubbles: true,\n detail: { isOpen, relatedTarget: element },\n }),\n );\n element.dispatchEvent(\n new CustomEvent(\"drawer:toggle\", {\n bubbles: true,\n detail: { isOpen, relatedTarget: element },\n }),\n );\n },\n ),\n );\n\n createEffect(\n on(\n () => ({\n isOpen: state.isOpen,\n focusTrap: focusTrap(),\n shouldTrapFocus: restProps.shouldTrapFocus,\n }),\n ({ isOpen, focusTrap, shouldTrapFocus }) => {\n if (!isOpen) return;\n if (props.debug) console.log(\"Showing element\", element);\n showElement(element);\n if (!shouldTrapFocus) return;\n focusTrap.activate();\n onCleanup(focusTrap.deactivate);\n },\n ),\n );\n\n createEffect(\n on(\n () => ({\n isOpen: state.isOpen,\n isAnimating: state.isAnimating,\n }),\n ({ isOpen, isAnimating }) => {\n if (isOpen && !isAnimating)\n return disableBodyScroll(element, {\n allowTouchMove: (el: EventTarget) => {\n if (el instanceof HTMLElement) {\n let element = el as (EventTarget & HTMLElement) | null;\n while (element && element !== document.body) {\n if (element.tagName === \"DRAWER-CONTENT\") {\n return true;\n }\n\n element = element.parentElement;\n }\n }\n return false;\n },\n });\n onCleanup(() => {\n enableBodyScroll(element);\n });\n },\n ),\n );\n\n createEffect(\n on(\n () => ({ isOpen: state.isOpen, animationQueue: state.animationQueue }),\n ({ isOpen, animationQueue }) => {\n if (isOpen) return;\n if (props.debug)\n console.log(\"Waiting for animations to complete...\", animationQueue);\n return Promise.all(animationQueue)\n .then(() => hideElement(element))\n .then(() => {\n if (props.debug) console.log(\"Hiding element\", element);\n });\n },\n ),\n );\n\n onCleanup(() => {\n disableBodyScroll(element);\n });\n};\n","export function hideElement<T extends HTMLElement>(element: T) {\n element.style.display = \"none\";\n}\n\nexport function showElement<T extends HTMLElement>(element: T) {\n element.style.display = \"block\";\n}\n","import {\n customShadowlessElement,\n correctElementType,\n} from \"@brytdesigns/web-component-utils\";\n\nimport {\n DrawerContent,\n DrawerContext,\n DrawerTrigger,\n DrawerBackdrop,\n} from \"./components/index.js\";\n\ncustomShadowlessElement(\n DrawerContext.Name,\n {\n isOpen: false,\n id: \"\",\n closeOnEscape: false,\n shouldTrapFocus: false,\n isAnimating: false,\n debug: false,\n },\n correctElementType(DrawerContext.Component),\n);\n\ncustomShadowlessElement(\n DrawerTrigger.Name,\n { target: \"\", action: \"\", on: \"click\", preventDefault: true },\n correctElementType(DrawerTrigger.Component),\n);\n\ncustomShadowlessElement(\n DrawerBackdrop.Name,\n {},\n correctElementType(DrawerBackdrop.Component),\n);\n\ncustomShadowlessElement(\n DrawerContent.Name,\n {},\n correctElementType(DrawerContent.Component),\n);\n\nexport { useDrawer, getDrawerContext } from \"./hooks/index.js\";\n"]}
1
+ {"version":3,"sources":["../../src/components/drawer-content.ts","../../src/hooks/useDrawer.ts","../../src/consts.ts","../../src/components/drawer-trigger.ts","../../src/components/drawer-backdrop.ts","../../src/components/drawer-context.ts","../../src/utils.ts","../../src/index.ts"],"names":["state","open","createEffect","on","onCleanup","element","Component","Name","onMount","getTransitionConfig","animate","splitProps","focusTrap"],"mappings":"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","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport { createEffect, on, onCleanup, onMount } from \"solid-js\";\nimport { animate } from \"motion\";\nimport { getTransitionConfig } from \"@brytdesigns/web-component-core/animation\";\n\nimport { useDrawer } from \"../hooks/index.js\";\nimport { POSITION, type Position } from \"../consts.js\";\n\ntype DrawerContentProps = {};\n\nexport const Name = `drawer-content`;\n\nexport const Component: CorrectComponentType<DrawerContentProps> = (\n _,\n { element },\n) => {\n const [state, { updateAnimationQueue }] = useDrawer(element);\n\n let isFirstRender = true;\n\n createEffect(\n on(\n () => state.isOpen,\n (isOpen) => {\n if (!isOpen || isFirstRender) return;\n const animation = enter(element);\n updateAnimationQueue(animation);\n return onCleanup(() => {\n if (animation.state !== \"finished\") animation.complete();\n });\n },\n ),\n );\n\n createEffect(\n on(\n () => state.isOpen,\n (isOpen) => {\n if (isOpen || isFirstRender) return;\n const animation = exit(element);\n updateAnimationQueue(animation);\n return onCleanup(() => {\n if (animation.state !== \"finished\") animation.complete();\n });\n },\n ),\n );\n\n onMount(() => {\n isFirstRender = false;\n });\n\n function enter(element: HTMLElement) {\n const style = window.getComputedStyle(element);\n const transition = getTransitionConfig(style);\n let position = style.getPropertyValue(\"--drawer--position\") as Position;\n if (!position) position = POSITION.LEFT;\n\n let transform: Record<string, string[]> = {\n x: [\"var(--drawer--slide-from)\", \"var(--drawer--slide-to)\"],\n };\n\n if (position === POSITION.TOP || position === POSITION.BOTTOM) {\n transform = {\n y: [\"var(--drawer--slide-from)\", \"var(--drawer--slide-to)\"],\n };\n }\n\n return animate(\n element,\n {\n ...transform,\n },\n transition,\n );\n }\n\n function exit(element: HTMLElement) {\n const style = window.getComputedStyle(element);\n const transition = getTransitionConfig(style);\n let position = style.getPropertyValue(\"--drawer--position\") as Position;\n if (!position) position = POSITION.LEFT;\n\n let transform: Record<string, string[]> = {\n x: [\"var(--drawer--slide-to)\", \"var(--drawer--slide-from)\"],\n };\n\n if (position === POSITION.TOP || position === POSITION.BOTTOM) {\n transform = {\n y: [\"var(--drawer--slide-to)\", \"var(--drawer--slide-from)\"],\n };\n }\n\n return animate(\n element,\n {\n ...transform,\n },\n transition,\n );\n }\n};\n","import {\n type ICustomElement,\n createContext,\n provide,\n consume,\n} from \"component-register\";\nimport {\n createEffect,\n on,\n batch,\n splitProps,\n untrack,\n mergeProps,\n onCleanup,\n} from \"solid-js\";\nimport { createStore } from \"solid-js/store\";\nimport {\n toHyphenated,\n getContextFromProvider,\n} from \"@brytdesigns/web-component-utils\";\n\nimport type { AnimationPlaybackControlsWithThen } from \"motion\";\nimport { abortablePromise } from \"@brytdesigns/web-component-core/promise\";\nimport { awaitAllAnimations } from \"@brytdesigns/web-component-core/animation\";\n\ntype StoreContext = {\n animationQueue: AnimationPlaybackControlsWithThen[];\n};\n\ntype CreateContextOptions = {\n root: HTMLElement & ICustomElement;\n isOpen: boolean;\n isAnimating: boolean;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype DrawerContext = ReturnType<typeof initializeDrawerContext>;\n\nfunction initializeDrawerContext(props: CreateContextOptions) {\n const [_internal, _state] = splitProps(props, [\"root\"]);\n const [store, setStore] = createStore<StoreContext>({ animationQueue: [] });\n\n createEffect(\n on(\n () => store.animationQueue,\n (animationQueue) => {\n if (!animationQueue.length) return;\n const controller = new AbortController();\n const animations = awaitAllAnimations(animationQueue);\n const abortableAnimations = abortablePromise(\n animations,\n controller.signal,\n );\n setElementState(\"isAnimating\", true);\n abortableAnimations.finally(() => {\n batch(() => {\n setElementState(\"isAnimating\", false);\n setStore(\"animationQueue\", []);\n });\n });\n\n return onCleanup(() => {\n controller.abort(\"Aborting drawer animations\");\n });\n },\n ),\n );\n\n function setElementState(\n key: keyof Omit<CreateContextOptions, \"root\">,\n value: boolean | ((v: boolean) => boolean),\n ) {\n const currentValue = untrack(() => props[key]);\n if (typeof value === \"function\") {\n const result = value(currentValue || false);\n if (`${currentValue}` === `${result}`) return;\n _internal.root.setAttribute(toHyphenated(key), `${result}`);\n return;\n }\n if (`${currentValue}` === `${value}`) return;\n return _internal.root.setAttribute(toHyphenated(key), `${value}`);\n }\n\n return [mergeProps(_state, store), { setElementState, setStore }] as const;\n}\n\nconst DrawerContextState = createContext(initializeDrawerContext);\n\nexport const provideDrawerContext = (\n initialState: Omit<CreateContextOptions, \"root\">,\n element: WalkableNode,\n): DrawerContext => {\n const props = mergeProps(initialState, { root: element });\n return provide(DrawerContextState, props, element);\n};\n\nexport const useDrawerContext = (context: DrawerContext) => {\n const [state, { setElementState, setStore: setState }] = context;\n\n function updateAnimationQueue(animation: AnimationPlaybackControlsWithThen) {\n setState(\"animationQueue\", (state) => [...state, animation]);\n }\n\n function close() {\n setElementState(\"isOpen\", false);\n }\n\n function open() {\n setElementState(\"isOpen\", true);\n }\n\n function toggle() {\n setElementState(\"isOpen\", (open) => !open);\n }\n\n return [state, { updateAnimationQueue, close, open, toggle }] as const;\n};\n\nexport const useDrawer = (element: HTMLElement & ICustomElement) => {\n const context: DrawerContext = consume(DrawerContextState, element);\n\n if (!context) {\n throw console.error(\n \"DrawerContext not found! Please ensure to wrap your custom element with drawer-context element.\",\n );\n }\n\n return useDrawerContext(context);\n};\n\nexport const getDrawerContext = (element: Element) => {\n const context = getContextFromProvider<DrawerContext>(\n DrawerContextState,\n element,\n );\n return useDrawerContext(context);\n};\n","export type Position = (typeof POSITION)[keyof typeof POSITION];\nexport type Action = (typeof ACTION)[keyof typeof ACTION];\n\nexport const POSITION = {\n TOP: \"top\",\n BOTTOM: \"bottom\",\n LEFT: \"left\",\n RIGHT: \"right\",\n} as const;\n\nexport const ACTION = {\n OPEN: \"open\",\n CLOSE: \"close\",\n TOGGLE: \"toggle\",\n};\n\nexport const EVENT_NAMESPACE = `bryt:drawer` as const;\n","import {\n invokeOnLoaded,\n type CorrectComponentType,\n} from \"@brytdesigns/web-component-utils\";\nimport type { Action } from \"../consts\";\n\nimport { createEffect, createRoot, on as _on, onCleanup } from \"solid-js\";\nimport { observeElementInViewport } from \"observe-element-in-viewport\";\n\nimport { getDrawerContext } from \"../hooks/index.js\";\n\ntype DrawerTriggerProps = {\n target?: string;\n action?: Action | \"\";\n on?: keyof HTMLElementEventMap | \"enter\" | \"exit\";\n preventDefault: boolean;\n};\n\nexport const Name = \"drawer-trigger\";\n\nexport const Component: CorrectComponentType<DrawerTriggerProps> = (\n props,\n { element },\n) => {\n createEffect(() => {\n const targetProp = props.target,\n action = props.action,\n on = props.on,\n preventDefault = props.preventDefault;\n\n if (!targetProp)\n return console.warn(`${Name}: target prop is required!`, element);\n if (!action)\n return console.warn(`${Name}: action prop is required!`, element);\n if (action !== \"close\" && action !== \"open\" && action !== \"toggle\")\n return console.warn(\n `${Name}: action prop must be 'close', 'open', or 'toggle'`,\n );\n if (!on) return console.warn(`${Name}: on prop is required!`);\n\n try {\n const target = document.querySelector(targetProp);\n if (!target)\n return console.warn(`${Name}: target element not found!`, {\n element,\n target: targetProp,\n });\n\n const controller = new AbortController();\n\n invokeOnLoaded(\n () => {\n createRoot((dispose) => {\n const [state, { open, close, toggle }] = getDrawerContext(target);\n\n switch (on) {\n case \"enter\": {\n let unsubscribe = null;\n if (action === \"toggle\") {\n unsubscribe = observeElementInViewport(element, open, close);\n }\n\n if (unsubscribe) onCleanup(unsubscribe);\n break;\n }\n case \"exit\": {\n let unsubscribe = null;\n if (action === \"toggle\") {\n unsubscribe = observeElementInViewport(element, close, open);\n }\n\n if (unsubscribe) onCleanup(unsubscribe);\n break;\n }\n\n default: {\n element.addEventListener(\n on,\n (event) => {\n if (preventDefault) event.preventDefault();\n if (state.isAnimating) return;\n switch (action) {\n case \"close\":\n close();\n break;\n case \"open\":\n open();\n break;\n case \"toggle\":\n toggle();\n break;\n }\n },\n { signal: controller.signal },\n );\n break;\n }\n }\n\n createEffect(() => {\n element.setAttribute(\"is-open\", `${state.isOpen}`);\n element.setAttribute(\"is-animating\", `${state.isAnimating}`);\n });\n\n controller.signal.addEventListener(\"abort\", dispose);\n });\n },\n { signal: controller.signal },\n );\n\n return onCleanup(() => {\n controller.abort();\n });\n } catch (error) {\n console.error(error);\n }\n });\n};\n","import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport { createEffect, onMount, on, onCleanup } from \"solid-js\";\nimport { animate } from \"motion\";\nimport { getTransitionConfig } from \"@brytdesigns/web-component-core/animation\";\n\nimport { useDrawer } from \"../hooks/index.js\";\n\ntype DrawerBackdropProps = {};\n\nexport const Name = `drawer-backdrop`;\n\nexport const Component: CorrectComponentType<DrawerBackdropProps> = (\n _,\n { element },\n) => {\n const [state, { updateAnimationQueue, close }] = useDrawer(element);\n const controller = new AbortController();\n\n let isFirstRender = true;\n\n createEffect(\n on(\n () => state.isOpen,\n (isOpen) => {\n if (!isOpen || isFirstRender) return;\n const animation = enter(element);\n updateAnimationQueue(animation);\n return onCleanup(() => {\n if (animation.state !== \"finished\") animation.complete();\n });\n },\n ),\n );\n\n createEffect(\n on(\n () => state.isOpen,\n (isOpen) => {\n if (isOpen || isFirstRender) return;\n const animation = exit(element);\n updateAnimationQueue(animation);\n return onCleanup(() => {\n if (animation.state !== \"finished\") animation.complete();\n });\n },\n ),\n );\n\n onMount(() => {\n isFirstRender = false;\n });\n\n function enter(element: HTMLElement) {\n const style = window.getComputedStyle(element);\n const options = getTransitionConfig(style);\n return animate(\n element,\n {\n opacity: [`var(--drawer--opacity-from)`, `var(--drawer--opacity-to)`],\n },\n options,\n );\n }\n\n function exit(element: HTMLElement) {\n const style = window.getComputedStyle(element);\n const options = getTransitionConfig(style);\n return animate(\n element,\n {\n opacity: [`var(--drawer--opacity-to)`, `var(--drawer--opacity-from)`],\n },\n options,\n );\n }\n\n element.addEventListener(\n \"click\",\n () => {\n if (state.isAnimating) return;\n close();\n },\n {\n signal: controller.signal,\n },\n );\n\n onCleanup(() => {\n controller.abort();\n });\n\n isFirstRender = false;\n};\n","import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport { createEffect, on, onCleanup, splitProps } from \"solid-js\";\nimport { enableBodyScroll, disableBodyScroll } from \"body-scroll-lock-upgrade\";\nimport { createFocusTrap } from \"@brytdesigns/web-component-core/focusTrap\";\n\nimport { provideDrawerContext, useDrawerContext } from \"../hooks/index.js\";\nimport { hideElement, showElement } from \"../utils.js\";\n\ntype DrawerContextProps = {\n isOpen: boolean;\n id: string;\n closeOnEscape: boolean;\n shouldTrapFocus: boolean;\n isAnimating: boolean;\n debug?: boolean;\n};\n\nexport const Name = `drawer-context`;\n\nexport const Component: CorrectComponentType<DrawerContextProps> = (\n props,\n { element },\n) => {\n const [contextProps, restProps] = splitProps(props, [\n \"isOpen\",\n \"isAnimating\",\n ]);\n\n const context = provideDrawerContext(contextProps, element);\n\n const [state, { setElementState }] = context;\n\n const [_, { updateAnimationQueue, ...events }] = useDrawerContext(context);\n\n element.actions = events;\n\n const focusTrap = createFocusTrap(element, () => ({\n allowOutsideClick: true,\n escapeDeactivates: restProps.closeOnEscape,\n onDeactivate: () => {\n setElementState(\"isOpen\", false);\n },\n }));\n\n createEffect(() => {\n if (!props.debug) return;\n console.table({\n ...state,\n });\n });\n\n createEffect(\n on(\n () => state.isOpen,\n (isOpen) => {\n const eventName = isOpen ? \"drawer:open\" : \"drawer:close\";\n element.dispatchEvent(\n new CustomEvent(eventName, {\n bubbles: true,\n detail: { isOpen, relatedTarget: element },\n }),\n );\n element.dispatchEvent(\n new CustomEvent(\"drawer:toggle\", {\n bubbles: true,\n detail: { isOpen, relatedTarget: element },\n }),\n );\n },\n ),\n );\n\n createEffect(\n on(\n () => ({\n isOpen: state.isOpen,\n focusTrap: focusTrap(),\n shouldTrapFocus: restProps.shouldTrapFocus,\n }),\n ({ isOpen, focusTrap, shouldTrapFocus }) => {\n if (!isOpen) return;\n if (props.debug) console.log(\"Showing element\", element);\n showElement(element);\n if (!shouldTrapFocus) return;\n focusTrap.activate();\n onCleanup(focusTrap.deactivate);\n },\n ),\n );\n\n createEffect(\n on(\n () => ({\n isOpen: state.isOpen,\n isAnimating: state.isAnimating,\n }),\n ({ isOpen, isAnimating }) => {\n if (isOpen && !isAnimating)\n return disableBodyScroll(element, {\n allowTouchMove: (el: EventTarget) => {\n if (el instanceof HTMLElement) {\n let element = el as (EventTarget & HTMLElement) | null;\n while (element && element !== document.body) {\n if (element.tagName === \"DRAWER-CONTENT\") {\n return true;\n }\n\n element = element.parentElement;\n }\n }\n return false;\n },\n });\n onCleanup(() => {\n enableBodyScroll(element);\n });\n },\n ),\n );\n\n createEffect(\n on(\n () => ({ isOpen: state.isOpen, animationQueue: state.animationQueue }),\n ({ isOpen, animationQueue }) => {\n if (isOpen) return;\n if (props.debug)\n console.log(\"Waiting for animations to complete...\", animationQueue);\n return Promise.all(animationQueue)\n .then(() => hideElement(element))\n .then(() => {\n if (props.debug) console.log(\"Hiding element\", element);\n });\n },\n ),\n );\n\n onCleanup(() => {\n disableBodyScroll(element);\n });\n};\n","export function hideElement<T extends HTMLElement>(element: T) {\n element.style.display = \"none\";\n}\n\nexport function showElement<T extends HTMLElement>(element: T) {\n element.style.display = \"block\";\n}\n","import {\n customShadowlessElement,\n correctElementType,\n} from \"@brytdesigns/web-component-utils\";\n\nimport {\n DrawerContent,\n DrawerContext,\n DrawerTrigger,\n DrawerBackdrop,\n} from \"./components/index.js\";\n\ncustomShadowlessElement(\n DrawerContext.Name,\n {\n isOpen: false,\n id: \"\",\n closeOnEscape: false,\n shouldTrapFocus: false,\n isAnimating: false,\n debug: false,\n },\n correctElementType(DrawerContext.Component),\n);\n\ncustomShadowlessElement(\n DrawerTrigger.Name,\n { target: \"\", action: \"\", on: \"click\", preventDefault: true },\n correctElementType(DrawerTrigger.Component),\n);\n\ncustomShadowlessElement(\n DrawerBackdrop.Name,\n {},\n correctElementType(DrawerBackdrop.Component),\n);\n\ncustomShadowlessElement(\n DrawerContent.Name,\n {},\n correctElementType(DrawerContent.Component),\n);\n\nexport { useDrawer, getDrawerContext } from \"./hooks/index.js\";\n"]}
@@ -16,69 +16,73 @@ const Component = (props, { element }) => {
16
16
  `${Name}: action prop must be 'close', 'open', or 'toggle'`
17
17
  );
18
18
  if (!on) return console.warn(`${Name}: on prop is required!`);
19
- const target = document.querySelector(targetProp);
20
- if (!target)
21
- return console.warn(`${Name}: target element not found!`, {
22
- element,
23
- target: targetProp
24
- });
25
- const controller = new AbortController();
26
- invokeOnLoaded(
27
- () => {
28
- createRoot((dispose) => {
29
- const [state, { open, close, toggle }] = getDrawerContext(target);
30
- switch (on) {
31
- case "enter": {
32
- let unsubscribe = null;
33
- if (action === "toggle") {
34
- unsubscribe = observeElementInViewport(element, open, close);
19
+ try {
20
+ const target = document.querySelector(targetProp);
21
+ if (!target)
22
+ return console.warn(`${Name}: target element not found!`, {
23
+ element,
24
+ target: targetProp
25
+ });
26
+ const controller = new AbortController();
27
+ invokeOnLoaded(
28
+ () => {
29
+ createRoot((dispose) => {
30
+ const [state, { open, close, toggle }] = getDrawerContext(target);
31
+ switch (on) {
32
+ case "enter": {
33
+ let unsubscribe = null;
34
+ if (action === "toggle") {
35
+ unsubscribe = observeElementInViewport(element, open, close);
36
+ }
37
+ if (unsubscribe) onCleanup(unsubscribe);
38
+ break;
35
39
  }
36
- if (unsubscribe) onCleanup(unsubscribe);
37
- break;
38
- }
39
- case "exit": {
40
- let unsubscribe = null;
41
- if (action === "toggle") {
42
- unsubscribe = observeElementInViewport(element, close, open);
40
+ case "exit": {
41
+ let unsubscribe = null;
42
+ if (action === "toggle") {
43
+ unsubscribe = observeElementInViewport(element, close, open);
44
+ }
45
+ if (unsubscribe) onCleanup(unsubscribe);
46
+ break;
47
+ }
48
+ default: {
49
+ element.addEventListener(
50
+ on,
51
+ (event) => {
52
+ if (preventDefault) event.preventDefault();
53
+ if (state.isAnimating) return;
54
+ switch (action) {
55
+ case "close":
56
+ close();
57
+ break;
58
+ case "open":
59
+ open();
60
+ break;
61
+ case "toggle":
62
+ toggle();
63
+ break;
64
+ }
65
+ },
66
+ { signal: controller.signal }
67
+ );
68
+ break;
43
69
  }
44
- if (unsubscribe) onCleanup(unsubscribe);
45
- break;
46
- }
47
- default: {
48
- element.addEventListener(
49
- on,
50
- (event) => {
51
- if (preventDefault) event.preventDefault();
52
- if (state.isAnimating) return;
53
- switch (action) {
54
- case "close":
55
- close();
56
- break;
57
- case "open":
58
- open();
59
- break;
60
- case "toggle":
61
- toggle();
62
- break;
63
- }
64
- },
65
- { signal: controller.signal }
66
- );
67
- break;
68
70
  }
69
- }
70
- createEffect(() => {
71
- element.setAttribute("is-open", `${state.isOpen}`);
72
- element.setAttribute("is-animating", `${state.isAnimating}`);
71
+ createEffect(() => {
72
+ element.setAttribute("is-open", `${state.isOpen}`);
73
+ element.setAttribute("is-animating", `${state.isAnimating}`);
74
+ });
75
+ controller.signal.addEventListener("abort", dispose);
73
76
  });
74
- controller.signal.addEventListener("abort", dispose);
75
- });
76
- },
77
- { signal: controller.signal }
78
- );
79
- return onCleanup(() => {
80
- controller.abort();
81
- });
77
+ },
78
+ { signal: controller.signal }
79
+ );
80
+ return onCleanup(() => {
81
+ controller.abort();
82
+ });
83
+ } catch (error) {
84
+ console.error(error);
85
+ }
82
86
  });
83
87
  };
84
88
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/drawer-trigger.ts"],"names":[],"mappings":";;;;;AAkBO,MAAM,IAAO,GAAA;AAEb,MAAM,SAAsD,GAAA,CACjE,KACA,EAAA,EAAE,SACC,KAAA;AACH,EAAA,YAAA,CAAa,MAAM;AACjB,IAAM,MAAA,UAAA,GAAa,KAAM,CAAA,MAAA,EACvB,MAAS,GAAA,KAAA,CAAM,QACf,EAAK,GAAA,KAAA,CAAM,EACX,EAAA,cAAA,GAAiB,KAAM,CAAA,cAAA;AAEzB,IAAA,IAAI,CAAC,UAAA;AACH,MAAA,OAAO,OAAQ,CAAA,IAAA,CAAK,CAAG,EAAA,IAAI,8BAA8B,OAAO,CAAA;AAClE,IAAA,IAAI,CAAC,MAAA;AACH,MAAA,OAAO,OAAQ,CAAA,IAAA,CAAK,CAAG,EAAA,IAAI,8BAA8B,OAAO,CAAA;AAClE,IAAA,IAAI,MAAW,KAAA,OAAA,IAAW,MAAW,KAAA,MAAA,IAAU,MAAW,KAAA,QAAA;AACxD,MAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,QACb,GAAG,IAAI,CAAA,kDAAA;AAAA,OACT;AACF,IAAA,IAAI,CAAC,EAAI,EAAA,OAAO,QAAQ,IAAK,CAAA,CAAA,EAAG,IAAI,CAAwB,sBAAA,CAAA,CAAA;AAE5D,IAAM,MAAA,MAAA,GAAS,QAAS,CAAA,aAAA,CAAc,UAAU,CAAA;AAChD,IAAA,IAAI,CAAC,MAAA;AACH,MAAA,OAAO,OAAQ,CAAA,IAAA,CAAK,CAAG,EAAA,IAAI,CAA+B,2BAAA,CAAA,EAAA;AAAA,QACxD,OAAA;AAAA,QACA,MAAQ,EAAA;AAAA,OACT,CAAA;AAEH,IAAM,MAAA,UAAA,GAAa,IAAI,eAAgB,EAAA;AAEvC,IAAA,cAAA;AAAA,MACE,MAAM;AACJ,QAAA,UAAA,CAAW,CAAC,OAAY,KAAA;AACtB,UAAM,MAAA,CAAC,OAAO,EAAE,IAAA,EAAM,OAAO,MAAO,EAAC,CAAI,GAAA,gBAAA,CAAiB,MAAM,CAAA;AAEhE,UAAA,QAAQ,EAAI;AAAA,YACV,KAAK,OAAS,EAAA;AACZ,cAAA,IAAI,WAAc,GAAA,IAAA;AAClB,cAAA,IAAI,WAAW,QAAU,EAAA;AACvB,gBAAc,WAAA,GAAA,wBAAA,CAAyB,OAAS,EAAA,IAAA,EAAM,KAAK,CAAA;AAAA;AAG7D,cAAI,IAAA,WAAA,YAAuB,WAAW,CAAA;AACtC,cAAA;AAAA;AACF,YACA,KAAK,MAAQ,EAAA;AACX,cAAA,IAAI,WAAc,GAAA,IAAA;AAClB,cAAA,IAAI,WAAW,QAAU,EAAA;AACvB,gBAAc,WAAA,GAAA,wBAAA,CAAyB,OAAS,EAAA,KAAA,EAAO,IAAI,CAAA;AAAA;AAG7D,cAAI,IAAA,WAAA,YAAuB,WAAW,CAAA;AACtC,cAAA;AAAA;AACF,YAEA,SAAS;AACP,cAAQ,OAAA,CAAA,gBAAA;AAAA,gBACN,EAAA;AAAA,gBACA,CAAC,KAAU,KAAA;AACT,kBAAI,IAAA,cAAA,QAAsB,cAAe,EAAA;AACzC,kBAAA,IAAI,MAAM,WAAa,EAAA;AACvB,kBAAA,QAAQ,MAAQ;AAAA,oBACd,KAAK,OAAA;AACH,sBAAM,KAAA,EAAA;AACN,sBAAA;AAAA,oBACF,KAAK,MAAA;AACH,sBAAK,IAAA,EAAA;AACL,sBAAA;AAAA,oBACF,KAAK,QAAA;AACH,sBAAO,MAAA,EAAA;AACP,sBAAA;AAAA;AACJ,iBACF;AAAA,gBACA,EAAE,MAAQ,EAAA,UAAA,CAAW,MAAO;AAAA,eAC9B;AACA,cAAA;AAAA;AACF;AAGF,UAAA,YAAA,CAAa,MAAM;AACjB,YAAA,OAAA,CAAQ,YAAa,CAAA,SAAA,EAAW,CAAG,EAAA,KAAA,CAAM,MAAM,CAAE,CAAA,CAAA;AACjD,YAAA,OAAA,CAAQ,YAAa,CAAA,cAAA,EAAgB,CAAG,EAAA,KAAA,CAAM,WAAW,CAAE,CAAA,CAAA;AAAA,WAC5D,CAAA;AAED,UAAW,UAAA,CAAA,MAAA,CAAO,gBAAiB,CAAA,OAAA,EAAS,OAAO,CAAA;AAAA,SACpD,CAAA;AAAA,OACH;AAAA,MACA,EAAE,MAAQ,EAAA,UAAA,CAAW,MAAO;AAAA,KAC9B;AAEA,IAAA,OAAO,UAAU,MAAM;AACrB,MAAA,UAAA,CAAW,KAAM,EAAA;AAAA,KAClB,CAAA;AAAA,GACF,CAAA;AACH","file":"drawer-trigger.js","sourcesContent":["import {\n invokeOnLoaded,\n type CorrectComponentType,\n} from \"@brytdesigns/web-component-utils\";\nimport type { Action } from \"../consts\";\n\nimport { createEffect, createRoot, on as _on, onCleanup } from \"solid-js\";\nimport { observeElementInViewport } from \"observe-element-in-viewport\";\n\nimport { getDrawerContext } from \"../hooks/index.js\";\n\ntype DrawerTriggerProps = {\n target?: string;\n action?: Action | \"\";\n on?: keyof HTMLElementEventMap | \"enter\" | \"exit\";\n preventDefault: boolean;\n};\n\nexport const Name = \"drawer-trigger\";\n\nexport const Component: CorrectComponentType<DrawerTriggerProps> = (\n props,\n { element },\n) => {\n createEffect(() => {\n const targetProp = props.target,\n action = props.action,\n on = props.on,\n preventDefault = props.preventDefault;\n\n if (!targetProp)\n return console.warn(`${Name}: target prop is required!`, element);\n if (!action)\n return console.warn(`${Name}: action prop is required!`, element);\n if (action !== \"close\" && action !== \"open\" && action !== \"toggle\")\n return console.warn(\n `${Name}: action prop must be 'close', 'open', or 'toggle'`,\n );\n if (!on) return console.warn(`${Name}: on prop is required!`);\n\n const target = document.querySelector(targetProp);\n if (!target)\n return console.warn(`${Name}: target element not found!`, {\n element,\n target: targetProp,\n });\n\n const controller = new AbortController();\n\n invokeOnLoaded(\n () => {\n createRoot((dispose) => {\n const [state, { open, close, toggle }] = getDrawerContext(target);\n\n switch (on) {\n case \"enter\": {\n let unsubscribe = null;\n if (action === \"toggle\") {\n unsubscribe = observeElementInViewport(element, open, close);\n }\n\n if (unsubscribe) onCleanup(unsubscribe);\n break;\n }\n case \"exit\": {\n let unsubscribe = null;\n if (action === \"toggle\") {\n unsubscribe = observeElementInViewport(element, close, open);\n }\n\n if (unsubscribe) onCleanup(unsubscribe);\n break;\n }\n\n default: {\n element.addEventListener(\n on,\n (event) => {\n if (preventDefault) event.preventDefault();\n if (state.isAnimating) return;\n switch (action) {\n case \"close\":\n close();\n break;\n case \"open\":\n open();\n break;\n case \"toggle\":\n toggle();\n break;\n }\n },\n { signal: controller.signal },\n );\n break;\n }\n }\n\n createEffect(() => {\n element.setAttribute(\"is-open\", `${state.isOpen}`);\n element.setAttribute(\"is-animating\", `${state.isAnimating}`);\n });\n\n controller.signal.addEventListener(\"abort\", dispose);\n });\n },\n { signal: controller.signal },\n );\n\n return onCleanup(() => {\n controller.abort();\n });\n });\n};\n"]}
1
+ {"version":3,"sources":["../../../src/components/drawer-trigger.ts"],"names":[],"mappings":"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","file":"drawer-trigger.js","sourcesContent":["import {\n invokeOnLoaded,\n type CorrectComponentType,\n} from \"@brytdesigns/web-component-utils\";\nimport type { Action } from \"../consts\";\n\nimport { createEffect, createRoot, on as _on, onCleanup } from \"solid-js\";\nimport { observeElementInViewport } from \"observe-element-in-viewport\";\n\nimport { getDrawerContext } from \"../hooks/index.js\";\n\ntype DrawerTriggerProps = {\n target?: string;\n action?: Action | \"\";\n on?: keyof HTMLElementEventMap | \"enter\" | \"exit\";\n preventDefault: boolean;\n};\n\nexport const Name = \"drawer-trigger\";\n\nexport const Component: CorrectComponentType<DrawerTriggerProps> = (\n props,\n { element },\n) => {\n createEffect(() => {\n const targetProp = props.target,\n action = props.action,\n on = props.on,\n preventDefault = props.preventDefault;\n\n if (!targetProp)\n return console.warn(`${Name}: target prop is required!`, element);\n if (!action)\n return console.warn(`${Name}: action prop is required!`, element);\n if (action !== \"close\" && action !== \"open\" && action !== \"toggle\")\n return console.warn(\n `${Name}: action prop must be 'close', 'open', or 'toggle'`,\n );\n if (!on) return console.warn(`${Name}: on prop is required!`);\n\n try {\n const target = document.querySelector(targetProp);\n if (!target)\n return console.warn(`${Name}: target element not found!`, {\n element,\n target: targetProp,\n });\n\n const controller = new AbortController();\n\n invokeOnLoaded(\n () => {\n createRoot((dispose) => {\n const [state, { open, close, toggle }] = getDrawerContext(target);\n\n switch (on) {\n case \"enter\": {\n let unsubscribe = null;\n if (action === \"toggle\") {\n unsubscribe = observeElementInViewport(element, open, close);\n }\n\n if (unsubscribe) onCleanup(unsubscribe);\n break;\n }\n case \"exit\": {\n let unsubscribe = null;\n if (action === \"toggle\") {\n unsubscribe = observeElementInViewport(element, close, open);\n }\n\n if (unsubscribe) onCleanup(unsubscribe);\n break;\n }\n\n default: {\n element.addEventListener(\n on,\n (event) => {\n if (preventDefault) event.preventDefault();\n if (state.isAnimating) return;\n switch (action) {\n case \"close\":\n close();\n break;\n case \"open\":\n open();\n break;\n case \"toggle\":\n toggle();\n break;\n }\n },\n { signal: controller.signal },\n );\n break;\n }\n }\n\n createEffect(() => {\n element.setAttribute(\"is-open\", `${state.isOpen}`);\n element.setAttribute(\"is-animating\", `${state.isAnimating}`);\n });\n\n controller.signal.addEventListener(\"abort\", dispose);\n });\n },\n { signal: controller.signal },\n );\n\n return onCleanup(() => {\n controller.abort();\n });\n } catch (error) {\n console.error(error);\n }\n });\n};\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brytdesigns/web-component-drawer",
3
- "version": "1.0.26",
3
+ "version": "1.0.27",
4
4
  "description": "Headless drawer web component",
5
5
  "main": "./dist/main/index.js",
6
6
  "module": "./dist/main/index.js",