@orbitkit/components 0.4.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/astro/drawer/drawer.ts +20 -11
  2. package/dist/astro/dropdown/dropdown.ts +22 -13
  3. package/dist/astro/modal/ModalContent.astro +2 -2
  4. package/dist/astro/modal/modal.ts +21 -12
  5. package/dist/astro/popover/popover.ts +19 -11
  6. package/package.json +1 -1
package/dist/astro/drawer/drawer.ts CHANGED
@@ -31,7 +31,7 @@ export class Drawer {
31
31
 
32
32
  private setupAccessibility() {
33
33
  const title = this.drawer?.querySelector<HTMLElement>(
34
- "h1, h2, h3, h4, h5, h6",
34
+ "h1, h2, h3, h4, h5, h6"
35
35
  );
36
36
 
37
37
  if (title) {
@@ -51,12 +51,14 @@ export class Drawer {
51
51
  this.backdrop?.addEventListener("click", () => this.closeDrawer());
52
52
  document.addEventListener("click", (e) => {
53
53
  const target = e.target as HTMLElement;
54
- if (
55
- this.drawer &&
56
- !this.drawer.contains(target) &&
57
- target !== this.trigger
58
- ) {
59
- this.closeDrawer();
54
+
55
+ if (this.drawer?.dataset.state !== "open") return;
56
+
57
+ const clickedOutside = !this.drawer.contains(target);
58
+ const clickedTrigger = this.trigger?.contains(target);
59
+
60
+ if (clickedOutside && !clickedTrigger) {
61
+ this.closeDrawer(false);
60
62
  }
61
63
  });
62
64
  }
@@ -78,8 +80,9 @@ export class Drawer {
78
80
  }, 0);
79
81
  }
80
82
 
81
- private closeDrawer() {
82
- this.setState("closed");
83
+ private closeDrawer(shouldReturnFocus: boolean = true) {
84
+ this.setState("closed", shouldReturnFocus);
85
+
83
86
  setTimeout(() => {
84
87
  this.backdrop?.classList.add("hidden");
85
88
  this.drawer?.classList.replace("flex", "hidden");
@@ -87,8 +90,14 @@ export class Drawer {
87
90
  }, 200);
88
91
  }
89
92
 
90
- private setState(state: "open" | "closed") {
91
- this.trigger?.focus();
93
+ private setState(
94
+ state: "open" | "closed",
95
+ shouldReturnFocus: boolean = true
96
+ ) {
97
+ if (state === "closed" && shouldReturnFocus) {
98
+ this.trigger?.focus();
99
+ }
100
+
92
101
  this.drawer?.setAttribute("aria-hidden", `${state === "closed"}`);
93
102
  this.drawer?.setAttribute("data-state", state);
94
103
  this.backdrop?.setAttribute("aria-hidden", `${state === "closed"}`);
package/dist/astro/dropdown/dropdown.ts CHANGED
@@ -11,8 +11,8 @@ export class DowndownMenu {
11
11
  this.trigger = this.dropdownMenu.querySelector("[data-trigger]");
12
12
  this.menuItems = Array.from(
13
13
  this.content?.querySelectorAll(
14
- '[role="menuitem"]:not([data-disabled="true"])',
15
- ) || [],
14
+ '[role="menuitem"]:not([data-disabled="true"])'
15
+ ) || []
16
16
  );
17
17
 
18
18
  if (!this.content || !this.trigger) {
@@ -58,12 +58,14 @@ export class DowndownMenu {
58
58
 
59
59
  document.addEventListener("click", (e) => {
60
60
  const target = e.target as HTMLElement;
61
- if (
62
- this.content &&
63
- !this.content.contains(target) &&
64
- target !== this.trigger
65
- ) {
66
- this.closeDropdown();
61
+
62
+ if (this.content?.dataset.state !== "open") return;
63
+
64
+ const clickedOutside = !this.content.contains(target);
65
+ const clickedTrigger = this.trigger?.contains(target);
66
+
67
+ if (clickedOutside && !clickedTrigger) {
68
+ this.closeDropdown(false);
67
69
  }
68
70
  });
69
71
 
@@ -86,7 +88,7 @@ export class DowndownMenu {
86
88
 
87
89
  this.menuItems.forEach((menuItem) => {
88
90
  menuItem.addEventListener("keydown", (e) =>
89
- this.handleMenuKeydown(e, menuItem),
91
+ this.handleMenuKeydown(e, menuItem)
90
92
  );
91
93
  });
92
94
  document.addEventListener("keydown", (e) => this.handleKeydown(e));
@@ -108,15 +110,22 @@ export class DowndownMenu {
108
110
  }, 0);
109
111
  }
110
112
 
111
- private closeDropdown() {
112
- this.trigger?.focus();
113
- this.setState("closed");
113
+ private closeDropdown(shouldReturnFocus: boolean = true) {
114
+ this.setState("closed", shouldReturnFocus);
115
+
114
116
  window.setTimeout(() => {
115
117
  this.content?.classList.add("hidden");
116
118
  }, 100);
117
119
  }
118
120
 
119
- private setState(state: "open" | "closed") {
121
+ private setState(
122
+ state: "open" | "closed",
123
+ shouldReturnFocus: boolean = true
124
+ ) {
125
+ if (state === "closed" && shouldReturnFocus) {
126
+ this.trigger?.focus();
127
+ }
128
+
120
129
  this.content?.setAttribute("aria-hidden", `${state === "closed"}`);
121
130
  this.content?.setAttribute("data-state", state);
122
131
  }
package/dist/astro/modal/ModalContent.astro CHANGED
@@ -37,7 +37,7 @@ const {
37
37
  data-allow-outside-click={allowOutsideClick}
38
38
  class={cn(
39
39
  "hidden fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 bg-surface text-foreground border-border border rounded-lg shadow-sm p-6 w-full max-w-[calc(100%-2rem)] sm:max-w-md transform transition-all ease-in data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100",
40
- className,
40
+ className
41
41
  )}
42
42
  {...attrs}
43
43
  >
@@ -46,7 +46,7 @@ const {
46
46
  <button
47
47
  class="text-foreground hover:bg-muted absolute right-3 top-3 cursor-pointer rounded-lg p-1 transition-colors duration-150"
48
48
  aria-label="close modal"
49
- data-close-modal
49
+ data-close
50
50
  >
51
51
  <svg
52
52
  xmlns="http://www.w3.org/2000/svg"
package/dist/astro/modal/modal.ts CHANGED
@@ -29,7 +29,7 @@ export class Modal {
29
29
 
30
30
  private setupAccessibility() {
31
31
  const title = this.modal?.querySelector<HTMLElement>(
32
- "h1, h2, h3, h4, h5, h6",
32
+ "h1, h2, h3, h4, h5, h6"
33
33
  );
34
34
 
35
35
  if (title) {
@@ -49,12 +49,14 @@ export class Modal {
49
49
  this.backdrop?.addEventListener("click", () => this.closeModal());
50
50
  document.addEventListener("click", (e) => {
51
51
  const target = e.target as HTMLElement;
52
- if (
53
- this.modal &&
54
- !this.modal.contains(target) &&
55
- target !== this.trigger
56
- ) {
57
- this.closeModal();
52
+
53
+ if (this.modal?.dataset.state !== "open") return;
54
+
55
+ const clickedOutside = !this.modal.contains(target);
56
+ const clickedTrigger = this.trigger?.contains(target);
57
+
58
+ if (clickedOutside && !clickedTrigger) {
59
+ this.closeModal(false);
58
60
  }
59
61
  });
60
62
  }
@@ -75,8 +77,9 @@ export class Modal {
75
77
  }, 0);
76
78
  }
77
79
 
78
- private closeModal() {
79
- this.setState("closed");
80
+ private closeModal(shouldReturnFocus: boolean = true) {
81
+ this.setState("closed", shouldReturnFocus);
82
+
80
83
  setTimeout(() => {
81
84
  this.backdrop?.classList.add("hidden");
82
85
  this.modal?.classList.add("hidden");
@@ -84,8 +87,14 @@ export class Modal {
84
87
  }, 200);
85
88
  }
86
89
 
87
- private setState(state: "open" | "closed") {
88
- this.trigger?.focus();
90
+ private setState(
91
+ state: "open" | "closed",
92
+ shouldReturnFocus: boolean = true
93
+ ) {
94
+ if (state === "closed" && shouldReturnFocus) {
95
+ this.trigger?.focus();
96
+ }
97
+
89
98
  this.modal?.setAttribute("aria-hidden", `${state === "closed"}`);
90
99
  this.modal?.setAttribute("data-state", state);
91
100
  this.backdrop?.setAttribute("aria-hidden", `${state === "closed"}`);
@@ -93,7 +102,7 @@ export class Modal {
93
102
  }
94
103
 
95
104
  private handleKeyDown = (event: KeyboardEvent) => {
96
- if (event.key === "Escape" && this.modal!.dataset.status === "open") {
105
+ if (event.key === "Escape" && this.modal!.dataset.state === "open") {
97
106
  this.closeModal();
98
107
  event.preventDefault();
99
108
  }
package/dist/astro/popover/popover.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  export class Popover {
2
- // References to tooltip elements
3
2
  private dropdownMenu: HTMLElement;
4
3
  private trigger: HTMLElement | null;
5
4
  private content: HTMLElement | null;
@@ -52,12 +51,14 @@ export class Popover {
52
51
 
53
52
  document.addEventListener("click", (e) => {
54
53
  const target = e.target as HTMLElement;
55
- if (
56
- this.content &&
57
- !this.content.contains(target) &&
58
- target !== this.trigger
59
- ) {
60
- this.closePopover();
54
+
55
+ if (this.content?.dataset.state !== "open") return;
56
+
57
+ const clickedOutside = !this.content.contains(target);
58
+ const clickedTrigger = this.trigger?.contains(target);
59
+
60
+ if (clickedOutside && !clickedTrigger) {
61
+ this.closePopover(false);
61
62
  }
62
63
  });
63
64
 
@@ -91,15 +92,22 @@ export class Popover {
91
92
  }, 0);
92
93
  }
93
94
 
94
- private closePopover() {
95
- this.trigger?.focus();
96
- this.setState("closed");
95
+ private closePopover(shouldReturnFocus: boolean = true) {
96
+ this.setState("closed", shouldReturnFocus);
97
+
97
98
  window.setTimeout(() => {
98
99
  this.content?.classList.add("hidden");
99
100
  }, 100);
100
101
  }
101
102
 
102
- private setState(state: "open" | "closed") {
103
+ private setState(
104
+ state: "open" | "closed",
105
+ shouldReturnFocus: boolean = true
106
+ ) {
107
+ if (state === "closed" && shouldReturnFocus) {
108
+ this.trigger?.focus();
109
+ }
110
+
103
111
  this.content?.setAttribute("aria-hidden", `${state === "closed"}`);
104
112
  this.content?.setAttribute("data-state", state);
105
113
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orbitkit/components",
3
- "version": "0.4.0",
3
+ "version": "0.5.0",
4
4
  "description": "Customizable UI components designed for seamless integration and scalability.",
5
5
  "main": "./dist/index.js",
6
6
  "type": "module",