@wix/design-system 1.193.0 → 1.195.0

package/dist/docs/components/MultiSelectCheckboxExamples.md

@@ -0,0 +1,958 @@
+
+## Feature Examples
+
+
+### Size
+- description: <p>Adjust the component <code>size</code> using the size prop. It supports 3 sizes:</p><li><code>large</code> - use it in onboarding flows, where the field needs emphasis.</li><li><code>medium</code> (default) - use in all common cases.</li><li><code>small</code> - use in more dense and narrow layouts.</li>
+- example: 
+```jsx 
+() => {
+  const options = [
+    { value: 'Option 1', id: '1' },
+    { value: 'Option 2', id: '2' },
+    { value: 'Option 3', id: '3' },
+    { value: 'Option 4', id: '4' },
+    { value: 'Option 5', id: '5' },
+  ];
+
+  return (
+    <StorybookComponents.Stack flexDirection="column">
+      <MultiSelectCheckbox size="large" placeholder="Large" options={options} />
+      <MultiSelectCheckbox
+        size="medium"
+        placeholder="Medium"
+        options={options}
+      />
+      <MultiSelectCheckbox size="small" placeholder="Small" options={options} />
+    </StorybookComponents.Stack>
+  );
+};
+```
+
+### Border
+- description: <p>Style the component using the <code>border</code> prop. It supports 4 styles:</p><li><code>standard</code> (default) - use in forms.</li><li><code>round</code> - use when the component is used as a filter.</li><li><code>bottomLine</code> - use as a title which can be edited on the click.</li><li><code>none</code> - use in Content Manager's spreadsheet cell.</li>
+- example: 
+```jsx 
+() => {
+  const options = [
+    { value: 'Option 1', id: '1' },
+    { value: 'Option 2', id: '2' },
+    { value: 'Option 3', id: '3' },
+    { value: 'Option 4', id: '4' },
+    { value: 'Option 5', id: '5' },
+  ];
+
+  return (
+    <StorybookComponents.Stack flexDirection="column">
+      <MultiSelectCheckbox
+        border="standard"
+        placeholder="Standard"
+        options={options}
+      />
+      <MultiSelectCheckbox
+        border="round"
+        placeholder="Round"
+        options={options}
+      />
+      <MultiSelectCheckbox
+        border="bottomLine"
+        placeholder="Bottom line"
+        options={options}
+      />
+      <MultiSelectCheckbox border="none" placeholder="None" options={options} />
+    </StorybookComponents.Stack>
+  );
+};
+```
+
+### Status
+- description: <p>Control the component status using a <code>status</code> prop. It supports 3 states:</p><li><code>error</code> - use to highlight an invalid selection.</li><li><code>warning</code> - use to highlight a value that impacts the user or that can’t be validated.</li><li><code>loading</code> - use to show that the value is being uploaded to the server.</li>
+- example: 
+```jsx 
+() => {
+  const options = [
+    { value: 'Option 1', id: '1' },
+    { value: 'Option 2', id: '2' },
+    { value: 'Option 3', id: '3' },
+    { value: 'Option 4', id: '4' },
+    { value: 'Option 5', id: '5' },
+  ];
+
+  return (
+    <StorybookComponents.Stack flexDirection="column">
+      <MultiSelectCheckbox
+        status="error"
+        placeholder="Error"
+        options={options}
+      />
+      <MultiSelectCheckbox
+        status="warning"
+        placeholder="Warning"
+        options={options}
+      />
+      <MultiSelectCheckbox
+        status="loading"
+        placeholder="Loading"
+        options={options}
+      />
+    </StorybookComponents.Stack>
+  );
+};
+```
+
+### Status message
+- description: <p>Add text that explains the status or what action the user should take with the <code>statusMessage</code> prop.</p><p></p><p>Showing the status message inline, directly below the component is preferred in all default cases.</p><li>To add an accessible inline message, wrap the component in a <code><FormField/></code> and add the <code>statusMessage</code>.</li><li>To add a status message in a tooltip that requires users to hover on the icon, use the <code>statusMessage</code> prop. Control tooltip placement with <code>tooltipPlacement</code> prop.</li><p></p><p>View more inline status message examples in <code><FormField/></code>.</p>
+- example: 
+```jsx 
+() => {
+  const options = [
+    { value: 'Option 1', id: '1' },
+    { value: 'Option 2', id: '2' },
+    { value: 'Option 3', id: '3' },
+    { value: 'Option 4', id: '4' },
+    { value: 'Option 5', id: '5' },
+  ];
+
+  return (
+    <StorybookComponents.Stack flexDirection="column">
+      <StorybookComponents.Stack flexDirection="column" gap="12px">
+        <Text secondary>For all default cases:</Text>
+        <FormField status="error" statusMessage="This is an error message.">
+          <MultiSelectCheckbox
+            placeholder="See message below"
+            tooltipPlacement="top-end"
+            options={options}
+          />
+        </FormField>
+      </StorybookComponents.Stack>
+      <StorybookComponents.Stack flexDirection="column" gap="12px">
+        <Text secondary>For narrow layouts only:</Text>
+        <MultiSelectCheckbox
+          placeholder="Hover on status icon"
+          status="error"
+          statusMessage="This is an error message."
+          tooltipPlacement="top-end"
+          options={options}
+        />
+      </StorybookComponents.Stack>
+    </StorybookComponents.Stack>
+  );
+};
+```
+
+### Disabled
+- description: <p>Disable all input interactions with <code>disabled</code> prop. Use to highlight unavailable functions.</p>
+- example: 
+```jsx 
+() => {
+  const options = [
+    { value: 'Option 1', id: '1' },
+    { value: 'Option 2', id: '2' },
+    { value: 'Option 3', id: '3' },
+    { value: 'Option 4', id: '4' },
+    { value: 'Option 5', id: '5' },
+  ];
+
+  return (
+    <MultiSelectCheckbox placeholder="Disabled" disabled options={options} />
+  );
+};
+```
+
+### Affix
+- description: <p>Support the input value with additional information added to the <code>prefix</code> and <code>suffix</code> props.</p><p></p><p>These areas can contain text, icons and even badges.</p>
+- example: 
+```jsx 
+() => {
+  const options = [
+    { id: 0, value: 'Option 1' },
+    { id: 1, value: 'Option 2' },
+    { id: 2, value: 'Option 3' },
+  ];
+
+  return (
+    <StorybookComponents.Stack flexDirection="column">
+      <MultiSelectCheckbox
+        placeholder="Select"
+        prefix={<Input.Affix>Prefix</Input.Affix>}
+        suffix={<Input.Affix>Suffix</Input.Affix>}
+        options={options}
+      />
+      <MultiSelectCheckbox
+        placeholder="Select"
+        prefix={
+          <Input.IconAffix>
+            <Icons.Languages />
+          </Input.IconAffix>
+        }
+        suffix={
+          <Input.IconAffix>
+            <Badge>Badge</Badge>
+          </Input.IconAffix>
+        }
+        options={options}
+      />
+    </StorybookComponents.Stack>
+  );
+};
+```
+
+### Clear button
+- description: <p>Enable a button that clears the dropdown value by using <code>clearButton</code> prop. Show it when the field value is optional or needs to be cleared.</p>
+- example: 
+```jsx 
+() => {
+  const [selectedOptions, setSelectedOptions] = React.useState([0]);
+  const options = [{ id: 0, value: 'Click clear button to remove selection' }];
+
+  return (
+    <MultiSelectCheckbox
+      placeholder="Select"
+      clearButton
+      onClear={() => setSelectedOptions([])}
+      onSelect={(option) => setSelectedOptions([option])}
+      selectedOptions={selectedOptions}
+      options={options}
+    />
+  );
+};
+```
+
+### Fixed header and footer
+- description: <p>Add related actions to <code>fixedFooter</code> or <code>fixedHeader</code> areas. Areas keep their position on scroll.</p>
+- example: 
+```jsx 
+() => {
+  const options = [
+    { id: 1, value: 'Option 1' },
+    { id: 2, value: 'Option 2' },
+    { id: 3, value: 'Option 3' },
+    { id: 4, value: 'Option 4' },
+    { id: 5, value: 'Option 5' },
+  ];
+
+  return (
+    <MultiSelectCheckbox
+      placeholder="Select"
+      fixedHeader={<ListItemAction title="Fixed Header" />}
+      fixedFooter={<ListItemAction title="Fixed Footer" />}
+      options={options}
+    />
+  );
+};
+```
+
+### List item builders
+- description: <p>Build custom options layouts with:</p><li><code>listItemSectionBuilder</code> - use to group items into sections by type. See <code><ListItemSection/></code> for more details.</li><li><code>listItemActionBuilder</code> - use to add text button for related list actions, i.e. ‘Manage categories’. See <code><ListItemAction/></code> for more details.</li><li><code>listItemSelectBuilder</code> - use to build custom list designs. See <code><ListItemSelect/></code> for more details.</li>
+- example: 
+```jsx 
+() => {
+  const listItemSectionOptions = [
+    listItemSectionBuilder({
+      type: 'title',
+      title: 'Section 1',
+    }),
+    { id: 0, value: 'Option 1' },
+    { id: 1, value: 'Option 2' },
+    { id: 2, value: 'Option 3' },
+    listItemSectionBuilder({
+      type: 'divider',
+    }),
+
+    listItemSectionBuilder({
+      type: 'title',
+      title: 'Section 2',
+    }),
+    { id: 3, value: 'Option 4' },
+    { id: 4, value: 'Option 4' },
+  ];
+
+  const listItemActionOptions = [
+    { id: 0, value: 'Option 1' },
+    { id: 1, value: 'Option 2' },
+    { id: 2, value: 'Option 3' },
+    { id: 3, value: 'Option 4' },
+    listItemActionBuilder({
+      title: 'Action',
+    }),
+  ];
+
+  const listItemSelectOptions = [
+    listItemSelectBuilder({
+      id: 0,
+      prefix: <Avatar size="size30" />,
+      title: 'Title',
+      subtitle: 'Subtitle',
+      suffix: 'Suffix',
+      checkbox: true,
+    }),
+    listItemSelectBuilder({
+      id: 1,
+      prefix: <Avatar size="size30" />,
+      title: 'Title',
+      subtitle: 'Subtitle',
+      suffix: 'Suffix',
+      checkbox: true,
+    }),
+    listItemSelectBuilder({
+      id: 2,
+      prefix: <Avatar size="size30" />,
+      title: 'Title',
+      subtitle: 'Subtitle',
+      suffix: 'Suffix',
+      checkbox: true,
+    }),
+  ];
+
+  return (
+    <StorybookComponents.Stack flexDirection="column">
+      <MultiSelectCheckbox
+        placeholder="List Item Section"
+        options={listItemSectionOptions}
+      />
+      <MultiSelectCheckbox
+        placeholder="List Item Action"
+        options={listItemActionOptions}
+      />
+      <MultiSelectCheckbox
+        placeholder="List Item Select"
+        options={listItemSelectOptions}
+      />
+    </StorybookComponents.Stack>
+  );
+};
+```
+
+### List container dimensions
+- description: <p>Control the container size for options with:</p><li><code>maxHeightPixels</code> - use to specify maximum height for longer lists.</li><li><code>dropdownWidth</code> - set width to 'auto' or 'max-content' to match content width or specify it in pixels.</li><li><code>minWidthPixels</code> - use to increase dropdown popover width manually.</li><p></p><p>By default, the dropdown matches the input field width.</p>
+- example: 
+```jsx 
+() => {
+  const options = [
+    { id: 0, value: 'Option 1' },
+    { id: 1, value: 'Option 2' },
+    { id: 2, value: 'Option 3' },
+    { id: 3, value: 'Option 4' },
+    { id: 4, value: 'Option 5' },
+    { id: 5, value: 'Option 6' },
+    { id: 6, value: 'Option 7' },
+    { id: 7, value: 'Option 8' },
+  ];
+
+  return (
+    <StorybookComponents.Stack>
+      <MultiSelectCheckbox
+        placeholder="Select"
+        maxHeightPixels="200px"
+        dropdownWidth="auto"
+        minWidthPixels="400px"
+        options={options}
+        popoverProps={{
+          placement: 'bottom-start',
+        }}
+      />
+    </StorybookComponents.Stack>
+  );
+};
+```
+
+### Marked option
+- description: <p>Control what to highlight with a hover state once the dropdown is opened with the <code>markedOption</code> prop.</p>
+- example: 
+```jsx 
+<MultiSelectCheckbox
+  placeholder="Select"
+  markedOption={1}
+  options={[
+    { id: 0, value: 'Option 1' },
+    { id: 1, value: 'Option 2' },
+    { id: 2, value: 'Option 3' },
+  ]}
+/>;
+```
+
+### Delimiter
+- description: <p>Specify what character to use to separate selected options with the <code>delimiter</code> prop.</p>
+- example: 
+```jsx 
+() => {
+  const options = [
+    { id: 0, value: 'Option 1' },
+    { id: 1, value: 'Option 2' },
+    { id: 2, value: 'Option 3' },
+    { id: 3, value: 'Option 4' },
+  ];
+
+  return (
+    <StorybookComponents.Stack flexDirection="column">
+      <MultiSelectCheckbox
+        placeholder="Select"
+        selectedOptions={[0, 1, 2]}
+        delimiter=", "
+        options={options}
+      />
+      <MultiSelectCheckbox
+        placeholder="Select"
+        selectedOptions={[0, 1, 2]}
+        delimiter=";  "
+        options={options}
+      />
+    </StorybookComponents.Stack>
+  );
+};
+```
+
+### Lazy loading
+- description: <p>Indicate that options are loading from a server or load a large list of items gradually with the <code>infiniteScroll</code>, <code>loadMore</code> and <code>hasMore</code> props.</p>
+- example: 
+```jsx 
+() => {
+  const [selectedOptions, setSelectedOptions] = React.useState([]);
+
+  const [data, setData] = React.useState([]);
+  const fetchMoreData = () =>
+    Promise.resolve(
+      fetch(`/api/dropdown?limit=${5}&offset=${data.length}`),
+    ).then((results) => setData([...data, ...results]));
+
+  React.useEffect(() => {
+    fetchMoreData();
+  }, []);
+
+  return (
+    <MultiSelectCheckbox
+      placeholder="Select"
+      options={data}
+      infiniteScroll
+      hasMore={true}
+      loadMore={fetchMoreData}
+      selectedOptions={selectedOptions}
+      onSelect={(option) => setSelectedOptions([...selectedOptions, option])}
+      onDeselect={(option) =>
+        setSelectedOptions(selectedOptions.filter((item) => item !== option))
+      }
+    />
+  );
+};
+```
+
+### Text overflow
+- description: <p>Control text overflow for:</p><li>The field itself: set the <code>textOverflow</code> prop either to clip or ellipsis.</li><li>The dropdown layout: it wraps longer values by default. In order to have ellipses, select the items that have to be rendered with the <code>listItemSelectBuilder</code>.</li>
+- example: 
+```jsx 
+() => {
+  const options = [
+    { id: 0, value: 'Option 1' },
+    { id: 1, value: 'Option 2' },
+    { id: 2, value: 'Option 3' },
+    { id: 3, value: 'Option 4' },
+    { id: 4, value: 'Option 5' },
+  ];
+  const longOptions = [
+    {
+      id: 0,
+      value: 'This is a long value that make dropdown layout grow',
+    },
+    {
+      id: 1,
+      value: 'This is a long value that make dropdown layout grow',
+    },
+    {
+      id: 2,
+      value: 'This is a long value that make dropdown layout grow',
+    },
+  ];
+  const longOptionsWithEllipsis = [
+    listItemSelectBuilder({
+      id: 0,
+      title: 'This is a long value that make dropdown layout grow',
+      ellipsis: true,
+      checkbox: true,
+    }),
+    listItemSelectBuilder({
+      id: 1,
+      title: 'This is a long value that make dropdown layout grow',
+      ellipsis: true,
+      checkbox: true,
+    }),
+    listItemSelectBuilder({
+      id: 2,
+      title: 'This is a long value that make dropdown layout grow',
+      ellipsis: true,
+      checkbox: true,
+    }),
+  ];
+  return (
+    <StorybookComponents.Stack flexDirection="column">
+      <StorybookComponents.Stack>
+        <FormField label="Input value - ellipsis">
+          <MultiSelectCheckbox
+            options={options}
+            selectedOptions={[0, 1, 2, 3, 4]}
+            placeholder="This field is showing ellipsis at the end of this line"
+            textOverflow="ellipsis"
+          />
+        </FormField>
+        <FormField label="Input value - clip">
+          <MultiSelectCheckbox
+            options={options}
+            selectedOptions={[0, 1, 2, 3, 4]}
+            placeholder="This field is clipping content at the end of this line"
+            textOverflow="clip"
+          />
+        </FormField>
+      </StorybookComponents.Stack>
+      <StorybookComponents.Stack>
+        <FormField label="Options - wrapping">
+          <MultiSelectCheckbox options={longOptions} placeholder="Select" />
+        </FormField>
+        <FormField label="Options - with ellipsis">
+          <MultiSelectCheckbox
+            options={longOptionsWithEllipsis}
+            placeholder="Select"
+          />
+        </FormField>
+      </StorybookComponents.Stack>
+    </StorybookComponents.Stack>
+  );
+};
+```
+
+### Selected items value
+- description: <p>Customize how the selected values are represented inside of an input.</p>
+- example: 
+```jsx 
+() => {
+  const [state, setState] = React.useState({
+    selectedOptions: [0, 1, 2, 3, 4],
+    inputValue: 'All items selected',
+  });
+  const getInputValue = (selectedOptions) => {
+    if (selectedOptions.length === optionsList.length) {
+      return 'All items selected';
+    }
+    return selectedOptions
+      .map((id) => optionsList.find((option) => option.id === id).value)
+      .join(', ');
+  };
+  const onSelect = (optionId) => {
+    const selectedOptions = [...state.selectedOptions, optionId];
+    setState({ selectedOptions, inputValue: getInputValue(selectedOptions) });
+  };
+  const onDeselect = (optionId) => {
+    const selectedOptions = state.selectedOptions.filter(
+      (item) => item !== optionId,
+    );
+    setState({ selectedOptions, inputValue: getInputValue(selectedOptions) });
+  };
+  const optionsList = [
+    { value: 'Option 1', id: 0 },
+    { value: 'Option 2', id: 1 },
+    { value: 'Option 3', id: 2 },
+    { value: 'Option 4', id: 3 },
+    { value: 'Option 5', id: 4 },
+  ];
+  return (
+    <MultiSelectCheckbox
+      options={optionsList}
+      selectedOptions={state.selectedOptions}
+      onSelect={onSelect}
+      onDeselect={onDeselect}
+      value={state.inputValue}
+    />
+  );
+};
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Form element
+- description: Use MultiSelectCheckbox in forms to apply multiple values.
+- example: 
+```jsx 
+
+() => {
+  const serviceOptions = [
+    { id: 0, value: 'Web design' },
+    { id: 1, value: 'Branding' },
+    { id: 2, value: 'SEO' },
+    { id: 3, value: 'Web development' },
+    { id: 4, value: 'Marketing' },
+  ];
+  const businessOptions = [
+    { id: 0, value: 'Agency' },
+    { id: 1, value: 'Freelancer' },
+    { id: 2, value: 'Other' },
+  ];
+  const renderServiceMultiSelect = () => {
+    const [selectedOptions, setSelectedOptions] = React.useState([1, 2]);
+    return (
+      <FormField label="What services do you offer?">
+        <MultiSelectCheckbox
+          options={serviceOptions}
+          selectedOptions={selectedOptions}
+          onSelect={option => setSelectedOptions([...selectedOptions, option])}
+          onDeselect={option =>
+            setSelectedOptions(selectedOptions.filter(item => item !== option))
+          }
+        />
+      </FormField>
+    );
+  };
+  const renderBusinessDropdown = () => {
+    const [selected, setSelected] = React.useState(1);
+    return (
+      <FormField label="What best describes your business?" required>
+        <Dropdown
+          placeholder="Select"
+          selectedId={selected}
+          options={businessOptions}
+          onSelect={option => setSelected(option.id)}
+        />
+      </FormField>
+    );
+  };
+  const renderBusinessLogoUpload = (
+    <FormField label="Business Logo" infoContent="Minimum size 300 x 100 px">
+      <FileUpload>
+        {({ openFileUploadDialog }) => (
+          <Box width="200px" height="132px">
+            <AddItem
+              theme="image"
+              tooltipContent="Upload Logo"
+              onClick={openFileUploadDialog}
+            >
+              Add Item
+            </AddItem>
+          </Box>
+        )}
+      </FileUpload>
+    </FormField>
+  );
+  const renderMainBusinessInfoFields = (
+    <Layout cols={1}>
+      <FormField label="Business Name" required>
+        <Input placeholder="Type your business name" />
+      </FormField>
+      <FormField label="Business Site URL">
+        <Input placeholder="https://www.mybusinesswebsite.com" />
+      </FormField>
+    </Layout>
+  );
+  return (
+    <Card>
+      <Card.Header
+        title="Business Details"
+        subtitle="These details will be used for emailing, invoicing, and more."
+      />
+      <Card.Divider />
+      <Card.Content>
+        <Layout>
+          <Cell span={8}>{renderMainBusinessInfoFields}</Cell>
+          <Cell span={4}>{renderBusinessLogoUpload}</Cell>
+          <Cell>
+            <Divider />
+          </Cell>
+          <Cell>
+            <Heading size="small">More Details</Heading>
+          </Cell>
+          <Cell>
+            <Layout>
+              <Cell span={6}>{renderBusinessDropdown()}</Cell>
+              <Cell span={6}>{renderServiceMultiSelect()}</Cell>
+            </Layout>
+          </Cell>
+        </Layout>
+      </Card.Content>
+    </Card>
+  );
+};
+
+```
+
+### List item builders
+- description: Build custom layouts within a list item builder for advanced filters.
+- example: 
+```jsx 
+
+() => {
+  const [filterOptions, setFilterOptions] = React.useState({
+    filterBy: [],
+    selectedOptions: [],
+  });
+
+  const authorOptions = [
+    listItemSectionBuilder({
+      type: 'title',
+      title: 'In-house',
+    }),
+    { id: 0, value: 'Christian Mills' },
+    { id: 1, value: 'Etta Wheeler' },
+    { id: 2, value: 'Paul Simons' },
+    listItemSectionBuilder({
+      type: 'divider',
+    }),
+
+    listItemSectionBuilder({
+      type: 'title',
+      title: 'Contributors',
+    }),
+    { id: 3, value: 'Robert Ortega' },
+    { id: 4, value: 'Mary James' },
+  ];
+
+  const [items, setItems] = React.useState([
+    {
+      id: 0,
+      title: 'Getting a grasp on adventure',
+      author: 'Christian Mills',
+      contributor: 'Robert Ortega',
+      date: 'Jan 26, 2021',
+      checked: false,
+    },
+    {
+      id: 1,
+      title: '10 tips for relaxation',
+      author: 'Etta Wheeler',
+      contributor: 'Mary James',
+      date: 'Jun 9, 2020',
+      checked: false,
+    },
+    {
+      id: 2,
+      title: 'Performance standards for digital trust and safety',
+      author: 'Paul Simons',
+      contributor: 'Mary James',
+      date: 'Sep 12, 2020',
+      checked: false,
+    },
+    {
+      id: 3,
+      title: 'Getting a grasp on adventure',
+      author: 'Christian Mills',
+      contributor: 'Robert Ortega',
+      date: 'Jan 26, 2021',
+      checked: false,
+    },
+  ]);
+
+  const onAuthorFilterSelect = id => {
+    setFilterOptions({
+      selectedOptions: [...filterOptions.selectedOptions, id],
+      filterBy: [
+        ...filterOptions.filterBy,
+        authorOptions.find(item => item.id === id).value,
+      ],
+    });
+  };
+
+  const onAuthorFilterDeselect = id => {
+    const selectedOptions = filterOptions.selectedOptions.filter(
+      item => item !== id,
+    );
+
+    setFilterOptions({
+      filterBy: selectedOptions.map(
+        id => authorOptions.find(author => author.id === id).value,
+      ),
+      selectedOptions,
+    });
+  };
+
+  const renderAddToCategory = () => {
+    const [shown, setShown] = React.useState(false);
+    const [categories, setCategories] = React.useState([
+      {
+        id: 0,
+        title: 'Getting started',
+        checked: false,
+      },
+      {
+        id: 1,
+        title: 'Your Community',
+        checked: false,
+      },
+    ]);
+
+    return (
+      !isAllUnchecked() && (
+        <Popover
+          showArrow
+          shown={shown}
+          appendTo="viewport"
+          placement="bottom"
+          width="250px"
+          onClickOutside={() => setShown(false)}
+        >
+          <Popover.Element>
+            <TextButton
+              size="small"
+              prefixIcon={<Icons.Tag />}
+              onClick={() => setShown(!shown)}
+            >
+              Add to Category
+            </TextButton>
+          </Popover.Element>
+          <Popover.Content>
+            <Box
+              backgroundColor="D80"
+              direction="vertical"
+              gap="SP2"
+              padding="SP3"
+            >
+              <Text light secondary size="small">
+                Categories
+              </Text>
+              {categories.map(category => (
+                <Checkbox
+                  checked={category.checked}
+                  onChange={() =>
+                    setCategories(
+                      categories.map(item =>
+                        item.id === category.id
+                          ? { ...category, checked: !category.checked }
+                          : item,
+                      ),
+                    )
+                  }
+                >
+                  {category.title}
+                </Checkbox>
+              ))}
+              <Divider />
+              <Box align="space-between" paddingTop="SP2">
+                <Button
+                  skin="inverted"
+                  size="small"
+                  onClick={() => setShown(false)}
+                >
+                  Cancel
+                </Button>
+                <Button size="small" onClick={() => setShown(false)}>
+                  Apply
+                </Button>
+              </Box>
+            </Box>
+          </Popover.Content>
+        </Popover>
+      )
+    );
+  };
+
+  const renderAuthorsSelect = () =>
+    isAllUnchecked() && (
+      <MultiSelectCheckbox
+        value="All authors"
+        size="small"
+        dropdownWidth="240px"
+        maxHeightPixels="400px"
+        border="round"
+        options={authorOptions}
+        popoverProps={{
+          placement: 'bottom-start',
+        }}
+        selectedOptions={filterOptions.selectedOptions}
+        onSelect={onAuthorFilterSelect}
+        onDeselect={onAuthorFilterDeselect}
+      />
+    );
+
+  const renderTableItem = item => {
+    return (
+      <TableListItem
+        checkbox
+        checked={item.checked}
+        onCheckboxChange={() =>
+          setItems(
+            items.map(currentItem =>
+              currentItem.id === item.id
+                ? { ...item, checked: !item.checked }
+                : currentItem,
+            ),
+          )
+        }
+        showDivider
+        options={[
+          { value: <Image />, width: '90px' },
+          {
+            value: (
+              <Box direction="vertical" gap="3px">
+                <Text>{item.title}</Text>
+                <Text size="tiny" secondary>
+                  {item.date} • {item.author}
+                </Text>
+              </Box>
+            ),
+          },
+          {
+            width: '20%',
+            value: (
+              <TableActionCell
+                primaryAction={{
+                  text: 'Edit',
+                  skin: 'standard',
+                }}
+              />
+            ),
+          },
+        ]}
+      />
+    );
+  };
+
+  const renderTableItems = () => {
+    if (filterOptions.filterBy.length === 0) {
+      return items.map(item => renderTableItem(item));
+    }
+
+    const filtered = items.filter(item =>
+      filterOptions.filterBy.find(
+        filter => filter === item.author || filter === item.contributor,
+      ),
+    );
+    return filtered.map(item => renderTableItem(item));
+  };
+
+  const isAllChecked = () =>
+    items.filter(item => item.checked).length === items.length;
+  const isAllUnchecked = () => items.filter(item => item.checked).length === 0;
+
+  const toggleAll = checked =>
+    setItems(items.map(item => ({ ...item, checked })));
+
+  return (
+    <Card>
+      <Card.Header
+        title={
+          <Checkbox
+            onChange={() => {
+              isAllChecked() ? toggleAll(false) : toggleAll(true);
+            }}
+            checked={isAllChecked()}
+          >
+            Select all
+          </Checkbox>
+        }
+        suffix={
+          <>
+            {renderAuthorsSelect()}
+            {renderAddToCategory()}
+          </>
+        }
+      />
+      <Card.Divider />
+      {renderTableItems()}
+    </Card>
+  );
+};
+
+```
+
+