@policystudio/policy-studio-ui-vue 1.1.90-beta.76 → 1.1.90-beta.77

package/dist/css/psui_styles_output.css

@@ -4017,19 +4017,10 @@ video {
   z-index: 50;
 }
 .psui-el-dropdown-menu-dialog-wrapper {
-  overflow: auto;
-}
-.psui-el-dropdown-menu-dialog-wrapper {
-  border-radius: 0.375rem;
-}
-.psui-el-dropdown-menu-dialog-wrapper {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
+  height: auto;
 }
 .psui-el-dropdown-menu-dialog-wrapper {
-  --tw-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1);
-  --tw-shadow-colored: 0px 0px 8px var(--tw-shadow-color), 0px 5px 6px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
+  overflow: auto;
 }
 
 .psui-el-dropdown-menu-list {
@@ -6330,6 +6321,10 @@ video {
   justify-self: center;
 }
 
+.psui-rounded {
+  border-radius: 0.25rem;
+}
+
 .psui-rounded-md {
   border-radius: 0.375rem;
 }
@@ -6374,6 +6369,11 @@ video {
   background-color: rgb(214, 92, 90, var(--tw-bg-opacity, 1));
 }
 
+.psui-bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
+}
+
 .psui-bg-yellow-20 {
   --tw-bg-opacity: 1;
   background-color: rgb(237, 171, 62, var(--tw-bg-opacity, 1));
@@ -6519,6 +6519,12 @@ video {
   opacity: 0.75;
 }
 
+.psui-shadow-elevation-20 {
+  --tw-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1);
+  --tw-shadow-colored: 0px 0px 8px var(--tw-shadow-color), 0px 5px 6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
+}
+
 .psui-transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.1.90-beta.76",
+  "version": "1.1.90-beta.77",
   "description": "Policy Studio UI",
   "author": "Policy Studio Team",
   "scripts": {

package/src/assets/scss/components/PsDropdown.scss

@@ -13,7 +13,7 @@
     }
 
     &-dialog-wrapper {
-      @apply psui-bg-white psui-rounded-md psui-z-50 psui-shadow-elevation-20 psui-overflow-auto;
+      @apply psui-z-50 psui-overflow-auto psui-h-auto;
     }
   }
 }

package/src/components/forms/PsDropdown.vue

@@ -34,13 +34,12 @@
           ref="PSDropdownFloating"
           role="menu"
           class="psui-el-dropdown-menu-dialog-wrapper"
+          :class="contentCss"
           aria-orientation="vertical"
           :style="floatingStyles"
           v-click-outside="close"
         >
-          <div class="psui-el-dropdown-menu-dialog">
-            <slot name="items" />
-          </div>
+          <slot name="items" />
         </div>
       </Transition>
     </Teleport>
@@ -65,9 +64,17 @@ const props = defineProps({
   disabled: {type: Boolean, default: false},
   placement: { type: String, default: 'bottom-start' },
   offsetVal: { type: Number, default: 4 },
-  dropdownWidth: {
-    type: Number,
+  width: {
+    type: [Number, String],
     default: null
+  },
+  height: {
+    type: [Number, String],
+    default: 'auto'
+  },
+  contentCss: {
+    type: String,
+    default: 'psui-rounded psui-bg-white psui-shadow-elevation-20'
   }
 })
 
@@ -87,10 +94,10 @@ const { floatingStyles } = useFloating(PSDropdownTrigger, PSDropdownFloating, {
     shift(),
     size({
       apply({rects, elements}) {
-          const customWidth = props.dropdownWidth ?? rects.reference.width
+          const customWidth = props.width ?? rects.reference.width
           Object.assign(elements.floating.style, {
             width: `${customWidth}px`,
-            minWidth: 'fit-content'
+            ...(typeof height == 'string' ? {maxHeight: props.height} : {maxHeight : `${props.height}px`})
           })
       },
     })