@primer/components 32.0.1-rc.c4c2c50a → 32.0.1

package/lib/SelectMenu/hooks/useKeyboardNav.js

@@ -1,85 +1,101 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
 // adapted from details-menu web component https://github.com/github/details-menu-element
 function useKeyboardNav(details, open, setOpen) {
-    const handleKeyDown = react_1.useCallback(event => {
-        const closeDetails = () => {
-            setOpen(false);
-            const summary = details.current.querySelector('summary');
-            if (summary)
-                summary.focus();
-        };
-        const openDetails = () => {
-            setOpen(true);
-        };
-        const focusItem = next => {
-            const options = Array.from(details.current.querySelectorAll('[role^="menuitem"]:not([hidden]):not([disabled]):not([aria-disabled="true"])'));
-            const selected = document.activeElement;
-            const index = options.indexOf(selected);
-            const found = next ? options[index + 1] : options[index - 1];
-            const def = next ? options[0] : options[options.length - 1];
-            return found || def;
-        };
-        const isMenuItem = el => {
-            const role = el.getAttribute('role');
-            return role === 'menuitem' || role === 'menuitemcheckbox' || role === 'menuitemradio';
-        };
-        if (!(event instanceof KeyboardEvent))
-            return;
-        const isSummaryFocused = event.target instanceof Element && event.target.tagName === 'SUMMARY';
-        switch (event.key) {
-            case 'Escape':
-                if (open) {
-                    closeDetails(details);
-                    event.preventDefault();
-                    event.stopPropagation();
-                }
-                break;
-            case 'ArrowDown':
-                {
-                    if (isSummaryFocused && !open) {
-                        openDetails(details);
-                    }
-                    const target = focusItem(true);
-                    if (target)
-                        target.focus();
-                    event.preventDefault();
-                }
-                break;
-            case 'ArrowUp':
-                {
-                    if (isSummaryFocused && !open) {
-                        openDetails();
-                    }
-                    const target = focusItem(false);
-                    if (target)
-                        target.focus();
-                    event.preventDefault();
-                }
-                break;
-            case ' ':
-            case 'Enter':
-                {
-                    const selected = document.activeElement;
-                    if (selected && isMenuItem(selected) && selected.closest('details') === details) {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        selected.click();
-                    }
-                }
-                break;
-            default:
+  const handleKeyDown = (0, _react.useCallback)(event => {
+    const closeDetails = () => {
+      setOpen(false);
+      const summary = details.current.querySelector('summary');
+      if (summary) summary.focus();
+    };
+
+    const openDetails = () => {
+      setOpen(true);
+    };
+
+    const focusItem = next => {
+      const options = Array.from(details.current.querySelectorAll('[role^="menuitem"]:not([hidden]):not([disabled]):not([aria-disabled="true"])'));
+      const selected = document.activeElement;
+      const index = options.indexOf(selected);
+      const found = next ? options[index + 1] : options[index - 1];
+      const def = next ? options[0] : options[options.length - 1];
+      return found || def;
+    };
+
+    const isMenuItem = el => {
+      const role = el.getAttribute('role');
+      return role === 'menuitem' || role === 'menuitemcheckbox' || role === 'menuitemradio';
+    };
+
+    if (!(event instanceof KeyboardEvent)) return;
+    const isSummaryFocused = event.target instanceof Element && event.target.tagName === 'SUMMARY';
+
+    switch (event.key) {
+      case 'Escape':
+        if (open) {
+          closeDetails(details);
+          event.preventDefault();
+          event.stopPropagation();
         }
-    }, [details, open, setOpen]);
-    react_1.useEffect(() => {
-        const current = details.current;
-        if (!current)
-            return;
-        current.addEventListener('keydown', handleKeyDown);
-        return () => {
-            current.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [details, handleKeyDown]);
+
+        break;
+
+      case 'ArrowDown':
+        {
+          if (isSummaryFocused && !open) {
+            openDetails(details);
+          }
+
+          const target = focusItem(true);
+          if (target) target.focus();
+          event.preventDefault();
+        }
+        break;
+
+      case 'ArrowUp':
+        {
+          if (isSummaryFocused && !open) {
+            openDetails();
+          }
+
+          const target = focusItem(false);
+          if (target) target.focus();
+          event.preventDefault();
+        }
+        break;
+
+      case ' ':
+      case 'Enter':
+        {
+          const selected = document.activeElement;
+
+          if (selected && isMenuItem(selected) && selected.closest('details') === details) {
+            event.preventDefault();
+            event.stopPropagation();
+            selected.click();
+          }
+        }
+        break;
+
+      default:
+    }
+  }, [details, open, setOpen]);
+  (0, _react.useEffect)(() => {
+    const current = details.current;
+    if (!current) return;
+    current.addEventListener('keydown', handleKeyDown);
+    return () => {
+      current.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [details, handleKeyDown]);
 }
-exports.default = useKeyboardNav;
+
+var _default = useKeyboardNav;
+exports.default = _default;

package/lib/SelectMenu/index.js

@@ -1,8 +1,15 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var SelectMenu_1 = require("./SelectMenu");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SelectMenu_1).default; } });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _SelectMenu.default;
+  }
+});
+
+var _SelectMenu = _interopRequireDefault(require("./SelectMenu"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/SelectPanel/index.js

@@ -1,5 +1,13 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectPanel = void 0;
-var SelectPanel_1 = require("./SelectPanel");
-Object.defineProperty(exports, "SelectPanel", { enumerable: true, get: function () { return SelectPanel_1.SelectPanel; } });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SelectPanel", {
+  enumerable: true,
+  get: function () {
+    return _SelectPanel.SelectPanel;
+  }
+});
+
+var _SelectPanel = require("./SelectPanel");

package/lib/Token/index.js

@@ -1,12 +1,31 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AvatarToken = exports.IssueLabelToken = exports.default = void 0;
-var Token_1 = require("./Token");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Token_1).default; } });
-var IssueLabelToken_1 = require("./IssueLabelToken");
-Object.defineProperty(exports, "IssueLabelToken", { enumerable: true, get: function () { return __importDefault(IssueLabelToken_1).default; } });
-var AvatarToken_1 = require("./AvatarToken");
-Object.defineProperty(exports, "AvatarToken", { enumerable: true, get: function () { return __importDefault(AvatarToken_1).default; } });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Token.default;
+  }
+});
+Object.defineProperty(exports, "IssueLabelToken", {
+  enumerable: true,
+  get: function () {
+    return _IssueLabelToken.default;
+  }
+});
+Object.defineProperty(exports, "AvatarToken", {
+  enumerable: true,
+  get: function () {
+    return _AvatarToken.default;
+  }
+});
+
+var _Token = _interopRequireDefault(require("./Token"));
+
+var _IssueLabelToken = _interopRequireDefault(require("./IssueLabelToken"));
+
+var _AvatarToken = _interopRequireDefault(require("./AvatarToken"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }