@patternfly/react-data-view 6.0.0-prerelease.1 → 6.1.0

package/src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DataViewCheckboxFilter, { DataViewCheckboxFilterProps } from './DataViewCheckboxFilter';
+import DataViewToolbar from '../DataViewToolbar';
+
+describe('DataViewCheckboxFilter component', () => {
+  const defaultProps: DataViewCheckboxFilterProps = {
+    filterId: 'test-checkbox-filter',
+    title: 'Test Checkbox Filter',
+    value: [ 'workspace-one' ],
+    options: [
+      { label: 'Workspace one', value: 'workspace-one' },
+      { label: 'Workspace two', value: 'workspace-two' },
+      { label: 'Workspace three', value: 'workspace-three' },
+    ],
+  };
+
+  it('should render correctly', () => {
+    const { container } = render(
+      <DataViewToolbar filters={<DataViewCheckboxFilter {...defaultProps} />} />
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx

@@ -0,0 +1,175 @@
+import React from 'react';
+import {
+  Badge,
+  Menu,
+  MenuContent,
+  MenuItem,
+  MenuList,
+  MenuProps,
+  MenuToggle,
+  Popper,
+  ToolbarLabel,
+  ToolbarFilter,
+} from '@patternfly/react-core';
+import { FilterIcon } from '@patternfly/react-icons';
+import { DataViewFilterOption } from '../DataViewFilters';
+
+const isToolbarLabel = (label: string | ToolbarLabel): label is ToolbarLabel =>
+  typeof label === 'object' && 'key' in label;
+
+export const isDataViewFilterOption = (obj: unknown): obj is DataViewFilterOption =>
+  !!obj &&
+  typeof obj === 'object' &&
+  'label' in obj &&
+  'value' in obj &&
+  typeof (obj as DataViewFilterOption).value === 'string';
+
+/** extends MenuProps */
+export interface DataViewCheckboxFilterProps extends Omit<MenuProps, 'onSelect' | 'onChange'> {
+  /** Unique key for the filter attribute */
+  filterId: string;
+  /** Array of current filter values */
+  value?: string[];
+  /** Filter title displayed in the toolbar */
+  title: string;
+  /** Placeholder text of the menu */
+  placeholder?: string;
+  /** Filter options displayed */
+  options: (DataViewFilterOption | string)[];
+  /** Callback for updating when item selection changes. */
+  onChange?: (event?: React.MouseEvent, values?: string[]) => void;
+  /** Controls visibility of the filter in the toolbar */
+  showToolbarItem?: boolean;
+  /** Controls visibility of the filter icon */
+  showIcon?: boolean;
+  /** Controls visibility of the selected items badge */
+  showBadge?: boolean;
+  /** Custom OUIA ID */
+  ouiaId?: string;
+}
+
+export const DataViewCheckboxFilter: React.FC<DataViewCheckboxFilterProps> = ({
+  filterId,
+  title,
+  value = [],
+  onChange,
+  placeholder,
+  options = [],
+  showToolbarItem,
+  showIcon = !placeholder,
+  showBadge = !placeholder,
+  ouiaId = 'DataViewCheckboxFilter',
+  ...props
+}: DataViewCheckboxFilterProps) => {
+  const [ isOpen, setIsOpen ] = React.useState(false);
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  const normalizeOptions = React.useMemo(
+    () =>
+      options.map(option =>
+        typeof option === 'string'
+          ? { label: option, value: option }
+          : option
+      ),
+    [ options ]
+  );
+
+  const handleToggleClick = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    setTimeout(() => {
+      const firstElement = menuRef.current?.querySelector('li > button:not(:disabled)') as HTMLElement;
+      firstElement?.focus();
+    }, 0);
+    setIsOpen(prev => !prev);
+  };
+
+  const handleSelect = (event?: React.MouseEvent, itemId?: string | number) => {
+    const activeItem = String(itemId);
+    const isSelected = value.includes(activeItem);
+
+    onChange?.(
+      event,
+      isSelected ? value.filter(item => item !== activeItem) : [ activeItem, ...value ]
+    );
+  };
+
+  const handleClickOutside = (event: MouseEvent) => 
+    isOpen &&
+    menuRef.current && toggleRef.current &&
+    !menuRef.current.contains(event.target as Node) && !toggleRef.current.contains(event.target as Node)
+    && setIsOpen(false);
+
+
+  React.useEffect(() => {
+    window.addEventListener('click', handleClickOutside);
+    return () => {
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, [ isOpen ]);  // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <ToolbarFilter
+      key={ouiaId}
+      data-ouia-component-id={ouiaId}
+      labels={value.map(item => {
+        const activeOption = normalizeOptions.find(option => option.value === item);
+        return ({ key: activeOption?.value as string, node: activeOption?.label })
+      })}
+      deleteLabel={(_, label) =>
+        onChange?.(undefined, value.filter(item => item !== (isToolbarLabel(label) ? label.key : label)))
+      }
+      categoryName={title}
+      showToolbarItem={showToolbarItem}
+    >
+      <Popper
+        trigger={
+          <MenuToggle
+            ouiaId={`${ouiaId}-toggle`}
+            ref={toggleRef}
+            onClick={handleToggleClick}
+            isExpanded={isOpen}
+            icon={showIcon ? <FilterIcon /> : undefined}
+            badge={value.length > 0 && showBadge ? <Badge data-ouia-component-id={`${ouiaId}-badge`} isRead>{value.length}</Badge> : undefined}
+            style={{ width: '200px' }}
+          >
+            {placeholder ?? title}
+          </MenuToggle>
+        }
+        triggerRef={toggleRef}
+        popper={
+          <Menu
+            ref={menuRef}
+            ouiaId={`${ouiaId}-menu`}
+            onSelect={handleSelect}
+            selected={value}
+            {...props}
+          >
+            <MenuContent>
+              <MenuList>
+                {normalizeOptions.map(option => (
+                  <MenuItem
+                    data-ouia-component-id={`${ouiaId}-filter-item-${option.value}`}
+                    key={option.value}
+                    itemId={option.value}
+                    isSelected={value.includes(option.value)}
+                    hasCheckbox
+                  >
+                    {option.label}
+                  </MenuItem>
+                ))}
+              </MenuList>
+            </MenuContent>
+          </Menu>
+        }
+        popperRef={menuRef}
+        appendTo={containerRef.current || undefined}
+        aria-label={`${title ?? filterId} filter`}
+        isVisible={isOpen}
+      />
+    </ToolbarFilter>
+  );
+};
+
+export default DataViewCheckboxFilter;

package/src/DataViewCheckboxFilter/__snapshots__/DataViewCheckboxFilter.test.tsx.snap

@@ -0,0 +1,197 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataViewCheckboxFilter component should render correctly 1`] = `
+<div>
+  <div
+    class="pf-v6-c-toolbar"
+    data-ouia-component-id="DataViewToolbar"
+    data-ouia-component-type="PF6/Toolbar"
+    data-ouia-safe="true"
+    id="pf-random-id-0"
+  >
+    <div
+      class="pf-v6-c-toolbar__content"
+    >
+      <div
+        class="pf-v6-c-toolbar__content-section"
+      >
+        <div
+          class="pf-v6-c-toolbar__item"
+        >
+          <div
+            class="pf-v6-c-toolbar__item"
+            data-ouia-component-id="DataViewCheckboxFilter"
+          >
+            <button
+              aria-expanded="false"
+              class="pf-v6-c-menu-toggle"
+              data-ouia-component-id="DataViewCheckboxFilter-toggle"
+              data-ouia-component-type="PF6/MenuToggle"
+              data-ouia-safe="true"
+              style="width: 200px;"
+              type="button"
+            >
+              <span
+                class="pf-v6-c-menu-toggle__icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v6-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 512 512"
+                  width="1em"
+                >
+                  <path
+                    d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z"
+                  />
+                </svg>
+              </span>
+              <span
+                class="pf-v6-c-menu-toggle__text"
+              >
+                Test Checkbox Filter
+              </span>
+              <span
+                class="pf-v6-c-menu-toggle__count"
+              >
+                <span
+                  class="pf-v6-c-badge pf-m-read"
+                  data-ouia-component-id="DataViewCheckboxFilter-badge"
+                >
+                  1
+                </span>
+              </span>
+              <span
+                class="pf-v6-c-menu-toggle__controls"
+              >
+                <span
+                  class="pf-v6-c-menu-toggle__toggle-icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 320 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-toolbar__content"
+    >
+      <div
+        class="pf-v6-c-toolbar__group"
+      >
+        <div
+          class="pf-v6-c-toolbar__item pf-m-label-group pf-m-label-group"
+        >
+          <div
+            class="pf-v6-c-label-group pf-m-category"
+          >
+            <div
+              class="pf-v6-c-label-group__main"
+            >
+              <span
+                aria-hidden="true"
+                class="pf-v6-c-label-group__label"
+                id="pf-random-id-1"
+              >
+                Test Checkbox Filter
+              </span>
+              <ul
+                aria-labelledby="pf-random-id-1"
+                class="pf-v6-c-label-group__list"
+                role="list"
+              >
+                <li
+                  class="pf-v6-c-label-group__list-item"
+                >
+                  <span
+                    class="pf-v6-c-label pf-m-filled"
+                  >
+                    <span
+                      class="pf-v6-c-label__content"
+                    >
+                      <span
+                        class="pf-v6-c-label__text"
+                      >
+                        Workspace one
+                      </span>
+                    </span>
+                    <span
+                      class="pf-v6-c-label__actions"
+                    >
+                      <button
+                        aria-disabled="false"
+                        aria-label="Close Workspace one"
+                        class="pf-v6-c-button pf-m-plain pf-m-no-padding"
+                        data-ouia-component-id="OUIA-Generated-Button-plain-1"
+                        data-ouia-component-type="PF6/Button"
+                        data-ouia-safe="true"
+                        type="button"
+                      >
+                        <span
+                          class="pf-v6-c-button__icon"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="pf-v6-svg"
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            viewBox="0 0 352 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </span>
+                  </span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-toolbar__group pf-m-action-group-inline"
+      >
+        <div
+          class="pf-v6-c-toolbar__item"
+        >
+          <button
+            aria-disabled="false"
+            class="pf-v6-c-button pf-m-link pf-m-inline"
+            data-ouia-component-id="DataViewToolbar-clear-all-filters"
+            data-ouia-component-type="PF6/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Clear filters
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/DataViewCheckboxFilter/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DataViewCheckboxFilter';
+export * from './DataViewCheckboxFilter';

package/src/DataViewEventsContext/DataViewEventsContext.test.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { useDataViewEventsContext, DataViewEventsProvider, EventTypes } from './DataViewEventsContext';
+
+let id = 0;
+
+beforeAll(() => {
+  Object.defineProperty(global, 'crypto', {
+    value: {
+      randomUUID: jest.fn(() => `mocked-uuid-${id++}`),
+    },
+  });
+});
+
+describe('DataViewEventsContext', () => {
+  test('should provide context value and allow subscriptions', () => {
+    const callback = jest.fn();
+
+    const TestComponent = () => {
+      const { subscribe, trigger } = useDataViewEventsContext();
+
+      React.useEffect(() => {
+        const unsubscribe = subscribe(EventTypes.rowClick, callback);
+        return () => unsubscribe();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+
+      return (
+        <button onClick={() => trigger(EventTypes.rowClick, 'some payload')}>Trigger</button>
+      );
+    };
+
+    const { getByText } = render(
+      <DataViewEventsProvider>
+        <TestComponent />
+      </DataViewEventsProvider>
+    );
+
+    fireEvent.click(getByText('Trigger'));
+    expect(callback).toHaveBeenCalledWith('some payload');
+  });
+
+  test('should handle unsubscribing correctly', () => {
+    const callback = jest.fn();
+
+    const TestComponent = () => {
+      const { subscribe, trigger } = useDataViewEventsContext();
+
+      React.useEffect(() => {
+        const unsubscribe = subscribe(EventTypes.rowClick, callback);
+        unsubscribe();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+
+      return (
+        <button onClick={() => trigger(EventTypes.rowClick, 'some payload')}>Trigger</button>
+      );
+    };
+
+    const { getByText } = render(
+      <DataViewEventsProvider>
+        <TestComponent />
+      </DataViewEventsProvider>
+    );
+
+    fireEvent.click(getByText('Trigger'));
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  test('should handle multiple subscriptions and trigger events correctly', () => {
+    const callback1 = jest.fn();
+    const callback2 = jest.fn();
+
+    const TestComponent = () => {
+      const { subscribe, trigger } = useDataViewEventsContext();
+
+      React.useEffect(() => {
+        const unsubscribe1 = subscribe(EventTypes.rowClick, callback1);
+        const unsubscribe2 = subscribe(EventTypes.rowClick, callback2);
+        
+        return () => {
+          unsubscribe1();
+          unsubscribe2();
+        };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+
+      return (
+        <button onClick={() => trigger(EventTypes.rowClick, 'some payload')}>Trigger</button>
+      );
+    };
+
+    const { getByText } = render(
+      <DataViewEventsProvider>
+        <TestComponent />
+      </DataViewEventsProvider>
+    );
+
+    fireEvent.click(getByText('Trigger'));
+
+    expect(callback1).toHaveBeenCalledWith('some payload');
+    expect(callback2).toHaveBeenCalledWith('some payload');
+  });
+});

package/src/DataViewEventsContext/DataViewEventsContext.tsx

@@ -0,0 +1,70 @@
+import React, {
+  PropsWithChildren,
+  createContext,
+  useCallback,
+  useContext,
+  useState
+} from "react";
+
+export const EventTypes = {
+  rowClick: 'rowClick'
+} as const;
+
+export type DataViewEvent = typeof EventTypes[keyof typeof EventTypes];
+
+type Callback = (...args: any[]) => void;    // eslint-disable-line @typescript-eslint/no-explicit-any
+interface Subscriptions { [id: string]: Callback }
+type EventSubscriptions = { [event in DataViewEvent]: Subscriptions };
+type Subscribe = (event: DataViewEvent, callback: Callback) => () => void;
+type Trigger = (event: DataViewEvent, ...payload: any[]) => void;    // eslint-disable-line @typescript-eslint/no-explicit-any
+
+export interface DataViewEventsContextValue {
+  subscribe: Subscribe;
+  trigger: Trigger;
+}
+
+export const DataViewEventsContext = createContext<DataViewEventsContextValue>({
+  subscribe: () => () => null,
+  trigger: () => null
+});
+
+export const DataViewEventsProvider = ({ children }: PropsWithChildren) => {
+  const [ subscriptions, setSubscriptions ] = useState<EventSubscriptions>({
+    [EventTypes.rowClick]: {}
+  });
+
+  const subscribe: Subscribe = (event, callback) => {
+    const id = crypto.randomUUID();
+
+    // set new subscription
+    setSubscriptions(prevSubscriptions => ({
+      ...prevSubscriptions,
+      [event]: { ...prevSubscriptions[event], [id]: callback }
+    }));
+
+    // return unsubscribe function
+    return () => {
+      setSubscriptions(prevSubscriptions => {
+        const updatedSubscriptions = { ...prevSubscriptions };
+        delete updatedSubscriptions[event][id];
+        return updatedSubscriptions;
+      });
+    };
+  };
+
+  const trigger = useCallback((event: DataViewEvent, ...payload: unknown[]) => {
+    Object.values(subscriptions[event]).forEach(callback => {
+      callback(...payload);
+    });
+  }, [ subscriptions ]);
+
+  return (
+    <DataViewEventsContext.Provider value={{ subscribe, trigger }}>
+      {children}
+    </DataViewEventsContext.Provider>
+  );
+};
+
+export const useDataViewEventsContext = () => useContext(DataViewEventsContext);
+
+export default DataViewEventsContext;

package/src/DataViewEventsContext/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DataViewEventsContext';
+export * from './DataViewEventsContext';

package/src/DataViewFilters/DataViewFilters.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DataViewFilters from './DataViewFilters';
+import DataViewToolbar from '../DataViewToolbar';
+import DataViewTextFilter from '../DataViewTextFilter';
+
+describe('DataViewFilters component', () => {
+  const mockOnChange = jest.fn();
+
+  it('should render correctly', () => {
+    const { container } = render(<DataViewToolbar
+      filters={
+        <DataViewFilters onChange={mockOnChange} values={{}}>
+          <DataViewTextFilter filterId="one" title="One" />
+          <DataViewTextFilter filterId="two" title="Two" />
+        </DataViewFilters>
+      }
+    />);
+    expect(container).toMatchSnapshot();
+  });
+});