diff --git a/.changeset/unlucky-tables-argue.md b/.changeset/unlucky-tables-argue.md new file mode 100644 index 00000000..8c0c31b6 --- /dev/null +++ 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 index 44d80334..9f406f8a 100644 --- 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 new file mode 100644 index 00000000..f557cacc --- /dev/null +++ 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 index 18226f05..5c18edba 100644 --- 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 index 83e498d2..106a0253 100644 --- 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 index 40e1dc85..ad216a59 100644 --- 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 index 5a5e4811..0f138e5f 100644 --- 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 index d0373ca7..94878105 100644 --- 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 index 59351d8b..3985d853 100644 --- 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)",