@databiosphere/findable-ui 5.0.0 → 7.0.0

package/lib/components/Filter/components/Filter/filter.js

@@ -1,37 +1,11 @@
-"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.Filter = void 0;
-const icons_material_1 = require("@mui/icons-material");
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const iconButton_styles_1 = require("../../../common/IconButton/iconButton.styles");
-const filterLabel_1 = require("../FilterLabel/filterLabel");
-const filterMenu_1 = require("../FilterMenu/filterMenu");
-const drawerTransition_1 = require("./components/DrawerTransition/drawerTransition");
-const filter_styles_1 = require("./filter.styles");
+import { CloseRounded } from "@mui/icons-material";
+import { Grow } from "@mui/material";
+import React, { useState } from "react";
+import { CloseDrawerIconButton } from "../../../common/IconButton/iconButton.styles";
+import { FilterLabel } from "../FilterLabel/filterLabel";
+import { FilterMenu } from "../FilterMenu/filterMenu";
+import { DrawerTransition } from "./components/DrawerTransition/drawerTransition";
+import { FilterPopover } from "./filter.styles";
 const DEFAULT_POSITION = { left: 0, top: 0 };
 const DEFAULT_SLOT_PROPS = {
     paper: { variant: "menu" },
@@ -39,12 +13,12 @@ const DEFAULT_SLOT_PROPS = {
 const DRAWER_SLOT_PROPS = {
     paper: { elevation: 0 },
 };
-const Filter = ({ categorySection, categoryView, closeAncestor, isFilterDrawer, onFilter, tags, trackFilterOpened, }) => {
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const [position, setPosition] = (0, react_1.useState)(DEFAULT_POSITION);
+export const Filter = ({ categorySection, categoryView, closeAncestor, isFilterDrawer, onFilter, tags, trackFilterOpened, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [position, setPosition] = useState(DEFAULT_POSITION);
     const anchorPosition = isFilterDrawer ? DEFAULT_POSITION : position;
     const slotProps = isFilterDrawer ? DRAWER_SLOT_PROPS : DEFAULT_SLOT_PROPS;
-    const TransitionComponent = isFilterDrawer ? drawerTransition_1.DrawerTransition : material_1.Grow;
+    const TransitionComponent = isFilterDrawer ? DrawerTransition : Grow;
     const transitionDuration = isOpen ? 250 : 300;
     const TransitionDuration = isFilterDrawer ? transitionDuration : undefined;
     /**
@@ -57,7 +31,7 @@ const Filter = ({ categorySection, categoryView, closeAncestor, isFilterDrawer,
      * Closes filter and all open ancestors e.g. filter drawer.
      */
     const onCloseFilters = () => {
-        closeAncestor === null || closeAncestor === void 0 ? void 0 : closeAncestor();
+        closeAncestor?.();
         onCloseFilter();
     };
     /**
@@ -72,13 +46,12 @@ const Filter = ({ categorySection, categoryView, closeAncestor, isFilterDrawer,
         // Set popover position and open state.
         setPosition({ left: popoverLeftPos, top: popoverTopPos });
         setIsOpen(true);
-        trackFilterOpened === null || trackFilterOpened === void 0 ? void 0 : trackFilterOpened({ category: categoryView.key });
+        trackFilterOpened?.({ category: categoryView.key });
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(filterLabel_1.FilterLabel, { count: categoryView.values.length, disabled: categoryView.isDisabled, label: categoryView.label, onClick: onOpenFilter }),
-        react_1.default.createElement(filter_styles_1.FilterPopover, { anchorPosition: anchorPosition, anchorReference: "anchorPosition", marginThreshold: 0, onClose: onCloseFilters, open: isOpen, slotProps: slotProps, TransitionComponent: TransitionComponent, transitionDuration: TransitionDuration },
-            isOpen && isFilterDrawer && (react_1.default.createElement(iconButton_styles_1.CloseDrawerIconButton, { Icon: icons_material_1.CloseRounded, onClick: onCloseFilters, size: "medium" })),
-            react_1.default.createElement(filterMenu_1.FilterMenu, { categorySection: categorySection, categoryKey: categoryView.key, categoryLabel: categoryView.label, isFilterDrawer: isFilterDrawer, onFilter: onFilter, onCloseFilter: onCloseFilter, values: categoryView.values })),
+    return (React.createElement(React.Fragment, null,
+        React.createElement(FilterLabel, { count: categoryView.values.length, disabled: categoryView.isDisabled, label: categoryView.label, onClick: onOpenFilter }),
+        React.createElement(FilterPopover, { anchorPosition: anchorPosition, anchorReference: "anchorPosition", marginThreshold: 0, onClose: onCloseFilters, open: isOpen, slotProps: slotProps, TransitionComponent: TransitionComponent, transitionDuration: TransitionDuration },
+            isOpen && isFilterDrawer && (React.createElement(CloseDrawerIconButton, { Icon: CloseRounded, onClick: onCloseFilters, size: "medium" })),
+            React.createElement(FilterMenu, { categorySection: categorySection, categoryKey: categoryView.key, categoryLabel: categoryView.label, isFilterDrawer: isFilterDrawer, onFilter: onFilter, onCloseFilter: onCloseFilter, values: categoryView.values })),
         tags));
 };
-exports.Filter = Filter;

package/lib/components/Filter/components/Filter/filter.stories.js

@@ -1,28 +1,22 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterStory = void 0;
-const react_1 = __importDefault(require("react"));
-const filter_1 = require("./filter");
-exports.default = {
+import React from "react";
+import { Filter } from "./filter";
+export default {
     argTypes: {
         tags: { control: { disable: true } },
     },
-    component: filter_1.Filter,
+    component: Filter,
     decorators: [
-        (Story) => (react_1.default.createElement("div", { style: { padding: "8px 12px 8px 16px", width: 264 } },
-            react_1.default.createElement(Story, null))),
+        (Story) => (React.createElement("div", { style: { padding: "8px 12px 8px 16px", width: 264 } },
+            React.createElement(Story, null))),
     ],
     title: "Components/Filter/Filter",
 };
-const FilterTemplate = (args) => (react_1.default.createElement(filter_1.Filter, Object.assign({}, args)));
+const FilterTemplate = (args) => (React.createElement(Filter, { ...args }));
 const onFilter = () => {
     // onFilter function
 };
-exports.FilterStory = FilterTemplate.bind({});
-exports.FilterStory.args = {
+export const FilterStory = FilterTemplate.bind({});
+FilterStory.args = {
     categoryView: {
         isDisabled: false,
         key: "genusSpecies",

package/lib/components/Filter/components/Filter/filter.styles.js

@@ -1,21 +1,15 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterPopover = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const breakpoints_1 = require("../../../../styles/common/mixins/breakpoints");
-const colors_1 = require("../../../../styles/common/mixins/colors");
-exports.FilterPopover = (0, styled_1.default)(material_1.Popover) `
+import styled from "@emotion/styled";
+import { Popover } from "@mui/material";
+import { mediaDesktopSmallDown } from "../../../../styles/common/mixins/breakpoints";
+import { smokeLight } from "../../../../styles/common/mixins/colors";
+export const FilterPopover = styled(Popover) `
   .MuiPaper-menu {
     margin: 0;
   }
 
-  ${breakpoints_1.mediaDesktopSmallDown} {
+  ${mediaDesktopSmallDown} {
     .MuiPaper-root {
-      background-color: ${colors_1.smokeLight};
+      background-color: ${smokeLight};
       height: 100%;
       max-height: 100%;
       overflow: visible; // required; allows backdrop button to render outside of drawer container.

package/lib/components/Filter/components/FilterLabel/filterLabel.js

@@ -1,14 +1,7 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterLabel = void 0;
-const ArrowDropDownRounded_1 = __importDefault(require("@mui/icons-material/ArrowDropDownRounded"));
-const react_1 = __importDefault(require("react"));
-const filterLabel_styles_1 = require("./filterLabel.styles");
-const FilterLabel = ({ count, disabled = false, label, onClick, }) => {
+import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
+import React from "react";
+import { FilterLabel as Label } from "./filterLabel.styles";
+export const FilterLabel = ({ count, disabled = false, label, onClick, }) => {
     const filterLabel = count ? `${label}\xa0(${count})` : label; // When the count is present, a non-breaking space is used to prevent it from being on its own line
-    return (react_1.default.createElement(filterLabel_styles_1.FilterLabel, { color: "inherit", disabled: disabled, endIcon: react_1.default.createElement(ArrowDropDownRounded_1.default, { fontSize: "small" }), fullWidth: true, onClick: onClick }, filterLabel));
+    return (React.createElement(Label, { color: "inherit", disabled: disabled, endIcon: React.createElement(ArrowDropDownRoundedIcon, { fontSize: "small" }), fullWidth: true, onClick: onClick }, filterLabel));
 };
-exports.FilterLabel = FilterLabel;

package/lib/components/Filter/components/FilterLabel/filterLabel.stories.js

@@ -1,27 +1,21 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterLabelStory = void 0;
-const react_1 = __importDefault(require("react"));
-const filterLabel_1 = require("./filterLabel");
-exports.default = {
+import React from "react";
+import { FilterLabel } from "./filterLabel";
+export default {
     argTypes: {
         count: { control: "number" },
         disabled: { control: "boolean" },
         label: { control: "text" },
     },
-    component: filterLabel_1.FilterLabel,
+    component: FilterLabel,
     decorators: [
-        (Story) => (react_1.default.createElement("div", { style: { padding: "8px 12px 8px 16px", width: 264 } },
-            react_1.default.createElement(Story, null))),
+        (Story) => (React.createElement("div", { style: { padding: "8px 12px 8px 16px", width: 264 } },
+            React.createElement(Story, null))),
     ],
     title: "Components/Filter/FilterLabel",
 };
-const FilterLabelTemplate = (args) => (react_1.default.createElement(filterLabel_1.FilterLabel, Object.assign({}, args)));
-exports.FilterLabelStory = FilterLabelTemplate.bind({});
-exports.FilterLabelStory.args = {
+const FilterLabelTemplate = (args) => (React.createElement(FilterLabel, { ...args }));
+export const FilterLabelStory = FilterLabelTemplate.bind({});
+FilterLabelStory.args = {
     count: 123,
     disabled: false,
     label: "Label",

package/lib/components/Filter/components/FilterLabel/filterLabel.styles.js

@@ -1,13 +1,7 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterLabel = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const breakpoints_1 = require("../../../../styles/common/mixins/breakpoints");
-exports.FilterLabel = (0, styled_1.default)(material_1.Button) `
+import styled from "@emotion/styled";
+import { Button } from "@mui/material";
+import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints";
+export const FilterLabel = styled(Button) `
   font-weight: inherit;
   gap: 0;
   justify-content: space-between;
@@ -28,7 +22,7 @@ exports.FilterLabel = (0, styled_1.default)(material_1.Button) `
     transform: rotate(-90deg);
   }
 
-  ${breakpoints_1.mediaDesktopSmallUp} {
+  ${mediaDesktopSmallUp} {
     padding: 6px 0;
 
     & .MuiButton-endIcon {

package/lib/components/Filter/components/FilterList/filterList.styles.js

@@ -1,16 +1,10 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.List = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const constants_1 = require("../../common/constants");
-exports.List = (0, styled_1.default)(material_1.List) `
+import styled from "@emotion/styled";
+import { List as MList } from "@mui/material";
+import { LIST_MARGIN } from "../../common/constants";
+export const List = styled(MList) `
   && {
     overflow-wrap: break-word;
-    margin: ${constants_1.LIST_MARGIN}px 0;
+    margin: ${LIST_MARGIN}px 0;
     padding: 0;
   }
 

package/lib/components/Filter/components/FilterMenu/filterMenu.js

@@ -1,53 +1,25 @@
-"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.applyMenuFilter = exports.FilterMenu = void 0;
-const react_1 = __importStar(require("react"));
-const southIcon_1 = require("../../../common/CustomIcon/components/SouthIcon/southIcon");
-const constants_1 = require("../../common/constants");
-const utils_1 = require("../../common/utils");
-const filterList_styles_1 = require("../FilterList/filterList.styles");
-const filterMenuSearch_1 = require("../FilterMenuSearch/filterMenuSearch");
-const filterNoResultsFound_1 = require("../FilterNoResultsFound/filterNoResultsFound");
-const VariableSizeList_1 = require("../VariableSizeList/VariableSizeList");
-const filterMenu_styles_1 = require("./filterMenu.styles");
-const FilterMenu = ({ categoryKey, categoryLabel, categorySection, isFilterDrawer, menuWidth = 312, onCloseFilter, onFilter, values, }) => {
-    const [searchTerm, setSearchTerm] = (0, react_1.useState)("");
-    const isSearchable = isFilterDrawer || values.length > constants_1.MAX_DISPLAYABLE_LIST_ITEMS;
+import React, { useState } from "react";
+import { SouthIcon } from "../../../common/CustomIcon/components/SouthIcon/southIcon";
+import { MAX_DISPLAYABLE_LIST_ITEMS } from "../../common/constants";
+import { getSortMatchesFn } from "../../common/utils";
+import { List } from "../FilterList/filterList.styles";
+import { FilterMenuSearch } from "../FilterMenuSearch/filterMenuSearch";
+import { FilterNoResultsFound } from "../FilterNoResultsFound/filterNoResultsFound";
+import { VariableSizeList } from "../VariableSizeList/VariableSizeList";
+import { Button, FilterView, FilterViewTools } from "./filterMenu.styles";
+export const FilterMenu = ({ categoryKey, categoryLabel, categorySection, isFilterDrawer, menuWidth = 312, onCloseFilter, onFilter, values, }) => {
+    const [searchTerm, setSearchTerm] = useState("");
+    const isSearchable = isFilterDrawer || values.length > MAX_DISPLAYABLE_LIST_ITEMS;
     const matchedItems = applyMenuFilter(values, isSearchable ? searchTerm : "");
-    return (react_1.default.createElement(filterMenu_styles_1.FilterView, { menuWidth: menuWidth },
-        react_1.default.createElement(filterMenu_styles_1.FilterViewTools, null,
-            isFilterDrawer && (react_1.default.createElement(filterMenu_styles_1.Button, { onClick: onCloseFilter },
-                react_1.default.createElement(southIcon_1.SouthIcon, { fontSize: "small" }),
+    return (React.createElement(FilterView, { menuWidth: menuWidth },
+        React.createElement(FilterViewTools, null,
+            isFilterDrawer && (React.createElement(Button, { onClick: onCloseFilter },
+                React.createElement(SouthIcon, { fontSize: "small" }),
                 categoryLabel)),
-            isSearchable && (react_1.default.createElement(filterMenuSearch_1.FilterMenuSearch, { searchTerm: searchTerm, setSearchTerm: setSearchTerm }))),
-        matchedItems.length > 0 ? (react_1.default.createElement(VariableSizeList_1.VariableSizeList, { categorySection: categorySection, categoryKey: categoryKey, isFilterDrawer: isFilterDrawer, onFilter: onFilter, matchedItems: matchedItems })) : (react_1.default.createElement(filterList_styles_1.List, null,
-            react_1.default.createElement(filterNoResultsFound_1.FilterNoResultsFound, { onClearSearchTerm: () => setSearchTerm("") })))));
+            isSearchable && (React.createElement(FilterMenuSearch, { searchTerm: searchTerm, setSearchTerm: setSearchTerm }))),
+        matchedItems.length > 0 ? (React.createElement(VariableSizeList, { categorySection: categorySection, categoryKey: categoryKey, isFilterDrawer: isFilterDrawer, onFilter: onFilter, matchedItems: matchedItems })) : (React.createElement(List, null,
+            React.createElement(FilterNoResultsFound, { onClearSearchTerm: () => setSearchTerm("") })))));
 };
-exports.FilterMenu = FilterMenu;
-function applyMenuFilter(values, searchTerm) {
-    return (0, utils_1.getSortMatchesFn)(searchTerm)(values);
+export function applyMenuFilter(values, searchTerm) {
+    return getSortMatchesFn(searchTerm)(values);
 }
-exports.applyMenuFilter = applyMenuFilter;

package/lib/components/Filter/components/FilterMenu/filterMenu.stories.js

@@ -1,12 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterMenuStory = void 0;
-const react_1 = __importDefault(require("react"));
-const filterMenu_1 = require("./filterMenu");
-exports.default = {
+import React from "react";
+import { FilterMenu } from "./filterMenu";
+export default {
     argTypes: {
         argTypes: {
             categoryKey: { control: { disable: true } },
@@ -15,16 +9,16 @@ exports.default = {
             values: { control: { disable: true } },
         },
     },
-    component: filterMenu_1.FilterMenu,
+    component: FilterMenu,
     decorators: [
-        (Story) => (react_1.default.createElement("div", { style: { backgroundColor: "white" } },
-            react_1.default.createElement(Story, null))),
+        (Story) => (React.createElement("div", { style: { backgroundColor: "white" } },
+            React.createElement(Story, null))),
     ],
     title: "Components/Filter/FilterMenu",
 };
-const FilterMenuTemplate = (args) => (react_1.default.createElement(filterMenu_1.FilterMenu, Object.assign({}, args)));
-exports.FilterMenuStory = FilterMenuTemplate.bind({});
-exports.FilterMenuStory.args = {
+const FilterMenuTemplate = (args) => (React.createElement(FilterMenu, { ...args }));
+export const FilterMenuStory = FilterMenuTemplate.bind({});
+FilterMenuStory.args = {
     categoryKey: "donorDisease",
     menuWidth: 312,
     values: [

package/lib/components/Filter/components/FilterMenu/filterMenu.styles.js

@@ -1,26 +1,20 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = exports.FilterViewTools = exports.FilterView = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const breakpoints_1 = require("../../../../styles/common/mixins/breakpoints");
-const fonts_1 = require("../../../../styles/common/mixins/fonts");
-exports.FilterView = styled_1.default.div `
+import styled from "@emotion/styled";
+import { ButtonBase } from "@mui/material";
+import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints";
+import { textBodyLarge500 } from "../../../../styles/common/mixins/fonts";
+export const FilterView = styled.div `
   width: ${({ menuWidth }) => `${menuWidth}px`};
 `;
-exports.FilterViewTools = styled_1.default.div `
+export const FilterViewTools = styled.div `
   margin: 24px 0 8px;
 
-  ${breakpoints_1.mediaDesktopSmallUp} {
+  ${mediaDesktopSmallUp} {
     margin: 0;
   }
 }
 `;
-exports.Button = (0, styled_1.default)(material_1.ButtonBase) `
-  ${fonts_1.textBodyLarge500};
+export const Button = styled(ButtonBase) `
+  ${textBodyLarge500};
   align-items: center;
   display: flex;
   gap: 8px;

package/lib/components/Filter/components/FilterMenuSearch/filterMenuSearch.js

@@ -1,13 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import React from "react";
+import { SearchIcon } from "../../../common/CustomIcon/components/SearchIcon/searchIcon";
+import { FilterMenuSearch as Search } from "./filterMenuSearch.styles";
+export const FilterMenuSearch = ({ searchTerm, setSearchTerm, }) => {
+    return (React.createElement(Search, { placeholder: "Search", searchTerm: searchTerm, setSearchTerm: setSearchTerm, StartAdornment: SearchIcon }));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterMenuSearch = void 0;
-const react_1 = __importDefault(require("react"));
-const searchIcon_1 = require("../../../common/CustomIcon/components/SearchIcon/searchIcon");
-const filterMenuSearch_styles_1 = require("./filterMenuSearch.styles");
-const FilterMenuSearch = ({ searchTerm, setSearchTerm, }) => {
-    return (react_1.default.createElement(filterMenuSearch_styles_1.FilterMenuSearch, { placeholder: "Search", searchTerm: searchTerm, setSearchTerm: setSearchTerm, StartAdornment: searchIcon_1.SearchIcon }));
-};
-exports.FilterMenuSearch = FilterMenuSearch;

package/lib/components/Filter/components/FilterMenuSearch/filterMenuSearch.styles.js

@@ -1,21 +1,15 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterMenuSearch = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const breakpoints_1 = require("../../../../styles/common/mixins/breakpoints");
-const colors_1 = require("../../../../styles/common/mixins/colors");
-const input_1 = require("../../../common/Input/input");
-exports.FilterMenuSearch = (0, styled_1.default)(input_1.Input) `
+import styled from "@emotion/styled";
+import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints";
+import { inkLight } from "../../../../styles/common/mixins/colors";
+import { Input } from "../../../common/Input/input";
+export const FilterMenuSearch = styled(Input) `
   padding: 0 16px;
 
   .MuiOutlinedInput-input {
-    color: ${colors_1.inkLight};
+    color: ${inkLight};
   }
 
-  ${breakpoints_1.mediaDesktopSmallUp} {
+  ${mediaDesktopSmallUp} {
     margin-top: 16px;
   }
 `;

package/lib/components/Filter/components/FilterNoResultsFound/filterNoResultsFound.js

@@ -1,36 +1,10 @@
-"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.FilterNoResultsFound = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const buttonTextPrimary_1 = require("../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary");
-const filterNoResultsFound_styles_1 = require("./filterNoResultsFound.styles");
-exports.FilterNoResultsFound = (0, react_1.forwardRef)(function FilterNoResultsFound({ onClearSearchTerm }, ref) {
-    return (react_1.default.createElement(filterNoResultsFound_styles_1.FilterNoResultsFound, { ref: ref },
-        react_1.default.createElement(material_1.Typography, { component: "div", variant: "text-body-500" }, "No results found!"),
-        react_1.default.createElement(material_1.Typography, { component: "div", color: "ink.light", mb: onClearSearchTerm ? 2 : 0, mt: 1, variant: "text-body-400" }, "Try adjusting your search or filter to find what you\u2019re looking for."),
-        onClearSearchTerm && (react_1.default.createElement(buttonTextPrimary_1.ButtonTextPrimary, { onClick: onClearSearchTerm }, "Clear Search"))));
+import { Typography } from "@mui/material";
+import React, { forwardRef } from "react";
+import { ButtonTextPrimary } from "../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary";
+import { FilterNoResultsFound as FilterNoResults } from "./filterNoResultsFound.styles";
+export const FilterNoResultsFound = forwardRef(function FilterNoResultsFound({ onClearSearchTerm }, ref) {
+    return (React.createElement(FilterNoResults, { ref: ref },
+        React.createElement(Typography, { component: "div", variant: "text-body-500" }, "No results found!"),
+        React.createElement(Typography, { component: "div", color: "ink.light", mb: onClearSearchTerm ? 2 : 0, mt: 1, variant: "text-body-400" }, "Try adjusting your search or filter to find what you\u2019re looking for."),
+        onClearSearchTerm && (React.createElement(ButtonTextPrimary, { onClick: onClearSearchTerm }, "Clear Search"))));
 });

package/lib/components/Filter/components/FilterNoResultsFound/filterNoResultsFound.styles.js

@@ -1,11 +1,5 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterNoResultsFound = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-exports.FilterNoResultsFound = styled_1.default.div `
+import styled from "@emotion/styled";
+export const FilterNoResultsFound = styled.div `
   display: grid;
   justify-items: flex-start;
   padding: 10px 16px;

package/lib/components/Filter/components/FilterTag/filterTag.js

@@ -1,33 +1,7 @@
-"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.FilterTag = void 0;
-const icons_material_1 = require("@mui/icons-material");
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const filterTag_styles_1 = require("./filterTag.styles");
+import { CloseRounded } from "@mui/icons-material";
+import { Chip, Tooltip } from "@mui/material";
+import React, { useRef } from "react";
+import { SupersededTag } from "./filterTag.styles";
 const DEFAULT_SLOT_PROPS = {
     popper: {
         modifiers: [
@@ -44,13 +18,11 @@ const DEFAULT_SLOT_PROPS = {
         ],
     },
 };
-const FilterTag = ({ label, onRemove, superseded, }) => {
-    var _a, _b, _c;
-    const Tag = superseded ? filterTag_styles_1.SupersededTag : material_1.Chip;
-    const tagRef = (0, react_1.useRef)(null);
-    const tagLabelElement = (_a = tagRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".MuiChip-label");
-    const isOverflowed = ((_b = tagLabelElement === null || tagLabelElement === void 0 ? void 0 : tagLabelElement.offsetWidth) !== null && _b !== void 0 ? _b : 0) < ((_c = tagLabelElement === null || tagLabelElement === void 0 ? void 0 : tagLabelElement.scrollWidth) !== null && _c !== void 0 ? _c : 0);
-    return (react_1.default.createElement(material_1.Tooltip, { arrow: true, disableInteractive: true, slotProps: DEFAULT_SLOT_PROPS, title: isOverflowed ? label : null },
-        react_1.default.createElement(Tag, { clickable: false, color: "primary", deleteIcon: react_1.default.createElement(icons_material_1.CloseRounded, { color: "inherit" }), label: label, onClick: onRemove, onDelete: onRemove, ref: tagRef, variant: "filterTag" })));
+export const FilterTag = ({ label, onRemove, superseded, }) => {
+    const Tag = superseded ? SupersededTag : Chip;
+    const tagRef = useRef(null);
+    const tagLabelElement = tagRef.current?.querySelector(".MuiChip-label");
+    const isOverflowed = (tagLabelElement?.offsetWidth ?? 0) < (tagLabelElement?.scrollWidth ?? 0);
+    return (React.createElement(Tooltip, { arrow: true, disableInteractive: true, slotProps: DEFAULT_SLOT_PROPS, title: isOverflowed ? label : null },
+        React.createElement(Tag, { clickable: false, color: "primary", deleteIcon: React.createElement(CloseRounded, { color: "inherit" }), label: label, onClick: onRemove, onDelete: onRemove, ref: tagRef, variant: "filterTag" })));
 };
-exports.FilterTag = FilterTag;