@ironsource/shared-ui 1.4.2-rc.5 → 1.4.2-rc.6

package/Dropdown.vue_vue_type_style_index_0_scoped_true_lang.css

@@ -1 +1 @@
-.label[data-v-4888d2df]{color:#41454d}.v-enter-active[data-v-4888d2df],.v-leave-active[data-v-4888d2df]{transition:opacity .25s ease}ol[data-v-4888d2df],ul[data-v-4888d2df],menu[data-v-4888d2df]{list-style:none;margin:0;padding:0}.dropdown[data-v-4888d2df]{display:flex;flex-direction:column}.dropdown--disabled[data-v-4888d2df]{opacity:.7}.list-container[data-v-4888d2df]{padding:.5rem;max-height:13.8rem}.list-container--multi[data-v-4888d2df]{margin-bottom:0}.v-popper__arrow-container[data-v-4888d2df]{display:none}.helper-text[data-v-4888d2df]{padding-top:.25rem;color:#696a6b}.helper-text--error[data-v-4888d2df]{color:#da564f}.no-result-container[data-v-4888d2df]{height:100%;display:flex;align-items:center}.no-result[data-v-4888d2df]{color:#8e959d;padding-left:.5rem}.list[data-v-4888d2df]{outline:none;display:flex;flex-direction:column;width:100%;min-height:2rem;border-radius:.5rem}.list--multi[data-v-4888d2df]{margin-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}.button__container[data-v-4888d2df]{display:flex;justify-content:center;flex-direction:column;position:relative}.button__container[data-v-4888d2df]:not(.button__container--disabled){cursor:pointer}.loader[data-v-4888d2df]{color:#8e959d;display:flex;height:100%;margin-left:.375rem;justify-self:center;align-items:center}.loader-icon[data-v-4888d2df]{margin-right:.25rem;display:flex}.button[data-v-4888d2df]{font-size:.875rem;line-height:1.25rem;min-width:15rem;color:#53575b;height:2rem;text-align:start;padding:.25rem .75rem;background:#F1F3F4;border-radius:.5rem;display:flex;border:none;align-items:center}.button--lg[data-v-4888d2df]{height:2.5rem}.button[data-v-4888d2df]:hover:not(.button--open):not(.button--disabled){color:#53575b;background:#EDEFF0}.button--open[data-v-4888d2df],.button[data-v-4888d2df]:focus-visible{background:linear-gradient(0deg,#3083FF 0,#3083FF 2px,#F1F3F4 0)}.image-slot[data-v-4888d2df]{margin-right:.5rem}.angle-down[data-v-4888d2df]{margin-left:auto;display:flex;color:#7b838c}.actions[data-v-4888d2df]{display:flex;width:100%;margin-left:auto;padding:.75rem 1rem;border-top:1px solid #DDDFE1;justify-content:flex-end}.actions[data-v-4888d2df]:first-child{padding-right:.25rem}.apply-button[data-v-4888d2df]{margin-left:.25rem}.dropdown-title__text[data-v-4888d2df]{color:#41454d;border-bottom:1px solid #DDDFE1;padding:1rem}.dropdown-title__search[data-v-4888d2df]{padding:3px 0;width:100%;border-bottom:1px solid #DDDFE1}
+.label[data-v-12b53c10]{color:#41454d}.v-enter-active[data-v-12b53c10],.v-leave-active[data-v-12b53c10]{transition:opacity .25s ease}ol[data-v-12b53c10],ul[data-v-12b53c10],menu[data-v-12b53c10]{list-style:none;margin:0;padding:0}.dropdown[data-v-12b53c10]{display:flex;flex-direction:column}.dropdown--disabled[data-v-12b53c10]{opacity:.7}.list-container[data-v-12b53c10]{padding:.5rem}.list-container--multi[data-v-12b53c10]{margin-bottom:0}.v-popper__arrow-container[data-v-12b53c10]{display:none}.helper-text[data-v-12b53c10]{padding-top:.25rem;color:#696a6b}.helper-text--error[data-v-12b53c10]{color:#da564f}.no-result-container[data-v-12b53c10]{height:100%;display:flex;align-items:center}.no-result[data-v-12b53c10]{color:#8e959d;padding-left:.5rem}.list[data-v-12b53c10]{outline:none;display:flex;flex-direction:column;width:100%;min-height:2rem;border-radius:.5rem}.list--multi[data-v-12b53c10]{margin-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}.button__container[data-v-12b53c10]{display:flex;justify-content:center;flex-direction:column;position:relative}.button__container[data-v-12b53c10]:not(.button__container--disabled){cursor:pointer}.loader[data-v-12b53c10]{color:#8e959d;display:flex;height:100%;margin-left:.375rem;justify-self:center;align-items:center}.loader-icon[data-v-12b53c10]{margin-right:.25rem;display:flex}.button[data-v-12b53c10]{font-size:.875rem;line-height:1.25rem;min-width:15rem;color:#53575b;height:2rem;text-align:start;padding:.25rem .75rem;background:#F1F3F4;border-radius:.5rem;display:flex;border:none;align-items:center}.button--lg[data-v-12b53c10]{height:2.5rem}.button[data-v-12b53c10]:hover:not(.button--open):not(.button--disabled){color:#53575b;background:#EDEFF0}.button--open[data-v-12b53c10],.button[data-v-12b53c10]:focus-visible{background:linear-gradient(0deg,#3083FF 0,#3083FF 2px,#F1F3F4 0)}.image-slot[data-v-12b53c10]{margin-right:.5rem}.angle-down[data-v-12b53c10]{margin-left:auto;display:flex;color:#7b838c}.actions[data-v-12b53c10]{display:flex;width:100%;margin-left:auto;padding:.75rem 1rem;border-top:1px solid #DDDFE1;justify-content:flex-end}.actions[data-v-12b53c10]:first-child{padding-right:.25rem}.apply-button[data-v-12b53c10]{margin-left:.25rem}.dropdown-title__text[data-v-12b53c10]{color:#41454d;border-bottom:1px solid #DDDFE1;padding:1rem}.dropdown-title__search[data-v-12b53c10]{padding:3px 0;width:100%;border-bottom:1px solid #DDDFE1}

package/components/dropdown/Dropdown.vue.js

@@ -11,9 +11,10 @@ import { isObjectInArray } from '../../utils/array.vue.js';
 import { objectsEqual } from '../../utils/object.vue.js';
 import { useClamp, useVirtualList, onClickOutside } from '@vueuse/core';
 import { Mode, Type, DropdownContext } from './DropdownContext.vue.js';
+import { pxToRem } from '../../utils/style.vue.js';
 /* empty css                                                          *//* empty css                                              */
 import "../../Dropdown.vue_vue_type_style_index_0_scoped_true_lang.css";import "../../Dropdown.vue_vue_type_style_index_1_lang.css";
-const _withScopeId = (n) => (pushScopeId("data-v-4888d2df"), n = n(), popScopeId(), n);
+const _withScopeId = (n) => (pushScopeId("data-v-12b53c10"), n = n(), popScopeId(), n);
 const _hoisted_1 = ["tabindex"];
 const _hoisted_2 = ["disabled", "aria-expanded", "aria-labelledby", "aria-disabled"];
 const _hoisted_3 = {
@@ -222,13 +223,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     const hasSubtitle = computed(() => optionsIds.value[0]?.hasSubtitle);
     const isMulti = computed(() => api.mode === Mode.Multi);
+    const itemHeight = computed(
+      () => hasSubtitle.value ? MULTILINE_LIST_HEIGHT : LIST_HEIGHT
+    );
     const {
       list: virtualOptions,
       containerProps,
       wrapperProps,
       scrollTo
     } = useVirtualList(filteredOptions, {
-      itemHeight: () => hasSubtitle.value ? MULTILINE_LIST_HEIGHT : LIST_HEIGHT
+      itemHeight: itemHeight.value
     });
     watch(
       () => props.isOpen,
@@ -506,6 +510,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       }
     };
+    const calculateTableHeight = computed(() => {
+      const MAX_NUMBER_OF_OPTIONS = 7;
+      const PADDING_PX = 8;
+      const optionsLength = virtualOptions.value.length;
+      const showSelectAllAddition = props.showSelectAll ? 1 : 0;
+      const isThereMoreOptionsThenMax = optionsLength > MAX_NUMBER_OF_OPTIONS;
+      const numberOfRows = optionsLength + showSelectAllAddition;
+      const numToCalculate = isThereMoreOptionsThenMax ? MAX_NUMBER_OF_OPTIONS + 0.5 : numberOfRows;
+      return pxToRem(numToCalculate * itemHeight.value + PADDING_PX);
+    });
     expose({
       selectItem: onSelect,
       scrollTo
@@ -569,7 +583,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   }, [
                     renderSlot(_ctx.$slots, "input-list", { open: unref(open) }, void 0, true),
                     createElementVNode("div", mergeProps(unref(containerProps), {
-                      class: ["list-container", { "list-container--multi": __props.multi }]
+                      class: ["list-container", { "list-container--multi": __props.multi }],
+                      style: { height: `${unref(calculateTableHeight)}rem` }
                     }), [
                       createElementVNode("ul", mergeProps(unref(wrapperProps), {
                         role: "listbox",
@@ -753,6 +768,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4888d2df"]]);
+var Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-12b53c10"]]);
 
 export { Dropdown as default };

package/consts/style.d.ts

@@ -0,0 +1 @@
+export declare const PX_TO_REM_RATIO: number;

package/consts/style.vue.js

@@ -0,0 +1,3 @@
+const PX_TO_REM_RATIO = 1 / 16;
+
+export { PX_TO_REM_RATIO };

package/index.vue.js

@@ -1,4 +1,4 @@
-import './IncludeExcludeOption.vue_vue_type_style_index_0_scoped_true_lang.css';
+import './Icon.vue_vue_type_style_index_0_scoped_true_lang.css';
 export { AppTriggerTypes } from './components/appTrigger/index.vue.js';
 export { AutocompleteDropdownTypes } from './components/autocompleteDropdown/index.vue.js';
 export { MenuItemTypes } from './components/menuItem/index.vue.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "1.4.2-rc.5",
+  "version": "1.4.2-rc.6",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"

package/utils/style.d.ts

@@ -0,0 +1 @@
+export declare const pxToRem: (value: number) => number;

package/utils/style.vue.js

@@ -0,0 +1,5 @@
+import { PX_TO_REM_RATIO } from '../consts/style.vue.js';
+
+const pxToRem = (value) => value * PX_TO_REM_RATIO;
+
+export { pxToRem };