@databiosphere/findable-ui 50.6.1 → 50.7.0

package/README.md

@@ -8,22 +8,35 @@
   in the form `@databiosphere/findable-ui/lib/<path>`, where `<path>` is the path of the file within the `lib`
   folder.
 
-## Developing Findable UI alongside Data Biosphere Data Browser
-
-1. Clone this repository into the same parent folder as
-   the [Data Biosphere Data Browser](https://github.com/DataBiosphere/data-browser).
-2. Set `node` version to `22.12.0` (this is also the version used by the Data Browser).
-3. In the `findable-ui` repository directory:
-    - Run `npm update`.
-    - Run `npx tsc` (this should be run when this repository is first downloaded and when any changes are made to the
-      source files; one way this can be done more efficiently is
-      by [setting the default build task](https://code.visualstudio.com/docs/typescript/typescript-compiling#_step-3-make-the-typescript-build-the-default)
-      in VS Code so that it can be done with a keyboard shortcut).
-4. In the Data Browser `explorer` directory (e.g. `data-browser/explorer`):
-    - Run `npm update`.
-    - Run `npm link ../findable-ui`, which will create a symlink in node_modules pointing
-      to findable-ui.
-    - If any packages are later installed or uninstalled, the symlink will need to be created again, which can be done
-      with the same command or by running `npm link @databiosphere/findable-ui`. 
-    - To successfully link to findable-ui, you may need to comment out the following packages from the `next.config.mjs` webpack configuration:
-      - `@tanstack/react-table`
+## Developing findable-ui alongside a consuming app
+
+Use `scripts/link.sh` to build and install a local copy of findable-ui
+into a consuming project (e.g. ncpi-dataset-catalog, data-browser):
+
+1. Clone this repository into the same parent folder as the consuming app.
+2. Set `node` version to `22.12.0`.
+3. Run `npm install` in both repositories.
+4. From the consuming project directory:
+   ```bash
+   ../findable-ui/scripts/link.sh
+   ```
+   This compiles TypeScript, packs the output, installs it into
+   `node_modules`, clears the Next.js cache, and starts the dev server.
+
+5. To iterate: Ctrl+C the dev server, make changes in findable-ui, and
+   hit up-arrow to re-run the script.
+
+6. To restore the published version:
+   ```bash
+   ../findable-ui/scripts/unlink.sh
+   ```
+
+Consuming projects can optionally add thin wrappers in their `package.json` scripts:
+```json
+{
+  "scripts": {
+    "link-findable": "../findable-ui/scripts/link.sh",
+    "unlink-findable": "../findable-ui/scripts/unlink.sh"
+  }
+}
+```

package/lib/components/DataDictionary/components/Table/columns/columnDef.d.ts

@@ -0,0 +1,6 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { Attribute } from "../../../../../common/entities";
+import { COLUMN_IDENTIFIER } from "./columnIdentifier";
+import { AttributeValue } from "./types";
+export declare const COLUMN_DEF: Record<keyof typeof COLUMN_IDENTIFIER, ColumnDef<Attribute, AttributeValue>>;
+export declare const COLUMN_DEFS: ColumnDef<Attribute, AttributeValue>[];

package/lib/components/DataDictionary/components/Table/columns/columnDef.js

@@ -0,0 +1,33 @@
+import { BasicCell } from "../components/BasicCell/basicCell";
+import { COLUMN_IDENTIFIER } from "./columnIdentifier";
+const COLUMN_DEF_DESCRIPTION = {
+    accessorFn: (row) => row.description,
+    cell: (props) => BasicCell({ ...props }),
+    header: "Description",
+    id: COLUMN_IDENTIFIER.DESCRIPTION,
+    meta: { width: { max: "2fr", min: "480px" } },
+};
+const COLUMN_DEF_KEY = {
+    accessorFn: (row) => row.key,
+    cell: (props) => BasicCell({ ...props }),
+    header: "Key",
+    id: COLUMN_IDENTIFIER.KEY,
+    meta: { width: { max: "1fr", min: "180px" } },
+};
+const COLUMN_DEF_LABEL = {
+    accessorFn: (row) => row.label,
+    cell: (props) => BasicCell({ ...props }),
+    header: "Label",
+    id: COLUMN_IDENTIFIER.LABEL,
+    meta: { width: { max: "1fr", min: "200px" } },
+};
+export const COLUMN_DEF = {
+    DESCRIPTION: COLUMN_DEF_DESCRIPTION,
+    KEY: COLUMN_DEF_KEY,
+    LABEL: COLUMN_DEF_LABEL,
+};
+export const COLUMN_DEFS = [
+    COLUMN_DEF.LABEL,
+    COLUMN_DEF.KEY,
+    COLUMN_DEF.DESCRIPTION,
+];

package/lib/components/DataDictionary/components/Table/columns/columnIdentifier.d.ts

@@ -0,0 +1,5 @@
+export declare const COLUMN_IDENTIFIER: {
+    readonly DESCRIPTION: "description";
+    readonly KEY: "key";
+    readonly LABEL: "label";
+};

package/lib/components/DataDictionary/components/Table/columns/columnIdentifier.js

@@ -0,0 +1,5 @@
+export const COLUMN_IDENTIFIER = {
+    DESCRIPTION: "description",
+    KEY: "key",
+    LABEL: "label",
+};

package/lib/components/DataDictionary/components/Table/columns/types.d.ts

@@ -0,0 +1,2 @@
+import { Attribute } from "../../../../../common/entities";
+export type AttributeValue = Attribute[keyof Attribute];

package/lib/components/DataDictionary/components/Table/columns/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/DataDictionary/components/Table/components/BasicCell/types.d.ts

@@ -0,0 +1,4 @@
+import { CellContext } from "@tanstack/react-table";
+import { Attribute } from "../../../../../../common/entities";
+import { AttributeValue } from "../../columns/types";
+export type BasicCellProps = CellContext<Attribute, AttributeValue>;

package/lib/components/DataDictionary/components/Table/components/BasicCell/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/DataDictionary/hooks/UseDataDictionary/hook.d.ts

@@ -0,0 +1,4 @@
+import { RowData } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
+import { UseDataDictionary } from "./types";
+export declare const useDataDictionary: <T extends RowData = Attribute>() => UseDataDictionary<T>;

package/lib/components/DataDictionary/hooks/UseDataDictionary/hook.js

@@ -0,0 +1,23 @@
+import { useMemo } from "react";
+import { useConfig } from "../../../../hooks/useConfig";
+import { buildClassesOutline } from "../../components/Outline/utils";
+import { useTable } from "../../components/Table/hook";
+export const useDataDictionary = () => {
+    const { config: { dataDictionaries: dataDictionaryConfigs }, } = useConfig();
+    // Get dictionary config.
+    const dataDictionaryConfig = dataDictionaryConfigs?.[0]; // TODO: Handle multiple data dictionaries
+    // Get configured dictionary classes, column definitions and table options.
+    const { classes, columnDefs, tableOptions, title } = useMemo(() => {
+        return {
+            classes: dataDictionaryConfig?.dataDictionary?.classes || [],
+            columnDefs: dataDictionaryConfig?.columnDefs || [],
+            tableOptions: dataDictionaryConfig?.tableOptions || {},
+            title: dataDictionaryConfig?.dataDictionary?.title || "",
+        };
+    }, [dataDictionaryConfig]);
+    // Build table instance.
+    const table = useTable(classes, columnDefs, tableOptions);
+    // Build outline.
+    const outline = buildClassesOutline(table);
+    return { outline, table, title };
+};

package/lib/components/DataDictionary/hooks/UseDataDictionary/types.d.ts

@@ -0,0 +1,8 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
+import { OutlineItem } from "../../../Layout/components/Outline/types";
+export interface UseDataDictionary<T extends RowData = Attribute> {
+    outline: OutlineItem[];
+    table: Table<T>;
+    title: string;
+}

package/lib/components/DataDictionary/hooks/UseDataDictionary/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/DataDictionary/hooks/UseLayoutSpacing/hook.d.ts

@@ -0,0 +1,2 @@
+import { UseLayoutSpacing } from "./types";
+export declare const useLayoutSpacing: () => UseLayoutSpacing;

package/lib/components/DataDictionary/hooks/UseLayoutSpacing/hook.js

@@ -0,0 +1,10 @@
+import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
+export const useLayoutSpacing = () => {
+    const { dimensions } = useLayoutDimensions();
+    return {
+        spacing: {
+            bottom: dimensions.footer.height,
+            top: dimensions.header.height,
+        },
+    };
+};

package/lib/components/DataDictionary/hooks/UseLayoutSpacing/types.d.ts

@@ -0,0 +1,7 @@
+export interface LayoutSpacing {
+    bottom: number;
+    top: number;
+}
+export interface UseLayoutSpacing {
+    spacing: LayoutSpacing;
+}

package/lib/components/DataDictionary/hooks/UseLayoutSpacing/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Detail/components/Table/components/TableHead/tableHead.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Table } from "@tanstack/react-table";
+import { ROW_DIRECTION } from "../../../../../Table/common/entities";
+export interface TableBodyProps<T> {
+    rowDirection: ROW_DIRECTION;
+    tableInstance: Table<T>;
+}
+export declare const TableHead: <T extends object>({ rowDirection, tableInstance, }: TableBodyProps<T>) => JSX.Element;

package/lib/components/Detail/components/Table/components/TableHead/tableHead.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.TableHead = void 0;
+const material_1 = require("@mui/material");
+const react_table_1 = require("@tanstack/react-table");
+const react_1 = __importStar(require("react"));
+const entities_1 = require("../../../../../Table/common/entities");
+const TableHead = ({ rowDirection, tableInstance, }) => {
+    return (react_1.default.createElement(react_1.Fragment, null, rowDirection === entities_1.ROW_DIRECTION.DEFAULT &&
+        tableInstance.getHeaderGroups().map((headerGroup) => (react_1.default.createElement(material_1.TableHead, { key: headerGroup.id },
+            react_1.default.createElement(material_1.TableRow, null, headerGroup.headers.map((header) => (react_1.default.createElement(material_1.TableCell, { key: header.id }, (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()))))))))));
+};
+exports.TableHead = TableHead;

package/lib/components/Export/components/ExportMethod/exportMethod.stories.d.ts

@@ -0,0 +1,22 @@
+import type { StoryObj } from "@storybook/nextjs-vite";
+declare const meta: {
+    argTypes: {
+        buttonLabel: {
+            control: "text";
+        };
+        description: {
+            control: "text";
+        };
+        route: {
+            control: "text";
+        };
+        title: {
+            control: "text";
+        };
+    };
+    component: ({ buttonLabel, description, footnote, isAccessible, route, title, trackingId, }: import("./exportMethod").ExportMethodProps) => import("react").JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ExportMethodStory: Story;

package/lib/components/Export/components/ExportMethod/exportMethod.stories.js

@@ -0,0 +1,20 @@
+import { ExportMethod } from "./exportMethod";
+const meta = {
+    argTypes: {
+        buttonLabel: { control: "text" },
+        description: { control: "text" },
+        route: { control: "text" },
+        title: { control: "text" },
+    },
+    component: ExportMethod,
+    title: "Components/Section/Export/ExportMethod",
+};
+export default meta;
+export const ExportMethodStory = {
+    args: {
+        buttonLabel: "Request curl Command",
+        description: "Obtain a curl command for downloading the selected data.",
+        route: "/request-curl-command",
+        title: "Download Study Data and Metadata (Curl Command)",
+    },
+};

package/lib/components/Filter/components/Filter/filter.stories.d.ts

@@ -0,0 +1,25 @@
+import { StoryObj } from "@storybook/react";
+import React from "react";
+declare const meta: {
+    argTypes: {
+        tags: {
+            control: {
+                disable: true;
+            };
+        };
+    };
+    component: ({ categorySection, categoryView, closeAncestor, isFilterDrawer, onFilter, tags, trackFilterOpened, }: import("./filter").FilterProps) => JSX.Element;
+    decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        categorySection?: string | undefined;
+        categoryView: import("../../../../common/entities").SelectCategoryView;
+        closeAncestor?: (() => void) | undefined;
+        isFilterDrawer: boolean;
+        onFilter: import("../../../../hooks/useCategoryFilter").OnFilterFn;
+        tags?: React.ReactNode;
+        trackFilterOpened?: import("../../../../config/entities").TrackFilterOpenedFunction | undefined;
+    }>) => JSX.Element)[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const FilterStory: Story;

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { Filter } from "./filter";
+const meta = {
+    argTypes: {
+        tags: { control: { disable: true } },
+    },
+    component: Filter,
+    decorators: [
+        (Story) => (React.createElement("div", { style: { padding: "8px 12px 8px 16px", width: 264 } },
+            React.createElement(Story, null))),
+    ],
+    title: "Components/Filter/Filter",
+};
+export default meta;
+const onFilter = () => {
+    // onFilter function
+};
+export const FilterStory = {
+    args: {
+        categoryView: {
+            isDisabled: false,
+            key: "genusSpecies",
+            label: "Genus Species",
+            values: [
+                {
+                    count: 12,
+                    key: "homoSapiens",
+                    label: "Homo sapiens",
+                    selected: false,
+                },
+                {
+                    count: 6,
+                    key: "musMusculus",
+                    label: "Mus musculus",
+                    selected: false,
+                },
+            ],
+        },
+        isFilterDrawer: false,
+        onFilter,
+    },
+};

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

@@ -0,0 +1,16 @@
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        label: {
+            control: "text";
+        };
+        superseded: {
+            control: "boolean";
+        };
+    };
+    component: ({ label, onRemove, superseded, }: import("./filterTag").FilterTagProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const FilterTagStory: Story;

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

@@ -0,0 +1,17 @@
+import { FilterTag } from "./filterTag";
+const meta = {
+    argTypes: {
+        label: { control: "text" },
+        superseded: { control: "boolean" },
+    },
+    component: FilterTag,
+    title: "Components/Filter/FilterTag",
+};
+export default meta;
+export const FilterTagStory = {
+    args: {
+        label: "Male",
+        onRemove: () => { },
+        superseded: false,
+    },
+};

package/lib/components/Filter/components/Filters/components/CategoryLabel/categoryLabel.d.ts

@@ -0,0 +1,9 @@
+import { TypographyProps } from "@mui/material";
+/**
+ * CategoryLabel component.
+ * Renders a category label for a list of category views.
+ * @param props - Component props.
+ * @param props.children - Child elements to render.
+ * @returns CategoryLabel component.
+ */
+export declare const CategoryLabel: ({ children, }: TypographyProps) => JSX.Element | null;

package/lib/components/Filter/components/Filters/components/CategoryLabel/categoryLabel.js

@@ -0,0 +1,15 @@
+import { Typography } from "@mui/material";
+import React from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
+/**
+ * CategoryLabel component.
+ * Renders a category label for a list of category views.
+ * @param props - Component props.
+ * @param props.children - Child elements to render.
+ * @returns CategoryLabel component.
+ */
+export const CategoryLabel = ({ children, }) => {
+    if (!children)
+        return null;
+    return (React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.UPPERCASE_500 }, children));
+};

package/lib/components/Filter/components/Filters/components/Controls/controls.d.ts

@@ -0,0 +1,12 @@
+import type { ControlsProps } from "./types";
+/**
+ * Renders filter controls with optional sort functionality.
+ * Displays category label alongside a sort button when sorting is enabled.
+ * @param props - Component props.
+ * @param props.children - Child elements to render within the controls.
+ * @param props.filterSort - Filter sort configuration.
+ * @param props.filterSortEnabled - Whether filter sorting is enabled.
+ * @param props.onFilterSortChange - Callback when filter sort changes.
+ * @returns Filter controls with category label and optional sort button.
+ */
+export declare const Controls: ({ children, filterSort, filterSortEnabled, onFilterSortChange, }: ControlsProps) => JSX.Element;

package/lib/components/Filter/components/Filters/components/Controls/controls.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { STACK_PROPS } from "../../../../../../styles/common/mui/stack";
+import { Button } from "../../../controls/Controls/components/FilterSort/components/Button/button";
+import { FilterSort } from "../../../controls/Controls/components/FilterSort/filterSort";
+import { StyledStack } from "./controls.styles";
+/**
+ * Renders filter controls with optional sort functionality.
+ * Displays category label alongside a sort button when sorting is enabled.
+ * @param props - Component props.
+ * @param props.children - Child elements to render within the controls.
+ * @param props.filterSort - Filter sort configuration.
+ * @param props.filterSortEnabled - Whether filter sorting is enabled.
+ * @param props.onFilterSortChange - Callback when filter sort changes.
+ * @returns Filter controls with category label and optional sort button.
+ */
+export const Controls = ({ children, filterSort, filterSortEnabled, onFilterSortChange, }) => {
+    return (React.createElement(StyledStack, { direction: STACK_PROPS.DIRECTION.ROW, useFlexGap: true },
+        children,
+        React.createElement(FilterSort, { Button: Button, enabled: filterSortEnabled, filterSort: filterSort, onFilterSortChange: onFilterSortChange })));
+};

package/lib/components/Filter/components/Filters/components/Controls/controls.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledStack: import("@emotion/styled").StyledComponent<import("@mui/material").StackOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/material").StackOwnProps> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Filter/components/Filters/components/Controls/controls.styles.js

@@ -0,0 +1,7 @@
+import styled from "@emotion/styled";
+import { Stack } from "@mui/material";
+export const StyledStack = styled(Stack) `
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px;
+`;

package/lib/components/Filter/components/Filters/components/Controls/types.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps } from "react";
+import { BaseComponentProps, ChildrenProps } from "../../../../../types";
+import { FilterSort } from "../../../controls/Controls/components/FilterSort/filterSort";
+export interface ControlsProps extends BaseComponentProps, ChildrenProps, Omit<ComponentProps<typeof FilterSort>, "enabled"> {
+    filterSortEnabled?: boolean;
+}

package/lib/components/Filter/components/Filters/components/Controls/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Filters } from "./filters";
+declare const _default: Meta<typeof Filters>;
+export default _default;
+type Story = StoryObj<typeof Filters>;
+export declare const FiltersStory: Story;

package/lib/components/Filter/components/Filters/filters.stories.js

@@ -0,0 +1,91 @@
+import React from "react";
+import { FilterMenuStory } from "../FilterMenu/filterMenu.stories";
+import { Filters } from "./filters";
+export default {
+    argTypes: {
+        categories: { control: { disable: true } },
+        onFilter: { control: { disable: true } },
+    },
+    component: Filters,
+    decorators: [
+        (Story) => (React.createElement("div", { style: { width: 264 } },
+            React.createElement(Story, null))),
+    ],
+    title: "Components/Filter/Filters",
+};
+const onFilter = () => {
+    // onFilter function
+};
+const defaultValues = [
+    {
+        count: 1,
+        key: "item1",
+        label: "Item 1",
+        selected: false,
+    },
+    {
+        count: 10,
+        key: "item2",
+        label: "Item 2",
+        selected: false,
+    },
+];
+export const FiltersStory = {
+    args: {
+        categoryFilters: [
+            {
+                categoryViews: [
+                    {
+                        isDisabled: false,
+                        key: "genusSpecies",
+                        label: "Genus Species",
+                        values: [
+                            {
+                                count: 12,
+                                key: "homoSapiens",
+                                label: "Homo sapiens",
+                                selected: false,
+                            },
+                            {
+                                count: 6,
+                                key: "musMusculus",
+                                label: "Mus musculus",
+                                selected: false,
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                categoryViews: [
+                    {
+                        isDisabled: false,
+                        key: "donorDisease",
+                        label: "Donor Disease",
+                        values: FilterMenuStory.args?.values || defaultValues,
+                    },
+                    {
+                        isDisabled: true,
+                        key: "anatomicalEntity",
+                        label: "Anatomical Entity",
+                        values: [
+                            {
+                                count: 12,
+                                key: "oralCavity",
+                                label: "oral cavity",
+                                selected: true,
+                            },
+                            {
+                                count: 6,
+                                key: "pancreas",
+                                label: "pancreas",
+                                selected: false,
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+        onFilter: onFilter,
+    },
+};

package/lib/components/Filter/components/SearchAllFilters/components/AutocompletePopper/autocompletePopper.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const AutocompletePopper: import("@emotion/styled").StyledComponent<import("@mui/material").PopperProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Filter/components/SearchAllFilters/components/AutocompletePopper/autocompletePopper.styles.js

@@ -0,0 +1,15 @@
+import styled from "@emotion/styled";
+import { Popper as MPopper } from "@mui/material";
+import { mediaDesktopSmallDown } from "../../../../../../styles/common/mixins/breakpoints";
+import { smokeLight } from "../../../../../../styles/common/mixins/colors";
+export const AutocompletePopper = styled(MPopper) `
+  ${mediaDesktopSmallDown} {
+    .MuiPaper-root {
+      background-color: ${smokeLight};
+
+      .MuiList-root {
+        margin: 0;
+      }
+    }
+  }
+`;

package/lib/components/Filter/components/SearchAllFilters/searchAllFilters.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { SearchAllFilters } from "./searchAllFilters";
+declare const _default: Meta<typeof SearchAllFilters>;
+export default _default;
+type Story = StoryObj<typeof SearchAllFilters>;
+export declare const SearchAllFiltersStory: Story;