@primer/components 0.0.0-20219922627 → 0.0.0-2022530201059

package/lib-esm/Tooltip.js

@@ -8,7 +8,7 @@ import sx from './sx';
 const TooltipBase = styled.span.withConfig({
   displayName: "Tooltip__TooltipBase",
   componentId: "kp39nc-0"
-})(["position:relative;&::before{position:absolute;z-index:1000001;display:none;width:0px;height:0px;color:", ";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 ", ";-webkit-font-smoothing:subpixel-antialiased;color:", ";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:", ";border-radius:", ";opacity:0;}@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-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:", ";}}&.tooltipped-se{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-sw::after{margin-right:-", ";}&.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:", ";}}&.tooltipped-ne{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-nw::after{margin-right:-", ";}&.tooltipped-s::after,&.tooltipped-n::after{transform:translateX(50%);}&.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:", ";}}&.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:", ";}}&.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;}", ";", ";"], get('colors.neutral.emphasisPlus'), get('fonts.normal'), get('colors.fg.onEmphasis'), get('colors.neutral.emphasisPlus'), get('radii.1'), get('colors.neutral.emphasisPlus'), get('space.3'), get('space.3'), get('colors.neutral.emphasisPlus'), get('space.3'), get('space.3'), get('colors.neutral.emphasisPlus'), get('colors.neutral.emphasisPlus'), COMMON, sx);
+})(["position:relative;&::before{position:absolute;z-index:1000001;display:none;width:0px;height:0px;color:", ";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 ", ";-webkit-font-smoothing:subpixel-antialiased;color:", ";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:", ";border-radius:", ";opacity:0;}@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-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:", ";}}&.tooltipped-se{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-sw::after{margin-right:-", ";}&.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:", ";}}&.tooltipped-ne{&::after{right:auto;left:50%;margin-left:-", ";}}&.tooltipped-nw::after{margin-right:-", ";}&.tooltipped-s::after,&.tooltipped-n::after{transform:translateX(50%);}&.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:", ";}}&.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:", ";}}&.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;}", ";", ";"], get('colors.tooltip.bg'), get('fonts.normal'), get('colors.tooltip.text'), get('colors.tooltip.bg'), get('radii.1'), get('colors.tooltip.bg'), get('space.3'), get('space.3'), get('colors.tooltip.bg'), get('space.3'), get('space.3'), get('colors.tooltip.bg'), get('colors.tooltip.bg'), COMMON, sx);
 
 function Tooltip({
   direction = 'n',
@@ -22,7 +22,6 @@ function Tooltip({
 }) {
   const classes = classnames(className, `tooltipped-${direction}`, align && `tooltipped-align-${align}-2`, noDelay && 'tooltipped-no-delay', wrap && 'tooltipped-multiline');
   return /*#__PURE__*/React.createElement(TooltipBase, _extends({
-    role: "tooltip",
     "aria-label": text
   }, rest, {
     className: classes

package/lib-esm/UnderlineNav.js

@@ -1,7 +1,6 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import classnames from 'classnames'; // eslint-disable-next-line import/no-namespace
-
+import classnames from 'classnames';
 import React from 'react';
 import styled from 'styled-components';
 import { COMMON, get } from './constants';
@@ -11,7 +10,7 @@ const SELECTED_CLASS = 'selected';
 const UnderlineNavBase = styled.nav.withConfig({
   displayName: "UnderlineNav__UnderlineNavBase",
   componentId: "zrnxqt-0"
-})(["display:flex;justify-content:space-between;border-bottom:1px solid ", ";&.UnderlineNav--right{justify-content:flex-end;.UnderlineNav-item{margin-right:0;margin-left:", ";}.UnderlineNav-actions{flex:1 1 auto;}}&.UnderlineNav--full{display:block;}.UnderlineNav-body{display:flex;margin-bottom:-1px;}.UnderlineNav-actions{align-self:center;}", ";", ";"], get('colors.border.muted'), get('space.3'), COMMON, sx);
+})(["display:flex;justify-content:space-between;border-bottom:1px solid ", ";&.UnderlineNav--right{justify-content:flex-end;.UnderlineNav-item{margin-right:0;margin-left:", ";}.UnderlineNav-actions{flex:1 1 auto;}}&.UnderlineNav--full{display:block;}.UnderlineNav-body{display:flex;margin-bottom:-1px;}.UnderlineNav-actions{align-self:center;}", ";", ";"], get('colors.border.secondary'), get('space.3'), COMMON, sx);
 
 function UnderlineNav({
   actions,
@@ -42,7 +41,7 @@ const UnderlineNavLink = styled.a.attrs(props => ({
 })).withConfig({
   displayName: "UnderlineNav__UnderlineNavLink",
   componentId: "zrnxqt-1"
-})(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:0.2s ease;.UnderlineNav-octicon{color:", ";}}&.selected{color:", ";border-bottom-color:", ";.UnderlineNav-octicon{color:", ";}}", ";", ";"], get('space.3'), get('space.2'), get('space.3'), get('fontSizes.1'), get('lineHeights.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.neutral.muted'), get('colors.fg.muted'), get('colors.fg.default'), get('colors.primer.border.active'), get('colors.fg.default'), COMMON, sx);
+})(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:0.2s ease;.UnderlineNav-octicon{color:", ";}}&.selected{color:", ";border-bottom-color:", ";.UnderlineNav-octicon{color:", ";}}", ";", ";"], get('space.3'), get('space.2'), get('space.3'), get('fontSizes.1'), get('lineHeights.default'), get('colors.underlinenav.text'), get('colors.underlinenav.textHover'), get('colors.border.tertiary'), get('colors.text.tertiary'), get('colors.underlinenav.textActive'), get('colors.underlinenav.borderActive'), get('colors.underlinenav.iconActive'), COMMON, sx);
 UnderlineNavLink.displayName = 'UnderlineNav.Link';
 export default Object.assign(UnderlineNav, {
   Link: UnderlineNavLink

package/lib-esm/behaviors/anchoredPosition.js

@@ -45,7 +45,7 @@ export function getAnchoredPosition(floatingElement, anchorElement, settings = {
 function getPositionedParent(element) {
   let parentNode = element.parentNode;
 
-  while (parentNode !== null) {
+  while (parentNode != undefined) {
     if (parentNode instanceof HTMLElement && getComputedStyle(parentNode).position !== 'static') {
       return parentNode;
     }
@@ -58,15 +58,15 @@ function getPositionedParent(element) {
 /**
  * Returns the rectangle (relative to the window) that will clip the given element
  * if it is rendered outside of its bounds.
- * @param element
- * @returns
+ * @param element 
+ * @returns 
  */
 
 
 function getClippingRect(element) {
   let parentNode = element;
 
-  while (parentNode !== null) {
+  while (parentNode != undefined) {
     if (parentNode === document.body) {
       break;
     }
@@ -152,7 +152,6 @@ function pureCalculateAnchoredPosition(viewportRect, relativePosition, floatingR
     height: viewportRect.height
   };
   let pos = calculatePosition(floatingRect, anchorRect, side, align, anchorOffset, alignmentOffset);
-  let anchorSide = side;
   pos.top -= relativePosition.top;
   pos.left -= relativePosition.left; // Handle screen overflow
 
@@ -170,7 +169,6 @@ function pureCalculateAnchoredPosition(viewportRect, relativePosition, floatingR
         pos = calculatePosition(floatingRect, anchorRect, nextSide, align, anchorOffset, alignmentOffset);
         pos.top -= relativePosition.top;
         pos.left -= relativePosition.left;
-        anchorSide = nextSide;
       }
     } // At this point we've flipped the position if applicable. Now just nudge until it's on-screen.
 
@@ -197,9 +195,7 @@ function pureCalculateAnchoredPosition(viewportRect, relativePosition, floatingR
     }
   }
 
-  return { ...pos,
-    anchorSide
-  };
+  return pos;
 }
 /**
  * Given a floating element and an anchor element, return coordinates for the
@@ -237,8 +233,7 @@ function calculatePosition(elementDimensions, anchorPosition, side, align, ancho
       left = anchorPosition.left + alignmentOffset;
     } else if (align === 'center') {
       left = anchorPosition.left - (elementDimensions.width - anchorPosition.width) / 2 + alignmentOffset;
-    } else {
-      // end
+    } else if (align === 'end') {
       left = anchorRight - elementDimensions.width - alignmentOffset;
     }
   }
@@ -248,8 +243,7 @@ function calculatePosition(elementDimensions, anchorPosition, side, align, ancho
       top = anchorPosition.top + alignmentOffset;
     } else if (align === 'center') {
       top = anchorPosition.top - (elementDimensions.height - anchorPosition.height) / 2 + alignmentOffset;
-    } else {
-      // end
+    } else if (align === 'end') {
       top = anchorBottom - elementDimensions.height - alignmentOffset;
     }
   }
@@ -271,8 +265,7 @@ function calculatePosition(elementDimensions, anchorPosition, side, align, ancho
       left = anchorPosition.left + alignmentOffset;
     } else if (align === 'center') {
       left = anchorPosition.left - (elementDimensions.width - anchorPosition.width) / 2 + alignmentOffset;
-    } else {
-      // end
+    } else if (align === 'end') {
       left = anchorRight - elementDimensions.width - alignmentOffset;
     }
   } else if (side === 'inside-left' || side === 'inside-right' || side === 'inside-center') {
@@ -280,8 +273,7 @@ function calculatePosition(elementDimensions, anchorPosition, side, align, ancho
       top = anchorPosition.top + alignmentOffset;
     } else if (align === 'center') {
       top = anchorPosition.top - (elementDimensions.height - anchorPosition.height) / 2 + alignmentOffset;
-    } else {
-      // end
+    } else if (align === 'end') {
       top = anchorBottom - elementDimensions.height - alignmentOffset;
     }
   }

package/lib-esm/behaviors/focusTrap.js

@@ -51,10 +51,11 @@ export function focusTrap(container, initialFocus, abortSignal) {
   let lastFocusedChild = undefined; // Ensure focus remains in the trap zone by checking that a given recently-focused
   // element is inside the trap zone. If it isn't, redirect focus to a suitable
   // element within the trap zone. If need to redirect focus and a suitable element
-  // is not found, focus the container.
+  // is not found, blur the recently-focused element so that focus doesn't leave the
+  // trap zone.
 
   function ensureTrapZoneHasFocus(focusedElement) {
-    if (focusedElement instanceof HTMLElement && document.contains(container)) {
+    if (focusedElement instanceof HTMLElement) {
       if (container.contains(focusedElement)) {
         // If a child of the trap zone was focused, remember it
         lastFocusedChild = focusedElement;
@@ -63,33 +64,16 @@ export function focusTrap(container, initialFocus, abortSignal) {
         if (lastFocusedChild && isTabbable(lastFocusedChild) && container.contains(lastFocusedChild)) {
           lastFocusedChild.focus();
           return;
-        } else if (initialFocus && container.contains(initialFocus)) {
-          initialFocus.focus();
-          return;
         } else {
-          // Ensure the container is focusable:
-          // - Either the container already has a `tabIndex`
-          // - Or provide a temporary `tabIndex`
-          const containerNeedsTemporaryTabIndex = container.getAttribute('tabindex') === null;
-
-          if (containerNeedsTemporaryTabIndex) {
-            container.setAttribute('tabindex', '-1');
-          } // Focus the container.
-
-
-          container.focus(); // If a temporary `tabIndex` was provided, remove it.
-
-          if (containerNeedsTemporaryTabIndex) {
-            // Once focus has moved from the container to a child within the FocusTrap,
-            // the container can be made un-refocusable by removing `tabIndex`.
-            container.addEventListener('blur', () => container.removeAttribute('tabindex'), {
-              once: true
-            }); // NB: If `tabIndex` was removed *before* `blur`, then certain browsers (e.g. Chrome)
-            // would consider `body` the `activeElement`, and as a result, keyboard navigation
-            // between children would break, since `body` is outside the `FocusTrap`.
+          const toFocus = initialFocus && container.contains(initialFocus) ? initialFocus : getFocusableChild(container);
+
+          if (toFocus) {
+            toFocus.focus();
+            return;
+          } else {
+            // no element focusable within trap, blur the external element instead
+            focusedElement.blur();
           }
-
-          return;
         }
       }
     }
@@ -141,12 +125,10 @@ export function focusTrap(container, initialFocus, abortSignal) {
     tryReactivate();
   }); // Prevent focus leaving the trap container
 
-  document.addEventListener('focus', event => {
+  document.addEventListener('focusin', event => {
     ensureTrapZoneHasFocus(event.target);
-  }, // use capture to ensure we get all events.  focus events do not bubble
-  {
-    signal: wrappingController.signal,
-    capture: true
+  }, {
+    signal: wrappingController.signal
   }); // focus the first element
 
   ensureTrapZoneHasFocus(document.activeElement);