add FilterProvider, FilterPillNext etc

Author: heswell

vuu-ui/packages/vuu-filter-types/index.d.ts

@@ -89,3 +89,5 @@ export declare type FilterState = {
   filters: Filter[];
   activeIndices: number[];
 };
+
+export declare type FilterChangeHandler = (filter: Filter | undefined) => void;

vuu-ui/packages/vuu-filters/src/filter-pill/FilterMenu.tsx

@@ -0,0 +1,93 @@
+import { Menu, MenuItem, MenuPanel, MenuProps } from "@salt-ds/core";
+import { ReactElement, useMemo } from "react";
+
+export type FilterPermissions = {
+  /** Closing a filter removes it from current display, without deleting*/
+  allowClose?: boolean;
+  /** Edit the details of the filter itself */
+  allowEdit?: boolean;
+  /** Rename the filter */
+  allowRename?: boolean;
+  /** Removing a filter deletes it entirely */
+  allowRemove?: boolean;
+};
+
+const defaultPermissions: FilterPermissions = {
+  allowClose: true,
+  allowEdit: true,
+  allowRename: true,
+  allowRemove: true,
+};
+
+export interface FilterMenuProps
+  extends Pick<MenuProps, "getVirtualElement" | "onOpenChange" | "open"> {
+  filterId: string;
+  onMenuAction: FilterMenuActionHandler;
+  permissions?: FilterPermissions;
+}
+
+export type FilterAction = "close" | "remove" | "edit" | "rename";
+
+export type FilterMenuActionHandler = <T extends FilterAction = FilterAction>(
+  filterId: string,
+  filterAction: T,
+) => void;
+
+export const FilterMenu = ({
+  filterId,
+  getVirtualElement,
+  onMenuAction,
+  onOpenChange,
+  open,
+  permissions = defaultPermissions,
+}: FilterMenuProps) => {
+  const {
+    allowClose = defaultPermissions.allowClose,
+    allowEdit = defaultPermissions.allowEdit,
+    allowRename = defaultPermissions.allowRename,
+    allowRemove = defaultPermissions.allowRemove,
+  } = permissions;
+
+  const menuItems = useMemo<ReactElement[]>(() => {
+    const items: ReactElement[] = [];
+    if (allowClose) {
+      items.push(
+        <MenuItem key="close" onClick={() => onMenuAction(filterId, "close")}>
+          Close
+        </MenuItem>,
+      );
+    }
+    if (allowEdit) {
+      items.push(
+        <MenuItem key="edit" onClick={() => onMenuAction(filterId, "edit")}>
+          Edit Filter
+        </MenuItem>,
+      );
+    }
+    if (allowRename) {
+      items.push(
+        <MenuItem key="rename" onClick={() => onMenuAction(filterId, "rename")}>
+          Rename
+        </MenuItem>,
+      );
+    }
+    if (allowRemove) {
+      items.push(
+        <MenuItem key="delete" onClick={() => onMenuAction(filterId, "remove")}>
+          Delete
+        </MenuItem>,
+      );
+    }
+
+    return items;
+  }, [allowClose, allowEdit, allowRemove, allowRename, filterId, onMenuAction]);
+  return (
+    <Menu
+      getVirtualElement={getVirtualElement}
+      open={open}
+      onOpenChange={onOpenChange}
+    >
+      <MenuPanel>{menuItems}</MenuPanel>
+    </Menu>
+  );
+};

vuu-ui/packages/vuu-filters/src/filter-pill/FilterPill.tsx

@@ -26,7 +26,7 @@ import {
   renameCommand,
 } from "../filter-pill-menu/FilterPillMenuOptions";
 import { getFilterLabel } from "./getFilterLabel";
-import { getFilterTooltipText } from "./getFilterTooltipText";
+import { getFilterAsFormattedText } from "./getFilterTooltipText";
 
 import filterPillCss from "./FilterPill.css";
 import { ButtonProps } from "@salt-ds/core";
@@ -92,7 +92,7 @@ export const FilterPill = ({
     [getLabel, filter],
   );
 
-  const getTooltipTextl = getFilterTooltipText(columnsByName);
+  const getTooltipText = getFilterAsFormattedText(columnsByName);
 
   const id = useId(idProp);
 
@@ -164,7 +164,7 @@ export const FilterPill = ({
     anchorQuery: ".vuuFilterPill",
     id,
     placement: ["above", "below"],
-    tooltipContent: filterAsReactNode(filter, getTooltipTextl),
+    tooltipContent: filterAsReactNode(filter, getTooltipText),
   });
 
   const buttonProps: Partial<ButtonProps> = {

vuu-ui/packages/vuu-filters/src/filter-pill/FilterPillNext.css

@@ -0,0 +1,7 @@
+.vuuFilterPillNext {
+    --saltButton-background: black;
+}
+
+.vuuFilterPillNext-active {
+    --saltButton-background: red;
+}

vuu-ui/packages/vuu-filters/src/filter-pill/FilterPillNext.tsx

@@ -0,0 +1,98 @@
+import { Button, Tooltip } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import cx from "clsx";
+import { HTMLAttributes } from "react";
+import { FilterMenu, type FilterPermissions } from "./FilterMenu";
+import {
+  type FilterPillNextHookProps,
+  useFilterPillNext,
+} from "./useFilterPillNext";
+
+import filterPillNextCss from "./FilterPillNext.css";
+
+export interface FilterPillNextProps
+  extends FilterPillNextHookProps,
+    Omit<HTMLAttributes<HTMLButtonElement>, "id"> {
+  id: string;
+  permissions?: FilterPermissions;
+  showTooltip?: boolean;
+}
+
+const classBase = "vuuFilterPillNext";
+
+export const FilterPillNext = ({
+  active,
+  appearence,
+  className,
+  defaultActive,
+  filter,
+  id,
+  onClick,
+  onMenuAction: onMenuActionProp,
+  permissions,
+  showTooltip = true,
+  ...htmlAttributes
+}: FilterPillNextProps) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-filter-pill",
+    css: filterPillNextCss,
+    window: targetWindow,
+  });
+
+  const {
+    contextMenuOpen,
+    onContextMenu,
+    onContextMenuOpenChange,
+    onMenuAction,
+    tooltipText,
+    virtualElement,
+  } = useFilterPillNext({
+    active,
+    appearence,
+    defaultActive,
+    filter,
+    onMenuAction: onMenuActionProp,
+  });
+
+  const filterPill = (
+    <Button
+      {...htmlAttributes}
+      appearance="solid"
+      className={cx(classBase, className, {
+        [`${classBase}-active`]: active,
+      })}
+      id={id}
+      onClick={onClick}
+      onContextMenu={onContextMenu}
+      sentiment="accented"
+    >
+      {filter.name}
+    </Button>
+  );
+
+  const filterMenu = (
+    <FilterMenu
+      filterId={id}
+      getVirtualElement={() => virtualElement}
+      onMenuAction={onMenuAction}
+      onOpenChange={onContextMenuOpenChange}
+      open={contextMenuOpen}
+    />
+  );
+
+  return showTooltip ? (
+    <>
+      <Tooltip className={`${classBase}-tooltip`} content={tooltipText}>
+        {filterPill}
+      </Tooltip>
+      {filterMenu}
+    </>
+  ) : (
+    <>
+      {filterPill}
+      {filterMenu}
+    </>
+  );
+};

vuu-ui/packages/vuu-filters/src/filter-pill/getFilterTooltipText.ts

@@ -48,7 +48,7 @@ function formatFilterValue(
   return filter;
 }
 
-export const getFilterTooltipText =
+export const getFilterAsFormattedText =
   (columnsByName?: ColumnDescriptorsByName) => (filter: Filter) => {
     if (isMultiClauseFilter(filter)) {
       const [firstClause] = filterClauses(filter);

vuu-ui/packages/vuu-filters/src/filter-pill/useFilterPillNext.ts

@@ -0,0 +1,81 @@
+import type { VirtualElement } from "@floating-ui/react";
+import { useControlled } from "@salt-ds/core";
+import { MouseEventHandler, useCallback, useMemo, useState } from "react";
+import { FilterMenuActionHandler } from "./FilterMenu";
+import { getFilterAsFormattedText } from "./getFilterTooltipText";
+import { Filter } from "@vuu-ui/vuu-filter-types";
+
+export interface FilterPillNextHookProps {
+  active?: boolean;
+  /**
+   * Determines how menu items will be presented
+   * 'button' - menu items will be context menu
+   * 'split-button' - menu items will be dropdowns
+   */
+  appearence?: "split-button" | "button";
+  defaultActive?: boolean;
+  filter: Filter;
+  onMenuAction?: FilterMenuActionHandler;
+}
+
+export const useFilterPillNext = ({
+  active: activeProp,
+  appearence = "button",
+  defaultActive,
+  filter,
+  onMenuAction,
+}: FilterPillNextHookProps) => {
+  const [active] = useControlled({
+    controlled: activeProp,
+    default: defaultActive ?? false,
+    name: "FilterPillNext",
+    state: "active",
+  });
+
+  const [contextMenuOpen, setContextMenuOpen] = useState(false);
+  const [virtualElement, setVirtualElement] = useState<VirtualElement | null>(
+    null,
+  );
+
+  const tooltipText = useMemo(() => {
+    const getTooltipText = getFilterAsFormattedText();
+    return getTooltipText(filter);
+  }, [filter]);
+
+  const onContextMenu: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.preventDefault();
+    if (appearence === "button") {
+      setVirtualElement({
+        getBoundingClientRect: () => ({
+          width: 0,
+          height: 0,
+          x: e.clientX,
+          y: e.clientY,
+          top: e.clientY,
+          right: e.clientX,
+          bottom: e.clientY,
+          left: e.clientX,
+        }),
+      });
+      setContextMenuOpen(true);
+    }
+  };
+
+  const handleMenuAction = useCallback<FilterMenuActionHandler>(
+    (filterId, actionType) => {
+      setContextMenuOpen(false);
+      onMenuAction?.(filterId, actionType);
+    },
+    [onMenuAction],
+  );
+
+  return {
+    active,
+    contextMenuOpen,
+    onContextMenu,
+    onContextMenuOpenChange: setContextMenuOpen,
+    onMenuAction: handleMenuAction,
+    tooltipText,
+    virtualElement,
+  };
+};