@databiosphere/findable-ui 40.0.0 → 41.0.0

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

@@ -2,8 +2,9 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import { VariableSizeList as List, } from "react-window";
 import { useWindowResize } from "../../../../hooks/useWindowResize";
 import { LIST_ITEM_HEIGHT, LIST_MARGIN, MAX_DISPLAYABLE_LIST_ITEMS, MAX_LIST_HEIGHT_PX, } from "../../common/constants";
-import { List as FilterList } from "../FilterList/filterList.styles";
+import { StyledList } from "../FilterList/filterList.styles";
 import VariableSizeListItem from "../VariableSizeListItem/variableSizeListItem";
+import { SURFACE_TYPE } from "../surfaces/types";
 /**
  * Build variable list item element.
  * @param props - Variable size list child component props i.e. list index, style.
@@ -14,7 +15,7 @@ function renderListItem(props) {
     const { categoryKey, categorySection, matchedItems, onFilter, onUpdateItemSizeByItemKey, } = data;
     return (React.createElement(VariableSizeListItem, { categorySection: categorySection, categoryKey: categoryKey, matchedItem: matchedItems[index], onFilter: onFilter, onUpdateItemSizeByItemKey: onUpdateItemSizeByItemKey, style: style }));
 }
-export const VariableSizeList = ({ categoryKey, categorySection, height: initHeight = MAX_LIST_HEIGHT_PX, isFilterDrawer, itemSize = LIST_ITEM_HEIGHT, matchedItems, onFilter, overscanCount = MAX_DISPLAYABLE_LIST_ITEMS * 2, width = "100%", }) => {
+export const VariableSizeList = ({ categoryKey, categorySection, height: initHeight = MAX_LIST_HEIGHT_PX, itemSize = LIST_ITEM_HEIGHT, matchedItems, onFilter, overscanCount = MAX_DISPLAYABLE_LIST_ITEMS * 2, surfaceType, width = "100%", }) => {
     const { height: windowHeight } = useWindowResize();
     const [height, setHeight] = useState(initHeight);
     const itemSizeByItemKeyRef = useRef(new Map());
@@ -24,14 +25,14 @@ export const VariableSizeList = ({ categoryKey, categorySection, height: initHei
     const onUpdateItemSizeByItemKey = useCallback((key, size) => updateItemSizeByItemKey(itemSizeByItemKeyRef.current, key, size), []);
     // Sets height of list.
     useEffect(() => {
-        setHeight(calculateListHeight(initHeight, matchedItems, itemSizeByItemKeyRef.current, isFilterDrawer, windowHeight, outerRef.current));
-    }, [initHeight, isFilterDrawer, matchedItems, windowHeight]);
+        setHeight(calculateListHeight(initHeight, matchedItems, itemSizeByItemKeyRef.current, surfaceType, windowHeight, outerRef.current));
+    }, [initHeight, matchedItems, surfaceType, windowHeight]);
     // Clears VariableSizeList cache (offsets and measurements) when values are updated (filtered).
     // Facilitates correct positioning of list items when list is updated.
     useEffect(() => {
         listRef.current?.resetAfterIndex(0);
     }, [matchedItems]);
-    return (React.createElement(List, { height: height, outerRef: outerRef, innerElementType: FilterList, itemCount: matchedItems.length, itemData: {
+    return (React.createElement(List, { height: height, outerRef: outerRef, innerElementType: StyledList, itemCount: matchedItems.length, itemData: {
             categoryKey,
             categorySection,
             matchedItems,
@@ -45,13 +46,13 @@ export const VariableSizeList = ({ categoryKey, categorySection, height: initHei
  * @param height - Specified height of list.
  * @param matchedItems - Set of search results for category value view models in the given category.
  * @param itemSizeByItemKey - Map of item size by item key.
- * @param isFilterDrawer - True if filter is displayed in filter drawer.
+ * @param surfaceType - Surface type is "Drawer" or "Menu".
  * @param windowHeight - Window height.
  * @param outerListElem - Outer list element to reference list position from.
  * @returns calculated height.
  */
-function calculateListHeight(height, matchedItems, itemSizeByItemKey, isFilterDrawer, windowHeight, outerListElem) {
-    if (isFilterDrawer && outerListElem) {
+function calculateListHeight(height, matchedItems, itemSizeByItemKey, surfaceType, windowHeight, outerListElem) {
+    if (surfaceType === SURFACE_TYPE.DRAWER && outerListElem) {
         return windowHeight - outerListElem.getBoundingClientRect().top;
     }
     if (matchedItems.length > MAX_DISPLAYABLE_LIST_ITEMS) {

package/lib/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/columnFiltersAdapter.d.ts

@@ -0,0 +1,3 @@
+import { RowData } from "@tanstack/react-table";
+import { ColumnFiltersAdapterProps } from "./types";
+export declare const ColumnFiltersAdapter: <T extends RowData>({ renderSurface, table, }: ColumnFiltersAdapterProps<T>) => JSX.Element | null;

package/lib/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/columnFiltersAdapter.js

@@ -0,0 +1,24 @@
+import { useCallback } from "react";
+import { CLEAR_ALL, } from "../../../../../../common/entities";
+import { updater } from "../../../../../Table/components/TableFeatures/ColumnFilter/utils";
+import { buildColumnFilters, getColumnFiltersCount } from "./utils";
+export const ColumnFiltersAdapter = ({ renderSurface, table, }) => {
+    const categoryFilters = buildColumnFilters(table);
+    const count = getColumnFiltersCount(table);
+    const onFilter = useCallback((categoryKey, selectedCategoryValue, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- `selected` is not required by TanStack adapter.
+    _selected) => {
+        if (categoryKey === CLEAR_ALL) {
+            table.resetColumnFilters();
+            return;
+        }
+        table
+            .getColumn(categoryKey)
+            ?.setFilterValue(updater(selectedCategoryValue));
+    }, [table]);
+    return renderSurface({
+        categoryFilters,
+        count,
+        onFilter,
+    });
+};

package/lib/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/types.d.ts

@@ -0,0 +1,6 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { SurfaceProps } from "../../../surfaces/types";
+export interface ColumnFiltersAdapterProps<T extends RowData> {
+    renderSurface: (props: SurfaceProps) => JSX.Element | null;
+    table: Table<T>;
+}

package/lib/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/types.js

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

package/lib/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/utils.d.ts

@@ -0,0 +1,14 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { SurfaceProps } from "../../../surfaces/types";
+/**
+ * Adapter for TanStack table column filters to category filters.
+ * @param table - Table.
+ * @returns Category filters.
+ */
+export declare function buildColumnFilters<T extends RowData>(table: Table<T>): SurfaceProps["categoryFilters"];
+/**
+ * Adapter for TanStack table column filters to selected count.
+ * @param table - Table.
+ * @returns Selected count.
+ */
+export declare function getColumnFiltersCount<T extends RowData>(table: Table<T>): number;

package/lib/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/utils.js

@@ -0,0 +1,67 @@
+import { getColumnHeader } from "../../../../../Table/common/utils";
+import { getSortedFacetedValues } from "../../../../../Table/featureOptions/facetedColumn/utils";
+/**
+ * Adapter for TanStack table column filters to category filters.
+ * @param table - Table.
+ * @returns Category filters.
+ */
+export function buildColumnFilters(table) {
+    // Build the category views; single category filter.
+    const categoryViews = table
+        .getAllColumns()
+        .filter((column) => column.getCanFilter())
+        .map(mapColumnToCategoryView);
+    return [{ categoryViews }];
+}
+/**
+ * Adapter for TanStack table column filters to selected count.
+ * @param table - Table.
+ * @returns Selected count.
+ */
+export function getColumnFiltersCount(table) {
+    return table
+        .getState()
+        .columnFilters.reduce((acc, columnFilter) => acc + columnFilter.value.length, 0);
+}
+/**
+ * Adapter for TanStack column to category view.
+ * Currently supports only select category views.
+ * @param column - Column.
+ * @returns Category view.
+ */
+function mapColumnToCategoryView(column) {
+    const facetedUniqueValues = column.getFacetedUniqueValues();
+    const isDisabled = facetedUniqueValues.size === 0;
+    const values = mapColumnToSelectCategoryValueView(column);
+    return {
+        annotation: undefined,
+        enableChartView: false,
+        isDisabled,
+        key: column.id,
+        label: getColumnHeader(column),
+        values,
+    };
+}
+/**
+ * Adapter for TanStack column to select category value view.
+ * @param column - Column.
+ * @returns Select category value view.
+ */
+function mapColumnToSelectCategoryValueView(column) {
+    // Get the faceted unique values and sort them.
+    const facetedUniqueValues = column.getFacetedUniqueValues();
+    const sortedFacetsValues = getSortedFacetedValues(facetedUniqueValues);
+    // Selected values for the column.
+    const filterValue = (column.getFilterValue() || []);
+    // Build the select category values.
+    const selectCategoryValues = [];
+    for (const [label, count] of sortedFacetsValues) {
+        selectCategoryValues.push({
+            count,
+            key: String(label),
+            label: String(label),
+            selected: filterValue.includes(label),
+        });
+    }
+    return selectCategoryValues;
+}

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

@@ -0,0 +1,6 @@
+import { BaseComponentProps } from "../../../../types";
+import { SurfaceProps } from "../../surfaces/types";
+/**
+ * Renders filter title and "Clear All" button.
+ */
+export declare const Controls: ({ className, onFilter, }: BaseComponentProps & Pick<SurfaceProps, "onFilter">) => JSX.Element | null;

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

@@ -0,0 +1,14 @@
+import { Button as MButton, Typography } from "@mui/material";
+import React from "react";
+import { CLEAR_ALL } from "../../../../../common/entities";
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
+import { BUTTON_PROPS } from "../../../../common/Button/constants";
+import { StyledGrid } from "./controls.styles";
+/**
+ * Renders filter title and "Clear All" button.
+ */
+export const Controls = ({ className, onFilter, }) => {
+    return (React.createElement(StyledGrid, { className: className, container: true },
+        React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_LARGE_500 }, "Filters"),
+        React.createElement(MButton, { ...BUTTON_PROPS.PRIMARY_TEXT, onClick: () => onFilter(CLEAR_ALL, undefined, false) }, "Clear All")));
+};

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

@@ -0,0 +1,7 @@
+export declare const StyledGrid: import("@emotion/styled").StyledComponent<import("@mui/material").GridBaseProps & {
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
+} & import("@mui/system").SystemProps<import("@mui/material").Theme> & 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;
+}, "sx" | ("p" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "color" | "fontSize" | "display" | "fontFamily" | "fontStyle" | "fontWeight" | "letterSpacing" | "overflow" | "visibility" | "bgcolor" | "border" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "padding" | "paddingBlock" | "paddingInline" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | keyof import("@mui/material").GridBaseProps> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

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

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+import { Grid } from "@mui/material";
+export const StyledGrid = styled(Grid) `
+  display: grid;
+  gap: 8px 0;
+  grid-template-columns: 1fr auto;
+  margin: 8px 0;
+  padding: 0 16px;
+`;

package/lib/components/Filter/components/surfaces/drawer/Drawer/constants.d.ts

@@ -0,0 +1,2 @@
+import { DrawerProps } from "@mui/material";
+export declare const DRAWER_PROPS: DrawerProps;

package/lib/components/Filter/components/surfaces/drawer/Drawer/constants.js

@@ -0,0 +1,5 @@
+export const DRAWER_PROPS = {
+    closeAfterTransition: true,
+    disableRestoreFocus: true,
+    elevation: 1,
+};

package/lib/components/Filter/components/surfaces/drawer/Drawer/drawer.d.ts

@@ -0,0 +1,2 @@
+import { DrawerProps } from "./types";
+export declare const Drawer: ({ Button, categoryFilters, className, count, onFilter, ...props }: DrawerProps) => JSX.Element | null;

package/lib/components/Filter/components/surfaces/drawer/Drawer/drawer.js

@@ -0,0 +1,17 @@
+import React, { Fragment } from "react";
+import { DrawerProvider } from "../../../../../common/Drawer/provider/provider";
+import { Controls } from "../../../controls/Controls/controls";
+import { Filters } from "../../../Filters/filters";
+import { SURFACE_TYPE } from "../../types";
+import { Button as BaseButton } from "../components/Button/button";
+import { IconButton } from "../components/IconButton/iconButton";
+import { DRAWER_PROPS } from "./constants";
+import { StyledDrawer } from "./drawer.styles";
+export const Drawer = ({ Button = BaseButton, categoryFilters, className, count, onFilter, ...props /* MuiDrawerProps */ }) => {
+    return (React.createElement(DrawerProvider, null, ({ onClose, open }) => (React.createElement(Fragment, null,
+        React.createElement(Button, { count: count }),
+        React.createElement(StyledDrawer, { ...DRAWER_PROPS, className: className, onClose: onClose, open: open, ...props },
+            React.createElement(IconButton, null),
+            React.createElement(Controls, { onFilter: onFilter }),
+            React.createElement(Filters, { categoryFilters: categoryFilters, onFilter: onFilter, surfaceType: SURFACE_TYPE.DRAWER }))))));
+};

package/lib/components/Filter/components/surfaces/drawer/Drawer/drawer.styles.d.ts

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

package/lib/components/Filter/components/surfaces/drawer/Drawer/drawer.styles.js

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+import { Drawer } from "@mui/material";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+export const StyledDrawer = styled(Drawer) `
+  &.MuiDrawer-root {
+    .MuiPaper-root {
+      background-color: ${PALETTE.SMOKE_LIGHT};
+      max-height: 100vh;
+      padding: 16px 0;
+      width: 312px;
+    }
+
+    + .MuiDrawer-root {
+      .MuiBackdrop-root {
+        background-color: transparent;
+      }
+    }
+  }
+`;

package/lib/components/Filter/components/surfaces/drawer/Drawer/types.d.ts

@@ -0,0 +1,7 @@
+import { DrawerProps as MDrawerProps } from "@mui/material";
+import { BaseComponentProps } from "../../../../../types";
+import { SurfaceProps } from "../../types";
+import { Button } from "../components/Button/button";
+export interface DrawerProps extends BaseComponentProps, Omit<MDrawerProps, "children">, SurfaceProps {
+    Button?: typeof Button;
+}

package/lib/components/Filter/components/surfaces/drawer/Drawer/types.js

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

package/lib/components/Filter/components/surfaces/drawer/components/Button/button.d.ts

@@ -0,0 +1,7 @@
+import { ButtonProps } from "@mui/material";
+import { BaseComponentProps } from "../../../../../../types";
+import { FilterCountChipProps } from "../../../../FilterCountChip/types";
+/**
+ * Opens facet-filters drawer.
+ */
+export declare const Button: ({ className, count, ...props }: BaseComponentProps & ButtonProps & Pick<FilterCountChipProps, "count">) => JSX.Element;

package/lib/components/Filter/components/surfaces/drawer/components/Button/button.js

@@ -0,0 +1,16 @@
+import { FilterListRounded } from "@mui/icons-material";
+import { Button as MButton } from "@mui/material";
+import React from "react";
+import { SVG_ICON_PROPS } from "../../../../../../../styles/common/mui/svgIcon";
+import { BUTTON_PROPS } from "../../../../../../common/Button/constants";
+import { useDrawer } from "../../../../../../common/Drawer/provider/hook";
+import { FilterCountChip } from "../../../../FilterCountChip/filterCountChip";
+/**
+ * Opens facet-filters drawer.
+ */
+export const Button = ({ className, count = 0, ...props }) => {
+    const { onOpen } = useDrawer();
+    return (React.createElement(MButton, { ...BUTTON_PROPS.SECONDARY_CONTAINED, className: className, onClick: onOpen, startIcon: React.createElement(FilterListRounded, { color: SVG_ICON_PROPS.COLOR.INK_LIGHT, fontSize: SVG_ICON_PROPS.FONT_SIZE.SMALL }), ...props },
+        "Filter",
+        React.createElement(FilterCountChip, { count: count })));
+};

package/lib/components/Filter/components/surfaces/drawer/components/ButtonBase/buttonBase.d.ts

@@ -0,0 +1,6 @@
+import { ButtonProps } from "@mui/material";
+import { BaseComponentProps } from "../../../../../../types";
+/**
+ * Closes facet-filter drawer.
+ */
+export declare const ButtonBase: ({ children, className, ...props }: BaseComponentProps & ButtonProps) => JSX.Element;

package/lib/components/Filter/components/surfaces/drawer/components/ButtonBase/buttonBase.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { SVG_ICON_PROPS } from "../../../../../../../styles/common/mui/svgIcon";
+import { SouthIcon } from "../../../../../../common/CustomIcon/components/SouthIcon/southIcon";
+import { useDrawer } from "../../../../../../common/Drawer/provider/hook";
+import { StyledButtonBase } from "./buttonBase.styles";
+/**
+ * Closes facet-filter drawer.
+ */
+export const ButtonBase = ({ children, className, ...props }) => {
+    const { onClose } = useDrawer();
+    return (React.createElement(StyledButtonBase, { className: className, onClick: onClose, ...props },
+        React.createElement(SouthIcon, { fontSize: SVG_ICON_PROPS.FONT_SIZE.SMALL }),
+        children));
+};

package/lib/components/Filter/components/surfaces/drawer/components/ButtonBase/buttonBase.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledButtonBase: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonBaseOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | 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<HTMLButtonElement> | null | undefined;
+}, "style" | "className" | "classes" | "children" | "sx" | "tabIndex" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Filter/components/surfaces/drawer/components/ButtonBase/buttonBase.styles.js

@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+import { ButtonBase } from "@mui/material";
+import { textBodyLarge500 } from "../../../../../../../styles/common/mixins/fonts";
+export const StyledButtonBase = styled(ButtonBase) `
+  ${textBodyLarge500}
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  justify-content: flex-start;
+  padding: 12px 16px;
+  width: 100%;
+`;

package/lib/components/Filter/components/surfaces/drawer/components/IconButton/constants.d.ts

@@ -0,0 +1,3 @@
+import { IconButtonProps, SvgIconProps } from "@mui/material";
+export declare const ICON_BUTTON_PROPS: IconButtonProps;
+export declare const SVG_ICON_PROPS: SvgIconProps;

package/lib/components/Filter/components/surfaces/drawer/components/IconButton/constants.js

@@ -0,0 +1,9 @@
+import { ICON_BUTTON_PROPS as MUI_ICON_BUTTON_PROPS } from "../../../../../../../styles/common/mui/iconButton";
+import { SVG_ICON_PROPS as MUI_SVG_ICON_PROPS } from "../../../../../../../styles/common/mui/svgIcon";
+export const ICON_BUTTON_PROPS = {
+    color: MUI_ICON_BUTTON_PROPS.COLOR.INHERIT,
+    size: MUI_ICON_BUTTON_PROPS.SIZE.MEDIUM,
+};
+export const SVG_ICON_PROPS = {
+    fontSize: MUI_SVG_ICON_PROPS.FONT_SIZE.SMALL,
+};

package/lib/components/Filter/components/surfaces/drawer/components/IconButton/iconButton.d.ts

@@ -0,0 +1,6 @@
+import { IconButtonProps } from "@mui/material";
+import { BaseComponentProps } from "../../../../../../types";
+/**
+ * Closes facet-filters drawer.
+ */
+export declare const IconButton: ({ className, ...props }: BaseComponentProps & IconButtonProps) => JSX.Element | null;

package/lib/components/Filter/components/surfaces/drawer/components/IconButton/iconButton.js

@@ -0,0 +1,13 @@
+import { CloseRounded } from "@mui/icons-material";
+import React from "react";
+import { useDrawer } from "../../../../../../common/Drawer/provider/hook";
+import { ICON_BUTTON_PROPS, SVG_ICON_PROPS } from "./constants";
+import { StyledIconButton } from "./iconButton.styles";
+/**
+ * Closes facet-filters drawer.
+ */
+export const IconButton = ({ className, ...props /* MuiIconButtonProps */ }) => {
+    const { onClose } = useDrawer();
+    return (React.createElement(StyledIconButton, { ...ICON_BUTTON_PROPS, className: className, onClick: onClose, ...props },
+        React.createElement(CloseRounded, { ...SVG_ICON_PROPS })));
+};

package/lib/components/Filter/components/surfaces/drawer/components/IconButton/iconButton.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledIconButton: import("@emotion/styled").StyledComponent<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | 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<HTMLButtonElement> | null | undefined;
+}, "style" | "size" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "action" | "loading" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "loadingIndicator" | "edge"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Filter/components/surfaces/drawer/components/IconButton/iconButton.styles.js

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+import { IconButton } from "@mui/material";
+import { PALETTE } from "../../../../../../../styles/common/constants/palette";
+export const StyledIconButton = styled(IconButton) `
+  color: ${PALETTE.COMMON_WHITE};
+  left: calc(100% + 4px);
+  position: absolute;
+  top: 4px;
+`;

package/lib/components/Filter/components/surfaces/types.d.ts

@@ -0,0 +1,11 @@
+import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
+import { CategoryFilter } from "../Filters/filters";
+export interface SurfaceProps {
+    categoryFilters: CategoryFilter[];
+    count?: number;
+    onFilter: OnFilterFn;
+}
+export declare enum SURFACE_TYPE {
+    DRAWER = "DRAWER",
+    MENU = "MENU"
+}

package/lib/components/Filter/components/surfaces/types.js

@@ -0,0 +1,5 @@
+export var SURFACE_TYPE;
+(function (SURFACE_TYPE) {
+    SURFACE_TYPE["DRAWER"] = "DRAWER";
+    SURFACE_TYPE["MENU"] = "MENU";
+})(SURFACE_TYPE || (SURFACE_TYPE = {}));

package/lib/components/Filter/components/views/select/SelectListItem/selectListItem.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SelectListItemProps } from "./types";
+export declare const SelectListItem: React.ForwardRefExoticComponent<SelectListItemProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/Filter/components/views/select/SelectListItem/selectListItem.js

@@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import { Checkbox } from "../components/Checkbox/checkbox";
+import { ListItemButton } from "../components/ListItemButton/listItemButton";
+import { ListItemText } from "../components/ListItemText/listItemText";
+export const SelectListItem = forwardRef(function SelectListItem({ slotProps }, ref) {
+    return (React.createElement(ListItemButton, { ref: ref, ...slotProps.listItemButton },
+        React.createElement(Checkbox, { ...slotProps.checkbox }),
+        React.createElement(ListItemText, { ...slotProps.listItemText })));
+});

package/lib/components/Filter/components/views/select/SelectListItem/types.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps } from "react";
+import { Checkbox } from "../components/Checkbox/checkbox";
+import { ListItemButton } from "../components/ListItemButton/listItemButton";
+import { ListItemText } from "../components/ListItemText/listItemText";
+export interface SelectListItemProps {
+    slotProps: SlotProps;
+}
+export interface SlotProps {
+    checkbox: ComponentProps<typeof Checkbox>;
+    listItemButton: ComponentProps<typeof ListItemButton>;
+    listItemText: ComponentProps<typeof ListItemText>;
+}

package/lib/components/Filter/components/views/select/SelectListItem/types.js

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

package/lib/components/Filter/components/views/select/components/Checkbox/checkbox.d.ts

@@ -0,0 +1,3 @@
+import { CheckboxProps } from "@mui/material";
+import { BaseComponentProps } from "../../../../../../types";
+export declare const Checkbox: ({ className, ...props }: BaseComponentProps & CheckboxProps) => JSX.Element;

package/lib/components/Filter/components/views/select/components/Checkbox/checkbox.js

@@ -0,0 +1,7 @@
+import { Checkbox as MCheckbox } from "@mui/material";
+import React from "react";
+import { CheckedIcon } from "../../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { UncheckedIcon } from "../../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+export const Checkbox = ({ className, ...props /* MuiCheckboxProps */ }) => {
+    return (React.createElement(MCheckbox, { className: className, checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null), ...props }));
+};

package/lib/components/Filter/components/views/select/components/ListItemButton/listItemButton.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { BaseComponentProps, TestIdProps } from "../../../../../../types";
+export declare const ListItemButton: React.ForwardRefExoticComponent<Omit<BaseComponentProps & import("@mui/material").ListItemButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "style" | "className" | "classes" | "children" | "sx" | "tabIndex" | "autoFocus" | "disabled" | "action" | "selected" | "alignItems" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters" | "divider"> & {
+    component?: React.ElementType;
+} & TestIdProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/lib/components/Filter/components/views/select/components/ListItemButton/listItemButton.js

@@ -0,0 +1,5 @@
+import React, { forwardRef } from "react";
+import { StyledListItemButton } from "./listItemButton.styles";
+export const ListItemButton = forwardRef(function ListItemButton({ className, testId, ...props /* MuiListItemButtonProps */ }, ref) {
+    return (React.createElement(StyledListItemButton, { className: className, "data-testid": testId, ref: ref, ...props }));
+});

package/lib/components/Filter/components/views/select/components/ListItemButton/listItemButton.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & 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;
+}, "style" | "className" | "classes" | "children" | "sx" | "tabIndex" | "autoFocus" | "disabled" | "action" | "selected" | "alignItems" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters" | "divider"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Filter/components/views/select/components/ListItemButton/listItemButton.styles.js

@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+import { ListItemButton } from "@mui/material";
+import { PALETTE } from "../../../../../../../styles/common/constants/palette";
+export const StyledListItemButton = styled(ListItemButton) `
+  gap: 8px;
+
+  &.Mui-disabled {
+    color: ${PALETTE.SMOKE_MAIN};
+    opacity: 1;
+  }
+`;

package/lib/components/Filter/components/views/select/components/ListItemText/components/Count/count.d.ts

@@ -0,0 +1,3 @@
+import { TypographyProps } from "@mui/material";
+import { BaseComponentProps, TestIdProps } from "../../../../../../../../types";
+export declare const Count: ({ className, testId, ...props }: BaseComponentProps & TestIdProps & TypographyProps) => JSX.Element;

package/lib/components/Filter/components/views/select/components/ListItemText/components/Count/count.js

@@ -0,0 +1,6 @@
+import { Typography } from "@mui/material";
+import React from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../../../styles/common/mui/typography";
+export const Count = ({ className, testId, ...props /* MuiTypographyProps */ }) => {
+    return (React.createElement(Typography, { className: className, color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, "data-testid": testId, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400, ...props }));
+};

package/lib/components/Filter/components/views/select/components/ListItemText/components/Term/term.d.ts

@@ -0,0 +1,3 @@
+import { TypographyProps } from "@mui/material";
+import { BaseComponentProps, TestIdProps } from "../../../../../../../../types";
+export declare const Term: ({ className, testId, ...props }: BaseComponentProps & TestIdProps & TypographyProps) => JSX.Element;

package/lib/components/Filter/components/views/select/components/ListItemText/components/Term/term.js

@@ -0,0 +1,6 @@
+import { Typography } from "@mui/material";
+import React from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../../../styles/common/mui/typography";
+export const Term = ({ className, testId, ...props /* MuiTypographyProps */ }) => {
+    return (React.createElement(Typography, { className: className, "data-testid": testId, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400, ...props }));
+};

package/lib/components/Filter/components/views/select/components/ListItemText/listItemText.d.ts

@@ -0,0 +1,3 @@
+import { ListItemTextProps } from "@mui/material";
+import { BaseComponentProps } from "../../../../../../types";
+export declare const ListItemText: ({ className, primary, secondary, ...props }: BaseComponentProps & ListItemTextProps) => JSX.Element;

package/lib/components/Filter/components/views/select/components/ListItemText/listItemText.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { isValueString } from "../../../../../../../utils/typeGuards";
+import { Count } from "./components/Count/count";
+import { Term } from "./components/Term/term";
+import { StyledListItemText } from "./listItemText.styles";
+export const ListItemText = ({ className, primary, secondary, ...props /* MuiListItemTextProps */ }) => {
+    return (React.createElement(StyledListItemText, { className: className, disableTypography: true, primary: renderPrimary(primary), secondary: renderSecondary(secondary), ...props }));
+};
+/**
+ * Render the primary prop for the ListItemText component.
+ * Default fallback for "string" values is <Term> component.
+ * @param primary - Primary prop.
+ * @returns primary prop.
+ */
+function renderPrimary(primary) {
+    return isValueString(primary) ? React.createElement(Term, null, primary) : primary;
+}
+/**
+ * Render the secondary prop for the ListItemText component.
+ * Default fallback for "string" values is <Count> component.
+ * @param secondary - Secondary prop.
+ * @returns secondary prop.
+ */
+function renderSecondary(secondary) {
+    return isValueString(secondary) ? React.createElement(Count, null, secondary) : secondary;
+}

package/lib/components/Filter/components/views/select/components/ListItemText/listItemText.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>, import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;