@nixxie-cms/core 1.0.0

package/fields/types/relationship/views/dist/nixxie-cms-core-fields-types-relationship-views.esm.js

@@ -0,0 +1,1201 @@
+import { useListFormatter } from '@react-aria/i18n';
+import { useState, useMemo, useEffect, Fragment as Fragment$1 } from 'react';
+import { DialogContainer } from '@keystar/ui/dialog';
+import { Grid, HStack, VStack } from '@keystar/ui/layout';
+import { TextLink } from '@keystar/ui/link';
+import { TagGroup, Item as Item$2 } from '@keystar/ui/tag';
+import { TextField } from '@keystar/ui/text-field';
+import { Text, Numeral } from '@keystar/ui/typography';
+import { TableView, TableHeader, Column, TableBody, Row, Cell as Cell$1 } from '@keystar/ui/table';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { css } from '@keystar/ui/style';
+import '@keystar/ui/checkbox';
+import { Icon } from '@keystar/ui/icon';
+import '@keystar/ui/icon/icons/cornerDownRightIcon';
+import '@babel/runtime/helpers/defineProperty';
+import { ActionButton } from '@keystar/ui/button';
+import '@keystar/ui/icon/icons/alertTriangleIcon';
+import '@keystar/ui/notice';
+import '@keystar/ui/slots';
+import 'next/link';
+import { a as useList, P as PaginationControls } from '../../../../../dist/context-3132c3ed.esm.js';
+import 'next/router';
+import 'next/head';
+import { B as BuildItemDialog } from '../../../../../dist/CreateItemDialog-33335548.esm.js';
+import { gql, ApolloClient, InMemoryCache } from '@apollo/client';
+import { arrowUpRightIcon } from '@keystar/ui/icon/icons/arrowUpRightIcon';
+import { ComboboxMulti, Item, Combobox } from '@keystar/ui/combobox';
+import isDeepEqual from 'fast-deep-equal';
+import { useApolloClient, useQuery } from '@apollo/client/react';
+import { u as useSearchFilter } from '../../../../../dist/useFilter-0b5a1ee6.esm.js';
+import { plusIcon } from '@keystar/ui/icon/icons/plusIcon';
+import { ActionMenu, Item as Item$1 } from '@keystar/ui/menu';
+import { TooltipTrigger, Tooltip } from '@keystar/ui/tooltip';
+import { Field as Field$1 } from '@keystar/ui/field';
+import { textSelectIcon } from '@keystar/ui/icon/icons/textSelectIcon';
+import { E as EmptyState } from '../../../../../dist/utils-5e1d4d28.esm.js';
+import '@react-aria/utils';
+import '@keystar/ui/icon/icons/chevronRightIcon';
+import '@keystar/ui/icon/icons/textCursorInputIcon';
+import '@keystar/ui/toast';
+import 'graphql';
+import { G as GraphQLErrorNotice } from '../../../../../dist/GraphQLErrorNotice-d9f0931b.esm.js';
+import { ProgressCircle } from '@keystar/ui/progress';
+import 'apollo-upload-client/UploadHttpLink.mjs';
+import '@keystar/ui/core';
+import '@nixxie-cms/core/admin-ui/router';
+import '@keystar/ui/icon/icons/chevronLeftIcon';
+import '@keystar/ui/icon/icons/undo2Icon';
+import '@keystar/ui/picker';
+import '../../../../../dist/admin-meta-graphql-6f7f5331.esm.js';
+import '../../../../../dist/filters-8c8616f9.esm.js';
+import '../../../../../dist/Fields-956d9a14.esm.js';
+import '../../../../../dist/useCreateItem-1f94d252.esm.js';
+import '@keystar/ui/utils';
+
+function useDebouncedValue(value, limitMs) {
+  const [debouncedValue, setDebouncedValue] = useState(() => value);
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setDebouncedValue(() => value);
+    }, limitMs);
+    return () => clearTimeout(timeout);
+  }, [value, limitMs]);
+  return debouncedValue;
+}
+function useApolloQuery(args) {
+  var _state$value3;
+  const {
+    labelField,
+    list,
+    searchFields,
+    state
+  } = args;
+  const [search, setSearch] = useState(() => {
+    var _state$value, _state$value2;
+    if (state.kind === 'one' && (_state$value = state.value) !== null && _state$value !== void 0 && _state$value.label) return (_state$value2 = state.value) === null || _state$value2 === void 0 ? void 0 : _state$value2.label;
+    return '';
+  });
+  const QUERY = gql`
+    query RelationshipSelect($where: ${list.graphql.names.whereInputName}!, $take: Int!, $skip: Int!, $orderBy: [${list.graphql.names.listOrderName}!]) {
+      items: ${list.graphql.names.listQueryName}(where: $where, take: $take, skip: $skip, orderBy: $orderBy) {
+        id: id
+        label: ${labelField}
+      }
+      count: ${list.graphql.names.listQueryCountName}(where: $where)
+    }
+  `;
+  const debouncedSearch = useDebouncedValue(search, 200);
+  const manipulatedSearch = state.kind === 'one' && ((_state$value3 = state.value) === null || _state$value3 === void 0 ? void 0 : _state$value3.label) === debouncedSearch ? '' : debouncedSearch;
+  const searchFilter = useSearchFilter(manipulatedSearch, list, searchFields);
+  const _where = {
+    OR: searchFilter
+  };
+  const where = args.filter ? {
+    AND: [_where, args.filter]
+  } : _where;
+  const orderBy = useMemo(() => {
+    return args.sort ? {
+      [args.sort.field]: args.sort.direction.toLowerCase()
+    } : undefined;
+  }, [args.sort]);
+  const link = useApolloClient().link;
+  // we're using a local apollo client here because writing a global implementation of the typePolicies
+  // would require making assumptions about how pagination should work which won't always be right
+  const apolloClient = useMemo(() => new ApolloClient({
+    link,
+    cache: new InMemoryCache({
+      typePolicies: {
+        Query: {
+          fields: {
+            [list.graphql.names.listQueryName]: {
+              keyArgs: ['where'],
+              merge: (existing, incoming, {
+                args
+              }) => {
+                const merged = existing ? existing.slice() : [];
+                const {
+                  skip
+                } = args;
+                for (let i = 0; i < incoming.length; ++i) {
+                  merged[skip + i] = incoming[i];
+                }
+                return merged;
+              }
+            }
+          }
+        }
+      }
+    })
+  }), [link, list.graphql.names.listQueryName]);
+  const initialItemsToLoad = Math.min(list.pageSize, 10);
+  const subsequentItemsToLoad = Math.min(list.pageSize, 50);
+  const {
+    data,
+    previousData,
+    error,
+    loading,
+    fetchMore
+  } = useQuery(QUERY, {
+    fetchPolicy: 'network-only',
+    variables: {
+      where,
+      take: initialItemsToLoad,
+      skip: 0,
+      orderBy
+    },
+    client: apolloClient
+  });
+
+  // we want to avoid fetching more again and `loading` from Apollo
+  // doesn't seem to become true when fetching more
+  const [lastFetchMore, setLastFetchMore] = useState(null);
+  const count = (data === null || data === void 0 ? void 0 : data.count) || 0;
+  const onLoadMore = () => {
+    const skip = data === null || data === void 0 ? void 0 : data.items.length;
+    if (!loading && skip && data.items.length < count && (!isDeepEqual(lastFetchMore === null || lastFetchMore === void 0 ? void 0 : lastFetchMore.where, where) || (lastFetchMore === null || lastFetchMore === void 0 ? void 0 : lastFetchMore.list) !== list || (lastFetchMore === null || lastFetchMore === void 0 ? void 0 : lastFetchMore.skip) !== skip)) {
+      const QUERY = gql`
+        query RelationshipSelectMore($where: ${list.graphql.names.whereInputName}!, $take: Int!, $skip: Int!, $orderBy: [${list.graphql.names.listOrderName}!]) {
+          items: ${list.graphql.names.listQueryName}(where: $where, take: $take, skip: $skip, orderBy: $orderBy) {
+            id
+            label: ${labelField}
+          }
+        }
+      `;
+      setLastFetchMore({
+        list,
+        skip,
+        where
+      });
+      fetchMore({
+        query: QUERY,
+        variables: {
+          where,
+          take: subsequentItemsToLoad,
+          skip,
+          orderBy
+        }
+      }).then(() => setLastFetchMore(null)).catch(() => setLastFetchMore(null));
+    }
+  };
+  return {
+    data: loading ? previousData : data,
+    error,
+    loading,
+    loadingState: getLoadingState({
+      loading,
+      search
+    }),
+    search,
+    setSearch,
+    onLoadMore
+  };
+}
+function getLoadingState(options) {
+  if (options.loading) {
+    if (options.search.length) return 'filtering';
+    return 'loading';
+  }
+  return 'idle';
+}
+
+function ComboboxMany({
+  extraSelection = '',
+  forceValidation,
+  isDisabled,
+  isLoading,
+  isReadOnly,
+  isRequired,
+  labelField,
+  list,
+  searchFields,
+  state,
+  filter,
+  sort,
+  ...props
+}) {
+  var _data$items$map, _data$items, _state$value;
+  const {
+    data,
+    loadingState,
+    error,
+    onLoadMore,
+    search,
+    setSearch
+  } = useApolloQuery({
+    labelField,
+    list,
+    searchFields,
+    state,
+    filter,
+    sort
+  });
+  const [shouldShowErrors, setShouldShowErrors] = useState(false);
+  const validationMessages = isRequired && state.value.length === 0 ? [`At least one ${list.singular} is required`] : [];
+
+  // TODO: better error UI
+  // TODO: Handle permission errors
+  // (ie; user has permission to read this relationship field, but
+  // not the related list, or some items on the list)
+  if (error) return /*#__PURE__*/jsx("span", {
+    children: "Error"
+  });
+  const items = (_data$items$map = data === null || data === void 0 || (_data$items = data.items) === null || _data$items === void 0 ? void 0 : _data$items.map(x => ({
+    ...x,
+    built: false
+  }))) !== null && _data$items$map !== void 0 ? _data$items$map : [];
+  const fetchedIds = new Set(items.map(item => item.id));
+  for (const item of state.value) {
+    if (!fetchedIds.has(item.id)) {
+      items.push(item);
+    }
+  }
+  return /*#__PURE__*/jsx(ComboboxMulti, {
+    ...props,
+    isDisabled: isDisabled || isReadOnly,
+    isRequired: isRequired,
+    items: items,
+    loadingState: loadingState,
+    errorMessage: !!validationMessages.length && (shouldShowErrors || forceValidation) ? validationMessages.join('. ') : undefined,
+    onBlur: () => {
+      setShouldShowErrors(true);
+    },
+    onInputChange: setSearch,
+    inputValue: search,
+    onLoadMore: onLoadMore,
+    selectedKeys: (_state$value = state.value) === null || _state$value === void 0 ? void 0 : _state$value.map(item => item.id.toString()),
+    onSelectionChange: selection => {
+      // TODO
+      if (selection === 'all') return;
+      const selectedItems = items.filter(item => selection.has(item.id.toString()));
+      state.onChange(selectedItems);
+    },
+    minWidth: "alias.singleLineWidth",
+    width: "auto",
+    UNSAFE_className: css({
+      // This should probably be addressed in @keystar/ui/combobox
+      // - the mobile variant should respect the `width` prop
+      '[role="button"]': {
+        width: 'auto'
+      }
+    }),
+    children: item => /*#__PURE__*/jsx(Item, {
+      children: item.label || item.id
+    })
+  });
+}
+
+function ComboboxSingle({
+  forceValidation,
+  isLoading,
+  isRequired,
+  labelField,
+  list,
+  searchFields,
+  state,
+  filter,
+  sort,
+  ...props
+}) {
+  var _data$items$map, _data$items;
+  const {
+    data,
+    loading,
+    error,
+    onLoadMore,
+    search,
+    setSearch
+  } = useApolloQuery({
+    labelField,
+    list,
+    searchFields,
+    state,
+    filter,
+    sort
+  });
+  const [shouldShowErrors, setShouldShowErrors] = useState(false);
+  const validationMessages = isRequired && state.value === null ? [`A ${list.singular} is required`] : [];
+  const [lastSeenStateValue, setLastSeenStateValue] = useState(state.value);
+  if (state.value !== lastSeenStateValue) {
+    var _state$value$label, _state$value;
+    setLastSeenStateValue(state.value);
+    setSearch((_state$value$label = (_state$value = state.value) === null || _state$value === void 0 ? void 0 : _state$value.label) !== null && _state$value$label !== void 0 ? _state$value$label : '');
+  }
+
+  // TODO: better error UI
+  // TODO: Handle permission errors
+  // (ie; user has permission to read this relationship field, but
+  // not the related list, or some items on the list)
+  if (error) return /*#__PURE__*/jsx("span", {
+    children: "Error"
+  });
+  const items = (_data$items$map = data === null || data === void 0 || (_data$items = data.items) === null || _data$items === void 0 ? void 0 : _data$items.map(x => ({
+    ...x,
+    built: false
+  }))) !== null && _data$items$map !== void 0 ? _data$items$map : [];
+  if (state.value !== null && (state.value.built || !items.some(item => {
+    var _state$value2;
+    return item.id === ((_state$value2 = state.value) === null || _state$value2 === void 0 ? void 0 : _state$value2.id);
+  }))) {
+    items.push(state.value);
+  }
+  return /*#__PURE__*/jsx(Combobox, {
+    ...props,
+    isRequired: isRequired,
+    items: items,
+    loadingState: loading || isLoading ? 'loading' : 'idle',
+    errorMessage: !!validationMessages.length && (shouldShowErrors || forceValidation) ? validationMessages.join('. ') : undefined,
+    onBlur: () => {
+      setShouldShowErrors(true);
+    },
+    onInputChange: input => {
+      setSearch(input);
+
+      // unset the selected value when the user clears the input
+      if (input === '') state.onChange(null);
+    },
+    inputValue: search,
+    onLoadMore: onLoadMore,
+    selectedKey: state.value ? state.value.id.toString() : null,
+    onSelectionChange: key => {
+      var _items$find, _selectedItem$label;
+      const selectedItem = (_items$find = items.find(item => item.id.toString() === key)) !== null && _items$find !== void 0 ? _items$find : null;
+      state.onChange(selectedItem);
+      setSearch((_selectedItem$label = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) !== null && _selectedItem$label !== void 0 ? _selectedItem$label : '');
+    },
+    minWidth: "alias.singleLineWidth",
+    width: "auto",
+    UNSAFE_className: css({
+      // This should probably be addressed in @keystar/ui/combobox
+      // - the mobile variant should respect the `width` prop
+      '[role="button"]': {
+        width: 'auto'
+      }
+    }),
+    children: item => /*#__PURE__*/jsx(Item, {
+      children: item.label || item.id
+    })
+  });
+}
+
+function ContextualActions(props) {
+  const {
+    children,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/jsxs(Grid, {
+    gap: "regular",
+    alignItems: "end",
+    columns: "minmax(0, 1fr) auto",
+    children: [children, /*#__PURE__*/jsx(ContextualActionsMenu, {
+      ...otherProps
+    })]
+  });
+}
+function ContextualActionsMenu(props) {
+  const {
+    field,
+    onAdd,
+    onChange
+  } = props;
+  const foreignList = useList(field.refListKey);
+  const relatedItemHref = useRelatedItemHref(props);
+  const relatedItemLabel = useRelatedItemLabel(field);
+  const allowAdd = !field.hideCreate && !!onChange;
+  const items = useMemo(() => {
+    const result = [];
+    if (allowAdd) {
+      result.push({
+        icon: plusIcon,
+        key: 'add',
+        label: `Add ${foreignList.singular.toLocaleLowerCase()}`
+      });
+    }
+    result.push({
+      key: 'view',
+      icon: arrowUpRightIcon,
+      href: relatedItemHref,
+      label: relatedItemLabel
+    });
+    return result;
+  }, [allowAdd, foreignList, relatedItemHref, relatedItemLabel]);
+  const onAction = key => {
+    switch (key) {
+      case 'add':
+        {
+          onAdd();
+          break;
+        }
+    }
+  };
+
+  // we don't want to change the presence or lack thereof of a selected value
+  // but since `allowAdd` is based on config, it's fairly static and showing
+  // a menu when the menu will only have one item is quite silly
+  if (!allowAdd) {
+    return /*#__PURE__*/jsxs(TooltipTrigger, {
+      children: [/*#__PURE__*/jsx(ActionButton, {
+        ...(relatedItemHref ? {
+          href: relatedItemHref
+        } : {
+          isDisabled: true
+        }),
+        children: /*#__PURE__*/jsx(Icon, {
+          src: arrowUpRightIcon
+        })
+      }), /*#__PURE__*/jsx(Tooltip, {
+        children: relatedItemLabel
+      })]
+    });
+  }
+  return /*#__PURE__*/jsx(ActionMenu, {
+    "aria-label": `Actions for ${field.label}`,
+    direction: "bottom",
+    align: "end",
+    isDisabled: items.length === 0,
+    disabledKeys: relatedItemHref === null ? ['view'] : [],
+    items: items,
+    onAction: onAction,
+    children: item => {
+      var _item$href;
+      return /*#__PURE__*/jsxs(Item$1, {
+        href: (_item$href = item.href) !== null && _item$href !== void 0 ? _item$href : undefined,
+        textValue: item.label,
+        children: [/*#__PURE__*/jsx(Icon, {
+          src: item.icon
+        }), /*#__PURE__*/jsx(Text, {
+          children: item.label
+        })]
+      }, item.key);
+    }
+  });
+}
+function useRelatedItemLabel(field) {
+  const foreignList = useList(field.refListKey);
+  if (field.many) {
+    return `View related ${foreignList.plural.toLocaleLowerCase()}`;
+  }
+  return `View ${foreignList.singular.toLocaleLowerCase()}`;
+}
+function useRelatedItemHref({
+  field,
+  value
+}) {
+  const foreignList = useList(field.refListKey);
+  if (value.kind === 'one') {
+    if (!value.value) return null;
+    // the related item isn't actually created yet so we can't view it
+    if (value.value.built) return null;
+    return `/${foreignList.path}/${value.value.id}`;
+  }
+  let query;
+  if (field.refFieldKey && value.id !== null) {
+    query = buildQueryForRelationshipFieldWithForeignField(foreignList, field.refFieldKey, value.id);
+  } else if (value.kind === 'many' && value.value.length > 0) {
+    query = `!id_in=${JSON.stringify(value.value.map(x => x.id))}`;
+  }
+  if (query === undefined) return null;
+  return `/${foreignList.path}?${query}`;
+}
+function buildQueryForRelationshipFieldWithForeignField(foreignList, refFieldKey, localId) {
+  const foreignField = foreignList.fields[refFieldKey];
+  const foreignMany = foreignField.fieldMeta.many;
+  return `filter=${refFieldKey}_${foreignMany ? 'some' : 'is'}_${JSON.stringify(foreignMany ? [localId] : localId)}`;
+}
+
+function RelationshipTable({
+  field,
+  value
+}) {
+  var _field$columns, _data$items;
+  if (!field.refFieldKey) {
+    throw new Error('refFieldKey is required for displayMode: table');
+  }
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(50);
+  const list = useList(field.refListKey);
+  const hasManyOnRefList = list.fields[field.refFieldKey].controller.many;
+  const selectedFields = (_field$columns = field.columns) !== null && _field$columns !== void 0 ? _field$columns : list.initialColumns;
+  const columns = useMemo(() => {
+    return selectedFields.map(path => {
+      const field = list.fields[path];
+      return {
+        id: path,
+        label: field.label,
+        allowsSorting: field.isOrderable
+      };
+    });
+  }, [selectedFields, list]);
+  const [sort, setSort] = useState(() => {
+    if (field.initialSort) {
+      return {
+        column: field.initialSort.field,
+        direction: field.initialSort.direction === 'ASC' ? 'ascending' : 'descending'
+      };
+    }
+    return {
+      column: 'id',
+      direction: 'ascending'
+    };
+  });
+  const {
+    data,
+    error,
+    loading
+  } = useQuery(useMemo(() => {
+    const selectedGqlFields = [...selectedFields].map(fieldPath => list.fields[fieldPath].controller.graphqlSelection).join('\n');
+
+    // TODO: FIXME: this is bad
+    return gql`
+          query (
+            $where: ${list.graphql.names.whereInputName},
+            $take: Int!,
+            $skip: Int!,
+            $orderBy: [${list.graphql.names.listOrderName}!]
+          ) {
+            items: ${list.graphql.names.listQueryName}(
+              where: $where,
+              take: $take,
+              skip: $skip,
+              orderBy: $orderBy
+            ) {
+              ${selectedFields.includes('id') ? '' : 'id'}
+              ${selectedGqlFields}
+            }
+          }
+        `;
+  }, [list, selectedFields]), {
+    fetchPolicy: 'cache-and-network',
+    errorPolicy: 'all',
+    variables: {
+      where: {
+        [field.refFieldKey]: hasManyOnRefList ? {
+          some: {
+            id: {
+              equals: value.id
+            }
+          }
+        } : {
+          id: {
+            equals: value.id
+          }
+        }
+      },
+      take: pageSize,
+      skip: (currentPage - 1) * pageSize,
+      orderBy: [{
+        [sort.column]: sort.direction === 'ascending' ? 'asc' : 'desc'
+      }]
+    }
+  });
+  const relatedItemLabel = useRelatedItemLabel(field);
+  const relatedItemHref = useRelatedItemHref({
+    field,
+    value
+  });
+  const items = (_data$items = data === null || data === void 0 ? void 0 : data.items) !== null && _data$items !== void 0 ? _data$items : [];
+  return /*#__PURE__*/jsx(Field$1, {
+    label: field.label,
+    description: field.description,
+    children: inputProps => /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsxs(TableView, {
+        ...inputProps,
+        selectionMode: "none",
+        onSortChange: sort => setSort(sort),
+        sortDescriptor: sort,
+        density: "compact",
+        UNSAFE_style: {
+          minHeight: 29 * 10,
+          maxHeight: 29 * 10
+        },
+        overflowMode: "truncate",
+        renderEmptyState: () => loading ? /*#__PURE__*/jsx(ProgressCircle, {
+          isIndeterminate: true
+        }) : error ? /*#__PURE__*/jsx(GraphQLErrorNotice, {
+          errors: [error]
+        }) : /*#__PURE__*/jsx(EmptyState, {
+          icon: textSelectIcon,
+          title: "Empty related items",
+          message: "There are no related items."
+        }),
+        flex: true,
+        children: [/*#__PURE__*/jsx(TableHeader, {
+          columns: columns,
+          children: ({
+            label,
+            id,
+            ...options
+          }) => /*#__PURE__*/jsx(Column, {
+            isRowHeader: true,
+            ...options,
+            children: label
+          }, id)
+        }), /*#__PURE__*/jsx(TableBody, {
+          items: items,
+          children: row => {
+            return /*#__PURE__*/jsx(Row, {
+              href: `/${list.path}/${row === null || row === void 0 ? void 0 : row.id}`,
+              children: key => {
+                const field = list.fields[key];
+                const value = row[key];
+                const CellContent = field.views.Cell;
+                return /*#__PURE__*/jsx(Cell$1, {
+                  children: CellContent ? /*#__PURE__*/jsx(CellContent, {
+                    value: value,
+                    field: field.controller,
+                    item: row
+                  }) : /*#__PURE__*/jsx(Text, {
+                    children: value === null || value === void 0 ? void 0 : value.toString()
+                  })
+                });
+              }
+            });
+          }
+        })]
+      }), /*#__PURE__*/jsx(PaginationControls, {
+        currentPage: currentPage,
+        pageSize: pageSize,
+        plural: list.plural,
+        singular: list.singular,
+        total: value.count,
+        onChangePage: page => setCurrentPage(page),
+        onChangePageSize: size => setPageSize(size),
+        extraActions: /*#__PURE__*/jsxs(TooltipTrigger, {
+          children: [/*#__PURE__*/jsx(ActionButton, {
+            href: relatedItemHref,
+            children: /*#__PURE__*/jsx(Icon, {
+              src: arrowUpRightIcon
+            })
+          }), /*#__PURE__*/jsx(Tooltip, {
+            children: relatedItemLabel
+          })]
+        })
+      })]
+    })
+  });
+}
+
+function Field(props) {
+  const {
+    autoFocus,
+    field,
+    forceValidation = false,
+    onChange,
+    value,
+    isRequired
+  } = props;
+  const foreignList = useList(field.refListKey);
+  const [dialogIsOpen, setDialogOpen] = useState(false);
+  const description = field.description || undefined;
+  const isReadOnly = onChange === undefined;
+  const [counter, setCounter] = useState(1);
+  if (value.kind === 'count') {
+    if (field.display === 'table') {
+      return /*#__PURE__*/jsx(RelationshipTable, {
+        field: field,
+        value: value
+      });
+    }
+    const textField = /*#__PURE__*/jsx(TextField, {
+      autoFocus: autoFocus,
+      label: field.label,
+      description: description,
+      isReadOnly: true,
+      value: value.count.toString(),
+      width: "alias.singleLineWidth"
+    });
+    if (!field.refFieldKey) return textField;
+    return /*#__PURE__*/jsxs(HStack, {
+      gap: "small",
+      alignItems: "end",
+      children: [textField, /*#__PURE__*/jsx(ActionButton, {
+        href: `/${foreignList.path}?${buildQueryForRelationshipFieldWithForeignField(foreignList, field.refFieldKey, value.id)}`,
+        children: /*#__PURE__*/jsx(Icon, {
+          src: arrowUpRightIcon
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/jsxs(Fragment$1, {
+    children: [/*#__PURE__*/jsxs(VStack, {
+      gap: "medium",
+      children: [/*#__PURE__*/jsx(ContextualActions, {
+        onAdd: () => setDialogOpen(true),
+        ...props,
+        children: value.kind === 'many' ? /*#__PURE__*/jsx(ComboboxMany, {
+          autoFocus: autoFocus,
+          label: field.label,
+          description: description,
+          forceValidation: forceValidation,
+          isReadOnly: isReadOnly,
+          isRequired: isRequired,
+          list: foreignList,
+          labelField: field.refLabelField,
+          searchFields: field.refSearchFields,
+          filter: field.selectFilter,
+          sort: field.selectSort,
+          state: {
+            kind: 'many',
+            value: value.value,
+            onChange(newItems) {
+              onChange === null || onChange === void 0 || onChange({
+                ...value,
+                value: newItems
+              });
+            }
+          }
+        }) : /*#__PURE__*/jsx(ComboboxSingle, {
+          autoFocus: autoFocus,
+          label: field.label,
+          description: description,
+          forceValidation: forceValidation,
+          isReadOnly: isReadOnly,
+          isRequired: isRequired,
+          list: foreignList,
+          labelField: field.refLabelField,
+          searchFields: field.refSearchFields,
+          filter: field.selectFilter,
+          sort: field.selectSort,
+          state: {
+            kind: 'one',
+            value: value.value,
+            onChange(newItem) {
+              onChange === null || onChange === void 0 || onChange({
+                ...value,
+                value: newItem
+              });
+            }
+          }
+        })
+      }), value.kind === 'many' && /*#__PURE__*/jsx(TagGroup, {
+        "aria-label": `related ${foreignList.plural}`,
+        isRequired: isRequired,
+        items: value.value.map(item => {
+          var _item$id$toString, _item$label;
+          return {
+            id: (_item$id$toString = item.id.toString()) !== null && _item$id$toString !== void 0 ? _item$id$toString : '',
+            label: (_item$label = item.label) !== null && _item$label !== void 0 ? _item$label : '',
+            href: item.built ? '' : `/${foreignList.path}/${item.id}`
+          };
+        }),
+        maxRows: 2,
+        onRemove: isReadOnly ? undefined : keys => {
+          onChange === null || onChange === void 0 || onChange({
+            ...value,
+            value: value.value.filter(item => !keys.has(item.id))
+          });
+        },
+        renderEmptyState: () => /*#__PURE__*/jsxs(Text, {
+          color: "neutralSecondary",
+          size: "small",
+          children: ["No related ", foreignList.plural.toLowerCase(), "\u2026"]
+        }),
+        children: renderItem
+      })]
+    }), !isReadOnly && /*#__PURE__*/jsx(DialogContainer, {
+      onDismiss: () => setDialogOpen(false),
+      children: dialogIsOpen && /*#__PURE__*/jsx(BuildItemDialog, {
+        listKey: foreignList.key,
+        onChange: builtItemData => {
+          var _ref;
+          const id = `_____temporary_${counter}`;
+          const label = (_ref = builtItemData === null || builtItemData === void 0 ? void 0 : builtItemData[foreignList.labelField]) !== null && _ref !== void 0 ? _ref : `[Unnamed ${foreignList.singular} ${counter}]`;
+          setDialogOpen(false);
+          setCounter(counter + 1);
+          if (value.kind === 'many') {
+            onChange({
+              ...value,
+              value: [...value.value, {
+                id,
+                label,
+                data: builtItemData,
+                built: true
+              }]
+            });
+          } else if (value.kind === 'one') {
+            onChange({
+              ...value,
+              value: {
+                id,
+                label,
+                data: builtItemData,
+                built: true
+              }
+            });
+          }
+        }
+      })
+    })]
+  });
+}
+
+// NOTE: fix for `TagGroup` perf issue, should typically be okay to just
+// inline the render function
+function renderItem(item) {
+  if (item.href === '') return /*#__PURE__*/jsx(Item$2, {
+    children: item.label
+  });
+  return /*#__PURE__*/jsx(Item$2, {
+    href: item.href,
+    children: item.label
+  });
+}
+const Cell = ({
+  field,
+  item
+}) => {
+  const list = useList(field.refListKey);
+  if (field.display === 'count' || field.display === 'table') {
+    const count = item[`${field.fieldKey}Count`];
+    return count != null ? /*#__PURE__*/jsx(Numeral, {
+      value: count,
+      abbreviate: true
+    }) : null;
+  }
+  const data = item[field.fieldKey];
+  const items = (Array.isArray(data) ? data : [data]).filter(Boolean);
+  const displayItems = items.length < 3 ? items : items.slice(0, 2);
+  const overflow = items.length < 3 ? 0 : items.length - 2;
+  return /*#__PURE__*/jsxs(Text, {
+    children: [displayItems.map((item, index) => /*#__PURE__*/jsxs(Fragment$1, {
+      children: [index ? ', ' : '', /*#__PURE__*/jsx(TextLink, {
+        href: `/${list.path}/${item.id}`,
+        children: item.label || item.id
+      })]
+    }, item.id)), overflow ? `, and ${overflow} more` : null]
+  });
+};
+function controller(config) {
+  const {
+    listKey,
+    fieldKey: fieldKey,
+    label,
+    description
+  } = config;
+  const {
+    displayMode,
+    hideCreate,
+    many,
+    refFieldKey,
+    refLabelField,
+    refListKey,
+    refSearchFields
+  } = config.fieldMeta;
+  return {
+    refFieldKey,
+    many,
+    listKey,
+    fieldKey,
+    label,
+    description,
+    display: displayMode,
+    refLabelField,
+    refSearchFields,
+    refListKey,
+    graphqlSelection: displayMode === 'count' || displayMode === 'table' ? `${fieldKey}Count` : `${fieldKey}${many && config.fieldMeta.sort ? `(orderBy: { ${config.fieldMeta.sort.field}: ${config.fieldMeta.sort.direction.toLowerCase()} })` : ''} {
+              id
+              label: ${refLabelField}
+            }`,
+    hideCreate: hideCreate || displayMode === 'table',
+    columns: displayMode === 'table' ? config.fieldMeta.columns : null,
+    initialSort: displayMode === 'table' ? config.fieldMeta.initialSort : null,
+    selectFilter: displayMode === 'select' ? config.fieldMeta.filter : null,
+    selectSort: displayMode === 'select' ? config.fieldMeta.sort : null,
+    // note we're not making the state kind: 'count' when ui.displayMode is set to 'count'.
+    // that ui.displayMode: 'count' is really just a way to have reasonable performance
+    // because our other UIs don't handle relationships with a large number of items well
+    // but that's not a problem here since we're creating a new item so we might as well them a better UI
+    defaultValue: many ? {
+      kind: 'many',
+      id: null,
+      initialValue: [],
+      value: []
+    } : {
+      kind: 'one',
+      id: null,
+      value: null,
+      initialValue: null
+    },
+    validate(value, opts) {
+      if ('count' in value) return true;
+      return opts.isRequired ? value.kind === 'one' ? value.value !== null : value.value.length > 0 : true;
+    },
+    deserialize: data => {
+      if (displayMode === 'count' || displayMode === 'table') {
+        var _data;
+        return {
+          id: data.id,
+          kind: 'count',
+          count: (_data = data[`${config.fieldKey}Count`]) !== null && _data !== void 0 ? _data : 0
+        };
+      }
+      if (many) {
+        const value = (data[config.fieldKey] || []).map(x => ({
+          id: x.id,
+          label: x.label || x.id
+        }));
+        return {
+          kind: 'many',
+          id: data.id,
+          initialValue: value,
+          value
+        };
+      }
+      let value = data[config.fieldKey];
+      if (value) {
+        value = {
+          id: value.id,
+          label: value.label || value.id
+        };
+      }
+      return {
+        kind: 'one',
+        id: data.id,
+        value,
+        initialValue: value
+      };
+    },
+    serialize: state => {
+      if (state.kind === 'many') {
+        const newAllIds = new Set(state.value.map(x => x.id));
+        const initialIds = new Set(state.initialValue.map(x => x.id));
+        const disconnect = state.initialValue.filter(x => !newAllIds.has(x.id)).map(x => ({
+          id: x.id
+        }));
+        const connect = state.value.filter(x => !x.built && !initialIds.has(x.id)).map(x => ({
+          id: x.id
+        }));
+        const create = state.value.filter(x => x.built).map(x => x.data);
+        const output = {
+          ...(disconnect.length ? {
+            disconnect
+          } : {}),
+          ...(connect.length ? {
+            connect
+          } : {}),
+          ...(create.length ? {
+            create
+          } : {})
+        };
+        if (Object.keys(output).length) {
+          return {
+            [config.fieldKey]: output
+          };
+        }
+      } else if (state.kind === 'one') {
+        var _state$value, _state$initialValue;
+        if (state.initialValue && !state.value) return {
+          [config.fieldKey]: {
+            disconnect: true
+          }
+        };
+        if ((_state$value = state.value) !== null && _state$value !== void 0 && _state$value.built) {
+          return {
+            [config.fieldKey]: {
+              create: state.value.data
+            }
+          };
+        }
+        if (state.value && state.value.id !== ((_state$initialValue = state.initialValue) === null || _state$initialValue === void 0 ? void 0 : _state$initialValue.id)) {
+          return {
+            [config.fieldKey]: {
+              connect: {
+                id: state.value.id
+              }
+            }
+          };
+        }
+      }
+      return {};
+    },
+    filter: {
+      Filter(props) {
+        const foreignList = useList(refListKey);
+        if (props.type === 'empty' || props.type === 'not_empty') return null;
+        // TODO: show labels rather than ids
+        if (props.type === 'is' || props.type === 'not_is') {
+          return /*#__PURE__*/jsx(ComboboxSingle, {
+            autoFocus: true,
+            "aria-label": label,
+            isReadOnly: false,
+            labelField: refLabelField,
+            searchFields: refSearchFields,
+            list: foreignList,
+            state: {
+              kind: 'one',
+              value: typeof props.value === 'string' ? {
+                id: props.value,
+                label: props.value,
+                built: false
+              } : null,
+              onChange(newItem) {
+                props.onChange(newItem === null ? null : newItem.id.toString());
+              }
+            },
+            filter: config.fieldMeta.displayMode === 'select' ? config.fieldMeta.filter : null,
+            sort: config.fieldMeta.displayMode === 'select' ? config.fieldMeta.sort : null
+          });
+        }
+        const ids = Array.isArray(props.value) ? props.value : [];
+        const value = ids.map(id => ({
+          id,
+          label: id,
+          built: false
+        }));
+        return /*#__PURE__*/jsxs(VStack, {
+          gap: "medium",
+          children: [/*#__PURE__*/jsx(ComboboxMany, {
+            autoFocus: true,
+            "aria-label": label,
+            isReadOnly: false,
+            labelField: refLabelField,
+            searchFields: refSearchFields,
+            list: foreignList,
+            state: {
+              kind: 'many',
+              value,
+              onChange(newItem) {
+                props.onChange(newItem.map(x => x.id.toString()));
+              }
+            },
+            filter: config.fieldMeta.displayMode === 'select' ? config.fieldMeta.filter : null,
+            sort: config.fieldMeta.displayMode === 'select' ? config.fieldMeta.sort : null
+          }), /*#__PURE__*/jsx(TagGroup, {
+            "aria-label": `related ${foreignList.plural}`,
+            items: value.map(item => {
+              var _item$id$toString2, _item$label2;
+              return {
+                id: (_item$id$toString2 = item.id.toString()) !== null && _item$id$toString2 !== void 0 ? _item$id$toString2 : '',
+                label: (_item$label2 = item.label) !== null && _item$label2 !== void 0 ? _item$label2 : '',
+                href: item.built ? '' : `/${foreignList.path}/${item.id}`
+              };
+            }),
+            maxRows: 2,
+            onRemove: keys => {
+              props.onChange(ids.filter(id => !keys.has(id)));
+            },
+            renderEmptyState: () => /*#__PURE__*/jsxs(Text, {
+              color: "neutralSecondary",
+              size: "small",
+              children: ["Select related ", foreignList.plural.toLowerCase(), "\u2026"]
+            }),
+            children: renderItem
+          })]
+        });
+      },
+      Label({
+        label,
+        type,
+        value
+      }) {
+        const listFormatter = useListFormatter({
+          style: 'short',
+          type: 'disjunction'
+        });
+        if (['empty', 'not_empty'].includes(type)) return label.toLowerCase();
+        if (['is', 'not_is'].includes(type)) return `${label.toLowerCase()} ${value}`;
+        return `${label.toLowerCase()} (${listFormatter.format(value || [''])})`;
+      },
+      graphql: ({
+        type,
+        value
+      }) => {
+        if (type === 'empty' && !many) return {
+          [config.fieldKey]: {
+            equals: null
+          }
+        };
+        if (type === 'empty' && many) return {
+          [config.fieldKey]: {
+            none: {}
+          }
+        };
+        if (type === 'not_empty' && !many) return {
+          [config.fieldKey]: {
+            not: {
+              equals: null
+            }
+          }
+        };
+        if (type === 'not_empty' && many) return {
+          [config.fieldKey]: {
+            some: {}
+          }
+        };
+        if (type === 'is') return {
+          [config.fieldKey]: {
+            id: {
+              equals: value
+            }
+          }
+        };
+        if (type === 'not_is') return {
+          [config.fieldKey]: {
+            not: {
+              id: {
+                equals: value
+              }
+            }
+          }
+        };
+        if (type === 'some') return {
+          [config.fieldKey]: {
+            some: {
+              id: {
+                in: value
+              }
+            }
+          }
+        };
+        if (type === 'not_some') return {
+          [config.fieldKey]: {
+            not: {
+              some: {
+                id: {
+                  in: value
+                }
+              }
+            }
+          }
+        };
+        return {
+          [config.fieldKey]: {
+            [type]: value
+          }
+        }; // uh
+      },
+      parseGraphQL: () => [],
+      types: {
+        empty: {
+          label: 'Is empty',
+          initialValue: null
+        },
+        not_empty: {
+          label: 'Is not empty',
+          initialValue: null
+        },
+        ...(many ? {
+          some: {
+            label: 'Is one of',
+            initialValue: []
+          },
+          not_some: {
+            label: 'Is not one of',
+            initialValue: []
+          }
+        } : {
+          is: {
+            label: 'Is',
+            initialValue: null
+          },
+          not_is: {
+            label: 'Is not',
+            initialValue: null
+          }
+        })
+      }
+    }
+  };
+}
+
+export { Cell, ComboboxMany, ComboboxSingle, Field, controller };