@primer/components 31.2.1-rc.f73a0f8c → 32.0.1-rc.44e3df9b

package/lib/polyfills/eventListenerSignal.js

@@ -1,4 +1,10 @@
 "use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.polyfill = polyfill;
+
 /*
 
 This file polyfills the following: https://github.com/whatwg/dom/issues/911
@@ -9,48 +15,50 @@ AddEventListenerOptions object. When the signal is aborted, the event listener i
 removed.
 
 */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.polyfill = void 0;
-let signalSupported = false;
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-function noop() { }
+let signalSupported = false; // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+function noop() {}
+
 try {
-    const options = Object.create({}, {
-        signal: {
-            get() {
-                signalSupported = true;
-            }
-        }
-    });
-    window.addEventListener('test', noop, options);
-    window.removeEventListener('test', noop, options);
-}
-catch (e) {
-    /* */
+  const options = Object.create({}, {
+    signal: {
+      get() {
+        signalSupported = true;
+      }
+
+    }
+  });
+  window.addEventListener('test', noop, options);
+  window.removeEventListener('test', noop, options);
+} catch (e) {
+  /* */
 }
+
 function featureSupported() {
-    return signalSupported;
+  return signalSupported;
 }
+
 function monkeyPatch() {
-    if (typeof window === 'undefined') {
-        return;
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  const originalAddEventListener = EventTarget.prototype.addEventListener;
+
+  EventTarget.prototype.addEventListener = function (name, originalCallback, optionsOrCapture) {
+    if (typeof optionsOrCapture === 'object' && 'signal' in optionsOrCapture && optionsOrCapture.signal instanceof AbortSignal) {
+      originalAddEventListener.call(optionsOrCapture.signal, 'abort', () => {
+        this.removeEventListener(name, originalCallback, optionsOrCapture);
+      });
     }
-    const originalAddEventListener = EventTarget.prototype.addEventListener;
-    EventTarget.prototype.addEventListener = function (name, originalCallback, optionsOrCapture) {
-        if (typeof optionsOrCapture === 'object' &&
-            'signal' in optionsOrCapture &&
-            optionsOrCapture.signal instanceof AbortSignal) {
-            originalAddEventListener.call(optionsOrCapture.signal, 'abort', () => {
-                this.removeEventListener(name, originalCallback, optionsOrCapture);
-            });
-        }
-        return originalAddEventListener.call(this, name, originalCallback, optionsOrCapture);
-    };
+
+    return originalAddEventListener.call(this, name, originalCallback, optionsOrCapture);
+  };
 }
+
 function polyfill() {
-    if (!featureSupported()) {
-        monkeyPatch();
-        signalSupported = true;
-    }
-}
-exports.polyfill = polyfill;
+  if (!featureSupported()) {
+    monkeyPatch();
+    signalSupported = true;
+  }
+}

package/lib/stories/ActionList2.stories.js

@@ -277,11 +277,11 @@ function GroupsStory() {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Groups"), /*#__PURE__*/_react.default.createElement(ErsatzOverlay, null, /*#__PURE__*/_react.default.createElement(ActionList, {
     selectionVariant: "multiple",
     showDividers: true,
-    role: "listbox",
     "aria-label": "Select reviewers"
   }, /*#__PURE__*/_react.default.createElement(ActionList.Group, {
     title: "Suggestions",
-    variant: "filled"
+    variant: "filled",
+    role: "listbox"
   }, users.slice(0, 2).map(user => /*#__PURE__*/_react.default.createElement(ActionList.Item, {
     key: user.login,
     role: "option",
@@ -293,7 +293,8 @@ function GroupsStory() {
     variant: "block"
   }, "Recently edited these files")))), /*#__PURE__*/_react.default.createElement(ActionList.Group, {
     title: "Everyone",
-    variant: "filled"
+    variant: "filled",
+    role: "listbox"
   }, users.slice(2).map(user => /*#__PURE__*/_react.default.createElement(ActionList.Item, {
     role: "option",
     key: user.login,

package/lib/stories/ActionMenu.stories.js

@@ -99,9 +99,7 @@ function SimpleListStory() {
     onAction: onAction,
     anchorContent: "Menu",
     overlayProps: {
-      'data-test-id': 'some_test_id',
-      onMouseDown: e => // eslint-disable-next-line no-console
-      console.log('onMouseDown in the internal Overlay can be useful for controlling event interactions', e)
+      'data-test-id': 'some_test_id'
     },
     items: [{
       text: 'New file',

package/lib/stories/ConfirmationDialog.stories.js

@@ -66,17 +66,25 @@ const ShorthandHook = () => {
     flexDirection: "column",
     alignItems: "flex-start"
   }, /*#__PURE__*/_react.default.createElement(_.Button, {
-    mb: 2,
-    onClick: onButtonClick
+    onClick: onButtonClick,
+    sx: {
+      mb: 2
+    }
   }, "Turn me green!"), /*#__PURE__*/_react.default.createElement(_.Button, {
-    mb: 2,
-    onClick: onButtonClick
+    onClick: onButtonClick,
+    sx: {
+      mb: 2
+    }
   }, "Turn me green!"), /*#__PURE__*/_react.default.createElement(_.Button, {
-    mb: 2,
-    onClick: onButtonClick
+    onClick: onButtonClick,
+    sx: {
+      mb: 2
+    }
   }, "Turn me green!"), /*#__PURE__*/_react.default.createElement(_.Button, {
-    mb: 2,
-    onClick: onButtonClick
+    onClick: onButtonClick,
+    sx: {
+      mb: 2
+    }
   }, "Turn me green!"));
 };
 

package/lib/stories/Dialog.stories.js

@@ -173,7 +173,9 @@ function CustomBody({
   children
 }) {
   return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.Body, {
-    bg: "danger.subtle"
+    sx: {
+      bg: 'danger.subtle'
+    }
   }, children);
 }
 
@@ -183,7 +185,9 @@ function CustomFooter({
   footerButtons
 }) {
   return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.Footer, {
-    bg: "attention.subtle"
+    sx: {
+      bg: 'attention.subtle'
+    }
   }, footerButtons ? /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.Buttons, {
     buttons: footerButtons
   }) : null);

package/lib/stories/useFocusTrap.stories.js

@@ -156,7 +156,9 @@ const CustomInitialFocus = () => {
     flexDirection: "column",
     alignItems: "flex-start"
   }, /*#__PURE__*/_react.default.createElement(_.Flash, {
-    mb: 3
+    sx: {
+      mb: 3
+    }
   }, "This story is the same as the `Focus Trap` story, except, when the trap zone is activated, the \u201CElderberry\u201D button will receive the initial focus (if the trap zone container does not already have focus)."), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Apple"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Banana"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/_react.default.createElement(_.Box, {
     borderColor: "gray.5",
     ref: containerRef,
@@ -283,7 +285,9 @@ const MultipleFocusTraps = () => {
     flexDirection: "column",
     alignItems: "flex-start"
   }, /*#__PURE__*/_react.default.createElement(_.Flash, {
-    mb: 3
+    sx: {
+      mb: 3
+    }
   }, "This story demonstrates the global nature of focus traps. When a focus trap is enabled, if there is already an active focus trap, it becomes suspended and pushed onto a stack. Once the newly-active focus trap is disabled, the most recently-suspended trap will reactivate. Suspended focus traps can be disabled, causing them to be removed from the stack of suspended traps."), /*#__PURE__*/_react.default.createElement(_.Box, {
     p: 2,
     mb: 3,

package/lib/stories/useFocusZone.stories.js

@@ -72,8 +72,10 @@ const BasicFocusZone = () => {
     right: 5,
     top: 2
   }, "Last key pressed: ", lastKey), /*#__PURE__*/_react.default.createElement(ToggleButton, {
-    mb: 3,
-    onClick: toggleFz
+    onClick: toggleFz,
+    sx: {
+      mb: 3
+    }
   }, fzEnabled ? 'Disable' : 'Enable', " Focus Zone"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Apple"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Banana"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/_react.default.createElement(_.Box, {
     borderColor: "gray.5",
     ref: containerRef,
@@ -368,7 +370,9 @@ const SpecialSituations = () => {
     alignItems: "flex-start",
     onKeyDownCapture: reportKey
   }, /*#__PURE__*/_react.default.createElement(_.Flash, {
-    mb: 3
+    sx: {
+      mb: 3
+    }
   }, "This story is very esoteric! It only exists to show some of the nuance of the arrow key focus behavior in different situations. Focus treatment within your component should be evaluated for your particular UX using the ", /*#__PURE__*/_react.default.createElement("a", {
     href: "https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard"
   }, "ARIA guidelines"), "."), /*#__PURE__*/_react.default.createElement(_.Box, {
@@ -454,7 +458,9 @@ const ChangingSubtree = () => {
     alignItems: "flex-start",
     onKeyDownCapture: reportKey
   }, /*#__PURE__*/_react.default.createElement(_.Flash, {
-    mb: 3
+    sx: {
+      mb: 3
+    }
   }, "This story demonstrates that focusZone is consistent even when the container\u2019s subtree changes."), /*#__PURE__*/_react.default.createElement(_.Box, {
     position: "absolute",
     right: 5,
@@ -566,7 +572,9 @@ const ActiveDescendant = () => {
     alignItems: "flex-start",
     onKeyDownCapture: reportKey
   }, /*#__PURE__*/_react.default.createElement(_.Flash, {
-    mb: 3
+    sx: {
+      mb: 3
+    }
   }, "This story demonstrates using the `aria-activedescendant` pattern for managing both a focused element and an active element. Below, you can focus the input box then use the up/down arrow keys to change the active descendant (dark blue outline)."), /*#__PURE__*/_react.default.createElement(_.Box, {
     position: "absolute",
     right: 5,

package/lib/sx.js

@@ -1,11 +1,23 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.merge = void 0;
-const css_1 = __importDefault(require("@styled-system/css"));
-const deepmerge_1 = __importDefault(require("deepmerge"));
-exports.merge = deepmerge_1.default;
-const sx = (props) => css_1.default(props.sx);
-exports.default = sx;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "merge", {
+  enumerable: true,
+  get: function () {
+    return _deepmerge.default;
+  }
+});
+exports.default = void 0;
+
+var _css = _interopRequireDefault(require("@styled-system/css"));
+
+var _deepmerge = _interopRequireDefault(require("deepmerge"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const sx = props => (0, _css.default)(props.sx);
+
+var _default = sx;
+exports.default = _default;