@databiosphere/findable-ui 5.0.0 → 7.0.0

package/lib/components/Filter/components/SearchAllFilters/components/VariableSizeList/VariableSizeList.js

@@ -1,55 +1,15 @@
-"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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VariableSizeList = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const react_window_1 = require("react-window");
-const useBreakpointHelper_1 = require("../../../../../../hooks/useBreakpointHelper");
-const useWindowResize_1 = require("../../../../../../hooks/useWindowResize");
-const breakpoints_1 = require("../../../../../../theme/common/breakpoints");
-const constants_1 = require("../../../../common/constants");
-const utils_1 = require("../../../../common/utils");
-const filterList_styles_1 = require("../../../FilterList/filterList.styles");
-const constants_2 = require("../../common/constants");
-const entites_1 = require("../../common/entites");
-const variableSizeListItem_1 = __importDefault(require("../VariableSizeListItem/variableSizeListItem"));
+import { Divider, List as MList } from "@mui/material";
+import React, { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useState, } from "react";
+import { VariableSizeList as List, } from "react-window";
+import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../../../hooks/useBreakpointHelper";
+import { useWindowResize } from "../../../../../../hooks/useWindowResize";
+import { DESKTOP_SM } from "../../../../../../theme/common/breakpoints";
+import { LIST_ITEM_HEIGHT, LIST_MARGIN, MAX_DISPLAYABLE_LIST_ITEMS, MAX_LIST_HEIGHT_PX, } from "../../../../common/constants";
+import { getSortMatchesFn } from "../../../../common/utils";
+import { List as FilterList } from "../../../FilterList/filterList.styles";
+import { DIVIDER_HEIGHT, DIVIDER_ITEM, NO_RESULTS_ITEM, } from "../../common/constants";
+import { ITEM_TYPE, } from "../../common/entites";
+import VariableSizeListItem from "../VariableSizeListItem/variableSizeListItem";
 /**
  * Build variable list item element.
  * @param props - Variable size list child component props i.e. list index, style.
@@ -60,65 +20,62 @@ function renderListItem(props) {
     delete style.height; // Remove height style to allow variable size list to set item height.
     const { filteredItems, onFilter, onUpdateItemSizeByItemKey, searchTerm } = data;
     const item = filteredItems[index];
-    if (item.type === entites_1.ITEM_TYPE.DIVIDER)
-        return react_1.default.createElement(material_1.Divider, { style: style });
+    if (item.type === ITEM_TYPE.DIVIDER)
+        return React.createElement(Divider, { style: style });
     else
-        return (react_1.default.createElement(variableSizeListItem_1.default, { item: item, onFilter: onFilter, onUpdateItemSizeByItemKey: onUpdateItemSizeByItemKey, searchTerm: searchTerm, style: style }));
+        return (React.createElement(VariableSizeListItem, { item: item, onFilter: onFilter, onUpdateItemSizeByItemKey: onUpdateItemSizeByItemKey, searchTerm: searchTerm, style: style }));
 }
-const OuterElementContext = (0, react_1.createContext)({
+const OuterElementContext = createContext({
     autocompleteListProps: {},
 });
-const OuterElement = (0, react_1.forwardRef)(function OuterElement(_a, ref) {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    const { autocompleteListProps, autocompleteListRef } = (0, react_1.useContext)(OuterElementContext);
-    return (react_1.default.createElement("div", Object.assign({ ref: ref }, props),
-        react_1.default.createElement(material_1.List, Object.assign({ ref: autocompleteListRef, style: { maxHeight: "none", padding: 0 } }, autocompleteListProps), children)));
+const OuterElement = forwardRef(function OuterElement({ children, ...props }, ref) {
+    const { autocompleteListProps, autocompleteListRef } = useContext(OuterElementContext);
+    return (React.createElement("div", { ref: ref, ...props },
+        React.createElement(MList, { ref: autocompleteListRef, style: { maxHeight: "none", padding: 0 }, ...autocompleteListProps }, children)));
 });
-exports.VariableSizeList = (0, react_1.forwardRef)(function VariableSizeList({ autocompleteListProps, categoryViews, height: initHeight = constants_1.MAX_LIST_HEIGHT_PX, itemSize = constants_1.LIST_ITEM_HEIGHT, onFilter, overscanCount = constants_1.MAX_DISPLAYABLE_LIST_ITEMS * 2, searchTerm, width = "100%", }, autocompleteListRef) {
+export const VariableSizeList = forwardRef(function VariableSizeList({ autocompleteListProps, categoryViews, height: initHeight = MAX_LIST_HEIGHT_PX, itemSize = LIST_ITEM_HEIGHT, onFilter, overscanCount = MAX_DISPLAYABLE_LIST_ITEMS * 2, searchTerm, width = "100%", }, autocompleteListRef) {
     const filteredItems = applyMenuFilter(categoryViews, searchTerm);
     let resizeRequired = true;
-    const desktopSmDown = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.DOWN, breakpoints_1.DESKTOP_SM);
-    const { height: windowHeight } = (0, useWindowResize_1.useWindowResize)();
-    const [height, setHeight] = (0, react_1.useState)(initHeight);
-    const itemSizeByItemKeyRef = (0, react_1.useRef)(new Map());
-    const listRef = (0, react_1.useRef)(null);
-    const innerRef = (0, react_1.useRef)(null);
-    const outerRef = (0, react_1.useRef)(null);
+    const desktopSmDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, DESKTOP_SM);
+    const { height: windowHeight } = useWindowResize();
+    const [height, setHeight] = useState(initHeight);
+    const itemSizeByItemKeyRef = useRef(new Map());
+    const listRef = useRef(null);
+    const innerRef = useRef(null);
+    const outerRef = useRef(null);
     const { current: itemSizeByItemKey } = itemSizeByItemKeyRef;
-    const onUpdateItemSizeByItemKey = (0, react_1.useCallback)((key, size) => updateItemSizeByItemKey(itemSizeByItemKeyRef.current, key, size), []);
+    const onUpdateItemSizeByItemKey = useCallback((key, size) => updateItemSizeByItemKey(itemSizeByItemKeyRef.current, key, size), []);
     // Sets height of list.
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (innerRef.current && outerRef.current)
             setHeight(calculateListHeight(outerRef.current, innerRef.current, windowHeight, desktopSmDown));
     }, [desktopSmDown, windowHeight]);
     // Clears VariableSizeList cache (offsets and measurements) when values are updated (filtered).
     // Facilitates correct positioning of list items when list is updated.
-    (0, react_1.useEffect)(() => {
-        var _a;
-        (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.resetAfterIndex(0);
+    useEffect(() => {
+        listRef.current?.resetAfterIndex(0);
     }, [filteredItems]);
-    return (react_1.default.createElement(OuterElementContext.Provider, { value: { autocompleteListProps, autocompleteListRef } },
-        react_1.default.createElement(react_window_1.VariableSizeList, { height: height, innerElementType: filterList_styles_1.List, innerRef: innerRef, itemCount: filteredItems.length, itemData: {
+    return (React.createElement(OuterElementContext.Provider, { value: { autocompleteListProps, autocompleteListRef } },
+        React.createElement(List, { height: height, innerElementType: FilterList, innerRef: innerRef, itemCount: filteredItems.length, itemData: {
                 filteredItems,
                 onFilter,
                 onUpdateItemSizeByItemKey,
                 searchTerm,
             }, itemSize: (index) => {
                 const item = filteredItems[index];
-                if (item.type === entites_1.ITEM_TYPE.DIVIDER)
-                    return constants_2.DIVIDER_HEIGHT;
+                if (item.type === ITEM_TYPE.DIVIDER)
+                    return DIVIDER_HEIGHT;
                 return itemSizeByItemKey.get(item.key) || itemSize;
             }, onItemsRendered: () => {
                 requestAnimationFrame(() => {
-                    var _a, _b;
                     if (resizeRequired &&
-                        ((_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.childElementCount) &&
+                        innerRef.current?.childElementCount &&
                         outerRef.current) {
                         // Set height of list.
                         resizeRequired = false;
                         setHeight(calculateListHeight(outerRef.current, innerRef.current, windowHeight, desktopSmDown));
                     }
-                    (_b = listRef.current) === null || _b === void 0 ? void 0 : _b.resetAfterIndex(0); // Facilitates correct positioning of list items when list scrolls.
+                    listRef.current?.resetAfterIndex(0); // Facilitates correct positioning of list items when list scrolls.
                 });
             }, outerElementType: OuterElement, outerRef: outerRef, overscanCount: overscanCount, ref: listRef, width: width }, renderListItem)));
 });
@@ -129,7 +86,7 @@ exports.VariableSizeList = (0, react_1.forwardRef)(function VariableSizeList({ a
  * @returns array of objects representing list items to be rendered
  */
 function applyMenuFilter(categoryViews, inputValue) {
-    const sortMatches = (0, utils_1.getSortMatchesFn)(inputValue);
+    const sortMatches = getSortMatchesFn(inputValue);
     const filteredItems = categoryViews.reduce((filteredItems, category) => {
         if (!category.isDisabled) {
             const categoryValueKeyPrefix = "value_" + category.key.replaceAll(";", ";;") + ";_"; // Terminating the category key with a semicolon (and escaping preceding semicolons) ensures a unique prefix
@@ -137,16 +94,16 @@ function applyMenuFilter(categoryViews, inputValue) {
                 categoryKey: category.key,
                 key: categoryValueKeyPrefix + match.value.key,
                 matchRanges: match.labelRanges,
-                type: entites_1.ITEM_TYPE.VALUE,
+                type: ITEM_TYPE.VALUE,
                 value: match.value,
             }));
             if (filteredCategoryValues.length) {
                 if (filteredItems.length)
-                    filteredItems.push(constants_2.DIVIDER_ITEM);
+                    filteredItems.push(DIVIDER_ITEM);
                 filteredItems.push({
                     categoryLabel: category.label,
                     key: "category_" + category.key,
-                    type: entites_1.ITEM_TYPE.CATEGORY,
+                    type: ITEM_TYPE.CATEGORY,
                 });
                 filteredItems.push(...filteredCategoryValues);
             }
@@ -154,7 +111,7 @@ function applyMenuFilter(categoryViews, inputValue) {
         return filteredItems;
     }, []);
     if (filteredItems.length === 0)
-        filteredItems.push(constants_2.NO_RESULTS_ITEM);
+        filteredItems.push(NO_RESULTS_ITEM);
     return filteredItems;
 }
 /**
@@ -179,7 +136,7 @@ function calculateListHeight(outerListElem, innerListElem, windowHeight, desktop
     if (firstListEl && lastListEl) {
         const { top } = firstListEl.getBoundingClientRect();
         const { bottom } = lastListEl.getBoundingClientRect();
-        const calcHeight = bottom - top - scrollTop + constants_1.LIST_MARGIN * 2;
+        const calcHeight = bottom - top - scrollTop + LIST_MARGIN * 2;
         return Math.min(calcHeight, maxHeight);
     }
     return maxHeight;

package/lib/components/Filter/components/SearchAllFilters/components/VariableSizeListItem/variableSizeListItem.js

@@ -1,58 +1,31 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const typography_1 = require("../../../../../../theme/common/typography");
-const checkedIcon_1 = require("../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon");
-const uncheckedIcon_1 = require("../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon");
-const filterNoResultsFound_1 = require("../../../FilterNoResultsFound/filterNoResultsFound");
-const highlightedLabel_1 = require("../../../HighlightedLabel/highlightedLabel");
-const entites_1 = require("../../common/entites");
-function VariableSizeListItem({ item, onFilter, onUpdateItemSizeByItemKey, searchTerm, style, }) {
+import { Checkbox, ListItemButton, ListItemText, ListSubheader, Typography, } from "@mui/material";
+import React, { useEffect, useRef } from "react";
+import { TEXT_BODY_SMALL_400 } from "../../../../../../theme/common/typography";
+import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+import { FilterNoResultsFound } from "../../../FilterNoResultsFound/filterNoResultsFound";
+import { HighlightedLabel } from "../../../HighlightedLabel/highlightedLabel";
+import { ITEM_TYPE } from "../../common/entites";
+export default function VariableSizeListItem({ item, onFilter, onUpdateItemSizeByItemKey, searchTerm, style, }) {
     const { key } = item;
-    const listItemRef = (0, react_1.useRef)();
+    const listItemRef = useRef();
     const setRef = (e) => {
         listItemRef.current = e || undefined;
     };
     // Sets map of list item key to its height.
-    (0, react_1.useEffect)(() => {
-        var _a;
-        onUpdateItemSizeByItemKey(key, ((_a = listItemRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0);
+    useEffect(() => {
+        onUpdateItemSizeByItemKey(key, listItemRef.current?.clientHeight || 0);
     }, [key, onUpdateItemSizeByItemKey]);
-    if (item.type === entites_1.ITEM_TYPE.VALUE) {
+    if (item.type === ITEM_TYPE.VALUE) {
         const { categoryKey, matchRanges, value: { count, key: valueKey, label, selected }, } = item;
-        return (react_1.default.createElement(material_1.ListItemButton, { ref: setRef, key: key, onClick: () => onFilter(categoryKey, valueKey, !selected, undefined, searchTerm), selected: selected, style: style },
-            react_1.default.createElement(material_1.Checkbox, { checked: selected, checkedIcon: react_1.default.createElement(checkedIcon_1.CheckedIcon, null), icon: react_1.default.createElement(uncheckedIcon_1.UncheckedIcon, null) }),
-            react_1.default.createElement(material_1.ListItemText, { disableTypography: true, primary: react_1.default.createElement(highlightedLabel_1.HighlightedLabel, { label: label, ranges: matchRanges }), secondary: react_1.default.createElement(material_1.Typography, { color: "ink.light", variant: typography_1.TEXT_BODY_SMALL_400 }, count) })));
+        return (React.createElement(ListItemButton, { ref: setRef, key: key, onClick: () => onFilter(categoryKey, valueKey, !selected, undefined, searchTerm), selected: selected, style: style },
+            React.createElement(Checkbox, { checked: selected, checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null) }),
+            React.createElement(ListItemText, { disableTypography: true, primary: React.createElement(HighlightedLabel, { label: label, ranges: matchRanges }), secondary: React.createElement(Typography, { color: "ink.light", variant: TEXT_BODY_SMALL_400 }, count) })));
     }
-    else if (item.type === entites_1.ITEM_TYPE.CATEGORY) {
-        return (react_1.default.createElement(material_1.ListSubheader, { key: key, ref: setRef, style: style }, item.categoryLabel));
+    else if (item.type === ITEM_TYPE.CATEGORY) {
+        return (React.createElement(ListSubheader, { key: key, ref: setRef, style: style }, item.categoryLabel));
     }
     else {
-        return react_1.default.createElement(filterNoResultsFound_1.FilterNoResultsFound, { ref: setRef });
+        return React.createElement(FilterNoResultsFound, { ref: setRef });
     }
 }
-exports.default = VariableSizeListItem;

package/lib/components/Filter/components/SearchAllFilters/searchAllFilters.js

@@ -1,43 +1,17 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SearchAllFilters = exports.ListboxContext = void 0;
-const react_1 = __importStar(require("react"));
-const selectors_1 = require("../../../../common/selectors");
-const useBreakpointHelper_1 = require("../../../../hooks/useBreakpointHelper");
-const breakpoints_1 = require("../../../../theme/common/breakpoints");
-const searchCloseButton_1 = require("../SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton");
-const searchAllFiltersSearch_1 = require("../SearchAllFiltersSearch/searchAllFiltersSearch");
-const constants_1 = require("./common/constants");
-const entites_1 = require("./common/entites");
-const utils_1 = require("./common/utils");
-const autocompletePopper_styles_1 = require("./components/AutocompletePopper/autocompletePopper.styles");
-const VariableSizeList_1 = require("./components/VariableSizeList/VariableSizeList");
-const searchAllFilters_styles_1 = require("./searchAllFilters.styles");
-const renderInput = (params) => (react_1.default.createElement(searchAllFiltersSearch_1.SearchAllFiltersSearch, Object.assign({}, params)));
-exports.ListboxContext = (0, react_1.createContext)({
+import React, { createContext, useContext, useEffect, useRef, useState, } from "react";
+import { BODY, SIDEBAR_POSITIONER } from "../../../../common/selectors";
+import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
+import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
+import { SearchCloseButton } from "../SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton";
+import { SearchAllFiltersSearch } from "../SearchAllFiltersSearch/searchAllFiltersSearch";
+import { DEFAULT_SLOT_PROPS, DRAWER_SLOT_PROPS } from "./common/constants";
+import { OVERFLOW_STYLE } from "./common/entites";
+import { setElementsOverflowStyle } from "./common/utils";
+import { AutocompletePopper } from "./components/AutocompletePopper/autocompletePopper.styles";
+import { VariableSizeList } from "./components/VariableSizeList/VariableSizeList";
+import { Autocomplete } from "./searchAllFilters.styles";
+const renderInput = (params) => (React.createElement(SearchAllFiltersSearch, { ...params }));
+export const ListboxContext = createContext({
     categoryViews: [],
     onClearSearch: () => undefined,
     onCloseSearch: () => undefined,
@@ -45,24 +19,24 @@ exports.ListboxContext = (0, react_1.createContext)({
     open: false,
     searchTerm: "",
 });
-const Listbox = react_1.default.forwardRef(function Listbox(props, ref) {
+const Listbox = React.forwardRef(function Listbox(props, ref) {
     props = Object.assign({}, props, {
         children: undefined, // Content is controlled by VariableSizeList
     });
-    const { categoryViews, onFilter, searchTerm } = (0, react_1.useContext)(exports.ListboxContext);
-    return (react_1.default.createElement(VariableSizeList_1.VariableSizeList, { autocompleteListProps: props, categoryViews: categoryViews, onFilter: onFilter, ref: ref, searchTerm: searchTerm }));
+    const { categoryViews, onFilter, searchTerm } = useContext(ListboxContext);
+    return (React.createElement(VariableSizeList, { autocompleteListProps: props, categoryViews: categoryViews, onFilter: onFilter, ref: ref, searchTerm: searchTerm }));
 });
-const SearchAllFilters = ({ categoryViews, drawerOpen = false, onFilter, }) => {
-    const desktopSmUp = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.UP, breakpoints_1.DESKTOP_SM);
-    const autocompleteRef = (0, react_1.useRef)(null);
-    const [open, setOpen] = (0, react_1.useState)(false);
-    const [searchTerm, setSearchTerm] = (0, react_1.useState)("");
+export const SearchAllFilters = ({ categoryViews, drawerOpen = false, onFilter, }) => {
+    const desktopSmUp = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
+    const autocompleteRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState("");
     // Handles background scroll action (desktop only).
     const handleBackgroundScroll = (overflowStyle) => {
         if (desktopSmUp) {
-            (0, utils_1.setElementsOverflowStyle)([
-                document.querySelector(selectors_1.BODY),
-                document.getElementById(selectors_1.SIDEBAR_POSITIONER),
+            setElementsOverflowStyle([
+                document.querySelector(BODY),
+                document.getElementById(SIDEBAR_POSITIONER),
             ], overflowStyle);
         }
     };
@@ -78,11 +52,11 @@ const SearchAllFilters = ({ categoryViews, drawerOpen = false, onFilter, }) => {
     const onCloseSearch = () => {
         setSearchTerm("");
         setOpen(false);
-        handleBackgroundScroll(entites_1.OVERFLOW_STYLE.NONE);
+        handleBackgroundScroll(OVERFLOW_STYLE.NONE);
     };
     // Callback fired when the popup requests to be opened.
     const onOpen = () => {
-        handleBackgroundScroll(entites_1.OVERFLOW_STYLE.HIDDEN);
+        handleBackgroundScroll(OVERFLOW_STYLE.HIDDEN);
     };
     // Open search.
     const onOpenSearch = () => {
@@ -91,20 +65,19 @@ const SearchAllFilters = ({ categoryViews, drawerOpen = false, onFilter, }) => {
         }
         setOpen(true);
     };
-    (0, react_1.useEffect)(() => {
-        var _a, _b;
+    useEffect(() => {
         if (!open) {
-            (_b = (_a = autocompleteRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("input")) === null || _b === void 0 ? void 0 : _b.blur();
+            autocompleteRef.current?.querySelector("input")?.blur();
         }
     }, [open]);
     // Close search when filter drawer is closed.
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!drawerOpen) {
             setSearchTerm("");
             setOpen(false);
         }
     }, [drawerOpen]);
-    return (react_1.default.createElement(exports.ListboxContext.Provider, { value: {
+    return (React.createElement(ListboxContext.Provider, { value: {
             categoryViews,
             onClearSearch,
             onCloseSearch,
@@ -112,6 +85,15 @@ const SearchAllFilters = ({ categoryViews, drawerOpen = false, onFilter, }) => {
             open,
             searchTerm,
         } },
-        react_1.default.createElement(searchAllFilters_styles_1.Autocomplete, { clearOnBlur: desktopSmUp, filterOptions: (options) => options, freeSolo: true, ListboxComponent: Listbox, onBlur: desktopSmUp ? onCloseSearch : undefined, onClose: desktopSmUp ? onCloseSearch : undefined, onFocus: onOpenSearch, onOpen: onOpen, open: open, options: [""], PopperComponent: autocompletePopper_styles_1.AutocompletePopper, ref: autocompleteRef, renderInput: (props) => renderInput(Object.assign(Object.assign({}, props), { InputProps: Object.assign(Object.assign({}, props.InputProps), { endAdornment: react_1.default.createElement(searchCloseButton_1.SearchCloseButton, null) }), inputProps: Object.assign(Object.assign({}, props.inputProps), { onChange }) })), slotProps: desktopSmUp ? constants_1.DEFAULT_SLOT_PROPS : constants_1.DRAWER_SLOT_PROPS })));
+        React.createElement(Autocomplete, { clearOnBlur: desktopSmUp, filterOptions: (options) => options, freeSolo: true, ListboxComponent: Listbox, onBlur: desktopSmUp ? onCloseSearch : undefined, onClose: desktopSmUp ? onCloseSearch : undefined, onFocus: onOpenSearch, onOpen: onOpen, open: open, options: [""], PopperComponent: AutocompletePopper, ref: autocompleteRef, renderInput: (props) => renderInput({
+                ...props,
+                InputProps: {
+                    ...props.InputProps,
+                    endAdornment: React.createElement(SearchCloseButton, null),
+                },
+                inputProps: {
+                    ...props.inputProps,
+                    onChange,
+                },
+            }), slotProps: desktopSmUp ? DEFAULT_SLOT_PROPS : DRAWER_SLOT_PROPS })));
 };
-exports.SearchAllFilters = SearchAllFilters;

package/lib/components/Filter/components/SearchAllFilters/searchAllFilters.stories.js

@@ -1,21 +1,14 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-var _a;
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SearchAllFiltersStory = void 0;
-const react_1 = __importDefault(require("react"));
-const filterMenu_stories_1 = require("../FilterMenu/filterMenu.stories");
-const searchAllFilters_1 = require("./searchAllFilters");
-exports.default = {
+import React from "react";
+import { FilterMenuStory } from "../FilterMenu/filterMenu.stories";
+import { SearchAllFilters } from "./searchAllFilters";
+export default {
     argTypes: {
         onFilter: { control: { disable: true } },
     },
-    component: searchAllFilters_1.SearchAllFilters,
+    component: SearchAllFilters,
     decorators: [
-        (Story) => (react_1.default.createElement("div", { style: { width: 264 } },
-            react_1.default.createElement(Story, null))),
+        (Story) => (React.createElement("div", { style: { width: 264 } },
+            React.createElement(Story, null))),
     ],
     title: "Components/Filter/SearchAllFilters",
 };
@@ -36,7 +29,7 @@ const defaultValues = [
         selected: false,
     },
 ];
-exports.SearchAllFiltersStory = {
+export const SearchAllFiltersStory = {
     args: {
         categoryViews: [
             {
@@ -62,7 +55,7 @@ exports.SearchAllFiltersStory = {
                 isDisabled: false,
                 key: "donorDisease",
                 label: "Donor Disease",
-                values: ((_a = filterMenu_stories_1.FilterMenuStory.args) === null || _a === void 0 ? void 0 : _a.values) || defaultValues,
+                values: FilterMenuStory.args?.values || defaultValues,
             },
             {
                 isDisabled: true,

package/lib/components/Filter/components/SearchAllFilters/searchAllFilters.styles.js

@@ -1,18 +1,12 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Autocomplete = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const colors_1 = require("../../../../styles/common/mixins/colors");
-exports.Autocomplete = (0, styled_1.default)(material_1.Autocomplete) `
+import styled from "@emotion/styled";
+import { Autocomplete as MAutocomplete } from "@mui/material";
+import { inkMain } from "../../../../styles/common/mixins/colors";
+export const Autocomplete = styled(MAutocomplete) `
   &.Mui-expanded {
     .MuiOutlinedInput-root {
       .MuiIconButton-root {
         .MuiSvgIcon-root {
-          color: ${colors_1.inkMain};
+          color: ${inkMain};
         }
       }
     }

package/lib/components/Filter/components/SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton.js

@@ -1,44 +1,14 @@
-"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.SearchCloseButton = void 0;
-const CloseRounded_1 = __importDefault(require("@mui/icons-material/CloseRounded"));
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const useBreakpointHelper_1 = require("../../../../../../hooks/useBreakpointHelper");
-const breakpoints_1 = require("../../../../../../theme/common/breakpoints");
-const searchAllFilters_1 = require("../../../SearchAllFilters/searchAllFilters");
-const SearchCloseButton = () => {
-    const desktopSmDown = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.DOWN, breakpoints_1.DESKTOP_SM);
-    const { onClearSearch, onCloseSearch, open, searchTerm } = (0, react_1.useContext)(searchAllFilters_1.ListboxContext);
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { IconButton } from "@mui/material";
+import React, { Fragment, useContext } from "react";
+import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../../../hooks/useBreakpointHelper";
+import { DESKTOP_SM } from "../../../../../../theme/common/breakpoints";
+import { ListboxContext } from "../../../SearchAllFilters/searchAllFilters";
+export const SearchCloseButton = () => {
+    const desktopSmDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, DESKTOP_SM);
+    const { onClearSearch, onCloseSearch, open, searchTerm } = useContext(ListboxContext);
     const showButton = open && (desktopSmDown || searchTerm);
     const onClickFn = desktopSmDown ? onCloseSearch : onClearSearch;
-    return (react_1.default.createElement(react_1.Fragment, null, showButton && (react_1.default.createElement(material_1.IconButton, { onClick: onClickFn, size: "large" },
-        react_1.default.createElement(CloseRounded_1.default, { fontSize: "small" })))));
+    return (React.createElement(Fragment, null, showButton && (React.createElement(IconButton, { onClick: onClickFn, size: "large" },
+        React.createElement(CloseRoundedIcon, { fontSize: "small" })))));
 };
-exports.SearchCloseButton = SearchCloseButton;