payload 1.0.35 → 1.1.1

package/dist/admin/components/elements/Nav/index.js

@@ -1,74 +1,93 @@
-import React, { useState, useEffect } from 'react';
-import { NavLink, Link, useHistory } from 'react-router-dom';
-import { useConfig } from '../../utilities/Config';
-import { useAuth } from '../../utilities/Auth';
-import RenderCustomComponent from '../../utilities/RenderCustomComponent';
-import Chevron from '../../icons/Chevron';
-import LogOut from '../../icons/LogOut';
-import Menu from '../../icons/Menu';
-import CloseMenu from '../../icons/CloseMenu';
-import Icon from '../../graphics/Icon';
-import Account from '../../graphics/Account';
-import Localizer from '../Localizer';
-import './index.scss';
-const baseClass = 'nav';
-const DefaultNav = () => {
-    const { permissions } = useAuth();
-    const [menuActive, setMenuActive] = useState(false);
-    const history = useHistory();
-    const { collections, globals, routes: { admin, }, admin: { components: { beforeNavLinks, afterNavLinks, }, }, } = useConfig();
-    const classes = [
-        baseClass,
-        menuActive && `${baseClass}--menu-active`,
-    ].filter(Boolean).join(' ');
-    useEffect(() => history.listen(() => {
-        setMenuActive(false);
-    }), [history]);
-    return (React.createElement("aside", { className: classes },
-        React.createElement("div", { className: `${baseClass}__scroll` },
-            React.createElement("header", null,
-                React.createElement(Link, { to: admin, className: `${baseClass}__brand` },
-                    React.createElement(Icon, null)),
-                React.createElement("button", { type: "button", className: `${baseClass}__mobile-menu-btn`, onClick: () => setMenuActive(!menuActive) },
-                    menuActive && (React.createElement(CloseMenu, null)),
-                    !menuActive && (React.createElement(Menu, null)))),
-            React.createElement("div", { className: `${baseClass}__wrap` },
-                Array.isArray(beforeNavLinks) && beforeNavLinks.map((Component, i) => React.createElement(Component, { key: i })),
-                React.createElement("span", { className: `${baseClass}__label` }, "Collections"),
-                React.createElement("nav", null, collections && collections.map((collection, i) => {
-                    var _a, _b;
-                    const href = `${admin}/collections/${collection.slug}`;
-                    if ((_b = (_a = permissions === null || permissions === void 0 ? void 0 : permissions.collections) === null || _a === void 0 ? void 0 : _a[collection.slug]) === null || _b === void 0 ? void 0 : _b.read.permission) {
-                        return (React.createElement(NavLink, { id: `nav-${collection.slug}`, activeClassName: "active", key: i, to: href },
-                            React.createElement(Chevron, null),
-                            collection.labels.plural));
-                    }
-                    return null;
-                })),
-                (globals && globals.length > 0) && (React.createElement(React.Fragment, null,
-                    React.createElement("span", { className: `${baseClass}__label` }, "Globals"),
-                    React.createElement("nav", null, globals.map((global, i) => {
-                        var _a;
-                        const href = `${admin}/globals/${global.slug}`;
-                        if ((_a = permissions === null || permissions === void 0 ? void 0 : permissions.globals) === null || _a === void 0 ? void 0 : _a[global.slug].read.permission) {
-                            return (React.createElement(NavLink, { id: `nav-global-${global.slug}`, activeClassName: "active", key: i, to: href },
-                                React.createElement(Chevron, null),
-                                global.label));
-                        }
-                        return null;
-                    })))),
-                Array.isArray(afterNavLinks) && afterNavLinks.map((Component, i) => React.createElement(Component, { key: i })),
-                React.createElement("div", { className: `${baseClass}__controls` },
-                    React.createElement(Localizer, null),
-                    React.createElement(Link, { to: `${admin}/account`, className: `${baseClass}__account` },
-                        React.createElement(Account, null)),
-                    React.createElement(Link, { to: `${admin}/logout`, className: `${baseClass}__log-out` },
-                        React.createElement(LogOut, null)))))));
-};
-const Nav = () => {
-    const { admin: { components: { Nav: CustomNav, } = {
-        Nav: undefined,
-    }, } = {}, } = useConfig();
-    return (React.createElement(RenderCustomComponent, { CustomComponent: CustomNav, DefaultComponent: DefaultNav }));
-};
-export default Nav;
+import React, { useState, useEffect } from 'react';
+import { NavLink, Link, useHistory } from 'react-router-dom';
+import { useConfig } from '../../utilities/Config';
+import { useAuth } from '../../utilities/Auth';
+import RenderCustomComponent from '../../utilities/RenderCustomComponent';
+import Chevron from '../../icons/Chevron';
+import LogOut from '../../icons/LogOut';
+import Menu from '../../icons/Menu';
+import CloseMenu from '../../icons/CloseMenu';
+import Icon from '../../graphics/Icon';
+import Account from '../../graphics/Account';
+import Localizer from '../Localizer';
+import NavGroup from '../NavGroup';
+import { groupNavItems, EntityType } from '../../../utilities/groupNavItems';
+import './index.scss';
+const baseClass = 'nav';
+const DefaultNav = () => {
+    const { permissions } = useAuth();
+    const [menuActive, setMenuActive] = useState(false);
+    const [groups, setGroups] = useState([]);
+    const history = useHistory();
+    const { collections, globals, routes: { admin, }, admin: { components: { beforeNavLinks, afterNavLinks, }, }, } = useConfig();
+    const classes = [
+        baseClass,
+        menuActive && `${baseClass}--menu-active`,
+    ].filter(Boolean)
+        .join(' ');
+    useEffect(() => {
+        setGroups(groupNavItems([
+            ...collections.map((collection) => {
+                const entityToGroup = {
+                    type: EntityType.collection,
+                    entity: collection,
+                };
+                return entityToGroup;
+            }),
+            ...globals.map((global) => {
+                const entityToGroup = {
+                    type: EntityType.global,
+                    entity: global,
+                };
+                return entityToGroup;
+            }),
+        ], permissions));
+    }, [collections, globals, permissions]);
+    useEffect(() => history.listen(() => {
+        setMenuActive(false);
+    }), [history]);
+    return (React.createElement("aside", { className: classes },
+        React.createElement("div", { className: `${baseClass}__scroll` },
+            React.createElement("header", null,
+                React.createElement(Link, { to: admin, className: `${baseClass}__brand` },
+                    React.createElement(Icon, null)),
+                React.createElement("button", { type: "button", className: `${baseClass}__mobile-menu-btn`, onClick: () => setMenuActive(!menuActive) },
+                    menuActive && (React.createElement(CloseMenu, null)),
+                    !menuActive && (React.createElement(Menu, null)))),
+            React.createElement("nav", { className: `${baseClass}__wrap` },
+                Array.isArray(beforeNavLinks) && beforeNavLinks.map((Component, i) => React.createElement(Component, { key: i })),
+                groups.map(({ label, entities }, key) => {
+                    return (React.createElement(NavGroup, { ...{ key, label } }, entities.map(({ entity, type }, i) => {
+                        let entityLabel;
+                        let href;
+                        let id;
+                        if (type === EntityType.collection) {
+                            href = `${admin}/collections/${entity.slug}`;
+                            entityLabel = entity.labels.plural;
+                            id = `nav-${entity.slug}`;
+                        }
+                        if (type === EntityType.global) {
+                            href = `${admin}/globals/${entity.slug}`;
+                            entityLabel = entity.label;
+                            id = `nav-global-${entity.slug}`;
+                        }
+                        return (React.createElement(NavLink, { id: id, className: `${baseClass}__link`, activeClassName: "active", key: i, to: href },
+                            React.createElement(Chevron, null),
+                            entityLabel));
+                    })));
+                }),
+                Array.isArray(afterNavLinks) && afterNavLinks.map((Component, i) => React.createElement(Component, { key: i })),
+                React.createElement("div", { className: `${baseClass}__controls` },
+                    React.createElement(Localizer, null),
+                    React.createElement(Link, { to: `${admin}/account`, className: `${baseClass}__account` },
+                        React.createElement(Account, null)),
+                    React.createElement(Link, { to: `${admin}/logout`, className: `${baseClass}__log-out` },
+                        React.createElement(LogOut, null)))))));
+};
+const Nav = () => {
+    const { admin: { components: { Nav: CustomNav, } = {
+        Nav: undefined,
+    }, } = {}, } = useConfig();
+    return (React.createElement(RenderCustomComponent, { CustomComponent: CustomNav, DefaultComponent: DefaultNav }));
+};
+export default Nav;

package/dist/admin/components/elements/Nav/index.scss

@@ -81,32 +81,16 @@
     }
   }
 
-  a {
-    padding: base(.125) 0;
-    display: flex;
-    text-decoration: none;
-
-    &:focus {
-      box-shadow: none;
-      font-weight: 600;
-    }
-
-    &:active {
-      font-weight: normal;
-    }
-  }
-
   nav {
-    margin: base(.25) 0 $baseline;
-
     a {
       position: relative;
+      padding: base(.125) base(1.5) base(.125) 0;
+      display: flex;
+      text-decoration: none;
 
-      svg {
-        opacity: 0;
-        position: absolute;
-        left: - base(.5);
-        transform: rotate(-90deg);
+      &:focus {
+        box-shadow: none;
+        font-weight: 600;
       }
 
       &:hover {
@@ -114,12 +98,24 @@
       }
 
       &.active {
+        font-weight: normal;
         padding-left: base(.6);
         font-weight: 600;
+      }
+    }
+  }
 
-        svg {
-          opacity: 1;
-        }
+  &__link {
+    svg {
+      opacity: 0;
+      position: absolute;
+      left: - base(.5);
+      transform: rotate(-90deg);
+    }
+
+    &.active {
+      svg {
+        opacity: 1;
       }
     }
   }
@@ -184,4 +180,4 @@
       font-weight: 600;
     }
   }
-}
+}

package/dist/admin/components/elements/NavGroup/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './index.scss';
+declare type Props = {
+    children: React.ReactNode;
+    label: string;
+};
+declare const NavGroup: React.FC<Props>;
+export default NavGroup;

package/dist/admin/components/elements/NavGroup/index.js

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react';
+import AnimateHeight from 'react-animate-height';
+import Chevron from '../../icons/Chevron';
+import { usePreferences } from '../../utilities/Preferences';
+import './index.scss';
+const baseClass = 'nav-group';
+const NavGroup = ({ children, label, }) => {
+    const [collapsed, setCollapsed] = useState(true);
+    const [animate, setAnimate] = useState(false);
+    const { getPreference, setPreference } = usePreferences();
+    const preferencesKey = `collapsed-${label}-groups`;
+    useEffect(() => {
+        if (label) {
+            const setCollapsedFromPreferences = async () => {
+                const preferences = await getPreference(preferencesKey) || [];
+                setCollapsed(preferences.indexOf(label) !== -1);
+            };
+            setCollapsedFromPreferences();
+        }
+    }, [getPreference, label, preferencesKey]);
+    if (label) {
+        const toggleCollapsed = async () => {
+            setAnimate(true);
+            let preferences = await getPreference(preferencesKey) || [];
+            if (collapsed) {
+                preferences = preferences.filter((preference) => label !== preference);
+            }
+            else {
+                preferences.push(label);
+            }
+            setPreference(preferencesKey, preferences);
+            setCollapsed(!collapsed);
+        };
+        return (React.createElement("div", { id: `nav-group-${label}`, className: [
+                `${baseClass}`,
+                `${label}`,
+                collapsed && `${baseClass}--collapsed`,
+            ].filter(Boolean)
+                .join(' ') },
+            React.createElement("button", { type: "button", className: [
+                    `${baseClass}__toggle`,
+                    `${baseClass}__toggle--${collapsed ? 'collapsed' : 'open'}`,
+                ].filter(Boolean)
+                    .join(' '), onClick: toggleCollapsed },
+                React.createElement("div", { className: `${baseClass}__label` }, label),
+                React.createElement(Chevron, { className: `${baseClass}__indicator` })),
+            React.createElement(AnimateHeight, { height: collapsed ? 0 : 'auto', duration: animate ? 200 : 0 },
+                React.createElement("div", { className: `${baseClass}__content` }, children))));
+    }
+    return (React.createElement(React.Fragment, null, children));
+};
+export default NavGroup;

package/dist/admin/components/elements/NavGroup/index.scss

@@ -0,0 +1,53 @@
+@import '../../../scss/styles.scss';
+
+.nav-group {
+  width: 100%;
+  margin-bottom: base(.5);
+
+  &__toggle {
+    cursor: pointer;
+    color: var(--theme-elevation-400);
+    background: transparent;
+    padding-left: 0;
+    border: 0;
+    margin-top: base(.25);
+    width: 100%;
+    text-align: left;
+    display: flex;
+    align-items: flex-start;
+    padding-right: base(.5);
+
+    svg {
+      flex-shrink: 0;
+      margin-top: base(-.2);
+    }
+
+    &:hover {
+      color: var(--theme-elevation-1000);
+
+      .stroke {
+        stroke: var(--theme-elevation-1000);
+      }
+    }
+  }
+
+  &__indicator {
+    margin-left: auto;
+
+    .stroke {
+      stroke: var(--theme-elevation-200);
+    }
+  }
+
+  &--collapsed {
+    .collapsible__toggle {
+      border-bottom-right-radius: $style-radius-s;
+      border-bottom-left-radius: $style-radius-s;
+    }
+
+    .nav-group__indicator {
+      transform: rotate(.5turn);
+    }
+  }
+
+}

package/dist/admin/components/elements/Paginator/ClickableArrow/index.d.ts

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

package/dist/admin/components/elements/Paginator/ClickableArrow/index.js

@@ -1,15 +1,15 @@
-import React from 'react';
-import Chevron from '../../../icons/Chevron';
-import './index.scss';
-const baseClass = 'clickable-arrow';
-const ClickableArrow = (props) => {
-    const { updatePage, isDisabled = false, direction = 'right', } = props;
-    const classes = [
-        baseClass,
-        isDisabled && `${baseClass}--is-disabled`,
-        direction && `${baseClass}--${direction}`,
-    ].filter(Boolean).join(' ');
-    return (React.createElement("button", { className: classes, onClick: !isDisabled ? updatePage : undefined, type: "button" },
-        React.createElement(Chevron, null)));
-};
-export default ClickableArrow;
+import React from 'react';
+import Chevron from '../../../icons/Chevron';
+import './index.scss';
+const baseClass = 'clickable-arrow';
+const ClickableArrow = (props) => {
+    const { updatePage, isDisabled = false, direction = 'right', } = props;
+    const classes = [
+        baseClass,
+        isDisabled && `${baseClass}--is-disabled`,
+        direction && `${baseClass}--${direction}`,
+    ].filter(Boolean).join(' ');
+    return (React.createElement("button", { className: classes, onClick: !isDisabled ? updatePage : undefined, type: "button" },
+        React.createElement(Chevron, null)));
+};
+export default ClickableArrow;

package/dist/admin/components/elements/Paginator/ClickableArrow/types.d.ts

@@ -1,5 +1,5 @@
-export declare type Props = {
-    updatePage?: () => void;
-    isDisabled?: boolean;
-    direction?: 'right' | 'left';
-};
+export declare type Props = {
+    updatePage?: () => void;
+    isDisabled?: boolean;
+    direction?: 'right' | 'left';
+};

package/dist/admin/components/elements/Paginator/ClickableArrow/types.js

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

package/dist/admin/components/elements/Paginator/Page/index.d.ts

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

package/dist/admin/components/elements/Paginator/Page/index.js

@@ -1,12 +1,12 @@
-import React from 'react';
-const baseClass = 'paginator__page';
-const Page = ({ page = 1, isCurrent, updatePage, isFirstPage = false, isLastPage = false, }) => {
-    const classes = [
-        baseClass,
-        isCurrent && `${baseClass}--is-current`,
-        isFirstPage && `${baseClass}--is-first-page`,
-        isLastPage && `${baseClass}--is-last-page`,
-    ].filter(Boolean).join(' ');
-    return (React.createElement("button", { className: classes, onClick: () => updatePage(page), type: "button" }, page));
-};
-export default Page;
+import React from 'react';
+const baseClass = 'paginator__page';
+const Page = ({ page = 1, isCurrent, updatePage, isFirstPage = false, isLastPage = false, }) => {
+    const classes = [
+        baseClass,
+        isCurrent && `${baseClass}--is-current`,
+        isFirstPage && `${baseClass}--is-first-page`,
+        isLastPage && `${baseClass}--is-last-page`,
+    ].filter(Boolean).join(' ');
+    return (React.createElement("button", { className: classes, onClick: () => updatePage(page), type: "button" }, page));
+};
+export default Page;

package/dist/admin/components/elements/Paginator/Page/types.d.ts

@@ -1,7 +1,7 @@
-export declare type Props = {
-    page?: number;
-    isCurrent?: boolean;
-    updatePage?: (page: any) => void;
-    isFirstPage?: boolean;
-    isLastPage?: boolean;
-};
+export declare type Props = {
+    page?: number;
+    isCurrent?: boolean;
+    updatePage?: (page: any) => void;
+    isFirstPage?: boolean;
+    isLastPage?: boolean;
+};

package/dist/admin/components/elements/Paginator/Page/types.js

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

package/dist/admin/components/elements/Paginator/Separator/index.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-declare const Separator: React.FC;
-export default Separator;
+import React from 'react';
+declare const Separator: React.FC;
+export default Separator;

package/dist/admin/components/elements/Paginator/Separator/index.js

@@ -1,3 +1,3 @@
-import React from 'react';
-const Separator = () => React.createElement("span", { className: "paginator__separator" }, "\u2014");
-export default Separator;
+import React from 'react';
+const Separator = () => React.createElement("span", { className: "paginator__separator" }, "\u2014");
+export default Separator;

package/dist/admin/components/elements/Paginator/index.d.ts

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