payload 0.20.0 → 0.20.3-beta.0

package/dist/admin/components/views/collections/List/Cell/field-types/index.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+declare const _default: {
+    array: import("react").FC<{
+        data: Record<string, unknown>;
+        field: import("../../../../../../../fields/config/types").ArrayField;
+    }>;
+    blocks: ({ data, field }: {
+        data: any;
+        field: any;
+    }) => JSX.Element;
+    code: ({ data }: {
+        data: any;
+    }) => JSX.Element;
+    checkbox: ({ data }: {
+        data: any;
+    }) => JSX.Element;
+    date: ({ data }: {
+        data: any;
+    }) => JSX.Element;
+    relationship: (props: any) => JSX.Element;
+    richText: ({ data }: {
+        data: any;
+    }) => JSX.Element;
+    select: ({ data, field }: {
+        data: any;
+        field: import("../../../../../../../fields/config/types").SelectField;
+    }) => JSX.Element;
+    textarea: ({ data }: {
+        data: any;
+    }) => JSX.Element;
+    upload: (props: any) => JSX.Element;
+};
+export default _default;

package/dist/admin/components/views/collections/List/Cell/field-types/index.js

@@ -0,0 +1,21 @@
+import array from './Array';
+import blocks from './Blocks';
+import checkbox from './Checkbox';
+import code from './Code';
+import date from './Date';
+import relationship from './Relationship';
+import richText from './Richtext';
+import select from './Select';
+import textarea from './Textarea';
+export default {
+    array,
+    blocks,
+    code,
+    checkbox,
+    date,
+    relationship,
+    richText,
+    select,
+    textarea,
+    upload: relationship,
+};

package/dist/admin/components/views/collections/List/Cell/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './types';
+declare const Cell: React.FC<Props>;
+export default Cell;

package/dist/admin/components/views/collections/List/Cell/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useConfig } from '../../../../utilities/Config';
+import RenderCustomComponent from '../../../../utilities/RenderCustomComponent';
+import cellComponents from './field-types';
+const DefaultCell = (props) => {
+    const { field, colIndex, collection: { slug, }, cellData, rowData: { id, } = {}, } = props;
+    const { routes: { admin } } = useConfig();
+    let WrapElement = 'span';
+    const wrapElementProps = {};
+    if (colIndex === 0) {
+        WrapElement = Link;
+        wrapElementProps.to = `${admin}/collections/${slug}/${id}`;
+    }
+    const CellComponent = cellData && cellComponents[field.type];
+    if (!CellComponent) {
+        return (React.createElement(WrapElement, { ...wrapElementProps },
+            (cellData === '' || typeof cellData === 'undefined') && `<No ${typeof field.label === 'string' ? field.label : 'data'}>`,
+            typeof cellData === 'string' && cellData,
+            typeof cellData === 'number' && cellData,
+            typeof cellData === 'object' && JSON.stringify(cellData)));
+    }
+    return (React.createElement(WrapElement, { ...wrapElementProps },
+        React.createElement(CellComponent, { field: field, data: cellData })));
+};
+const Cell = (props) => {
+    const { colIndex, collection, cellData, rowData, field, field: { admin: { components: { Cell: CustomCell, } = {}, } = {}, }, } = props;
+    return (React.createElement(RenderCustomComponent, { componentProps: {
+            rowData,
+            colIndex,
+            cellData,
+            collection,
+            field,
+        }, CustomComponent: CustomCell, DefaultComponent: DefaultCell }));
+};
+export default Cell;

package/dist/admin/components/views/collections/List/Cell/types.d.ts

@@ -0,0 +1,11 @@
+import { Field } from '../../../../../../fields/config/types';
+import { SanitizedCollectionConfig } from '../../../../../../collections/config/types';
+export declare type Props = {
+    field: Field;
+    colIndex: number;
+    collection: SanitizedCollectionConfig;
+    cellData: unknown;
+    rowData: {
+        [path: string]: unknown;
+    };
+};

package/dist/admin/components/views/collections/List/Cell/types.js

@@ -0,0 +1 @@
+export {};

package/dist/admin/components/views/collections/List/Default.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const DefaultList: React.FC<Props>;
+export default DefaultList;

package/dist/admin/components/views/collections/List/Default.js

@@ -0,0 +1,65 @@
+import React, { Fragment } from 'react';
+import { useHistory } from 'react-router-dom';
+import { useConfig } from '../../../utilities/Config';
+import UploadGallery from '../../../elements/UploadGallery';
+import Eyebrow from '../../../elements/Eyebrow';
+import Paginator from '../../../elements/Paginator';
+import ListControls from '../../../elements/ListControls';
+import Pill from '../../../elements/Pill';
+import Button from '../../../elements/Button';
+import Table from '../../../elements/Table';
+import Meta from '../../../utilities/Meta';
+import ViewDescription from '../../../elements/ViewDescription';
+import PerPage from '../../../elements/PerPage';
+import { Gutter } from '../../../elements/Gutter';
+import { RelationshipProvider } from './RelationshipProvider';
+import './index.scss';
+const baseClass = 'collection-list';
+const DefaultList = (props) => {
+    var _a, _b;
+    const { collection, collection: { upload, slug, labels: { singular: singularLabel, plural: pluralLabel, }, admin: { description, } = {}, }, data, newDocumentURL, limit, tableColumns, columnNames, setColumns, hasCreatePermission, } = props;
+    const { routes: { admin } } = useConfig();
+    const history = useHistory();
+    return (React.createElement("div", { className: baseClass },
+        React.createElement(Meta, { title: collection.labels.plural }),
+        React.createElement(Eyebrow, null),
+        React.createElement(Gutter, { className: `${baseClass}__wrap` },
+            React.createElement("header", { className: `${baseClass}__header` },
+                React.createElement("h1", null, pluralLabel),
+                hasCreatePermission && (React.createElement(Pill, { to: newDocumentURL }, "Create New")),
+                description && (React.createElement("div", { className: `${baseClass}__sub-header` },
+                    React.createElement(ViewDescription, { description: description })))),
+            React.createElement(ListControls, { collection: collection, columns: columnNames, setColumns: setColumns, enableColumns: Boolean(!upload), enableSort: Boolean(upload) }),
+            (data.docs && data.docs.length > 0) && (React.createElement(React.Fragment, null,
+                !upload && (React.createElement(RelationshipProvider, null,
+                    React.createElement(Table, { data: data.docs, columns: tableColumns }))),
+                upload && (React.createElement(UploadGallery, { docs: data.docs, collection: collection, onCardClick: (doc) => history.push(`${admin}/collections/${slug}/${doc.id}`) })))),
+            data.docs && data.docs.length === 0 && (React.createElement("div", { className: `${baseClass}__no-results` },
+                React.createElement("p", null,
+                    "No",
+                    ' ',
+                    pluralLabel,
+                    ' ',
+                    "found. Either no",
+                    ' ',
+                    pluralLabel,
+                    ' ',
+                    "exist yet or none match the filters you've specified above."),
+                hasCreatePermission && (React.createElement(Button, { el: "link", to: newDocumentURL },
+                    "Create new",
+                    ' ',
+                    singularLabel)))),
+            React.createElement("div", { className: `${baseClass}__page-controls` },
+                React.createElement(Paginator, { limit: data.limit, totalPages: data.totalPages, page: data.page, hasPrevPage: data.hasPrevPage, hasNextPage: data.hasNextPage, prevPage: data.prevPage, nextPage: data.nextPage, numberOfNeighbors: 1 }),
+                (data === null || data === void 0 ? void 0 : data.totalDocs) > 0 && (React.createElement(Fragment, null,
+                    React.createElement("div", { className: `${baseClass}__page-info` },
+                        (data.page * data.limit) - (data.limit - 1),
+                        "-",
+                        data.totalPages > 1 && data.totalPages !== data.page ? (data.limit * data.page) : data.totalDocs,
+                        ' ',
+                        "of",
+                        ' ',
+                        data.totalDocs),
+                    React.createElement(PerPage, { limits: (_b = (_a = collection === null || collection === void 0 ? void 0 : collection.admin) === null || _a === void 0 ? void 0 : _a.pagination) === null || _b === void 0 ? void 0 : _b.limits, limit: limit })))))));
+};
+export default DefaultList;

package/dist/admin/components/views/collections/List/RelationshipProvider/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TypeWithID } from '../../../../../../collections/config/types';
+export declare type Documents = {
+    [slug: string]: {
+        [id: string | number]: TypeWithID | null | false;
+    };
+};
+declare type ListRelationshipContext = {
+    getRelationships: (docs: {
+        relationTo: string;
+        value: number | string;
+    }[]) => void;
+    documents: Documents;
+};
+export declare const RelationshipProvider: React.FC<{
+    children?: React.ReactNode;
+}>;
+export declare const useListRelationships: () => ListRelationshipContext;
+export {};

package/dist/admin/components/views/collections/List/RelationshipProvider/index.js

@@ -0,0 +1,46 @@
+import React, { createContext, useCallback, useContext, useEffect, useReducer } from 'react';
+import querystring from 'qs';
+import { useConfig } from '../../../../utilities/Config';
+import { reducer } from './reducer';
+import useDebounce from '../../../../../hooks/useDebounce';
+const Context = createContext({});
+export const RelationshipProvider = ({ children }) => {
+    const [documents, dispatchDocuments] = useReducer(reducer, {});
+    const debouncedDocuments = useDebounce(documents, 100);
+    const config = useConfig();
+    const { serverURL, routes: { api }, } = config;
+    useEffect(() => {
+        Object.entries(debouncedDocuments).forEach(async ([slug, docs]) => {
+            const idsToLoad = [];
+            Object.entries(docs).forEach(([id, value]) => {
+                if (value === null) {
+                    idsToLoad.push(id);
+                }
+            });
+            if (idsToLoad.length > 0) {
+                const url = `${serverURL}${api}/${slug}`;
+                const params = {
+                    depth: 0,
+                    'where[id][in]': idsToLoad,
+                    pagination: false,
+                };
+                const query = querystring.stringify(params, { addQueryPrefix: true });
+                const result = await fetch(`${url}${query}`);
+                if (result.ok) {
+                    const json = await result.json();
+                    if (json.docs) {
+                        dispatchDocuments({ type: 'ADD_LOADED', docs: json.docs, relationTo: slug, idsToLoad });
+                    }
+                }
+                else {
+                    dispatchDocuments({ type: 'ADD_LOADED', docs: [], relationTo: slug, idsToLoad });
+                }
+            }
+        });
+    }, [serverURL, api, debouncedDocuments]);
+    const getRelationships = useCallback(async (relationships) => {
+        dispatchDocuments({ type: 'REQUEST', docs: relationships });
+    }, []);
+    return (React.createElement(Context.Provider, { value: { getRelationships, documents } }, children));
+};
+export const useListRelationships = () => useContext(Context);

package/dist/admin/components/views/collections/List/RelationshipProvider/reducer.d.ts

@@ -0,0 +1,18 @@
+import { Documents } from './index';
+import { TypeWithID } from '../../../../../../collections/config/types';
+declare type RequestDocuments = {
+    type: 'REQUEST';
+    docs: {
+        relationTo: string;
+        value: number | string;
+    }[];
+};
+declare type AddLoadedDocuments = {
+    type: 'ADD_LOADED';
+    relationTo: string;
+    docs: TypeWithID[];
+    idsToLoad: (string | number)[];
+};
+declare type Action = RequestDocuments | AddLoadedDocuments;
+export declare function reducer(state: Documents, action: Action): Documents;
+export {};

package/dist/admin/components/views/collections/List/RelationshipProvider/reducer.js

@@ -0,0 +1,34 @@
+export function reducer(state, action) {
+    switch (action.type) {
+        case 'REQUEST': {
+            const newState = { ...state };
+            action.docs.forEach(({ relationTo, value }) => {
+                if (typeof newState[relationTo] !== 'object') {
+                    newState[relationTo] = {};
+                }
+                newState[relationTo][value] = null;
+            });
+            return newState;
+        }
+        case 'ADD_LOADED': {
+            const newState = { ...state };
+            if (typeof newState[action.relationTo] !== 'object') {
+                newState[action.relationTo] = {};
+            }
+            const unreturnedIDs = [...action.idsToLoad];
+            if (Array.isArray(action.docs)) {
+                action.docs.forEach((doc) => {
+                    unreturnedIDs.splice(unreturnedIDs.indexOf(doc.id), 1);
+                    newState[action.relationTo][doc.id] = doc;
+                });
+            }
+            unreturnedIDs.forEach((id) => {
+                newState[action.relationTo][id] = false;
+            });
+            return newState;
+        }
+        default: {
+            return state;
+        }
+    }
+}

package/dist/admin/components/views/collections/List/buildColumns.d.ts

@@ -0,0 +1,4 @@
+import { SanitizedCollectionConfig } from '../../../../../collections/config/types';
+import { Column } from '../../../elements/Table/types';
+declare const buildColumns: (collection: SanitizedCollectionConfig, columns: string[]) => Column[];
+export default buildColumns;

package/dist/admin/components/views/collections/List/buildColumns.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import Cell from './Cell';
+import SortColumn from '../../../elements/SortColumn';
+import { fieldIsPresentationalOnly } from '../../../../../fields/config/types';
+import flattenFields from '../../../../utilities/flattenTopLevelFields';
+const buildColumns = (collection, columns) => {
+    const flattenedFields = flattenFields([
+        ...collection.fields,
+        {
+            name: 'id',
+            type: 'text',
+            label: 'ID',
+        },
+        {
+            name: 'updatedAt',
+            type: 'date',
+            label: 'Updated At',
+        },
+        {
+            name: 'createdAt',
+            type: 'date',
+            label: 'Created At',
+        },
+    ], true);
+    return (columns || []).reduce((cols, col, colIndex) => {
+        let field = null;
+        flattenedFields.forEach((fieldToCheck) => {
+            if (fieldToCheck.name === col) {
+                field = fieldToCheck;
+            }
+        });
+        if (field) {
+            return [
+                ...cols,
+                {
+                    accessor: field.name,
+                    components: {
+                        Heading: (React.createElement(SortColumn, { label: field.label || field.name, name: field.name, disable: (field.disableSort || fieldIsPresentationalOnly(field)) || undefined })),
+                        renderCell: (rowData, cellData) => (React.createElement(Cell, { key: JSON.stringify(cellData), field: field, colIndex: colIndex, collection: collection, rowData: rowData, cellData: cellData })),
+                    },
+                },
+            ];
+        }
+        return cols;
+    }, []);
+};
+export default buildColumns;

package/dist/admin/components/views/collections/List/formatFields.d.ts

@@ -0,0 +1,4 @@
+import { SanitizedCollectionConfig } from '../../../../../collections/config/types';
+import { Field } from '../../../../../fields/config/types';
+declare const formatFields: (config: SanitizedCollectionConfig) => Field[];
+export default formatFields;

package/dist/admin/components/views/collections/List/formatFields.js

@@ -0,0 +1,38 @@
+import { fieldAffectsData, fieldIsPresentationalOnly } from '../../../../../fields/config/types';
+const formatFields = (config) => {
+    const hasID = config.fields.findIndex((field) => fieldAffectsData(field) && field.name === 'id') > -1;
+    let fields = config.fields.reduce((formatted, field) => {
+        var _a;
+        if (!fieldIsPresentationalOnly(field) && (field.hidden === true || ((_a = field === null || field === void 0 ? void 0 : field.admin) === null || _a === void 0 ? void 0 : _a.disabled) === true)) {
+            return formatted;
+        }
+        return [
+            ...formatted,
+            field,
+        ];
+    }, hasID ? [] : [{ name: 'id', label: 'ID', type: 'text' }]);
+    if (config.timestamps) {
+        fields = fields.concat([
+            {
+                name: 'createdAt',
+                label: 'Created At',
+                type: 'date',
+            }, {
+                name: 'updatedAt',
+                label: 'Updated At',
+                type: 'date',
+            },
+        ]);
+    }
+    if (config.upload) {
+        fields = fields.concat([
+            {
+                name: 'filename',
+                label: 'Filename',
+                type: 'text',
+            },
+        ]);
+    }
+    return fields;
+};
+export default formatFields;

package/dist/admin/components/views/collections/List/getInitialColumns.d.ts

@@ -0,0 +1,3 @@
+import { Field } from '../../../../../fields/config/types';
+declare const getInitialColumnState: (fields: Field[], useAsTitle: string, defaultColumns: string[]) => string[];
+export default getInitialColumnState;

package/dist/admin/components/views/collections/List/getInitialColumns.js

@@ -0,0 +1,39 @@
+import { fieldHasSubFields, fieldAffectsData } from '../../../../../fields/config/types';
+const getRemainingColumns = (fields, useAsTitle) => fields.reduce((remaining, field) => {
+    if (fieldAffectsData(field) && field.name === useAsTitle) {
+        return remaining;
+    }
+    if (!fieldAffectsData(field) && fieldHasSubFields(field)) {
+        return [
+            ...remaining,
+            ...getRemainingColumns(field.fields, useAsTitle),
+        ];
+    }
+    if (field.type === 'tabs') {
+        return [
+            ...remaining,
+            ...field.tabs.reduce((tabFieldColumns, tab) => [
+                ...tabFieldColumns,
+                ...getRemainingColumns(tab.fields, useAsTitle),
+            ], []),
+        ];
+    }
+    return [
+        ...remaining,
+        field.name,
+    ];
+}, []);
+const getInitialColumnState = (fields, useAsTitle, defaultColumns) => {
+    let initialColumns = [];
+    if (Array.isArray(defaultColumns) && defaultColumns.length >= 1) {
+        return defaultColumns;
+    }
+    if (useAsTitle) {
+        initialColumns.push(useAsTitle);
+    }
+    const remainingColumns = getRemainingColumns(fields, useAsTitle);
+    initialColumns = initialColumns.concat(remainingColumns);
+    initialColumns = initialColumns.slice(0, 4);
+    return initialColumns;
+};
+export default getInitialColumnState;

package/dist/admin/components/views/collections/List/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ListIndexProps } from './types';
+declare const ListView: React.FC<ListIndexProps>;
+export default ListView;

package/dist/admin/components/views/collections/List/index.js

@@ -0,0 +1,117 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+import queryString from 'qs';
+import { useConfig } from '../../../utilities/Config';
+import { useAuth } from '../../../utilities/Auth';
+import usePayloadAPI from '../../../../hooks/usePayloadAPI';
+import DefaultList from './Default';
+import RenderCustomComponent from '../../../utilities/RenderCustomComponent';
+import { useStepNav } from '../../../elements/StepNav';
+import formatFields from './formatFields';
+import buildColumns from './buildColumns';
+import { usePreferences } from '../../../utilities/Preferences';
+import { useSearchParams } from '../../../utilities/SearchParams';
+import getInitialColumns from './getInitialColumns';
+const ListView = (props) => {
+    var _a, _b;
+    const { collection, collection: { slug, labels: { plural, }, admin: { useAsTitle, defaultColumns, pagination: { defaultLimit, }, components: { views: { List: CustomList, } = {}, } = {}, }, }, } = props;
+    const { serverURL, routes: { api, admin } } = useConfig();
+    const preferenceKey = `${collection.slug}-list`;
+    const { permissions } = useAuth();
+    const { setStepNav } = useStepNav();
+    const { getPreference, setPreference } = usePreferences();
+    const { page, sort, limit, where } = useSearchParams();
+    const history = useHistory();
+    const [fetchURL, setFetchURL] = useState('');
+    const [fields] = useState(() => formatFields(collection));
+    const [tableColumns, setTableColumns] = useState(() => {
+        const initialColumns = getInitialColumns(fields, useAsTitle, defaultColumns);
+        return buildColumns(collection, initialColumns);
+    });
+    const collectionPermissions = (_a = permissions === null || permissions === void 0 ? void 0 : permissions.collections) === null || _a === void 0 ? void 0 : _a[slug];
+    const hasCreatePermission = (_b = collectionPermissions === null || collectionPermissions === void 0 ? void 0 : collectionPermissions.create) === null || _b === void 0 ? void 0 : _b.permission;
+    const newDocumentURL = `${admin}/collections/${slug}/create`;
+    const [{ data }, { setParams: setFetchParams }] = usePayloadAPI(fetchURL);
+    const activeColumnNames = tableColumns.map(({ accessor }) => accessor);
+    const stringifiedActiveColumns = JSON.stringify(activeColumnNames);
+    useEffect(() => {
+        setStepNav([
+            {
+                label: plural,
+            },
+        ]);
+    }, [setStepNav, plural]);
+    // /////////////////////////////////////
+    // Set up Payload REST API query params
+    // /////////////////////////////////////
+    useEffect(() => {
+        const params = {
+            depth: 0,
+            draft: 'true',
+            page: undefined,
+            sort: undefined,
+            where: undefined,
+            limit,
+        };
+        if (page)
+            params.page = page;
+        if (sort)
+            params.sort = sort;
+        if (where)
+            params.where = where;
+        // Performance enhancement
+        // Setting the Fetch URL this way
+        // prevents a double-fetch
+        setFetchURL(`${serverURL}${api}/${slug}`);
+        setFetchParams(params);
+    }, [setFetchParams, page, sort, where, collection, getPreference, limit, serverURL, api, slug]);
+    // /////////////////////////////////////
+    // Fetch preferences on first load
+    // /////////////////////////////////////
+    useEffect(() => {
+        (async () => {
+            const currentPreferences = await getPreference(preferenceKey);
+            if (currentPreferences === null || currentPreferences === void 0 ? void 0 : currentPreferences.columns) {
+                setTableColumns(buildColumns(collection, currentPreferences === null || currentPreferences === void 0 ? void 0 : currentPreferences.columns));
+            }
+            const params = queryString.parse(history.location.search, { ignoreQueryPrefix: true, depth: 0 });
+            const search = {
+                ...params,
+                sort: (params === null || params === void 0 ? void 0 : params.sort) || (currentPreferences === null || currentPreferences === void 0 ? void 0 : currentPreferences.sort),
+                limit: (params === null || params === void 0 ? void 0 : params.limit) || (currentPreferences === null || currentPreferences === void 0 ? void 0 : currentPreferences.limit),
+            };
+            const newSearchQuery = queryString.stringify(search, { addQueryPrefix: true });
+            if (newSearchQuery.length > 1) {
+                history.replace({
+                    search: newSearchQuery,
+                });
+            }
+        })();
+    }, [collection, getPreference, preferenceKey, history]);
+    // /////////////////////////////////////
+    // When any preference-enabled values are updated,
+    // Set preferences
+    // /////////////////////////////////////
+    useEffect(() => {
+        const newPreferences = {
+            limit,
+            sort,
+            columns: JSON.parse(stringifiedActiveColumns),
+        };
+        setPreference(preferenceKey, newPreferences);
+    }, [sort, limit, stringifiedActiveColumns, preferenceKey, setPreference]);
+    const setActiveColumns = useCallback((columns) => {
+        setTableColumns(buildColumns(collection, columns));
+    }, [collection]);
+    return (React.createElement(RenderCustomComponent, { DefaultComponent: DefaultList, CustomComponent: CustomList, componentProps: {
+            collection: { ...collection, fields },
+            newDocumentURL,
+            hasCreatePermission,
+            data,
+            tableColumns,
+            columnNames: activeColumnNames,
+            setColumns: setActiveColumns,
+            limit: limit || defaultLimit,
+        } }));
+};
+export default ListView;

package/dist/admin/components/views/collections/List/index.scss

@@ -0,0 +1,87 @@
+@import '../../../../scss/styles';
+
+.collection-list {
+  width: 100%;
+  margin-bottom: base(2);
+
+  &__wrap {
+    padding-top: $baseline;
+    padding-bottom: $baseline;
+  }
+
+  &__header {
+    margin-bottom: $baseline;
+    display: flex;
+    align-items: flex-end;
+    flex-wrap: wrap;
+
+    h1 {
+      margin: 0 base(.75) 0 0;
+    }
+
+    a {
+      text-decoration: none;
+    }
+
+    .pill {
+      margin: base(.5) 0 base(.25);
+    }
+  }
+
+  &__sub-header {
+    flex-basis: 100%;
+    margin-top: base(.25);
+  }
+
+  .table {
+    table {
+      width: 100%;
+      overflow: auto;
+    }
+  }
+
+  &__page-controls {
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .paginator {
+    margin-bottom: 0;
+  }
+
+  &__page-info {
+    margin-right: base(1);
+    margin-left: auto;
+  }
+
+  @include mid-break {
+    &__wrap {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    &__header {
+      .pill {
+        margin-bottom: base(.0625);
+      }
+    }
+
+    &__search-input {
+      margin: 0;
+    }
+
+    &__page-controls {
+      flex-wrap: wrap;
+    }
+
+    &__page-info {
+      margin-left: 0;
+    }
+
+    .paginator {
+      width: 100%;
+      margin-bottom: $baseline;
+    }
+  }
+}