fix(dismissable-layer): share data

CONTRIBUTING.md

@@ -50,7 +50,8 @@ pnpm build core utils # Build only core and utils package (packages/core) check
 
 ```shell
 pnpm dev
-pnpm build
+pnpm build # Build all packages with cache (packages/components)
+pnpm build:skip # Build without cache (packages/components)
 
 pnpm story # Run Storybook
 pnpm build:storybook # Build Storybook

package.json

@@ -16,6 +16,7 @@
   "scripts": {
     "dev": "esno scripts/dev.ts",
     "build": "pnpm nx run-many -t build",
+    "build:skip": "pnpm nx run-many -t build --skip-nx-cache",
     "p:build": "tsup",
     "story": "pnpm storybook dev -p 6006 --no-open",
     "lint": "eslint . --cache ",

packages/components/dismissable-layer/src/DismissableLayer.ts

@@ -11,10 +11,10 @@ import {
   defineComponent,
   h,
   nextTick,
-  onBeforeUnmount,
   onMounted,
-  provide,
+  onUnmounted,
   ref,
+  shallowReactive,
   toRefs,
   watchEffect,
 } from 'vue'
@@ -26,9 +26,12 @@ import {
   usePointerdownOutside,
 } from './util'
 
-/* -------------------------------------------------------------------------------------------------
- * DismissableLayer
- * ----------------------------------------------------------------------------------------------- */
+export const DismissableLayerContext = shallowReactive({
+  layersRoot: new Set<DismissableLayerElement>(),
+  layersWithOutsidePointerEventsDisabled: new Set<DismissableLayerElement>(),
+  branches: new Set<DismissableLayerElement>(),
+})
+
 export const INJECT_UPDATE = 'dismissableLayer.update'
 export const POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside'
 export const FOCUS_OUTSIDE = 'dismissableLayer.focusOutside'
@@ -38,7 +41,7 @@ let originalBodyPointerEvents: string
 export const DISMISSABLE_NAME = 'OkuDismissableLayer'
 export const DismissableLayerProvideKey = Symbol('DismissableLayerProvide')
 
-export type DismissableLayerNaviteElement = OkuElement<'div'>
+export type DismissableLayerNativeElement = OkuElement<'div'>
 export type DismissableLayerElement = HTMLDivElement
 
 export type DismissableLayerProvideValue = {
@@ -136,15 +139,8 @@ const DismissableLayer = defineComponent({
   setup(props, { attrs, emit, slots }) {
     const { disableOutsidePointerEvents, asChild } = toRefs(props)
 
-    const layersRoot = ref<Set<DismissableLayerElement>>(new Set())
-    const layersWithOutsidePointerEventsDisabled = ref(new Set<DismissableLayerElement>())
-    const branches = ref(new Set<DismissableLayerElement>())
+    const provide = DismissableLayerContext
 
-    provide<DismissableLayerProvideValue, symbol>(DismissableLayerProvideKey, {
-      layers: layersRoot,
-      layersWithOutsidePointerEventsDisabled,
-      branches,
-    })
     const node = ref<HTMLDivElement | null>(null)
     const ownerDocument = computed(
       () => node.value?.ownerDocument ?? globalThis?.document,
@@ -153,11 +149,11 @@ const DismissableLayer = defineComponent({
     const forwardedRef = useForwardRef()
     const composedRefs = useComposedRefs(node, forwardedRef)
 
-    const layers = computed(() => Array.from(layersRoot.value))
+    const layers = computed(() => Array.from(provide.layersRoot))
 
     const highestLayerWithOutsidePointerEventsDisabled = computed(() => {
       const [highestLayerWithOutsidePointerEventsDisabled] = [
-        ...layersWithOutsidePointerEventsDisabled.value,
+        ...provide.layersWithOutsidePointerEventsDisabled,
       ].slice(-1)
 
       return highestLayerWithOutsidePointerEventsDisabled
@@ -173,12 +169,12 @@ const DismissableLayer = defineComponent({
     const isPointerEventsEnabled = computed(() => index.value >= highestLayerWithOutsidePointerEventsDisabledIndex.value)
 
     const isBodyPointerEventsDisabled = computed(
-      () => layersWithOutsidePointerEventsDisabled.value.size > 0,
+      () => provide.layersWithOutsidePointerEventsDisabled.size > 0,
     )
 
     const pointerdownOutside = usePointerdownOutside((event) => {
       const target = event.target as HTMLElement
-      const isPointerDownOnBranch = [...branches.value].some(branch =>
+      const isPointerDownOnBranch = [...provide.branches].some(branch =>
         branch.contains(target),
       )
 
@@ -194,7 +190,7 @@ const DismissableLayer = defineComponent({
 
     const focusoutSide = useFocusoutSide((event) => {
       const target = event.target as HTMLElement
-      const isFocusInBranch = [...branches.value].some(branch =>
+      const isFocusInBranch = [...provide.branches].some(branch =>
         branch.contains(target),
       )
 
@@ -209,7 +205,7 @@ const DismissableLayer = defineComponent({
     }, ownerDocument.value)
 
     useEscapeKeydown((event) => {
-      const isHighestLayer = index.value === layersRoot.value.size - 1
+      const isHighestLayer = index.value === provide.layersRoot.size - 1
 
       if (!isHighestLayer)
         return
@@ -225,23 +221,23 @@ const DismissableLayer = defineComponent({
         return
 
       if (disableOutsidePointerEvents.value) {
-        if (layersWithOutsidePointerEventsDisabled.value.size === 0) {
+        if (provide.layersWithOutsidePointerEventsDisabled.size === 0) {
           originalBodyPointerEvents
             = ownerDocument.value.body.style.pointerEvents
           ownerDocument.value.body.style.pointerEvents = 'none'
         }
         await nextTick()
-        layersWithOutsidePointerEventsDisabled.value.add(node.value)
+        provide.layersWithOutsidePointerEventsDisabled.add(node.value)
       }
 
-      layersRoot.value.add(node.value)
+      provide.layersRoot.add(node.value)
 
       dispatchUpdate()
 
       onInvalidate(() => {
         if (
           disableOutsidePointerEvents.value
-          && layersWithOutsidePointerEventsDisabled.value.size === 1
+          && provide.layersWithOutsidePointerEventsDisabled.size === 1
         ) {
           ownerDocument.value.body.style.pointerEvents
             = originalBodyPointerEvents
@@ -259,8 +255,8 @@ const DismissableLayer = defineComponent({
       onInvalidate(() => {
         if (!node.value)
           return
-        layersRoot.value.delete(node.value)
-        layersWithOutsidePointerEventsDisabled.value.delete(node.value)
+        provide.layersRoot.delete(node.value)
+        provide.layersWithOutsidePointerEventsDisabled.delete(node.value)
         dispatchUpdate()
       })
     })
@@ -271,10 +267,9 @@ const DismissableLayer = defineComponent({
       document.addEventListener(INJECT_UPDATE, handleUpdate)
     })
 
-    onBeforeUnmount(() => {
+    onUnmounted(() => {
       document.removeEventListener(INJECT_UPDATE, handleUpdate)
     })
-
     const originalReturn = () =>
       h(
         Primitive.div,
@@ -311,5 +306,5 @@ const DismissableLayer = defineComponent({
 
 export const OkuDismissableLayer = DismissableLayer as typeof DismissableLayer &
 (new () => {
-  $props: DismissableLayerNaviteElement
+  $props: DismissableLayerNativeElement
 })

packages/components/dismissable-layer/src/DismissableLayerBranch.ts

@@ -3,10 +3,9 @@ import type {
   OkuElement,
   PrimitiveProps,
 } from '@oku-ui/primitive'
-import { defineComponent, h, inject, ref, watchEffect } from 'vue'
+import { defineComponent, h, ref, watchEffect } from 'vue'
 import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable'
-import type { DismissableLayerProvideValue } from './DismissableLayer'
-import { DismissableLayerProvideKey } from './DismissableLayer'
+import { DismissableLayerContext } from './DismissableLayer'
 
 /* -------------------------------------------------------------------------------------------------
  * DismissableLayerBranch
@@ -25,22 +24,21 @@ const DismissableLayerBranch = defineComponent({
     ...primitiveProps,
   },
   setup(props, { attrs, slots }) {
-    const _inject = inject(
-      DismissableLayerProvideKey,
-    ) as DismissableLayerProvideValue
+    const provide = DismissableLayerContext
 
     const node = ref<HTMLDivElement | null>()
-
     const forwardedRef = useForwardRef()
-    const composedRefs = useComposedRefs(node, forwardedRef)
+    const composedRefs = useComposedRefs(forwardedRef, node)
 
     watchEffect((onInvalidate) => {
-      if (node.value)
-        _inject.branches.value.add(node.value)
+      const _node = node.value
+
+      if (_node)
+        provide.branches.add(_node)
 
       onInvalidate(() => {
-        if (node.value && node.value)
-          _inject.branches.value.delete(node.value)
+        if (_node)
+          provide.branches.delete(_node)
       })
     })