fix: #160

kobaltedev · Mar 30, 2023 · 8a1b75a · 8a1b75a
1 parent 80cc970
commit 8a1b75a
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 43 deletions.
diff --git a/.changeset/unlucky-tables-argue.md b/.changeset/unlucky-tables-argue.md
@@ -0,0 +1,5 @@
+---
+"@kobalte/core": patch
+---
+
+fix: #160
diff --git a/apps/docs/src/VERSIONS.ts b/apps/docs/src/VERSIONS.ts
@@ -15,6 +15,7 @@ export const CORE_VERSIONS = [
   "0.7.4",
   "0.8.0",
   "0.8.1",
+  "0.8.2",
 ].reverse();
 
 export const LATEST_CORE_CHANGELOG_URL = `/docs/changelog/${CORE_VERSIONS[0].replaceAll(".", "-")}`;

diff --git a/apps/docs/src/routes/docs/changelog/0-8-2.mdx b/apps/docs/src/routes/docs/changelog/0-8-2.mdx
@@ -0,0 +1,7 @@
+# v0.8.2
+
+**March 30, 2023**.
+
+## Bug fixes
+
+- [#160](https://github.com/kobaltedev/kobalte/pull/160)
diff --git a/packages/core/src/dialog/dialog-content.tsx b/packages/core/src/dialog/dialog-content.tsx
@@ -174,8 +174,7 @@ export function DialogContent(props: DialogContentProps) {
         role="dialog"
         id={local.id}
         tabIndex={-1}
-        isDismissed={!context.isOpen()}
-        disableOutsidePointerEvents={context.isOpen() && context.isModal()}
+        disableOutsidePointerEvents={context.isModal() && context.isOpen()}
         excludedElements={[context.triggerRef]}
         aria-labelledby={context.titleId()}
         aria-describedby={context.descriptionId()}

diff --git a/packages/core/src/dismissable-layer/dismissable-layer.tsx b/packages/core/src/dismissable-layer/dismissable-layer.tsx
@@ -13,7 +13,7 @@
  */
 
 import { contains, getDocument, mergeRefs, OverrideComponentProps } from "@kobalte/utils";
-import { Accessor, createEffect, on, onCleanup, splitProps } from "solid-js";
+import { Accessor, createEffect, on, onCleanup, onMount, splitProps } from "solid-js";
 
 import { AsChildProp, Polymorphic } from "../polymorphic";
 import {
@@ -31,9 +31,6 @@ import {
 import { layerStack } from "./layer-stack";
 
 export interface DismissableLayerOptions extends AsChildProp {
-  /** Whether the layer is considered dismissed, regardless if it is mounted or not. */
-  isDismissed: boolean;
-
   /**
    * When `true`, hover/focus/click interactions will be disabled on elements outside
    * the layer. Users will need to click twice on outside elements to
@@ -83,7 +80,6 @@ export function DismissableLayer(props: DismissableLayerProps) {
 
   const [local, others] = splitProps(props, [
     "ref",
-    "isDismissed",
     "disableOutsidePointerEvents",
     "excludedElements",
     "onEscapeKeyDown",
@@ -141,7 +137,6 @@ export function DismissableLayer(props: DismissableLayerProps) {
 
   createInteractOutside(
     {
-      isDisabled: () => local.isDismissed,
       shouldExcludeElement,
       onPointerDownOutside,
       onFocusOutside,
@@ -150,7 +145,6 @@ export function DismissableLayer(props: DismissableLayerProps) {
   );
 
   createEscapeKeyDown({
-    isDisabled: () => local.isDismissed,
     ownerDocument: () => getDocument(ref),
     onEscapeKeyDown: e => {
       if (!ref || !layerStack.isTopMostLayer(ref)) {
@@ -166,46 +160,44 @@ export function DismissableLayer(props: DismissableLayerProps) {
     },
   });
 
-  createEffect(
-    on([() => ref, () => local.isDismissed], ([ref, isDismissed]) => {
-      if (!ref || isDismissed) {
-        return;
-      }
+  onMount(() => {
+    if (!ref) {
+      return;
+    }
 
-      layerStack.addLayer({
-        node: ref,
-        isPointerBlocking: local.disableOutsidePointerEvents,
-        dismiss: local.onDismiss,
-      });
+    layerStack.addLayer({
+      node: ref,
+      isPointerBlocking: local.disableOutsidePointerEvents,
+      dismiss: local.onDismiss,
+    });
 
-      const unregisterFromParentLayer = parentContext?.registerNestedLayer(ref);
+    const unregisterFromParentLayer = parentContext?.registerNestedLayer(ref);
 
-      layerStack.assignPointerEventToLayers();
+    layerStack.assignPointerEventToLayers();
 
-      layerStack.disableBodyPointerEvents(ref);
+    layerStack.disableBodyPointerEvents(ref);
 
-      onCleanup(() => {
-        if (!ref) {
-          return;
-        }
+    onCleanup(() => {
+      if (!ref) {
+        return;
+      }
 
-        layerStack.removeLayer(ref);
+      layerStack.removeLayer(ref);
 
-        unregisterFromParentLayer?.();
+      unregisterFromParentLayer?.();
 
-        // Re-assign pointer event to remaining layers.
-        layerStack.assignPointerEventToLayers();
+      // Re-assign pointer event to remaining layers.
+      layerStack.assignPointerEventToLayers();
 
-        layerStack.restoreBodyPointerEvents(ref);
-      });
-    })
-  );
+      layerStack.restoreBodyPointerEvents(ref);
+    });
+  });
 
   createEffect(
     on(
-      [() => ref, () => local.isDismissed, () => local.disableOutsidePointerEvents],
-      ([ref, isDismissed, disableOutsidePointerEvents]) => {
-        if (!ref || isDismissed) {
+      [() => ref, () => local.disableOutsidePointerEvents],
+      ([ref, disableOutsidePointerEvents]) => {
+        if (!ref) {
           return;
         }
 

diff --git a/packages/core/src/hover-card/hover-card-content.tsx b/packages/core/src/hover-card/hover-card-content.tsx
@@ -30,7 +30,6 @@ export function HoverCardContent(props: HoverCardContentProps) {
             context.setContentRef(el);
             context.contentPresence.setRef(el);
           }, local.ref)}
-          isDismissed={!context.isOpen()}
           disableOutsidePointerEvents={false}
           style={{
             "--kb-hovercard-content-transform-origin": "var(--kb-popper-content-transform-origin)",

diff --git a/packages/core/src/menu/menu-content-base.tsx b/packages/core/src/menu/menu-content-base.tsx
@@ -205,7 +205,6 @@ export function MenuContentBase(props: MenuContentBaseProps) {
           role="menu"
           id={local.id}
           tabIndex={selectableList.tabIndex()}
-          isDismissed={!context.isOpen()}
           disableOutsidePointerEvents={isRootModalContent() && context.isOpen()}
           excludedElements={[context.triggerRef]}
           style={{

diff --git a/packages/core/src/popover/popover-content.tsx b/packages/core/src/popover/popover-content.tsx
@@ -174,8 +174,7 @@ export function PopoverContent(props: PopoverContentProps) {
           role="dialog"
           id={local.id}
           tabIndex={-1}
-          isDismissed={!context.isOpen()}
-          disableOutsidePointerEvents={context.isOpen() && context.isModal()}
+          disableOutsidePointerEvents={context.isModal() && context.isOpen()}
           excludedElements={[context.triggerRef]}
           style={{
             "--kb-popover-content-transform-origin": "var(--kb-popper-content-transform-origin)",

diff --git a/packages/core/src/select/select-content.tsx b/packages/core/src/select/select-content.tsx
@@ -89,8 +89,7 @@ export function SelectContent(props: SelectContentProps) {
             context.contentPresence.setRef(el);
             ref = el;
           }, local.ref)}
-          isDismissed={!context.isOpen()}
-          disableOutsidePointerEvents={context.isOpen() && context.isModal()}
+          disableOutsidePointerEvents={context.isModal() && context.isOpen()}
           excludedElements={[context.triggerRef]}
           style={{
             "--kb-select-content-transform-origin": "var(--kb-popper-content-transform-origin)",