@redocly/theme 0.40.6 → 0.41.0-rc.1

package/lib/components/Search/SearchGroups.js

@@ -0,0 +1,69 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchGroups = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Tag_1 = require("../../components/Tag/Tag");
+function SearchGroups({ facets, searchFilter, onFilterChange, onTopFacetsReset, }) {
+    const groupFacets = facets.filter((facet) => facet.isTop);
+    const handleGroupTagClick = (value, fieldId, active, currentValues) => {
+        const values = active
+            ? currentValues.filter((item) => item !== value)
+            : [...currentValues, value];
+        onFilterChange(fieldId, values, true);
+    };
+    return (React.createElement(SearchGroupsWrapper, null,
+        React.createElement(GroupTag, { borderless: true, active: !searchFilter.some((item) => item.isTop), onClick: () => searchFilter.some((item) => item.isTop) && onTopFacetsReset() }, "All"),
+        React.createElement(Divider, null),
+        groupFacets.flatMap((facet) => facet.values.map((facetCount, index) => {
+            var _a;
+            const { value, count, isCounterVisible } = facetCount;
+            const currentValues = ((_a = searchFilter.find((item) => item.field === facet.field)) === null || _a === void 0 ? void 0 : _a.values) || [];
+            const active = currentValues === null || currentValues === void 0 ? void 0 : currentValues.includes(value);
+            return (React.createElement(GroupTag, { key: `${facet.field}-${index}`, onClick: () => handleGroupTagClick(value, facet.field, active, currentValues), active: active, borderless: true },
+                value,
+                " ",
+                isCounterVisible && React.createElement("span", null, count)));
+        }))));
+}
+exports.SearchGroups = SearchGroups;
+const SearchGroupsWrapper = styled_components_1.default.div `
+  display: flex;
+  gap: 4px;
+  padding: var(--spacing-md);
+`;
+const GroupTag = (0, styled_components_1.default)(Tag_1.Tag) `
+  cursor: pointer;
+  gap: 4px;
+`;
+const Divider = styled_components_1.default.div `
+  border-right: 1px solid var(--border-color-secondary);
+  margin: 5px 5px 5px 0;
+`;
+//# sourceMappingURL=SearchGroups.js.map

package/lib/components/Search/SearchHighlight.d.ts

@@ -1 +1 @@
-export declare function highlight(text: string | string[]): JSX.Element | string;
+export declare function searchHighlight(text: string | string[]): JSX.Element | string;

package/lib/components/Search/SearchHighlight.js

@@ -26,19 +26,42 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.highlight = void 0;
+exports.searchHighlight = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function highlight(text) {
-    if (!Array.isArray(text))
-        return text;
+function slicer(str, arr) {
+    const markOpenIndex = str.indexOf('<mark>');
+    const markCloseIndex = str.indexOf('</mark>');
+    if (markOpenIndex !== -1 && markCloseIndex !== -1) {
+        const pre = str.slice(0, markOpenIndex);
+        const entry = str.slice(markOpenIndex + 6, markCloseIndex);
+        const suf = str.slice(markCloseIndex + 7, str.length);
+        return (arr = [...arr, pre, { entry }, ...slicer(suf, arr)]);
+    }
+    else
+        return [...arr, str];
+}
+function searchHighlight(text) {
+    if (!Array.isArray(text)) {
+        const arr = slicer(text, []);
+        if (arr.length === 1)
+            return text;
+        return (React.createElement("span", null, arr.map((item, index) => {
+            if (typeof item === 'object') {
+                return React.createElement(Highlight, { key: index }, item.entry);
+            }
+            else {
+                return item;
+            }
+        })));
+    }
     const [pre, entry, suf] = text;
     return (React.createElement("span", { "data-component-name": "Search/SearchHighlight" },
         pre,
         React.createElement(Highlight, null, entry),
         suf));
 }
-exports.highlight = highlight;
+exports.searchHighlight = searchHighlight;
 const Highlight = styled_components_1.default.span `
   background-color: var(--search-highlight-bg-color);
   color: var(--search-highlight-text-color);

package/lib/components/Search/SearchInput.d.ts

@@ -2,9 +2,10 @@ import React from 'react';
 export type SearchInputProps = {
     placeholder?: string;
     value: string;
-    onChange(value: string): void;
+    onChange: (value: string) => void;
+    onFilterToggle: () => void;
     inputRef?: React.RefObject<HTMLInputElement>;
     isLoading: boolean;
     className?: string;
 };
-export declare function SearchInput({ placeholder, value, onChange, isLoading, className, }: SearchInputProps): JSX.Element;
+export declare function SearchInput({ placeholder, value, onChange, onFilterToggle, isLoading, className, }: SearchInputProps): JSX.Element;

package/lib/components/Search/SearchInput.js

@@ -8,10 +8,11 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const SearchIcon_1 = require("../../icons/SearchIcon/SearchIcon");
 const Spinner_1 = require("../../icons/Spinner/Spinner");
-const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
 const Button_1 = require("../../components/Button/Button");
 const hooks_1 = require("../../core/hooks");
-function SearchInput({ placeholder, value, onChange, isLoading, className, }) {
+const CloseFilledIcon_1 = require("../../icons/CloseFilledIcon/CloseFilledIcon");
+const SettingsIcon_1 = require("../../icons/SettingsIcon/SettingsIcon");
+function SearchInput({ placeholder, value, onChange, onFilterToggle, isLoading, className, }) {
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     const stopPropagation = (event) => event.stopPropagation();
@@ -25,7 +26,8 @@ function SearchInput({ placeholder, value, onChange, isLoading, className, }) {
     return (react_1.default.createElement(SearchInputWrapper, { "data-component-name": "Search/SearchInput", className: className },
         value && isLoading ? (react_1.default.createElement(Spinner_1.Spinner, { size: "18px", color: "--search-input-icon-color" })) : (react_1.default.createElement(SearchIcon_1.SearchIcon, { size: "18px", color: "--search-input-icon-color" })),
         react_1.default.createElement(SearchInputField, { value: value, placeholder: placeholder, onChange: handleOnChange, onClick: stopPropagation }),
-        !!value && react_1.default.createElement(Button_1.Button, { variant: "ghost", onClick: handleOnReset, icon: react_1.default.createElement(CloseIcon_1.CloseIcon, null) })));
+        !!value && (react_1.default.createElement(ResetButton, { variant: "ghost", onClick: handleOnReset, icon: react_1.default.createElement(CloseFilledIcon_1.CloseFilledIcon, null) })),
+        react_1.default.createElement(FilterToggleButton, { icon: react_1.default.createElement(SettingsIcon_1.SettingsIcon, null), onClick: onFilterToggle })));
 }
 exports.SearchInput = SearchInput;
 const SearchInputWrapper = styled_components_1.default.div `
@@ -52,4 +54,10 @@ const SearchInputField = styled_components_1.default.input `
     color: var(--search-input-placeholder-color);
   }
 `;
+const ResetButton = (0, styled_components_1.default)(Button_1.Button) `
+  color: var(--color-warm-grey-5);
+`;
+const FilterToggleButton = (0, styled_components_1.default)(Button_1.Button) `
+  margin-left: 0;
+`;
 //# sourceMappingURL=SearchInput.js.map

package/lib/components/Search/SearchItem.d.ts

@@ -1,9 +1,9 @@
-import type { SearchDocument } from '../../core/types';
+import type { SearchItemData } from '../../core/types';
 type ActiveItem<T> = T & {
     active?: boolean;
 };
 export type SearchItemProps = {
-    item: ActiveItem<SearchDocument>;
+    item: ActiveItem<SearchItemData>;
     product?: {
         name: string;
         icon?: string;

package/lib/components/Search/SearchItem.js

@@ -43,27 +43,33 @@ function SearchItem({ item, className, product }) {
             (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [item.active]);
-    const itemParam = (_a = item.parameters) === null || _a === void 0 ? void 0 : _a[0];
-    return (react_1.default.createElement(SearchItemWrapper, { className: className, to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
+    const { document, highlight } = item;
+    const parameter = highlight.parameters && highlight.parameters.length ? highlight.parameters[0] : null;
+    const shouldShowPath = document.path && ((_a = document.path) === null || _a === void 0 ? void 0 : _a.length) > 1;
+    return (react_1.default.createElement(SearchItemWrapper, { className: className, to: document.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
         react_1.default.createElement(SearchItemHeader, null,
             product && (react_1.default.createElement(SearchItemProductTag, { "data-testid": "search-item-product-tag" },
                 react_1.default.createElement(Image_1.Image, { src: product.icon }),
                 product.name)),
-            item.httpVerb ? (react_1.default.createElement(SearchItemOperation, null,
-                react_1.default.createElement(SearchItemOperationTag, { color: item.httpVerb }, item.httpVerb.toUpperCase()),
-                item.pathName ? (0, SearchHighlight_1.highlight)(item.pathName) : null)) : null,
+            document.httpMethod ? (react_1.default.createElement(SearchItemOperation, null,
+                react_1.default.createElement(SearchItemOperationTag, { color: document.httpMethod }, document.httpMethod.toUpperCase()),
+                highlight.httpPath ? (0, SearchHighlight_1.searchHighlight)(highlight.httpPath) : document.httpPath)) : null,
             react_1.default.createElement(SearchItemTitleWrapper, null,
-                react_1.default.createElement(SearchItemTitle, null, (0, SearchHighlight_1.highlight)(item.title)),
-                item.deprecated ? react_1.default.createElement(SearchItemBadge, { deprecated: true }, "Deprecated") : null,
-                item.badges
-                    ? item.badges.map(({ name, color }) => (react_1.default.createElement(SearchItemBadge, { color: color || 'var(--color-info-base)', key: name }, name)))
+                react_1.default.createElement(SearchItemTitle, null, highlight.title ? (0, SearchHighlight_1.searchHighlight)(highlight.title) : document.title),
+                document.deprecated ? react_1.default.createElement(SearchItemBadge, { deprecated: true }, "Deprecated") : null,
+                document.badges
+                    ? document.badges.map(({ name, color }) => (react_1.default.createElement(SearchItemBadge, { color: color || 'var(--color-info-base)', key: name }, name)))
                     : null),
-            Array.isArray(item.text) ? (react_1.default.createElement(SearchItemDescription, null, (0, SearchHighlight_1.highlight)(item.text))) : null),
-        itemParam ? (react_1.default.createElement(SearchItemPlace, null,
+            react_1.default.createElement(SearchItemDescription, null, highlight.text ? (0, SearchHighlight_1.searchHighlight)(highlight.text) : document.text)),
+        parameter ? (react_1.default.createElement(SearchItemPlace, null,
             react_1.default.createElement("div", null,
-                `${itemParam.place} → ${((_b = itemParam.path) === null || _b === void 0 ? void 0 : _b.length) ? ((_c = itemParam.path) === null || _c === void 0 ? void 0 : _c.join(' → ')) + ' → ' : ''}`,
-                (0, SearchHighlight_1.highlight)(itemParam.name)),
-            react_1.default.createElement("div", null, (0, SearchHighlight_1.highlight)(itemParam.description)))) : (react_1.default.createElement(SearchItemPath, null, (_d = item.path) === null || _d === void 0 ? void 0 : _d.join(' → ')))));
+                (0, SearchHighlight_1.searchHighlight)(parameter.place),
+                ` → `,
+                ((_b = parameter.path) === null || _b === void 0 ? void 0 : _b.length) ? (0, SearchHighlight_1.searchHighlight)((_c = parameter.path) === null || _c === void 0 ? void 0 : _c.join(' → ')) + ' → ' : '',
+                (0, SearchHighlight_1.searchHighlight)(parameter.name)),
+            react_1.default.createElement("div", null, (0, SearchHighlight_1.searchHighlight)(parameter.description)))) : (shouldShowPath && (react_1.default.createElement(SearchItemPath, null, highlight.path && highlight.path.length
+            ? (0, SearchHighlight_1.searchHighlight)(highlight.path.join(' → '))
+            : (_d = document.path) === null || _d === void 0 ? void 0 : _d.join(' → '))))));
 }
 exports.SearchItem = SearchItem;
 const SearchItemWrapper = (0, styled_components_1.default)(Link_1.Link) `
@@ -73,7 +79,7 @@ const SearchItemWrapper = (0, styled_components_1.default)(Link_1.Link) `
   background-color: var(--search-item-bg-color);
   transition: background-color 0.3s ease;
   text-decoration: none;
-  white-space: nowrap;
+  white-space: normal;
   outline: none;
   border-top: 1px solid var(--search-item-border-color);
   border-bottom: 1px solid var(--search-item-border-color);
@@ -134,6 +140,7 @@ const SearchItemPath = styled_components_1.default.div `
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   font-weight: var(--font-weight-regular);
+  margin-top: var(--spacing-sm);
 `;
 const SearchItemPlace = styled_components_1.default.div `
   display: flex;
@@ -143,6 +150,7 @@ const SearchItemPlace = styled_components_1.default.div `
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   font-weight: var(--font-weight-regular);
+  margin-top: var(--spacing-sm);
 
   &:first-child {
     padding-top: 0;

package/lib/components/Search/variables.js

@@ -6,11 +6,18 @@ exports.search = (0, styled_components_1.css) `
   /**
     * @tokens Search
     */
-  --search-modal-width: 700px;
-  --search-modal-min-height: 530px;
+  --search-modal-width: 1100px;
+  --search-modal-min-height: 705px;
   --search-modal-bg-color: var(--modal-bg-color);
   --search-modal-box-shadow: var(--modal-box-shadow);
   --search-modal-border-radius: var(--border-radius-lg);
+  --search-modal-border: 1px solid var(--border-color-secondary);
+
+  --search-modal-header-bg-color: var(--bg-color-tonal); // @presenter Color
+  --search-modal-header-padding: var(--spacing-sm);
+
+  --search-modal-footer-padding: var(--spacing-sm);
+  --search-modal-footer-gap: var(--spacing-md);
 
   --search-highlight-bg-color: none; // @presenter Color
   --search-highlight-text-color: var(--color-info-base); // @presenter Color
@@ -29,6 +36,11 @@ exports.search = (0, styled_components_1.css) `
   --search-input-border: none;
   --search-input-border-radius: var(--border-radius); // @presenter BorderRadius
 
+  --search-group-title-padding: var(--spacing-sm);
+  --search-group-title-bg-color: var(--bg-color-tonal); // @presenter Color
+  --search-group-footer-padding: var(--spacing-sm);
+  --search-group-footer-text-color: var(--link-color-primary); // @presenter Color
+
   --search-item-text-color: var(--text-color-secondary); // @presenter Color
   --search-item-text-color-hover: var(--text-color-primary); // @presenter Color
   --search-item-title-font-size: var(--font-size-base); // @presenter FontSize
@@ -76,6 +88,40 @@ exports.search = (0, styled_components_1.css) `
   --search-suggested-item-bg-color-active: var(--layer-color); // @presenter Color
   --search-suggested-item-border-color-focused: var(--color-blue-4); // @presenter Color
 
+  --search-shortcuts-gap: var(--spacing-xs);
+
+  --search-message-font-size: var(--font-size-lg); // @presenter FontSize
+  --search-message-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --search-message-line-height: var(--line-height-lg); // @presenter LineHeight
+  --search-message-text-color: var(--text-color-secondary); // @presenter Color
+  --search-message-gap: var(--spacing-md);
+
+    /**
+  * @tokens Search filter
+  */
+  --search-filter-width: 450px;
+  --search-filter-bg-color: var(--search-modal-bg-color);
+  --search-filter-padding: var(--spacing-lg);
+  --search-filter-font-size: var(--font-size-base);
+  --search-filter-font-weight: var(--font-weight-regular);
+  --search-filter-line-height: var(--line-height-base);
+
+  --search-filter-header-padding: var(--spacing-md) 0;
+  --search-filter-header-text-color: var(--text-color-helper);
+  --search-filter-header-z-index: var(--z-index-raised);
+
+  --search-filter-fields-gap: var(--spacing-base);
+
+  --search-filter-field-select-option-gap: var(--spacing-unit);
+  --search-filter-field-select-option-text-padding: 0 0 0 var(--spacing-unit);
+  --search-filter-field-select-footer-padding: 0 0 0 var(--spacing-unit);
+  --search-filter-field-select-footer-text-color: var(--text-color-helper);
+
+  --search-filter-field-tags-gap: var(--spacing-unit);
+  --search-filter-field-tags-tag-margin: var(--spacing-unit) 0 0 0;
+
+  // @tokens End
+
   /**
   * @tokens Navbar Search Trigger
   */

package/lib/components/Segmented/Segmented.d.ts

@@ -1,12 +1,9 @@
 import type { ReactElement } from 'react';
-import type { SelectOption } from '../../core/types/select-option';
+import type { SelectOption } from '../../core/types/select';
 export type SegmentedProps<T> = {
     options: SelectOption<T>[];
     value: T;
-    onChange: ({ label, value }: {
-        label: string;
-        value: T;
-    }) => void;
+    onChange: ({ label, value }: SelectOption<T>) => void;
     className?: string;
     size?: 'regular' | 'small';
 };

package/lib/components/Select/Select.d.ts

@@ -1,39 +1,5 @@
-import React from 'react';
-export type SelectProps<T = any> = {
-    value: T;
-    options: {
-        element: React.ReactNode | JSX.Element | string;
-        value: T;
-        label?: string;
-    }[];
-    dataAttributes?: Record<string, string>;
-    className?: string;
-    withArrow?: boolean;
-    triggerEvent?: 'click' | 'hover';
-    onChange?: (value: any) => void;
-    placement?: 'top' | 'bottom';
-    alignment?: 'start' | 'end';
-    icon?: React.ReactNode;
-    onlyIcon?: boolean;
-    placeholder?: string;
-    disabled?: boolean;
-    hideCheckmarkIcon?: boolean;
-    dataTestId?: string;
-    renderInput?: (props: {
-        isOpen: boolean;
-    }) => React.ReactElement;
-    renderDivider?: () => React.ReactElement;
-};
+import type { SelectProps } from '../../core/types/select';
 export declare function Select<T>(props: SelectProps<T>): JSX.Element;
-export declare const SelectContainer: import("styled-components").StyledComponent<"div", any, {
+export declare const SelectWrapper: import("styled-components").StyledComponent<"div", any, {
     disabled?: boolean | undefined;
 }, never>;
-export declare const SelectInput: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SelectInputValue: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SelectList: import("styled-components").StyledComponent<"ul", any, {
-    placement?: string | undefined;
-    alignment?: string | undefined;
-}, never>;
-export declare const SelectListItem: import("styled-components").StyledComponent<"li", any, {
-    selected: boolean;
-}, never>;

package/lib/components/Select/Select.js

@@ -26,60 +26,124 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectListItem = exports.SelectList = exports.SelectInputValue = exports.SelectInput = exports.SelectContainer = exports.Select = void 0;
+exports.SelectWrapper = exports.Select = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const hooks_1 = require("../../core/hooks");
-const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
-const ChevronUpIcon_1 = require("../../icons/ChevronUpIcon/ChevronUpIcon");
 const CheckmarkIcon_1 = require("../../icons/CheckmarkIcon/CheckmarkIcon");
+const SelectInput_1 = require("../../components/Select/SelectInput");
+const Dropdown_1 = require("../../components/Dropdown/Dropdown");
+const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
+const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
 function Select(props) {
-    const { className, value, options, dataAttributes, withArrow = true, triggerEvent = 'click', onChange, placement, alignment, icon, onlyIcon, disabled, placeholder, hideCheckmarkIcon, renderInput, renderDivider, dataTestId = 'select', } = props;
-    const containerRef = (0, react_1.useRef)(null);
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    // const [selectedIdx, setSelectedIdx] = useState<React.ReactNode | string>(selected);
-    const handleOpen = () => {
-        setIsOpen(true);
+    const { className, value, options, dataAttributes, withArrow = true, triggerEvent = 'click', placement, alignment, icon, onlyIcon, disabled, placeholder, hideCheckmarkIcon, dataTestId = 'select', multiple, searchable, footer, onChange, onSearch, renderInput, renderDivider, } = props;
+    const getSelectedOptionsFromPropsValue = () => {
+        return value ? (multiple && Array.isArray(value) ? value : [value]) : [];
     };
-    const handleClose = () => {
-        setIsOpen(false);
+    const [selectedOptions, setSelectedOptions] = (0, react_1.useState)(getSelectedOptionsFromPropsValue());
+    const [searchValue, setSearchValue] = (0, react_1.useState)(null);
+    const [dropdownActive, setDropdownActive] = (0, react_1.useState)(false);
+    const [filteredOptions, setFilteredOptions] = (0, react_1.useState)(options);
+    const [stickyInputValue, setStickyInputValue] = (0, react_1.useState)(placeholder || '');
+    const inputId = (0, react_1.useId)();
+    (0, react_1.useEffect)(() => {
+        setFilteredOptions(options);
+    }, [options]);
+    (0, react_1.useEffect)(() => {
+        setSelectedOptions(getSelectedOptionsFromPropsValue());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [multiple, value]);
+    (0, react_1.useEffect)(() => {
+        if (onSearch) {
+            onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchValue);
+        }
+        else {
+            if (typeof searchValue === 'string') {
+                const filteredOptions = options.filter((option) => {
+                    const valueForSearch = typeof option.value === 'string' ? option.value : '';
+                    return (!valueForSearch || valueForSearch.toLowerCase().indexOf(searchValue.toLowerCase()) > -1);
+                });
+                setFilteredOptions(filteredOptions);
+            }
+            else {
+                setFilteredOptions(options);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [searchValue]);
+    const selectHandler = (selectedOption) => {
+        const newSelectedOptions = isSelected(selectedOption)
+            ? selectedOptions.filter((option) => option.value !== selectedOption.value)
+            : multiple
+                ? [...selectedOptions, selectedOption]
+                : [selectedOption];
+        const newSelectedValues = newSelectedOptions.length
+            ? multiple
+                ? newSelectedOptions.map((o) => o.value)
+                : newSelectedOptions[0].value
+            : multiple
+                ? []
+                : '';
+        setSelectedOptions(newSelectedOptions);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newSelectedValues);
+        setSearchValue(null);
+        if (searchable) {
+            setDropdownActive(false);
+        }
+        if (!multiple) {
+            setStickyInputValue('');
+        }
     };
-    const handleToggle = () => {
-        setIsOpen(!isOpen);
+    const searchHandler = (e) => {
+        const targetValue = e.target.value;
+        setSearchValue(targetValue);
+        setDropdownActive(true);
     };
-    const handleSelect = (value) => {
-        // setSelectedIdx(options.findIndex(o => o.value === value));
-        setIsOpen(false);
-        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    const inputBlurHandler = (e) => {
+        var _a, _b;
+        const relatedTarget = e.relatedTarget;
+        const isDropdownItem = ((_a = relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.attributes.getNamedItem('data-component-name')) === null || _a === void 0 ? void 0 : _a.value) ===
+            'Dropdown/DropdownMenuItem';
+        if (!isDropdownItem) {
+            if (!e.relatedTarget || ((_b = e.relatedTarget) === null || _b === void 0 ? void 0 : _b.id) !== inputId) {
+                setDropdownActive(false);
+            }
+            setSearchValue(null);
+            setStickyInputValue('');
+        }
     };
-    (0, hooks_1.useOutsideClick)(containerRef, handleClose);
-    // useEffect(() => {
-    //   handleSelect(selected);
-    //   // eslint-disable-next-line react-hooks/exhaustive-deps
-    // }, [selected]);
-    const selectedOption = options.find((option) => option.value === value);
-    const renderDefaultInput = () => (react_1.default.createElement(exports.SelectInput, null,
-        !onlyIcon && (react_1.default.createElement(exports.SelectInputValue, null, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.element) || placeholder)),
-        icon,
-        withArrow ? isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, { size: "14px" }) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "14px" }) : null));
-    return (react_1.default.createElement(exports.SelectContainer, Object.assign({ "data-component-name": "Select/Select" }, dataAttributes, { disabled: disabled, "data-testid": dataTestId, className: className, ref: containerRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: triggerEvent === 'click' ? handleToggle : undefined }),
-        renderInput ? renderInput({ isOpen }) : renderDefaultInput(),
-        isOpen && (react_1.default.createElement(exports.SelectList, { placement: placement, alignment: alignment }, options.map((option, index) => {
-            const selected = option.value === value;
-            return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(exports.SelectListItem, { key: index, onClick: () => handleSelect(option.value), selected: selected },
-                    typeof option.element === 'string' ? (react_1.default.createElement("div", null, option.element)) : (option.element),
-                    !hideCheckmarkIcon && selected && react_1.default.createElement(CheckmarkIcon_1.CheckmarkIcon, null)),
-                renderDivider && index !== options.length - 1 ? renderDivider() : null));
-        })))));
+    const inputFocusHandler = () => {
+        if (!multiple && selectedOptions.length) {
+            setStickyInputValue(selectedOptions[0].value);
+        }
+    };
+    const inputClickHandler = () => {
+        setDropdownActive(!dropdownActive);
+    };
+    const isSelected = (option) => {
+        return !!selectedOptions.find((selectOption) => selectOption.value === option.value);
+    };
+    const renderDefaultInput = () => {
+        return (react_1.default.createElement(SelectInput_1.SelectInput, { id: inputId, selectedOptions: selectedOptions, searchValue: searchValue, placeholder: placeholder, stickyValue: stickyInputValue, multiple: multiple, searchable: searchable, customIcon: icon, onlyIcon: onlyIcon, clearHandler: (option) => selectHandler(option), searchHandler: searchHandler, inputBlurHandler: inputBlurHandler, inputFocusHandler: inputFocusHandler, clickHandler: inputClickHandler }));
+    };
+    return (react_1.default.createElement(exports.SelectWrapper, Object.assign({ "data-component-name": "Select/Select" }, dataAttributes, { disabled: disabled, "data-testid": dataTestId, className: className }),
+        react_1.default.createElement(SelectDropdown, { closeOnClick: !multiple, withArrow: withArrow, trigger: renderInput ? renderInput() : renderDefaultInput(), triggerEvent: triggerEvent, placement: placement, alignment: alignment, active: searchable ? dropdownActive : undefined },
+            react_1.default.createElement(SelectDropdownMenu, { footer: footer }, filteredOptions.length === 0 ? (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { disabled: true }, "No results")) : (filteredOptions.map((option, index) => {
+                return (react_1.default.createElement(react_1.Fragment, { key: index },
+                    react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { onAction: () => selectHandler(option), prefix: !hideCheckmarkIcon && isSelected(option) && react_1.default.createElement(CheckmarkIcon_1.CheckmarkIcon, null) }, typeof option.element === 'string' ? (react_1.default.createElement("div", null, option.element)) : (option.element)),
+                    renderDivider && index !== options.length - 1 ? renderDivider() : null));
+            }) || 'No results')))));
 }
 exports.Select = Select;
-exports.SelectContainer = styled_components_1.default.div `
+exports.SelectWrapper = styled_components_1.default.div `
+  display: flex;
+  width: 100%;
   position: relative;
   font-size: var(--select-font-size);
   font-weight: var(--select-font-weight);
   line-height: var(--select-line-height);
   border-radius: var(--select-border-radius);
+  border: var(--search-trigger-border-width) var(--search-trigger-border-style)
+    var(--search-trigger-border-color);
   color: var(--select-text-color);
   min-width: 0;
 
@@ -88,67 +152,15 @@ exports.SelectContainer = styled_components_1.default.div `
     opacity: 0.59;
     pointer-events: none;
   `}
-  a {
-    display: block;
-    text-decoration: none;
-    color: var(--select-text-color);
-  }
-`;
-exports.SelectInput = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-radius: var(--select-input-border-radius);
-  padding: var(--select-input-padding);
-  cursor: pointer;
-  gap: 8px;
 `;
-exports.SelectInputValue = styled_components_1.default.div `
-  pointer-events: none;
-  min-width: 0;
-  text-overflow: ellipsis;
-  overflow: hidden;
-`;
-exports.SelectList = styled_components_1.default.ul `
-  position: absolute;
-  top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
-  bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
-  left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
-  right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
-  margin: 0;
-  min-width: var(--select-list-min-width);
-  max-width: var(--select-list-max-width);
-  padding: var(--select-list-padding);
-  background-color: var(--select-list-bg-color);
-  border-radius: var(--select-list-border-radius);
-  box-shadow: var(--select-list-box-shadow);
-  list-style-type: none;
-  cursor: pointer;
-  white-space: nowrap;
-  overflow: hidden;
-  z-index: 1;
-`;
-exports.SelectListItem = styled_components_1.default.li `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-radius: var(--select-list-item-border-radius);
-  gap: var(--select-list-item-gap);
-  padding: var(--select-list-item-padding);
-  ${({ selected }) => selected &&
-    `
-      font-weight: var(--select-list-item-font-weight-active);
-      background-color: var(--select-list-item-bg-color-active);
-      &:hover { background-color: var(--select-list-item-bg-color-active)};
-    `}
-
-  & > * {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+const SelectDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
+  width: 100%;
 
-  &:hover {
-    background-color: var(--select-list-item-bg-color-hover);
+  > * {
+    width: 100%;
   }
 `;
+const SelectDropdownMenu = (0, styled_components_1.default)(DropdownMenu_1.DropdownMenu) `
+  width: 100%;
+`;
 //# sourceMappingURL=Select.js.map