@openproject/primer-view-components 0.18.1 → 0.19.0-rc.850d7cdb

package/app/components/primer/beta/nav_list_group_element.d.ts

@@ -0,0 +1,19 @@
+export declare class NavListGroupElement extends HTMLElement {
+    #private;
+    showMoreItem: HTMLElement;
+    focusMarkers: HTMLElement[];
+    connectedCallback(): void;
+    get showMoreDisabled(): boolean;
+    set showMoreDisabled(value: boolean);
+    set currentPage(value: number);
+    get currentPage(): number;
+    get totalPages(): number;
+    get paginationSrc(): string;
+    private showMore;
+    private setShowMoreItemState;
+}
+declare global {
+    interface Window {
+        NavListGroupElement: typeof NavListGroupElement;
+    }
+}

package/app/components/primer/beta/nav_list_group_element.js

@@ -0,0 +1,108 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _NavListGroupElement_instances, _NavListGroupElement_parseHTML;
+import { controller, target, targets } from '@github/catalyst';
+let NavListGroupElement = class NavListGroupElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _NavListGroupElement_instances.add(this);
+    }
+    connectedCallback() {
+        this.setShowMoreItemState();
+    }
+    get showMoreDisabled() {
+        return this.showMoreItem.hasAttribute('aria-disabled');
+    }
+    set showMoreDisabled(value) {
+        if (value) {
+            this.showMoreItem.setAttribute('aria-disabled', 'true');
+        }
+        else {
+            this.showMoreItem.removeAttribute('aria-disabled');
+        }
+        this.showMoreItem.classList.toggle('disabled', value);
+    }
+    set currentPage(value) {
+        this.showMoreItem.setAttribute('data-current-page', value.toString());
+    }
+    get currentPage() {
+        return parseInt(this.showMoreItem.getAttribute('data-current-page')) || 1;
+    }
+    get totalPages() {
+        return parseInt(this.showMoreItem.getAttribute('data-total-pages')) || 1;
+    }
+    get paginationSrc() {
+        return this.showMoreItem.getAttribute('src') || '';
+    }
+    async showMore(e) {
+        var _a, _b;
+        e.preventDefault();
+        if (this.showMoreDisabled)
+            return;
+        this.showMoreDisabled = true;
+        let html;
+        try {
+            const paginationURL = new URL(this.paginationSrc, window.location.origin);
+            this.currentPage++;
+            paginationURL.searchParams.append('page', this.currentPage.toString());
+            const response = await fetch(paginationURL);
+            if (!response.ok)
+                return;
+            html = await response.text();
+            if (this.currentPage === this.totalPages) {
+                this.showMoreItem.hidden = true;
+            }
+        }
+        catch (err) {
+            // Ignore network errors
+            this.showMoreDisabled = false;
+            this.currentPage--;
+            return;
+        }
+        const fragment = __classPrivateFieldGet(this, _NavListGroupElement_instances, "m", _NavListGroupElement_parseHTML).call(this, document, html);
+        (_a = fragment === null || fragment === void 0 ? void 0 : fragment.querySelector('li > a')) === null || _a === void 0 ? void 0 : _a.setAttribute('data-targets', 'nav-list-group.focusMarkers');
+        const listId = e.target.closest('button').getAttribute('data-list-id');
+        const list = document.getElementById(listId);
+        list.append(fragment);
+        (_b = this.focusMarkers.pop()) === null || _b === void 0 ? void 0 : _b.focus();
+        this.showMoreDisabled = false;
+    }
+    setShowMoreItemState() {
+        if (!this.showMoreItem) {
+            return;
+        }
+        if (this.currentPage < this.totalPages) {
+            this.showMoreItem.hidden = false;
+        }
+        else {
+            this.showMoreItem.hidden = true;
+        }
+    }
+};
+_NavListGroupElement_instances = new WeakSet();
+_NavListGroupElement_parseHTML = function _NavListGroupElement_parseHTML(document, html) {
+    const template = document.createElement('template');
+    // eslint-disable-next-line github/no-inner-html
+    template.innerHTML = html;
+    return document.importNode(template.content, true);
+};
+__decorate([
+    target
+], NavListGroupElement.prototype, "showMoreItem", void 0);
+__decorate([
+    targets
+], NavListGroupElement.prototype, "focusMarkers", void 0);
+NavListGroupElement = __decorate([
+    controller
+], NavListGroupElement);
+export { NavListGroupElement };
+window.NavListGroupElement = NavListGroupElement;

package/app/components/primer/primer.d.ts

@@ -6,6 +6,7 @@ import './focus_group';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './beta/nav_list';
+import './beta/nav_list_group_element';
 import './alpha/segmented_control';
 import './alpha/toggle_switch';
 import './alpha/tool_tip';

package/app/components/primer/primer.js

@@ -6,6 +6,7 @@ import './focus_group';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './beta/nav_list';
+import './beta/nav_list_group_element';
 import './alpha/segmented_control';
 import './alpha/toggle_switch';
 import './alpha/tool_tip';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openproject/primer-view-components",
-  "version": "0.18.1",
+  "version": "0.19.0-rc.850d7cdb",
   "description": "ViewComponents of the Primer Design System for OpenProject",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@github/auto-check-element": "^5.2.0",
-    "@github/auto-complete-element": "^3.3.4",
+    "@github/auto-complete-element": "^3.6.0",
     "@github/catalyst": "^1.6.0",
     "@github/clipboard-copy-element": "^1.3.0",
     "@github/details-menu-element": "^1.0.12",
@@ -51,19 +51,19 @@
     "@github/include-fragment-element": "^6.1.1",
     "@github/relative-time-element": "^4.0.0",
     "@github/tab-container-element": "^3.1.2",
-    "@oddbird/popover-polyfill": "^0.3.2",
+    "@oddbird/popover-polyfill": "^0.3.6",
     "@primer/behaviors": "^1.3.4"
   },
   "devDependencies": {
-    "@changesets/changelog-github": "^0.4.6",
+    "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.24.1",
     "@github/axe-github": "^0.6.1",
     "@github/browserslist-config": "^1.0.0",
-    "@github/markdownlint-github": "^0.2.2",
+    "@github/markdownlint-github": "^0.6.0",
     "@github/prettier-config": "0.0.6",
     "@playwright/test": "^1.35.1",
-    "@primer/css": "21.0.9",
-    "@primer/primitives": "^7.14.0",
+    "@primer/css": "21.1.0",
+    "@primer/primitives": "7.15.4",
     "@primer/stylelint-config": "^12.7.2",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^8.3.3",
@@ -75,8 +75,8 @@
     "eslint": "^8.23.1",
     "eslint-plugin-custom-elements": "^0.0.6",
     "eslint-plugin-github": "^4.9.2",
-    "eslint-plugin-prettier": "^4.2.1",
-    "markdownlint-cli2": "^0.10.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "markdownlint-cli2": "^0.11.0",
     "mocha": "^10.0.0",
     "playwright": "^1.35.1",
     "postcss": "^8.4.16",

package/static/arguments.json

@@ -217,6 +217,12 @@
         "default": "`nil`",
         "description": "Item label. If no label is provided, content is used."
       },
+      {
+        "name": "item_id",
+        "type": "String",
+        "default": "`nil`",
+        "description": "An ID that will be attached to the item's `<li>` element as `data-item-id` for distinguishing between items, perhaps in JavaScript."
+      },
       {
         "name": "label_classes",
         "type": "String",
@@ -386,12 +392,97 @@
     ]
   },
   {
-    "component": "ActionMenu::List",
+    "component": "ActionMenu::Group",
     "status": "alpha",
     "a11y_reviewed": true,
+    "short_name": "ActionMenuGroup",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/group.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/group/default/",
+    "parameters": [
+      {
+        "name": "id",
+        "type": "String",
+        "default": "`self.class.generate_id`",
+        "description": "HTML ID value."
+      },
+      {
+        "name": "role",
+        "type": "Boolean",
+        "default": "`nil`",
+        "description": "ARIA role describing the function of the list. listbox and menu are a common values."
+      },
+      {
+        "name": "item_classes",
+        "type": "String",
+        "default": "`nil`",
+        "description": "Additional CSS classes to attach to items."
+      },
+      {
+        "name": "scheme",
+        "type": "Symbol",
+        "default": "`:full`",
+        "description": "One of `:full` or `:inset`. `inset` children are offset (vertically and horizontally) from list edges. `full` (default) children are flush (vertically and horizontally) with list edges."
+      },
+      {
+        "name": "show_dividers",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Display a divider above each item in the list when it does not follow a header or divider."
+      },
+      {
+        "name": "select_variant",
+        "type": "Symbol",
+        "default": "`:none`",
+        "description": "How items may be selected in the list. One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
+      },
+      {
+        "name": "form_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Allows an `ActionList` to act as a select list in multi- and single-select modes. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission. *NOTE*: Consider using an [ActionMenu](/components/alpha/actionmenu) instead of using this feature directly."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "ActionMenu::Heading",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "ActionMenuHeading",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/heading.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/heading/default/",
+    "parameters": [
+
+    ]
+  },
+  {
+    "component": "ActionMenu::List",
+    "status": "alpha",
+    "a11y_reviewed": false,
     "short_name": "ActionMenuList",
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/list.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/list/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "The arguments accepted by [ActionList](/components/alpha/actionlist)"
+      }
+    ]
+  },
+  {
+    "component": "ActionMenu::ListWrapper",
+    "status": "alpha",
+    "a11y_reviewed": true,
+    "short_name": "ActionMenuListWrapper",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/list_wrapper.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/list_wrapper/default/",
     "parameters": [
       {
         "name": "menu_id",

package/static/audited_at.json

@@ -8,7 +8,10 @@
   "Primer::Alpha::ActionList::Heading": "",
   "Primer::Alpha::ActionList::Item": "",
   "Primer::Alpha::ActionMenu": "",
-  "Primer::Alpha::ActionMenu::List": "2023-07-10",
+  "Primer::Alpha::ActionMenu::Group": "2023-07-10",
+  "Primer::Alpha::ActionMenu::Heading": "",
+  "Primer::Alpha::ActionMenu::List": "",
+  "Primer::Alpha::ActionMenu::ListWrapper": "2023-07-10",
   "Primer::Alpha::AutoComplete": "",
   "Primer::Alpha::AutoComplete::Item": "",
   "Primer::Alpha::Banner": "",

package/static/classes.json

@@ -191,6 +191,9 @@
   "Button--iconOnly": [
     "Primer::Beta::Button"
   ],
+  "Button--inactive": [
+    "Primer::Beta::Button"
+  ],
   "Button--invisible": [
     "Primer::Beta::Button"
   ],

package/static/constants.json

@@ -125,13 +125,20 @@
   "Primer::Alpha::ActionMenu": {
     "DEFAULT_PRELOAD": false,
     "DEFAULT_SELECT_VARIANT": "none",
+    "Group": "Primer::Alpha::ActionMenu::Group",
+    "Heading": "Primer::Alpha::ActionMenu::Heading",
     "List": "Primer::Alpha::ActionMenu::List",
+    "ListWrapper": "Primer::Alpha::ActionMenu::ListWrapper",
     "SELECT_VARIANT_OPTIONS": [
       "single",
       "multiple",
       "none"
     ]
   },
+  "Primer::Alpha::ActionMenu::Group": {
+  },
+  "Primer::Alpha::ActionMenu::Heading": {
+  },
   "Primer::Alpha::ActionMenu::List": {
     "DEFAULT_ITEM_TAG": "button",
     "ITEM_TAG_OPTIONS": [
@@ -140,6 +147,8 @@
       "button"
     ]
   },
+  "Primer::Alpha::ActionMenu::ListWrapper": {
+  },
   "Primer::Alpha::AutoComplete": {
     "Item": "Primer::Alpha::AutoComplete::Item"
   },