fix: #39

kobaltedev · Jan 15, 2023 · 301be43 · 301be43
1 parent 89072e2
commit 301be43
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 2 deletions.
diff --git a/packages/core/dev/App.tsx b/packages/core/dev/App.tsx
@@ -1,6 +1,6 @@
 import { ComponentProps, For } from "solid-js";
 
-import { Calendar, I18nProvider } from "../src";
+import { Calendar, Checkbox, I18nProvider, Popover } from "../src";
 
 function CalendarMonth(props: ComponentProps<typeof Calendar.Month>) {
   return (
@@ -41,6 +41,27 @@ export default function App() {
         <Calendar.Root class="calendar" visibleMonths={months.length}>
           <For each={months}>{offset => <CalendarMonth offset={offset} />}</For>
         </Calendar.Root>
+        <Checkbox.Root class="checkbox">
+          <Checkbox.Input />
+          <Checkbox.Control class="checkbox__control">
+            <Checkbox.Indicator>x</Checkbox.Indicator>
+          </Checkbox.Control>
+          <Checkbox.Label class="checkbox__label">Subscribe</Checkbox.Label>
+        </Checkbox.Root>
+        <Popover.Root>
+          <Popover.Trigger>Open</Popover.Trigger>
+          <Popover.Portal>
+            <Popover.Content>
+              <Checkbox.Root class="checkbox">
+                <Checkbox.Input />
+                <Checkbox.Control class="checkbox__control">
+                  <Checkbox.Indicator>x</Checkbox.Indicator>
+                </Checkbox.Control>
+                <Checkbox.Label class="checkbox__label">Subscribe</Checkbox.Label>
+              </Checkbox.Root>
+            </Popover.Content>
+          </Popover.Portal>
+        </Popover.Root>
       </I18nProvider>
     </div>
   );

diff --git a/packages/core/dev/index.css b/packages/core/dev/index.css
@@ -102,3 +102,32 @@
   color: gray;
   opacity: 0.4;
 }
+
+/**/
+
+.checkbox {
+  display: inline-flex;
+  align-items: center;
+}
+.checkbox__control {
+  height: 20px;
+  width: 20px;
+  border-radius: 6px;
+  border: 1px solid hsl(240 5% 84%);
+  background-color: hsl(240 6% 90%);
+}
+.checkbox__control[data-focus-visible] {
+  outline: 2px solid hsl(200 98% 39%);
+  outline-offset: 2px;
+}
+.checkbox__control[data-checked] {
+  border-color: hsl(200 98% 39%);
+  background-color: hsl(200 98% 39%);
+  color: white;
+}
+.checkbox__label {
+  margin-left: 6px;
+  color: hsl(240 6% 10%);
+  font-size: 14px;
+  user-select: none;
+}
diff --git a/packages/core/src/primitives/create-focus-visible/create-focus-visible.ts b/packages/core/src/primitives/create-focus-visible/create-focus-visible.ts
@@ -59,6 +59,19 @@ function handlePointerEvent(e: PointerEvent | MouseEvent) {
   currentModality = "pointer";
   if (e.type === "mousedown" || e.type === "pointerdown") {
     hasEventBeforeFocus = true;
+    const target = e.composedPath ? e.composedPath()[0] : e.target;
+
+    let matches = false;
+    try {
+      matches = (target as any).matches(":focus-visible");
+    } catch {
+      // noop
+    }
+
+    if (matches) {
+      return;
+    }
+
     triggerChangeHandlers("pointer", e);
   }
 }
@@ -72,7 +85,7 @@ function handleClickEvent(e: MouseEvent) {
 
 function handleWindowFocus(e: FocusEvent) {
   // Firefox fires two extra focus events when the user first clicks into an iframe:
-  // first on the window, then on the document. We ignore these events so they don't
+  // first on the window, then on the document. We ignore these events, so they don't
   // cause keyboard focus rings to appear.
   if (e.target === window || e.target === document) {
     return;