@primer/components 0.0.0-2021101705729 → 0.0.0-2021101717425

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @primer/components
 
-## 0.0.0-2021101705729
+## 0.0.0-2021101717425
 
 ### Minor Changes
 

package/lib/ActionList/index.js

@@ -1,18 +1,29 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.ActionList = void 0;
-const List_1 = require("./List");
-const Group_1 = require("./Group");
-const Item_1 = require("./Item");
-const Divider_1 = require("./Divider");
+
+var _List = require("./List");
+
+var _Group = require("./Group");
+
+var _Item = require("./Item");
+
+var _Divider = require("./Divider");
+
 /**
  * Collection of list-related components.
  */
-exports.ActionList = Object.assign(List_1.List, {
-    /** Collects related `Items` in an `ActionList`. */
-    Group: Group_1.Group,
-    /** An actionable or selectable `Item` with an optional icon and description. */
-    Item: Item_1.Item,
-    /** Visually separates `Item`s or `Group`s in an `ActionList`. */
-    Divider: Divider_1.Divider
+const ActionList = Object.assign(_List.List, {
+  /** Collects related `Items` in an `ActionList`. */
+  Group: _Group.Group,
+
+  /** An actionable or selectable `Item` with an optional icon and description. */
+  Item: _Item.Item,
+
+  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+  Divider: _Divider.Divider
 });
+exports.ActionList = ActionList;

package/lib/ActionList2/index.js

@@ -1,29 +1,47 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.ActionList = void 0;
-const List_1 = require("./List");
-const Group_1 = require("./Group");
-const Item_1 = require("./Item");
-const LinkItem_1 = require("./LinkItem");
-const Divider_1 = require("./Divider");
-const Description_1 = require("./Description");
-const Visuals_1 = require("./Visuals");
+
+var _List = require("./List");
+
+var _Group = require("./Group");
+
+var _Item = require("./Item");
+
+var _LinkItem = require("./LinkItem");
+
+var _Divider = require("./Divider");
+
+var _Description = require("./Description");
+
+var _Visuals = require("./Visuals");
+
 /**
  * Collection of list-related components.
  */
-exports.ActionList = Object.assign(List_1.List, {
-    /** Collects related `Items` in an `ActionList`. */
-    Group: Group_1.Group,
-    /** An actionable or selectable `Item` */
-    Item: Item_1.Item,
-    /** A `Item` that renders a full-size anchor inside ListItem */
-    LinkItem: LinkItem_1.LinkItem,
-    /** Visually separates `Item`s or `Group`s in an `ActionList`. */
-    Divider: Divider_1.Divider,
-    /** Secondary text which provides additional information about an `Item`. */
-    Description: Description_1.Description,
-    /** Icon (or similar) positioned before `Item` text. */
-    LeadingVisual: Visuals_1.LeadingVisual,
-    /** Icon (or similar) positioned after `Item` text. */
-    TrailingVisual: Visuals_1.TrailingVisual
+const ActionList = Object.assign(_List.List, {
+  /** Collects related `Items` in an `ActionList`. */
+  Group: _Group.Group,
+
+  /** An actionable or selectable `Item` */
+  Item: _Item.Item,
+
+  /** A `Item` that renders a full-size anchor inside ListItem */
+  LinkItem: _LinkItem.LinkItem,
+
+  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+  Divider: _Divider.Divider,
+
+  /** Secondary text which provides additional information about an `Item`. */
+  Description: _Description.Description,
+
+  /** Icon (or similar) positioned before `Item` text. */
+  LeadingVisual: _Visuals.LeadingVisual,
+
+  /** Icon (or similar) positioned after `Item` text. */
+  TrailingVisual: _Visuals.TrailingVisual
 });
+exports.ActionList = ActionList;

package/lib/AnchoredOverlay/index.js

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

package/lib/Autocomplete/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 Autocomplete_1 = require("./Autocomplete");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Autocomplete_1).default; } });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Autocomplete.default;
+  }
+});
+
+var _Autocomplete = _interopRequireDefault(require("./Autocomplete"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/Button/index.js

@@ -1,22 +1,71 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonClose = exports.ButtonTableList = exports.ButtonInvisible = exports.ButtonPrimary = exports.ButtonOutline = exports.ButtonGroup = exports.ButtonDanger = exports.default = void 0;
-var Button_1 = require("./Button");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
-var ButtonDanger_1 = require("./ButtonDanger");
-Object.defineProperty(exports, "ButtonDanger", { enumerable: true, get: function () { return __importDefault(ButtonDanger_1).default; } });
-var ButtonGroup_1 = require("./ButtonGroup");
-Object.defineProperty(exports, "ButtonGroup", { enumerable: true, get: function () { return __importDefault(ButtonGroup_1).default; } });
-var ButtonOutline_1 = require("./ButtonOutline");
-Object.defineProperty(exports, "ButtonOutline", { enumerable: true, get: function () { return __importDefault(ButtonOutline_1).default; } });
-var ButtonPrimary_1 = require("./ButtonPrimary");
-Object.defineProperty(exports, "ButtonPrimary", { enumerable: true, get: function () { return __importDefault(ButtonPrimary_1).default; } });
-var ButtonInvisible_1 = require("./ButtonInvisible");
-Object.defineProperty(exports, "ButtonInvisible", { enumerable: true, get: function () { return __importDefault(ButtonInvisible_1).default; } });
-var ButtonTableList_1 = require("./ButtonTableList");
-Object.defineProperty(exports, "ButtonTableList", { enumerable: true, get: function () { return __importDefault(ButtonTableList_1).default; } });
-var ButtonClose_1 = require("./ButtonClose");
-Object.defineProperty(exports, "ButtonClose", { enumerable: true, get: function () { return __importDefault(ButtonClose_1).default; } });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Button.default;
+  }
+});
+Object.defineProperty(exports, "ButtonDanger", {
+  enumerable: true,
+  get: function () {
+    return _ButtonDanger.default;
+  }
+});
+Object.defineProperty(exports, "ButtonGroup", {
+  enumerable: true,
+  get: function () {
+    return _ButtonGroup.default;
+  }
+});
+Object.defineProperty(exports, "ButtonOutline", {
+  enumerable: true,
+  get: function () {
+    return _ButtonOutline.default;
+  }
+});
+Object.defineProperty(exports, "ButtonPrimary", {
+  enumerable: true,
+  get: function () {
+    return _ButtonPrimary.default;
+  }
+});
+Object.defineProperty(exports, "ButtonInvisible", {
+  enumerable: true,
+  get: function () {
+    return _ButtonInvisible.default;
+  }
+});
+Object.defineProperty(exports, "ButtonTableList", {
+  enumerable: true,
+  get: function () {
+    return _ButtonTableList.default;
+  }
+});
+Object.defineProperty(exports, "ButtonClose", {
+  enumerable: true,
+  get: function () {
+    return _ButtonClose.default;
+  }
+});
+
+var _Button = _interopRequireDefault(require("./Button"));
+
+var _ButtonDanger = _interopRequireDefault(require("./ButtonDanger"));
+
+var _ButtonGroup = _interopRequireDefault(require("./ButtonGroup"));
+
+var _ButtonOutline = _interopRequireDefault(require("./ButtonOutline"));
+
+var _ButtonPrimary = _interopRequireDefault(require("./ButtonPrimary"));
+
+var _ButtonInvisible = _interopRequireDefault(require("./ButtonInvisible"));
+
+var _ButtonTableList = _interopRequireDefault(require("./ButtonTableList"));
+
+var _ButtonClose = _interopRequireDefault(require("./ButtonClose"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/DropdownMenu/index.js

@@ -1,7 +1,21 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownButton = exports.DropdownMenu = void 0;
-var DropdownMenu_1 = require("./DropdownMenu");
-Object.defineProperty(exports, "DropdownMenu", { enumerable: true, get: function () { return DropdownMenu_1.DropdownMenu; } });
-var DropdownButton_1 = require("./DropdownButton");
-Object.defineProperty(exports, "DropdownButton", { enumerable: true, get: function () { return DropdownButton_1.DropdownButton; } });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DropdownMenu", {
+  enumerable: true,
+  get: function () {
+    return _DropdownMenu.DropdownMenu;
+  }
+});
+Object.defineProperty(exports, "DropdownButton", {
+  enumerable: true,
+  get: function () {
+    return _DropdownButton.DropdownButton;
+  }
+});
+
+var _DropdownMenu = require("./DropdownMenu");
+
+var _DropdownButton = require("./DropdownButton");

package/lib/DropdownStyles.js

@@ -1,9 +1,15 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const constants_1 = require("./constants");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _constants = require("./constants");
+
 const getDirectionStyles = (theme, direction) => {
-    const map = {
-        w: `
+  const map = {
+    w: `
       top: 0;
       right: 100%;
       left: auto;
@@ -16,7 +22,7 @@ const getDirectionStyles = (theme, direction) => {
         right: -16px;
         left: auto;
         border-color: transparent;
-        border-left-color: ${constants_1.get('colors.border.default')(theme)};
+        border-left-color: ${(0, _constants.get)('colors.border.default')(theme)};
       }
 
       &::after {
@@ -24,10 +30,10 @@ const getDirectionStyles = (theme, direction) => {
         right: -14px;
         left: auto;
         border-color: transparent;
-        border-left-color: ${constants_1.get('colors.border.default')(theme)};
+        border-left-color: ${(0, _constants.get)('colors.border.default')(theme)};
       }
     `,
-        e: `
+    e: `
       top: 0;
       left: 100%;
       width: auto;
@@ -38,17 +44,17 @@ const getDirectionStyles = (theme, direction) => {
         top: 10px;
         left: -16px;
         border-color: transparent;
-        border-right-color: ${constants_1.get('colors.border.default')(theme)};
+        border-right-color: ${(0, _constants.get)('colors.border.default')(theme)};
       }
 
       &::after {
         top: 11px;
         left: -14px;
         border-color: transparent;
-        border-right-color: ${constants_1.get('colors.border.default')(theme)};
+        border-right-color: ${(0, _constants.get)('colors.border.default')(theme)};
       }
     `,
-        ne: `
+    ne: `
       top: auto;
       bottom: 100%;
       left: 0;
@@ -63,7 +69,7 @@ const getDirectionStyles = (theme, direction) => {
       &::before {
         bottom: -8px;
         left: 9px;
-        border-top: 8px solid ${constants_1.get('colors.border.default')(theme)};
+        border-top: 8px solid ${(0, _constants.get)('colors.border.default')(theme)};
         border-bottom: 0;
         border-left: 8px solid transparent;
       }
@@ -71,13 +77,13 @@ const getDirectionStyles = (theme, direction) => {
       &::after {
         bottom: -7px;
         left: 10px;
-        border-top: 7px solid ${constants_1.get('colors.border.default')(theme)};
+        border-top: 7px solid ${(0, _constants.get)('colors.border.default')(theme)};
         border-right: 7px solid transparent;
         border-bottom: 0;
         border-left: 7px solid transparent;
       }
     `,
-        s: `
+    s: `
       right: 50%;
       left: auto;
       transform: translateX(50%);
@@ -94,7 +100,7 @@ const getDirectionStyles = (theme, direction) => {
         transform: translateX(50%);
       }
     `,
-        sw: `
+    sw: `
       right: 0;
       left: auto;
 
@@ -110,7 +116,7 @@ const getDirectionStyles = (theme, direction) => {
         left: auto;
       }
     `,
-        se: `
+    se: `
       &::before {
         top: -16px;
         left: 9px;
@@ -121,7 +127,9 @@ const getDirectionStyles = (theme, direction) => {
         left: 10px;
       }
     `
-    };
-    return map[direction];
+  };
+  return map[direction];
 };
-exports.default = getDirectionStyles;
+
+var _default = getDirectionStyles;
+exports.default = _default;

package/lib/FilteredActionList/index.js

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

package/lib/Pagination/index.js

@@ -1,7 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const Pagination_1 = __importDefault(require("./Pagination"));
-exports.default = Pagination_1.default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Pagination = _interopRequireDefault(require("./Pagination"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _Pagination.default;
+exports.default = _default;

package/lib/Portal/index.js

@@ -1,6 +1,17 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.registerPortalRoot = void 0;
-const Portal_1 = require("./Portal");
-Object.defineProperty(exports, "registerPortalRoot", { enumerable: true, get: function () { return Portal_1.registerPortalRoot; } });
-exports.default = Portal_1.Portal;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "registerPortalRoot", {
+  enumerable: true,
+  get: function () {
+    return _Portal.registerPortalRoot;
+  }
+});
+exports.default = void 0;
+
+var _Portal = require("./Portal");
+
+var _default = _Portal.Portal;
+exports.default = _default;

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;