@primer/components 0.0.0-20219922627 → 0.0.0-2022530201059

package/lib/StateLabel.js

@@ -85,19 +85,19 @@ const sizeVariants = (0, _styledSystem.variant)({
 const StateLabelBase = _styledComponents.default.span.withConfig({
   displayName: "StateLabel__StateLabelBase",
   componentId: "k4pd9e-0"
-})(["display:inline-flex;align-items:center;font-weight:", ";line-height:16px;color:", ";text-align:center;border-radius:", ";border-width:1px;border-style:solid;", ";", ";", ";", ";"], (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('radii.3'), colorVariants, sizeVariants, _constants.COMMON, _sx.default);
+})(["display:inline-flex;align-items:center;font-weight:", ";line-height:16px;color:", ";text-align:center;border-radius:", ";border-width:1px;border-style:solid;", ";", ";", ";", ";"], (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('colors.bg.primary'), (0, _constants.get)('radii.3'), colorVariants, sizeVariants, _constants.COMMON, _sx.default);
 
 function StateLabel({
   children,
   status,
-  variant: variantProp,
+  variant,
   ...rest
 }) {
-  const octiconProps = variantProp === 'small' ? {
+  const octiconProps = variant === 'small' ? {
     width: '1em'
   } : {};
   return /*#__PURE__*/_react.default.createElement(StateLabelBase, _extends({}, rest, {
-    variant: variantProp,
+    variant: variant,
     status: status
   }), status && /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, _extends({
     mr: 1

package/lib/SubNav.js

@@ -13,7 +13,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _constants = require("./constants");
 
-var _Box = _interopRequireDefault(require("./Box"));
+var _Flex = _interopRequireDefault(require("./Flex"));
 
 var _sx = _interopRequireDefault(require("./sx"));
 
@@ -50,9 +50,7 @@ function SubNav({
 SubNav.displayName = "SubNav";
 
 function SubNavLinks(props) {
-  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
-    display: "flex"
-  }, props));
+  return /*#__PURE__*/_react.default.createElement(_Flex.default, props);
 }
 
 SubNavLinks.displayName = "SubNavLinks";
@@ -63,7 +61,7 @@ const SubNavLink = _styledComponents.default.a.attrs(props => ({
 })).withConfig({
   displayName: "SubNav__SubNavLink",
   componentId: "f7w0xa-1"
-})(["padding-left:", ";padding-right:", ";font-weight:", ";font-size:", ";line-height:20px;min-height:34px;color:", ";text-align:center;text-decoration:none;border-top:1px solid ", ";border-bottom:1px solid ", ";border-right:1px solid ", ";display:flex;align-items:center;&:first-of-type{border-top-left-radius:", ";border-bottom-left-radius:", ";border-left:1px solid ", ";}&:last-of-type{border-top-right-radius:", ";border-bottom-right-radius:", ";}&:hover,&:focus{text-decoration:none;background-color:", ";transition:0.2s ease;.SubNav-octicon{color:", ";}}&.selected{color:", ";background-color:", ";border-color:", ";.SubNav-octicon{color:", ";}}", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('fontWeights.semibold'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.canvas.subtle'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.fg.onEmphasis'), _constants.COMMON, _sx.default);
+})(["padding-left:", ";padding-right:", ";font-weight:", ";font-size:", ";line-height:20px;min-height:34px;color:", ";text-align:center;text-decoration:none;border-top:1px solid ", ";border-bottom:1px solid ", ";border-right:1px solid ", ";display:flex;align-items:center;&:first-of-type{border-top-left-radius:", ";border-bottom-left-radius:", ";border-left:1px solid ", ";}&:last-of-type{border-top-right-radius:", ";border-bottom-right-radius:", ";}&:hover,&:focus{text-decoration:none;background-color:", ";transition:0.2s ease;.SubNav-octicon{color:", ";}}&.selected{color:", ";background-color:", ";border-color:", ";.SubNav-octicon{color:", ";}}", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('fontWeights.semibold'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.text.primary'), (0, _constants.get)('colors.border.primary'), (0, _constants.get)('colors.border.primary'), (0, _constants.get)('colors.border.primary'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.border.primary'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.bg.tertiary'), (0, _constants.get)('colors.icon.secondary'), (0, _constants.get)('colors.state.selected.primaryText'), (0, _constants.get)('colors.state.selected.primaryBg'), (0, _constants.get)('colors.state.selected.primaryBorder'), (0, _constants.get)('colors.state.selected.primaryText'), _constants.COMMON, _sx.default);
 
 SubNavLink.displayName = 'SubNav.Link';
 SubNavLinks.displayName = 'SubNav.Links';

package/lib/TabNav.js

@@ -23,7 +23,7 @@ const SELECTED_CLASS = 'selected';
 const TabNavBase = _styledComponents.default.div.withConfig({
   displayName: "TabNav__TabNavBase",
   componentId: "sc-1xod0ow-0"
-})(["margin-top:0;border-bottom:1px solid ", ";", " ", ""], (0, _constants.get)('colors.border.default'), _constants.COMMON, _sx.default);
+})(["margin-top:0;border-bottom:1px solid ", ";", " ", ""], (0, _constants.get)('colors.border.primary'), _constants.COMMON, _sx.default);
 
 const TabNavBody = _styledComponents.default.nav.withConfig({
   displayName: "TabNav__TabNavBody",
@@ -32,7 +32,7 @@ const TabNavBody = _styledComponents.default.nav.withConfig({
 
 function TabNav({
   children,
-  'aria-label': ariaLabel,
+  "aria-label": ariaLabel,
   ...rest
 }) {
   return /*#__PURE__*/_react.default.createElement(TabNavBase, rest, /*#__PURE__*/_react.default.createElement(TabNavBody, {
@@ -48,7 +48,7 @@ const TabNavLink = _styledComponents.default.a.attrs(props => ({
 })).withConfig({
   displayName: "TabNav__TabNavLink",
   componentId: "sc-1xod0ow-2"
-})(["padding:8px 12px;font-size:", ";line-height:20px;color:", ";text-decoration:none;background-color:transparent;border:1px solid transparent;border-bottom:0;&:hover,&:focus{color:", ";text-decoration:none;}&.selected{color:", ";border-color:", ";border-top-right-radius:", ";border-top-left-radius:", ";background-color:", ";}", ";", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.canvas.default'), _constants.COMMON, _sx.default);
+})(["padding:8px 12px;font-size:", ";line-height:20px;color:", ";text-decoration:none;background-color:transparent;border:1px solid transparent;border-bottom:0;&:hover,&:focus{color:", ";text-decoration:none;}&.selected{color:", ";border-color:", ";border-top-right-radius:", ";border-top-left-radius:", ";background-color:", ";}", ";", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.text.primary'), (0, _constants.get)('colors.text.primary'), (0, _constants.get)('colors.text.primary'), (0, _constants.get)('colors.border.primary'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.bg.canvas'), _constants.COMMON, _sx.default);
 
 TabNavLink.displayName = 'TabNav.Link';
 

package/lib/TextInput.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _props = require("@styled-system/props");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -17,9 +19,9 @@ var _constants = require("./constants");
 
 var _sx = _interopRequireDefault(require("./sx"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -50,45 +52,38 @@ const Input = _styledComponents.default.input.withConfig({
 const Wrapper = _styledComponents.default.span.withConfig({
   displayName: "TextInput__Wrapper",
   componentId: "sc-1apmpmt-1"
-})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.primer.shadow.inset'), props => {
+})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.text.primary'), (0, _constants.get)('colors.input.border'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.shadow.inset'), props => {
   if (props.hasIcon) {
     return (0, _styledComponents.css)(["padding:0;"]);
   } else {
     return (0, _styledComponents.css)(["padding:6px 12px;"]);
   }
-}, (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('shadows.primer.shadow.focus'), props => props.contrast && (0, _styledComponents.css)(["background-color:", ";"], (0, _constants.get)('colors.canvas.inset')), props => props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";border-color:", ";"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.input.disabledBg'), (0, _constants.get)('colors.border.default')), props => props.block && (0, _styledComponents.css)(["display:block;width:100%;"]), (0, _constants.get)('breakpoints.1'), (0, _constants.get)('fontSizes.1'), _styledSystem.width, _styledSystem.minWidth, _styledSystem.maxWidth, sizeVariants, _sx.default); // Props that are not passed through to Input:
-
+}, (0, _constants.get)('colors.icon.tertiary'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.state.focus.border'), (0, _constants.get)('shadows.state.focus.shadow'), props => props.contrast && (0, _styledComponents.css)(["background-color:", ";"], (0, _constants.get)('colors.input.contrastBg')), props => props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";border-color:", ";"], (0, _constants.get)('colors.text.secondary'), (0, _constants.get)('colors.input.disabledBg'), (0, _constants.get)('colors.input.disabledBorder')), props => props.block && (0, _styledComponents.css)(["display:block;width:100%;"]), (0, _constants.get)('breakpoints.1'), (0, _constants.get)('fontSizes.1'), _constants.COMMON, _styledSystem.width, _styledSystem.minWidth, _styledSystem.maxWidth, sizeVariants, _sx.default);
 
 // using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input
-const TextInput = /*#__PURE__*/_react.default.forwardRef(({
+const TextInput = _react.default.forwardRef(({
   icon: IconComponent,
-  block,
-  className,
   contrast,
+  className,
+  block,
   disabled,
-  sx: sxProp,
   theme,
-  width: widthProp,
-  minWidth: minWidthProp,
-  maxWidth: maxWidthProp,
-  variant: variantProp,
-  ...inputProps
+  sx,
+  ...rest
 }, ref) => {
   // this class is necessary to style FilterSearch, plz no touchy!
   const wrapperClasses = (0, _classnames.default)(className, 'TextInput-wrapper');
-  return /*#__PURE__*/_react.default.createElement(Wrapper, {
-    block: block,
+  const wrapperProps = (0, _props.pick)(rest);
+  const inputProps = (0, _props.omit)(rest);
+  return /*#__PURE__*/_react.default.createElement(Wrapper, _extends({
     className: wrapperClasses,
-    contrast: contrast,
-    disabled: disabled,
     hasIcon: !!IconComponent,
-    sx: sxProp,
+    block: block,
     theme: theme,
-    width: widthProp,
-    minWidth: minWidthProp,
-    maxWidth: maxWidthProp,
-    variant: variantProp
-  }, IconComponent && /*#__PURE__*/_react.default.createElement(IconComponent, {
+    disabled: disabled,
+    contrast: contrast,
+    sx: sx
+  }, wrapperProps), IconComponent && /*#__PURE__*/_react.default.createElement(IconComponent, {
     className: "TextInput-icon"
   }), /*#__PURE__*/_react.default.createElement(Input, _extends({
     ref: ref,

package/lib/ThemeProvider.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTheme = useTheme;
 exports.useColorSchemeVar = useColorSchemeVar;
-exports.default = exports.ThemeProvider = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -19,18 +19,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const defaultColorMode = 'day';
 const defaultDayScheme = 'light';
-const defaultNightScheme = 'dark'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+const defaultNightScheme = 'dark';
 
-const ThemeContext = /*#__PURE__*/_react.default.createContext({
+const ThemeContext = _react.default.createContext({
   setColorMode: () => null,
   setDayScheme: () => null,
   setNightScheme: () => null
 });
 
-const ThemeProvider = ({
+function ThemeProvider({
   children,
   ...props
-}) => {
+}) {
   var _ref, _props$theme, _ref2, _props$colorMode, _ref3, _props$dayScheme, _ref4, _props$nightScheme;
 
   // Get fallback values from parent ThemeProvider (if exists)
@@ -89,9 +89,8 @@ const ThemeProvider = ({
   }, /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
     theme: resolvedTheme
   }, children));
-};
+}
 
-exports.ThemeProvider = ThemeProvider;
 ThemeProvider.displayName = "ThemeProvider";
 
 function useTheme() {
@@ -113,30 +112,18 @@ function useSystemColorMode() {
   _react.default.useEffect(() => {
     var _window, _window$matchMedia;
 
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     const media = (_window = window) === null || _window === void 0 ? void 0 : (_window$matchMedia = _window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, '(prefers-color-scheme: dark)');
 
     function handleChange(event) {
       const isNight = event.matches;
-      setSystemColorMode(isNight ? 'night' : 'day');
-    } // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-
-
-    if (media) {
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      if (media.addEventListener !== undefined) {
-        media.addEventListener('change', handleChange);
-        return function cleanup() {
-          media.removeEventListener('change', handleChange);
-        };
-      } // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      else if (media.addListener !== undefined) {
-        media.addListener(handleChange);
-        return function cleanup() {
-          media.removeListener(handleChange);
-        };
-      }
+      const systemColorMode = isNight ? 'night' : 'day';
+      setSystemColorMode(systemColorMode);
     }
+
+    media === null || media === void 0 ? void 0 : media.addEventListener('change', handleChange);
+    return function cleanup() {
+      media === null || media === void 0 ? void 0 : media.removeEventListener('change', handleChange);
+    };
   }, []);
 
   return systemColorMode;
@@ -145,7 +132,6 @@ function useSystemColorMode() {
 function getSystemColorMode() {
   var _window$matchMedia2, _window2, _window$matchMedia2$c;
 
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   if (typeof window !== 'undefined' && (_window$matchMedia2 = (_window2 = window).matchMedia) !== null && _window$matchMedia2 !== void 0 && (_window$matchMedia2$c = _window$matchMedia2.call(_window2, '(prefers-color-scheme: dark)')) !== null && _window$matchMedia2$c !== void 0 && _window$matchMedia2$c.matches) {
     return 'night';
   }
@@ -179,11 +165,8 @@ function applyColorScheme(theme, colorScheme) {
   }
 
   if (!theme.colorSchemes[colorScheme]) {
-    // eslint-disable-next-line no-console
-    console.error(`\`${colorScheme}\` scheme not defined in \`theme.colorSchemes\``); // Apply the first defined color scheme
-
-    const defaultColorScheme = Object.keys(theme.colorSchemes)[0];
-    return (0, _deepmerge.default)(theme, theme.colorSchemes[defaultColorScheme]);
+    console.error(`\`${colorScheme}\` scheme not defined in \`theme.colorSchemes\``);
+    return theme;
   }
 
   return (0, _deepmerge.default)(theme, theme.colorSchemes[colorScheme]);

package/lib/Timeline.js

@@ -5,51 +5,54 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _Box = _interopRequireDefault(require("./Box"));
 
 var _constants = require("./constants");
 
-var _sx = _interopRequireDefault(require("./sx"));
+var _Flex = _interopRequireDefault(require("./Flex"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _Position = require("./Position");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _sx = _interopRequireDefault(require("./sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 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); }
 
-const Timeline = (0, _styledComponents.default)(_Box.default).withConfig({
+const Timeline = (0, _styledComponents.default)(_Flex.default).withConfig({
   displayName: "Timeline",
   componentId: "c4dq2e-0"
-})(["display:flex;flex-direction:column;", " ", ";"], props => props.clipSidebar && (0, _styledComponents.css)([".Timeline-Item:first-child{padding-top:0;}.Timeline-Item:last-child{padding-bottom:0;}"]), _sx.default);
-const TimelineItem = (0, _styledComponents.default)(_Box.default).attrs(props => ({
+})(["flex-direction:column;", " ", ";"], props => props.clipSidebar && (0, _styledComponents.css)([".Timeline-Item:first-child{padding-top:0;}.Timeline-Item:last-child{padding-bottom:0;}"]), _sx.default);
+const TimelineItem = (0, _styledComponents.default)(_Flex.default).attrs(props => ({
   className: (0, _classnames.default)('Timeline-Item', props.className)
 })).withConfig({
   displayName: "Timeline__TimelineItem",
   componentId: "c4dq2e-1"
-})(["display:flex;position:relative;padding:", " 0;margin-left:", ";&::before{position:absolute;top:0;bottom:0;left:0;display:block;width:2px;content:'';background-color:", ";}", " ", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.border.muted'), props => props.condensed && (0, _styledComponents.css)(["padding-top:", ";padding-bottom:0;&:last-child{padding-bottom:", ";}.TimelineItem-Badge{height:16px;margin-top:", ";margin-bottom:", ";color:", ";background-color:", ";border:0;}"], (0, _constants.get)('space.1'), (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.canvas.default')), _constants.COMMON, _sx.default);
+})(["position:relative;padding:", " 0;margin-left:", ";&::before{position:absolute;top:0;bottom:0;left:0;display:block;width:2px;content:'';background-color:", ";}", " ", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.border.secondary'), props => props.condensed && (0, _styledComponents.css)(["padding-top:", ";padding-bottom:0;&:last-child{padding-bottom:", ";}.TimelineItem-Badge{height:16px;margin-top:", ";margin-bottom:", ";color:", ";background-color:", ";border:0;}"], (0, _constants.get)('space.1'), (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.icon.tertiary'), (0, _constants.get)('colors.bg.canvas')), _constants.COMMON, _sx.default);
+
+var _StyledFlex = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "Timeline___StyledFlex",
+  componentId: "c4dq2e-2"
+})(["border-radius:50%;border:2px solid ", ";"], p => p._css);
 
 const TimelineBadge = props => {
-  return /*#__PURE__*/_react.default.createElement(_Box.default, {
-    position: "relative",
+  return /*#__PURE__*/_react.default.createElement(_Position.Relative, {
     zIndex: 1
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
-    display: "flex",
+  }, /*#__PURE__*/_react.default.createElement(_StyledFlex, _extends({
     className: (0, _classnames.default)(props.className, 'TimelineItem-Badge'),
     flexShrink: 0,
-    borderRadius: "50%",
-    borderWidth: "2px",
-    borderStyle: "solid",
-    borderColor: "canvas.default",
     overflow: "hidden",
-    color: "fg.muted",
+    color: "icon.secondary",
     bg: "timeline.badgeBg",
     width: "32px",
     height: "32px",
@@ -57,18 +60,20 @@ const TimelineBadge = props => {
     ml: "-15px",
     alignItems: "center",
     justifyContent: "center"
-  }, props), props.children));
+  }, props, {
+    _css: (0, _constants.get)('colors.bg.canvas')
+  }), props.children));
 };
 
 TimelineBadge.displayName = "TimelineBadge";
 const TimelineBody = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "Timeline__TimelineBody",
-  componentId: "c4dq2e-2"
-})(["min-width:0;max-width:100%;margin-top:", ";color:", ";flex:auto;font-size:", ";", ";"], (0, _constants.get)('space.1'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('fontSizes.1'), _sx.default);
-const TimelineBreak = (0, _styledComponents.default)(_Box.default).withConfig({
-  displayName: "Timeline__TimelineBreak",
   componentId: "c4dq2e-3"
-})(["position:relative z-index:1;height:24px;margin:0;margin-bottom:-", ";margin-left:0;background-color:", ";border:0;border-top:", " solid ", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.border.default'), _sx.default);
+})(["min-width:0;max-width:100%;margin-top:", ";color:", ";flex:auto;font-size:", ";", ";"], (0, _constants.get)('space.1'), (0, _constants.get)('colors.timeline.text'), (0, _constants.get)('fontSizes.1'), _sx.default);
+const TimelineBreak = (0, _styledComponents.default)(_Position.Relative).withConfig({
+  displayName: "Timeline__TimelineBreak",
+  componentId: "c4dq2e-4"
+})(["z-index:1;height:24px;margin:0;margin-bottom:-", ";margin-left:0;background-color:", ";border:0;border-top:", " solid ", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('colors.bg.canvas'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.border.primary'), _sx.default);
 TimelineItem.displayName = 'Timeline.Item';
 TimelineBadge.displayName = 'Timeline.Badge';
 TimelineBody.displayName = 'Timeline.Body';

package/lib/Tooltip.js

@@ -22,7 +22,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const TooltipBase = _styledComponents.default.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;}", ";", ";"], (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('fonts.normal'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('radii.1'), (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.neutral.emphasisPlus'), (0, _constants.get)('colors.neutral.emphasisPlus'), _constants.COMMON, _sx.default);
+})(["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;}", ";", ";"], (0, _constants.get)('colors.tooltip.bg'), (0, _constants.get)('fonts.normal'), (0, _constants.get)('colors.tooltip.text'), (0, _constants.get)('colors.tooltip.bg'), (0, _constants.get)('radii.1'), (0, _constants.get)('colors.tooltip.bg'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.tooltip.bg'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.tooltip.bg'), (0, _constants.get)('colors.tooltip.bg'), _constants.COMMON, _sx.default);
 
 function Tooltip({
   direction = 'n',
@@ -36,7 +36,6 @@ function Tooltip({
 }) {
   const classes = (0, _classnames.default)(className, `tooltipped-${direction}`, align && `tooltipped-align-${align}-2`, noDelay && 'tooltipped-no-delay', wrap && 'tooltipped-multiline');
   return /*#__PURE__*/_react.default.createElement(TooltipBase, _extends({
-    role: "tooltip",
     "aria-label": text
   }, rest, {
     className: classes

package/lib/UnderlineNav.js

@@ -25,7 +25,7 @@ const SELECTED_CLASS = 'selected';
 const UnderlineNavBase = _styledComponents.default.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;}", ";", ";"], (0, _constants.get)('colors.border.muted'), (0, _constants.get)('space.3'), _constants.COMMON, _sx.default);
+})(["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;}", ";", ";"], (0, _constants.get)('colors.border.secondary'), (0, _constants.get)('space.3'), _constants.COMMON, _sx.default);
 
 function UnderlineNav({
   actions,
@@ -57,7 +57,7 @@ const UnderlineNavLink = _styledComponents.default.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:", ";}}", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('lineHeights.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.neutral.muted'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.primer.border.active'), (0, _constants.get)('colors.fg.default'), _constants.COMMON, _sx.default);
+})(["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:", ";}}", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('lineHeights.default'), (0, _constants.get)('colors.underlinenav.text'), (0, _constants.get)('colors.underlinenav.textHover'), (0, _constants.get)('colors.border.tertiary'), (0, _constants.get)('colors.text.tertiary'), (0, _constants.get)('colors.underlinenav.textActive'), (0, _constants.get)('colors.underlinenav.borderActive'), (0, _constants.get)('colors.underlinenav.iconActive'), _constants.COMMON, _sx.default);
 
 UnderlineNavLink.displayName = 'UnderlineNav.Link';
 

package/lib/behaviors/anchoredPosition.js

@@ -52,7 +52,7 @@ 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;
     }
@@ -65,15 +65,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;
     }
@@ -159,7 +159,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
 
@@ -177,7 +176,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.
 
@@ -204,9 +202,7 @@ function pureCalculateAnchoredPosition(viewportRect, relativePosition, floatingR
     }
   }
 
-  return { ...pos,
-    anchorSide
-  };
+  return pos;
 }
 /**
  * Given a floating element and an anchor element, return coordinates for the
@@ -244,8 +240,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;
     }
   }
@@ -255,8 +250,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;
     }
   }
@@ -278,8 +272,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') {
@@ -287,8 +280,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/behaviors/focusTrap.js

@@ -60,10 +60,11 @@ 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;
@@ -72,33 +73,16 @@ function focusTrap(container, initialFocus, abortSignal) {
         if (lastFocusedChild && (0, _iterateFocusableElements.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;
         }
       }
     }
@@ -150,12 +134,10 @@ 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);