@onereach/ui-components 2.65.2-beta.1960.0 → 2.65.2-beta.1968.0

package/dist/v3/index51.js

@@ -1,11 +1,11 @@
-export { M as ModalSize, s as OrModalV3 } from './OrModal-24d08f17.js';
+export { M as ModalSize, s as OrModalV3 } from './OrModal-ce7a20bf.js';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
-import './OrIconButton-00f4cbf1.js';
+import './OrIconButton-f0aca58a.js';
 import './OrIcon-e2fa4cf8.js';
 import 'vue';
-import './OrTooltip-e7ddcda2.js';
+import './OrTooltip-36c6728c.js';
 import './OrPopover-3525c670.js';
 import '@floating-ui/dom';
 import './useElevation-0e973238.js';

package/dist/v3/index53.js

@@ -1,11 +1,11 @@
-export { N as NotificationVariant, s as OrNotificationV3 } from './OrNotification-6a03ef7a.js';
+export { N as NotificationVariant, s as OrNotificationV3 } from './OrNotification-4b09a862.js';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
-import './OrIconButton-00f4cbf1.js';
+import './OrIconButton-f0aca58a.js';
 import './OrIcon-e2fa4cf8.js';
 import 'vue';
-import './OrTooltip-e7ddcda2.js';
+import './OrTooltip-36c6728c.js';
 import './OrPopover-3525c670.js';
 import '@floating-ui/dom';
 import './useElevation-0e973238.js';

package/dist/v3/index63.js

@@ -1,15 +1,15 @@
-export { s as OrSearchV3 } from './OrSearch-a197b43a.js';
+export { s as OrSearchV3 } from './OrSearch-8aaedf9d.js';
 export { a as SearchSize } from './OrInputBox-634230b1.js';
 import 'vue-demi';
 import '@vueuse/core';
 import './useClassAttribute-47fdb016.js';
-import './OrInput-b8babcfd.js';
+import './OrInput-6376195d.js';
 import './OrError-19a62a18.js';
 import 'vue';
 import './OrHint-73835593.js';
-import './OrIconButton-00f4cbf1.js';
+import './OrIconButton-f0aca58a.js';
 import './OrIcon-e2fa4cf8.js';
-import './OrTooltip-e7ddcda2.js';
+import './OrTooltip-36c6728c.js';
 import './OrPopover-3525c670.js';
 import '@floating-ui/dom';
 import './useElevation-0e973238.js';

package/dist/v3/index66.js

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from './OrSelect-e248bfcd.js';
+export { s as OrSelectV3 } from './OrSelect-58a004fd.js';
 export { a as SelectSize } from './OrInputBox-634230b1.js';
 import 'vue-demi';
 import './dropdown-open-0d314aa4.js';
@@ -13,9 +13,9 @@ import './OrError-19a62a18.js';
 import './OrExpansionPanel-65afdfad.js';
 import './OrIcon-e2fa4cf8.js';
 import './OrHint-73835593.js';
-import './OrInput-b8babcfd.js';
-import './OrIconButton-00f4cbf1.js';
-import './OrTooltip-e7ddcda2.js';
+import './OrInput-6376195d.js';
+import './OrIconButton-f0aca58a.js';
+import './OrTooltip-36c6728c.js';
 import './OrPopover-3525c670.js';
 import '@floating-ui/dom';
 import './useElevation-0e973238.js';
@@ -24,4 +24,4 @@ import './OrBottomSheet-9de57dd0.js';
 import './OrOverlay-27050c19.js';
 import './OrTeleport.vue3-8099178c.js';
 import './OrMenuItem-60afcdcb.js';
-import './OrTag-498707b4.js';
+import './OrTag-a3f5dbf4.js';

package/dist/v3/index80.js

@@ -1,11 +1,11 @@
-export { s as OrTabsV3, T as TabsVariant } from './OrTabs-fe7039de.js';
+export { s as OrTabsV3, T as TabsVariant } from './OrTabs-f7b645cd.js';
 import '@vueuse/core';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';
 import './OrIcon-e2fa4cf8.js';
 import 'vue';
 import './OrMenuItem-60afcdcb.js';
-import './OrMenu-75ef8635.js';
+import './OrMenu-403f6aeb.js';
 import './OrPopover-3525c670.js';
 import '@floating-ui/dom';
 import './useElevation-0e973238.js';

package/dist/v3/index82.js

@@ -1,11 +1,11 @@
-export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-498707b4.js';
+export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-a3f5dbf4.js';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
-import './OrIconButton-00f4cbf1.js';
+import './OrIconButton-f0aca58a.js';
 import './OrIcon-e2fa4cf8.js';
 import 'vue';
-import './OrTooltip-e7ddcda2.js';
+import './OrTooltip-36c6728c.js';
 import './OrPopover-3525c670.js';
 import '@floating-ui/dom';
 import './useElevation-0e973238.js';

package/dist/v3/index90.js

@@ -1,13 +1,13 @@
-export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-21f4f684.js';
+export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-bc8b5580.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-0665462d.js';
 import '@vueuse/core';
 import 'vue-demi';
 import './OrTeleport.vue3-8099178c.js';
 import 'vue';
-import './OrIconButton-00f4cbf1.js';
+import './OrIconButton-f0aca58a.js';
 import './useClassAttribute-47fdb016.js';
 import './OrIcon-e2fa4cf8.js';
-import './OrTooltip-e7ddcda2.js';
+import './OrTooltip-36c6728c.js';
 import './OrPopover-3525c670.js';
 import '@floating-ui/dom';
 import './useElevation-0e973238.js';

package/dist/v3/index93.js

@@ -1,4 +1,4 @@
-export { s as OrTooltipV3 } from './OrTooltip-e7ddcda2.js';
+export { s as OrTooltipV3 } from './OrTooltip-36c6728c.js';
 export { P as TooltipPlacement } from './OrPopover-3525c670.js';
 import '@vueuse/core';
 import 'vue-demi';

package/dist/v3/{types-21f4f684.js → types-bc8b5580.js}

@@ -2,7 +2,7 @@ import { useToggle } from '@vueuse/core';
 import { defineComponent, ref, computed, onBeforeMount, onBeforeUnmount, nextTick } from 'vue-demi';
 import { s as script$4 } from './OrTeleport.vue3-8099178c.js';
 import { T as ToastType, P as PositionsX, b as PositionsY, c as TransitionType, d as useToastEventBus, a as useQueue } from './useToast-0665462d.js';
-import { s as script$2 } from './OrIconButton-00f4cbf1.js';
+import { s as script$2 } from './OrIconButton-f0aca58a.js';
 import { s as script$3 } from './OrLoader-60943812.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createVNode, toDisplayString, createElementVNode, createBlock, withModifiers, withCtx, TransitionGroup, Fragment, renderList, mergeProps } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.65.2-beta.1960.0",
+  "version": "2.65.2-beta.1968.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",

package/src/components/or-menu-v3/OrMenu.stories3.ts

@@ -3,6 +3,7 @@ import { Meta, StoryFn } from '@storybook/vue3';
 import { ref } from 'vue-demi';
 import { OrButtonV3 as OrButton } from '../or-button-v3';
 import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
+import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import OrMenuDocs from './OrMenu.docs.mdx';
 import OrMenu from './OrMenu.vue';
 import { MenuPlacement } from './props';
@@ -105,3 +106,62 @@ Menu.args = {
     <OrMenuItem>Very Looooooooooooooooooooooooooooooooooooooooooooooooooooooooong Item</OrMenuItem>
   `,
 };
+
+const OrderDropdownTemplate: StoryFn<typeof OrMenu> = (args) => ({
+  components: {
+    OrButton,
+    OrMenu,
+    OrMenuItem,
+    OrIcon,
+  },
+
+  setup() {
+    // Refs
+    const button = ref<InstanceType<typeof OrButton>>();
+    const menu = ref<InstanceType<typeof OrMenu>>();
+
+    return {
+      args,
+      button,
+      menu,
+      onUpdateState: action('update:state'),
+    };
+  },
+
+  template: `
+    <div class="contents">
+      <OrButton
+        ref="button"
+        variant="link"
+        @click="menu.open()"
+      >
+        Last Updated
+        <OrIcon
+          :icon="menu?.isOpen === 'closed' ? 'arrow_drop_down': 'arrow_drop_up'"
+        />
+      </OrButton>
+
+      <OrMenu
+        ref="menu"
+        v-bind="args"
+        :trigger="button?.root"
+        @update:state="onUpdateState"
+        class="min-w-[160px]"
+      >
+        ${args.default}
+      </OrMenu>
+    </div>
+  `,
+});
+
+export const OrderDropdown = OrderDropdownTemplate.bind({});
+
+OrderDropdown.args = {
+  // Slots
+  default: `
+    <OrMenuItem selected>Last Updated</OrMenuItem>
+    <OrMenuItem>Firs Updated</OrMenuItem>
+    <OrMenuItem>A - Z</OrMenuItem>
+    <OrMenuItem>Z - A</OrMenuItem>
+  `,
+};

package/src/components/or-menu-v3/OrMenu.vue

@@ -59,6 +59,7 @@ export default defineComponent({
     'root',
     'open',
     'close',
+    'isOpen',
   ],
 
   setup() {
@@ -67,7 +68,7 @@ export default defineComponent({
 
     const popover = ref<InstanceType<typeof OrPopover>>();
     const popoverRoot = computed(() => popover.value?.root);
-
+    const isOpen = computed(() => popover.value?.state);
     // Styles
     const classAttribute = useClassAttribute();
 
@@ -118,6 +119,7 @@ export default defineComponent({
       rootStyles,
       bodyStyles,
       open,
+      isOpen,
       close,
       onClick,
     };

package/src/components/or-menu-v3/styles.ts

@@ -8,6 +8,7 @@ export const MenuBody: string[] = [
   'overflow-y-auto',
 
   // Box
-  'max-w-[128px]',
+  'min-w-[160px]',
+  'max-w-[256px]',
   'max-h-[340px]',
 ];

package/src/components/or-tooltip-v3/OrTooltip.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import { useDebounceFn, useElementHover } from '@vueuse/core';
+import { useElementHover } from '@vueuse/core';
 import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
 import { useClassAttribute } from '../../hooks';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
@@ -85,21 +85,21 @@ export default defineComponent({
     ]);
 
     // Methods
-    const open = useDebounceFn(() => {
+    function open(): void {
       const popoverInstance = popover.value;
 
       if (popoverInstance) {
         (popoverInstance.open as () => void)();
       }
-    }, 1000);
+    }
 
-    const close = useDebounceFn(() => {
+    function close(): void {
       const popoverInstance = popover.value;
 
       if (popoverInstance) {
         (popoverInstance.close as () => void)();
       }
-    }, 500);
+    }
 
     // Effects
     // #region Hover