feat(dismissable-layer): new dismissable layer component

package.json

@@ -44,7 +44,8 @@
     "@oku-ui/collapsible": "workspace:^",
     "@oku-ui/collection": "workspace:^",
     "@oku-ui/direction": "workspace:^",
-    "@oku-ui/focus-group": "workspace:^",
+    "@oku-ui/dismissable-layer": "workspace:^",
+    "@oku-ui/focus-guards": "workspace:^",
     "@oku-ui/focus-scope": "workspace:^",
     "@oku-ui/label": "workspace:^",
     "@oku-ui/popper": "workspace:^",

packages/components/dismissable-layer/README.md

@@ -0,0 +1,10 @@
+# `@oku-ui/dismissable-layer`
+
+## Installation
+
+```sh
+$ pnpm add @oku-ui/dismissable-layer
+```
+
+## Usage
+...

packages/components/dismissable-layer/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@oku-ui/dismissable-layer",
+  "type": "module",
+  "version": "0.0.0",
+  "license": "MIT",
+  "source": "src/index.ts",
+  "funding": "https://github.com/sponsors/productdevbook",
+  "homepage": "https://oku-ui.com/primitives",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/oku-ui/primitives.git",
+    "directory": "packages/components/dismissable-layer"
+  },
+  "bugs": {
+    "url": "https://github.com/oku-ui/primitives/issues"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "dependencies": {
+    "@oku-ui/primitive": "latest",
+    "@oku-ui/provide": "latest",
+    "@oku-ui/use-composable": "latest",
+    "@oku-ui/utils": "latest"
+  },
+  "devDependencies": {
+    "tsconfig": "workspace:^"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

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

@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { OkuDismissableLayer } from './DismissableLayer'
+
+// skipping this test for now. There's an error "TypeError: Cannot read properties of undefined (reading 'devtoolsRawSetupState')"
+describe.skip('DismissableLayer', () => {
+  it('renders the component correctly', () => {
+    const wrapper = mount(OkuDismissableLayer)
+
+    // You can add more specific assertions based on your component's structure and props
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.find('div').exists()).toBe(true)
+  })
+
+  it('emits events when interactions happen outside the layer', async () => {
+    const wrapper = mount(OkuDismissableLayer)
+
+    // Simulate a click outside the layer
+    await wrapper.trigger('pointerdown', { target: document.body })
+
+    // Check if the emitted events are correct
+    expect(wrapper.emitted('pointerDownOutside')).toHaveLength(1)
+    expect(wrapper.emitted('interactOutside')).toHaveLength(1)
+    expect(wrapper.emitted('dismiss')).toHaveLength(1)
+  })
+
+  it('emits events when Escape key is pressed', async () => {
+    const wrapper = mount(OkuDismissableLayer)
+
+    // Simulate pressing the Escape key
+    await wrapper.trigger('keydown', { key: 'Escape' })
+
+    // Check if the emitted events are correct
+    expect(wrapper.emitted('escapeKeyDown')).toHaveLength(1)
+    expect(wrapper.emitted('dismiss')).toHaveLength(1)
+  })
+})