@mixtint/primer-view-components 0.84.5 → 0.86.2

package/app/components/primer/open_project/sub_header.css

@@ -4,14 +4,10 @@
     display: grid;
     grid-template-areas: "left middle right" "bottom bottom bottom";
     grid-template-columns: auto 1fr auto;
-    align-items: center;
+    align-items: baseline;
     margin-bottom: var(--base-size-16);
 }
 
-.SubHeader--expandedSearch {
-    grid-template-areas: "left left left" "bottom bottom bottom";
-}
-
 .SubHeader-rightPane {
     grid-area: right;
     display: flex;
@@ -22,6 +18,7 @@
 .SubHeader-middlePane {
     grid-area: middle;
     text-align: center;
+    white-space: nowrap;
 }
 
 .SubHeader-bottomPane {
@@ -32,6 +29,8 @@
     grid-area: left;
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
+    row-gap: var(--base-size-16);
     column-gap: 12px;
     width: 100%;
 
@@ -54,12 +53,20 @@
   display: none;
 }
 
-@media (max-width: 543.98px) {
+@media (max-width: 767.98px) {
     .SubHeader {
         grid-template-areas: "left right" "middle middle" "bottom bottom";
         grid-template-columns: 1fr auto;
     }
 
+    .SubHeader--expandedSearch {
+        grid-template-areas: "left left" "middle middle" "bottom bottom";
+    }
+
+    .SubHeader--expandedSearch .SubHeader-hiddenOnExpand {
+        display: none !important;
+    }
+
     .SubHeader--emptyLeftPane {
         grid-template-areas: "middle middle right" "bottom bottom bottom";
         grid-template-columns: auto 1fr auto;
@@ -76,6 +83,6 @@
     }
 
     .SubHeader-middlePane:has(> *) {
-        margin-top: var(--stack-gap-normal);
+        margin-top: var(--base-size-16);
     }
 }

package/app/components/primer/open_project/sub_header.css.json

@@ -2,7 +2,6 @@
   "name": "open_project/sub_header",
   "selectors": [
     ".SubHeader",
-    ".SubHeader--expandedSearch",
     ".SubHeader-rightPane",
     ".SubHeader-middlePane",
     ".SubHeader-bottomPane",
@@ -10,6 +9,8 @@
     ":is(.SubHeader-leftPane [class*='FormControl-input-width--']):not(.FormControl-input-width--auto)",
     ".SubHeader-filterContainer",
     ".SubHeader-filterInput_hiddenClearButton + .FormControl-input-trailingAction",
+    ".SubHeader--expandedSearch",
+    ".SubHeader--expandedSearch .SubHeader-hiddenOnExpand",
     ".SubHeader--emptyLeftPane",
     ".SubHeader--emptyLeftPane .SubHeader-middlePane",
     ".SubHeader-middlePane:has(> *)"

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

@@ -1,7 +1,7 @@
 declare class SubHeaderElement extends HTMLElement {
     filterInput: HTMLInputElement;
-    hiddenItemsOnExpandedFilter: HTMLElement[];
     shownItemsOnExpandedFilter: HTMLElement[];
+    filterExpandButton: HTMLElement[];
     connectedCallback(): void;
     setupFilterInputClearButton(): void;
     toggleFilterInputClearButton(): void;

package/app/components/primer/open_project/sub_header_element.js

@@ -23,17 +23,17 @@ let SubHeaderElement = class SubHeaderElement extends HTMLElement {
         }
     }
     expandFilterInput() {
-        for (const item of this.hiddenItemsOnExpandedFilter) {
-            item.classList.add('d-none');
-        }
         for (const item of this.shownItemsOnExpandedFilter) {
             item.classList.remove('d-none');
         }
+        for (const item of this.filterExpandButton) {
+            item.classList.add('d-none');
+        }
         this.classList.add('SubHeader--expandedSearch');
         this.filterInput.focus();
     }
     collapseFilterInput() {
-        for (const item of this.hiddenItemsOnExpandedFilter) {
+        for (const item of this.filterExpandButton) {
             item.classList.remove('d-none');
         }
         for (const item of this.shownItemsOnExpandedFilter) {
@@ -63,10 +63,10 @@ __decorate([
 ], SubHeaderElement.prototype, "filterInput", void 0);
 __decorate([
     targets
-], SubHeaderElement.prototype, "hiddenItemsOnExpandedFilter", void 0);
+], SubHeaderElement.prototype, "shownItemsOnExpandedFilter", void 0);
 __decorate([
     targets
-], SubHeaderElement.prototype, "shownItemsOnExpandedFilter", void 0);
+], SubHeaderElement.prototype, "filterExpandButton", void 0);
 SubHeaderElement = __decorate([
     controller
 ], SubHeaderElement);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mixtint/primer-view-components",
-  "version": "0.84.5",
+  "version": "0.86.2",
   "publishConfig": {
     "access": "public"
   },
@@ -57,7 +57,7 @@
     "@github/remote-input-element": "^0.4.0",
     "@github/tab-container-element": "^3.4.0",
     "@oddbird/popover-polyfill": "^0.5.2",
-    "@primer/behaviors": "^1.10.2",
+    "@primer/behaviors": "^1.10.3",
     "@primer/live-region-element": "^0.8.0"
   },
   "peerDependencies": {
@@ -70,35 +70,35 @@
     "@github/browserslist-config": "^1.0.0",
     "@github/markdownlint-github": "^0.8.0",
     "@github/prettier-config": "0.0.6",
-    "@playwright/test": "^1.59.1",
+    "@playwright/test": "^1.60.0",
     "@primer/css": "22.1.1",
-    "@primer/primitives": "^11.7.1",
+    "@primer/primitives": "^11.9.0",
     "@primer/stylelint-config": "^13.6.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^8.5.0",
     "axe-core": "^4.11.4",
     "chokidar-cli": "^3.0.0",
     "css-what": "^7.0.0",
-    "cssnano": "^7.1.7",
+    "cssnano": "^7.1.9",
     "eslint": "^9.39.4",
     "eslint-plugin-github": "^6.0.0",
     "glob": "^11.1.0",
     "markdownlint-cli2": "^0.22.1",
-    "mocha": "^11.7.5",
-    "playwright": "^1.59.1",
-    "postcss": "^8.5.12",
+    "mocha": "^11.7.6",
+    "playwright": "^1.60.0",
+    "postcss": "^8.5.15",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",
     "postcss-mixins": "^12.1.2",
-    "postcss-preset-env": "^11.2.1",
+    "postcss-preset-env": "^11.3.0",
     "prettier": "^3.8.3",
     "rollup": "^2.80.0",
     "rollup-plugin-terser": "^7.0.2",
     "stylelint-actions-formatters": "^16.3.1",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "vite": "^8.0.10",
-    "vite-plugin-ruby": "^5.2.1"
+    "vite": "^8.0.14",
+    "vite-plugin-ruby": "^5.2.2"
   },
   "prettier": "@github/prettier-config",
   "browserslist": "extends @github/browserslist-config"

package/static/arguments.json

@@ -3757,6 +3757,22 @@
       }
     ]
   },
+  {
+    "component": "TreeView::TrailingAction",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "TreeViewTrailingAction",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/trailing_action.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/trailing_action/default/",
+    "parameters": [
+      {
+        "name": "action",
+        "type": "ViewComponent::Base",
+        "default": "N/A",
+        "description": "A component or other renderable to use as the action button etc."
+      }
+    ]
+  },
   {
     "component": "TreeView::Visual",
     "status": "alpha",
@@ -6151,6 +6167,12 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/filterable_tree_view.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/filterable_tree_view/default/",
     "parameters": [
+      {
+        "name": "src",
+        "type": "String",
+        "default": "`nil`",
+        "description": "URL of the server endpoint that returns a filtered `<tree-view>` HTML fragment. When set, activates async (server-side) filtering mode. See \"Async loading strategy\" above."
+      },
       {
         "name": "tree_view_arguments",
         "type": "Hash",
@@ -6473,6 +6495,12 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/sub_header.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/sub_header/default/",
     "parameters": [
+      {
+        "name": "collapsed_search",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "When true, the search bar starts collapsed as an icon button on all screen sizes. Clicking expands it."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -6571,6 +6599,15 @@
       }
     ]
   },
+  {
+    "component": "OpenProject::SubHeader::QuickFilter",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectSubHeaderQuickFilter",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/sub_header/quick_filter.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/sub_header/quick_filter/default/",
+    "parameters": []
+  },
   {
     "component": "OpenProject::SubHeader::SegmentedControl",
     "status": "open_project",

package/static/audited_at.json

@@ -84,6 +84,7 @@
   "Primer::Alpha::TreeView::SubTree": "",
   "Primer::Alpha::TreeView::SubTreeContainer": "",
   "Primer::Alpha::TreeView::SubTreeNode": "",
+  "Primer::Alpha::TreeView::TrailingAction": "",
   "Primer::Alpha::TreeView::Visual": "",
   "Primer::Alpha::UnderlineNav": "",
   "Primer::Alpha::UnderlinePanels": "",
@@ -172,6 +173,7 @@
   "Primer::OpenProject::SubHeader::Button": "",
   "Primer::OpenProject::SubHeader::ButtonGroup": "",
   "Primer::OpenProject::SubHeader::Menu": "",
+  "Primer::OpenProject::SubHeader::QuickFilter": "",
   "Primer::OpenProject::SubHeader::SegmentedControl": "2023-02-01",
   "Primer::OpenProject::ZenModeButton": "",
   "Primer::Tooltip": "",

package/static/classes.json

@@ -277,6 +277,15 @@
   "DragHandle": [
     "Primer::OpenProject::DragHandle"
   ],
+  "FilterableTreeViewLayout": [
+    "Primer::OpenProject::FilterableTreeView"
+  ],
+  "FilterableTreeViewLoadingSkeleton": [
+    "Primer::OpenProject::FilterableTreeView"
+  ],
+  "FilterableTreeViewTreeContainer": [
+    "Primer::OpenProject::FilterableTreeView"
+  ],
   "FormControl": [
     "Primer::Alpha::TextField"
   ],

package/static/constants.json

@@ -852,6 +852,7 @@
     "SubTree": "Primer::Alpha::TreeView::SubTree",
     "SubTreeContainer": "Primer::Alpha::TreeView::SubTreeContainer",
     "SubTreeNode": "Primer::Alpha::TreeView::SubTreeNode",
+    "TrailingAction": "Primer::Alpha::TreeView::TrailingAction",
     "Visual": "Primer::Alpha::TreeView::Visual"
   },
   "Primer::Alpha::TreeView::Icon": {
@@ -918,6 +919,9 @@
       "descendants"
     ]
   },
+  "Primer::Alpha::TreeView::TrailingAction": {
+    "GeneratedSlotMethods": "Primer::Alpha::TreeView::TrailingAction::GeneratedSlotMethods"
+  },
   "Primer::Alpha::TreeView::Visual": {
     "GeneratedSlotMethods": "Primer::Alpha::TreeView::Visual::GeneratedSlotMethods"
   },
@@ -1820,6 +1824,11 @@
       "label": "No results"
     },
     "GeneratedSlotMethods": "Primer::OpenProject::FilterableTreeView::GeneratedSlotMethods",
+    "SUPPORTED_SELECT_VARIANTS": [
+      "multiple",
+      "single",
+      "none"
+    ],
     "SubTree": "Primer::OpenProject::FilterableTreeView::SubTree"
   },
   "Primer::OpenProject::FilterableTreeView::SubTree": {
@@ -1975,16 +1984,19 @@
     "Button": "Primer::OpenProject::SubHeader::Button",
     "ButtonGroup": "Primer::OpenProject::SubHeader::ButtonGroup",
     "DESKTOP_ACTIONS_DISPLAY": [
+      "none",
       "none",
       "flex"
     ],
+    "FILTER_EXPAND_BUTTON_TARGET_SELECTOR": "sub-header.filterExpandButton",
     "GeneratedSlotMethods": "Primer::OpenProject::SubHeader::GeneratedSlotMethods",
-    "HIDDEN_FILTER_TARGET_SELECTOR": "sub-header.hiddenItemsOnExpandedFilter",
     "MOBILE_ACTIONS_DISPLAY": [
+      "flex",
       "flex",
       "none"
     ],
     "Menu": "Primer::OpenProject::SubHeader::Menu",
+    "QuickFilter": "Primer::OpenProject::SubHeader::QuickFilter",
     "SHOWN_FILTER_TARGET_SELECTOR": "sub-header.shownItemsOnExpandedFilter",
     "SegmentedControl": "Primer::OpenProject::SubHeader::SegmentedControl"
   },
@@ -1997,6 +2009,9 @@
   "Primer::OpenProject::SubHeader::Menu": {
     "GeneratedSlotMethods": "Primer::OpenProject::SubHeader::Menu::GeneratedSlotMethods"
   },
+  "Primer::OpenProject::SubHeader::QuickFilter": {
+    "GeneratedSlotMethods": "Primer::OpenProject::SubHeader::QuickFilter::GeneratedSlotMethods"
+  },
   "Primer::OpenProject::SubHeader::SegmentedControl": {
     "GeneratedSlotMethods": "Primer::OpenProject::SubHeader::SegmentedControl::GeneratedSlotMethods"
   },