@primer/components 0.0.0-20211030175556 → 0.0.0-20211030182910

package/lib/Tooltip.jsx

@@ -1,246 +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 react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("./constants");
-const sx_1 = __importDefault(require("./sx"));
-const TooltipBase = styled_components_1.default.span `
-  position: relative;
-
-  &::before {
-    position: absolute;
-    z-index: 1000001;
-    display: none;
-    width: 0px;
-    height: 0px;
-    color: ${constants_1.get('colors.neutral.emphasisPlus')};
-    pointer-events: none;
-    content: '';
-    border: 6px solid transparent;
-    opacity: 0;
-  }
-
-  &::after {
-    position: absolute;
-    z-index: 1000000;
-    display: none;
-    padding: 0.5em 0.75em;
-    font: normal normal 11px/1.5 ${constants_1.get('fonts.normal')};
-    -webkit-font-smoothing: subpixel-antialiased;
-    color: ${constants_1.get('colors.fg.onEmphasis')};
-    text-align: center;
-    text-decoration: none;
-    text-shadow: none;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: break-word;
-    white-space: pre;
-    pointer-events: none;
-    content: attr(aria-label);
-    background: ${constants_1.get('colors.neutral.emphasisPlus')};
-    border-radius: ${constants_1.get('radii.1')};
-    opacity: 0;
-  }
-
-  // delay animation for tooltip
-  @keyframes tooltip-appear {
-    from {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-
-  &:hover,
-  &:active,
-  &:focus {
-    &::before,
-    &::after {
-      display: inline-block;
-      text-decoration: none;
-      animation-name: tooltip-appear;
-      animation-duration: 0.1s;
-      animation-fill-mode: forwards;
-      animation-timing-function: ease-in;
-      animation-delay: 0.4s;
-    }
-  }
-
-  &.tooltipped-no-delay:hover,
-  &.tooltipped-no-delay:active,
-  &.tooltipped-no-delay:focus {
-    &::before,
-    &::after {
-      animation-delay: 0s;
-    }
-  }
-
-  &.tooltipped-multiline:hover,
-  &.tooltipped-multiline:active,
-  &.tooltipped-multiline:focus {
-    &::after {
-      display: table-cell;
-    }
-  }
-
-  // Tooltipped south
-  &.tooltipped-s,
-  &.tooltipped-se,
-  &.tooltipped-sw {
-    &::after {
-      top: 100%;
-      right: 50%;
-      margin-top: 6px;
-    }
-
-    &::before {
-      top: auto;
-      right: 50%;
-      bottom: -7px;
-      margin-right: -6px;
-      border-bottom-color: ${constants_1.get('colors.neutral.emphasisPlus')};
-    }
-  }
-
-  &.tooltipped-se {
-    &::after {
-      right: auto;
-      left: 50%;
-      margin-left: -${constants_1.get('space.3')};
-    }
-  }
-
-  &.tooltipped-sw::after {
-    margin-right: -${constants_1.get('space.3')};
-  }
-
-  // Tooltips above the object
-  &.tooltipped-n,
-  &.tooltipped-ne,
-  &.tooltipped-nw {
-    &::after {
-      right: 50%;
-      bottom: 100%;
-      margin-bottom: 6px;
-    }
-
-    &::before {
-      top: -7px;
-      right: 50%;
-      bottom: auto;
-      margin-right: -6px;
-      border-top-color: ${constants_1.get('colors.neutral.emphasisPlus')};
-    }
-  }
-
-  &.tooltipped-ne {
-    &::after {
-      right: auto;
-      left: 50%;
-      margin-left: -${constants_1.get('space.3')};
-    }
-  }
-
-  &.tooltipped-nw::after {
-    margin-right: -${constants_1.get('space.3')};
-  }
-
-  // Move the tooltip body to the center of the object.
-  &.tooltipped-s::after,
-  &.tooltipped-n::after {
-    transform: translateX(50%);
-  }
-
-  // Tooltipped to the left
-  &.tooltipped-w {
-    &::after {
-      right: 100%;
-      bottom: 50%;
-      margin-right: 6px;
-      transform: translateY(50%);
-    }
-
-    &::before {
-      top: 50%;
-      bottom: 50%;
-      left: -7px;
-      margin-top: -6px;
-      border-left-color: ${constants_1.get('colors.neutral.emphasisPlus')};
-    }
-  }
-
-  // tooltipped to the right
-  &.tooltipped-e {
-    &::after {
-      bottom: 50%;
-      left: 100%;
-      margin-left: 6px;
-      transform: translateY(50%);
-    }
-
-    &::before {
-      top: 50%;
-      right: -7px;
-      bottom: 50%;
-      margin-top: -6px;
-      border-right-color: ${constants_1.get('colors.neutral.emphasisPlus')};
-    }
-  }
-
-  &.tooltipped-multiline {
-    &::after {
-      width: max-content;
-      max-width: 250px;
-      word-wrap: break-word;
-      white-space: pre-line;
-      border-collapse: separate;
-    }
-
-    &.tooltipped-s::after,
-    &.tooltipped-n::after {
-      right: auto;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    &.tooltipped-w::after,
-    &.tooltipped-e::after {
-      right: 100%;
-    }
-  }
-
-  &.tooltipped-align-right-2::after {
-    right: 0;
-    margin-right: 0;
-  }
-
-  &.tooltipped-align-right-2::before {
-    right: 15px;
-  }
-
-  &.tooltipped-align-left-2::after {
-    left: 0;
-    margin-left: 0;
-  }
-
-  &.tooltipped-align-left-2::before {
-    left: 10px;
-  }
-
-  ${sx_1.default};
-`;
-function Tooltip({ direction = 'n', children, className, text, noDelay, align, wrap, ...rest }) {
-    const classes = classnames_1.default(className, `tooltipped-${direction}`, align && `tooltipped-align-${align}-2`, noDelay && 'tooltipped-no-delay', wrap && 'tooltipped-multiline');
-    return (<TooltipBase role="tooltip" aria-label={text} {...rest} className={classes}>
-      {children}
-    </TooltipBase>);
-}
-Tooltip.alignments = ['left', 'right'];
-Tooltip.directions = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'];
-exports.default = Tooltip;

package/lib/Truncate.jsx

@@ -1,24 +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 styled_system_1 = require("styled-system");
-const sx_1 = __importDefault(require("./sx"));
-const Truncate = styled_components_1.default.div `
-  display: ${props => (props.inline ? 'inline-block' : 'inherit')};
-  overflow: hidden;
-  text-overflow: ellipsis;
-  vertical-align: ${props => (props.inline ? 'top' : 'initial')};
-  white-space: nowrap;
-  ${styled_system_1.maxWidth}
-  ${props => (props.expandable ? `&:hover { max-width: 10000px; }` : '')}
-  ${sx_1.default};
-`;
-Truncate.defaultProps = {
-    expandable: false,
-    inline: false,
-    maxWidth: 125
-};
-exports.default = Truncate;

package/lib/UnderlineNav.jsx

@@ -1,88 +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 react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("./constants");
-const sx_1 = __importDefault(require("./sx"));
-const ITEM_CLASS = 'UnderlineNav-item';
-const SELECTED_CLASS = 'selected';
-const UnderlineNavBase = styled_components_1.default.nav `
-  display: flex;
-  justify-content: space-between;
-  border-bottom: 1px solid ${constants_1.get('colors.border.muted')};
-  &.UnderlineNav--right {
-    justify-content: flex-end;
-
-    .UnderlineNav-item {
-      margin-right: 0;
-      margin-left: ${constants_1.get('space.3')};
-    }
-
-    .UnderlineNav-actions {
-      flex: 1 1 auto;
-    }
-  }
-  &.UnderlineNav--full {
-    display: block;
-  }
-
-  .UnderlineNav-body {
-    display: flex;
-    margin-bottom: -1px;
-  }
-
-  .UnderlineNav-actions {
-    align-self: center;
-  }
-
-  ${sx_1.default};
-`;
-function UnderlineNav({ actions, className, align, children, full, label, theme, ...rest }) {
-    const classes = classnames_1.default(className, 'UnderlineNav', align && `UnderlineNav--${align}`, full && 'UnderlineNav--full');
-    return (<UnderlineNavBase className={classes} aria-label={label} theme={theme} {...rest}>
-      <div className="UnderlineNav-body">{children}</div>
-      {actions && <div className="UnderlineNav-actions">{actions}</div>}
-    </UnderlineNavBase>);
-}
-const UnderlineNavLink = styled_components_1.default.a.attrs(props => ({
-    activeClassName: typeof props.to === 'string' ? 'selected' : '',
-    className: classnames_1.default(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className)
-})) `
-  padding: ${constants_1.get('space.3')} ${constants_1.get('space.2')};
-  margin-right: ${constants_1.get('space.3')};
-  font-size: ${constants_1.get('fontSizes.1')};
-  line-height: ${constants_1.get('lineHeights.default')};
-  color: ${constants_1.get('colors.fg.default')};
-  text-align: center;
-  border-bottom: 2px solid transparent;
-  text-decoration: none;
-
-  &:hover,
-  &:focus {
-    color: ${constants_1.get('colors.fg.default')};
-    text-decoration: none;
-    border-bottom-color: ${constants_1.get('colors.neutral.muted')};
-    transition: 0.2s ease;
-
-    .UnderlineNav-octicon {
-      color: ${constants_1.get('colors.fg.muted')};
-    }
-  }
-
-  &.selected {
-    color: ${constants_1.get('colors.fg.default')};
-    border-bottom-color: ${constants_1.get('colors.primer.border.active')};
-
-    .UnderlineNav-octicon {
-      color: ${constants_1.get('colors.fg.default')};
-    }
-  }
-
-  ${sx_1.default};
-`;
-UnderlineNavLink.displayName = 'UnderlineNav.Link';
-exports.default = Object.assign(UnderlineNav, { Link: UnderlineNavLink });

package/lib/_TextInputWrapper.jsx

@@ -1,120 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const styled_components_1 = __importStar(require("styled-components"));
-const styled_system_1 = require("styled-system");
-const constants_1 = require("./constants");
-const sx_1 = __importDefault(require("./sx"));
-const sizeVariants = styled_system_1.variant({
-    variants: {
-        small: {
-            minHeight: '28px',
-            px: 2,
-            py: '3px',
-            fontSize: 0,
-            lineHeight: '20px'
-        },
-        large: {
-            px: 2,
-            py: '10px',
-            fontSize: 3
-        }
-    }
-});
-const TextInputWrapper = styled_components_1.default.span `
-  display: inline-flex;
-  align-items: stretch;
-  min-height: 34px;
-  font-size: ${constants_1.get('fontSizes.1')};
-  line-height: 20px;
-  color: ${constants_1.get('colors.fg.default')};
-  vertical-align: middle;
-  background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
-  background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
-  border: 1px solid ${constants_1.get('colors.border.default')};
-  border-radius: ${constants_1.get('radii.2')};
-  outline: none;
-  box-shadow: ${constants_1.get('shadows.primer.shadow.inset')};
-  cursor: text;
-
-  ${props => {
-    if (props.hasIcon) {
-        return styled_components_1.css `
-        padding: 0;
-      `;
-    }
-    else {
-        return styled_components_1.css `
-        padding: 6px 12px;
-      `;
-    }
-}}
-
-  .TextInput-icon {
-    align-self: center;
-    color: ${constants_1.get('colors.fg.muted')};
-    margin: 0 ${constants_1.get('space.2')};
-    flex-shrink: 0;
-  }
-
-  &:focus-within {
-    border-color: ${constants_1.get('colors.accent.emphasis')};
-    box-shadow: ${constants_1.get('shadows.primer.shadow.focus')};
-  }
-
-  ${props => props.contrast &&
-    styled_components_1.css `
-      background-color: ${constants_1.get('colors.canvas.inset')};
-    `}
-
-  ${props => props.disabled &&
-    styled_components_1.css `
-      color: ${constants_1.get('colors.primer.fg.disabled')};
-      background-color: ${constants_1.get('colors.input.disabledBg')};
-      border-color: ${constants_1.get('colors.border.default')};
-    `}
-  
-    ${props => props.block &&
-    styled_components_1.css `
-      display: block;
-      width: 100%;
-    `}
-
-    ${props => props.block &&
-    props.hasIcon &&
-    styled_components_1.css `
-      display: flex;
-    `}
-  
-    // Ensures inputs don't zoom on mobile but are body-font size on desktop
-    @media (min-width: ${constants_1.get('breakpoints.1')}) {
-    font-size: ${constants_1.get('fontSizes.1')};
-  }
-  ${styled_system_1.width}
-  ${styled_system_1.minWidth}
-    ${styled_system_1.maxWidth}
-    ${sizeVariants}
-    ${sx_1.default};
-`;
-exports.default = TextInputWrapper;

package/lib/_UnstyledTextInput.jsx

@@ -1,22 +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 sx_1 = __importDefault(require("./sx"));
-const UnstyledTextInput = styled_components_1.default.input `
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  -webkit-appearance: none;
-  color: inherit;
-  width: 100%;
-  &:focus {
-    outline: 0;
-  }
-
-  ${sx_1.default};
-`;
-exports.default = UnstyledTextInput;

package/lib/hooks/useDetails.jsx

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-function useDetails({ ref, closeOnOutsideClick, defaultOpen, onClickOutside }) {
-    const [open, setOpen] = react_1.useState(defaultOpen);
-    const backupRef = react_1.useRef(null);
-    const customRef = ref ?? backupRef;
-    const onClickOutsideInternal = react_1.useCallback((event) => {
-        const { current } = customRef;
-        const eventTarget = event.target;
-        const closest = eventTarget.closest('details');
-        if (closest !== current) {
-            onClickOutside && onClickOutside(event);
-            if (!event.defaultPrevented) {
-                setOpen(false);
-            }
-        }
-    }, [customRef, setOpen, onClickOutside]);
-    // handles the overlay behavior - closing the menu when clicking outside of it
-    react_1.useEffect(() => {
-        if (open && closeOnOutsideClick) {
-            document.addEventListener('click', onClickOutsideInternal);
-            return () => {
-                document.removeEventListener('click', onClickOutsideInternal);
-            };
-        }
-    }, [open, closeOnOutsideClick, onClickOutsideInternal]);
-    const handleToggle = (e) => {
-        if (!e.defaultPrevented) {
-            const eventTarget = e.target;
-            setOpen(eventTarget.open);
-        }
-    };
-    const getDetailsProps = () => {
-        return { onToggle: handleToggle, open, ref: customRef };
-    };
-    return { open, setOpen, getDetailsProps };
-}
-exports.default = useDetails;

package/lib/hooks/useOnOutsideClick.jsx

@@ -1,61 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useOnOutsideClick = void 0;
-const react_1 = require("react");
-// Because events are handled at the document level, we provide a mechanism for early return.
-const stopPropagation = true;
-/**
- * Calls all handlers in reverse order
- * @param event The MouseEvent generated by the click event.
- */
-function handleClick(event) {
-    if (!event.defaultPrevented) {
-        for (const handler of Object.values(registry).reverse()) {
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            if (handler(event) === stopPropagation || event.defaultPrevented) {
-                break;
-            }
-        }
-    }
-}
-const registry = {};
-function register(id, handler) {
-    registry[id] = handler;
-}
-function deregister(id) {
-    delete registry[id];
-}
-// For auto-incrementing unique identifiers for registered handlers.
-let handlerId = 0;
-const useOnOutsideClick = ({ containerRef, ignoreClickRefs, onClickOutside }) => {
-    const id = react_1.useMemo(() => handlerId++, []);
-    const handler = react_1.useCallback(event => {
-        // don't call click handler if the mouse event was triggered by an auxiliary button (right click/wheel button/etc)
-        if (event instanceof MouseEvent && event.button > 0) {
-            return stopPropagation;
-        }
-        // don't call handler if the click happened inside of the container
-        if (containerRef.current?.contains(event.target)) {
-            return stopPropagation;
-        }
-        // don't call handler if click happened on an ignored ref
-        if (ignoreClickRefs && ignoreClickRefs.some(({ current }) => current?.contains(event.target))) {
-            return stopPropagation;
-        }
-        onClickOutside(event);
-    }, [containerRef, ignoreClickRefs, onClickOutside]);
-    react_1.useEffect(() => {
-        if (Object.keys(registry).length === 0) {
-            // use capture to ensure we get all events
-            document.addEventListener('mousedown', handleClick, { capture: true });
-        }
-        register(id, handler);
-        return () => {
-            deregister(id);
-            if (Object.keys(registry).length === 0) {
-                document.removeEventListener('mousedown', handleClick, { capture: true });
-            }
-        };
-    }, [id, handler]);
-};
-exports.useOnOutsideClick = useOnOutsideClick;

package/lib/hooks/useOverlay.jsx

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useOverlay = void 0;
-const useOnOutsideClick_1 = require("./useOnOutsideClick");
-const useOpenAndCloseFocus_1 = require("./useOpenAndCloseFocus");
-const useOnEscapePress_1 = require("./useOnEscapePress");
-const useProvidedRefOrCreate_1 = require("./useProvidedRefOrCreate");
-const useOverlay = ({ overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside, preventFocusOnOpen }) => {
-    const overlayRef = useProvidedRefOrCreate_1.useProvidedRefOrCreate(_overlayRef);
-    useOpenAndCloseFocus_1.useOpenAndCloseFocus({ containerRef: overlayRef, returnFocusRef, initialFocusRef, preventFocusOnOpen });
-    useOnOutsideClick_1.useOnOutsideClick({ containerRef: overlayRef, ignoreClickRefs, onClickOutside });
-    useOnEscapePress_1.useOnEscapePress(onEscape);
-    return { ref: overlayRef };
-};
-exports.useOverlay = useOverlay;

package/lib/utils/create-slots.jsx

@@ -1,65 +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 use_force_update_1 = require("./use-force-update");
-/** createSlots is a factory that can create a
- *  typesafe Slots + Slot pair to use in a component definition
- *  For example: ActionList.Item uses createSlots to get a Slots wrapper
- *  + Slot component that is used by LeadingVisual, Description
- */
-const createSlots = (slotNames) => {
-    const SlotsContext = react_1.default.createContext({
-        registerSlot: () => null,
-        unregisterSlot: () => null,
-        context: {}
-    });
-    /** Slots uses a Double render strategy inspired by [reach-ui/descendants](https://github.com/reach/reach-ui/tree/develop/packages/descendants)
-     *  Slot registers themself with the Slots parent.
-     *  When all the children have mounted = registered themselves in slot,
-     *  we re-render the parent component to render with slots
-     */
-    const Slots = ({ context = {}, children }) => {
-        // initialise slots
-        const slotsDefinition = {};
-        slotNames.map(name => (slotsDefinition[name] = null));
-        const slotsRef = react_1.default.useRef(slotsDefinition);
-        const rerenderWithSlots = use_force_update_1.useForceUpdate();
-        const [isMounted, setIsMounted] = react_1.default.useState(false);
-        // fires after all the effects in children
-        react_1.default.useEffect(() => {
-            rerenderWithSlots();
-            setIsMounted(true);
-        }, [rerenderWithSlots]);
-        const registerSlot = react_1.default.useCallback((name, contents) => {
-            slotsRef.current[name] = contents;
-            // don't render until the component mounts = all slots are registered
-            if (isMounted)
-                rerenderWithSlots();
-        }, [isMounted, rerenderWithSlots]);
-        // Slot can be removed from the tree as well,
-        // we need to unregister them from the slot
-        const unregisterSlot = react_1.default.useCallback((name) => {
-            slotsRef.current[name] = null;
-            rerenderWithSlots();
-        }, [rerenderWithSlots]);
-        /**
-         * Slots uses a render prop API so abstract the
-         * implementation detail of using a context provider.
-         */
-        const slots = slotsRef.current;
-        return (<SlotsContext.Provider value={{ registerSlot, unregisterSlot, context }}>{children(slots)}</SlotsContext.Provider>);
-    };
-    const Slot = ({ name, children }) => {
-        const { registerSlot, unregisterSlot, context } = react_1.default.useContext(SlotsContext);
-        react_1.default.useEffect(() => {
-            registerSlot(name, typeof children === 'function' ? children(context) : children);
-            return () => unregisterSlot(name);
-        }, [name, children, registerSlot, unregisterSlot, context]);
-        return null;
-    };
-    return { Slots, Slot };
-};
-exports.default = createSlots;