@patternfly/react-data-view 7.0.0-prerelease.2 → 7.0.0-prerelease.4

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/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();
+  });
+});

package/src/DataViewFilters/DataViewFilters.tsx

@@ -0,0 +1,144 @@
+import React, { useMemo, useState, useRef, useEffect, ReactElement, ReactNode } from 'react';
+import {
+  Menu, MenuContent, MenuItem, MenuList, MenuToggle, Popper, ToolbarGroup, ToolbarToggleGroup, ToolbarToggleGroupProps,
+} from '@patternfly/react-core';
+import { FilterIcon } from '@patternfly/react-icons';
+
+export interface DataViewFilterOption {
+  /** Filter option label */
+  label: ReactNode;
+  /** Filter option value */
+  value: string;
+}
+
+// helper interface to generate attribute menu
+interface DataViewFilterIdentifiers {
+  filterId: string;
+  title: string;
+}
+
+/** extends ToolbarToggleGroupProps */
+export interface DataViewFiltersProps<T extends object> extends Omit<ToolbarToggleGroupProps, 'toggleIcon' | 'breakpoint' | 'onChange'> {
+  /** Content rendered inside the data view */
+  children: React.ReactNode;
+  /** Optional onChange callback shared across filters */
+  onChange?: (key: string, newValues: Partial<T>) => void;
+  /** Optional values shared across filters */
+  values?: T;
+  /** Icon for the toolbar toggle group */
+  toggleIcon?: ToolbarToggleGroupProps['toggleIcon'];
+  /** Breakpoint for the toolbar toggle group */
+  breakpoint?: ToolbarToggleGroupProps['breakpoint'];
+  /** Custom OUIA ID */
+  ouiaId?: string;
+};
+
+
+export const DataViewFilters = <T extends object>({
+  children,
+  ouiaId = 'DataViewFilters',
+  toggleIcon = <FilterIcon />,
+  breakpoint = 'xl',
+  onChange,
+  values,
+  ...props
+}: DataViewFiltersProps<T>) => {
+  const [ activeAttributeMenu, setActiveAttributeMenu ] = useState<string>('');
+  const [ isAttributeMenuOpen, setIsAttributeMenuOpen ] = useState(false);
+  const attributeToggleRef = useRef<HTMLButtonElement>(null);
+  const attributeMenuRef = useRef<HTMLDivElement>(null);
+  const attributeContainerRef = useRef<HTMLDivElement>(null);
+
+  const childrenHash = useMemo(() => JSON.stringify(
+    React.Children.map(children, (child) =>
+      React.isValidElement(child) ? { type: child.type, key: child.key, props: child.props } : child
+    )
+  ), [ children ]);
+
+  const filterItems: DataViewFilterIdentifiers[] = useMemo(() => React.Children.toArray(children)
+    .map(child =>
+      React.isValidElement(child) ? { filterId: String(child.props.filterId), title: String(child.props.title) } : undefined
+    ).filter((item): item is DataViewFilterIdentifiers => !!item), [ childrenHash ]);  // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    filterItems.length > 0 && setActiveAttributeMenu(filterItems[0].title);
+  }, [ filterItems ]);
+
+  const handleClickOutside = (event: MouseEvent) => 
+    isAttributeMenuOpen &&
+    !attributeMenuRef.current?.contains(event.target as Node) &&
+    !attributeToggleRef.current?.contains(event.target as Node)
+    && setIsAttributeMenuOpen(false);
+
+  useEffect(() => {
+    window.addEventListener('click', handleClickOutside);
+    return () => {
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, [ isAttributeMenuOpen ]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const attributeToggle = (
+    <MenuToggle
+      ref={attributeToggleRef}
+      onClick={() => setIsAttributeMenuOpen(!isAttributeMenuOpen)}
+      isExpanded={isAttributeMenuOpen}
+      icon={toggleIcon}
+    >
+      {activeAttributeMenu}
+    </MenuToggle>
+  );
+
+  const attributeMenu = (
+    <Menu
+      ref={attributeMenuRef}
+      onSelect={(_ev, itemId) => {
+        const selectedItem = filterItems.find(item => item.filterId === itemId);
+        selectedItem && setActiveAttributeMenu(selectedItem.title);
+        setIsAttributeMenuOpen(false);
+      }}
+    >
+      <MenuContent>
+        <MenuList>
+          {filterItems.map(item => (
+            <MenuItem key={item.filterId} itemId={item.filterId}>
+              {item.title}
+            </MenuItem>
+          ))}
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+
+  return (
+    <ToolbarToggleGroup data-ouia-component-id={ouiaId} toggleIcon={toggleIcon} breakpoint={breakpoint} {...props}>
+      <ToolbarGroup variant="filter-group">
+        <div ref={attributeContainerRef}>
+          <Popper
+            trigger={attributeToggle}
+            triggerRef={attributeToggleRef}
+            popper={attributeMenu}
+            popperRef={attributeMenuRef}
+            appendTo={attributeContainerRef.current || undefined}
+            isVisible={isAttributeMenuOpen}
+          />
+        </div>
+        {React.Children.map(children, (child) =>
+          React.isValidElement(child)
+            ? React.cloneElement(child as ReactElement<{
+              showToolbarItem: boolean;
+              onChange: (_e: unknown, values: unknown) => void;
+              value: unknown;
+            }>, {
+              showToolbarItem: activeAttributeMenu === child.props.title,
+              onChange: (event, value) => onChange?.(event, { [child.props.filterId]: value } as Partial<T>),
+              value: values?.[child.props.filterId],
+              ...child.props
+            })
+            : child
+        )}
+      </ToolbarGroup>
+    </ToolbarToggleGroup>
+  );
+};
+
+export default DataViewFilters;