@databiosphere/findable-ui 40.0.0 → 41.0.0

package/src/components/Filter/components/surfaces/types.ts

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

package/src/components/Filter/components/views/select/SelectListItem/selectListItem.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef } from "react";
+import { Checkbox } from "../components/Checkbox/checkbox";
+import { ListItemButton } from "../components/ListItemButton/listItemButton";
+import { ListItemText } from "../components/ListItemText/listItemText";
+import { SelectListItemProps } from "./types";
+
+export const SelectListItem = forwardRef<HTMLDivElement, SelectListItemProps>(
+  function SelectListItem(
+    { slotProps }: SelectListItemProps,
+    ref
+  ): JSX.Element {
+    return (
+      <ListItemButton ref={ref} {...slotProps.listItemButton}>
+        <Checkbox {...slotProps.checkbox} />
+        <ListItemText {...slotProps.listItemText} />
+      </ListItemButton>
+    );
+  }
+);

package/src/components/Filter/components/views/select/SelectListItem/types.ts

@@ -0,0 +1,14 @@
+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/src/components/Filter/components/views/select/components/Checkbox/checkbox.tsx

@@ -0,0 +1,19 @@
+import { CheckboxProps, 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";
+import { BaseComponentProps } from "../../../../../../types";
+
+export const Checkbox = ({
+  className,
+  ...props /* MuiCheckboxProps */
+}: BaseComponentProps & CheckboxProps): JSX.Element => {
+  return (
+    <MCheckbox
+      className={className}
+      checkedIcon={<CheckedIcon />}
+      icon={<UncheckedIcon />}
+      {...props}
+    />
+  );
+};

package/src/components/Filter/components/views/select/components/ListItemButton/listItemButton.styles.ts

@@ -0,0 +1,12 @@
+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/src/components/Filter/components/views/select/components/ListItemButton/listItemButton.tsx

@@ -0,0 +1,25 @@
+import { ListItemButtonProps } from "@mui/material";
+import React, { forwardRef } from "react";
+import { BaseComponentProps, TestIdProps } from "../../../../../../types";
+import { StyledListItemButton } from "./listItemButton.styles";
+
+export const ListItemButton = forwardRef<
+  HTMLDivElement,
+  BaseComponentProps & ListItemButtonProps & TestIdProps
+>(function ListItemButton(
+  {
+    className,
+    testId,
+    ...props /* MuiListItemButtonProps */
+  }: BaseComponentProps & ListItemButtonProps & TestIdProps,
+  ref
+): JSX.Element {
+  return (
+    <StyledListItemButton
+      className={className}
+      data-testid={testId}
+      ref={ref}
+      {...props}
+    />
+  );
+});

package/src/components/Filter/components/views/select/components/ListItemText/components/Count/count.tsx

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

package/src/components/Filter/components/views/select/components/ListItemText/components/Term/term.tsx

@@ -0,0 +1,19 @@
+import { Typography, TypographyProps } from "@mui/material";
+import React from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../../../styles/common/mui/typography";
+import { BaseComponentProps, TestIdProps } from "../../../../../../../../types";
+
+export const Term = ({
+  className,
+  testId,
+  ...props /* MuiTypographyProps */
+}: BaseComponentProps & TestIdProps & TypographyProps): JSX.Element => {
+  return (
+    <Typography
+      className={className}
+      data-testid={testId}
+      variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400}
+      {...props}
+    />
+  );
+};

package/src/components/Filter/components/views/select/components/ListItemText/listItemText.styles.ts

@@ -0,0 +1,13 @@
+import styled from "@emotion/styled";
+import { ListItemText } from "@mui/material";
+
+export const StyledListItemText = styled(ListItemText)`
+  align-items: center;
+  display: grid;
+  gap: 8px;
+  grid-template-columns: 1fr auto;
+
+  > span {
+    min-width: 0; /* required; flexbox child min-width property is "auto" by default making overflow-wrap ineffectual */
+  }
+`;

package/src/components/Filter/components/views/select/components/ListItemText/listItemText.tsx

@@ -0,0 +1,48 @@
+import { ListItemTextProps } from "@mui/material";
+import React from "react";
+import { isValueString } from "../../../../../../../utils/typeGuards";
+import { BaseComponentProps } from "../../../../../../types";
+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 */
+}: BaseComponentProps & ListItemTextProps): JSX.Element => {
+  return (
+    <StyledListItemText
+      className={className}
+      disableTypography
+      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: ListItemTextProps["primary"]
+): ListItemTextProps["primary"] {
+  return isValueString(primary) ? <Term>{primary}</Term> : 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: ListItemTextProps["secondary"]
+): ListItemTextProps["secondary"] {
+  return isValueString(secondary) ? <Count>{secondary}</Count> : secondary;
+}

package/src/components/Table/components/TableFeatures/ColumnFilter/columnFilter.tsx

@@ -1,19 +1,13 @@
-import {
-  Checkbox,
-  Grid,
-  ListItemButton,
-  ListItemText,
-  Typography,
-} from "@mui/material";
+import { Grid, Typography } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
-import React, { Fragment } from "react";
+import React, { Fragment, useCallback } from "react";
 import { SVG_ICON_PROPS } from "../../../../../styles/common/mui/svgIcon";
 import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
-import { CheckedIcon } from "../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
-import { UncheckedIcon } from "../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
 import { DropDownIcon } from "../../../../common/Form/components/Select/components/DropDownIcon/dropDownIcon";
 import { useMenu } from "../../../../common/Menu/hooks/useMenu";
 import { FilterCountChip } from "../../../../Filter/components/FilterCountChip/filterCountChip";
+import { ListItemButton } from "../../../../Filter/components/views/select/components/ListItemButton/listItemButton";
+import { SelectListItem } from "../../../../Filter/components/views/select/SelectListItem/selectListItem";
 import { getColumnHeader } from "../../../common/utils";
 import { getSortedFacetedValues } from "../../../featureOptions/facetedColumn/utils";
 import { StyledButton, StyledMenu } from "./columnFilter.styles";
@@ -33,13 +27,26 @@ export const ColumnFilter = <T extends RowData>({
   ...props /* MuiMenuProps */
 }: ColumnFilterProps<T>): JSX.Element => {
   const { anchorEl, onClose, onOpen, open } = useMenu();
+
+  // Grab the unique values for the column.
   const facetedUniqueValues = column.getFacetedUniqueValues();
+
+  // Sort the values.
   const sortedValues = getSortedFacetedValues(facetedUniqueValues);
+
+  // Get the filter values.
   const filterValue = (column.getFilterValue() || []) as unknown[];
+
+  const onFilter = useCallback(
+    (value: unknown) => {
+      column.setFilterValue(updater(value));
+    },
+    [column]
+  );
+
   return (
     <Fragment>
       <Button
-        key={column.id}
         disabled={sortedValues.length === 0}
         endIcon={<DropDownIcon color={SVG_ICON_PROPS.COLOR.INK_LIGHT} />}
         onClick={onOpen}
@@ -58,31 +65,23 @@ export const ColumnFilter = <T extends RowData>({
         onClose={onClose}
         open={open}
       >
-        {sortedValues.map(([value, occurrence]) => (
-          <ListItemButton
-            key={String(value)}
-            selected={filterValue.includes(value)}
-            onClick={() => column.setFilterValue(updater(value))}
-          >
-            <Checkbox
-              checked={filterValue.includes(value)}
-              checkedIcon={<CheckedIcon />}
-              icon={<UncheckedIcon />}
-            />
-            <ListItemText
-              disableTypography
-              primary={<span>{String(value)}</span>}
-              secondary={
-                <Typography
-                  color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
-                  variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400}
-                >
-                  {occurrence}
-                </Typography>
-              }
+        {sortedValues.map(([value, occurrence]) => {
+          const checked = filterValue.includes(value);
+          const onClick = (): void => onFilter(value);
+          const primary = String(value);
+          const secondary = String(occurrence);
+          const selected = checked;
+          return (
+            <SelectListItem
+              key={primary}
+              slotProps={{
+                checkbox: { checked },
+                listItemButton: { onClick, selected },
+                listItemText: { primary, secondary },
+              }}
             />
-          </ListItemButton>
-        ))}
+          );
+        })}
         <ListItemButton
           disabled={!column.getIsFiltered()}
           onClick={() => column.setFilterValue(undefined)}

package/src/components/Table/components/TableFeatures/ColumnFilter/constants.ts

@@ -12,8 +12,13 @@ export const MENU_PROPS: Omit<MenuProps, "anchorEl" | "onClose" | "open"> = {
     horizontal: "right",
     vertical: "bottom",
   },
+  /* Prevents the browser from auto‑focusing the menu on open, which can trigger a scrollIntoView jump when the viewport has `scroll-padding-top` (e.g., on <html>). */
+  disableAutoFocus: true,
+  /* Skips restoring focus to the trigger on close to avoid a similar scroll adjustment with `scroll-padding-top`. */
+  disableRestoreFocus: true,
   marginThreshold: 8,
   slotProps: {
+    list: { component: "div" },
     paper: { variant: "menu" },
   },
   transformOrigin: {

package/src/components/common/Button/constants.ts

@@ -16,6 +16,10 @@ export const BUTTON_PROPS: Record<string, Partial<ButtonOwnProps>> = {
     size: MUI_BUTTON_PROPS.SIZE.MEDIUM,
     variant: MUI_BUTTON_PROPS.VARIANT.CONTAINED,
   },
+  PRIMARY_TEXT: {
+    color: MUI_BUTTON_PROPS.COLOR.PRIMARY,
+    variant: MUI_BUTTON_PROPS.VARIANT.TEXT,
+  },
   SECONDARY_CONTAINED: {
     color: MUI_BUTTON_PROPS.COLOR.SECONDARY,
     variant: MUI_BUTTON_PROPS.VARIANT.CONTAINED,

package/src/components/common/Drawer/provider/provider.tsx

@@ -1,12 +1,9 @@
-import React, { ReactNode, useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { DrawerContext } from "./context";
+import { DrawerProviderProps } from "./types";
 
-export function DrawerProvider({
-  children,
-}: {
-  children: ReactNode | ReactNode[];
-}): JSX.Element {
-  const [open, setOpen] = useState(false);
+export function DrawerProvider({ children }: DrawerProviderProps): JSX.Element {
+  const [open, setOpen] = useState<boolean>(false);
 
   const onClose = useCallback(() => setOpen(false), []);
 
@@ -14,7 +11,9 @@ export function DrawerProvider({
 
   return (
     <DrawerContext.Provider value={{ onClose, onOpen, open }}>
-      {children}
+      {typeof children === "function"
+        ? children({ onClose, onOpen, open })
+        : children}
     </DrawerContext.Provider>
   );
 }

package/src/components/common/Drawer/provider/types.ts

@@ -1,10 +1,12 @@
 import { DrawerProps } from "@mui/material";
+import { ReactNode } from "react";
 
-export type DrawerContextProps = Omit<
-  DrawerProps,
-  "onClose" | "onOpen" | "open"
-> & {
+export type DrawerContextProps = Omit<DrawerProps, "onClose"> & {
   onClose: () => void;
   onOpen: () => void;
   open: boolean;
 };
+
+export type DrawerProviderProps = {
+  children: ReactNode | ((props: DrawerContextProps) => ReactNode);
+};

package/src/hooks/useCategoryFilter.ts

@@ -10,6 +10,7 @@ import { COLLATOR_CASE_INSENSITIVE } from "../common/constants";
 import {
   CategoryKey,
   CategoryValueKey,
+  ClearAll,
   Filters,
   SelectCategory,
   SelectCategoryValue,
@@ -27,7 +28,7 @@ export type FilterState = Filters;
  * Function invoked when selected state of a category value is toggled or range is selected.
  */
 export type OnFilterFn = (
-  categoryKey: CategoryKey,
+  categoryKey: CategoryKey | ClearAll,
   selectedCategoryValue: CategoryValueKey,
   selected: boolean,
   categorySection?: string,

package/src/styles/common/mixins/breakpoints.ts

@@ -1,6 +1,12 @@
 import { DESKTOP, DESKTOP_SM, TABLET } from "../../../theme/common/breakpoints";
 import { ThemeProps } from "../../../theme/theme";
 
+export const bpDown820 = ({ theme }: ThemeProps): string =>
+  theme.breakpoints.down(820);
+
+export const bpDown1024 = ({ theme }: ThemeProps): string =>
+  theme.breakpoints.down(1024);
+
 export const mediaDesktopSmallDown = ({ theme }: ThemeProps): string =>
   theme.breakpoints.down(DESKTOP_SM);
 

package/src/styles/common/mui/typography.ts

@@ -18,11 +18,13 @@ const VARIANT: Record<string, TypographyOwnProps["variant"]> = {
   TEXT_BODY_400: "text-body-400",
   TEXT_BODY_400_2_LINES: "text-body-400-2lines",
   TEXT_BODY_500: "text-body-500",
+  TEXT_BODY_LARGE_500: "text-body-large-500",
   TEXT_BODY_SMALL_400: "text-body-small-400",
   TEXT_BODY_SMALL_500: "text-body-small-500",
   TEXT_HEADING_LARGE: "text-heading-large",
   TEXT_HEADING_SMALL: "text-heading-small",
   TEXT_HEADING_XSMALL: "text-heading-xsmall",
+  TEXT_UPPERCASE_500: "text-uppercase-500",
 };
 
 export const TYPOGRAPHY_PROPS: TypographyPropsOptions = {

package/src/utils/typeGuards.ts

@@ -0,0 +1,8 @@
+/**
+ * Returns true if the value is a string, false otherwise.
+ * @param value - Value.
+ * @returns true if the value is a string, false otherwise.
+ */
+export function isValueString(value: unknown): value is string {
+  return typeof value === "string";
+}

package/src/views/ExploreView/exploreView.tsx

@@ -11,12 +11,14 @@ import {
   Filters,
 } from "../../components/Filter/components/Filters/filters";
 import { SearchAllFilters } from "../../components/Filter/components/SearchAllFilters/searchAllFilters";
+import { SURFACE_TYPE } from "../../components/Filter/components/surfaces/types";
 import { Index as IndexView } from "../../components/Index/index";
 import { SidebarLabel } from "../../components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel";
 import { SidebarTools } from "../../components/Layout/components/Sidebar/components/SidebarTools/sidebarTools.styles";
 import { Sidebar } from "../../components/Layout/components/Sidebar/sidebar";
 import { CategoryGroup } from "../../config/entities";
 import { useStateSyncManager } from "../../hooks/stateSyncManager/hook";
+import { useBreakpoint } from "../../hooks/useBreakpoint";
 import { useConfig } from "../../hooks/useConfig";
 import { useEntityList } from "../../hooks/useEntityList";
 import { useExploreState } from "../../hooks/useExploreState";
@@ -33,6 +35,7 @@ export interface ExploreViewProps extends AzulEntitiesStaticResponse {
 }
 
 export const ExploreView = (props: ExploreViewProps): JSX.Element => {
+  const { mdDown } = useBreakpoint();
   const { config, entityConfig } = useConfig(); // Get app level config.
   const { exploreDispatch, exploreState } = useExploreState(); // Get the useReducer state and dispatch for "Explore".
   const { trackingConfig } = config;
@@ -137,6 +140,7 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
           <Filters
             categoryFilters={categoryFilters}
             onFilter={onFilterChange.bind(null, false)}
+            surfaceType={mdDown ? SURFACE_TYPE.DRAWER : SURFACE_TYPE.MENU}
             trackFilterOpened={trackingConfig?.trackFilterOpened}
           />
         </Sidebar>