@mekari/pixel3-popover 0.0.4 → 0.0.6-dev.0

package/dist/{chunk-SMKHJPNG.mjs → chunk-52BTWLDY.mjs}

@@ -1,9 +1,9 @@
 import {
   popoverProps
-} from "./chunk-3VISLXE6.mjs";
+} from "./chunk-ACYTEMPK.mjs";
 import {
   usePopover
-} from "./chunk-EOUKE4WB.mjs";
+} from "./chunk-MPDM4USP.mjs";
 import {
   PopoverProvider
 } from "./chunk-2ZUCITXI.mjs";

package/dist/{chunk-KRK533DP.mjs → chunk-5LOKC2YN.mjs}

@@ -1,6 +1,6 @@
 import {
   usePopoverList
-} from "./chunk-EOUKE4WB.mjs";
+} from "./chunk-MPDM4USP.mjs";
 
 // src/list.tsx
 import { createVNode as _createVNode } from "vue";

package/dist/{chunk-3VISLXE6.mjs → chunk-ACYTEMPK.mjs}

@@ -14,7 +14,7 @@ var popoverProps = {
   triggerId: {
     type: String
   },
-  defaultIsOpen: {
+  isDefaultOpen: {
     type: Boolean
   },
   isManual: {
@@ -23,21 +23,18 @@ var popoverProps = {
   isOpen: {
     type: Boolean
   },
-  returnFocusOnClose: {
+  isFocusOnClose: {
     type: Boolean
   },
-  initialFocusRef: {
-    type: Boolean
-  },
-  closeOnBlur: {
+  isCloseOnBlur: {
     type: Boolean,
     default: true
   },
-  closeOnEscape: {
+  isCloseOnEscape: {
     type: Boolean,
     default: true
   },
-  closeOnSelect: {
+  isCloseOnSelect: {
     type: Boolean,
     default: false
   },

package/dist/chunk-HXE2PLZA.mjs

@@ -0,0 +1,33 @@
+import {
+  popoverListItemProps
+} from "./chunk-ACYTEMPK.mjs";
+import {
+  usePopoverListItem
+} from "./chunk-MPDM4USP.mjs";
+
+// src/list-item.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { MpIcon } from "@mekari/pixel3-icon";
+var MpPopoverListItem = defineComponent({
+  name: "MpPopoverListItem",
+  props: popoverListItemProps,
+  setup(props, {
+    slots
+  }) {
+    const {
+      rootAttrs,
+      contentAttrs
+    } = usePopoverListItem(props);
+    return () => {
+      return _createVNode("button", rootAttrs.value, [_createVNode("div", contentAttrs, [slots.default(), props.isArrow ? _createVNode(MpIcon, {
+        "name": "chevrons-right",
+        "size": "sm"
+      }, null) : null])]);
+    };
+  }
+});
+
+export {
+  MpPopoverListItem
+};

package/dist/{chunk-EOUKE4WB.mjs → chunk-MPDM4USP.mjs}

@@ -12,7 +12,7 @@ import { useId, onClickOutside, onKeyStroke, unrefElement } from "@mekari/pixel3
 import { popoverContentRecipe, popoverListRecipe, popoverListItemRecipe } from "@mekari/pixel3-styled-system/recipes";
 import { flex } from "@mekari/pixel3-styled-system/patterns";
 function usePopover(props, emit) {
-  const isOpen = ref(props.defaultIsOpen);
+  const isOpen = ref(props.isDefaultOpen);
   const triggerNode = ref(null);
   const contentNode = ref(null);
   const placement = ref(props.placement);
@@ -26,27 +26,27 @@ function usePopover(props, emit) {
     whileElementsMounted: autoUpdate
   });
   function onOpenPopover() {
+    if (props.isManual)
+      return;
+    isOpen.value = true;
     emit("open", {
       isOpen,
       triggerNode,
       contentNode,
       placement
     });
-    if (props.isManual)
-      return;
-    isOpen.value = true;
   }
   __name(onOpenPopover, "onOpenPopover");
   function onClosePopover() {
+    if (props.isManual)
+      return;
+    isOpen.value = false;
     emit("close", {
       isOpen,
       triggerNode,
       contentNode,
       placement
     });
-    if (props.isManual)
-      return;
-    isOpen.value = false;
   }
   __name(onClosePopover, "onClosePopover");
   function setHovering(value) {
@@ -80,7 +80,7 @@ function useSingletonPopover(props, emit) {
   const {
     triggerNode
   } = toRefs(props);
-  const isOpen = ref(props.defaultIsOpen);
+  const isOpen = ref(props.isDefaultOpen);
   const contentNode = ref(null);
   const placement = ref(props.placement);
   const middleware = ref([offset(4), flip(), shift()]);
@@ -189,8 +189,8 @@ function usePopoverContent(props, emit) {
   } = usePopoverContext();
   const {
     id,
-    closeOnBlur,
-    closeOnEscape,
+    isCloseOnBlur,
+    isCloseOnEscape,
     trigger,
     isAdaptiveWidth,
     usePortal
@@ -199,14 +199,14 @@ function usePopoverContent(props, emit) {
   const getId = computed(() => (id == null ? void 0 : id.value) ? `popover-content-${id.value}` : `popover-content-${useId(4)}`);
   onClickOutside(restContentNode, (e) => {
     emit("blur", e);
-    if (closeOnBlur.value) {
+    if (isCloseOnBlur.value) {
       onClosePopover();
     }
   });
   onKeyStroke("Escape", (e) => {
     if (isOpen.value) {
       emit("escape");
-      if (closeOnEscape.value) {
+      if (isCloseOnEscape.value) {
         onClosePopover();
         e.preventDefault();
       }
@@ -271,6 +271,13 @@ function usePopoverList() {
 }
 __name(usePopoverList, "usePopoverList");
 function usePopoverListItem(props) {
+  const {
+    onClosePopover,
+    rootProps: popoverProps
+  } = usePopoverContext();
+  const {
+    isCloseOnSelect
+  } = popoverProps;
   const isHighligted = ref(false);
   const rootAttrs = computed(() => {
     return {
@@ -281,7 +288,12 @@ function usePopoverListItem(props) {
       "data-highlight": isHighligted.value || void 0,
       "data-active": props.isActive || void 0,
       onmouseenter: () => isHighligted.value = true,
-      onmouseleave: () => isHighligted.value = false
+      onmouseleave: () => isHighligted.value = false,
+      onClick: () => {
+        if (isCloseOnSelect.value) {
+          onClosePopover();
+        }
+      }
     };
   });
   const contentAttrs = {

package/dist/{chunk-E2N74NQW.mjs → chunk-VN53X7QU.mjs}

@@ -1,6 +1,6 @@
 import {
   usePopoverTrigger
-} from "./chunk-EOUKE4WB.mjs";
+} from "./chunk-MPDM4USP.mjs";
 
 // src/trigger.tsx
 import { createVNode as _createVNode, Fragment as _Fragment } from "vue";

package/dist/{chunk-OBEDLACV.mjs → chunk-WBFSONWB.mjs}

@@ -1,9 +1,9 @@
 import {
   popoverContentProps
-} from "./chunk-3VISLXE6.mjs";
+} from "./chunk-ACYTEMPK.mjs";
 import {
   usePopoverContent
-} from "./chunk-EOUKE4WB.mjs";
+} from "./chunk-MPDM4USP.mjs";
 
 // src/content.tsx
 import { createTextVNode as _createTextVNode, createVNode as _createVNode, mergeProps as _mergeProps, Fragment as _Fragment } from "vue";

package/dist/{chunk-6AOSFLZR.mjs → chunk-YFYQ7S3B.mjs}

@@ -1,9 +1,9 @@
 import {
   singletonPopoverProps
-} from "./chunk-3VISLXE6.mjs";
+} from "./chunk-ACYTEMPK.mjs";
 import {
   useSingletonPopover
-} from "./chunk-EOUKE4WB.mjs";
+} from "./chunk-MPDM4USP.mjs";
 import {
   PopoverProvider
 } from "./chunk-2ZUCITXI.mjs";

package/dist/content.js

@@ -53,8 +53,8 @@ function usePopoverContent(props, emit) {
   } = usePopoverContext();
   const {
     id,
-    closeOnBlur,
-    closeOnEscape,
+    isCloseOnBlur,
+    isCloseOnEscape,
     trigger,
     isAdaptiveWidth,
     usePortal
@@ -63,14 +63,14 @@ function usePopoverContent(props, emit) {
   const getId = (0, import_vue.computed)(() => (id == null ? void 0 : id.value) ? `popover-content-${id.value}` : `popover-content-${(0, import_pixel3_utils2.useId)(4)}`);
   (0, import_pixel3_utils2.onClickOutside)(restContentNode, (e) => {
     emit("blur", e);
-    if (closeOnBlur.value) {
+    if (isCloseOnBlur.value) {
       onClosePopover();
     }
   });
   (0, import_pixel3_utils2.onKeyStroke)("Escape", (e) => {
     if (isOpen.value) {
       emit("escape");
-      if (closeOnEscape.value) {
+      if (isCloseOnEscape.value) {
         onClosePopover();
         e.preventDefault();
       }
@@ -141,7 +141,7 @@ var popoverProps = {
   triggerId: {
     type: String
   },
-  defaultIsOpen: {
+  isDefaultOpen: {
     type: Boolean
   },
   isManual: {
@@ -150,21 +150,18 @@ var popoverProps = {
   isOpen: {
     type: Boolean
   },
-  returnFocusOnClose: {
+  isFocusOnClose: {
     type: Boolean
   },
-  initialFocusRef: {
-    type: Boolean
-  },
-  closeOnBlur: {
+  isCloseOnBlur: {
     type: Boolean,
     default: true
   },
-  closeOnEscape: {
+  isCloseOnEscape: {
     type: Boolean,
     default: true
   },
-  closeOnSelect: {
+  isCloseOnSelect: {
     type: Boolean,
     default: false
   },

package/dist/content.mjs

@@ -1,8 +1,8 @@
 import {
   MpPopoverContent
-} from "./chunk-OBEDLACV.mjs";
-import "./chunk-3VISLXE6.mjs";
-import "./chunk-EOUKE4WB.mjs";
+} from "./chunk-WBFSONWB.mjs";
+import "./chunk-ACYTEMPK.mjs";
+import "./chunk-MPDM4USP.mjs";
 import "./chunk-2ZUCITXI.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {

package/dist/index.d.mts

@@ -9,4 +9,3 @@ import 'vue';
 import '@floating-ui/vue';
 import '@mekari/pixel3-utils';
 import 'vue/jsx-runtime';
-import '@floating-ui/dom';

package/dist/index.d.ts

@@ -9,4 +9,3 @@ import 'vue';
 import '@floating-ui/vue';
 import '@mekari/pixel3-utils';
 import 'vue/jsx-runtime';
-import '@floating-ui/dom';