feat: added Multiselect component

ui/components/src/Multiselect/Multiselect.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Button } from 'theme-ui';
+import { Multiselect, MultiselectItem } from './Multiselect';
+
+export default {
+  title: 'Components/Multiselect',
+  component: Multiselect,
+};
+
+export const overview = () => {
+  const [state, setState] = React.useState<MultiselectItem[]>([
+    {
+      label: 'option-1',
+      selected: true,
+    },
+    {
+      label: 'option-2',
+      selected: false,
+    },
+    {
+      label: 'option-3',
+      selected: false,
+    },
+  ]);
+  return (
+    <Multiselect
+      items={state}
+      onChange={item => {
+        setState(
+          state.map(i => (i === item ? { ...i, selected: !i.selected } : i)),
+        );
+      }}
+    >
+      <Button>open</Button>
+    </Multiselect>
+  );
+};

ui/components/src/Multiselect/Multiselect.tsx

@@ -0,0 +1,53 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx, Box, Label, Checkbox } from 'theme-ui';
+import { Popover, PopoverProps } from '../Popover';
+
+export interface MultiselectItem {
+  label: string;
+  selected: boolean;
+}
+export interface MultiselectOwnProps {
+  /**
+   * array of items to select from
+   */
+  items: MultiselectItem[];
+  /**
+   * function called when the selected state of an item changes
+   */
+  onChange: (item: MultiselectItem) => void;
+}
+
+export type MultiselectProps = MultiselectOwnProps &
+  Omit<PopoverProps, 'tooltip'>;
+
+/**
+ * A Popover multiselect displaying checkboxes for select/unselect.
+ */
+export const Multiselect: FC<MultiselectProps> = ({
+  items,
+  onChange,
+  ...props
+}) => {
+  return (
+    <Popover
+      trigger={['click']}
+      {...props}
+      tooltip={() => (
+        <Box variant="multiselect.container">
+          {items.map(item => (
+            <Box key={`multi_select_${item.label}`} variant="multiselect.item">
+              <Label>
+                <Checkbox
+                  onChange={() => onChange(item)}
+                  checked={item.selected}
+                />
+                {item.label}
+              </Label>
+            </Box>
+          ))}
+        </Box>
+      )}
+    />
+  );
+};

ui/components/src/Multiselect/index.ts

@@ -0,0 +1 @@
+export * from './Multiselect';

ui/components/src/ThemeContext/theme.ts

@@ -31,6 +31,7 @@ export type ControlsTheme = {
   blockcontainer: Record<string, ThemeUIStyleObject>;
   blockpagecontainer: Record<string, ThemeUIStyleObject>;
   linkheading: Record<string, ThemeUIStyleObject>;
+  multiselect: Record<string, ThemeUIStyleObject>;
   searchinput: Record<string, ThemeUIStyleObject>;
   subtitle: ThemeUIStyleObject;
   subheading: ThemeUIStyleObject;
@@ -472,6 +473,15 @@ export const theme: ControlsTheme = {
       },
     },
   },
+  multiselect: {
+    container: {
+      px: 3,
+      py: 1,
+    },
+    item: {
+      py: 1,
+    },
+  },
   searchinput: {
     popover: {
       minWidth: 300,

ui/components/src/index.ts

@@ -8,6 +8,7 @@ export * from './Header';
 export * from './Keyboard';
 export * from './Link';
 export * from './Markdown';
+export * from './Multiselect';
 export * from './Navmenu';
 export * from './Pagination';
 export * from './PanelContainer';