@teambit/compositions.ui.composition-compare 0.0.259 → 0.0.260

package/composition-dropdown.module.scss

@@ -14,6 +14,34 @@
   background-color: var(--bit-bg-color, #ffffff);
 }
 
+.placeholderText {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.placeholderLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.menuItem {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.tag {
+  font-size: 11px;
+  line-height: 16px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.08);
+  color: var(--on-background-color, #222222);
+}
+
 .menu {
   font-size: var(--bit-p-xs);
   border-radius: 6px;

package/composition-dropdown.tsx

@@ -1,11 +1,17 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';
 import { Icon } from '@teambit/design.elements.icon';
 import { Dropdown } from '@teambit/evangelist.surfaces.dropdown';
 
 import styles from './composition-dropdown.module.scss';
 
-export type DropdownItem = { id: string; label: string; href?: string; onClick?: (id: string, e) => void };
+export type DropdownItem = {
+  id: string;
+  label: string;
+  href?: string;
+  onClick?: (id: string, e) => void;
+  tag?: string;
+};
 
 export type CompositionDropdownProps = {
   selected?: Omit<DropdownItem, 'value'>;
@@ -21,7 +27,10 @@ export function CompositionDropdown(props: CompositionDropdownProps) {
       dropClass={styles.menu}
       placeholder={
         <div className={styles.placeholder}>
-          <div>{selected && selected.label}</div>
+          <div className={styles.placeholderText}>
+            <span className={styles.placeholderLabel}>{selected && selected.label}</span>
+            {selected?.tag && <span className={styles.tag}>{selected.tag}</span>}
+          </div>
           <Icon of="fat-arrow-down" />
         </div>
       }
@@ -56,7 +65,10 @@ function MenuItem(props: MenuItemProps) {
     <div ref={currentVersionRef} key={`${current.href}-container`}>
       {/* @ts-ignore */}
       <MenuLinkItem key={current.href} active={current.id === selected?.id} href={current.href} onClick={onClick}>
-        <div>{current.label}</div>
+        <div className={styles.menuItem}>
+          <span>{current.label}</span>
+          {current.tag && <span className={styles.tag}>{current.tag}</span>}
+        </div>
       </MenuLinkItem>
     </div>
   );

package/dist/composition-compare.context.d.ts

@@ -1,4 +1,4 @@
-import { CompositionContentProps } from "@teambit/compositions";
+import { CompositionContentProps } from '@teambit/compositions';
 export type CompositionCompareContextModel = {
     compositionProps?: CompositionContentProps;
     isBase?: boolean;

package/dist/composition-compare.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CompositionContentProps, EmptyStateSlot } from '@teambit/compositions';
+import { type CompositionContentProps, type EmptyStateSlot } from '@teambit/compositions';
 export type CompositionCompareProps = {
     emptyState?: EmptyStateSlot;
     Widgets?: {