tag group select component

theme/components/Tag/Tag.ts

@@ -3,9 +3,11 @@ import {
   createMultiStyleConfigHelpers,
   defineStyle,
 } from '@chakra-ui/styled-system';
+import { mode } from '@chakra-ui/theme-tools';
 
 import getDefaultTransitionProps from '../../utils/getDefaultTransitionProps';
 import Badge from '../Badge';
+
 const transitionProps = getDefaultTransitionProps();
 
 const { defineMultiStyleConfig, definePartsStyle } =
@@ -15,6 +17,23 @@ const variants = {
   subtle: definePartsStyle((props) => ({
     container: Badge.variants?.subtle(props),
   })),
+  select: definePartsStyle((props) => ({
+    container: {
+      bg: mode('gray.100', 'gray.800')(props),
+      color: mode('gray.500', 'whiteAlpha.800')(props),
+      _hover: {
+        color: 'blue.400',
+        opacity: 0.76,
+      },
+      [`
+        &[data-selected=true],
+        &[data-selected=true][aria-selected=true]
+      `]: {
+        bg: mode('blue.500', 'blue.900')(props),
+        color: 'whiteAlpha.800',
+      },
+    },
+  })),
 };
 
 const sizes = {

ui/shared/tagGroupSelect/TagGroupSelect.pw.tsx

@@ -0,0 +1,22 @@
+import _noop from 'lodash/noop';
+import React from 'react';
+
+import { test, expect } from 'playwright/lib';
+
+import TagGroupSelect from './TagGroupSelect';
+
+test.use({ viewport: { width: 480, height: 140 } });
+
+test('base view +@dark-mode', async({ render }) => {
+  const component = await render(
+    <TagGroupSelect
+      items={ [ { id: '1', title: 'Option 1' }, { id: '2', title: 'Option 2' }, { id: 'duck', title: 'Cute little duck' } ] }
+      value="duck"
+      onChange={ _noop }
+    />,
+  );
+
+  await component.getByText('Option 2').hover();
+
+  await expect(component).toHaveScreenshot();
+});

ui/shared/tagGroupSelect/TagGroupSelect.tsx

@@ -0,0 +1,56 @@
+import { HStack, Tag } from '@chakra-ui/react';
+import React from 'react';
+
+type Props<T extends string> = {
+  items: Array<{ id: T; title: string }>;
+} & (
+  {
+    value: T;
+    onChange: (value: T) => void;
+    isMulti?: false;
+  } | {
+    value: Array<T>;
+    onChange: (value: Array<T>) => void;
+    isMulti: true;
+  }
+)
+
+const TagGroupSelect = <T extends string>({ items, value, isMulti, onChange }: Props<T>) => {
+  const onItemClick = React.useCallback((event: React.SyntheticEvent) => {
+    const itemValue = (event.currentTarget as HTMLDivElement).getAttribute('data-id') as T;
+    if (isMulti) {
+      let newValue;
+      if (value.includes(itemValue)) {
+        newValue = value.filter(i => i !== itemValue);
+      } else {
+        newValue = [ ...value, itemValue ];
+      }
+      onChange(newValue);
+    } else {
+      onChange(itemValue);
+    }
+  }, [ isMulti, onChange, value ]);
+
+  return (
+    <HStack>
+      { items.map(item => {
+        const isSelected = isMulti ? value.includes(item.id) : value === item.id;
+        return (
+          <Tag
+            variant="select"
+            key={ item.id }
+            data-id={ item.id }
+            data-selected={ isSelected }
+            fontWeight={ 500 }
+            cursor="pointer"
+            onClick={ onItemClick }
+          >
+            { item.title }
+          </Tag>
+        );
+      }) }
+    </HStack>
+  );
+};
+
+export default TagGroupSelect;