@databiosphere/findable-ui 0.0.0

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

@@ -0,0 +1,53 @@
+"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;
+    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" }),
+                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("") })))));
+};
+exports.FilterMenu = FilterMenu;
+function applyMenuFilter(values, searchTerm) {
+    return (0, utils_1.getSortMatchesFn)(searchTerm)(values);
+}
+exports.applyMenuFilter = applyMenuFilter;

package/lib/components/Filter/components/FilterMenu/filterMenu.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./filterMenu").FilterMenuProps>;
+export default _default;
+export declare const FilterMenuStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./filterMenu").FilterMenuProps>;

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

@@ -0,0 +1,122 @@
+"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 = {
+    argTypes: {
+        argTypes: {
+            categoryKey: { control: { disable: true } },
+            menuWidth: { control: "number" },
+            onFilter: { control: { disable: true } },
+            values: { control: { disable: true } },
+        },
+    },
+    component: filterMenu_1.FilterMenu,
+    decorators: [
+        (Story) => (react_1.default.createElement("div", { style: { backgroundColor: "white" } },
+            react_1.default.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 = {
+    categoryKey: "donorDisease",
+    menuWidth: 312,
+    values: [
+        {
+            count: 312,
+            key: "normal",
+            label: "Normal",
+            selected: false,
+        },
+        {
+            count: 0,
+            key: "abscess",
+            label: "abscess",
+            selected: false,
+        },
+        {
+            count: 3,
+            key: "acoustic neuroma",
+            label: "acoustic neuroma",
+            selected: true,
+        },
+        {
+            count: 3,
+            key: "acute kidney failure",
+            label: "acute kidney failure",
+            selected: true,
+        },
+        {
+            count: 3,
+            key: "acute kidney tubular necrosis",
+            label: "acute kidney tubular necrosis",
+            selected: true,
+        },
+        {
+            count: 3,
+            key: "alcohol abuse",
+            label: "alcohol abuse",
+            selected: true,
+        },
+        {
+            count: 3,
+            key: "Alzheimer disease",
+            label: "Alzheimer disease",
+            selected: true,
+        },
+        {
+            count: 3,
+            key: "amyotrophic lateral sclerosis",
+            label: "amyotrophic lateral sclerosis",
+            selected: true,
+        },
+        {
+            count: 1,
+            key: "anxiety disorder",
+            label: "anxiety disorder",
+            selected: true,
+        },
+        {
+            count: 3,
+            key: "aplastic anemia",
+            label: "aplastic anemia",
+            selected: true,
+        },
+        {
+            count: 3,
+            key: "arthritis",
+            label: "arthritis",
+            selected: true,
+        },
+        {
+            count: 3,
+            key: "asthma",
+            label: "asthma",
+            selected: true,
+        },
+        {
+            count: 222,
+            key: "atherosclerosis",
+            label: "atherosclerosis",
+            selected: false,
+        },
+        {
+            count: 222,
+            key: "atrial fibrillation",
+            label: "atrial fibrillation",
+            selected: true,
+        },
+        {
+            count: 222,
+            key: "benign prostatic hyperplasia",
+            label: "benign prostatic hyperplasia",
+            selected: true,
+        },
+    ],
+};

package/lib/components/Filter/components/FilterMenu/filterMenu.styles.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+interface Props {
+    menuWidth: number;
+}
+export declare const FilterView: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FilterViewTools: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Button: import("@emotion/styled").StyledComponent<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "children" | "sx" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export {};

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

@@ -0,0 +1,30 @@
+"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 `
+  width: ${({ menuWidth }) => `${menuWidth}px`};
+`;
+exports.FilterViewTools = styled_1.default.div `
+  margin: 24px 0 8px;
+
+  ${breakpoints_1.mediaDesktopSmallUp} {
+    margin: 0;
+  }
+}
+`;
+exports.Button = (0, styled_1.default)(material_1.ButtonBase) `
+  ${fonts_1.textBodyLarge500};
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  justify-content: flex-start;
+  padding: 12px 16px;
+  width: 100%;
+`;

package/lib/components/Filter/components/FilterMenuSearch/filterMenuSearch.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { SetSearchTermFn } from "../../common/entities";
+export interface FilterMenuSearchProps {
+    searchTerm: string;
+    setSearchTerm: SetSearchTermFn;
+}
+export declare const FilterMenuSearch: ({ searchTerm, setSearchTerm, }: FilterMenuSearchProps) => JSX.Element;

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

@@ -0,0 +1,13 @@
+"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 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.d.ts

@@ -0,0 +1,3 @@
+export declare const FilterMenuSearch: import("@emotion/styled").StyledComponent<import("../../../common/Input/input").InputProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

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

@@ -0,0 +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.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) `
+  padding: 0 16px;
+
+  .MuiOutlinedInput-input {
+    color: ${colors_1.inkLight};
+  }
+
+  ${breakpoints_1.mediaDesktopSmallUp} {
+    margin-top: 16px;
+  }
+`;

package/lib/components/Filter/components/FilterNoResultsFound/filterNoResultsFound.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare type OnClearSearchTermFn = () => void;
+export interface FilterNoResultsFoundProps {
+    onClearSearchTerm?: OnClearSearchTermFn;
+}
+export declare const FilterNoResultsFound: React.ForwardRefExoticComponent<FilterNoResultsFoundProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,36 @@
+"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"))));
+});

package/lib/components/Filter/components/FilterNoResultsFound/filterNoResultsFound.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const FilterNoResultsFound: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +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.FilterNoResultsFound = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.FilterNoResultsFound = styled_1.default.div `
+  display: grid;
+  justify-items: flex-start;
+  padding: 10px 16px;
+`;

package/lib/components/Filter/components/FilterTag/filterTag.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface FilterTagProps {
+    label: string;
+    onRemove: () => void;
+    superseded: boolean;
+}
+export declare const FilterTag: ({ label, onRemove, superseded, }: FilterTagProps) => JSX.Element;

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

@@ -0,0 +1,56 @@
+"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");
+const DEFAULT_SLOT_PROPS = {
+    popper: {
+        modifiers: [
+            {
+                name: "offset",
+                options: {
+                    offset: [0, -6],
+                },
+            },
+            {
+                name: "preventOverflow",
+                options: { padding: 8 },
+            },
+        ],
+    },
+};
+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" })));
+};
+exports.FilterTag = FilterTag;

package/lib/components/Filter/components/FilterTag/filterTag.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./filterTag").FilterTagProps>;
+export default _default;
+export declare const FilterTagStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./filterTag").FilterTagProps>;

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

@@ -0,0 +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.FilterTagStory = void 0;
+const react_1 = __importDefault(require("react"));
+const filterTag_1 = require("./filterTag");
+exports.default = {
+    argTypes: {
+        label: { control: "text" },
+        superseded: { control: "boolean" },
+    },
+    component: filterTag_1.FilterTag,
+    title: "Components/Filter/FilterTag",
+};
+const FilterTagTemplate = (args) => (react_1.default.createElement(filterTag_1.FilterTag, Object.assign({}, args)));
+exports.FilterTagStory = FilterTagTemplate.bind({});
+exports.FilterTagStory.args = {
+    label: "Male",
+    superseded: false,
+};

package/lib/components/Filter/components/FilterTag/filterTag.styles.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export declare const SupersededTag: import("@emotion/styled").StyledComponent<{
+    avatar?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    children?: null | undefined;
+    classes?: Partial<import("@mui/material").ChipClasses> | undefined;
+    clickable?: boolean | undefined;
+    color?: "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning" | undefined;
+    deleteIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    disabled?: boolean | undefined;
+    icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    label?: import("react").ReactNode;
+    onDelete?: ((event: any) => void) | undefined;
+    size?: "medium" | "small" | undefined;
+    skipFocusWhenDisabled?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    variant?: "status" | "filled" | "outlined" | "filterTag" | "ntag" | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "label" | keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "size" | "icon" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

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

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SupersededTag = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const material_1 = require("@mui/material");
+exports.SupersededTag = (0, styled_1.default)(material_1.Chip) `
+  background-color: ${({ theme }) => theme.palette.smoke.dark};
+`;

package/lib/components/Filter/components/FilterTags/filterTags.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { CategoryTag } from "../../../../common/entities";
+export interface FilterTagsProps {
+    tags?: CategoryTag[];
+}
+export declare const FilterTags: ({ tags }: FilterTagsProps) => JSX.Element | null;

package/lib/components/Filter/components/FilterTags/filterTags.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterTags = void 0;
+const react_1 = __importDefault(require("react"));
+const filterTag_1 = require("../FilterTag/filterTag");
+const filterTags_styles_1 = require("./filterTags.styles");
+const FilterTags = ({ tags }) => {
+    return tags && tags.length ? (react_1.default.createElement(filterTags_styles_1.FilterTags, null, tags.map(({ label, onRemove, superseded }, t) => (react_1.default.createElement(filterTag_1.FilterTag, { key: `${label}${t}`, label: label, onRemove: onRemove, superseded: superseded }))))) : null;
+};
+exports.FilterTags = FilterTags;

package/lib/components/Filter/components/FilterTags/filterTags.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./filterTags").FilterTagsProps>;
+export default _default;
+export declare const FilterTagsStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./filterTags").FilterTagsProps>;

package/lib/components/Filter/components/FilterTags/filterTags.stories.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterTagsStory = void 0;
+const react_1 = __importDefault(require("react"));
+const filterTags_1 = require("./filterTags");
+exports.default = {
+    argTypes: {
+        tags: { control: { disable: true } },
+    },
+    component: filterTags_1.FilterTags,
+    decorators: [
+        (Story) => (react_1.default.createElement("div", { style: { padding: "8px 12px 8px 16px", width: 264 } },
+            react_1.default.createElement(Story, null))),
+    ],
+    title: "Components/Filter/FilterTags",
+};
+const FilterTagsTemplate = (args) => (react_1.default.createElement(filterTags_1.FilterTags, Object.assign({}, args)));
+const onRemove = () => {
+    // onRemove function
+};
+exports.FilterTagsStory = FilterTagsTemplate.bind({});
+exports.FilterTagsStory.args = {
+    tags: [
+        {
+            label: "Normal",
+            onRemove: onRemove,
+            superseded: false,
+        },
+        {
+            label: "abscess",
+            onRemove: onRemove,
+            superseded: true,
+        },
+        {
+            label: "acoustic neuroma",
+            onRemove: onRemove,
+            superseded: false,
+        },
+        {
+            label: "acute kidney failure",
+            onRemove: onRemove,
+            superseded: false,
+        },
+        {
+            label: "acute kidney tubular necrosis",
+            onRemove: onRemove,
+            superseded: false,
+        },
+        {
+            label: "alcohol abuse",
+            onRemove: onRemove,
+            superseded: false,
+        },
+    ],
+};

package/lib/components/Filter/components/FilterTags/filterTags.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const FilterTags: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/lib/components/Filter/components/FilterTags/filterTags.styles.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterTags = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const breakpoints_1 = require("../../../../styles/common/mixins/breakpoints");
+exports.FilterTags = styled_1.default.span `
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 8px;
+  padding: 0 16px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  ${breakpoints_1.mediaDesktopSmallUp} {
+    padding: 0;
+  }
+`;

package/lib/components/Filter/components/Filters/filters.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { TrackFilterOpenedFunction } from "config/entities";
+import { SelectCategoryView } from "../../../../common/entities";
+import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
+export interface CategoryFilter {
+    categoryViews: SelectCategoryView[];
+    label?: string;
+}
+export interface FiltersProps {
+    categoryFilters: CategoryFilter[];
+    closeAncestor?: () => void;
+    disabled: boolean;
+    onFilter: OnFilterFn;
+    trackFilterOpened?: TrackFilterOpenedFunction;
+}
+export declare const Filters: ({ categoryFilters, closeAncestor, disabled, onFilter, trackFilterOpened, }: FiltersProps) => JSX.Element;