FilterTrigger

The component is used as an active state of a trigger in filters.

Usage with Select

Replace the tag for the Select.Trigger.

tsx

import React from 'react';
import { FilterTrigger } from 'intergalactic/base-trigger';
import Select from 'intergalactic/select';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';

const options = Array(6)
  .fill(0)
  .map((i, idx) => ({
    title: `Option ${idx}`,
  }));

const Demo = () => {
  return (
    <>
      <Text tag='label' htmlFor='filter-trigger' size={200}>
        Filter trigger with options
      </Text>
      <Box mt={2}>
        <Select>
          <Select.Trigger tag={FilterTrigger} id='filter-trigger' />
          <Select.Menu>
            {options.map((option, idx) => {
              const { title } = option;
              return (
                <Select.Option value={title} key={idx}>
                  {title}
                </Select.Option>
              );
            })}
          </Select.Menu>
        </Select>
      </Box>
    </>
  );
};

export default Demo;

import React from 'react';
import { FilterTrigger } from 'intergalactic/base-trigger';
import Select from 'intergalactic/select';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';

const options = Array(6)
  .fill(0)
  .map((i, idx) => ({
    title: `Option ${idx}`,
  }));

const Demo = () => {
  return (
    <>
      <Text tag='label' htmlFor='filter-trigger' size={200}>
        Filter trigger with options
      </Text>
      <Box mt={2}>
        <Select>
          <Select.Trigger tag={FilterTrigger} id='filter-trigger' />
          <Select.Menu>
            {options.map((option, idx) => {
              const { title } = option;
              return (
                <Select.Option value={title} key={idx}>
                  {title}
                </Select.Option>
              );
            })}
          </Select.Menu>
        </Select>
      </Box>
    </>
  );
};

export default Demo;

It is more complex example with Dropdown and Counter. It is recommended to use it for advanced filters where it is important to show that there are several additional filters inside.

tsx

import React from 'react';
import { FilterTrigger } from 'intergalactic/base-trigger';
import Dropdown from 'intergalactic/dropdown';
import Button from 'intergalactic/button';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';

const Demo = () => {
  const [filters, setFilters] = React.useState(0);
  const [visible, setVisible] = React.useState(false);

  return (
    <>
      <Text tag='label' htmlFor='advance-trigger' size={200}>
        Filter trigger for several filters inside
      </Text>
      <Box mt={2}>
        <Dropdown visible={visible} onVisibleChange={(v) => setVisible(v)}>
          <Dropdown.Trigger
            placeholder='Advanced filters'
            active={visible}
            empty={!filters}
            onClear={() => {
              setFilters(0);
              setVisible(false);
            }}
            tag={FilterTrigger}
            id='advance-trigger'
          >
            <FilterTrigger.Text>Advanced filters</FilterTrigger.Text>
            {!!filters && (
              <FilterTrigger.Counter aria-label='Applied filters count'>
                {filters}
              </FilterTrigger.Counter>
            )}
          </Dropdown.Trigger>
          <Dropdown.Popper p={5}>
            <Button
              onClick={() => {
                setFilters(filters + 1);
              }}
            >
              Set filters
            </Button>
          </Dropdown.Popper>
        </Dropdown>
      </Box>
    </>
  );
};

export default Demo;

import React from 'react';
import { FilterTrigger } from 'intergalactic/base-trigger';
import Dropdown from 'intergalactic/dropdown';
import Button from 'intergalactic/button';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';

const Demo = () => {
  const [filters, setFilters] = React.useState(0);
  const [visible, setVisible] = React.useState(false);

  return (
    <>
      <Text tag='label' htmlFor='advance-trigger' size={200}>
        Filter trigger for several filters inside
      </Text>
      <Box mt={2}>
        <Dropdown visible={visible} onVisibleChange={(v) => setVisible(v)}>
          <Dropdown.Trigger
            placeholder='Advanced filters'
            active={visible}
            empty={!filters}
            onClear={() => {
              setFilters(0);
              setVisible(false);
            }}
            tag={FilterTrigger}
            id='advance-trigger'
          >
            <FilterTrigger.Text>Advanced filters</FilterTrigger.Text>
            {!!filters && (
              <FilterTrigger.Counter aria-label='Applied filters count'>
                {filters}
              </FilterTrigger.Counter>
            )}
          </Dropdown.Trigger>
          <Dropdown.Popper p={5}>
            <Button
              onClick={() => {
                setFilters(filters + 1);
              }}
            >
              Set filters
            </Button>
          </Dropdown.Popper>
        </Dropdown>
      </Box>
    </>
  );
};

export default Demo;

Programmatic focus

Filter trigger contains two elements in the wrapper – button that opens dropdown (the inner trigger) and the clear button that empties selected value. In case you want to set browser focus on filter trigger, use the triggerRef prop to access the inner trigger node.

tsx

import React from 'react';
import { FilterTrigger } from 'intergalactic/base-trigger';
import Select from 'intergalactic/select';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';
import Button from 'intergalactic/button';

const options = Array(6)
  .fill(0)
  .map((i, idx) => ({
    title: `Option ${idx}`,
  }));

const Demo = () => {
  const triggerRef = React.useRef<HTMLButtonElement>();
  const [selectVisible, setSelectVisible] = React.useState(false);
  const focusTrigger = React.useCallback(() => {
    triggerRef.current?.focus();
    setSelectVisible(true);
  }, []);

  return (
    <>
      <Text tag='label' htmlFor='another-filter-trigger' size={200}>
        Filter trigger with options
      </Text>
      <Box mt={2}>
        <Select visible={selectVisible} onVisibleChange={setSelectVisible}>
          <Select.Trigger tag={FilterTrigger} triggerRef={triggerRef} id='another-filter-trigger' />
          <Select.Menu>
            {options.map((option, idx) => {
              const { title } = option;
              return (
                <Select.Option value={title} key={idx}>
                  {title}
                </Select.Option>
              );
            })}
          </Select.Menu>
        </Select>
      </Box>
      <Button mt={4} onClick={focusTrigger}>
        Focus on filter trigger
      </Button>
    </>
  );
};

export default Demo;

import React from 'react';
import { FilterTrigger } from 'intergalactic/base-trigger';
import Select from 'intergalactic/select';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';
import Button from 'intergalactic/button';

const options = Array(6)
  .fill(0)
  .map((i, idx) => ({
    title: `Option ${idx}`,
  }));

const Demo = () => {
  const triggerRef = React.useRef<HTMLButtonElement>();
  const [selectVisible, setSelectVisible] = React.useState(false);
  const focusTrigger = React.useCallback(() => {
    triggerRef.current?.focus();
    setSelectVisible(true);
  }, []);

  return (
    <>
      <Text tag='label' htmlFor='another-filter-trigger' size={200}>
        Filter trigger with options
      </Text>
      <Box mt={2}>
        <Select visible={selectVisible} onVisibleChange={setSelectVisible}>
          <Select.Trigger tag={FilterTrigger} triggerRef={triggerRef} id='another-filter-trigger' />
          <Select.Menu>
            {options.map((option, idx) => {
              const { title } = option;
              return (
                <Select.Option value={title} key={idx}>
                  {title}
                </Select.Option>
              );
            })}
          </Select.Menu>
        </Select>
      </Box>
      <Button mt={4} onClick={focusTrigger}>
        Focus on filter trigger
      </Button>
    </>
  );
};

export default Demo;

Hint for clear button

tsx

import React from 'react';
import { FilterTrigger } from 'intergalactic/base-trigger';
import Dropdown from 'intergalactic/dropdown';
import Button from 'intergalactic/button';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';
import Tooltip from 'intergalactic/tooltip';

const Demo = () => {
  const [filters, setFilters] = React.useState(0);
  const [visible, setVisible] = React.useState(false);

  return (
    <>
      <Text tag='label' htmlFor='advance-trigger' size={300}>
        Filter trigger for several filters inside
      </Text>
      <Box mt={2}>
        <Dropdown visible={visible} onVisibleChange={(v) => setVisible(v)}>
          <Dropdown.Trigger
            placeholder='Advanced filters'
            active={visible}
            empty={!filters}
            onClear={() => {
              setFilters(0);
              setVisible(false);
            }}
            tag={FilterTrigger}
            id='advance-trigger'
          >
            <FilterTrigger.TriggerButton>
              <FilterTrigger.Text>Advanced filters</FilterTrigger.Text>
              {!!filters && (
                <FilterTrigger.Counter aria-label='Applied filters count'>
                  {filters}
                </FilterTrigger.Counter>
              )}
            </FilterTrigger.TriggerButton>
            {Boolean(filters) && (
              <Tooltip title={'Clear value'}>
                <FilterTrigger.ClearButton />
              </Tooltip>
            )}
          </Dropdown.Trigger>
          <Dropdown.Popper p={5}>
            <Button
              onClick={() => {
                setFilters(filters + 1);
              }}
            >
              Set filters
            </Button>
          </Dropdown.Popper>
        </Dropdown>
      </Box>
    </>
  );
};

export default Demo;

import React from 'react';
import { FilterTrigger } from 'intergalactic/base-trigger';
import Dropdown from 'intergalactic/dropdown';
import Button from 'intergalactic/button';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';
import Tooltip from 'intergalactic/tooltip';

const Demo = () => {
  const [filters, setFilters] = React.useState(0);
  const [visible, setVisible] = React.useState(false);

  return (
    <>
      <Text tag='label' htmlFor='advance-trigger' size={300}>
        Filter trigger for several filters inside
      </Text>
      <Box mt={2}>
        <Dropdown visible={visible} onVisibleChange={(v) => setVisible(v)}>
          <Dropdown.Trigger
            placeholder='Advanced filters'
            active={visible}
            empty={!filters}
            onClear={() => {
              setFilters(0);
              setVisible(false);
            }}
            tag={FilterTrigger}
            id='advance-trigger'
          >
            <FilterTrigger.TriggerButton>
              <FilterTrigger.Text>Advanced filters</FilterTrigger.Text>
              {!!filters && (
                <FilterTrigger.Counter aria-label='Applied filters count'>
                  {filters}
                </FilterTrigger.Counter>
              )}
            </FilterTrigger.TriggerButton>
            {Boolean(filters) && (
              <Tooltip title={'Clear value'}>
                <FilterTrigger.ClearButton />
              </Tooltip>
            )}
          </Dropdown.Trigger>
          <Dropdown.Popper p={5}>
            <Button
              onClick={() => {
                setFilters(filters + 1);
              }}
            >
              Set filters
            </Button>
          </Dropdown.Popper>
        </Dropdown>
      </Box>
    </>
  );
};

export default Demo;

Accessibility

Writing code

CSS Injection

Usage with Select

Programmatic focus

Hint for clear button

Accessibility

CSS Injection

FilterTrigger

Usage with Select ​

Usage with Dropdown ​

Programmatic focus ​

Hint for clear button ​

Usage with Select

Usage with Dropdown

Programmatic focus

Hint for clear button