@teambit/component.ui.component-filters.env-filter 0.0.260 → 0.0.262

package/dist/dropdown-item.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { EnvFilterEnvState } from './types';
+export declare function EnvsPlaceholder({ onClick }: {
+    onClick?: () => void;
+}): React.JSX.Element;
+export declare function EnvsDropdownItem({ displayName, icon, description, componentId, id }: EnvFilterEnvState): React.JSX.Element;

package/dist/dropdown-item.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnvsPlaceholder = EnvsPlaceholder;
+exports.EnvsDropdownItem = EnvsDropdownItem;
+const react_1 = __importDefault(require("react"));
+const component_modules_component_url_1 = require("@teambit/component.modules.component-url");
+const design_ui_styles_ellipsis_1 = require("@teambit/design.ui.styles.ellipsis");
+const design_ui_tooltip_1 = require("@teambit/design.ui.tooltip");
+const base_react_navigation_link_1 = require("@teambit/base-react.navigation.link");
+const envs_filter_module_scss_1 = __importDefault(require("./envs-filter.module.scss"));
+function EnvsPlaceholder({ onClick }) {
+    return (react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.filterIcon, onClick: onClick },
+        react_1.default.createElement("img", { src: "https://static.bit.dev/bit-icons/env.svg" }),
+        react_1.default.createElement("span", { className: envs_filter_module_scss_1.default.filterIconLabel }, "Environments"),
+        react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.dropdownArrow },
+            react_1.default.createElement("img", { src: "https://static.bit.dev/bit-icons/fat-arrow-down.svg" }))));
+}
+function EnvsDropdownItem({ displayName, icon, description, componentId, id }) {
+    return (react_1.default.createElement(design_ui_tooltip_1.Tooltip, { placement: "right", content: react_1.default.createElement(base_react_navigation_link_1.Link, { className: envs_filter_module_scss_1.default.envLink, href: component_modules_component_url_1.ComponentUrl.toUrl(componentId, { includeVersion: false }), external: true }, id) },
+        react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.envDropdownItemContainer },
+            react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.envDropdownItem },
+                react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, null, displayName),
+                react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.envDropdownItemIconContainer },
+                    react_1.default.createElement("img", { className: envs_filter_module_scss_1.default.envDropdownItemIcon, src: icon }))),
+            react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.description },
+                react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: envs_filter_module_scss_1.default.descriptionText }, description)))));
+}
+//# sourceMappingURL=dropdown-item.js.map

package/dist/dropdown-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-item.js","sourceRoot":"","sources":["../dropdown-item.tsx"],"names":[],"mappings":";;;;;AAQA,0CAUC;AAED,4CA2BC;AA/CD,kDAA0B;AAC1B,8FAAwE;AACxE,kFAA8D;AAC9D,kEAAqD;AACrD,oFAA2D;AAE3D,wFAA+C;AAE/C,SAAgB,eAAe,CAAC,EAAE,OAAO,EAA4B;IACnE,OAAO,CACL,uCAAK,SAAS,EAAE,iCAAM,CAAC,UAAU,EAAE,OAAO,EAAE,OAAO;QACjD,uCAAK,GAAG,EAAC,0CAA0C,GAAG;QACtD,wCAAM,SAAS,EAAE,iCAAM,CAAC,eAAe,mBAAqB;QAC5D,uCAAK,SAAS,EAAE,iCAAM,CAAC,aAAa;YAClC,uCAAK,GAAG,EAAC,qDAAqD,GAAG,CAC7D,CACF,CACP,CAAC;AACJ,CAAC;AAED,SAAgB,gBAAgB,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,EAAqB;IACrG,OAAO,CACL,8BAAC,2BAAO,IACN,SAAS,EAAC,OAAO,EACjB,OAAO,EACL,8BAAC,iCAAI,IACH,SAAS,EAAE,iCAAM,CAAC,OAAO,EACzB,IAAI,EAAE,8CAAY,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,EAChE,QAAQ,EAAE,IAAI,IAEb,EAAE,CACE;QAGT,uCAAK,SAAS,EAAE,iCAAM,CAAC,wBAAwB;YAC7C,uCAAK,SAAS,EAAE,iCAAM,CAAC,eAAe;gBACpC,8BAAC,oCAAQ,QAAE,WAAW,CAAY;gBAClC,uCAAK,SAAS,EAAE,iCAAM,CAAC,4BAA4B;oBACjD,uCAAK,SAAS,EAAE,iCAAM,CAAC,mBAAmB,EAAE,GAAG,EAAE,IAAI,GAAQ,CACzD,CACF;YACN,uCAAK,SAAS,EAAE,iCAAM,CAAC,WAAW;gBAChC,8BAAC,oCAAQ,IAAC,SAAS,EAAE,iCAAM,CAAC,eAAe,IAAG,WAAW,CAAY,CACjE,CACF,CACE,CACX,CAAC;AACJ,CAAC"}

package/dist/envs-filter.d.ts

@@ -1,17 +1,2 @@
-import { ComponentID } from '@teambit/component';
-import type { ComponentFilterCriteria } from '@teambit/component.ui.component-filters.component-filter-context';
-type EnvFilterEnvState = {
-    active: boolean;
-    icon?: string;
-    displayName: string;
-    id: string;
-    description: string;
-    componentId: ComponentID;
-};
-export type EnvFilterState = {
-    envsState: Map<string, EnvFilterEnvState>;
-    dropdownState: boolean;
-};
-export type EnvsFilterCriteria = ComponentFilterCriteria<EnvFilterState>;
+import type { EnvsFilterCriteria } from './types';
 export declare const EnvsFilter: EnvsFilterCriteria;
-export {};

package/dist/envs-filter.js

@@ -28,17 +28,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EnvsFilter = void 0;
 const react_1 = __importStar(require("react"));
-const design_inputs_selectors_multi_select_1 = require("@teambit/design.inputs.selectors.multi-select");
-const component_1 = require("@teambit/component");
-const component_modules_component_url_1 = require("@teambit/component.modules.component-url");
 const classnames_1 = __importDefault(require("classnames"));
-const design_ui_styles_ellipsis_1 = require("@teambit/design.ui.styles.ellipsis");
-const design_ui_tooltip_1 = require("@teambit/design.ui.tooltip");
-const base_react_navigation_link_1 = require("@teambit/base-react.navigation.link");
+const component_1 = require("@teambit/component");
 const component_ui_component_filters_component_filter_context_1 = require("@teambit/component.ui.component-filters.component-filter-context");
+const design_inputs_selectors_checkbox_item_1 = require("@teambit/design.inputs.selectors.checkbox-item");
+const design_inputs_dropdown_1 = require("@teambit/design.inputs.dropdown");
+const dropdown_item_1 = require("./dropdown-item");
 const envs_filter_module_scss_1 = __importDefault(require("./envs-filter.module.scss"));
-// @todo - this will be fixed as part of the @teambit/base-react.navigation.link upgrade to latest
-const Link = base_react_navigation_link_1.Link;
 exports.EnvsFilter = {
     id: 'envs',
     match: ({ component }, filter) => {
@@ -104,6 +100,7 @@ function envsFilter({ components, className, lanes }) {
     const filterContext = (0, component_ui_component_filters_component_filter_context_1.useComponentFilter)(exports.EnvsFilter.id, envsFilterState);
     const envs = envsFilterState.envsState;
     const [currentFilter, updateFilter] = filterContext || [];
+    const [open, setOpen] = (0, react_1.useState)(false);
     /**
      * this will not work if other filters in a single re-render
      * result in the same number of components with different ids
@@ -122,7 +119,7 @@ function envsFilter({ components, className, lanes }) {
             icon: state.icon,
             description: state.description,
             checked: !!((_a = currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.state.envsState.get(state.id)) === null || _a === void 0 ? void 0 : _a.active),
-            element: react_1.default.createElement(EnvsDropdownItem, Object.assign({}, state)),
+            element: react_1.default.createElement(dropdown_item_1.EnvsDropdownItem, Object.assign({}, state)),
         });
     });
     const onCheck = (value, e) => {
@@ -151,31 +148,9 @@ function envsFilter({ components, className, lanes }) {
             currentState.state.dropdownState = false;
             return currentState;
         });
-    };
-    const onDropdownToggled = (event, open) => {
-        updateFilter === null || updateFilter === void 0 ? void 0 : updateFilter((currentState) => {
-            currentState.state.dropdownState = open;
-            return currentState;
-        });
+        setOpen(false);
     };
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)(envs_filter_module_scss_1.default.envsFilterContainer, className) },
-        react_1.default.createElement(design_inputs_selectors_multi_select_1.MultiSelect, { itemsList: selectList, placeholder: react_1.default.createElement(EnvsPlaceholder, null), onSubmit: onSubmit, onCheck: onCheck, onClear: onClear, onChange: onDropdownToggled, open: !!(currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.state.dropdownState), dropdownBorder: false, className: envs_filter_module_scss_1.default.envFilterDropdownContainer, dropClass: envs_filter_module_scss_1.default.envFilterDropdown })));
-}
-function EnvsPlaceholder() {
-    return (react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.filterIcon },
-        react_1.default.createElement("img", { src: "https://static.bit.dev/bit-icons/env.svg" }),
-        react_1.default.createElement("span", { className: envs_filter_module_scss_1.default.filterIconLabel }, "Environments"),
-        react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.dropdownArrow },
-            react_1.default.createElement("img", { src: "https://static.bit.dev/bit-icons/fat-arrow-down.svg" }))));
-}
-function EnvsDropdownItem({ displayName, icon, description, componentId, id }) {
-    return (react_1.default.createElement(design_ui_tooltip_1.Tooltip, { placement: "right", content: react_1.default.createElement(Link, { className: envs_filter_module_scss_1.default.envLink, href: component_modules_component_url_1.ComponentUrl.toUrl(componentId, { includeVersion: false }), external: true }, id) },
-        react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.envDropdownItemContainer },
-            react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.envDropdownItem },
-                react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, null, displayName),
-                react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.envDropdownItemIconContainer },
-                    react_1.default.createElement("img", { className: envs_filter_module_scss_1.default.envDropdownItemIcon, src: icon }))),
-            react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.description },
-                react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: envs_filter_module_scss_1.default.descriptionText }, description)))));
+        react_1.default.createElement(design_inputs_dropdown_1.Dropdown, { open: open, onClickOutside: () => setOpen(false), placeholderContent: react_1.default.createElement(dropdown_item_1.EnvsPlaceholder, { onClick: () => setOpen(!open) }), bottomPlugin: react_1.default.createElement(design_inputs_dropdown_1.ButtonsPlugin, { onClear: onClear, onSubmit: onSubmit, submitClassName: envs_filter_module_scss_1.default.doneButton }), className: (0, classnames_1.default)(envs_filter_module_scss_1.default.envFilterDropdown), dropClass: (0, classnames_1.default)(envs_filter_module_scss_1.default.envFilterDropdown), position: "bottom" }, selectList.map((option, index) => (react_1.default.createElement(design_inputs_selectors_checkbox_item_1.CheckboxItem, { key: index, checked: option.checked, onInputChanged: (e) => onCheck(option.value, e) }, option.element))))));
 }
 //# sourceMappingURL=envs-filter.js.map

package/dist/envs-filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"envs-filter.js","sourceRoot":"","sources":["../envs-filter.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"envs-filter.js","sourceRoot":"","sources":["../envs-filter.tsx"],"names":[],"mappings":"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"}

package/dist/envs-filter.module.scss

@@ -1,4 +1,3 @@
-@import '@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
 .envsFilterContainer {
   > div {
     line-height: 16px;
@@ -31,15 +30,13 @@
   }
 }
 
-.envFilterDropdownContainer {
+.envFilterDropdown {
   width: 100%;
+  max-width: 400px;
 }
 
-.envFilterDropdown {
-  width: 100%;
-  // otherwise when the dropdown is open it clashes with the content of the tree
-  // (this is bizarre, the tree has no position absolute)
-  z-index: $nav-z-index;
+.doneButton {
+  transition: none;
 }
 
 .envDropdownItemContainer {
@@ -56,34 +53,24 @@
 }
 
 .envDropdownItem {
-  padding-left: 8px;
   display: flex;
   justify-content: space-between;
   width: 100%;
   font-size: var(--bit-p-md, 16px);
 }
 
-.envDropdownItemLabel,
 .envDropdownItemIcon {
   display: flex;
   justify-content: space-between;
   padding-left: 8px;
 }
+
 .description {
   font-size: var(--bit-p-xs, 14px);
-  padding-left: 8px;
-  padding-right: 16px;
   color: var(--bit-text-color-light, #6c707c);
   width: calc(100% - 24px);
 }
 
-.envDropdownItemContainerWithIcon {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: calc(100% - 24px);
-}
-
 .descriptionText {
   width: 100%;
 }

package/dist/types.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import { ComponentID } from '@teambit/component';
+import type { ComponentFilterCriteria } from '@teambit/component.ui.component-filters.component-filter-context';
+export interface ItemType {
+    value: string;
+    icon: ReactNode;
+    description: string;
+    checked?: boolean;
+    element: ReactNode;
+}
+export type EnvFilterEnvState = {
+    active: boolean;
+    icon?: string;
+    displayName: string;
+    id: string;
+    description: string;
+    componentId: ComponentID;
+};
+export type EnvFilterState = {
+    envsState: Map<string, EnvFilterEnvState>;
+    dropdownState: boolean;
+};
+export type EnvsFilterCriteria = ComponentFilterCriteria<EnvFilterState>;

package/dist/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../types.ts"],"names":[],"mappings":""}

package/dropdown-item.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { ComponentUrl } from '@teambit/component.modules.component-url';
+import { Ellipsis } from '@teambit/design.ui.styles.ellipsis';
+import { Tooltip } from '@teambit/design.ui.tooltip';
+import { Link } from '@teambit/base-react.navigation.link';
+import type { EnvFilterEnvState } from './types';
+import styles from './envs-filter.module.scss';
+
+export function EnvsPlaceholder({ onClick }: { onClick?: () => void }) {
+  return (
+    <div className={styles.filterIcon} onClick={onClick}>
+      <img src="https://static.bit.dev/bit-icons/env.svg" />
+      <span className={styles.filterIconLabel}>Environments</span>
+      <div className={styles.dropdownArrow}>
+        <img src="https://static.bit.dev/bit-icons/fat-arrow-down.svg" />
+      </div>
+    </div>
+  );
+}
+
+export function EnvsDropdownItem({ displayName, icon, description, componentId, id }: EnvFilterEnvState) {
+  return (
+    <Tooltip
+      placement="right"
+      content={
+        <Link
+          className={styles.envLink}
+          href={ComponentUrl.toUrl(componentId, { includeVersion: false })}
+          external={true}
+        >
+          {id}
+        </Link>
+      }
+    >
+      <div className={styles.envDropdownItemContainer}>
+        <div className={styles.envDropdownItem}>
+          <Ellipsis>{displayName}</Ellipsis>
+          <div className={styles.envDropdownItemIconContainer}>
+            <img className={styles.envDropdownItemIcon} src={icon}></img>
+          </div>
+        </div>
+        <div className={styles.description}>
+          <Ellipsis className={styles.descriptionText}>{description}</Ellipsis>
+        </div>
+      </div>
+    </Tooltip>
+  );
+}

package/envs-filter.module.scss

@@ -1,4 +1,3 @@
-@import '@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
 .envsFilterContainer {
   > div {
     line-height: 16px;
@@ -31,15 +30,13 @@
   }
 }
 
-.envFilterDropdownContainer {
+.envFilterDropdown {
   width: 100%;
+  max-width: 400px;
 }
 
-.envFilterDropdown {
-  width: 100%;
-  // otherwise when the dropdown is open it clashes with the content of the tree
-  // (this is bizarre, the tree has no position absolute)
-  z-index: $nav-z-index;
+.doneButton {
+  transition: none;
 }
 
 .envDropdownItemContainer {
@@ -56,34 +53,24 @@
 }
 
 .envDropdownItem {
-  padding-left: 8px;
   display: flex;
   justify-content: space-between;
   width: 100%;
   font-size: var(--bit-p-md, 16px);
 }
 
-.envDropdownItemLabel,
 .envDropdownItemIcon {
   display: flex;
   justify-content: space-between;
   padding-left: 8px;
 }
+
 .description {
   font-size: var(--bit-p-xs, 14px);
-  padding-left: 8px;
-  padding-right: 16px;
   color: var(--bit-text-color-light, #6c707c);
   width: calc(100% - 24px);
 }
 
-.envDropdownItemContainerWithIcon {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: calc(100% - 24px);
-}
-
 .descriptionText {
   width: 100%;
 }

package/envs-filter.tsx

@@ -1,42 +1,19 @@
-import React, { useMemo, useEffect } from 'react';
-import type { ItemType } from '@teambit/design.inputs.selectors.multi-select';
-import { MultiSelect } from '@teambit/design.inputs.selectors.multi-select';
+import React, { useMemo, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import type { ComponentModel } from '@teambit/component';
 import { ComponentID } from '@teambit/component';
-import { ComponentUrl } from '@teambit/component.modules.component-url';
-import classNames from 'classnames';
-import { Ellipsis } from '@teambit/design.ui.styles.ellipsis';
-import { Tooltip } from '@teambit/design.ui.tooltip';
-import { Link as BaseLink } from '@teambit/base-react.navigation.link';
-import type {
-  ComponentFilterCriteria,
-  ComponentFilterRenderProps,
-} from '@teambit/component.ui.component-filters.component-filter-context';
+import type { ComponentFilterRenderProps } from '@teambit/component.ui.component-filters.component-filter-context';
 import {
   useComponentFilter,
   useComponentFilters,
   runAllFilters,
 } from '@teambit/component.ui.component-filters.component-filter-context';
-
+import { CheckboxItem } from '@teambit/design.inputs.selectors.checkbox-item';
+import { Dropdown, ButtonsPlugin } from '@teambit/design.inputs.dropdown';
+import { EnvsPlaceholder, EnvsDropdownItem } from './dropdown-item';
+import type { EnvsFilterCriteria, EnvFilterEnvState, ItemType } from './types';
 import styles from './envs-filter.module.scss';
 
-// @todo - this will be fixed as part of the @teambit/base-react.navigation.link upgrade to latest
-const Link = BaseLink as any;
-
-type EnvFilterEnvState = {
-  active: boolean;
-  icon?: string;
-  displayName: string;
-  id: string;
-  description: string;
-  componentId: ComponentID;
-};
-export type EnvFilterState = {
-  envsState: Map<string, EnvFilterEnvState>;
-  dropdownState: boolean;
-};
-export type EnvsFilterCriteria = ComponentFilterCriteria<EnvFilterState>;
-
 export const EnvsFilter: EnvsFilterCriteria = {
   id: 'envs',
   match: ({ component }, filter) => {
@@ -105,19 +82,15 @@ const deriveEnvsFilterState = (components: ComponentModel[]) => {
 function envsFilter({ components, className, lanes }: ComponentFilterRenderProps) {
   const [filters = []] = useComponentFilters() || [];
   const filtersExceptEnv = filters.filter((filter) => filter.id !== EnvsFilter.id);
-
   const filteredComponents = useMemo(
     () => runAllFilters(filtersExceptEnv, { components, lanes }),
     [JSON.stringify(filtersExceptEnv), lanes?.viewedLane?.id.toString()]
   );
-
   const envsFilterState = deriveEnvsFilterState(filteredComponents);
-
   const filterContext = useComponentFilter(EnvsFilter.id, envsFilterState);
-
   const envs = envsFilterState.envsState;
-
   const [currentFilter, updateFilter] = filterContext || [];
+  const [open, setOpen] = useState(false);
 
   /**
    * this will not work if other filters in a single re-render
@@ -173,70 +146,26 @@ function envsFilter({ components, className, lanes }: ComponentFilterRenderProps
       currentState.state.dropdownState = false;
       return currentState;
     });
-  };
-
-  const onDropdownToggled = (event, open) => {
-    updateFilter?.((currentState) => {
-      currentState.state.dropdownState = open;
-      return currentState;
-    });
+    setOpen(false);
   };
 
   return (
     <div className={classNames(styles.envsFilterContainer, className)}>
-      <MultiSelect
-        itemsList={selectList}
-        placeholder={<EnvsPlaceholder />}
-        onSubmit={onSubmit}
-        onCheck={onCheck}
-        onClear={onClear}
-        onChange={onDropdownToggled}
-        open={!!currentFilter?.state.dropdownState}
-        dropdownBorder={false}
-        className={styles.envFilterDropdownContainer}
-        dropClass={styles.envFilterDropdown}
-      />
-    </div>
-  );
-}
-
-function EnvsPlaceholder() {
-  return (
-    <div className={styles.filterIcon}>
-      <img src="https://static.bit.dev/bit-icons/env.svg" />
-      <span className={styles.filterIconLabel}>Environments</span>
-      <div className={styles.dropdownArrow}>
-        <img src="https://static.bit.dev/bit-icons/fat-arrow-down.svg" />
-      </div>
+      <Dropdown
+        open={open}
+        onClickOutside={() => setOpen(false)}
+        placeholderContent={<EnvsPlaceholder onClick={() => setOpen(!open)} />}
+        bottomPlugin={<ButtonsPlugin onClear={onClear} onSubmit={onSubmit} submitClassName={styles.doneButton} />}
+        className={classNames(styles.envFilterDropdown)}
+        dropClass={classNames(styles.envFilterDropdown)}
+        position="bottom"
+      >
+        {selectList.map((option, index) => (
+          <CheckboxItem key={index} checked={option.checked} onInputChanged={(e) => onCheck(option.value, e)}>
+            {option.element}
+          </CheckboxItem>
+        ))}
+      </Dropdown>
     </div>
   );
 }
-
-function EnvsDropdownItem({ displayName, icon, description, componentId, id }: EnvFilterEnvState) {
-  return (
-    <Tooltip
-      placement="right"
-      content={
-        <Link
-          className={styles.envLink}
-          href={ComponentUrl.toUrl(componentId, { includeVersion: false })}
-          external={true}
-        >
-          {id}
-        </Link>
-      }
-    >
-      <div className={styles.envDropdownItemContainer}>
-        <div className={styles.envDropdownItem}>
-          <Ellipsis>{displayName}</Ellipsis>
-          <div className={styles.envDropdownItemIconContainer}>
-            <img className={styles.envDropdownItemIcon} src={icon}></img>
-          </div>
-        </div>
-        <div className={styles.description}>
-          <Ellipsis className={styles.descriptionText}>{description}</Ellipsis>
-        </div>
-      </div>
-    </Tooltip>
-  );
-}

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "@teambit/component.ui.component-filters.env-filter",
-  "version": "0.0.260",
+  "version": "0.0.262",
   "homepage": "https://bit.cloud/teambit/component/ui/component-filters/env-filter",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "ui/component-filters/env-filter",
-    "version": "0.0.260"
+    "version": "0.0.262"
   },
   "dependencies": {
     "classnames": "2.2.6",
     "core-js": "^3.0.0",
-    "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.504",
-    "@teambit/component.ui.component-filters.component-filter-context": "0.0.239",
-    "@teambit/design.inputs.selectors.multi-select": "0.0.20",
     "@teambit/design.ui.styles.ellipsis": "0.0.357",
     "@teambit/design.ui.tooltip": "0.0.381",
-    "@teambit/component.modules.component-url": "0.0.180"
+    "@teambit/component.ui.component-filters.component-filter-context": "0.0.239",
+    "@teambit/design.inputs.selectors.checkbox-item": "1.2.0",
+    "@teambit/design.inputs.dropdown": "1.3.3",
+    "@teambit/component.modules.component-url": "0.0.181"
   },
   "devDependencies": {
-    "@types/classnames": "2.2.11",
     "@types/react": "^17.0.8",
+    "@types/classnames": "2.2.11",
     "@types/mocha": "9.1.0",
     "@types/node": "12.20.4",
     "@types/react-dom": "^17.0.5",

package/types.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import { ComponentID } from '@teambit/component';
+import type { ComponentFilterCriteria } from '@teambit/component.ui.component-filters.component-filter-context';
+
+export interface ItemType {
+  value: string;
+  icon: ReactNode;
+  description: string;
+  checked?: boolean;
+  element: ReactNode;
+}
+
+export type EnvFilterEnvState = {
+  active: boolean;
+  icon?: string;
+  displayName: string;
+  id: string;
+  description: string;
+  componentId: ComponentID;
+};
+
+export type EnvFilterState = {
+  envsState: Map<string, EnvFilterEnvState>;
+  dropdownState: boolean;
+};
+
+export type EnvsFilterCriteria = ComponentFilterCriteria<EnvFilterState>;