@primer/components 31.2.0-rc.c53cfd9e → 31.2.0

package/lib/Pagination/index.js

@@ -1,13 +1,7 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _Pagination = _interopRequireDefault(require("./Pagination"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _default = _Pagination.default;
-exports.default = _default;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Pagination_1 = __importDefault(require("./Pagination"));
+exports.default = Pagination_1.default;

package/lib/Pagination/model.jsx

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildComponentData = exports.buildPaginationModel = void 0;
+function buildPaginationModel(pageCount, currentPage, showPages, marginPageCount, surroundingPageCount) {
+    const pages = [];
+    if (showPages) {
+        const pageNums = [];
+        const addPage = (n) => {
+            if (n >= 1 && n <= pageCount) {
+                pageNums.push(n);
+            }
+        };
+        // Start by defining the window of pages to show around the current page.
+        // If the window goes off either edge, shift it until it fits.
+        let extentLeft = currentPage - surroundingPageCount;
+        let extentRight = currentPage + surroundingPageCount;
+        if (extentLeft < 1 && extentRight > pageCount) {
+            // Our window is larger than the entire range,
+            // so simply display every page.
+            extentLeft = 1;
+            extentRight = pageCount;
+        }
+        else if (extentLeft < 1) {
+            while (extentLeft < 1) {
+                extentLeft++;
+                extentRight++;
+            }
+        }
+        else if (extentRight > pageCount) {
+            while (extentRight > pageCount) {
+                extentLeft--;
+                extentRight--;
+            }
+        }
+        // Next, include the pages in the margins.
+        // If a margin page is already covered in the window,
+        // extend the window to the other direction.
+        for (let i = 1; i <= marginPageCount; i++) {
+            const leftPage = i;
+            const rightPage = pageCount - (i - 1);
+            if (leftPage >= extentLeft) {
+                extentRight++;
+            }
+            else {
+                addPage(leftPage);
+            }
+            if (rightPage <= extentRight) {
+                extentLeft--;
+            }
+            else {
+                addPage(rightPage);
+            }
+        }
+        for (let i = extentLeft; i <= extentRight; i++) {
+            addPage(i);
+        }
+        const sorted = pageNums
+            .slice()
+            .sort((a, b) => a - b)
+            .filter((item, idx, ary) => !idx || item !== ary[idx - 1]);
+        for (let idx = 0; idx < sorted.length; idx++) {
+            const num = sorted[idx];
+            const selected = num === currentPage;
+            if (idx === 0) {
+                if (num !== 1) {
+                    // If the first page isn't page one,
+                    // we need to add a break
+                    pages.push({
+                        type: 'BREAK',
+                        num: 1
+                    });
+                }
+                pages.push({
+                    type: 'NUM',
+                    num,
+                    selected
+                });
+            }
+            else {
+                const last = sorted[idx - 1];
+                const delta = num - last;
+                if (delta === 1) {
+                    pages.push({
+                        type: 'NUM',
+                        num,
+                        selected
+                    });
+                }
+                else {
+                    // We skipped some, so add a break
+                    pages.push({
+                        type: 'BREAK',
+                        num: num - 1
+                    });
+                    pages.push({
+                        type: 'NUM',
+                        num,
+                        selected
+                    });
+                }
+            }
+        }
+        const lastPage = pages[pages.length - 1];
+        if (lastPage.type === 'NUM' && lastPage.num !== pageCount) {
+            // The last page we rendered wasn't the actual last page,
+            // so we need an additional break
+            pages.push({
+                type: 'BREAK',
+                num: pageCount
+            });
+        }
+    }
+    const prev = { type: 'PREV', num: currentPage - 1, disabled: currentPage === 1 };
+    const next = { type: 'NEXT', num: currentPage + 1, disabled: currentPage === pageCount };
+    return [prev, ...pages, next];
+}
+exports.buildPaginationModel = buildPaginationModel;
+function buildComponentData(page, hrefBuilder, onClick) {
+    const props = {};
+    let content = '';
+    let key = '';
+    switch (page.type) {
+        case 'PREV': {
+            key = 'page-prev';
+            content = 'Previous';
+            if (page.disabled) {
+                Object.assign(props, { as: 'span', 'aria-disabled': 'true' });
+            }
+            else {
+                Object.assign(props, {
+                    rel: 'prev',
+                    href: hrefBuilder(page.num),
+                    'aria-label': 'Previous Page',
+                    onClick
+                });
+            }
+            break;
+        }
+        case 'NEXT': {
+            key = 'page-next';
+            content = 'Next';
+            if (page.disabled) {
+                Object.assign(props, { as: 'span', 'aria-disabled': 'true' });
+            }
+            else {
+                Object.assign(props, {
+                    rel: 'next',
+                    href: hrefBuilder(page.num),
+                    'aria-label': 'Next Page',
+                    onClick
+                });
+            }
+            break;
+        }
+        case 'NUM': {
+            key = `page-${page.num}`;
+            content = String(page.num);
+            if (page.selected) {
+                Object.assign(props, { as: 'em', 'aria-current': 'page' });
+            }
+            else {
+                Object.assign(props, { href: hrefBuilder(page.num), 'aria-label': `Page ${page.num}`, onClick });
+            }
+            break;
+        }
+        case 'BREAK': {
+            key = `page-${page.num}-break`;
+            content = '…';
+            Object.assign(props, { as: 'span', 'aria-disabled': true });
+        }
+    }
+    return { props, key, content };
+}
+exports.buildComponentData = buildComponentData;

package/lib/PointerBox.jsx

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const BorderBox_1 = __importDefault(require("./BorderBox"));
+const Caret_1 = __importDefault(require("./Caret"));
+function PointerBox(props) {
+    // don't destructure these, just grab them
+    const { bg, border, borderColor, theme } = props;
+    const { caret, children, ...boxProps } = props;
+    const caretProps = {
+        bg,
+        borderColor,
+        borderWidth: border,
+        location: caret,
+        theme
+    };
+    return (<BorderBox_1.default sx={{ position: 'relative' }} {...boxProps}>
+      {children}
+      <Caret_1.default {...caretProps}/>
+    </BorderBox_1.default>);
+}
+exports.default = PointerBox;

package/{src/Popover.tsx → lib/Popover.jsx}

@@ -1,60 +1,39 @@
-import classnames from 'classnames'
-import styled from 'styled-components'
-import Box from './Box'
-import {COMMON, get, LAYOUT, POSITION, SystemCommonProps, SystemLayoutProps, SystemPositionProps} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-
-type CaretPosition =
-  | 'top'
-  | 'bottom'
-  | 'left'
-  | 'right'
-  | 'bottom-left'
-  | 'bottom-right'
-  | 'top-left'
-  | 'top-right'
-  | 'left-bottom'
-  | 'left-top'
-  | 'right-bottom'
-  | 'right-top'
-
-type StyledPopoverProps = {
-  caret?: CaretPosition
-  relative?: boolean
-  open?: boolean
-} & SystemCommonProps &
-  SystemLayoutProps &
-  SystemPositionProps &
-  SxProp
-
-const Popover = styled.div.attrs<StyledPopoverProps>(({className, caret}) => {
-  return {
-    className: classnames(className, `caret-pos--${caret}`)
-  }
-})<StyledPopoverProps>`
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const classnames_1 = __importDefault(require("classnames"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Box_1 = __importDefault(require("./Box"));
+const constants_1 = require("./constants");
+const sx_1 = __importDefault(require("./sx"));
+const Popover = styled_components_1.default.div.attrs(({ className, caret }) => {
+    return {
+        className: classnames_1.default(className, `caret-pos--${caret}`)
+    };
+}) `
   position: ${props => (props.relative ? 'relative' : 'absolute')};
   z-index: 100;
   display: ${props => (props.open ? 'block' : 'none')};
 
-  ${COMMON};
-  ${LAYOUT};
-  ${POSITION};
-  ${sx};
-`
-
-const PopoverContent = styled(Box)`
-  border: 1px solid ${get('colors.border.default')};
-  border-radius: ${get('radii.2')};
+  ${constants_1.COMMON};
+  ${constants_1.LAYOUT};
+  ${constants_1.POSITION};
+  ${sx_1.default};
+`;
+const PopoverContent = styled_components_1.default(Box_1.default) `
+  border: 1px solid ${constants_1.get('colors.border.default')};
+  border-radius: ${constants_1.get('radii.2')};
   position: relative;
   width: 232px;
   margin-right: auto;
   margin-left: auto;
-  padding: ${get('space.4')};
-  background-color: ${get('colors.canvas.overlay')};
+  padding: ${constants_1.get('space.4')};
+  background-color: ${constants_1.get('colors.canvas.overlay')};
 
-  ${COMMON};
-  ${LAYOUT};
+  ${constants_1.COMMON};
+  ${constants_1.LAYOUT};
 
   // Carets
   &::before,
@@ -66,17 +45,17 @@ const PopoverContent = styled(Box)`
   }
 
   &::before {
-    top: -${get('space.3')};
+    top: -${constants_1.get('space.3')};
     margin-left: -9px;
-    border: ${get('space.2')} solid transparent; // TODO: solid?
-    border-bottom-color: ${get('colors.border.default')};
+    border: ${constants_1.get('space.2')} solid transparent; // TODO: solid?
+    border-bottom-color: ${constants_1.get('colors.border.default')};
   }
 
   &::after {
     top: -14px;
-    margin-left: -${get('space.2')};
+    margin-left: -${constants_1.get('space.2')};
     border: 7px solid transparent; // todo: solid
-    border-bottom-color: ${get('colors.canvas.overlay')};
+    border-bottom-color: ${constants_1.get('colors.canvas.overlay')};
   }
 
   // Bottom-oriented carets
@@ -90,14 +69,14 @@ const PopoverContent = styled(Box)`
     }
 
     &::before {
-      bottom: -${get('space.3')};
-      border-top-color: ${get('colors.border.default')};
+      bottom: -${constants_1.get('space.3')};
+      border-top-color: ${constants_1.get('colors.border.default')};
     }
 
     &::after {
       bottom: -14px;
       // stylelint-disable-next-line primer/borders
-      border-top-color: ${get('colors.canvas.overlay')};
+      border-top-color: ${constants_1.get('colors.canvas.overlay')};
     }
   }
 
@@ -130,12 +109,12 @@ const PopoverContent = styled(Box)`
 
     &::before,
     &::after {
-      left: ${get('space.4')};
+      left: ${constants_1.get('space.4')};
       margin-left: 0;
     }
 
     &::after {
-      left: calc(${get('space.4')} + 1px);
+      left: calc(${constants_1.get('space.4')} + 1px);
     }
   }
 
@@ -156,11 +135,11 @@ const PopoverContent = styled(Box)`
 
     &::before {
       // stylelint-disable-next-line primer/spacing
-      margin-top: calc((${get('space.2')} + 1px) * -1);
+      margin-top: calc((${constants_1.get('space.2')} + 1px) * -1);
     }
 
     &::after {
-      margin-top: -${get('space.2')};
+      margin-top: -${constants_1.get('space.2')};
     }
   }
 
@@ -169,14 +148,14 @@ const PopoverContent = styled(Box)`
   ${Popover}.caret-pos--right-top & ,
   ${Popover}.caret-pos--right-bottom & {
     &::before {
-      right: -${get('space.3')};
-      border-left-color: ${get('colors.border.default')};
+      right: -${constants_1.get('space.3')};
+      border-left-color: ${constants_1.get('colors.border.default')};
     }
 
     &::after {
       right: -14px;
       // stylelint-disable-next-line primer/borders
-      border-left-color: ${get('colors.canvas.overlay')};
+      border-left-color: ${constants_1.get('colors.canvas.overlay')};
     }
   }
 
@@ -185,14 +164,14 @@ const PopoverContent = styled(Box)`
   ${Popover}.caret-pos--left-top & ,
   ${Popover}.caret-pos--left-bottom & {
     &::before {
-      left: -${get('space.3')};
-      border-right-color: ${get('colors.border.default')};
+      left: -${constants_1.get('space.3')};
+      border-right-color: ${constants_1.get('colors.border.default')};
     }
 
     &::after {
       left: -14px;
       // stylelint-disable-next-line primer/borders
-      border-right-color: ${get('colors.canvas.overlay')};
+      border-right-color: ${constants_1.get('colors.canvas.overlay')};
     }
   }
 
@@ -201,7 +180,7 @@ const PopoverContent = styled(Box)`
   ${Popover}.caret-pos--left-top & {
     &::before,
     &::after {
-      top: ${get('space.4')};
+      top: ${constants_1.get('space.4')};
     }
   }
 
@@ -214,23 +193,18 @@ const PopoverContent = styled(Box)`
     }
 
     &::before {
-      bottom: ${get('space.3')};
+      bottom: ${constants_1.get('space.3')};
     }
 
     &::after {
-      bottom: calc(${get('space.3')} + 1px);
+      bottom: calc(${constants_1.get('space.3')} + 1px);
     }
   }
 
-  ${sx};
-`
-
+  ${sx_1.default};
+`;
 Popover.defaultProps = {
-  caret: 'top'
-}
-
-PopoverContent.displayName = 'Popover.Content'
-
-export type PopoverProps = ComponentProps<typeof Popover>
-export type PopoverContentProps = ComponentProps<typeof PopoverContent>
-export default Object.assign(Popover, {Content: PopoverContent})
+    caret: 'top'
+};
+PopoverContent.displayName = 'Popover.Content';
+exports.default = Object.assign(Popover, { Content: PopoverContent });

package/lib/Portal/Portal.jsx

@@ -0,0 +1,79 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Portal = exports.registerPortalRoot = void 0;
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = require("react-dom");
+const useIsomorphicLayoutEffect_1 = __importDefault(require("../utils/useIsomorphicLayoutEffect"));
+const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__';
+const DEFAULT_PORTAL_CONTAINER_NAME = '__default__';
+const portalRootRegistry = {};
+/**
+ * Register a container to serve as a portal root.
+ * @param root The element that will be the root for portals created in this container
+ * @param name The name of the container, to be used with the `containerName` prop on the Portal Component.
+ * If name is not specified, registers the default portal root.
+ */
+function registerPortalRoot(root, name = DEFAULT_PORTAL_CONTAINER_NAME) {
+    portalRootRegistry[name] = root;
+}
+exports.registerPortalRoot = registerPortalRoot;
+// Ensures that a default portal root exists and is registered. If a DOM element exists
+// with id __primerPortalRoot__, allow that element to serve as the default portal root.
+// Otherwise, create that element and attach it to the end of document.body.
+function ensureDefaultPortal() {
+    const existingDefaultPortalContainer = portalRootRegistry[DEFAULT_PORTAL_CONTAINER_NAME];
+    if (!existingDefaultPortalContainer || !document.body.contains(existingDefaultPortalContainer)) {
+        let defaultPortalContainer = document.getElementById(PRIMER_PORTAL_ROOT_ID);
+        if (!(defaultPortalContainer instanceof Element)) {
+            defaultPortalContainer = document.createElement('div');
+            defaultPortalContainer.setAttribute('id', PRIMER_PORTAL_ROOT_ID);
+            defaultPortalContainer.style.position = 'absolute';
+            defaultPortalContainer.style.top = '0';
+            defaultPortalContainer.style.left = '0';
+            const suitablePortalRoot = document.querySelector('[data-portal-root]');
+            if (suitablePortalRoot) {
+                suitablePortalRoot.appendChild(defaultPortalContainer);
+            }
+            else {
+                document.body.appendChild(defaultPortalContainer);
+            }
+        }
+        registerPortalRoot(defaultPortalContainer);
+    }
+}
+/**
+ * Creates a React Portal, placing all children in a separate physical DOM root node.
+ * @see https://reactjs.org/docs/portals.html
+ */
+const Portal = ({ children, onMount, containerName: _containerName }) => {
+    const hostElement = document.createElement('div');
+    // Portaled content should get their own stacking context so they don't interfere
+    // with each other in unexpected ways. One should never find themselves tempted
+    // to change the zIndex to a value other than "1".
+    hostElement.style.position = 'relative';
+    hostElement.style.zIndex = '1';
+    const elementRef = react_1.default.useRef(hostElement);
+    useIsomorphicLayoutEffect_1.default(() => {
+        let containerName = _containerName;
+        if (containerName === undefined) {
+            containerName = DEFAULT_PORTAL_CONTAINER_NAME;
+            ensureDefaultPortal();
+        }
+        const parentElement = portalRootRegistry[containerName];
+        if (!parentElement) {
+            throw new Error(`Portal container '${_containerName}' is not yet registered. Container must be registered with registerPortal before use.`);
+        }
+        const element = elementRef.current;
+        parentElement.appendChild(element);
+        onMount?.();
+        return () => {
+            parentElement.removeChild(element);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [elementRef]);
+    return react_dom_1.createPortal(children, elementRef.current);
+};
+exports.Portal = Portal;

package/lib/Portal/index.js

@@ -1,17 +1,6 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "registerPortalRoot", {
-  enumerable: true,
-  get: function () {
-    return _Portal.registerPortalRoot;
-  }
-});
-exports.default = void 0;
-
-var _Portal = require("./Portal");
-
-var _default = _Portal.Portal;
-exports.default = _default;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerPortalRoot = void 0;
+const Portal_1 = require("./Portal");
+Object.defineProperty(exports, "registerPortalRoot", { enumerable: true, get: function () { return Portal_1.registerPortalRoot; } });
+exports.default = Portal_1.Portal;