@primer/components 0.0.0-2021109221452 → 0.0.0-2021109223232

package/lib/Pagehead.jsx

@@ -1,18 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("./constants");
-const sx_1 = __importDefault(require("./sx"));
-const Pagehead = styled_components_1.default.div `
-  position: relative;
-  padding-top: ${constants_1.get('space.4')};
-  padding-bottom: ${constants_1.get('space.4')};
-  margin-bottom: ${constants_1.get('space.4')};
-  border-bottom: 1px solid ${constants_1.get('colors.border.default')};
-  ${constants_1.COMMON};
-  ${sx_1.default};
-`;
-exports.default = Pagehead;

package/lib/Pagination/Pagination.jsx

@@ -1,163 +0,0 @@
-"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 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 model_1 = require("./model");
-const Page = styled_components_1.default.a `
-  display: inline-block;
-  min-width: 32px;
-  padding: 5px 10px;
-  font-style: normal;
-  line-height: 20px;
-  color: ${constants_1.get('colors.fg.default')};
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: pointer;
-  user-select: none;
-  text-decoration: none;
-
-  margin-right: ${constants_1.get('space.1')};
-
-  &:last-child {
-    margin-right: 0;
-  }
-
-  border: ${constants_1.get('borderWidths.1')} solid transparent;
-  border-radius: ${constants_1.get('radii.2')};
-  transition: border-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
-
-  &:hover,
-  &:focus {
-    text-decoration: none;
-    border-color: ${constants_1.get('colors.border.default')};
-    outline: 0;
-    transition-duration: 0.1s;
-  }
-
-  &:active {
-    border-color: ${constants_1.get('colors.border.muted')};
-  }
-
-  &[rel='prev'],
-  &[rel='next'] {
-    color: ${constants_1.get('colors.accent.fg')};
-  }
-
-  &[aria-current],
-  &[aria-current]:hover {
-    color: ${constants_1.get('colors.fg.onEmphasis')};
-    background-color: ${constants_1.get('colors.accent.emphasis')};
-    border-color: transparent;
-  }
-
-  &[aria-disabled],
-  &[aria-disabled]:hover {
-    color: ${constants_1.get('colors.primer.fg.disabled')}; // check
-    cursor: default;
-    border-color: transparent;
-  }
-
-  @supports (clip-path: polygon(50% 0, 100% 50%, 50% 100%)) {
-    &[rel='prev']::before,
-    &[rel='next']::after {
-      display: inline-block;
-      width: 16px;
-      height: 16px;
-      vertical-align: text-bottom;
-      content: '';
-      background-color: currentColor;
-    }
-
-    // chevron-left
-    &[rel='prev']::before {
-      margin-right: ${constants_1.get('space.1')};
-      clip-path: polygon(
-        9.8px 12.8px,
-        8.7px 12.8px,
-        4.5px 8.5px,
-        4.5px 7.5px,
-        8.7px 3.2px,
-        9.8px 4.3px,
-        6.1px 8px,
-        9.8px 11.7px,
-        9.8px 12.8px
-      );
-    }
-
-    // chevron-right
-    &[rel='next']::after {
-      margin-left: ${constants_1.get('space.1')};
-      clip-path: polygon(
-        6.2px 3.2px,
-        7.3px 3.2px,
-        11.5px 7.5px,
-        11.5px 8.5px,
-        7.3px 12.8px,
-        6.2px 11.7px,
-        9.9px 8px,
-        6.2px 4.3px,
-        6.2px 3.2px
-      );
-    }
-  }
-
-  ${constants_1.COMMON};
-`;
-function usePaginationPages({ theme, pageCount, currentPage, onPageChange, hrefBuilder, marginPageCount, showPages, surroundingPageCount }) {
-    const pageChange = react_1.default.useCallback(n => (e) => onPageChange(e, n), [onPageChange]);
-    const model = react_1.default.useMemo(() => {
-        return model_1.buildPaginationModel(pageCount, currentPage, !!showPages, marginPageCount, surroundingPageCount);
-    }, [pageCount, currentPage, showPages, marginPageCount, surroundingPageCount]);
-    const children = react_1.default.useMemo(() => {
-        return model.map(page => {
-            const { props, key, content } = model_1.buildComponentData(page, hrefBuilder, pageChange(page.num));
-            return (<Page {...props} key={key} theme={theme}>
-          {content}
-        </Page>);
-        });
-    }, [model, hrefBuilder, pageChange, theme]);
-    return children;
-}
-const PaginationContainer = styled_components_1.default.nav `
-  margin-top: 20px;
-  margin-bottom: 15px;
-  text-align: center;
-  ${sx_1.default};
-`;
-function Pagination({ theme, pageCount, currentPage, onPageChange = noop, hrefBuilder = defaultHrefBuilder, marginPageCount = 1, showPages = true, surroundingPageCount = 2, ...rest }) {
-    const pageElements = usePaginationPages({
-        theme,
-        pageCount,
-        currentPage,
-        onPageChange,
-        hrefBuilder,
-        marginPageCount,
-        showPages,
-        surroundingPageCount
-    });
-    return (<PaginationContainer aria-label="Pagination" {...rest} theme={theme}>
-      <Box_1.default display="inline-block" theme={theme}>
-        {pageElements}
-      </Box_1.default>
-    </PaginationContainer>);
-}
-function defaultHrefBuilder(pageNum) {
-    return `#${pageNum}`;
-}
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-function noop() { }
-Pagination.defaultProps = {
-    hrefBuilder: defaultHrefBuilder,
-    marginPageCount: 1,
-    onPageChange: noop,
-    showPages: true,
-    surroundingPageCount: 2
-};
-exports.default = Pagination;

package/lib/Pagination/model.jsx

@@ -1,174 +0,0 @@
-"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

@@ -1,25 +0,0 @@
-"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/lib/Popover.jsx

@@ -1,210 +0,0 @@
-"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')};
-
-  ${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: ${constants_1.get('space.4')};
-  background-color: ${constants_1.get('colors.canvas.overlay')};
-
-  ${constants_1.COMMON};
-  ${constants_1.LAYOUT};
-
-  // Carets
-  &::before,
-  &::after {
-    position: absolute;
-    left: 50%;
-    display: inline-block;
-    content: '';
-  }
-
-  &::before {
-    top: -${constants_1.get('space.3')};
-    margin-left: -9px;
-    border: ${constants_1.get('space.2')} solid transparent; // TODO: solid?
-    border-bottom-color: ${constants_1.get('colors.border.default')};
-  }
-
-  &::after {
-    top: -14px;
-    margin-left: -${constants_1.get('space.2')};
-    border: 7px solid transparent; // todo: solid
-    border-bottom-color: ${constants_1.get('colors.canvas.overlay')};
-  }
-
-  // Bottom-oriented carets
-  ${Popover}.caret-pos--bottom & ,
-  ${Popover}.caret-pos--bottom-right & ,
-  ${Popover}.caret-pos--bottom-left & {
-    &::before,
-    &::after {
-      top: auto;
-      border-bottom-color: transparent;
-    }
-
-    &::before {
-      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: ${constants_1.get('colors.canvas.overlay')};
-    }
-  }
-
-  // Top & Bottom: Right-oriented carets
-  ${Popover}.caret-pos--top-right & ,
-  ${Popover}.caret-pos--bottom-right & {
-    right: -9px;
-    margin-right: 0;
-
-    &::before,
-    &::after {
-      left: auto;
-      margin-left: 0;
-    }
-
-    &::before {
-      right: 20px;
-    }
-
-    &::after {
-      right: 21px;
-    }
-  }
-
-  // Top & Bottom: Left-oriented carets
-  ${Popover}.caret-pos--top-left & ,
-  ${Popover}.caret-pos--bottom-left & {
-    left: -9px;
-    margin-left: 0;
-
-    &::before,
-    &::after {
-      left: ${constants_1.get('space.4')};
-      margin-left: 0;
-    }
-
-    &::after {
-      left: calc(${constants_1.get('space.4')} + 1px);
-    }
-  }
-
-  // Right- & Left-oriented carets
-  ${Popover}.caret-pos--right & ,
-  ${Popover}.caret-pos--right-top & ,
-  ${Popover}.caret-pos--right-bottom & ,
-  ${Popover}.caret-pos--left & ,
-  ${Popover}.caret-pos--left-top & ,
-  ${Popover}.caret-pos--left-bottom & {
-    &::before,
-    &::after {
-      top: 50%;
-      left: auto;
-      margin-left: 0;
-      border-bottom-color: transparent;
-    }
-
-    &::before {
-      // stylelint-disable-next-line primer/spacing
-      margin-top: calc((${constants_1.get('space.2')} + 1px) * -1);
-    }
-
-    &::after {
-      margin-top: -${constants_1.get('space.2')};
-    }
-  }
-
-  // Right-oriented carets
-  ${Popover}.caret-pos--right & ,
-  ${Popover}.caret-pos--right-top & ,
-  ${Popover}.caret-pos--right-bottom & {
-    &::before {
-      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: ${constants_1.get('colors.canvas.overlay')};
-    }
-  }
-
-  // Left-oriented carets
-  ${Popover}.caret-pos--left & ,
-  ${Popover}.caret-pos--left-top & ,
-  ${Popover}.caret-pos--left-bottom & {
-    &::before {
-      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: ${constants_1.get('colors.canvas.overlay')};
-    }
-  }
-
-  // Right & Left: Top-oriented carets
-  ${Popover}.caret-pos--right-top & ,
-  ${Popover}.caret-pos--left-top & {
-    &::before,
-    &::after {
-      top: ${constants_1.get('space.4')};
-    }
-  }
-
-  // Right & Left: Bottom-oriented carets
-  ${Popover}.caret-pos--right-bottom & ,
-  ${Popover}.caret-pos--left-bottom & {
-    &::before,
-    &::after {
-      top: auto;
-    }
-
-    &::before {
-      bottom: ${constants_1.get('space.3')};
-    }
-
-    &::after {
-      bottom: calc(${constants_1.get('space.3')} + 1px);
-    }
-  }
-
-  ${sx_1.default};
-`;
-Popover.defaultProps = {
-    caret: 'top'
-};
-PopoverContent.displayName = 'Popover.Content';
-exports.default = Object.assign(Popover, { Content: PopoverContent });

package/lib/Portal/Portal.jsx

@@ -1,78 +0,0 @@
-"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 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);
-    react_1.default.useLayoutEffect(() => {
-        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;