@teambit/compositions.ui.composition-compare 0.0.227 → 0.0.229

package/composition-compare.context.tsx

@@ -0,0 +1,14 @@
+import { CompositionContentProps } from '@teambit/compositions';
+import { useContext, createContext } from 'react';
+
+export type CompositionCompareContextModel = {
+  compositionProps?: CompositionContentProps;
+  isBase?: boolean;
+  isCompare?: boolean;
+};
+
+export const CompositionCompareContext: React.Context<CompositionCompareContextModel | undefined> = createContext<
+  CompositionCompareContextModel | undefined
+>(undefined);
+
+export const useCompositionCompare = () => useContext(CompositionCompareContext);

package/composition-compare.module.scss

@@ -1,19 +1,22 @@
 .toolbar {
   display: flex;
-  background-color: var(--bit-bg-heaviest, #ededed);
-  padding: 8px;
+  padding: 4px;
 }
 
 .left,
 .right {
   display: flex;
   flex: 1;
-  padding: 8px;
-  background-color: #fff;
+  padding: 4px;
+  background-color: var(--background-color);
   align-items: center;
   justify-content: space-between;
 }
 
+.right {
+  justify-content: flex-end;
+}
+
 .mainContainer {
   display: flex;
   height: 100%;
@@ -30,8 +33,7 @@
 
 .subView {
   height: 100%;
-  background-color: white;
-  overflow-y: auto;
+  background-color: var(--background-color);
 }
 
 .loader {
@@ -42,6 +44,7 @@
 
 .widgets {
   display: flex;
+  padding: 4px;
 }
 
 .dropdown {

package/composition-compare.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable react/prop-types */
+import React, { useMemo, useState } from 'react';
 import { useComponentCompare } from '@teambit/component.ui.component-compare.context';
 import { CompositionContent, CompositionContentProps, EmptyStateSlot } from '@teambit/compositions';
 import { CompositionContextProvider } from '@teambit/compositions.ui.hooks.use-composition';
@@ -6,11 +6,12 @@ import {
   useCompareQueryParam,
   useUpdatedUrlFromQuery,
 } from '@teambit/component.ui.component-compare.hooks.use-component-compare-url';
+import { uniqBy } from 'lodash';
 import { CompareSplitLayoutPreset } from '@teambit/component.ui.component-compare.layouts.compare-split-layout-preset';
 import { RoundLoader } from '@teambit/design.ui.round-loader';
 import queryString from 'query-string';
-import React, { useMemo, useState } from 'react';
 import { CompositionDropdown } from './composition-dropdown';
+import { CompositionCompareContext } from './composition-compare.context';
 
 import styles from './composition-compare.module.scss';
 
@@ -20,11 +21,12 @@ export type CompositionCompareProps = {
     Right?: React.ReactNode;
     Left?: React.ReactNode;
   };
+  previewViewProps?: CompositionContentProps;
   PreviewView?: React.ComponentType<CompositionContentProps>;
 };
 
 export function CompositionCompare(props: CompositionCompareProps) {
-  const { emptyState, PreviewView = CompositionContent, Widgets } = props;
+  const { emptyState, PreviewView = CompositionContent, Widgets, previewViewProps = {} } = props;
 
   const componentCompareContext = useComponentCompare();
 
@@ -62,31 +64,24 @@ export function CompositionCompare(props: CompositionCompareProps) {
       })) ||
     (compareCompositions && compareCompositions[0]);
 
-  const baseCompositionDropdownSource =
-    baseCompositions?.map((c) => {
-      const href = !baseState?.controlled
-        ? useUpdatedUrlFromQuery({
-            compositionBaseFile: c.identifier,
-            compositionCompareFile: selectedCompareComp?.identifier,
-          })
-        : useUpdatedUrlFromQuery({});
-      const onClick = baseState?.controlled ? baseHooks?.onClick : undefined;
-
-      return { id: c.identifier, label: c.displayName, href, onClick };
-    }) || [];
-
-  const compareCompositionDropdownSource =
-    compareCompositions?.map((c) => {
+  const compositionsDropdownSource = uniqBy(baseCompositions?.concat(compareCompositions || []), 'identifier')?.map(
+    (c) => {
       const href = !compareState?.controlled
         ? useUpdatedUrlFromQuery({
             compositionBaseFile: selectedBaseComp?.identifier,
             compositionCompareFile: c.identifier,
           })
         : useUpdatedUrlFromQuery({});
-      const onClick = compareState?.controlled ? compareHooks?.onClick : undefined;
 
+      const onClick = compareState?.controlled
+        ? (_, __) => {
+            compareHooks?.onClick?.(_, __);
+            baseHooks?.onClick?.(_, __);
+          }
+        : undefined;
       return { id: c.identifier, label: c.displayName, href, onClick };
-    }) || [];
+    }
+  );
 
   const [baseCompositionParams, setBaseCompositionParams] = useState<Record<string, any>>({});
   const baseCompQueryParams = useMemo(() => queryString.stringify(baseCompositionParams), [baseCompositionParams]);
@@ -97,11 +92,6 @@ export function CompositionCompare(props: CompositionCompareProps) {
     [compareCompositionParams]
   );
 
-  const selectedBaseDropdown = selectedBaseComp && {
-    id: selectedBaseComp.identifier,
-    label: selectedBaseComp.displayName,
-  };
-
   const selectedCompareDropdown = selectedCompareComp && {
     id: selectedCompareComp.identifier,
     label: selectedCompareComp.displayName,
@@ -112,44 +102,69 @@ export function CompositionCompare(props: CompositionCompareProps) {
       return null;
     }
     const baseCompModel = base.model;
-
+    const compositionProps = {
+      forceHeight: undefined,
+      innerBottomPadding: 50,
+      ...previewViewProps,
+      emptyState,
+      component: baseCompModel,
+      queryParams: baseCompQueryParams,
+      selected: selectedCompareComp,
+    };
     return (
       <div className={styles.subView}>
-        <CompositionContextProvider queryParams={baseCompositionParams} setQueryParams={setBaseCompositionParams}>
-          <PreviewView
-            emptyState={emptyState}
-            component={baseCompModel}
-            selected={selectedBaseComp}
-            queryParams={baseCompQueryParams}
-            forceHeight={undefined}
-            innerBottomPadding={50}
-          />
-        </CompositionContextProvider>
+        <CompositionCompareContext.Provider value={{ compositionProps, isBase: true }}>
+          <CompositionContextProvider queryParams={baseCompositionParams} setQueryParams={setBaseCompositionParams}>
+            <PreviewView
+              forceHeight={undefined}
+              innerBottomPadding={50}
+              {...previewViewProps}
+              emptyState={emptyState}
+              component={baseCompModel}
+              selected={selectedCompareComp}
+              queryParams={baseCompQueryParams}
+            />
+          </CompositionContextProvider>
+        </CompositionCompareContext.Provider>
       </div>
     );
-  }, [base, selectedBaseComp]);
+  }, [base, selectedCompareComp?.identifier]);
 
   const CompareLayout = useMemo(() => {
     if (compare === undefined) {
       return null;
     }
     const compareCompModel = compare.model;
-
+    const compositionProps = {
+      forceHeight: undefined,
+      innerBottomPadding: 50,
+      ...previewViewProps,
+      emptyState,
+      component: compareCompModel,
+      queryParams: compareCompQueryParams,
+      selected: selectedCompareComp,
+    };
     return (
       <div className={styles.subView}>
-        <CompositionContextProvider queryParams={compareCompositionParams} setQueryParams={setCompareCompositionParams}>
-          <PreviewView
-            emptyState={emptyState}
-            component={compareCompModel}
-            selected={selectedCompareComp}
-            queryParams={compareCompQueryParams}
-            forceHeight={undefined}
-            innerBottomPadding={50}
-          />
-        </CompositionContextProvider>
+        <CompositionCompareContext.Provider value={{ compositionProps, isCompare: true }}>
+          <CompositionContextProvider
+            queryParams={compareCompositionParams}
+            setQueryParams={setCompareCompositionParams}
+          >
+            <PreviewView
+              forceHeight={undefined}
+              innerBottomPadding={50}
+              {...previewViewProps}
+              emptyState={emptyState}
+              component={compareCompModel}
+              queryParams={compareCompQueryParams}
+              selected={selectedCompareComp}
+            />
+          </CompositionContextProvider>
+        </CompositionCompareContext.Provider>
       </div>
     );
-  }, [compare, selectedCompareComp]);
+  }, [compare, selectedCompareComp?.identifier]);
 
   const CompositionToolbar = () => {
     if (!base && !compare) {
@@ -158,33 +173,25 @@ export function CompositionCompare(props: CompositionCompareProps) {
 
     return (
       <div className={styles.toolbar}>
-        {base && (
-          <div className={styles.left}>
-            <div className={styles.dropdown}>
-              {baseCompositionDropdownSource.length > 0 && (
-                <CompositionDropdown dropdownItems={baseCompositionDropdownSource} selected={selectedBaseDropdown} />
-              )}
-            </div>
-            <div className={styles.widgets}>{Widgets?.Left}</div>
-          </div>
-        )}
-        <div className={styles.right}>
+        <div className={styles.left}>
           <div className={styles.dropdown}>
-            {compareCompositionDropdownSource.length > 0 && (
-              <CompositionDropdown
-                dropdownItems={compareCompositionDropdownSource}
-                selected={selectedCompareDropdown}
-              />
+            {compositionsDropdownSource.length > 0 && (
+              <CompositionDropdown dropdownItems={compositionsDropdownSource} selected={selectedCompareDropdown} />
             )}
           </div>
+          <div className={styles.widgets}>{Widgets?.Left}</div>
+        </div>
+        <div className={styles.right}>
           <div className={styles.widgets}>{Widgets?.Right}</div>
         </div>
       </div>
     );
   };
 
+  const key = `${componentCompareContext?.base?.model.id.toString()}-${componentCompareContext?.compare?.model.id.toString()}-composition-compare`;
+
   return (
-    <>
+    <React.Fragment key={key}>
       {componentCompareContext?.loading && (
         <div className={styles.loader}>
           <RoundLoader />
@@ -192,6 +199,6 @@ export function CompositionCompare(props: CompositionCompareProps) {
       )}
       <CompositionToolbar />
       <CompareSplitLayoutPreset base={BaseLayout} compare={CompareLayout} />
-    </>
+    </React.Fragment>
   );
 }

package/composition-dropdown.tsx

@@ -1,6 +1,6 @@
-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/evangelist.elements.icon';
+import { Icon } from '@teambit/design.elements.icon';
 import { Dropdown } from '@teambit/evangelist.surfaces.dropdown';
 
 import styles from './composition-dropdown.module.scss';
@@ -41,15 +41,8 @@ type MenuItemProps = {
 function MenuItem(props: MenuItemProps) {
   const { selected, current } = props;
 
-  const isCurrent = selected?.id === current.id;
   const currentVersionRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    if (isCurrent) {
-      currentVersionRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-    }
-  }, [isCurrent]);
-
   const onClick = (!!current.onClick && ((e) => current.onClick?.(current.id, e))) || undefined;
 
   return (

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { CompositionContentProps } from '@teambit/compositions';
+export declare type CompositionCompareContextModel = {
+    compositionProps?: CompositionContentProps;
+    isBase?: boolean;
+    isCompare?: boolean;
+};
+export declare const CompositionCompareContext: React.Context<CompositionCompareContextModel | undefined>;
+export declare const useCompositionCompare: () => CompositionCompareContextModel;

package/dist/composition-compare.context.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCompositionCompare = exports.CompositionCompareContext = void 0;
+const react_1 = require("react");
+exports.CompositionCompareContext = (0, react_1.createContext)(undefined);
+const useCompositionCompare = () => (0, react_1.useContext)(exports.CompositionCompareContext);
+exports.useCompositionCompare = useCompositionCompare;
+//# sourceMappingURL=composition-compare.context.js.map

package/dist/composition-compare.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composition-compare.context.js","sourceRoot":"","sources":["../composition-compare.context.tsx"],"names":[],"mappings":";;;AACA,iCAAkD;AAQrC,QAAA,yBAAyB,GAA8D,IAAA,qBAAa,EAE/G,SAAS,CAAC,CAAC;AAEN,MAAM,qBAAqB,GAAG,GAAG,EAAE,CAAC,IAAA,kBAAU,EAAC,iCAAyB,CAAC,CAAC;AAApE,QAAA,qBAAqB,yBAA+C"}

package/dist/composition-compare.d.ts

@@ -1,11 +1,12 @@
-import { CompositionContentProps, EmptyStateSlot } from '@teambit/compositions';
 import React from 'react';
+import { CompositionContentProps, EmptyStateSlot } from '@teambit/compositions';
 export declare type CompositionCompareProps = {
     emptyState?: EmptyStateSlot;
     Widgets?: {
         Right?: React.ReactNode;
         Left?: React.ReactNode;
     };
+    previewViewProps?: CompositionContentProps;
     PreviewView?: React.ComponentType<CompositionContentProps>;
 };
 export declare function CompositionCompare(props: CompositionCompareProps): JSX.Element;

package/dist/composition-compare.js

@@ -27,20 +27,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionCompare = void 0;
-/* eslint-disable react/prop-types */
+const react_1 = __importStar(require("react"));
 const component_ui_component_compare_context_1 = require("@teambit/component.ui.component-compare.context");
 const compositions_1 = require("@teambit/compositions");
 const compositions_ui_hooks_use_composition_1 = require("@teambit/compositions.ui.hooks.use-composition");
 const component_ui_component_compare_hooks_use_component_compare_url_1 = require("@teambit/component.ui.component-compare.hooks.use-component-compare-url");
+const lodash_1 = require("lodash");
 const component_ui_component_compare_layouts_compare_split_layout_preset_1 = require("@teambit/component.ui.component-compare.layouts.compare-split-layout-preset");
 const design_ui_round_loader_1 = require("@teambit/design.ui.round-loader");
 const query_string_1 = __importDefault(require("query-string"));
-const react_1 = __importStar(require("react"));
 const composition_dropdown_1 = require("./composition-dropdown");
+const composition_compare_context_1 = require("./composition-compare.context");
 const composition_compare_module_scss_1 = __importDefault(require("./composition-compare.module.scss"));
 function CompositionCompare(props) {
-    var _a, _b, _c, _d;
-    const { emptyState, PreviewView = compositions_1.CompositionContent, Widgets } = props;
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { emptyState, PreviewView = compositions_1.CompositionContent, Widgets, previewViewProps = {} } = props;
     const componentCompareContext = (0, component_ui_component_compare_context_1.useComponentCompare)();
     const { base, compare, baseContext, compareContext } = componentCompareContext || {};
     const baseCompositions = base === null || base === void 0 ? void 0 : base.model.compositions;
@@ -67,34 +68,26 @@ function CompositionCompare(props) {
             return c.identifier === selectedCompositionCompareId;
         })) ||
         (compareCompositions && compareCompositions[0]);
-    const baseCompositionDropdownSource = (baseCompositions === null || baseCompositions === void 0 ? void 0 : baseCompositions.map((c) => {
-        const href = !(baseState === null || baseState === void 0 ? void 0 : baseState.controlled)
-            ? (0, component_ui_component_compare_hooks_use_component_compare_url_1.useUpdatedUrlFromQuery)({
-                compositionBaseFile: c.identifier,
-                compositionCompareFile: selectedCompareComp === null || selectedCompareComp === void 0 ? void 0 : selectedCompareComp.identifier,
-            })
-            : (0, component_ui_component_compare_hooks_use_component_compare_url_1.useUpdatedUrlFromQuery)({});
-        const onClick = (baseState === null || baseState === void 0 ? void 0 : baseState.controlled) ? baseHooks === null || baseHooks === void 0 ? void 0 : baseHooks.onClick : undefined;
-        return { id: c.identifier, label: c.displayName, href, onClick };
-    })) || [];
-    const compareCompositionDropdownSource = (compareCompositions === null || compareCompositions === void 0 ? void 0 : compareCompositions.map((c) => {
+    const compositionsDropdownSource = (_e = (0, lodash_1.uniqBy)(baseCompositions === null || baseCompositions === void 0 ? void 0 : baseCompositions.concat(compareCompositions || []), 'identifier')) === null || _e === void 0 ? void 0 : _e.map((c) => {
         const href = !(compareState === null || compareState === void 0 ? void 0 : compareState.controlled)
             ? (0, component_ui_component_compare_hooks_use_component_compare_url_1.useUpdatedUrlFromQuery)({
                 compositionBaseFile: selectedBaseComp === null || selectedBaseComp === void 0 ? void 0 : selectedBaseComp.identifier,
                 compositionCompareFile: c.identifier,
             })
             : (0, component_ui_component_compare_hooks_use_component_compare_url_1.useUpdatedUrlFromQuery)({});
-        const onClick = (compareState === null || compareState === void 0 ? void 0 : compareState.controlled) ? compareHooks === null || compareHooks === void 0 ? void 0 : compareHooks.onClick : undefined;
+        const onClick = (compareState === null || compareState === void 0 ? void 0 : compareState.controlled)
+            ? (_, __) => {
+                var _a, _b;
+                (_a = compareHooks === null || compareHooks === void 0 ? void 0 : compareHooks.onClick) === null || _a === void 0 ? void 0 : _a.call(compareHooks, _, __);
+                (_b = baseHooks === null || baseHooks === void 0 ? void 0 : baseHooks.onClick) === null || _b === void 0 ? void 0 : _b.call(baseHooks, _, __);
+            }
+            : undefined;
         return { id: c.identifier, label: c.displayName, href, onClick };
-    })) || [];
+    });
     const [baseCompositionParams, setBaseCompositionParams] = (0, react_1.useState)({});
     const baseCompQueryParams = (0, react_1.useMemo)(() => query_string_1.default.stringify(baseCompositionParams), [baseCompositionParams]);
     const [compareCompositionParams, setCompareCompositionParams] = (0, react_1.useState)({});
     const compareCompQueryParams = (0, react_1.useMemo)(() => query_string_1.default.stringify(compareCompositionParams), [compareCompositionParams]);
-    const selectedBaseDropdown = selectedBaseComp && {
-        id: selectedBaseComp.identifier,
-        label: selectedBaseComp.displayName,
-    };
     const selectedCompareDropdown = selectedCompareComp && {
         id: selectedCompareComp.identifier,
         label: selectedCompareComp.displayName,
@@ -104,32 +97,36 @@ function CompositionCompare(props) {
             return null;
         }
         const baseCompModel = base.model;
+        const compositionProps = Object.assign(Object.assign({ forceHeight: undefined, innerBottomPadding: 50 }, previewViewProps), { emptyState, component: baseCompModel, queryParams: baseCompQueryParams, selected: selectedCompareComp });
         return (react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.subView },
-            react_1.default.createElement(compositions_ui_hooks_use_composition_1.CompositionContextProvider, { queryParams: baseCompositionParams, setQueryParams: setBaseCompositionParams },
-                react_1.default.createElement(PreviewView, { emptyState: emptyState, component: baseCompModel, selected: selectedBaseComp, queryParams: baseCompQueryParams, forceHeight: undefined, innerBottomPadding: 50 }))));
-    }, [base, selectedBaseComp]);
+            react_1.default.createElement(composition_compare_context_1.CompositionCompareContext.Provider, { value: { compositionProps, isBase: true } },
+                react_1.default.createElement(compositions_ui_hooks_use_composition_1.CompositionContextProvider, { queryParams: baseCompositionParams, setQueryParams: setBaseCompositionParams },
+                    react_1.default.createElement(PreviewView, Object.assign({ forceHeight: undefined, innerBottomPadding: 50 }, previewViewProps, { emptyState: emptyState, component: baseCompModel, selected: selectedCompareComp, queryParams: baseCompQueryParams }))))));
+    }, [base, selectedCompareComp === null || selectedCompareComp === void 0 ? void 0 : selectedCompareComp.identifier]);
     const CompareLayout = (0, react_1.useMemo)(() => {
         if (compare === undefined) {
             return null;
         }
         const compareCompModel = compare.model;
+        const compositionProps = Object.assign(Object.assign({ forceHeight: undefined, innerBottomPadding: 50 }, previewViewProps), { emptyState, component: compareCompModel, queryParams: compareCompQueryParams, selected: selectedCompareComp });
         return (react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.subView },
-            react_1.default.createElement(compositions_ui_hooks_use_composition_1.CompositionContextProvider, { queryParams: compareCompositionParams, setQueryParams: setCompareCompositionParams },
-                react_1.default.createElement(PreviewView, { emptyState: emptyState, component: compareCompModel, selected: selectedCompareComp, queryParams: compareCompQueryParams, forceHeight: undefined, innerBottomPadding: 50 }))));
-    }, [compare, selectedCompareComp]);
+            react_1.default.createElement(composition_compare_context_1.CompositionCompareContext.Provider, { value: { compositionProps, isCompare: true } },
+                react_1.default.createElement(compositions_ui_hooks_use_composition_1.CompositionContextProvider, { queryParams: compareCompositionParams, setQueryParams: setCompareCompositionParams },
+                    react_1.default.createElement(PreviewView, Object.assign({ forceHeight: undefined, innerBottomPadding: 50 }, previewViewProps, { emptyState: emptyState, component: compareCompModel, queryParams: compareCompQueryParams, selected: selectedCompareComp }))))));
+    }, [compare, selectedCompareComp === null || selectedCompareComp === void 0 ? void 0 : selectedCompareComp.identifier]);
     const CompositionToolbar = () => {
         if (!base && !compare) {
             return null;
         }
         return (react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.toolbar },
-            base && (react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.left },
-                react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.dropdown }, baseCompositionDropdownSource.length > 0 && (react_1.default.createElement(composition_dropdown_1.CompositionDropdown, { dropdownItems: baseCompositionDropdownSource, selected: selectedBaseDropdown }))),
-                react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.widgets }, Widgets === null || Widgets === void 0 ? void 0 : Widgets.Left))),
+            react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.left },
+                react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.dropdown }, compositionsDropdownSource.length > 0 && (react_1.default.createElement(composition_dropdown_1.CompositionDropdown, { dropdownItems: compositionsDropdownSource, selected: selectedCompareDropdown }))),
+                react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.widgets }, Widgets === null || Widgets === void 0 ? void 0 : Widgets.Left)),
             react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.right },
-                react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.dropdown }, compareCompositionDropdownSource.length > 0 && (react_1.default.createElement(composition_dropdown_1.CompositionDropdown, { dropdownItems: compareCompositionDropdownSource, selected: selectedCompareDropdown }))),
                 react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.widgets }, Widgets === null || Widgets === void 0 ? void 0 : Widgets.Right))));
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+    const key = `${(_f = componentCompareContext === null || componentCompareContext === void 0 ? void 0 : componentCompareContext.base) === null || _f === void 0 ? void 0 : _f.model.id.toString()}-${(_g = componentCompareContext === null || componentCompareContext === void 0 ? void 0 : componentCompareContext.compare) === null || _g === void 0 ? void 0 : _g.model.id.toString()}-composition-compare`;
+    return (react_1.default.createElement(react_1.default.Fragment, { key: key },
         (componentCompareContext === null || componentCompareContext === void 0 ? void 0 : componentCompareContext.loading) && (react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.loader },
             react_1.default.createElement(design_ui_round_loader_1.RoundLoader, null))),
         react_1.default.createElement(CompositionToolbar, null),

package/dist/composition-compare.js.map

@@ -1 +1 @@
-{"version":3,"file":"composition-compare.js","sourceRoot":"","sources":["../composition-compare.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"composition-compare.js","sourceRoot":"","sources":["../composition-compare.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiD;AACjD,4GAAsF;AACtF,wDAAoG;AACpG,0GAA4F;AAC5F,4JAGiF;AACjF,mCAAgC;AAChC,oKAAuH;AACvH,4EAA8D;AAC9D,gEAAuC;AACvC,iEAA6D;AAC7D,+EAA0E;AAE1E,wGAAuD;AAYvD,SAAgB,kBAAkB,CAAC,KAA8B;;IAC/D,MAAM,EAAE,UAAU,EAAE,WAAW,GAAG,iCAAkB,EAAE,OAAO,EAAE,gBAAgB,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;IAE/F,MAAM,uBAAuB,GAAG,IAAA,4DAAmB,GAAE,CAAC;IAEtD,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,uBAAuB,IAAI,EAAE,CAAC;IAErF,MAAM,gBAAgB,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,CAAC,YAAY,CAAC;IAClD,MAAM,mBAAmB,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC,YAAY,CAAC;IAExD,MAAM,2BAA2B,GAAG,IAAA,qFAAoB,EAAC,qBAAqB,CAAC,CAAC;IAChF,MAAM,8BAA8B,GAAG,IAAA,qFAAoB,EAAC,wBAAwB,CAAC,CAAC;IAEtF,MAAM,SAAS,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,0CAAE,OAAO,CAAC;IAC9C,MAAM,YAAY,GAAG,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,KAAK,0CAAE,OAAO,CAAC;IACpD,MAAM,SAAS,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,0CAAE,OAAO,CAAC;IAC9C,MAAM,YAAY,GAAG,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,KAAK,0CAAE,OAAO,CAAC;IACpD,MAAM,qBAAqB,GAAG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,EAAE,CAAC;IAC5C,MAAM,wBAAwB,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,EAAE,CAAC;IAElD,MAAM,yBAAyB,GAAG,qBAAqB,IAAI,2BAA2B,CAAC;IACvF,MAAM,4BAA4B,GAAG,wBAAwB,IAAI,8BAA8B,CAAC;IAEhG,MAAM,gBAAgB,GACpB,CAAC,yBAAyB;QACxB,gBAAgB;QAChB,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE;YAC1B,OAAO,CAAC,CAAC,UAAU,KAAK,yBAAyB,CAAC;QACpD,CAAC,CAAC,CAAC;QACL,CAAC,gBAAgB,IAAI,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IAE5C,MAAM,mBAAmB,GACvB,CAAC,4BAA4B;QAC3B,mBAAmB;QACnB,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7B,OAAO,CAAC,CAAC,UAAU,KAAK,4BAA4B,CAAC;QACvD,CAAC,CAAC,CAAC;QACL,CAAC,mBAAmB,IAAI,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;IAElD,MAAM,0BAA0B,GAAG,MAAA,IAAA,eAAM,EAAC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,MAAM,CAAC,mBAAmB,IAAI,EAAE,CAAC,EAAE,YAAY,CAAC,0CAAE,GAAG,CAC/G,CAAC,CAAC,EAAE,EAAE;QACJ,MAAM,IAAI,GAAG,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,CAAA;YACpC,CAAC,CAAC,IAAA,uFAAsB,EAAC;gBACrB,mBAAmB,EAAE,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,UAAU;gBACjD,sBAAsB,EAAE,CAAC,CAAC,UAAU;aACrC,CAAC;YACJ,CAAC,CAAC,IAAA,uFAAsB,EAAC,EAAE,CAAC,CAAC;QAE/B,MAAM,OAAO,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU;YACtC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE;;gBACR,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,6DAAG,CAAC,EAAE,EAAE,CAAC,CAAC;gBAC/B,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,0DAAG,CAAC,EAAE,EAAE,CAAC,CAAC;YAC9B,CAAC;YACH,CAAC,CAAC,SAAS,CAAC;QACd,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,CAAC,CAAC,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;IACnE,CAAC,CACF,CAAC;IAEF,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,IAAA,gBAAQ,EAAsB,EAAE,CAAC,CAAC;IAC5F,MAAM,mBAAmB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,sBAAW,CAAC,SAAS,CAAC,qBAAqB,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAEjH,MAAM,CAAC,wBAAwB,EAAE,2BAA2B,CAAC,GAAG,IAAA,gBAAQ,EAAsB,EAAE,CAAC,CAAC;IAClG,MAAM,sBAAsB,GAAG,IAAA,eAAO,EACpC,GAAG,EAAE,CAAC,sBAAW,CAAC,SAAS,CAAC,wBAAwB,CAAC,EACrD,CAAC,wBAAwB,CAAC,CAC3B,CAAC;IAEF,MAAM,uBAAuB,GAAG,mBAAmB,IAAI;QACrD,EAAE,EAAE,mBAAmB,CAAC,UAAU;QAClC,KAAK,EAAE,mBAAmB,CAAC,WAAW;KACvC,CAAC;IAEF,MAAM,UAAU,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC9B,IAAI,IAAI,KAAK,SAAS,EAAE;YACtB,OAAO,IAAI,CAAC;SACb;QACD,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;QACjC,MAAM,gBAAgB,iCACpB,WAAW,EAAE,SAAS,EACtB,kBAAkB,EAAE,EAAE,IACnB,gBAAgB,KACnB,UAAU,EACV,SAAS,EAAE,aAAa,EACxB,WAAW,EAAE,mBAAmB,EAChC,QAAQ,EAAE,mBAAmB,GAC9B,CAAC;QACF,OAAO,CACL,uCAAK,SAAS,EAAE,yCAAM,CAAC,OAAO;YAC5B,8BAAC,uDAAyB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,gBAAgB,EAAE,MAAM,EAAE,IAAI,EAAE;gBAC3E,8BAAC,kEAA0B,IAAC,WAAW,EAAE,qBAAqB,EAAE,cAAc,EAAE,wBAAwB;oBACtG,8BAAC,WAAW,kBACV,WAAW,EAAE,SAAS,EACtB,kBAAkB,EAAE,EAAE,IAClB,gBAAgB,IACpB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,mBAAmB,EAC7B,WAAW,EAAE,mBAAmB,IAChC,CACyB,CACM,CACjC,CACP,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,UAAU,CAAC,CAAC,CAAC;IAE5C,MAAM,aAAa,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACjC,IAAI,OAAO,KAAK,SAAS,EAAE;YACzB,OAAO,IAAI,CAAC;SACb;QACD,MAAM,gBAAgB,GAAG,OAAO,CAAC,KAAK,CAAC;QACvC,MAAM,gBAAgB,iCACpB,WAAW,EAAE,SAAS,EACtB,kBAAkB,EAAE,EAAE,IACnB,gBAAgB,KACnB,UAAU,EACV,SAAS,EAAE,gBAAgB,EAC3B,WAAW,EAAE,sBAAsB,EACnC,QAAQ,EAAE,mBAAmB,GAC9B,CAAC;QACF,OAAO,CACL,uCAAK,SAAS,EAAE,yCAAM,CAAC,OAAO;YAC5B,8BAAC,uDAAyB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,gBAAgB,EAAE,SAAS,EAAE,IAAI,EAAE;gBAC9E,8BAAC,kEAA0B,IACzB,WAAW,EAAE,wBAAwB,EACrC,cAAc,EAAE,2BAA2B;oBAE3C,8BAAC,WAAW,kBACV,WAAW,EAAE,SAAS,EACtB,kBAAkB,EAAE,EAAE,IAClB,gBAAgB,IACpB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,gBAAgB,EAC3B,WAAW,EAAE,sBAAsB,EACnC,QAAQ,EAAE,mBAAmB,IAC7B,CACyB,CACM,CACjC,CACP,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,UAAU,CAAC,CAAC,CAAC;IAE/C,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE;YACrB,OAAO,IAAI,CAAC;SACb;QAED,OAAO,CACL,uCAAK,SAAS,EAAE,yCAAM,CAAC,OAAO;YAC5B,uCAAK,SAAS,EAAE,yCAAM,CAAC,IAAI;gBACzB,uCAAK,SAAS,EAAE,yCAAM,CAAC,QAAQ,IAC5B,0BAA0B,CAAC,MAAM,GAAG,CAAC,IAAI,CACxC,8BAAC,0CAAmB,IAAC,aAAa,EAAE,0BAA0B,EAAE,QAAQ,EAAE,uBAAuB,GAAI,CACtG,CACG;gBACN,uCAAK,SAAS,EAAE,yCAAM,CAAC,OAAO,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAO,CACjD;YACN,uCAAK,SAAS,EAAE,yCAAM,CAAC,KAAK;gBAC1B,uCAAK,SAAS,EAAE,yCAAM,CAAC,OAAO,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAO,CAClD,CACF,CACP,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,GAAG,GAAG,GAAG,MAAA,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,IAAI,0CAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,MAAA,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,OAAO,0CAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,sBAAsB,CAAC;IAEjJ,OAAO,CACL,8BAAC,eAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,GAAG;QACrB,CAAA,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,OAAO,KAAI,CACnC,uCAAK,SAAS,EAAE,yCAAM,CAAC,MAAM;YAC3B,8BAAC,oCAAW,OAAG,CACX,CACP;QACD,8BAAC,kBAAkB,OAAG;QACtB,8BAAC,6FAAwB,IAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,GAAI,CACvD,CAClB,CAAC;AACJ,CAAC;AAhLD,gDAgLC"}

package/dist/composition-compare.module.scss

@@ -1,19 +1,22 @@
 .toolbar {
   display: flex;
-  background-color: var(--bit-bg-heaviest, #ededed);
-  padding: 8px;
+  padding: 4px;
 }
 
 .left,
 .right {
   display: flex;
   flex: 1;
-  padding: 8px;
-  background-color: #fff;
+  padding: 4px;
+  background-color: var(--background-color);
   align-items: center;
   justify-content: space-between;
 }
 
+.right {
+  justify-content: flex-end;
+}
+
 .mainContainer {
   display: flex;
   height: 100%;
@@ -30,8 +33,7 @@
 
 .subView {
   height: 100%;
-  background-color: white;
-  overflow-y: auto;
+  background-color: var(--background-color);
 }
 
 .loader {
@@ -42,6 +44,7 @@
 
 .widgets {
   display: flex;
+  padding: 4px;
 }
 
 .dropdown {

package/dist/composition-dropdown.js

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionDropdown = void 0;
 const react_1 = __importStar(require("react"));
 const design_ui_surfaces_menu_link_item_1 = require("@teambit/design.ui.surfaces.menu.link-item");
-const evangelist_elements_icon_1 = require("@teambit/evangelist.elements.icon");
+const design_elements_icon_1 = require("@teambit/design.elements.icon");
 const evangelist_surfaces_dropdown_1 = require("@teambit/evangelist.surfaces.dropdown");
 const composition_dropdown_module_scss_1 = __importDefault(require("./composition-dropdown.module.scss"));
 function CompositionDropdown(props) {
@@ -37,21 +37,14 @@ function CompositionDropdown(props) {
     const key = (item) => `${item.id}-${item.href}`;
     return (react_1.default.createElement(evangelist_surfaces_dropdown_1.Dropdown, { dropClass: composition_dropdown_module_scss_1.default.menu, placeholder: react_1.default.createElement("div", { className: composition_dropdown_module_scss_1.default.placeholder },
             react_1.default.createElement("div", null, selected && selected.label),
-            react_1.default.createElement(evangelist_elements_icon_1.Icon, { of: "fat-arrow-down" })) }, data.map((item) => {
+            react_1.default.createElement(design_elements_icon_1.Icon, { of: "fat-arrow-down" })) }, data.map((item) => {
         return react_1.default.createElement(MenuItem, { key: key(item), current: item, selected: selected });
     })));
 }
 exports.CompositionDropdown = CompositionDropdown;
 function MenuItem(props) {
     const { selected, current } = props;
-    const isCurrent = (selected === null || selected === void 0 ? void 0 : selected.id) === current.id;
     const currentVersionRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        if (isCurrent) {
-            (_a = currentVersionRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-        }
-    }, [isCurrent]);
     const onClick = (!!current.onClick && ((e) => { var _a; return (_a = current.onClick) === null || _a === void 0 ? void 0 : _a.call(current, current.id, e); })) || undefined;
     return (react_1.default.createElement("div", { ref: currentVersionRef, key: `${current.href}-container` },
         react_1.default.createElement(design_ui_surfaces_menu_link_item_1.MenuLinkItem, { key: current.href, active: current.id === (selected === null || selected === void 0 ? void 0 : selected.id), href: current.href, onClick: onClick },

package/dist/composition-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"composition-dropdown.js","sourceRoot":"","sources":["../composition-dropdown.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiD;AACjD,kGAA0E;AAC1E,gFAAyD;AACzD,wFAAiE;AAEjE,0GAAwD;AASxD,SAAgB,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAChD,MAAM,GAAG,GAAG,CAAC,IAAkB,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;IAE9D,OAAO,CACL,8BAAC,uCAAQ,IACP,SAAS,EAAE,0CAAM,CAAC,IAAI,EACtB,WAAW,EACT,uCAAK,SAAS,EAAE,0CAAM,CAAC,WAAW;YAChC,2CAAM,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAO;YACvC,8BAAC,+BAAI,IAAC,EAAE,EAAC,gBAAgB,GAAG,CACxB,IAGP,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACjB,OAAO,8BAAC,QAAQ,IAAC,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;IACzE,CAAC,CAAC,CACO,CACZ,CAAC;AACJ,CAAC;AAnBD,kDAmBC;AAOD,SAAS,QAAQ,CAAC,KAAoB;IACpC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAEpC,MAAM,SAAS,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,EAAE,MAAK,OAAO,CAAC,EAAE,CAAC;IAC9C,MAAM,iBAAiB,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEvD,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACb,IAAI,SAAS,EAAE;YACb,MAAA,iBAAiB,CAAC,OAAO,0CAAE,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;SACrF;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,OAAO,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,WAAC,OAAA,MAAA,OAAO,CAAC,OAAO,wDAAG,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC,CAAA,EAAA,CAAC,CAAC,IAAI,SAAS,CAAC;IAE9F,OAAO,CACL,uCAAK,GAAG,EAAE,iBAAiB,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,IAAI,YAAY;QAC3D,8BAAC,gDAAY,IAAC,GAAG,EAAE,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAK,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,EAAE,CAAA,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO;YACxG,2CAAM,OAAO,CAAC,KAAK,CAAO,CACb,CACX,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"composition-dropdown.js","sourceRoot":"","sources":["../composition-dropdown.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAsC;AACtC,kGAA0E;AAC1E,wEAAqD;AACrD,wFAAiE;AAEjE,0GAAwD;AASxD,SAAgB,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAChD,MAAM,GAAG,GAAG,CAAC,IAAkB,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;IAE9D,OAAO,CACL,8BAAC,uCAAQ,IACP,SAAS,EAAE,0CAAM,CAAC,IAAI,EACtB,WAAW,EACT,uCAAK,SAAS,EAAE,0CAAM,CAAC,WAAW;YAChC,2CAAM,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAO;YACvC,8BAAC,2BAAI,IAAC,EAAE,EAAC,gBAAgB,GAAG,CACxB,IAGP,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACjB,OAAO,8BAAC,QAAQ,IAAC,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;IACzE,CAAC,CAAC,CACO,CACZ,CAAC;AACJ,CAAC;AAnBD,kDAmBC;AAOD,SAAS,QAAQ,CAAC,KAAoB;IACpC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAEpC,MAAM,iBAAiB,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEvD,MAAM,OAAO,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,WAAC,OAAA,MAAA,OAAO,CAAC,OAAO,wDAAG,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC,CAAA,EAAA,CAAC,CAAC,IAAI,SAAS,CAAC;IAE9F,OAAO,CACL,uCAAK,GAAG,EAAE,iBAAiB,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,IAAI,YAAY;QAC3D,8BAAC,gDAAY,IAAC,GAAG,EAAE,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAK,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,EAAE,CAAA,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO;YACxG,2CAAM,OAAO,CAAC,KAAK,CAAO,CACb,CACX,CACP,CAAC;AACJ,CAAC"}

package/dist/index.d.ts

@@ -1 +1,2 @@
 export { CompositionCompare } from './composition-compare';
+export { useCompositionCompare, CompositionCompareContext } from './composition-compare.context';

package/dist/index.js

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompositionCompare = void 0;
+exports.CompositionCompareContext = exports.useCompositionCompare = exports.CompositionCompare = void 0;
 var composition_compare_1 = require("./composition-compare");
 Object.defineProperty(exports, "CompositionCompare", { enumerable: true, get: function () { return composition_compare_1.CompositionCompare; } });
+var composition_compare_context_1 = require("./composition-compare.context");
+Object.defineProperty(exports, "useCompositionCompare", { enumerable: true, get: function () { return composition_compare_context_1.useCompositionCompare; } });
+Object.defineProperty(exports, "CompositionCompareContext", { enumerable: true, get: function () { return composition_compare_context_1.CompositionCompareContext; } });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,6DAA2D;AAAlD,yHAAA,kBAAkB,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,6DAA2D;AAAlD,yHAAA,kBAAkB,OAAA;AAC3B,6EAAiG;AAAxF,oIAAA,qBAAqB,OAAA;AAAE,wIAAA,yBAAyB,OAAA"}

package/index.ts

@@ -1 +1,2 @@
 export { CompositionCompare } from './composition-compare';
+export { useCompositionCompare, CompositionCompareContext } from './composition-compare.context';

package/package.json

@@ -1,28 +1,30 @@
 {
   "name": "@teambit/compositions.ui.composition-compare",
-  "version": "0.0.227",
+  "version": "0.0.229",
   "homepage": "https://bit.cloud/teambit/compositions/ui/composition-compare",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.compositions",
     "name": "ui/composition-compare",
-    "version": "0.0.227"
+    "version": "0.0.229"
   },
   "dependencies": {
+    "lodash": "4.17.21",
     "query-string": "7.0.0",
     "core-js": "^3.0.0",
     "@teambit/design.ui.round-loader": "0.0.355",
+    "@teambit/design.elements.icon": "1.0.5",
     "@teambit/design.ui.surfaces.menu.link-item": "1.0.0",
-    "@teambit/evangelist.elements.icon": "1.0.2",
     "@teambit/evangelist.surfaces.dropdown": "1.0.2",
-    "@teambit/component.ui.component-compare.context": "0.0.88",
+    "@teambit/component.ui.component-compare.context": "0.0.90",
     "@teambit/component.ui.component-compare.hooks.use-component-compare-url": "0.0.3",
-    "@teambit/component.ui.component-compare.layouts.compare-split-layout-preset": "0.0.4",
+    "@teambit/component.ui.component-compare.layouts.compare-split-layout-preset": "0.0.5",
     "@teambit/compositions.ui.hooks.use-composition": "0.0.172",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.499"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
+    "@types/lodash": "4.14.165",
     "@types/mocha": "9.1.0",
     "@types/node": "12.20.4",
     "@types/react-dom": "^17.0.5",