@brytdesigns/web-component-drawer 1.1.12 → 3.0.0

package/dist/esm/index.js

@@ -1,491 +0,0 @@
-import { createWithElementContext, customShadowlessElement, correctElementType, toHyphenated, getContextFromProvider, disableBodyScroll, enableBodyScroll } from '@brytdesigns/web-component-core/utils';
-import { splitProps, createEffect, on, batch, onCleanup, untrack, mergeProps, onMount } from 'solid-js';
-import { animate } from 'motion';
-import { awaitAllAnimations, getTransitionConfig } from '@brytdesigns/web-component-core/animation';
-import { createContext, consume, provide } from 'component-register';
-import { createStore } from 'solid-js/store';
-import { abortablePromise } from '@brytdesigns/web-component-core/promise';
-import { observeElementInViewport } from 'observe-element-in-viewport';
-import { createFocusTrap } from '@brytdesigns/web-component-core/focusTrap';
-
-var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-
-// src/components/drawer-content.ts
-var drawer_content_exports = {};
-__export(drawer_content_exports, {
-  Component: () => Component,
-  Name: () => Name
-});
-function initializeDrawerContext(props) {
-  const [_internal, _state] = splitProps(props, ["root"]);
-  const [store, setStore] = createStore({ animationQueue: [] });
-  createEffect(
-    on(
-      () => store.animationQueue,
-      (animationQueue) => {
-        if (!animationQueue.length) return;
-        const controller = new AbortController();
-        const animations = awaitAllAnimations(animationQueue);
-        const abortableAnimations = abortablePromise(
-          animations,
-          controller.signal
-        );
-        setElementState("isAnimating", true);
-        abortableAnimations.finally(() => {
-          batch(() => {
-            setElementState("isAnimating", false);
-            setStore("animationQueue", []);
-          });
-        });
-        return onCleanup(() => {
-          controller.abort("Aborting drawer animations");
-        });
-      }
-    )
-  );
-  function setElementState(key, value) {
-    const currentValue = untrack(() => props[key]);
-    if (typeof value === "function") {
-      const result = value(currentValue || false);
-      if (`${currentValue}` === `${result}`) return;
-      _internal.root.setAttribute(toHyphenated(key), `${result}`);
-      return;
-    }
-    if (`${currentValue}` === `${value}`) return;
-    return _internal.root.setAttribute(toHyphenated(key), `${value}`);
-  }
-  return [mergeProps(_state, store), { setElementState, setStore }];
-}
-var DrawerContextState = createContext(initializeDrawerContext);
-var provideDrawerContext = (initialState, element) => {
-  const props = mergeProps(initialState, { root: element });
-  return provide(DrawerContextState, props, element);
-};
-var useDrawerContext = (context) => {
-  const [state, { setElementState, setStore: setState }] = context;
-  function updateAnimationQueue(animation) {
-    setState("animationQueue", (state2) => [...state2, animation]);
-  }
-  function close() {
-    setElementState("isOpen", false);
-  }
-  function open() {
-    setElementState("isOpen", true);
-  }
-  function toggle() {
-    setElementState("isOpen", (open2) => !open2);
-  }
-  return [state, { updateAnimationQueue, close, open, toggle }];
-};
-var useDrawer = (element) => {
-  const context = consume(DrawerContextState, element);
-  if (!context) {
-    throw console.error(
-      "DrawerContext not found! Please ensure to wrap your custom element with drawer-context element."
-    );
-  }
-  return useDrawerContext(context);
-};
-var withDrawerElementContext = createWithElementContext(DrawerContextState);
-var getDrawerContext = (element) => {
-  const context = getContextFromProvider(
-    DrawerContextState,
-    element
-  );
-  return useDrawerContext(context);
-};
-
-// src/consts.ts
-var POSITION = {
-  TOP: "top",
-  BOTTOM: "bottom",
-  LEFT: "left"};
-
-// src/components/drawer-content.ts
-var Name = `drawer-content`;
-var Component = (_, { element }) => {
-  const [state, { updateAnimationQueue }] = useDrawer(element);
-  let isFirstRender = true;
-  createEffect(
-    on(
-      () => state.isOpen,
-      (isOpen) => {
-        if (!isOpen || isFirstRender) return;
-        const animation = enter(element);
-        updateAnimationQueue(animation);
-        return onCleanup(() => {
-          if (animation.state !== "finished") animation.complete();
-        });
-      }
-    )
-  );
-  createEffect(
-    on(
-      () => state.isOpen,
-      (isOpen) => {
-        if (isOpen || isFirstRender) return;
-        const animation = exit(element);
-        updateAnimationQueue(animation);
-        return onCleanup(() => {
-          if (animation.state !== "finished") animation.complete();
-        });
-      }
-    )
-  );
-  onMount(() => {
-    isFirstRender = false;
-  });
-  function enter(element2) {
-    const style = window.getComputedStyle(element2);
-    const transition = getTransitionConfig(style);
-    let position = style.getPropertyValue(`--drawer--position`);
-    if (!position) position = POSITION.LEFT;
-    let transform = {
-      x: [`var(--drawer--slide-from)`, `var(--drawer--slide-to)`]
-    };
-    if (position === POSITION.TOP || position === POSITION.BOTTOM) {
-      transform = {
-        y: [`var(--drawer--slide-from)`, `var(--drawer--slide-to)`]
-      };
-    }
-    return animate(
-      element2,
-      {
-        ...transform
-      },
-      transition
-    );
-  }
-  function exit(element2) {
-    const style = window.getComputedStyle(element2);
-    const transition = getTransitionConfig(style);
-    let position = style.getPropertyValue(`--drawer--position`);
-    if (!position) position = POSITION.LEFT;
-    let transform = {
-      x: [`var(--drawer--slide-to)`, `var(--drawer--slide-from)`]
-    };
-    if (position === POSITION.TOP || position === POSITION.BOTTOM) {
-      transform = {
-        y: [`var(--drawer--slide-to)`, `var(--drawer--slide-from)`]
-      };
-    }
-    return animate(
-      element2,
-      {
-        ...transform
-      },
-      transition
-    );
-  }
-};
-
-// src/components/drawer-trigger.ts
-var drawer_trigger_exports = {};
-__export(drawer_trigger_exports, {
-  Component: () => Component2,
-  Name: () => Name2
-});
-var Name2 = "drawer-trigger";
-var Component2 = (props, { element }) => {
-  withDrawerElementContext(
-    () => props.target || "",
-    () => {
-      return {
-        action: props.action,
-        on: props.on,
-        preventDefault: props.preventDefault
-      };
-    },
-    (context, props2) => {
-      const controller = new AbortController();
-      const { action, on: on5, preventDefault } = props2;
-      const [state, { open, close, toggle }] = useDrawerContext(context);
-      switch (on5) {
-        case "enter": {
-          let unsubscribe = null;
-          if (action === "toggle") {
-            unsubscribe = observeElementInViewport(element, open, close);
-          }
-          if (unsubscribe) onCleanup(unsubscribe);
-          break;
-        }
-        case "exit": {
-          let unsubscribe = null;
-          if (action === "toggle") {
-            unsubscribe = observeElementInViewport(element, close, open);
-          }
-          if (unsubscribe) onCleanup(unsubscribe);
-          break;
-        }
-        default: {
-          element.addEventListener(
-            //@ts-ignore
-            on5,
-            (event) => {
-              if (preventDefault) event.preventDefault();
-              if (state.isAnimating) return;
-              switch (action) {
-                case "close":
-                  close();
-                  break;
-                case "open":
-                  open();
-                  break;
-                case "toggle":
-                  toggle();
-                  break;
-              }
-            },
-            { signal: controller.signal }
-          );
-          break;
-        }
-      }
-      createEffect(() => {
-        element.setAttribute("is-open", `${state.isOpen}`);
-        element.setAttribute("is-animating", `${state.isAnimating}`);
-      });
-      onCleanup(() => {
-        controller.abort();
-      });
-    }
-  );
-};
-
-// src/components/drawer-backdrop.ts
-var drawer_backdrop_exports = {};
-__export(drawer_backdrop_exports, {
-  Component: () => Component3,
-  Name: () => Name3
-});
-var Name3 = `drawer-backdrop`;
-var Component3 = (_, { element }) => {
-  const [state, { updateAnimationQueue, close }] = useDrawer(element);
-  const controller = new AbortController();
-  let isFirstRender = true;
-  createEffect(
-    on(
-      () => state.isOpen,
-      (isOpen) => {
-        if (!isOpen || isFirstRender) return;
-        const animation = enter(element);
-        updateAnimationQueue(animation);
-        return onCleanup(() => {
-          if (animation.state !== "finished") animation.complete();
-        });
-      }
-    )
-  );
-  createEffect(
-    on(
-      () => state.isOpen,
-      (isOpen) => {
-        if (isOpen || isFirstRender) return;
-        const animation = exit(element);
-        updateAnimationQueue(animation);
-        return onCleanup(() => {
-          if (animation.state !== "finished") animation.complete();
-        });
-      }
-    )
-  );
-  onMount(() => {
-    isFirstRender = false;
-  });
-  function enter(element2) {
-    const style = window.getComputedStyle(element2);
-    const options = getTransitionConfig(style);
-    return animate(
-      element2,
-      {
-        opacity: [`var(--drawer--opacity-from)`, `var(--drawer--opacity-to)`]
-      },
-      options
-    );
-  }
-  function exit(element2) {
-    const style = window.getComputedStyle(element2);
-    const options = getTransitionConfig(style);
-    return animate(
-      element2,
-      {
-        opacity: [`var(--drawer--opacity-to)`, `var(--drawer--opacity-from)`]
-      },
-      options
-    );
-  }
-  element.addEventListener(
-    "click",
-    () => {
-      if (state.isAnimating) return;
-      close();
-    },
-    {
-      signal: controller.signal
-    }
-  );
-  onCleanup(() => {
-    controller.abort();
-  });
-  isFirstRender = false;
-};
-
-// src/components/drawer-context.ts
-var drawer_context_exports = {};
-__export(drawer_context_exports, {
-  Component: () => Component4,
-  Name: () => Name4
-});
-
-// src/utils.ts
-function hideElement(element) {
-  element.style.display = "none";
-}
-function showElement(element) {
-  element.style.display = "block";
-}
-
-// src/components/drawer-context.ts
-var Name4 = `drawer-context`;
-var Component4 = (props, { element }) => {
-  const [contextProps, restProps] = splitProps(props, [
-    "isOpen",
-    "isAnimating"
-  ]);
-  const context = provideDrawerContext(contextProps, element);
-  const [state, { setElementState }] = context;
-  const [_, { updateAnimationQueue, ...events }] = useDrawerContext(context);
-  element.actions = events;
-  const focusTrap = createFocusTrap(element, () => ({
-    allowOutsideClick: true,
-    escapeDeactivates: restProps.closeOnEscape,
-    onDeactivate: () => {
-      setElementState("isOpen", false);
-    }
-  }));
-  createEffect(() => {
-    if (!props.debug) return;
-    console.table({
-      ...state
-    });
-  });
-  createEffect(
-    on(
-      () => state.isOpen,
-      (isOpen) => {
-        const eventName = isOpen ? "drawer:open" : "drawer:close";
-        element.dispatchEvent(
-          new CustomEvent(eventName, {
-            bubbles: true,
-            detail: { isOpen, relatedTarget: element }
-          })
-        );
-        element.dispatchEvent(
-          new CustomEvent("drawer:toggle", {
-            bubbles: true,
-            detail: { isOpen, relatedTarget: element }
-          })
-        );
-      }
-    )
-  );
-  createEffect(
-    on(
-      () => ({
-        isOpen: state.isOpen,
-        focusTrap: focusTrap(),
-        shouldTrapFocus: restProps.shouldTrapFocus
-      }),
-      ({ isOpen, focusTrap: focusTrap2, shouldTrapFocus }) => {
-        if (!isOpen) return;
-        if (props.debug) console.log("Showing element", element);
-        showElement(element);
-        if (!shouldTrapFocus) return;
-        focusTrap2.activate();
-        onCleanup(focusTrap2.deactivate);
-      }
-    )
-  );
-  createEffect(
-    on(
-      () => ({
-        isOpen: state.isOpen,
-        isAnimating: state.isAnimating,
-        shouldTrapFocus: props.shouldTrapFocus
-      }),
-      ({ isOpen, isAnimating, shouldTrapFocus }) => {
-        if (isOpen && !isAnimating && shouldTrapFocus)
-          return disableBodyScroll(element, {
-            allowTouchMove: (el) => {
-              if (el instanceof HTMLElement) {
-                let element2 = el;
-                while (element2 && element2 !== document.body) {
-                  if (element2.tagName === "DRAWER-CONTENT") {
-                    return true;
-                  }
-                  element2 = element2.parentElement;
-                }
-              }
-              return false;
-            }
-          });
-        onCleanup(() => {
-          enableBodyScroll(element);
-        });
-      }
-    )
-  );
-  createEffect(
-    on(
-      () => ({ isOpen: state.isOpen, animationQueue: state.animationQueue }),
-      ({ isOpen, animationQueue }) => {
-        if (isOpen) return;
-        if (props.debug)
-          console.log("Waiting for animations to complete...", animationQueue);
-        return Promise.all(animationQueue).then(() => hideElement(element)).then(() => {
-          if (props.debug) console.log("Hiding element", element);
-        });
-      }
-    )
-  );
-  onCleanup(() => {
-    enableBodyScroll(element);
-  });
-};
-
-// src/index.ts
-customShadowlessElement(
-  drawer_context_exports.Name,
-  {
-    isOpen: false,
-    id: crypto.randomUUID(),
-    closeOnEscape: false,
-    shouldTrapFocus: false,
-    isAnimating: false,
-    debug: false
-  },
-  correctElementType(drawer_context_exports.Component)
-);
-customShadowlessElement(
-  drawer_trigger_exports.Name,
-  { target: "", action: "", on: "click", preventDefault: true },
-  correctElementType(drawer_trigger_exports.Component)
-);
-customShadowlessElement(
-  drawer_backdrop_exports.Name,
-  {},
-  correctElementType(drawer_backdrop_exports.Component)
-);
-customShadowlessElement(
-  drawer_content_exports.Name,
-  {},
-  correctElementType(drawer_content_exports.Component)
-);
-
-export { getDrawerContext, useDrawer, withDrawerElementContext };
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +0,0 @@
-{"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","props","onMount","getTransitionConfig","animate","splitProps","focusTrap"],"mappings":"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","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\r\n\r\nimport { createEffect, on, onCleanup, onMount } from \"solid-js\";\r\nimport { animate } from \"motion\";\r\nimport { getTransitionConfig } from \"@brytdesigns/web-component-core/animation\";\r\n\r\nimport { useDrawer } from \"../hooks/index.js\";\r\nimport { POSITION, type Position } from \"../consts.js\";\r\n\r\nexport type Props = {};\r\n\r\nexport const Name = `drawer-content`;\r\n\r\nexport const Component: CorrectComponentType<Props> = (_, { element }) => {\r\n  const [state, { updateAnimationQueue }] = useDrawer(element);\r\n\r\n  let isFirstRender = true;\r\n\r\n  createEffect(\r\n    on(\r\n      () => state.isOpen,\r\n      (isOpen) => {\r\n        if (!isOpen || isFirstRender) return;\r\n        const animation = enter(element);\r\n        updateAnimationQueue(animation);\r\n        return onCleanup(() => {\r\n          if (animation.state !== \"finished\") animation.complete();\r\n        });\r\n      },\r\n    ),\r\n  );\r\n\r\n  createEffect(\r\n    on(\r\n      () => state.isOpen,\r\n      (isOpen) => {\r\n        if (isOpen || isFirstRender) return;\r\n        const animation = exit(element);\r\n        updateAnimationQueue(animation);\r\n        return onCleanup(() => {\r\n          if (animation.state !== \"finished\") animation.complete();\r\n        });\r\n      },\r\n    ),\r\n  );\r\n\r\n  onMount(() => {\r\n    isFirstRender = false;\r\n  });\r\n\r\n  function enter(element: HTMLElement) {\r\n    const style = window.getComputedStyle(element);\r\n    const transition = getTransitionConfig(style);\r\n    let position = style.getPropertyValue(`--drawer--position`) as Position;\r\n    if (!position) position = POSITION.LEFT;\r\n\r\n    let transform: Record<string, string[]> = {\r\n      x: [`var(--drawer--slide-from)`, `var(--drawer--slide-to)`],\r\n    };\r\n\r\n    if (position === POSITION.TOP || position === POSITION.BOTTOM) {\r\n      transform = {\r\n        y: [`var(--drawer--slide-from)`, `var(--drawer--slide-to)`],\r\n      };\r\n    }\r\n\r\n    return animate(\r\n      element,\r\n      {\r\n        ...transform,\r\n      },\r\n      transition,\r\n    );\r\n  }\r\n\r\n  function exit(element: HTMLElement) {\r\n    const style = window.getComputedStyle(element);\r\n    const transition = getTransitionConfig(style);\r\n    let position = style.getPropertyValue(`--drawer--position`) as Position;\r\n    if (!position) position = POSITION.LEFT;\r\n\r\n    let transform: Record<string, string[]> = {\r\n      x: [`var(--drawer--slide-to)`, `var(--drawer--slide-from)`],\r\n    };\r\n\r\n    if (position === POSITION.TOP || position === POSITION.BOTTOM) {\r\n      transform = {\r\n        y: [`var(--drawer--slide-to)`, `var(--drawer--slide-from)`],\r\n      };\r\n    }\r\n\r\n    return animate(\r\n      element,\r\n      {\r\n        ...transform,\r\n      },\r\n      transition,\r\n    );\r\n  }\r\n};\r\n","import {\r\n  type ICustomElement,\r\n  createContext,\r\n  provide,\r\n  consume,\r\n} from \"component-register\";\r\nimport {\r\n  createEffect,\r\n  on,\r\n  batch,\r\n  splitProps,\r\n  untrack,\r\n  mergeProps,\r\n  onCleanup,\r\n} from \"solid-js\";\r\nimport { createStore } from \"solid-js/store\";\r\n\r\nimport type { AnimationPlaybackControlsWithThen } from \"motion\";\r\nimport { abortablePromise } from \"@brytdesigns/web-component-core/promise\";\r\nimport { awaitAllAnimations } from \"@brytdesigns/web-component-core/animation\";\r\nimport {\r\n  createWithElementContext,\r\n  toHyphenated,\r\n  getContextFromProvider,\r\n} from \"@brytdesigns/web-component-core/utils\";\r\n\r\ntype StoreContext = {\r\n  animationQueue: AnimationPlaybackControlsWithThen[];\r\n};\r\n\r\ntype CreateContextOptions = {\r\n  root: HTMLElement & ICustomElement;\r\n  isOpen: boolean;\r\n  isAnimating: boolean;\r\n};\r\n\r\ntype WalkableNode = Parameters<typeof provide>[2];\r\n\r\ntype DrawerContext = ReturnType<typeof initializeDrawerContext>;\r\n\r\nfunction initializeDrawerContext(props: CreateContextOptions) {\r\n  const [_internal, _state] = splitProps(props, [\"root\"]);\r\n  const [store, setStore] = createStore<StoreContext>({ animationQueue: [] });\r\n\r\n  createEffect(\r\n    on(\r\n      () => store.animationQueue,\r\n      (animationQueue) => {\r\n        if (!animationQueue.length) return;\r\n        const controller = new AbortController();\r\n        const animations = awaitAllAnimations(animationQueue);\r\n        const abortableAnimations = abortablePromise(\r\n          animations,\r\n          controller.signal,\r\n        );\r\n        setElementState(\"isAnimating\", true);\r\n        abortableAnimations.finally(() => {\r\n          batch(() => {\r\n            setElementState(\"isAnimating\", false);\r\n            setStore(\"animationQueue\", []);\r\n          });\r\n        });\r\n\r\n        return onCleanup(() => {\r\n          controller.abort(\"Aborting drawer animations\");\r\n        });\r\n      },\r\n    ),\r\n  );\r\n\r\n  function setElementState(\r\n    key: keyof Omit<CreateContextOptions, \"root\">,\r\n    value: boolean | ((v: boolean) => boolean),\r\n  ) {\r\n    const currentValue = untrack(() => props[key]);\r\n    if (typeof value === \"function\") {\r\n      const result = value(currentValue || false);\r\n      if (`${currentValue}` === `${result}`) return;\r\n      _internal.root.setAttribute(toHyphenated(key), `${result}`);\r\n      return;\r\n    }\r\n    if (`${currentValue}` === `${value}`) return;\r\n    return _internal.root.setAttribute(toHyphenated(key), `${value}`);\r\n  }\r\n\r\n  return [mergeProps(_state, store), { setElementState, setStore }] as const;\r\n}\r\n\r\nconst DrawerContextState = createContext(initializeDrawerContext);\r\n\r\nexport const provideDrawerContext = (\r\n  initialState: Omit<CreateContextOptions, \"root\">,\r\n  element: WalkableNode,\r\n): DrawerContext => {\r\n  const props = mergeProps(initialState, { root: element });\r\n  return provide(DrawerContextState, props, element);\r\n};\r\n\r\nexport const useDrawerContext = (context: DrawerContext) => {\r\n  const [state, { setElementState, setStore: setState }] = context;\r\n\r\n  function updateAnimationQueue(animation: AnimationPlaybackControlsWithThen) {\r\n    setState(\"animationQueue\", (state) => [...state, animation]);\r\n  }\r\n\r\n  function close() {\r\n    setElementState(\"isOpen\", false);\r\n  }\r\n\r\n  function open() {\r\n    setElementState(\"isOpen\", true);\r\n  }\r\n\r\n  function toggle() {\r\n    setElementState(\"isOpen\", (open) => !open);\r\n  }\r\n\r\n  return [state, { updateAnimationQueue, close, open, toggle }] as const;\r\n};\r\n\r\nexport const useDrawer = (element: HTMLElement & ICustomElement) => {\r\n  const context: DrawerContext = consume(DrawerContextState, element);\r\n\r\n  if (!context) {\r\n    throw console.error(\r\n      \"DrawerContext not found! Please ensure to wrap your custom element with drawer-context element.\",\r\n    );\r\n  }\r\n\r\n  return useDrawerContext(context);\r\n};\r\n\r\nexport const withDrawerElementContext = createWithElementContext<\r\n  typeof DrawerContextState,\r\n  DrawerContext\r\n>(DrawerContextState);\r\n\r\nexport const getDrawerContext = (element: Element) => {\r\n  const context = getContextFromProvider<DrawerContext>(\r\n    DrawerContextState,\r\n    element,\r\n  );\r\n  return useDrawerContext(context);\r\n};\r\n","export type Position = (typeof POSITION)[keyof typeof POSITION];\r\nexport type Action = (typeof ACTION)[keyof typeof ACTION];\r\n\r\nexport const POSITION = {\r\n  TOP: \"top\",\r\n  BOTTOM: \"bottom\",\r\n  LEFT: \"left\",\r\n  RIGHT: \"right\",\r\n} as const;\r\n\r\nexport const ACTION = {\r\n  OPEN: \"open\",\r\n  CLOSE: \"close\",\r\n  TOGGLE: \"toggle\",\r\n};\r\n\r\nexport const EVENT_NAMESPACE = `bryt:drawer` as const;\r\n","import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\r\nimport type { Action } from \"../consts\";\r\n\r\nimport { createEffect, onCleanup } from \"solid-js\";\r\nimport { observeElementInViewport } from \"observe-element-in-viewport\";\r\n\r\nimport { withDrawerElementContext, useDrawerContext } from \"../hooks/index.js\";\r\n\r\nexport type Props = {\r\n  target?: string;\r\n  action?: Action | \"\";\r\n  on?: keyof HTMLElementEventMap | \"enter\" | \"exit\";\r\n  preventDefault: boolean;\r\n};\r\n\r\nexport const Name = \"drawer-trigger\";\r\n\r\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\r\n  withDrawerElementContext(\r\n    () => props.target || \"\",\r\n    () => {\r\n      return {\r\n        action: props.action,\r\n        on: props.on,\r\n        preventDefault: props.preventDefault,\r\n      };\r\n    },\r\n    (context, props) => {\r\n      const controller = new AbortController();\r\n      const { action, on, preventDefault } = props;\r\n      const [state, { open, close, toggle }] = useDrawerContext(context);\r\n\r\n      switch (on) {\r\n        case \"enter\": {\r\n          let unsubscribe = null;\r\n          if (action === \"toggle\") {\r\n            unsubscribe = observeElementInViewport(element, open, close);\r\n          }\r\n\r\n          if (unsubscribe) onCleanup(unsubscribe);\r\n          break;\r\n        }\r\n        case \"exit\": {\r\n          let unsubscribe = null;\r\n          if (action === \"toggle\") {\r\n            unsubscribe = observeElementInViewport(element, close, open);\r\n          }\r\n\r\n          if (unsubscribe) onCleanup(unsubscribe);\r\n          break;\r\n        }\r\n\r\n        default: {\r\n          element.addEventListener(\r\n            //@ts-ignore\r\n            on,\r\n            (event) => {\r\n              if (preventDefault) event.preventDefault();\r\n              if (state.isAnimating) return;\r\n              switch (action) {\r\n                case \"close\":\r\n                  close();\r\n                  break;\r\n                case \"open\":\r\n                  open();\r\n                  break;\r\n                case \"toggle\":\r\n                  toggle();\r\n                  break;\r\n              }\r\n            },\r\n            { signal: controller.signal },\r\n          );\r\n          break;\r\n        }\r\n      }\r\n\r\n      createEffect(() => {\r\n        element.setAttribute(\"is-open\", `${state.isOpen}`);\r\n        element.setAttribute(\"is-animating\", `${state.isAnimating}`);\r\n      });\r\n\r\n      onCleanup(() => {\r\n        controller.abort();\r\n      });\r\n    },\r\n  );\r\n};\r\n","import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\r\n\r\nimport { createEffect, onMount, on, onCleanup } from \"solid-js\";\r\nimport { animate } from \"motion\";\r\nimport { getTransitionConfig } from \"@brytdesigns/web-component-core/animation\";\r\n\r\nimport { useDrawer } from \"../hooks/index.js\";\r\n\r\nexport type Props = {};\r\n\r\nexport const Name = `drawer-backdrop`;\r\n\r\nexport const Component: CorrectComponentType<Props> = (_, { element }) => {\r\n  const [state, { updateAnimationQueue, close }] = useDrawer(element);\r\n  const controller = new AbortController();\r\n\r\n  let isFirstRender = true;\r\n\r\n  createEffect(\r\n    on(\r\n      () => state.isOpen,\r\n      (isOpen) => {\r\n        if (!isOpen || isFirstRender) return;\r\n        const animation = enter(element);\r\n        updateAnimationQueue(animation);\r\n        return onCleanup(() => {\r\n          if (animation.state !== \"finished\") animation.complete();\r\n        });\r\n      },\r\n    ),\r\n  );\r\n\r\n  createEffect(\r\n    on(\r\n      () => state.isOpen,\r\n      (isOpen) => {\r\n        if (isOpen || isFirstRender) return;\r\n        const animation = exit(element);\r\n        updateAnimationQueue(animation);\r\n        return onCleanup(() => {\r\n          if (animation.state !== \"finished\") animation.complete();\r\n        });\r\n      },\r\n    ),\r\n  );\r\n\r\n  onMount(() => {\r\n    isFirstRender = false;\r\n  });\r\n\r\n  function enter(element: HTMLElement) {\r\n    const style = window.getComputedStyle(element);\r\n    const options = getTransitionConfig(style);\r\n    return animate(\r\n      element,\r\n      {\r\n        opacity: [`var(--drawer--opacity-from)`, `var(--drawer--opacity-to)`],\r\n      },\r\n      options,\r\n    );\r\n  }\r\n\r\n  function exit(element: HTMLElement) {\r\n    const style = window.getComputedStyle(element);\r\n    const options = getTransitionConfig(style);\r\n    return animate(\r\n      element,\r\n      {\r\n        opacity: [`var(--drawer--opacity-to)`, `var(--drawer--opacity-from)`],\r\n      },\r\n      options,\r\n    );\r\n  }\r\n\r\n  element.addEventListener(\r\n    \"click\",\r\n    () => {\r\n      if (state.isAnimating) return;\r\n      close();\r\n    },\r\n    {\r\n      signal: controller.signal,\r\n    },\r\n  );\r\n\r\n  onCleanup(() => {\r\n    controller.abort();\r\n  });\r\n\r\n  isFirstRender = false;\r\n};\r\n","import {\r\n  type CorrectComponentType,\r\n  enableBodyScroll,\r\n  disableBodyScroll,\r\n} from \"@brytdesigns/web-component-core/utils\";\r\n\r\nimport { createEffect, on, onCleanup, splitProps } from \"solid-js\";\r\nimport { createFocusTrap } from \"@brytdesigns/web-component-core/focusTrap\";\r\n\r\nimport { provideDrawerContext, useDrawerContext } from \"../hooks/index.js\";\r\nimport { hideElement, showElement } from \"../utils.js\";\r\n\r\nexport type Props = {\r\n  isOpen: boolean;\r\n  id: string;\r\n  closeOnEscape: boolean;\r\n  shouldTrapFocus: boolean;\r\n  isAnimating: boolean;\r\n  debug?: boolean;\r\n};\r\n\r\nexport const Name = `drawer-context`;\r\n\r\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\r\n  const [contextProps, restProps] = splitProps(props, [\r\n    \"isOpen\",\r\n    \"isAnimating\",\r\n  ]);\r\n\r\n  const context = provideDrawerContext(contextProps, element);\r\n\r\n  const [state, { setElementState }] = context;\r\n\r\n  const [_, { updateAnimationQueue, ...events }] = useDrawerContext(context);\r\n\r\n  element.actions = events;\r\n\r\n  const focusTrap = createFocusTrap(element, () => ({\r\n    allowOutsideClick: true,\r\n    escapeDeactivates: restProps.closeOnEscape,\r\n    onDeactivate: () => {\r\n      setElementState(\"isOpen\", false);\r\n    },\r\n  }));\r\n\r\n  createEffect(() => {\r\n    if (!props.debug) return;\r\n    console.table({\r\n      ...state,\r\n    });\r\n  });\r\n\r\n  createEffect(\r\n    on(\r\n      () => state.isOpen,\r\n      (isOpen) => {\r\n        const eventName = isOpen ? \"drawer:open\" : \"drawer:close\";\r\n        element.dispatchEvent(\r\n          new CustomEvent(eventName, {\r\n            bubbles: true,\r\n            detail: { isOpen, relatedTarget: element },\r\n          }),\r\n        );\r\n        element.dispatchEvent(\r\n          new CustomEvent(\"drawer:toggle\", {\r\n            bubbles: true,\r\n            detail: { isOpen, relatedTarget: element },\r\n          }),\r\n        );\r\n      },\r\n    ),\r\n  );\r\n\r\n  createEffect(\r\n    on(\r\n      () => ({\r\n        isOpen: state.isOpen,\r\n        focusTrap: focusTrap(),\r\n        shouldTrapFocus: restProps.shouldTrapFocus,\r\n      }),\r\n      ({ isOpen, focusTrap, shouldTrapFocus }) => {\r\n        if (!isOpen) return;\r\n        if (props.debug) console.log(\"Showing element\", element);\r\n        showElement(element);\r\n        if (!shouldTrapFocus) return;\r\n        focusTrap.activate();\r\n        onCleanup(focusTrap.deactivate);\r\n      },\r\n    ),\r\n  );\r\n\r\n  createEffect(\r\n    on(\r\n      () => ({\r\n        isOpen: state.isOpen,\r\n        isAnimating: state.isAnimating,\r\n        shouldTrapFocus: props.shouldTrapFocus,\r\n      }),\r\n      ({ isOpen, isAnimating, shouldTrapFocus }) => {\r\n        if (isOpen && !isAnimating && shouldTrapFocus)\r\n          return disableBodyScroll(element, {\r\n            allowTouchMove: (el: EventTarget) => {\r\n              if (el instanceof HTMLElement) {\r\n                let element = el as (EventTarget & HTMLElement) | null;\r\n                while (element && element !== document.body) {\r\n                  if (element.tagName === \"DRAWER-CONTENT\") {\r\n                    return true;\r\n                  }\r\n\r\n                  element = element.parentElement;\r\n                }\r\n              }\r\n              return false;\r\n            },\r\n          });\r\n        onCleanup(() => {\r\n          enableBodyScroll(element);\r\n        });\r\n      },\r\n    ),\r\n  );\r\n\r\n  createEffect(\r\n    on(\r\n      () => ({ isOpen: state.isOpen, animationQueue: state.animationQueue }),\r\n      ({ isOpen, animationQueue }) => {\r\n        if (isOpen) return;\r\n        if (props.debug)\r\n          console.log(\"Waiting for animations to complete...\", animationQueue);\r\n        return Promise.all(animationQueue)\r\n          .then(() => hideElement(element))\r\n          .then(() => {\r\n            if (props.debug) console.log(\"Hiding element\", element);\r\n          });\r\n      },\r\n    ),\r\n  );\r\n\r\n  onCleanup(() => {\r\n    enableBodyScroll(element);\r\n  });\r\n};\r\n","export function hideElement<T extends HTMLElement>(element: T) {\r\n  element.style.display = \"none\";\r\n}\r\n\r\nexport function showElement<T extends HTMLElement>(element: T) {\r\n  element.style.display = \"block\";\r\n}\r\n","import {\r\n\tcustomShadowlessElement,\r\n\tcorrectElementType,\r\n} from \"@brytdesigns/web-component-core/utils\";\r\n\r\nimport {\r\n\tDrawerContent,\r\n\tDrawerContext,\r\n\tDrawerTrigger,\r\n\tDrawerBackdrop,\r\n} from \"./components/index.js\";\r\n\r\nexport type DrawerContentProps = DrawerContent.Props;\r\nexport type DrawerContextProps = DrawerContext.Props;\r\nexport type DrawerTriggerProps = DrawerTrigger.Props;\r\nexport type DrawerBackdropProps = DrawerBackdrop.Props;\r\n\r\ncustomShadowlessElement(\r\n\tDrawerContext.Name,\r\n\t{\r\n\t\tisOpen: false,\r\n\t\tid: crypto.randomUUID(),\r\n\t\tcloseOnEscape: false,\r\n\t\tshouldTrapFocus: false,\r\n\t\tisAnimating: false,\r\n\t\tdebug: false,\r\n\t},\r\n\tcorrectElementType(DrawerContext.Component),\r\n);\r\n\r\ncustomShadowlessElement(\r\n\tDrawerTrigger.Name,\r\n\t{ target: \"\", action: \"\", on: \"click\", preventDefault: true },\r\n\tcorrectElementType(DrawerTrigger.Component),\r\n);\r\n\r\ncustomShadowlessElement(\r\n\tDrawerBackdrop.Name,\r\n\t{},\r\n\tcorrectElementType(DrawerBackdrop.Component),\r\n);\r\n\r\ncustomShadowlessElement(\r\n\tDrawerContent.Name,\r\n\t{},\r\n\tcorrectElementType(DrawerContent.Component),\r\n);\r\n\r\nexport {\r\n\tuseDrawer,\r\n\twithDrawerElementContext,\r\n\tgetDrawerContext,\r\n} from \"./hooks/index.js\";\r\n"]}

package/dist/main/components/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/dist/main/hooks/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}