uikit-react-public 0.49.6 → 0.50.0

package/lib/components/Filters/QuickFilter.tsx

@@ -0,0 +1,89 @@
+import { ButtonHTMLAttributes, memo } from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
+import { useFiltersContext } from './Filters.context';
+
+export const NAME = 'ucl-uikit-quick-filter';
+
+export interface QuickFilterProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  selected?: boolean;
+  testId?: string;
+}
+
+const QuickFilter = ({
+  selected = false,
+  disabled = false,
+  testId = NAME,
+  className,
+  children,
+  type = 'button',
+  ...props
+}: QuickFilterProps) => {
+  const [theme] = useTheme();
+  const filtersContext = useFiltersContext();
+  const isDesktop = filtersContext?.isDesktop ?? true;
+  const typography = isDesktop
+    ? theme.typography.body.sm
+    : theme.typography.body.smSemibold;
+
+  const baseStyle = css`
+    min-height: ${isDesktop ? '28px' : '32px'};
+    padding: ${theme.padding.p4}
+      ${isDesktop ? theme.padding.p8 : theme.padding.p16};
+    border: ${theme.border.b1} solid ${theme.colour.border.brand};
+    border-radius: ${isDesktop ? theme.radius.r4 : theme.radius.r16};
+    box-sizing: border-box;
+    background-color: ${theme.colour.fill.default};
+    color: ${theme.colour.text.brand};
+    font-family: ${typography.fontFamily};
+    font-feature-settings: ${typography.fontSettings};
+    font-size: ${typography.fontSize}px;
+    font-weight: ${typography.fontWeight};
+    line-height: ${typography.lineHeight}%;
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${theme.colour.fill.brandSubtleHover};
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: ${theme.boxShadow.focus};
+    }
+  `;
+
+  const selectedStyle = css`
+    background-color: ${theme.colour.fill.brandSubtleSelected};
+    color: ${theme.colour.text.brandHover};
+  `;
+
+  const disabledStyle = css`
+    border-color: ${theme.colour.border.disabled};
+    background-color: ${theme.colour.fill.disabled};
+    color: ${theme.colour.text.disabled};
+    cursor: not-allowed;
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    selected && selectedStyle,
+    disabled && disabledStyle,
+    className
+  );
+
+  return (
+    <button
+      type={type}
+      className={style}
+      disabled={disabled}
+      aria-pressed={selected}
+      data-testid={testId}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default memo(QuickFilter);

package/lib/components/Filters/__tests__/Filters.test.tsx

@@ -0,0 +1,230 @@
+import { useState } from 'react';
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ThemeContextProvider } from '../../../theme';
+import Filters from '../Filters';
+import Filter from '../Filter';
+import QuickFilter from '../QuickFilter';
+
+const setDesktopViewport = (matches: boolean) => {
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn().mockImplementation(() => ({
+      matches,
+      media: '',
+      onchange: null,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    }))
+  );
+};
+
+const renderFilters = (component: React.ReactNode) =>
+  render(<ThemeContextProvider>{component}</ThemeContextProvider>);
+
+const StatefulMobileFilters = () => {
+  const [value, setValue] = useState('');
+
+  return (
+    <Filters
+      onOpenChange={() => {}}
+      onApply={() => {}}
+    >
+      <Filter
+        label='Search'
+        defaultOpen
+      >
+        <input
+          aria-label='Search records'
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+        />
+      </Filter>
+    </Filters>
+  );
+};
+
+describe('Filters', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
+  test('opens a desktop panel in an Overlay and closes on Apply', async () => {
+    setDesktopViewport(true);
+    const user = userEvent.setup();
+    const onApply = vi.fn();
+
+    const result = renderFilters(
+      <Filters>
+        <Filter
+          label='File type'
+          onApply={onApply}
+        >
+          Panel controls
+        </Filter>
+      </Filters>
+    );
+
+    const trigger = result.getByRole('button', { name: 'File type' });
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+
+    await user.click(trigger);
+
+    const panel = result.getByRole('dialog', { name: 'File type filter' });
+    expect(panel.parentElement).toHaveClass('ucl-overlay');
+    expect(panel).toHaveTextContent('Panel controls');
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+
+    await user.click(result.getByRole('button', { name: 'Apply' }));
+
+    expect(onApply).toHaveBeenCalledOnce();
+    expect(
+      result.queryByRole('dialog', { name: 'File type filter' })
+    ).not.toBeInTheDocument();
+  });
+
+  test('closes a desktop filter on Escape and restores trigger focus', async () => {
+    setDesktopViewport(true);
+    const user = userEvent.setup();
+
+    const result = renderFilters(
+      <Filters>
+        <Filter label='Status'>Panel controls</Filter>
+      </Filters>
+    );
+
+    const trigger = result.getByRole('button', { name: 'Status' });
+    await user.click(trigger);
+    await user.keyboard('{Escape}');
+
+    expect(result.queryByText('Panel controls')).not.toBeInTheDocument();
+    expect(trigger).toHaveFocus();
+  });
+
+  test('renders mobile filters in a bottom sheet and expands a filter inline', async () => {
+    setDesktopViewport(false);
+    const user = userEvent.setup();
+    const onApply = vi.fn();
+    const onReset = vi.fn();
+
+    const result = renderFilters(
+      <Filters
+        appliedCount={2}
+        onApply={onApply}
+        onReset={onReset}
+      >
+        <Filter
+          label='File type'
+          appliedCount={2}
+        >
+          Panel controls
+        </Filter>
+      </Filters>
+    );
+
+    const groupTrigger = result.getByRole('button', {
+      name: 'Filters, 2 applied',
+    });
+    expect(groupTrigger).toHaveTextContent('');
+    await user.click(groupTrigger);
+
+    expect(result.getByRole('dialog', { name: 'Filters' })).toBeInTheDocument();
+    expect(result.getByTestId('ucl-blanket')).toBeInTheDocument();
+    expect(result.queryByText('Panel controls')).not.toBeInTheDocument();
+
+    await user.click(result.getByRole('button', { name: /File type/ }));
+    expect(result.getByText('Panel controls')).toBeInTheDocument();
+
+    await user.click(result.getByRole('button', { name: 'Reset all' }));
+    expect(onReset).toHaveBeenCalledOnce();
+
+    await user.click(result.getByRole('button', { name: 'Apply filters' }));
+    expect(onApply).toHaveBeenCalledOnce();
+    expect(
+      result.queryByRole('dialog', { name: 'Filters' })
+    ).not.toBeInTheDocument();
+  });
+
+  test('preserves focus when an inline open callback changes identity', async () => {
+    setDesktopViewport(false);
+    const user = userEvent.setup();
+    const result = renderFilters(<StatefulMobileFilters />);
+
+    await user.click(result.getByRole('button', { name: 'Filters' }));
+
+    const input = result.getByRole('textbox', { name: 'Search records' });
+    await user.click(input);
+    await user.type(input, 'report');
+
+    expect(input).toHaveFocus();
+    expect(input).toHaveValue('report');
+  });
+
+  test('supports controlled open state', async () => {
+    setDesktopViewport(true);
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+
+    const result = renderFilters(
+      <Filters>
+        <Filter
+          label='Status'
+          open={false}
+          onOpenChange={onOpenChange}
+        >
+          Panel controls
+        </Filter>
+      </Filters>
+    );
+
+    await user.click(result.getByRole('button', { name: 'Status' }));
+
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+    expect(result.queryByText('Panel controls')).not.toBeInTheDocument();
+  });
+
+  test('keeps only one filter open at a time', async () => {
+    setDesktopViewport(true);
+    const user = userEvent.setup();
+
+    const result = renderFilters(
+      <Filters>
+        <Filter label='File type'>File controls</Filter>
+        <Filter label='Status'>Status controls</Filter>
+      </Filters>
+    );
+
+    await user.click(result.getByRole('button', { name: 'File type' }));
+    expect(result.getByText('File controls')).toBeInTheDocument();
+
+    await user.click(result.getByRole('button', { name: 'Status' }));
+    expect(result.queryByText('File controls')).not.toBeInTheDocument();
+    expect(result.getByText('Status controls')).toBeInTheDocument();
+  });
+
+  test('QuickFilter exposes its selected state', async () => {
+    setDesktopViewport(true);
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+
+    const result = renderFilters(
+      <QuickFilter
+        selected
+        onClick={onClick}
+      >
+        Last 30 days
+      </QuickFilter>
+    );
+
+    const quickFilter = result.getByRole('button', { name: 'Last 30 days' });
+    expect(quickFilter).toHaveAttribute('aria-pressed', 'true');
+
+    await user.click(quickFilter);
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+});

package/lib/components/Filters/index.ts

@@ -0,0 +1,6 @@
+export { default } from './Filters';
+export { default as Filter } from './Filter';
+export { default as QuickFilter } from './QuickFilter';
+export type { FiltersProps, FiltersSubComponents } from './Filters';
+export type { FilterProps } from './Filter';
+export type { QuickFilterProps } from './QuickFilter';

package/lib/components/Overlay/Overlay.tsx

@@ -44,6 +44,7 @@ export type OverlaySize = {
 
 export interface OverlayProps extends HTMLAttributes<HTMLDivElement> {
   reference: RefObject<HTMLElement | null>;
+  positioning?: 'reference' | 'viewport';
   placement?: Placement;
   strategy?: Strategy;
   blanket?: boolean;
@@ -63,6 +64,7 @@ const Overlay = forwardRef<Ref, OverlayProps>(
   (
     {
       reference,
+      positioning = 'reference',
       placement = 'bottom',
       strategy = 'absolute',
       blanket = false,
@@ -146,6 +148,7 @@ const Overlay = forwardRef<Ref, OverlayProps>(
 
     const overlayPlacement = currentPlacement.split('-')[0] as
       'left' | 'right' | 'top' | 'bottom';
+    const isReferencePositioned = positioning === 'reference';
 
     useLayoutEffect(() => {
       refs.setReference(reference.current);
@@ -237,11 +240,13 @@ const Overlay = forwardRef<Ref, OverlayProps>(
           className={style}
           style={{
             ...(inlineStyle as CSSProperties),
-            position: strategy,
-            left: x ?? 0,
-            top: y ?? 0,
+            ...(isReferencePositioned && {
+              position: strategy,
+              left: x ?? 0,
+              top: y ?? 0,
+            }),
             visibility:
-              x === null || y === null
+              isReferencePositioned && (x === null || y === null)
                 ? 'hidden'
                 : (inlineStyle as CSSProperties | undefined)?.visibility,
           }}

package/lib/components/Overlay/__tests__/Overlay.test.tsx

@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, test, vi } from 'vitest';
 import { useRef } from 'react';
 import { render, waitFor } from '@testing-library/react';
+import { css } from '@emotion/css';
 import Overlay from '../Overlay';
 
 describe('Overlay', () => {
@@ -78,4 +79,42 @@ describe('Overlay', () => {
       });
     });
   });
+
+  test('allows viewport positioning to be defined by className', async () => {
+    const TestOverlay = () => {
+      const reference = useRef<HTMLButtonElement>(null);
+      const viewportStyle = css`
+        position: fixed;
+        inset: auto 0 0;
+      `;
+
+      return (
+        <>
+          <button
+            ref={reference}
+            type='button'
+          >
+            Anchor
+          </button>
+          <Overlay
+            reference={reference}
+            positioning='viewport'
+            className={viewportStyle}
+          >
+            Content
+          </Overlay>
+        </>
+      );
+    };
+
+    const result = render(<TestOverlay />);
+    const overlay = result.container.querySelector('.ucl-overlay');
+
+    await waitFor(() => {
+      expect(overlay).toHaveStyle({
+        position: 'fixed',
+        inset: 'auto 0 0',
+      });
+    });
+  });
 });

package/lib/components/index.ts

@@ -37,6 +37,14 @@ export type { BlanketProps } from './Blanket';
 export { default as Overlay } from './Overlay';
 export type { OverlayProps } from './Overlay';
 
+export { default as Filters, Filter, QuickFilter } from './Filters';
+export type {
+  FiltersProps,
+  FiltersSubComponents,
+  FilterProps,
+  QuickFilterProps,
+} from './Filters';
+
 export { default as Snackbar } from './Snackbar';
 export { Snackbars } from './Snackbar';
 export type {

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.49.6",
+  "version": "0.50.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",