@brytdesigns/web-component-drawer 1.1.12 → 3.0.0

package/dist/main/index.d.ts

@@ -3,43 +3,45 @@
 import { ICustomElement } from 'component-register';
 import { AnimationPlaybackControlsWithThen } from 'motion';
 
+/**
+ * `component-register` types `options.element` as a bare `ICustomElement`, but
+ * at runtime it is always also an `HTMLElement`. Every component in this repo
+ * needs the DOM half.
+ */
 export type CorrectComponentOptions = {
 	element: HTMLElement & ICustomElement;
 };
 export type CorrectComponentType<T> = (props: T, options: CorrectComponentOptions) => unknown;
 export type Props = {};
-declare const Name = "drawer-content";
+declare const Name = "drawer-backdrop";
 declare const Component: CorrectComponentType<Props>;
+type Props$1 = {};
+declare const Name$1 = "drawer-content";
+declare const Component$1: CorrectComponentType<Props$1>;
+type Props$2 = {
+	isOpen: boolean;
+	id: string;
+	closeOnEscape: boolean;
+	shouldTrapFocus: boolean;
+	isAnimating: boolean;
+	debug?: boolean;
+};
+declare const Name$2 = "drawer-context";
+declare const Component$2: CorrectComponentType<Props$2>;
 export type Action = (typeof ACTION)[keyof typeof ACTION];
 declare const ACTION: {
 	OPEN: string;
 	CLOSE: string;
 	TOGGLE: string;
 };
-type Props$1 = {
+type Props$3 = {
 	target?: string;
 	action?: Action | "";
 	on?: keyof HTMLElementEventMap | "enter" | "exit";
 	preventDefault: boolean;
 };
-declare const Name$1 = "drawer-trigger";
-declare const Component$1: CorrectComponentType<Props$1>;
-type Props$2 = {};
-declare const Name$2 = "drawer-backdrop";
-declare const Component$2: CorrectComponentType<Props$2>;
-type Props$3 = {
-	isOpen: boolean;
-	id: string;
-	closeOnEscape: boolean;
-	shouldTrapFocus: boolean;
-	isAnimating: boolean;
-	debug?: boolean;
-};
-declare const Name$3 = "drawer-context";
+declare const Name$3 = "drawer-trigger";
 declare const Component$3: CorrectComponentType<Props$3>;
-export type StoreContext = {
-	animationQueue: AnimationPlaybackControlsWithThen[];
-};
 export type CreateContextOptions = {
 	root: HTMLElement & ICustomElement;
 	isOpen: boolean;
@@ -49,7 +51,7 @@ export declare const useDrawer: (element: HTMLElement & ICustomElement) => reado
 	{
 		isOpen: boolean;
 		isAnimating: boolean;
-		animationQueue: AnimationPlaybackControlsWithThen[];
+		readonly animationQueue: AnimationPlaybackControlsWithThen[];
 	},
 	{
 		readonly updateAnimationQueue: (animation: AnimationPlaybackControlsWithThen) => void;
@@ -58,22 +60,22 @@ export declare const useDrawer: (element: HTMLElement & ICustomElement) => reado
 		readonly toggle: () => void;
 	}
 ];
-export declare const withDrawerElementContext: <D extends unknown>(target: string | import("solid-js").Accessor<string> | import("solid-js").Accessor<() => Element>, dependencies: import("solid-js").Accessor<D> | undefined, cb: (context: readonly [
+export declare const useDrawerAt: (target: () => string | undefined, host: HTMLElement) => import("solid-js").SourceAccessor<readonly [
 	{
 		isOpen: boolean;
 		isAnimating: boolean;
-		animationQueue: AnimationPlaybackControlsWithThen[];
+		readonly animationQueue: AnimationPlaybackControlsWithThen[];
 	},
 	{
 		readonly setElementState: (key: keyof Omit<CreateContextOptions, "root">, value: boolean | ((v: boolean) => boolean)) => void;
-		readonly setStore: import("solid-js/store").SetStoreFunction<StoreContext>;
+		readonly setAnimationQueue: import("solid-js").Setter<AnimationPlaybackControlsWithThen[]>;
 	}
-], dependencies: D) => void | (() => void)) => void;
+]>;
 export declare const getDrawerContext: (element: Element) => readonly [
 	{
 		isOpen: boolean;
 		isAnimating: boolean;
-		animationQueue: AnimationPlaybackControlsWithThen[];
+		readonly animationQueue: AnimationPlaybackControlsWithThen[];
 	},
 	{
 		readonly updateAnimationQueue: (animation: AnimationPlaybackControlsWithThen) => void;
@@ -82,12 +84,12 @@ export declare const getDrawerContext: (element: Element) => readonly [
 		readonly toggle: () => void;
 	}
 ];
-export type DrawerContentProps = Props;
-export type DrawerContextProps = DrawerContext.Props;
-export type DrawerTriggerProps = Props$1;
-export type DrawerBackdropProps = Props$2;
+export type DrawerContentProps = Props$1;
+export type DrawerContextProps = Props$2;
+export type DrawerTriggerProps = DrawerTrigger.Props;
+export type DrawerBackdropProps = Props;
 
-declare namespace DrawerContext {
+declare namespace DrawerTrigger {
 	export { Component$3 as Component, Name$3 as Name, Props$3 as Props };
 }
 

package/dist/main/index.js

@@ -1,33 +1,29 @@
-import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
-import { DrawerContext, DrawerTrigger, DrawerBackdrop, DrawerContent } from './components/index.js';
-export { getDrawerContext, useDrawer, withDrawerElementContext } from './hooks/index.js';
+import { getDrawerContext, useDrawer, useDrawerAt } from "./hooks/useDrawer.js";
+import "./hooks/index.js";
+import { Component, Name } from "./components/drawer-backdrop.js";
+import { Component as Component$1, Name as Name$1 } from "./components/drawer-content.js";
+import { Component as Component$2, Name as Name$2 } from "./components/drawer-context.js";
+import { Component as Component$3, Name as Name$3 } from "./components/drawer-trigger.js";
+import "./components/index.js";
+import { customShadowlessElement } from "@brytdesigns/web-component-core/utils";
+//#region src/index.ts
+customShadowlessElement(Name$2, {
+	isOpen: false,
+	id: crypto.randomUUID(),
+	closeOnEscape: true,
+	shouldTrapFocus: true,
+	isAnimating: false,
+	debug: false
+}, Component$2);
+customShadowlessElement(Name$3, {
+	target: "",
+	action: "",
+	on: "click",
+	preventDefault: true
+}, Component$3);
+customShadowlessElement(Name, {}, Component);
+customShadowlessElement(Name$1, {}, Component$1);
+//#endregion
+export { getDrawerContext, useDrawer, useDrawerAt };
 
-customShadowlessElement(
-  DrawerContext.Name,
-  {
-    isOpen: false,
-    id: crypto.randomUUID(),
-    closeOnEscape: false,
-    shouldTrapFocus: false,
-    isAnimating: false,
-    debug: false
-  },
-  correctElementType(DrawerContext.Component)
-);
-customShadowlessElement(
-  DrawerTrigger.Name,
-  { target: "", action: "", on: "click", preventDefault: true },
-  correctElementType(DrawerTrigger.Component)
-);
-customShadowlessElement(
-  DrawerBackdrop.Name,
-  {},
-  correctElementType(DrawerBackdrop.Component)
-);
-customShadowlessElement(
-  DrawerContent.Name,
-  {},
-  correctElementType(DrawerContent.Component)
-);
-//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/main/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;;AAiBA,uBAAA;AAAA,EACC,aAAc,CAAA,IAAA;AAAA,EACd;AAAA,IACC,MAAQ,EAAA,KAAA;AAAA,IACR,EAAA,EAAI,OAAO,UAAW,EAAA;AAAA,IACtB,aAAe,EAAA,KAAA;AAAA,IACf,eAAiB,EAAA,KAAA;AAAA,IACjB,WAAa,EAAA,KAAA;AAAA,IACb,KAAO,EAAA;AAAA,GACR;AAAA,EACA,kBAAA,CAAmB,cAAc,SAAS;AAC3C,CAAA;AAEA,uBAAA;AAAA,EACC,aAAc,CAAA,IAAA;AAAA,EACd,EAAE,QAAQ,EAAI,EAAA,MAAA,EAAQ,IAAI,EAAI,EAAA,OAAA,EAAS,gBAAgB,IAAK,EAAA;AAAA,EAC5D,kBAAA,CAAmB,cAAc,SAAS;AAC3C,CAAA;AAEA,uBAAA;AAAA,EACC,cAAe,CAAA,IAAA;AAAA,EACf,EAAC;AAAA,EACD,kBAAA,CAAmB,eAAe,SAAS;AAC5C,CAAA;AAEA,uBAAA;AAAA,EACC,aAAc,CAAA,IAAA;AAAA,EACd,EAAC;AAAA,EACD,kBAAA,CAAmB,cAAc,SAAS;AAC3C,CAAA","file":"index.js","sourcesContent":["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"]}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["import { customShadowlessElement } from \"@brytdesigns/web-component-core/utils\";\n\nimport {\n\tDrawerBackdrop,\n\tDrawerContent,\n\tDrawerContext,\n\tDrawerTrigger,\n} from \"./components/index.js\";\n\nexport type DrawerContentProps = DrawerContent.Props;\nexport type DrawerContextProps = DrawerContext.Props;\nexport type DrawerTriggerProps = DrawerTrigger.Props;\nexport type DrawerBackdropProps = DrawerBackdrop.Props;\n\ncustomShadowlessElement(\n\tDrawerContext.Name,\n\t{\n\t\tisOpen: false,\n\t\tid: crypto.randomUUID(),\n\t\t// On by default: an overlay that traps nothing and closes on no key is\n\t\t// not a dialog. Set close-on-escape=\"false\" / should-trap-focus=\"false\"\n\t\t// in markup to opt out.\n\t\tcloseOnEscape: true,\n\t\tshouldTrapFocus: true,\n\t\tisAnimating: false,\n\t\tdebug: false,\n\t},\n\tDrawerContext.Component,\n);\n\ncustomShadowlessElement(\n\tDrawerTrigger.Name,\n\t{ target: \"\", action: \"\", on: \"click\", preventDefault: true },\n\tDrawerTrigger.Component,\n);\n\ncustomShadowlessElement(DrawerBackdrop.Name, {}, DrawerBackdrop.Component);\n\ncustomShadowlessElement(DrawerContent.Name, {}, DrawerContent.Component);\n\nexport {\n\tgetDrawerContext,\n\tuseDrawer,\n\tuseDrawerAt,\n} from \"./hooks/index.js\";\n"],"mappings":";;;;;;;;;AAcA,wBACC,QACA;CACC,QAAQ;CACR,IAAI,OAAO,WAAW;CAItB,eAAe;CACf,iBAAiB;CACjB,aAAa;CACb,OAAO;AACR,GACA,WACD;AAEA,wBACC,QACA;CAAE,QAAQ;CAAI,QAAQ;CAAI,IAAI;CAAS,gBAAgB;AAAK,GAC5D,WACD;AAEA,wBAAwB,MAAqB,CAAC,GAAG,SAAwB;AAEzE,wBAAwB,QAAoB,CAAC,GAAG,WAAuB"}

package/dist/main/utils.js

@@ -1,10 +1,11 @@
+//#region src/utils.ts
 function hideElement(element) {
-  element.style.display = "none";
+	element.style.display = "none";
 }
 function showElement(element) {
-  element.style.display = "block";
+	element.style.display = "block";
 }
-
+//#endregion
 export { hideElement, showElement };
-//# sourceMappingURL=utils.js.map
+
 //# sourceMappingURL=utils.js.map

package/dist/main/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils.ts"],"names":[],"mappings":"AAAO,SAAS,YAAmC,OAAY,EAAA;AAC7D,EAAA,OAAA,CAAQ,MAAM,OAAU,GAAA,MAAA;AAC1B;AAEO,SAAS,YAAmC,OAAY,EAAA;AAC7D,EAAA,OAAA,CAAQ,MAAM,OAAU,GAAA,OAAA;AAC1B","file":"utils.js","sourcesContent":["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"]}
+{"version":3,"file":"utils.js","names":[],"sources":["../../src/utils.ts"],"sourcesContent":["export function hideElement<T extends HTMLElement>(element: T) {\n\telement.style.display = \"none\";\n}\n\nexport function showElement<T extends HTMLElement>(element: T) {\n\telement.style.display = \"block\";\n}\n"],"mappings":";AAAA,SAAgB,YAAmC,SAAY;CAC9D,QAAQ,MAAM,UAAU;AACzB;AAEA,SAAgB,YAAmC,SAAY;CAC9D,QAAQ,MAAM,UAAU;AACzB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brytdesigns/web-component-drawer",
-  "version": "1.1.12",
+  "version": "3.0.0",
   "description": "Headless drawer web component",
   "main": "./dist/main/index.js",
   "module": "./dist/main/index.js",
@@ -9,7 +9,7 @@
   "exports": {
     ".": {
       "types": "./dist/main/index.d.ts",
-      "module": "./dist/main/index.js"
+      "default": "./dist/main/index.js"
     }
   },
   "files": [
@@ -20,20 +20,19 @@
   "license": "ISC",
   "peer-dependencies": {},
   "dependencies": {
+    "@brytdesigns/web-component-core": "3.0.0",
     "body-scroll-lock-upgrade": "^1.1.0",
     "component-register": "0.8.7",
-    "motion": "^12.40.0",
+    "motion": "^12.43.0",
     "observe-element-in-viewport": "^0.0.15",
-    "solid-element": "^1.9.1",
-    "solid-js": "^1.9.9",
-    "@brytdesigns/web-component-core": "1.1.7"
+    "solid-js": "2.0.0-rc.14"
   },
   "devDependencies": {
-    "dts-bundle-generator": "^9.5.1",
-    "tsup": "^8.4.0"
+    "@repo/vite-config": "0.0.0",
+    "vite": "^8.2.2"
   },
   "scripts": {
-    "build": "tsup --clean",
+    "build": "vite build",
     "typecheck": "tsc --noEmit"
   }
 }