@databiosphere/findable-ui 42.1.0 → 43.0.0

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

@@ -1,17 +1,48 @@
+import { isRangeCategoryConfig } from "../../../../../../common/categories/config/range/typeGuards";
 import { getColumnHeader } from "../../../../../Table/common/utils";
 import { getSortedFacetedValues } from "../../../../../Table/featureOptions/facetedColumn/utils";
+/**
+ * Adapter for TanStack table to category configs.
+ * @param table - Table.
+ * @returns Category configs.
+ */
+function buildCategoryConfigs(table) {
+    return table
+        .getAllColumns()
+        .filter((column) => column.getCanFilter())
+        .map(mapCategoryConfig);
+}
+/**
+ * Adapter for TanStack table to category filters.
+ * @param table - Table.
+ * @param categoryGroups - Category groups.
+ * @returns Category filters.
+ */
+function buildCategoryFilters(table, categoryGroups) {
+    return categoryGroups.reduce((acc, categoryGroup) => {
+        const categoryFilter = mapCategoryFilter(table, categoryGroup);
+        if (categoryFilter)
+            acc.push(categoryFilter);
+        return acc;
+    }, []);
+}
 /**
  * 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 }];
+    const { options } = table;
+    const { meta = {} } = options;
+    const { categoryGroups } = meta;
+    if (!categoryGroups) {
+        // Build single category group with all (filterable) columns.
+        const categoryConfigs = buildCategoryConfigs(table);
+        // Build category filters from single category group.
+        return buildCategoryFilters(table, [{ categoryConfigs, label: "" }]);
+    }
+    // Build category filters from category groups.
+    return buildCategoryFilters(table, categoryGroups);
 }
 /**
  * Adapter for TanStack table column filters to selected count.
@@ -24,12 +55,75 @@ export function getColumnFiltersCount(table) {
         .columnFilters.reduce((acc, columnFilter) => acc + columnFilter.value.length, 0);
 }
 /**
- * Adapter for TanStack column to category view.
- * Currently supports only select category views.
+ * Adapter for TanStack column to category config.
+ * @param column - Column.
+ * @returns Category config.
+ */
+function mapCategoryConfig(column) {
+    return {
+        key: column.id,
+        label: getColumnHeader(column),
+    };
+}
+/**
+ * Adapter for TanStack table to category filter.
+ * @param table - Table.
+ * @param categoryGroup - Category group.
+ * @returns Category filter.
+ */
+function mapCategoryFilter(table, categoryGroup) {
+    const { categoryConfigs, label } = categoryGroup;
+    const categoryViews = categoryConfigs.reduce((acc, categoryConfig) => {
+        const column = table.getColumn(categoryConfig.key);
+        if (!column)
+            return acc;
+        if (!column.getCanFilter())
+            return acc;
+        let categoryView;
+        if (isRangeCategoryConfig(categoryConfig)) {
+            // Build range category view.
+            categoryView = mapColumnToRangeCategoryView(column, categoryConfig);
+        }
+        else {
+            // Build select category view.
+            categoryView = mapColumnToSelectCategoryView(column, categoryConfig);
+        }
+        return [...acc, categoryView];
+    }, []);
+    if (categoryViews.length === 0)
+        return;
+    return { categoryViews, label };
+}
+/**
+ * Adapter for TanStack column to range category view.
+ * @param column - Column.
+ * @param categoryConfig - Category config.
+ * @returns Range category view.
+ */
+function mapColumnToRangeCategoryView(column, categoryConfig) {
+    const minMax = column.getFacetedMinMaxValues();
+    const isDisabled = !minMax;
+    // Selected values for the column.
+    const filterValue = (column.getFilterValue() || [null, null]);
+    return {
+        annotation: undefined,
+        isDisabled,
+        key: column.id,
+        label: getColumnHeader(column),
+        max: minMax?.[1] || Infinity,
+        min: minMax?.[0] || -Infinity,
+        selectedMax: filterValue[1],
+        selectedMin: filterValue[0],
+        ...categoryConfig,
+    };
+}
+/**
+ * Adapter for TanStack column to select category view.
  * @param column - Column.
- * @returns Category view.
+ * @param categoryConfig - Category config.
+ * @returns Select category view.
  */
-function mapColumnToCategoryView(column) {
+function mapColumnToSelectCategoryView(column, categoryConfig) {
     const facetedUniqueValues = column.getFacetedUniqueValues();
     const isDisabled = facetedUniqueValues.size === 0;
     const values = mapColumnToSelectCategoryValueView(column);
@@ -40,6 +134,7 @@ function mapColumnToCategoryView(column) {
         key: column.id,
         label: getColumnHeader(column),
         values,
+        ...categoryConfig,
     };
 }
 /**

package/lib/components/Filter/components/surfaces/popper/Popper/popper.styles.d.ts

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

package/lib/components/Filter/components/surfaces/popper/Popper/popper.styles.js

@@ -0,0 +1,18 @@
+import styled from "@emotion/styled";
+import { Popper } from "@mui/material";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+export const StyledPopper = styled(Popper) `
+  .MuiPaper-root {
+    width: 368px;
+  }
+`;
+export const StyledPopperDrawer = styled(Popper) `
+  .MuiPaper-root {
+    background-color: ${PALETTE.SMOKE_LIGHT};
+    width: 312px;
+
+    .MuiList-root {
+      margin: 0;
+    }
+  }
+`;

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

@@ -7,5 +7,7 @@ export interface SurfaceProps {
 }
 export declare enum SURFACE_TYPE {
     DRAWER = "DRAWER",
-    MENU = "MENU"
+    MENU = "MENU",
+    POPPER_DRAWER = "POPPER_DRAWER",
+    POPPER_MENU = "POPPER_MENU"
 }

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

@@ -2,4 +2,6 @@ export var SURFACE_TYPE;
 (function (SURFACE_TYPE) {
     SURFACE_TYPE["DRAWER"] = "DRAWER";
     SURFACE_TYPE["MENU"] = "MENU";
+    SURFACE_TYPE["POPPER_DRAWER"] = "POPPER_DRAWER";
+    SURFACE_TYPE["POPPER_MENU"] = "POPPER_MENU";
 })(SURFACE_TYPE || (SURFACE_TYPE = {}));

package/lib/styles/common/mui/textField.d.ts

@@ -0,0 +1,11 @@
+import { TextFieldProps } from "@mui/material";
+type TextFieldPropsOptions = {
+    COLOR: typeof COLOR;
+    SIZE: typeof SIZE;
+    VARIANT: typeof VARIANT;
+};
+declare const COLOR: Record<string, TextFieldProps["color"]>;
+declare const SIZE: Record<string, TextFieldProps["size"]>;
+declare const VARIANT: Record<string, TextFieldProps["variant"]>;
+export declare const TEXT_FIELD_PROPS: TextFieldPropsOptions;
+export {};

package/lib/styles/common/mui/textField.js

@@ -0,0 +1,22 @@
+const COLOR = {
+    ERROR: "error",
+    INFO: "info",
+    PRIMARY: "primary",
+    SECONDARY: "secondary",
+    SUCCESS: "success",
+    WARNING: "warning",
+};
+const SIZE = {
+    MEDIUM: "medium",
+    SMALL: "small",
+};
+const VARIANT = {
+    FILLED: "filled",
+    OUTLINED: "outlined",
+    STANDARD: "standard",
+};
+export const TEXT_FIELD_PROPS = {
+    COLOR,
+    SIZE,
+    VARIANT,
+};

package/lib/views/ExploreView/exploreView.js

@@ -99,7 +99,7 @@ export const ExploreView = (props) => {
             React.createElement(SidebarTools, { "data-testid": TEST_IDS.FILTER_CONTROLS },
                 React.createElement(SidebarLabel, { label: "Filters" }),
                 React.createElement(ClearAllFilters, null),
-                React.createElement(SearchAllFilters, { categoryViews: categoryViews, onFilter: onFilterChange.bind(null, true) })),
+                React.createElement(SearchAllFilters, { categoryViews: categoryViews, onFilter: onFilterChange.bind(null, true), surfaceType: mdDown ? SURFACE_TYPE.POPPER_DRAWER : SURFACE_TYPE.POPPER_MENU })),
             React.createElement(Filters, { categoryFilters: categoryFilters, onFilter: onFilterChange.bind(null, false), surfaceType: mdDown ? SURFACE_TYPE.DRAWER : SURFACE_TYPE.MENU, trackFilterOpened: trackingConfig?.trackFilterOpened }))),
         React.createElement(IndexView, { className: props.className, categoryFilters: categoryFilters, entityListType: entityListType, entityName: label, loading: loading })));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "42.1.0",
+  "version": "43.0.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/common/categories/config/range/typeGuards.ts

@@ -0,0 +1,14 @@
+import { RangeCategoryView } from "../../views/range/types";
+import { VIEW_KIND } from "../../views/types";
+import { CategoryConfig } from "../types";
+
+/**
+ * Determine if the given category config is a range category.
+ * @param categoryConfig - Category config.
+ * @returns True if the category config is a range category, false otherwise.
+ */
+export function isRangeCategoryConfig(
+  categoryConfig: CategoryConfig
+): categoryConfig is RangeCategoryView {
+  return categoryConfig.viewKind === VIEW_KIND.RANGE;
+}

package/src/components/Filter/components/SearchAllFilters/common/constants.ts

@@ -1,55 +1,42 @@
-import { PaperProps, PopperProps } from "@mui/material";
+import { AutocompleteProps, PaperProps, PopperProps } from "@mui/material";
 import { DividerItem, ITEM_TYPE, NoResultsItem } from "./entites";
 
 export const DEFAULT_LIST_HEIGHT = 0;
 
 export const DIVIDER_HEIGHT = 17;
 
-export const DEFAULT_PAPER_PROPS: Partial<PaperProps> = {
-  sx: {
-    width: 368,
-  },
-  variant: "menu",
-};
-export const DEFAULT_POPPER_PROPS: Partial<PopperProps> = {
-  modifiers: [
-    {
-      name: "offset",
-      options: {
-        offset: [0, 8],
-      },
-    },
-  ],
+const POPPER_MENU_PAPER_PROPS: Partial<PaperProps> = { variant: "menu" };
+
+const POPPER_MENU_POPPER_PROPS: Partial<PopperProps> = {
+  modifiers: [{ name: "offset", options: { offset: [0, 8] } }],
   placement: "bottom-start",
 };
 
-export const DEFAULT_SLOT_PROPS = {
-  paper: DEFAULT_PAPER_PROPS,
-  popper: DEFAULT_POPPER_PROPS,
+export const POPPER_MENU_SLOT_PROPS: AutocompleteProps<
+  string,
+  false,
+  false,
+  true
+>["slotProps"] = {
+  paper: POPPER_MENU_PAPER_PROPS,
+  popper: POPPER_MENU_POPPER_PROPS,
 };
 
-export const DRAWER_PAPER_PROPS: Partial<PaperProps> = {
-  elevation: 0,
-  sx: {
-    width: 312,
-  },
-};
+const POPPER_DRAWER_PAPER_PROPS: Partial<PaperProps> = { elevation: 0 };
 
-export const DRAWER_POPPER_PROPS: Partial<PopperProps> = {
-  modifiers: [
-    {
-      name: "offset",
-      options: {
-        offset: [-16, 8],
-      },
-    },
-  ],
+const POPPER_DRAWER_POPPER_PROPS: Partial<PopperProps> = {
+  modifiers: [{ name: "offset", options: { offset: [-16, 8] } }],
   popperOptions: { strategy: "absolute" },
 };
 
-export const DRAWER_SLOT_PROPS = {
-  paper: DRAWER_PAPER_PROPS,
-  popper: DRAWER_POPPER_PROPS,
+export const POPPER_DRAWER_SLOT_PROPS: AutocompleteProps<
+  string,
+  false,
+  false,
+  true
+>["slotProps"] = {
+  paper: POPPER_DRAWER_PAPER_PROPS,
+  popper: POPPER_DRAWER_POPPER_PROPS,
 };
 
 export const DIVIDER_ITEM: DividerItem = {

package/src/components/Filter/components/SearchAllFilters/components/OutlinedInput/constants.ts

@@ -0,0 +1,9 @@
+import { OutlinedInputProps } from "@mui/material";
+import { TEXT_FIELD_PROPS as MUI_TEXT_FIELD_PROPS } from "../../../../../../styles/common/mui/textField";
+
+export const TEXT_FIELD_PROPS: OutlinedInputProps = {
+  color: MUI_TEXT_FIELD_PROPS.COLOR.SECONDARY,
+  fullWidth: true,
+  placeholder: "Search all filters...",
+  size: MUI_TEXT_FIELD_PROPS.SIZE.SMALL,
+};

package/src/components/Filter/components/SearchAllFilters/components/OutlinedInput/outlinedInput.tsx

@@ -0,0 +1,31 @@
+import { AutocompleteRenderInputParams } from "@mui/material";
+import React from "react";
+import { ClearInputAdornment } from "../../../../../common/OutlinedInput/components/InputAdornment/components/ClearInputAdornment/clearInputAdornment";
+import { SearchInputAdornment } from "../../../../../common/OutlinedInput/components/InputAdornment/components/SearchInputAdornment/searchInputAdornment";
+import { StyledOutlinedInput } from "../../../../../common/OutlinedInput/outlinedInput.styles";
+import { useAutocomplete } from "../../context/hook";
+import { TEXT_FIELD_PROPS } from "./constants";
+import { isButtonIn } from "./utils";
+
+export const OutlinedInput = (
+  props: AutocompleteRenderInputParams
+): JSX.Element => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Intended behavior, destructure InputLabelProps, as they are not used on the component.
+  const { InputLabelProps, InputProps, ...outlinedInputProps } = props;
+  const { onClear, open, searchTerm, surfaceType } = useAutocomplete();
+  return (
+    <StyledOutlinedInput
+      {...TEXT_FIELD_PROPS}
+      {...InputProps}
+      {...outlinedInputProps}
+      endAdornment={
+        <ClearInputAdornment
+          in={isButtonIn(surfaceType, searchTerm, open)}
+          onClick={onClear}
+        />
+      }
+      hasValue={!!searchTerm}
+      startAdornment={<SearchInputAdornment />}
+    />
+  );
+};

package/src/components/Filter/components/SearchAllFilters/components/OutlinedInput/utils.ts

@@ -0,0 +1,22 @@
+import { SURFACE_TYPE } from "../../../surfaces/types";
+
+/**
+ * Returns true if the clear button should display.
+ * Displays always for popper drawer surface type when open.
+ * Displays when there is a search term for other surface types when open.
+ * @param surfaceType - Surface type.
+ * @param searchTerm - Search term.
+ * @param open - Autocomplete open state.
+ * @returns True if the clear button should display.
+ */
+export function isButtonIn(
+  surfaceType: SURFACE_TYPE,
+  searchTerm: string,
+  open: boolean
+): boolean {
+  if (!open) return false;
+
+  if (surfaceType === SURFACE_TYPE.POPPER_DRAWER) return true;
+
+  return !!searchTerm;
+}

package/src/components/Filter/components/SearchAllFilters/components/VariableSizeList/VariableSizeList.tsx

@@ -15,10 +15,6 @@ import {
   VariableSizeListProps as ListProps,
 } from "react-window";
 import { SelectCategoryView } from "../../../../../../common/entities";
-import {
-  BREAKPOINT_FN_NAME,
-  useBreakpointHelper,
-} from "../../../../../../hooks/useBreakpointHelper";
 import { OnFilterFn } from "../../../../../../hooks/useCategoryFilter";
 import { useWindowResize } from "../../../../../../hooks/useWindowResize";
 import {
@@ -29,6 +25,7 @@ import {
 } from "../../../../common/constants";
 import { getSortMatchesFn } from "../../../../common/utils";
 import { StyledList } from "../../../FilterList/filterList.styles";
+import { SURFACE_TYPE } from "../../../surfaces/types";
 import {
   DIVIDER_HEIGHT,
   DIVIDER_ITEM,
@@ -51,6 +48,7 @@ export interface VariableSizeListProps {
   overscanCount?: ListProps["overscanCount"];
   searchTerm: string;
   selectCategoryViews: SelectCategoryView[];
+  surfaceType: SURFACE_TYPE;
   width?: ListProps["width"]; // Width of list; default to 100% width of parent element.
 }
 
@@ -125,13 +123,13 @@ export const VariableSizeList = forwardRef<
     overscanCount = MAX_DISPLAYABLE_LIST_ITEMS * 2,
     searchTerm,
     selectCategoryViews,
+    surfaceType,
     width = "100%",
   }: VariableSizeListProps,
   autocompleteListRef
 ): JSX.Element {
   const filteredItems = applyMenuFilter(selectCategoryViews, searchTerm);
   let resizeRequired = true;
-  const bpDownMd = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "md");
   const { height: windowHeight } = useWindowResize();
   const [height, setHeight] = useState<number>(initHeight);
   const itemSizeByItemKeyRef = useRef<ItemSizeByItemKey>(new Map());
@@ -153,10 +151,10 @@ export const VariableSizeList = forwardRef<
           outerRef.current,
           innerRef.current,
           windowHeight,
-          bpDownMd
+          surfaceType
         )
       );
-  }, [bpDownMd, windowHeight]);
+  }, [surfaceType, windowHeight]);
 
   // Clears VariableSizeList cache (offsets and measurements) when values are updated (filtered).
   // Facilitates correct positioning of list items when list is updated.
@@ -198,7 +196,7 @@ export const VariableSizeList = forwardRef<
                   outerRef.current,
                   innerRef.current,
                   windowHeight,
-                  bpDownMd
+                  surfaceType
                 )
               );
             }
@@ -266,20 +264,21 @@ function applyMenuFilter(
  * @param outerListElem - Outer list element to reference list position from.
  * @param innerListElem - Element containing list items.
  * @param windowHeight - Window height.
- * @param bpDownMd - True if viewport is "md" or smaller.
+ * @param surfaceType - Type of surface "POPPER_MENU" or "POPPER_DRAWER".
  * @returns calculated height.
  */
 function calculateListHeight(
   outerListElem: HTMLDivElement,
   innerListElem: HTMLUListElement,
   windowHeight: number,
-  bpDownMd: boolean
+  surfaceType: SURFACE_TYPE
 ): number {
   // Calculate max possible list height, based on window height and top position of the list element.
   const maxHeight = windowHeight - outerListElem.getBoundingClientRect().top;
-  if (bpDownMd) {
-    return maxHeight;
-  }
+
+  // Return the maximum possible height if the list is in a popper drawer.
+  if (surfaceType === SURFACE_TYPE.POPPER_DRAWER) return maxHeight;
+
   // Grab the first and last element in the list.
   const { firstElementChild: firstListEl, lastElementChild: lastListEl } =
     innerListElem;

package/src/components/Filter/components/SearchAllFilters/context/context.ts

@@ -0,0 +1,12 @@
+import { createContext } from "react";
+import { SURFACE_TYPE } from "../../surfaces/types";
+import { AutocompleteContextProps } from "./types";
+
+export const AutocompleteContext = createContext<AutocompleteContextProps>({
+  onClear: (): void => undefined,
+  onFilter: (): void => undefined,
+  open: false,
+  searchTerm: "",
+  selectCategoryViews: [],
+  surfaceType: SURFACE_TYPE.POPPER_MENU,
+});

package/src/components/Filter/components/SearchAllFilters/context/hook.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { AutocompleteContext } from "./context";
+import { AutocompleteContextProps } from "./types";
+
+/**
+ * Returns autocomplete context.
+ * @returns autocomplete context.
+ */
+export const useAutocomplete = (): AutocompleteContextProps => {
+  return useContext(AutocompleteContext);
+};

package/src/components/Filter/components/SearchAllFilters/context/types.ts

@@ -0,0 +1,12 @@
+import { SelectCategoryView } from "../../../../../common/entities";
+import { OnFilterFn } from "../../../../../hooks/useCategoryFilter";
+import { SURFACE_TYPE } from "../../surfaces/types";
+
+export interface AutocompleteContextProps {
+  onClear: () => void;
+  onFilter: OnFilterFn;
+  open: boolean;
+  searchTerm: string;
+  selectCategoryViews: SelectCategoryView[];
+  surfaceType: SURFACE_TYPE;
+}

package/src/components/Filter/components/SearchAllFilters/searchAllFilters.styles.ts

@@ -1,15 +1,14 @@
 import styled from "@emotion/styled";
-import { Autocomplete as MAutocomplete } from "@mui/material";
-import { PALETTE } from "../../../../styles/common/constants/palette";
+import { Autocomplete } from "@mui/material";
 
-export const Autocomplete = styled(MAutocomplete)`
-  &.Mui-expanded {
+export const StyledAutocomplete = styled(Autocomplete)`
+  &.MuiAutocomplete-root {
     .MuiOutlinedInput-root {
-      .MuiIconButton-root {
-        .MuiSvgIcon-root {
-          color: ${PALETTE.INK_MAIN};
-        }
+      padding: 0 12px;
+
+      .MuiAutocomplete-input {
+        padding: 10px 0;
       }
     }
   }
-` as typeof MAutocomplete;
+` as typeof Autocomplete;