feat(menu): new component

README.md

@@ -39,7 +39,7 @@ Enter the component you want most in the components, leave the emojis and follow
 | [Hover Card](https://oku-ui.com/primitives/components/hover-card) | <span><a href="https://www.npmjs.com/package/@oku-ui/hover-card "><img src="https://img.shields.io/npm/v/@oku-ui/hover-card?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/hover-card"> <img src="https://img.shields.io/npm/dm/@oku-ui/hover-card?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/hover-card"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> |
 | [Label](https://oku-ui.com/primitives/components/label) | <span><a href="https://www.npmjs.com/package/@oku-ui/label "><img src="https://img.shields.io/npm/v/@oku-ui/label?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/label"> <img src="https://img.shields.io/npm/dm/@oku-ui/label?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/label"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> |
 | [Menubar](https://github.com/oku-ui/primitives/issues/13) | A menu that appears when a user interacts with an element's trigger | 🚧 In Progress | -  |
-| [Navigation Menu](https://github.com/oku-ui/primitives/issues/14) | A menu that appears when a user interacts with an element's trigger | Not Started | -  |
+| [Navigation Menu](https://github.com/oku-ui/primitives/issues/14) | A collection of links for navigating websites | Not Started | -  |
 | [Popover](https://oku-ui.com/primitives/components/popover) | <span><a href="https://www.npmjs.com/package/@oku-ui/popover "><img src="https://img.shields.io/npm/v/@oku-ui/popover?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/popover"> <img src="https://img.shields.io/npm/dm/@oku-ui/popover?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/popover"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
 | [Progress](https://oku-ui.com/primitives/components/progress) | <span><a href="https://www.npmjs.com/package/@oku-ui/progress "><img src="https://img.shields.io/npm/v/@oku-ui/progress?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/progress"> <img src="https://img.shields.io/npm/dm/@oku-ui/progress?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/progress"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
 | [Radio Group](https://oku-ui.com/primitives/components/radio-group) | <span><a href="https://www.npmjs.com/package/@oku-ui/radio-group "><img src="https://img.shields.io/npm/v/@oku-ui/radio-group?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/radio-group"> <img src="https://img.shields.io/npm/dm/@oku-ui/radio-group?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/radio-group"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
@@ -61,6 +61,10 @@ Enter the component you want most in the components, leave the emojis and follow
 
 [Nuxt Module](https://oku-ui.com/primitives/introduction/nuxt) | <span><a href="https://www.npmjs.com/package/@oku-ui/primitives-nuxt"><img src="https://img.shields.io/npm/v/@oku-ui/primitives-nuxt?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/primitives-nuxt"> <img src="https://img.shields.io/npm/dm/@oku-ui/primitives-nuxt?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="ttps://oku-ui.com/primitives/introduction/nuxt"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
 
+## Core
+
+| [Menu](https://oku-ui.com/primitives/core/menu) | <span><a href="https://www.npmjs.com/package/@oku-ui/menu "><img src="https://img.shields.io/npm/v/@oku-ui/menu?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/menu"> <img src="https://img.shields.io/npm/dm/@oku-ui/menu?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/core/menu"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> |
+
 ## Community
 
 - [Discord](https://chat.productdevbook.com) - To get involved with the Oku community, ask questions and share tips.

package.json

@@ -57,6 +57,7 @@
     "@oku-ui/focus-scope": "workspace:^",
     "@oku-ui/hover-card": "workspace:^",
     "@oku-ui/label": "workspace:^",
+    "@oku-ui/menu": "workspace:^",
     "@oku-ui/popover": "workspace:^",
     "@oku-ui/popper": "workspace:^",
     "@oku-ui/portal": "workspace:^",
@@ -141,6 +142,7 @@
       "@oku-ui/focus-scope": "workspace:^",
       "@oku-ui/hover-card": "workspace:^",
       "@oku-ui/label": "workspace:^",
+      "@oku-ui/menu": "workspace:^",
       "@oku-ui/popover": "workspace:^",
       "@oku-ui/popper": "workspace:^",
       "@oku-ui/portal": "workspace:^",

packages/components/dialog/src/dialogContent.ts

@@ -73,14 +73,14 @@ const dialogContent = defineComponent({
           onInteractOutside: (event) => {
             emit('interactOutside', event)
           },
-          onEscapeKeyDown: (event) => {
-            emit('escapeKeyDown', event)
+          onEscapeKeydown: (event) => {
+            emit('escapeKeydown', event)
           },
           onPointerdownOutside: (event) => {
             emit('pointerdownOutside', event)
           },
-          onFocusoutSide: (event) => {
-            emit('focusoutSide', event)
+          onFocusOutside: (event) => {
+            emit('focusOutside', event)
           },
           onDismiss: () => {
             inject.onOpenChange(false)

packages/components/dialog/src/dialogContentImpl.ts

@@ -107,14 +107,14 @@ const dialogContentImpl = defineComponent({
           'onInteractOutside': (event) => {
             emit('interactOutside', event)
           },
-          'onEscapeKeyDown': (event) => {
-            emit('escapeKeyDown', event)
+          'onEscapeKeydown': (event) => {
+            emit('escapeKeydown', event)
           },
           'onPointerdownOutside': (event) => {
             emit('pointerdownOutside', event)
           },
-          'onFocusoutSide': (event) => {
-            emit('focusoutSide', event)
+          'onFocusOutside': (event) => {
+            emit('focusOutside', event)
           },
           'onDismiss': () => {
             inject.onOpenChange(false)

packages/components/dialog/src/dialogContentModal.ts

@@ -82,11 +82,11 @@ const dialogContentModal = defineComponent({
       onInteractOutside: (event) => {
         emit('interactOutside', event)
       },
-      onEscapeKeyDown: (event) => {
-        emit('escapeKeyDown', event)
+      onEscapeKeydown: (event) => {
+        emit('escapeKeydown', event)
       },
-      onFocusoutSide: (event) => {
-        emit('focusoutSide', event)
+      onFocusOutside: (event) => {
+        emit('focusOutside', event)
       },
       onDismiss: () => {
         inject.onOpenChange(false)

packages/components/hover-card/src/hoverCardContentImpl.ts

@@ -27,7 +27,7 @@ export type HoverCardContentImplEmits = Omit<PopperContentEmits, 'placed'> & {
    * Event handler called when the escape key is down.
    * Can be prevented.
    */
-  escapeKeyDown: [event: DismissableLayerEmits['escapeKeyDown'][0]]
+  escapeKeydown: [event: DismissableLayerEmits['escapeKeydown'][0]]
   /**
    * Event handler called when the a `pointerdown` event happens outside of the `Tooltip`.
    * Can be prevented.
@@ -36,7 +36,7 @@ export type HoverCardContentImplEmits = Omit<PopperContentEmits, 'placed'> & {
   /***
    *
    */
-  focusoutSide: [event: DismissableLayerEmits['focusoutSide'][0]]
+  focusoutSide: [event: DismissableLayerEmits['focusOutside'][0]]
   interactOutside: [event: DismissableLayerEmits['interactOutside'][0]]
   pointerdown: [event: PointerEvent]
   close: []
@@ -50,11 +50,11 @@ export const hoverCardContentImplProps = {
   emits: {
     ...propsOmit(popperContentProps.emits, ['placed']),
     // eslint-disable-next-line unused-imports/no-unused-vars
-    escapeKeyDown: (event: DismissableLayerEmits['escapeKeyDown'][0]) => true,
+    escapeKeyDown: (event: DismissableLayerEmits['escapeKeydown'][0]) => true,
     // eslint-disable-next-line unused-imports/no-unused-vars
     pointerdownOutside: (event: DismissableLayerEmits['pointerdownOutside'][0]) => true,
     // eslint-disable-next-line unused-imports/no-unused-vars
-    focusoutSide: (event: DismissableLayerEmits['focusoutSide'][0]) => true,
+    focusoutSide: (event: DismissableLayerEmits['focusOutside'][0]) => true,
     // eslint-disable-next-line unused-imports/no-unused-vars
     interactOutside: (event: DismissableLayerEmits['interactOutside'][0]) => true,
     // eslint-disable-next-line unused-imports/no-unused-vars
@@ -153,13 +153,13 @@ const hoverCardContentImpl = defineComponent({
       onInteractOutside(event) {
         emit('interactOutside', event)
       },
-      onEscapeKeyDown(event) {
+      onEscapeKeydown(event) {
         emit('escapeKeyDown', event)
       },
       onPointerdownOutside(event) {
         emit('pointerdownOutside', event)
       },
-      onFocusoutSide: composeEventHandlers<HoverCardContentImplEmits['focusoutSide'][0]>((el) => {
+      onFocusOutside: composeEventHandlers<HoverCardContentImplEmits['focusoutSide'][0]>((el) => {
         emit('focusoutSide', el)
       }, (event) => {
         event.preventDefault()

packages/components/hover-card/src/stories/HoverCardDemo.vue

@@ -23,8 +23,6 @@ export interface OkuHoverCardProps {
 withDefaults(defineProps<OkuHoverCardProps>(), {
   template: 'Basic',
 })
-
-const template = 'flex flex-col justify-center'
 </script>
 
 <template>

packages/components/popover/src/popoverContentImpl.ts

@@ -50,14 +50,14 @@ const popoverContentImpl = defineComponent({
         onInteractOutside: (event) => {
           emit('interactOutside', event)
         },
-        onEscapeKeyDown: (event) => {
-          emit('escapeKeyDown', event)
+        onEscapeKeydown: (event) => {
+          emit('escapeKeydown', event)
         },
         onPointerdownOutside: (event) => {
           emit('pointerdownOutside', event)
         },
-        onFocusoutSide: (event) => {
-          emit('focusoutSide', event)
+        onFocusOutside: (event) => {
+          emit('focusOutside', event)
         },
         onDismiss: () => {
           inject.onOpenChange(false)

packages/components/popover/src/popoverContentModal.ts

@@ -56,8 +56,8 @@ const popoverContentModal = defineComponent({
         }, { checkForDefaultPrevented: false }),
         // When focus is trapped, a `focusout` event may still happen.
         // We make sure we don't trigger our `onDismiss` in such case.
-        onFocusoutSide: composeEventHandlers<PopoverContentTypeEmits['focusoutSide'][0]>((el) => {
-          emit('focusoutSide', el)
+        onFocusOutside: composeEventHandlers<PopoverContentTypeEmits['focusOutside'][0]>((el) => {
+          emit('focusOutside', el)
         }, event => event.preventDefault(), { checkForDefaultPrevented: false }),
       }, {
         default: () => slots.default?.(),

packages/components/popover/src/popoverContentNonModal.ts

@@ -39,7 +39,7 @@ const popoverContentNonModal = defineComponent({
         hasInteractedOutsideRef.value = false
         hasPointerDownOutsideRef.value = false
       }),
-      onInteractOutside: composeEventHandlers<PopoverContentTypeEmits['focusoutSide'][0]>((event) => {
+      onInteractOutside: composeEventHandlers<PopoverContentTypeEmits['focusOutside'][0]>((event) => {
         emit('interactOutside', event)
 
         if (!event.defaultPrevented) {

packages/components/primitives/package.json

@@ -46,6 +46,7 @@
     "@oku-ui/dialog": "latest",
     "@oku-ui/hover-card": "latest",
     "@oku-ui/label": "latest",
+    "@oku-ui/menu": "latest",
     "@oku-ui/popover": "latest",
     "@oku-ui/progress": "latest",
     "@oku-ui/radio-group": "latest",

packages/components/toast/src/toast-impl.ts

@@ -57,7 +57,7 @@ export interface ToastImplProps extends ToastImplPrivateProps, PrimitiveProps {
 }
 
 export type ToastImplEmits = {
-  escapeKeyDown: [event: DismissableLayerEmits['escapeKeyDown'][0]]
+  escapeKeydown: [event: DismissableLayerEmits['escapeKeydown'][0]]
   close: []
   pause: []
   resume: []
@@ -86,7 +86,7 @@ export const toastImplProps = {
   },
   emits: {
     // eslint-disable-next-line unused-imports/no-unused-vars
-    escapeKeyDown: (event: DismissableLayerEmits['escapeKeyDown'][0]) => true,
+    escapeKeydown: (event: DismissableLayerEmits['escapeKeydown'][0]) => true,
     pause: () => true,
     resume: () => true,
     // eslint-disable-next-line unused-imports/no-unused-vars
@@ -242,8 +242,8 @@ const toastImpl = defineComponent({
         h(Teleport, { to: inject.viewport.value }, h(CollectionItemSlot, { scope: props.scopeOkuToast }, {
           default: () => h(OkuDismissableLayer, {
             asChild: true,
-            onEscapeKeyDown: composeEventHandlers<ToastImplEmits['escapeKeyDown'][0]>((event) => {
-              emit('escapeKeyDown', event)
+            onEscapeKeydown: composeEventHandlers<ToastImplEmits['escapeKeydown'][0]>((event) => {
+              emit('escapeKeydown', event)
             }, () => {
               if (!inject.isFocusedToastEscapeKeyDownRef.value)
                 handleClose()
@@ -270,7 +270,7 @@ const toastImpl = defineComponent({
               }, (event) => {
                 if (event.key !== 'Escape')
                   return
-                emit('escapeKeyDown', event)
+                emit('escapeKeydown', event)
                 if (!event.defaultPrevented) {
                   inject.isFocusedToastEscapeKeyDownRef.value = true
                   handleClose()

packages/components/tooltip/src/tooltipContentImpl.ts

@@ -37,7 +37,7 @@ export type TooltipContentImplEmits = Omit<PopperContentEmits, 'placed'> & {
    * Event handler called when the escape key is down.
    * Can be prevented.
    */
-  escapeKeyDown: [event: DismissableLayerEmits['escapeKeyDown'][0]]
+  escapeKeydown: [event: DismissableLayerEmits['escapeKeydown'][0]]
   /**
    * Event handler called when the a `pointerdown` event happens outside of the `Tooltip`.
    * Can be prevented.
@@ -58,7 +58,7 @@ export const tooltipContentImplProps = {
   emits: {
     ...propsOmit(popperContentProps.emits, ['placed']),
     // eslint-disable-next-line unused-imports/no-unused-vars
-    escapeKeyDown: (event: DismissableLayerEmits['escapeKeyDown'][0]) => true,
+    escapeKeydown: (event: DismissableLayerEmits['escapeKeydown'][0]) => true,
     // eslint-disable-next-line unused-imports/no-unused-vars
     pointerdownOutside: (event: DismissableLayerEmits['pointerdownOutside'][0]) => true,
     close: () => true,
@@ -138,13 +138,13 @@ const tooltipContentImpl = defineComponent({
     return () => h(OkuDismissableLayer, {
       asChild: true,
       disableOutsidePointerEvents: false,
-      onEscapeKeyDown(event) {
-        emit('escapeKeyDown', event)
+      onEscapeKeydown(event) {
+        emit('escapeKeydown', event)
       },
       onPointerdownOutside(event: TooltipContentImplEmits['pointerdownOutside'][0]) {
         emit('pointerdownOutside', event)
       },
-      onFocusoutSide(event) {
+      onFocusOutside(event) {
         event.preventDefault()
       },
       onDismiss() {