Merge pull request #644 from privy-open-source/fix/date-fns-on-prod

Author: adenvt

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@privyid/design-system",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "packageManager": "yarn@3.6.0",
   "private": true,
   "scripts": {
@@ -39,11 +39,11 @@
     "@testing-library/vue": "6.6.0",
     "@types/babel__core": "^7",
     "@types/babel__preset-env": "^7",
-    "@types/lodash-es": "4.17.7",
+    "@types/lodash-es": "4.17.8",
     "@types/marked": "^4",
     "@types/sanitize-html": "^2",
     "@types/scroll-into-view": "^1",
-    "@types/testing-library__jest-dom": "5.14.6",
+    "@types/testing-library__jest-dom": "5.14.8",
     "@types/webfontloader": "1.6.35",
     "@types/zxcvbn": "^4",
     "@typescript-eslint/eslint-plugin": "5.62.0",
@@ -73,10 +73,10 @@
     "nanodelay": "2.0.2",
     "postcss": "8.4.24",
     "postcss-nested": "6.0.1",
-    "tailwindcss": "3.3.2",
-    "typescript": "5.1.3",
+    "tailwindcss": "3.3.3",
+    "typescript": "5.1.6",
     "ufo": "^1.0.1",
-    "vitepress": "1.0.0-beta.3",
+    "vitepress": "1.0.0-beta.5",
     "vitest": "0.24.5",
     "vue-tsc": "1.4.4"
   },

packages/browserslist-config/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/browserslist-config",
   "description": "Browserslist shareable config for Persona project",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "packageManager": "yarn@3.6.0",
   "license": "MIT",
   "repository": {

packages/eslint-config-persona/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/eslint-config-persona",
   "description": "Eslint shareable config for Persona project",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "packageManager": "yarn@3.6.0",
   "license": "MIT",
   "repository": {

packages/persona-icon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/persona-icon",
   "description": "Persona icon package",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "packageManager": "yarn@3.6.0",
   "type": "module",
   "main": "./dist/module.cjs",

packages/persona/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/persona",
   "description": "Persona core package",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/privy-open-source/design-system.git",

packages/persona/src/module.ts

@@ -31,7 +31,7 @@ export default defineNuxtModule<ModuleOptions>({
 
     // Add alias to unsupported ESM package
     nuxt.options.alias['@carbon/icons-vue/lib'] = '@carbon/icons-vue/es'
-    nuxt.options.alias['date-fns']              = 'date-fns/esm'
+    nuxt.options.alias['date-fns/locale']       = 'date-fns/esm/locale'
 
     // Add font CDN
     if (options.font) {

packages/tailwind-animation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@privyid/tailwind-animation",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "packageManager": "yarn@3.6.0",
   "license": "MIT",
   "repository": {

packages/tailwind-extended/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/tailwind-extended",
   "description": "Add missing tailwind utilities",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "packageManager": "yarn@3.6.0",
   "license": "MIT",
   "repository": {

packages/tailwind-preset/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/tailwind-preset",
   "description": "Tailwind preset for Persona project",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "packageManager": "yarn@3.6.0",
   "license": "MIT",
   "repository": {

src/components/dropdown/Dropdown.vue

@@ -33,7 +33,7 @@
 
     <Transition name="fade">
       <div
-        v-show="isOpen"
+        v-show="isOpen && !isHidden"
         ref="menu"
         data-testid="dropdown-menu"
         class="dropdown__menu"
@@ -57,6 +57,7 @@ import {
   toRef,
   watchEffect,
   computed,
+  ref,
 } from 'vue-demi'
 import {
   templateRef,
@@ -73,6 +74,7 @@ import {
   offset,
   flip,
   shift,
+  hide,
 } from '@floating-ui/dom'
 import { useVModel } from '../input'
 import IconArrow from '@carbon/icons-vue/lib/chevron--down/16'
@@ -175,6 +177,7 @@ export default defineComponent({
     const wizard    = templateRef<DropdownSubitemElement>('wizard')
     const placement = toRef(props, 'placement')
     const isOpen    = useVModel(props)
+    const isHidden  = ref(false)
 
     const { next: nextFocus, prev: prevFocus } = useFocus(menu)
 
@@ -280,13 +283,16 @@ export default defineComponent({
               flip(),
               shift(),
               offset(8),
+              hide(),
             ],
-          }).then(({ x, y, placement }) => {
+          }).then(({ x, y, placement, middlewareData }) => {
             if (menu.value) {
               menu.value.dataset.popperPlacement = placement
 
               menu.value.style.left = `${x || 0}px`
               menu.value.style.top  = `${y || 0}px`
+
+              isHidden.value = middlewareData.hide.referenceHidden
             }
           })
         })
@@ -309,6 +315,7 @@ export default defineComponent({
 
     return {
       isOpen,
+      isHidden,
       classNames,
       containerSize,
       toggle,
@@ -327,7 +334,7 @@ export default defineComponent({
   --p-dropdown-size-sm: 15rem; /* 240px */
   --p-dropdown-max-height: theme(spacing.64);
 
-  @apply relative inline-flex;
+  @apply inline-flex;
 
   &__menu {
     @apply max-h-[var(--p-dropdown-max-height)] border rounded bg-default z-[var(--p-dropdown-z-index)] border-default shadow-xl overflow-x-hidden overflow-y-auto absolute;