@pequity/squirrel 5.4.11 → 6.0.0

package/squirrel/components/p-dropdown/p-dropdown.vue

@@ -1,9 +1,9 @@
 <template>
-  <VDropdown ref="vPopper" v-bind="{ ...defaultAttrs, ...$attrs }" @show="onShow" @hide="destroy">
+  <Dropdown ref="vPopper" v-bind="{ ...defaultAttrs, ...$attrs }" @show="onShow" @hide="destroy">
     <template v-for="(_, slot) in $slots" #[slot]="scope">
       <slot :name="slot" v-bind="scope || {}" />
     </template>
-  </VDropdown>
+  </Dropdown>
 </template>
 
 <script lang="ts">
@@ -88,7 +88,10 @@ import {
   type ListKeyboardNavigationInstance,
   setupListKeyboardNavigation,
 } from '@squirrel/utils/listKeyboardNavigation';
-import { defineComponent, type PropType } from 'vue';
+import { Dropdown } from 'floating-vue';
+import { defineComponent } from 'vue';
+
+type DropdownProps = InstanceType<typeof Dropdown>['$props'];
 
 type VPopper = {
   $refs: {
@@ -98,19 +101,33 @@ type VPopper = {
     reference: HTMLElement;
     popper: {
       shown: boolean;
+      isShown: boolean;
       hide: (options?: { skipDelay: boolean }) => void;
+      show: () => void;
       $_detachPopperNode: () => void;
       $_referenceNode: HTMLElement;
       $_computePosition: () => void;
       $el: HTMLElement;
+      $emit: (event: string, ...args: unknown[]) => void;
     };
   };
 };
 
 const ESCAPE_KEY = 'Escape';
 
+const nextFrame = () => {
+  return new Promise((resolve) =>
+    requestAnimationFrame(() => {
+      requestAnimationFrame(resolve);
+    })
+  );
+};
+
 export default defineComponent({
   name: 'PDropdown',
+  components: {
+    Dropdown,
+  },
   inheritAttrs: false,
   props: {
     /**
@@ -138,49 +155,23 @@ export default defineComponent({
         display: 'inline-block',
       }),
     },
-    /**
-     * Custom reference element that is used to position the popper.
-     * Can be changed at runtime to create a dynamically positioned dropdown.
-     */
-    reference: {
-      type: HTMLElement as PropType<HTMLElement | null | undefined>,
-      default: null,
-    },
   },
   data() {
     return {
       defaultAttrs: {
         triggers: ['click'],
-        'auto-hide': true,
+        autoHide: true,
         theme: 'p-dropdown-theme',
-        'popper-class': 'dropdown',
+        popperClass: 'dropdown',
         placement: 'bottom-start',
         distance: 4,
         delay: 0,
         handleResize: true,
-      },
+      } satisfies DropdownProps,
       navigationSvc: null as ListKeyboardNavigationInstance | null,
+      prevReference: null as HTMLElement | null,
     };
   },
-  watch: {
-    reference: {
-      async handler(nV, oV) {
-        if (nV && oV !== nV) {
-          const popper = (this.$refs.vPopper as VPopper).$refs.popper;
-
-          if (popper) {
-            popper.$_detachPopperNode();
-            if (popper.shown) {
-              popper.hide({ skipDelay: true });
-            }
-            if (this.reference) {
-              popper.$_referenceNode = this.reference;
-            }
-          }
-        }
-      },
-    },
-  },
   mounted() {
     Object.assign((this.$refs.vPopper as VPopper).$refs.popper.$el.style, this.triggerStyle);
   },
@@ -208,6 +199,37 @@ export default defineComponent({
       this.navigationSvc?.destroy();
       document.removeEventListener('keydown', this.popoverEscKeydown);
     },
+    async updateReference(newReference: HTMLElement) {
+      if (!newReference) {
+        throw Error('Reference element is required');
+      }
+
+      const popper = (this.$refs.vPopper as VPopper).$refs.popper;
+
+      if (popper) {
+        // Fixes popper flicker issue when changing reference
+        popper.$_detachPopperNode();
+
+        if (popper.isShown) {
+          popper.$emit('update:shown', false);
+
+          if (newReference === this.prevReference) {
+            return;
+          }
+        }
+
+        // Wait for the popper to hide
+        await nextFrame();
+
+        popper.$_referenceNode = newReference;
+        this.prevReference = newReference;
+
+        // Wait for the popper to update the reference
+        await nextFrame();
+
+        popper.$emit('update:shown', true);
+      }
+    },
   },
 });
 </script>

package/squirrel/components/p-modal/p-modal.vue

@@ -59,8 +59,8 @@
               <slot></slot>
             </div>
           </slot>
-          <slot v-if="$slots['footer']" name="footer-wrapper">
-            <div class="mt-6 px-8 pt-6">
+          <slot name="footer-wrapper">
+            <div v-if="$slots['footer']" class="px-8 pt-6">
               <slot name="footer"></slot>
             </div>
           </slot>

package/squirrel/components/p-select-pill/p-select-pill.spec.js

@@ -45,6 +45,7 @@ describe('PSelectPill.vue', () => {
     const selected = wrapper.findAll('button')[3];
 
     expect(selected.classes()).toContain(ACTIVE_CLASS);
+    expect(selected.attributes('data-selected')).toBe('true');
   });
 
   it(`updates the value bound with v-model when an option is clicked`, async () => {
@@ -64,6 +65,7 @@ describe('PSelectPill.vue', () => {
     const selected = wrapper.findAll('button')[3];
 
     expect(selected.classes()).toContain(ACTIVE_CLASS);
+    expect(selected.attributes('data-selected')).toBe('true');
   });
 
   it('works with custom itemValue and itemText', async () => {

package/squirrel/components/p-select-pill/p-select-pill.vue

@@ -16,6 +16,7 @@
         modelValue === o[itemValue] ? `${ACTIVE_CLASS} hover:text-p-purple-70` : 'hover:text-p-gray-60',
         { 'opacity-25': o.disabled },
       ]"
+      :data-selected="modelValue === o[itemValue]"
       @click="click($event, o)"
     >
       <div class="flex">

package/squirrel/utils/tailwind.spec.js

@@ -1,5 +1,5 @@
+import { getScreen } from '@squirrel/utils/tailwind';
 import { cloneDeep } from 'lodash-es';
-import { getScreen } from './tailwind';
 
 const screens = { sm: '640px', md: '768px' };