@nixxie-cms/core 1.0.0 → 1.0.1

package/internal-unstable/admin-ui/pages/ListPage/dist/nixxie-cms-core-internal-unstable-admin-ui-pages-ListPage.esm.js

@@ -0,0 +1,1187 @@
+import isDeepEqual from 'fast-deep-equal';
+import { useRouter } from 'next/router';
+import { useRef, useState, useId, Fragment, useMemo, useEffect } from 'react';
+import { Item as Item$1, ActionBarContainer, ActionBar } from '@keystar/ui/action-bar';
+import { ActionButton, ButtonGroup, Button } from '@keystar/ui/button';
+import { DialogTrigger, Dialog, DialogContainer, AlertDialog } from '@keystar/ui/dialog';
+import { Icon } from '@keystar/ui/icon';
+import { allIcons } from '@keystar/ui/icon/all';
+import { chevronDownIcon } from '@keystar/ui/icon/icons/chevronDownIcon';
+import { searchXIcon } from '@keystar/ui/icon/icons/searchXIcon';
+import { textSelectIcon } from '@keystar/ui/icon/icons/textSelectIcon';
+import { undo2Icon } from '@keystar/ui/icon/icons/undo2Icon';
+import { Grid, VStack, HStack, Flex, Box } from '@keystar/ui/layout';
+import { Item, MenuTrigger, Menu } from '@keystar/ui/menu';
+import { ProgressCircle } from '@keystar/ui/progress';
+import { SearchField } from '@keystar/ui/search-field';
+import { Content, SlotProvider } from '@keystar/ui/slots';
+import { css, tokenSchema } from '@keystar/ui/style';
+import { TableView, TableHeader, Column, TableBody, Row, Cell } from '@keystar/ui/table';
+import { toastQueue } from '@keystar/ui/toast';
+import { TooltipTrigger, Tooltip } from '@keystar/ui/tooltip';
+import { Text, Heading } from '@keystar/ui/typography';
+import { TextLink } from '@keystar/ui/link';
+import { Notice } from '@keystar/ui/notice';
+import { gql, CombinedGraphQLErrors } from '@apollo/client';
+import { useQuery, useMutation } from '@apollo/client/react';
+import { p as pick, C as CreateButtonLink } from '../../../../../dist/pick-b7ef3115.esm.js';
+import { d as deserializeItemToValue, E as EmptyState } from '../../../../../dist/utils-5e1d4d28.esm.js';
+import { G as GraphQLErrorNotice } from '../../../../../dist/GraphQLErrorNotice-d9f0931b.esm.js';
+import { P as PageContainer } from '../../../../../dist/PageContainer-5ae731cc.esm.js';
+import { a as useList, P as PaginationControls, s as snapValueToClosest } from '../../../../../dist/context-af9957ed.esm.js';
+import '@react-aria/utils';
+import '@keystar/ui/icon/icons/chevronRightIcon';
+import '@keystar/ui/icon/icons/textCursorInputIcon';
+import { i as isActionAvailable, g as getConditionalFilterFieldKeys, s as serializeItemForConditionalFilters, r as resolveActionMode } from '../../../../../dist/filters-8c8616f9.esm.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { g as getActionArguments } from '../../../../../dist/actionData-64d4c37a.esm.js';
+import { u as useSearchFilter } from '../../../../../dist/useFilter-9b6db1f9.esm.js';
+import { Picker } from '@keystar/ui/picker';
+import { xIcon } from '@keystar/ui/icon/icons/xIcon';
+import { composeId } from '@keystar/ui/utils';
+import 'graphql';
+import 'next/head';
+import 'next/link';
+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/tag';
+import '../../../../../dist/admin-meta-graphql-0e6e606e.esm.js';
+
+function FilterAdd({
+  listKey,
+  onAdd,
+  isDisabled
+}) {
+  const triggerRef = useRef(null);
+  const [state, setState] = useState({
+    kind: 'selecting-field'
+  });
+  const [forceValidation, setForceValidation] = useState(false);
+  const formId = useId();
+  const {
+    fieldsWithFilters,
+    filtersByFieldThenType,
+    list
+  } = useFilterFields(listKey);
+  const resetState = () => {
+    setState({
+      kind: 'selecting-field'
+    });
+    setForceValidation(false);
+    // This is a bit of a hack to ensure the trigger button is focused after the
+    // dialog closes, since we're forking the render
+    setTimeout(() => {
+      var _triggerRef$current;
+      triggerRef === null || triggerRef === void 0 || (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
+    }, 200);
+  };
+  const onSubmit = event => {
+    if (event.target !== event.currentTarget) return;
+    event.preventDefault();
+    setForceValidation(true);
+    if (state.kind !== 'filter-value') return;
+
+    // TODO: Special "empty" types need to be documented somewhere. Filters that
+    // have no editable value, basically `null` or `!null`. Which offers:
+    // * better DX — we can avoid weird nullable types and UIs that don't make sense
+    // * better UX — users don't have to jump through mental hoops, like "is not exactly" + submit empty field
+    if (state.filterType !== 'empty' && state.filterType !== 'not_empty' && state.filterValue == null) {
+      return;
+    }
+    onAdd({
+      field: state.fieldPath,
+      type: state.filterType,
+      value: state.filterValue
+    });
+    resetState();
+  };
+  if (state.kind === 'filter-value') {
+    const {
+      Filter
+    } = fieldsWithFilters[state.fieldPath].controller.filter;
+    const fieldLabel = list.fields[state.fieldPath].label;
+    const filterTypes = filtersByFieldThenType[state.fieldPath];
+    const typeLabel = filterTypes[state.filterType];
+    return /*#__PURE__*/jsxs(DialogTrigger, {
+      type: "popover",
+      mobileType: "tray",
+      defaultOpen: true,
+      onOpenChange: isOpen => !isOpen && resetState(),
+      children: [/*#__PURE__*/jsxs(ActionButton, {
+        children: [/*#__PURE__*/jsx(Text, {
+          children: "Filter"
+        }), /*#__PURE__*/jsx(Icon, {
+          src: chevronDownIcon
+        })]
+      }), /*#__PURE__*/jsxs(Dialog, {
+        children: [/*#__PURE__*/jsxs(Heading, {
+          children: ["Filter by ", fieldLabel.toLocaleLowerCase()]
+        }), /*#__PURE__*/jsx(Content, {
+          children: /*#__PURE__*/jsxs("form", {
+            onSubmit: onSubmit,
+            id: formId,
+            children: [/*#__PURE__*/jsx("button", {
+              type: "submit",
+              form: formId,
+              style: {
+                display: 'none'
+              }
+            }), /*#__PURE__*/jsxs(Grid, {
+              gap: "large",
+              rows: "auto minmax(0, 1fr)",
+              height: "100%",
+              children: [/*#__PURE__*/jsx(Picker, {
+                width: "100%",
+                "aria-label": "filter type",
+                isRequired: true,
+                items: Object.keys(filterTypes).map(filterType => ({
+                  label: filterTypes[filterType],
+                  value: filterType
+                })),
+                selectedKey: state.filterType,
+                onSelectionChange: key => {
+                  if (key) {
+                    setState({
+                      kind: 'filter-value',
+                      fieldPath: state.fieldPath,
+                      filterValue: fieldsWithFilters[state.fieldPath].controller.filter.types[key].initialValue,
+                      filterType: key
+                    });
+                  }
+                },
+                children: item => /*#__PURE__*/jsx(Item, {
+                  children: item.label
+                }, item.value)
+              }), /*#__PURE__*/jsx(Filter, {
+                autoFocus: true,
+                context: "add",
+                forceValidation: forceValidation,
+                typeLabel: typeLabel,
+                type: state.filterType,
+                value: state.filterValue,
+                onChange: value => {
+                  setState(state => ({
+                    ...state,
+                    filterValue: value
+                  }));
+                }
+              })]
+            })]
+          })
+        }), /*#__PURE__*/jsxs(ButtonGroup, {
+          children: [/*#__PURE__*/jsx(Button, {
+            onPress: resetState,
+            children: "Cancel"
+          }), /*#__PURE__*/jsx(Button, {
+            prominence: "high",
+            type: "submit",
+            form: formId,
+            children: "Add"
+          })]
+        })]
+      })]
+    });
+  }
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/jsxs(MenuTrigger, {
+      children: [/*#__PURE__*/jsxs(ActionButton, {
+        ref: triggerRef,
+        isDisabled: isDisabled,
+        children: [/*#__PURE__*/jsx(Text, {
+          children: "Filter"
+        }), /*#__PURE__*/jsx(Icon, {
+          src: chevronDownIcon
+        })]
+      }), /*#__PURE__*/jsx(Menu, {
+        items: Object.keys(filtersByFieldThenType).map(fieldPath => ({
+          label: fieldsWithFilters[fieldPath].label,
+          value: fieldPath
+        })),
+        onAction: fieldPath => {
+          const filterType = Object.keys(filtersByFieldThenType[fieldPath])[0];
+          setState({
+            kind: 'filter-value',
+            fieldPath: fieldPath,
+            filterType,
+            filterValue: fieldsWithFilters[fieldPath].controller.filter.types[filterType].initialValue
+          });
+        },
+        children: item => /*#__PURE__*/jsx(Item, {
+          children: item.label
+        }, item.value)
+      })]
+    })
+  });
+}
+
+// TODO: broken if user uses the same filter twice
+function useFilterFields(listKey) {
+  const list = useList(listKey);
+  const fieldsWithFilters = useMemo(() => {
+    const fieldsWithFilters = {};
+    for (const fieldPath in list.fields) {
+      const field = list.fields[fieldPath];
+      if (field.isFilterable && field.controller.filter) {
+        fieldsWithFilters[fieldPath] = field;
+      }
+    }
+    return fieldsWithFilters;
+  }, [list.fields]);
+  const filtersByFieldThenType = useMemo(() => {
+    const filtersByFieldThenType = {};
+    for (const fieldPath in fieldsWithFilters) {
+      const field = fieldsWithFilters[fieldPath];
+      const filters = {};
+      for (const filterType in field.controller.filter.types) {
+        filters[filterType] = field.controller.filter.types[filterType].label;
+      }
+      filtersByFieldThenType[fieldPath] = filters;
+    }
+    return filtersByFieldThenType;
+  }, [fieldsWithFilters]);
+  return {
+    fieldsWithFilters,
+    filtersByFieldThenType,
+    list
+  };
+}
+
+// TODO: move to @keystar/ui and implement properly
+function Tag(props) {
+  const {
+    children,
+    onRemove
+  } = props;
+  const rootId = useId();
+  const textId = composeId(rootId, 'label');
+  const removeId = composeId(rootId, 'remove');
+  return /*#__PURE__*/jsxs(ActionButton, {
+    "aria-labelledby": [textId, removeId].join(' '),
+    onKeyDown: e => {
+      if (!onRemove) {
+        return;
+      }
+      if (e.key === 'Backspace' || e.key === 'Delete') {
+        onRemove();
+      }
+    },
+    UNSAFE_className: css({
+      borderRadius: tokenSchema.size.radius.full,
+      height: tokenSchema.size.element.small,
+      paddingInlineStart: tokenSchema.size.space.small,
+      paddingInlineEnd: 0
+    }),
+    children: [/*#__PURE__*/jsx(SlotProvider, {
+      slots: {
+        text: {
+          id: textId
+        }
+      },
+      children: children
+    }), onRemove && /*#__PURE__*/jsx("span", {
+      role: "button",
+      className: css({
+        alignItems: 'center',
+        borderRadius: '50%',
+        display: 'flex',
+        justifyContent: 'center',
+        height: tokenSchema.size.element.small,
+        width: tokenSchema.size.element.small,
+        ':hover': {
+          backgroundColor: tokenSchema.color.alias.backgroundHovered
+        },
+        ':active': {
+          backgroundColor: tokenSchema.color.alias.backgroundPressed
+        }
+      }),
+      onClick: e => {
+        e.preventDefault();
+        e.stopPropagation();
+        onRemove();
+      },
+      children: /*#__PURE__*/jsx(Icon, {
+        id: removeId,
+        src: xIcon,
+        "aria-label": "backspace to remove"
+      })
+    })]
+  });
+}
+
+function FilterTag({
+  filter,
+  field,
+  onChange,
+  onRemove
+}) {
+  const Label = field.controller.filter.Label;
+  const tagElement = /*#__PURE__*/jsx(Tag, {
+    onRemove: onRemove,
+    children: /*#__PURE__*/jsxs(Text, {
+      children: [/*#__PURE__*/jsxs("span", {
+        children: [field.label, " "]
+      }), /*#__PURE__*/jsx(Label, {
+        label: field.controller.filter.types[filter.type].label,
+        type: filter.type,
+        value: filter.value
+      })]
+    })
+  });
+
+  // TODO: Special "empty" types need to be documented somewhere. Filters that
+  // have no editable value, basically `null` or `!null`. Which offers:
+  // * better DX — we can avoid weird nullable types and UIs that don't make sense
+  // * better UX — users don't have to jump through mental hoops, like "is not exactly" + submit empty field
+  if (filter.type === 'empty' || filter.type === 'not_empty') return tagElement;
+  return /*#__PURE__*/jsxs(DialogTrigger, {
+    type: "popover",
+    mobileType: "tray",
+    children: [tagElement, onDismiss => /*#__PURE__*/jsx(FilterEdit, {
+      onChange: onChange,
+      onDismiss: onDismiss,
+      field: field,
+      filter: filter
+    })]
+  });
+}
+function FilterEdit({
+  filter,
+  field,
+  onChange: onAdd,
+  onDismiss
+}) {
+  var _field$controller$fil;
+  const formId = useId();
+  const [value, setValue] = useState(filter.value);
+  const onSubmit = event => {
+    if (event.target !== event.currentTarget) return;
+    event.preventDefault();
+    onAdd({
+      ...filter,
+      value
+    });
+    onDismiss();
+  };
+  const Filter = field.controller.filter.Filter;
+  const filterTypeLabel = (_field$controller$fil = field.controller.filter) === null || _field$controller$fil === void 0 ? void 0 : _field$controller$fil.types[filter.type].label;
+  return /*#__PURE__*/jsxs(Dialog, {
+    children: [/*#__PURE__*/jsx(Heading, {
+      children: field.label
+    }), /*#__PURE__*/jsx(Content, {
+      children: /*#__PURE__*/jsx("form", {
+        onSubmit: onSubmit,
+        id: formId,
+        children: /*#__PURE__*/jsx(Filter, {
+          autoFocus: true,
+          context: "edit",
+          typeLabel: filterTypeLabel,
+          onChange: setValue,
+          type: filter.type,
+          value: value
+        })
+      })
+    }), /*#__PURE__*/jsxs(ButtonGroup, {
+      children: [/*#__PURE__*/jsx(Button, {
+        onPress: onDismiss,
+        children: "Cancel"
+      }), /*#__PURE__*/jsx(Button, {
+        type: "submit",
+        prominence: "high",
+        form: formId,
+        children: "Save"
+      })]
+    })]
+  });
+}
+function getFilters(list, query) {
+  const param_ = query.filter;
+  const params = Array.isArray(param_) ? param_ : typeof param_ === 'string' ? [param_] : [];
+  if (!params.length) {
+    if (!list.initialFilter) return [];
+    const filters = [];
+    for (const [fieldKey, filter] of Object.entries(list.initialFilter)) {
+      const {
+        controller
+      } = list.fields[fieldKey];
+      for (const f of (_controller$filter$pa = (_controller$filter = controller.filter) === null || _controller$filter === void 0 ? void 0 : _controller$filter.parseGraphQL(filter)) !== null && _controller$filter$pa !== void 0 ? _controller$filter$pa : []) {
+        var _controller$filter$pa, _controller$filter;
+        filters.push({
+          field: fieldKey,
+          ...f
+        });
+      }
+    }
+    return filters;
+  }
+  const filters = [];
+  for (const [fieldPath, field] of Object.entries(list.fields)) {
+    if (!field.isFilterable) continue;
+    if (!field.controller.filter) continue;
+    for (const filterType in field.controller.filter.types) {
+      const prefix = `${fieldPath}_${filterType}`;
+      for (const queryFilter of params) {
+        if (!queryFilter.startsWith(prefix)) continue;
+        if (queryFilter === prefix) {
+          filters.push({
+            type: filterType,
+            field: fieldPath,
+            value: null
+          });
+          continue;
+        }
+        const queryValue = queryFilter.slice(prefix.length + 1);
+        try {
+          const value = JSON.parse(queryValue);
+          filters.push({
+            type: filterType,
+            field: fieldPath,
+            value
+          });
+        } catch (e) {
+          console.error('Error parsing filter', queryFilter);
+        }
+      }
+    }
+  }
+  return filters;
+}
+function getSort(list, query) {
+  const param = typeof query.sortBy === 'string' ? query.sortBy : null;
+  if (param === '') return null;
+  if (!param) {
+    if (!list.initialSort) return null;
+    return {
+      column: list.initialSort.field,
+      direction: list.initialSort.direction === 'ASC' ? 'ascending' : 'descending'
+    };
+  }
+  const fieldKey = param.startsWith('-') ? param.slice(1) : param;
+  const direction = param.startsWith('-') ? 'descending' : 'ascending';
+  const field = list.fields[fieldKey];
+  if (!field) return null;
+  if (!field.isOrderable) return null;
+  return {
+    column: fieldKey,
+    direction
+  };
+}
+function getCurrentPage(_, query) {
+  const currentPage = Number(query.page);
+  if (Number.isNaN(currentPage) || currentPage < 1) return 1;
+  return currentPage;
+}
+function getPageSize(list, query) {
+  const pageSize = Number(query.pageSize);
+  if (Number.isNaN(pageSize) || pageSize < 1) return list.pageSize;
+  return snapValueToClosest(pageSize);
+}
+function getColumns(list, query) {
+  const param_ = query.column;
+  const params = Array.isArray(param_) ? param_ : typeof param_ === 'string' ? [param_] : [];
+  if (!params.length) return list.initialColumns;
+  return params;
+}
+const getListPage = props => () => /*#__PURE__*/jsx(ListPage, {
+  ...props
+});
+function ListPage({
+  listKey
+}) {
+  var _list$hideCreate, _data$items$map, _data$items, _data$items4;
+  const localStorageListKey = `nixxie.list.${listKey}.list.page.info`;
+  const list = useList(listKey);
+  const {
+    query,
+    replace: routerReplace,
+    isReady
+  } = useRouter();
+  const [loaded, setLoaded] = useState(false);
+  const [sort, setSort] = useState(() => getSort(list, {}));
+  const [columns, setColumns] = useState(list.initialColumns);
+  const [filters, setFilters] = useState(() => getFilters(list, {}));
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(list.pageSize);
+  const [searchString, setSearchString] = useState('');
+  const [selectedItems, setSelectedItems] = useState(() => new Set([]));
+  const [activeAction, setActiveAction] = useState(null);
+  const [actionResult, setActionResult] = useState(null);
+  const dirty = useMemo(() => {
+    const defaultFilters = getFilters(list, {});
+    const defaultSort = getSort(list, {});
+    return !!searchString || !isDeepEqual(filters, defaultFilters) || !isDeepEqual(sort, defaultSort) || !isDeepEqual(columns, list.initialColumns);
+  }, [searchString, filters, sort, columns, list.initialColumns]);
+  useEffect(() => {
+    if (!isReady) return;
+    if (loaded) return;
+    let localStorageQuery;
+    try {
+      var _localStorage$getItem;
+      localStorageQuery = JSON.parse((_localStorage$getItem = localStorage.getItem(localStorageListKey)) !== null && _localStorage$getItem !== void 0 ? _localStorage$getItem : '{}');
+    } catch {}
+    setSort(getSort(list, {
+      ...localStorageQuery,
+      ...query
+    }));
+    setColumns(getColumns(list, {
+      ...localStorageQuery,
+      ...query
+    }));
+    setFilters(getFilters(list, {
+      ...localStorageQuery,
+      ...query
+    }));
+    setCurrentPage(getCurrentPage(list, {
+      ...localStorageQuery,
+      ...query
+    }));
+    setPageSize(getPageSize(list, {
+      ...localStorageQuery,
+      ...query
+    }));
+    setSearchString(typeof query.search === 'string' ? query.search : '');
+    setLoaded(true);
+  }, [list, isReady]);
+  useEffect(() => {
+    if (!isReady) return;
+    if (!loaded) return; // TODO: stop this race condition properly
+    const updatedQuery = {
+      ...(columns.length ? {
+        column: columns
+      } : {}),
+      ...(sort ? {
+        sortBy: sort.direction === 'ascending' ? sort.column : `-${sort.column}`
+      } : {}),
+      ...(filters.length ? {
+        filter: function () {
+          const result = [];
+          for (const filter of filters) {
+            if (filter.type === 'not_empty' || filter.type === 'empty') {
+              result.push(`${filter.field}_${filter.type}`);
+              continue;
+            }
+            result.push(`${filter.field}_${filter.type}_${JSON.stringify(filter.value)}`);
+          }
+          return result;
+        }()
+      } : {}),
+      ...(currentPage > 1 ? {
+        page: currentPage
+      } : {}),
+      ...(pageSize !== list.pageSize ? {
+        pageSize
+      } : {}),
+      ...(searchString ? {
+        search: searchString
+      } : {})
+    };
+    localStorage.setItem(localStorageListKey, JSON.stringify(updatedQuery));
+    routerReplace({
+      query: updatedQuery
+    });
+  }, [columns, sort, filters, currentPage, pageSize, searchString, list, loaded]);
+  const allowCreate = !((_list$hideCreate = list.hideCreate) !== null && _list$hideCreate !== void 0 ? _list$hideCreate : true);
+  const isConstrained = Boolean(filters.length || query.search);
+  const readableFields = Object.values(list.fields).map(f => ({
+    id: f.key,
+    value: f.key,
+    label: f.label,
+    isDisabled: f.listView.fieldMode === 'read'
+  }));
+  const where = useMemo(() => filters.map(filter => {
+    return list.fields[filter.field].controller.filter.graphql({
+      type: filter.type,
+      value: filter.value
+    });
+  }), [list, filters]);
+  const actionsAvailable = useMemo(() => list.actions.filter(x => isActionAvailable(x, x.listView)), [list.actions]);
+  const actionConditionalFilterFieldKeys = useMemo(() => {
+    const fieldKeys = new Set();
+    for (const action of actionsAvailable) {
+      for (const fieldKey of getConditionalFilterFieldKeys(action.listView.actionMode)) {
+        fieldKeys.add(fieldKey);
+      }
+    }
+    return fieldKeys;
+  }, [actionsAvailable]);
+  const search = useSearchFilter(searchString, list, list.initialSearchFields);
+  const {
+    data,
+    error,
+    refetch,
+    loading
+  } = useQuery(useMemo(() => {
+    const fieldKeys = new Set(columns); // only the shown columns
+
+    // and any fields needed by the action filters
+    for (const fieldKey of actionConditionalFilterFieldKeys) {
+      fieldKeys.add(fieldKey);
+    }
+    for (const action of actionsAvailable) {
+      for (const arg of action.graphql.arguments) {
+        if (!arg.source) continue;
+        fieldKeys.add(arg.source.itemField);
+      }
+    }
+    const fieldsToQuery = [...fieldKeys].filter(fieldKey => fieldKey !== 'id') // id is always included
+    .map(fieldKey => {
+      var _list$fields$fieldKey;
+      return (_list$fields$fieldKey = list.fields[fieldKey]) === null || _list$fields$fieldKey === void 0 ? void 0 : _list$fields$fieldKey.controller.graphqlSelection;
+    }).filter(Boolean).join('\n');
+
+    // TODO: less interpolation
+    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
+          ) {
+            id
+            ${fieldsToQuery}
+          }
+          count: ${list.graphql.names.listQueryCountName}(where: $where)
+        }
+      `;
+  }, [list, list.fields, columns, actionsAvailable, actionConditionalFilterFieldKeys]), {
+    fetchPolicy: 'cache-and-network',
+    errorPolicy: 'all',
+    variables: {
+      where: {
+        ...(where.length ? {
+          AND: where
+        } : {}),
+        ...(search.length ? {
+          OR: search
+        } : {})
+      },
+      take: pageSize,
+      skip: (currentPage - 1) * pageSize,
+      orderBy: sort ? [{
+        [sort.column]: sort.direction === 'ascending' ? 'asc' : 'desc'
+      }] : undefined
+    }
+  });
+  useEffect(() => {
+    if (typeof (data === null || data === void 0 ? void 0 : data.count) !== 'number') return;
+    const lastPage = Math.max(Math.ceil(data.count / pageSize), 1);
+    if (currentPage > lastPage) {
+      setCurrentPage(lastPage);
+    }
+  }, [data]);
+  const selectedItemIds = (selectedItems === 'all' ? (_data$items$map = data === null || data === void 0 || (_data$items = data.items) === null || _data$items === void 0 ? void 0 : _data$items.map(item => item.id)) !== null && _data$items$map !== void 0 ? _data$items$map : [] : Array.from(selectedItems)).map(String);
+  const isEmpty = Boolean((data === null || data === void 0 ? void 0 : data.count) === 0 && !isConstrained);
+  const headers = columns.map(column => {
+    var _data$items2;
+    const field = list.fields[column];
+    if (!field) return;
+    return {
+      id: field.key,
+      label: field.label,
+      allowsSorting: !isConstrained && !(data !== null && data !== void 0 && (_data$items2 = data.items) !== null && _data$items2 !== void 0 && _data$items2.length) ? false : field.isOrderable
+    };
+  }).filter(x => Boolean(x));
+  function onAddFilter(newFilter) {
+    setFilters(prevFilters => [...prevFilters, newFilter]);
+  }
+  function resetToDefaults() {
+    const defaultFilters = getFilters(list, {});
+    const defaultSort = getSort(list, {});
+    setSearchString('');
+    setColumns(list.initialColumns);
+    setFilters(defaultFilters);
+    setSort(defaultSort);
+  }
+  const actionsList = [...actionsAvailable, ...(list.hideDelete ? [] : [{
+    key: 'delete',
+    label: 'Delete',
+    icon: 'trash2Icon',
+    graphql: {
+      arguments: [],
+      names: {
+        one: list.graphql.names.deleteMutationName,
+        many: list.graphql.names.deleteManyMutationName
+      }
+    },
+    messages: {
+      promptTitle: 'Delete {singular}?',
+      promptTitleMany: 'Delete {count} {singular|plural}?',
+      prompt: 'Are you sure you want to delete {singular}? This action cannot be undone.',
+      promptMany: 'Are you sure you want to delete {count} {singular|plural}? This action cannot be undone.',
+      promptConfirmLabel: 'Yes, delete',
+      promptConfirmLabelMany: 'Yes, delete',
+      success: 'Deleted {singular}.',
+      successMany: 'Deleted {countSuccess} {singular|plural}.',
+      fail: 'Unable to delete {singular}.',
+      failMany: 'Unable to delete {countFail} {singular|plural}.'
+    },
+    itemView: null,
+    // unusud
+    listView: {
+      actionMode: list.hideDelete ? 'hidden' : 'enabled'
+    }
+  }])];
+  const selectionMode = actionsList.length > 0 ? 'multiple' : 'none';
+  const selectedRows = useMemo(() => {
+    var _data$items$filter, _data$items3;
+    return (_data$items$filter = data === null || data === void 0 || (_data$items3 = data.items) === null || _data$items3 === void 0 ? void 0 : _data$items3.filter(item => selectedItemIds.includes(String(item.id)))) !== null && _data$items$filter !== void 0 ? _data$items$filter : [];
+  }, [data === null || data === void 0 ? void 0 : data.items, selectedItemIds]);
+  const actionConditionalFilterFields = useMemo(() => pick(list.fields, actionConditionalFilterFieldKeys), [actionConditionalFilterFieldKeys, list.fields]);
+  const serializedSelectedRows = useMemo(() => selectedRows.map(row => {
+    const value = deserializeItemToValue(actionConditionalFilterFields, row);
+    return serializeItemForConditionalFilters(actionConditionalFilterFields, value);
+  }), [actionConditionalFilterFields, selectedRows]);
+  const {
+    actions,
+    disabledKeys: disabledActionKeys
+  } = useMemo(() => {
+    const disabledKeys = [];
+    const actions = [];
+    for (const action of actionsList) {
+      let actionMode;
+      for (const serializedValue of serializedSelectedRows) {
+        const mode = resolveActionMode(action.listView.actionMode, serializedValue);
+        if (mode === 'hidden') {
+          actionMode = 'hidden';
+          break;
+        }
+        if (mode === 'disabled') actionMode = 'disabled';
+      }
+      if (actionMode === 'hidden') continue;
+      if (actionMode === 'disabled') disabledKeys.push(action.key);
+      actions.push(action);
+    }
+    return {
+      actions,
+      disabledKeys
+    };
+  }, [actionsList, serializedSelectedRows]);
+  return /*#__PURE__*/jsx(PageContainer, {
+    header: /*#__PURE__*/jsx(ListPageHeader, {
+      listKey: listKey,
+      showCreate: allowCreate
+    }),
+    title: list.label,
+    children: /*#__PURE__*/jsxs(VStack, {
+      flex: true,
+      gap: "large",
+      paddingX: "xlarge",
+      paddingY: "xlarge",
+      minHeight: 0,
+      minWidth: 0,
+      children: [/*#__PURE__*/jsxs(HStack, {
+        gap: "regular",
+        alignItems: "center",
+        children: [/*#__PURE__*/jsx(SearchField, {
+          "aria-label": "Search",
+          isDisabled: isEmpty,
+          onClear: () => setSearchString(''),
+          onChange: v => setSearchString(v),
+          placeholder: "Search\u2026",
+          value: searchString,
+          width: "alias.singleLineWidth",
+          flexGrow: {
+            mobile: 1,
+            tablet: 0
+          }
+        }), /*#__PURE__*/jsx(FilterAdd, {
+          listKey: listKey,
+          onAdd: onAddFilter,
+          isDisabled: isEmpty
+        }), /*#__PURE__*/jsxs(MenuTrigger, {
+          children: [/*#__PURE__*/jsxs(ActionButton, {
+            isDisabled: isEmpty,
+            children: [/*#__PURE__*/jsx(Text, {
+              children: "Columns"
+            }), /*#__PURE__*/jsx(Icon, {
+              src: chevronDownIcon
+            })]
+          }), /*#__PURE__*/jsx(Menu, {
+            items: readableFields,
+            disallowEmptySelection: true,
+            onSelectionChange: selection => {
+              if (selection === 'all') {
+                setColumns(readableFields.map(field => field.id));
+              } else {
+                setColumns(readableFields.filter(f => selection.has(f.id)).map(f => f.id));
+              }
+            },
+            selectionMode: "multiple",
+            selectedKeys: columns,
+            children: item => /*#__PURE__*/jsx(Item$1, {
+              children: item.label
+            }, item.value)
+          })]
+        }), dirty ? /*#__PURE__*/jsxs(TooltipTrigger, {
+          children: [/*#__PURE__*/jsx(ActionButton, {
+            "aria-label": "reset",
+            onPress: resetToDefaults,
+            prominence: "low",
+            children: /*#__PURE__*/jsx(Icon, {
+              src: undo2Icon
+            })
+          }), /*#__PURE__*/jsx(Tooltip, {
+            children: "Reset to defaults"
+          })]
+        }) : null, isReady && loading && /*#__PURE__*/jsx(ProgressCircle, {
+          "aria-label": "Loading\u2026",
+          size: "small",
+          isIndeterminate: true
+        })]
+      }), filters.length ? /*#__PURE__*/jsx(Flex, {
+        gap: "small",
+        wrap: true,
+        children: filters.map((filter, i) => {
+          const field = list.fields[filter.field];
+          function onRemove() {
+            setFilters(prevFilters => prevFilters.filter(f => f !== filter));
+          }
+          function onChange(updatedFilter) {
+            setFilters(prevFilters => [...prevFilters.filter(f => f !== filter), updatedFilter]);
+          }
+          return /*#__PURE__*/jsx(FilterTag, {
+            field: field,
+            filter: filter,
+            onChange: onChange,
+            onRemove: onRemove
+          }, i);
+        })
+      }) : null, /*#__PURE__*/jsx(GraphQLErrorNotice, {
+        errors: [error]
+      }), /*#__PURE__*/jsxs(ActionBarContainer, {
+        flex: true,
+        minHeight: "scale.3000",
+        children: [/*#__PURE__*/jsxs(TableView, {
+          "aria-labelledby": LIST_PAGE_TITLE_ID,
+          selectionMode: selectionMode,
+          onSortChange: setSort,
+          sortDescriptor: sort !== null && sort !== void 0 ? sort : undefined,
+          density: "spacious",
+          overflowMode: "truncate",
+          onSelectionChange: setSelectedItems,
+          selectedKeys: selectedItems,
+          renderEmptyState: () => loading ? /*#__PURE__*/jsx(ProgressCircle, {
+            "aria-label": "Preparing items",
+            isIndeterminate: true
+          }) : isConstrained ? /*#__PURE__*/jsx(EmptyState, {
+            icon: searchXIcon,
+            title: "No results",
+            message: "No items found. Try adjusting your search or filters."
+          }) : /*#__PURE__*/jsx(EmptyState, {
+            icon: textSelectIcon,
+            title: "Empty list",
+            message: "Add the first item to see it here."
+          }),
+          flex: true,
+          UNSAFE_style: {
+            opacity: loading && !!data ? 0.5 : undefined
+          },
+          children: [/*#__PURE__*/jsx(TableHeader, {
+            columns: headers,
+            children: ({
+              label,
+              id,
+              ...options
+            }) => /*#__PURE__*/jsx(Column, {
+              isRowHeader: true,
+              ...options,
+              children: label
+            }, id)
+          }), /*#__PURE__*/jsx(TableBody, {
+            items: (_data$items4 = data === null || data === void 0 ? void 0 : data.items) !== null && _data$items4 !== void 0 ? _data$items4 : [],
+            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, {
+                    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(ActionBar, {
+          selectedItemCount: selectedItemIds.length,
+          onClearSelection: () => setSelectedItems(new Set()),
+          UNSAFE_className: css({
+            // TODO: update in @keystar/ui package
+            // make `tokenSchema.size.shadow.regular` token "0 1px 4px"
+            'div:has([data-focus-scope-start])': {
+              backgroundColor: tokenSchema.color.background.canvas,
+              border: `${tokenSchema.size.border.regular} solid ${tokenSchema.color.border.emphasis}`,
+              borderRadius: tokenSchema.size.radius.regular,
+              boxShadow: `0 1px 4px ${tokenSchema.color.shadow.regular}`
+            }
+          }),
+          disabledKeys: disabledActionKeys,
+          onAction: setActiveAction,
+          children: [...function* () {
+            for (const action of actions) {
+              const iconComponent = action.icon ? allIcons[action.icon] : null;
+              yield /*#__PURE__*/jsxs(Item$1, {
+                textValue: action.label,
+                children: [iconComponent ? /*#__PURE__*/jsx(Icon, {
+                  src: iconComponent
+                }) : null, /*#__PURE__*/jsx(Text, {
+                  children: action.label
+                })]
+              }, action.key);
+            }
+          }()]
+        })]
+      }), !!(data !== null && data !== void 0 && data.count) && /*#__PURE__*/jsx(PaginationControls, {
+        singular: list.singular,
+        plural: list.plural,
+        currentPage: currentPage,
+        pageSize: pageSize,
+        total: data.count,
+        onChangePage: page => setCurrentPage(page),
+        onChangePageSize: pageSize => setPageSize(pageSize),
+        defaultPageSize: list.pageSize
+      }), /*#__PURE__*/jsx(DialogContainer, {
+        onDismiss: () => {
+          setActiveAction(null);
+        },
+        children: actions.filter(action => action.key === activeAction).map(action => {
+          var _data$items5;
+          return /*#__PURE__*/jsx(ActionItemsDialog, {
+            itemIds: selectedItemIds,
+            items: (_data$items5 = data === null || data === void 0 ? void 0 : data.items) !== null && _data$items5 !== void 0 ? _data$items5 : [],
+            action: action,
+            list: list,
+            onSuccess: remaining => {
+              refetch();
+              setSelectedItems(remaining);
+            },
+            onErrors: setActionResult
+          });
+        }).pop()
+      }), /*#__PURE__*/jsx(DialogContainer, {
+        onDismiss: () => setActionResult(null),
+        isDismissable: true,
+        children: actionResult ? /*#__PURE__*/jsxs(Dialog, {
+          children: [/*#__PURE__*/jsxs(Heading, {
+            children: ["Error details for ", actionResult.action.label, " action"]
+          }), /*#__PURE__*/jsx(Content, {
+            children: /*#__PURE__*/jsx(VStack, {
+              gap: "large",
+              children: [...function* () {
+                const {
+                  action,
+                  errors: actionErrors
+                } = actionResult;
+                for (const [itemId, itemActionErrors] of Object.entries(actionErrors)) {
+                  var _data$items$find, _data$items6, _ref;
+                  const item = (_data$items$find = data === null || data === void 0 || (_data$items6 = data.items) === null || _data$items6 === void 0 ? void 0 : _data$items6.find(i => i.id === itemId)) !== null && _data$items$find !== void 0 ? _data$items$find : null;
+                  const itemLabel = (_ref = item === null || item === void 0 ? void 0 : item[list.labelField]) !== null && _ref !== void 0 ? _ref : itemId;
+                  const href = `/${list.path}/${itemId}`;
+                  for (const error of itemActionErrors) {
+                    yield /*#__PURE__*/jsx(VStack, {
+                      gap: "regular",
+                      children: /*#__PURE__*/jsxs(Notice, {
+                        tone: "critical",
+                        children: [/*#__PURE__*/jsxs(Content, {
+                          children: [/*#__PURE__*/jsxs(Text, {
+                            children: ["You might try running the action again from", ' ', /*#__PURE__*/jsxs(TextLink, {
+                              href: href,
+                              children: ["the ", list.singular.toLowerCase(), "."]
+                            })]
+                          }), /*#__PURE__*/jsx(Box, {
+                            elementType: "pre",
+                            backgroundColor: "critical",
+                            borderRadius: "regular",
+                            maxHeight: "100%",
+                            overflow: "auto",
+                            children: /*#__PURE__*/jsx(Text, {
+                              color: "critical",
+                              UNSAFE_className: css({
+                                fontFamily: tokenSchema.typography.fontFamily.code
+                              }),
+                              children: error.message
+                            })
+                          })]
+                        }), /*#__PURE__*/jsx("div", {
+                          children: /*#__PURE__*/jsx(Heading, {
+                            children: replace(action.messages.fail, list, {
+                              ...action,
+                              itemLabel
+                            }, false)
+                          })
+                        })]
+                      })
+                    }, itemId);
+                  }
+                }
+              }()]
+            })
+          })]
+        }) : null
+      })]
+    })
+  });
+}
+const LIST_PAGE_TITLE_ID = 'nixxie-list-page-title';
+function ListPageHeader({
+  listKey,
+  showCreate
+}) {
+  const list = useList(listKey);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Heading, {
+      id: LIST_PAGE_TITLE_ID,
+      elementType: "h1",
+      size: "small",
+      children: list.label
+    }), showCreate && /*#__PURE__*/jsx(CreateButtonLink, {
+      list: list,
+      children: `New ${list.singular.toLocaleLowerCase()}`
+    })]
+  });
+}
+function replace(s, list, args, many) {
+  var _args$itemLabel;
+  s = s.replaceAll('{Label}', args.label);
+  s = s.replaceAll('{label}', args.label.toLowerCase());
+  if (s.includes('{singular|plural}')) s = s.replaceAll('{singular|plural}', many ? '{plural}' : '{singular}');
+  if (s.includes('{Singular}')) s = s.replaceAll('{Singular}', list.singular);
+  if (s.includes('{Plural}')) s = s.replaceAll('{Plural}', list.plural);
+  if (s.includes('{singular}')) s = s.replaceAll('{singular}', list.singular.toLowerCase());
+  if (s.includes('{plural}')) s = s.replaceAll('{plural}', list.plural.toLowerCase());
+  if ('count' in args) s = s.replaceAll('{count}', String(args.count));
+  if ('countFail' in args) s = s.replaceAll('{countFail}', String(args.countFail));
+  if ('countSuccess' in args) s = s.replaceAll('{countSuccess}', String(args.countSuccess));
+  if ('itemLabel' in args) s = s.replaceAll('{itemLabel}', (_args$itemLabel = args.itemLabel) !== null && _args$itemLabel !== void 0 ? _args$itemLabel : '');
+  return s;
+}
+function ActionItemsDialog({
+  list,
+  itemIds,
+  items,
+  onSuccess,
+  onErrors,
+  action
+}) {
+  const actionMutation = action.key === 'delete' ? gql`mutation($where: [${list.graphql.names.whereUniqueInputName}!]!) {
+      results: ${action.graphql.names.many}(where: $where) {
+        id
+      }
+    }` : gql`mutation($data: [${action.graphql.names.one[0].toUpperCase()}${action.graphql.names.one.slice(1)}Args!]!) {
+      results: ${action.graphql.names.many}(data: $data) {
+        id
+      }
+    }`;
+  const [actionOnItems] = useMutation(actionMutation, {
+    variables: action.key === 'delete' ? {
+      where: itemIds.map(id => ({
+        id
+      }))
+    } : {
+      data: itemIds.flatMap(id => {
+        const row = items.find(item => String(item.id) === id);
+        if (!row) {
+          return [];
+        }
+        const deserialized = deserializeItemToValue(list.fields, row);
+        const args = getActionArguments(list, action, deserialized);
+        return {
+          where: {
+            id
+          },
+          ...args
+        };
+      })
+    },
+    errorPolicy: 'all'
+  });
+  const {
+    messages: m
+  } = action;
+  async function onTryAction() {
+    try {
+      const {
+        error
+      } = await actionOnItems();
+      const failed = new Set();
+      const actionErrors = {};
+      let countFail = 0;
+      if (CombinedGraphQLErrors.is(error)) {
+        countFail = error.errors.length;
+        for (const err of (_error$errors = error.errors) !== null && _error$errors !== void 0 ? _error$errors : []) {
+          var _error$errors, _err$path, _actionErrors$itemId;
+          const i = (_err$path = err.path) === null || _err$path === void 0 ? void 0 : _err$path[1];
+          if (typeof i !== 'number') continue;
+          const itemId = itemIds[i];
+          failed.add(itemId);
+          (_actionErrors$itemId = actionErrors[itemId]) !== null && _actionErrors$itemId !== void 0 ? _actionErrors$itemId : actionErrors[itemId] = [];
+          actionErrors[itemId].push(err);
+        }
+      }
+      const countSuccess = itemIds.length - countFail;
+      if (countSuccess) {
+        toastQueue.neutral(replace(m.successMany, list, {
+          ...action,
+          count: itemIds.length,
+          countFail,
+          countSuccess
+        }, countSuccess > 1), {
+          timeout: 5000
+        });
+      }
+      if (countFail) {
+        toastQueue.critical(replace(m.failMany, list, {
+          ...action,
+          count: itemIds.length,
+          countFail,
+          countSuccess
+        }, countFail > 1), {
+          actionLabel: 'Details',
+          onAction: () => onErrors({
+            action,
+            errors: actionErrors
+          }),
+          shouldCloseOnAction: true
+        });
+      }
+      return onSuccess(failed);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  return /*#__PURE__*/jsx(AlertDialog, {
+    tone: action.key === 'delete' ? 'critical' : 'neutral',
+    title: replace(m.promptTitleMany, list, {
+      ...action,
+      count: itemIds.length
+    }, itemIds.length > 1),
+    cancelLabel: "Cancel",
+    primaryActionLabel: replace(m.promptConfirmLabelMany, list, {
+      ...action,
+      count: itemIds.length
+    }, itemIds.length > 1),
+    onPrimaryAction: onTryAction,
+    children: /*#__PURE__*/jsx(Text, {
+      children: replace(m.promptMany, list, {
+        ...action,
+        count: itemIds.length
+      }, itemIds.length > 1)
+    })
+  });
+}
+
+export { getListPage };