@primer/view-components 0.27.1-rc.f35adaba → 0.28.0-rc.4d641547

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

@@ -0,0 +1,8 @@
+export declare function announceFromElement(el: HTMLElement, options?: {
+    assertive?: boolean;
+    element?: HTMLElement;
+}): void;
+export declare function announce(message: string, options?: {
+    assertive?: boolean;
+    element?: HTMLElement;
+}): void;

package/app/components/primer/aria_live.js

@@ -0,0 +1,38 @@
+const safeDocument = typeof document === 'undefined' ? undefined : document;
+// Announce an element's text to the screen reader.
+export function announceFromElement(el, options) {
+    announce(getTextContent(el), options);
+}
+// Announce message update to screen reader.
+// Note: Use caution when using this function while a dialog is active.
+// If the message is updated while the dialog is open, the screen reader may not announce the live region.
+export function announce(message, options) {
+    const { assertive, element } = options ?? {};
+    setContainerContent(message, assertive, element);
+}
+// Set aria-live container to message.
+function setContainerContent(message, assertive, element) {
+    const getQuerySelector = () => {
+        return assertive ? '#js-global-screen-reader-notice-assertive' : '#js-global-screen-reader-notice';
+    };
+    const container = element ?? safeDocument?.querySelector(getQuerySelector());
+    if (!container)
+        return;
+    if (container.textContent === message) {
+        /* This is a hack due to the way the aria live API works.
+        A screen reader will not read a live region again
+        if the text is the same. Adding a space character tells
+        the browser that the live region has updated,
+        which will cause it to read again, but with no audible difference. */
+        container.textContent = `${message}\u00A0`;
+    }
+    else {
+        container.textContent = message;
+    }
+}
+// Gets the trimmed text content of an element.
+function getTextContent(el) {
+    // innerText does not contain hidden text
+    /* eslint-disable-next-line github/no-innerText */
+    return (el.getAttribute('aria-label') || el.innerText || '').trim();
+}

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

@@ -1,4 +1,5 @@
 import '@github/include-fragment-element';
+import '@github/remote-input-element';
 import './alpha/action_list';
 import './alpha/action_bar_element';
 import './alpha/dropdown';
@@ -6,6 +7,8 @@ import './anchored_position';
 import './dialog_helper';
 import './focus_group';
 import './scrollable_region';
+import './aria_live';
+import './shared_events';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './beta/nav_list';
@@ -22,3 +25,4 @@ import '../../../lib/primer/forms/primer_multi_input';
 import '../../../lib/primer/forms/primer_text_field';
 import '../../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
+import './alpha/select_panel_element';

package/app/components/primer/primer.js

@@ -1,4 +1,5 @@
 import '@github/include-fragment-element';
+import '@github/remote-input-element';
 import './alpha/action_list';
 import './alpha/action_bar_element';
 import './alpha/dropdown';
@@ -6,6 +7,8 @@ import './anchored_position';
 import './dialog_helper';
 import './focus_group';
 import './scrollable_region';
+import './aria_live';
+import './shared_events';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './beta/nav_list';
@@ -22,3 +25,4 @@ import '../../../lib/primer/forms/primer_multi_input';
 import '../../../lib/primer/forms/primer_text_field';
 import '../../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
+import './alpha/select_panel_element';

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

@@ -0,0 +1,9 @@
+export type ItemActivatedEvent = {
+    item: Element;
+    checked: boolean;
+};
+declare global {
+    interface HTMLElementEventMap {
+        itemActivated: CustomEvent<ItemActivatedEvent>;
+    }
+}

package/app/components/primer/shared_events.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.27.1-rc.f35adaba",
+  "version": "0.28.0-rc.4d641547",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -50,6 +50,7 @@
     "@github/image-crop-element": "^5.0.0",
     "@github/include-fragment-element": "^6.1.1",
     "@github/relative-time-element": "^4.0.0",
+    "@github/remote-input-element": "^0.4.0",
     "@github/tab-container-element": "^3.1.2",
     "@oddbird/popover-polyfill": "^0.4.0",
     "@primer/behaviors": "^1.3.4"

package/static/arguments.json

@@ -2352,6 +2352,124 @@
       }
     ]
   },
+  {
+    "component": "SelectPanel",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "SelectPanel",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/select_panel.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/select_panel/default/",
+    "parameters": [
+      {
+        "name": "src",
+        "type": "String",
+        "default": "`nil`",
+        "description": "The URL to fetch search results from."
+      },
+      {
+        "name": "title",
+        "type": "String",
+        "default": "`\"Menu\"`",
+        "description": "The title that appears at the top of the panel."
+      },
+      {
+        "name": "id",
+        "type": "String",
+        "default": "`self.class.generate_id`",
+        "description": "The unique ID of the panel."
+      },
+      {
+        "name": "size",
+        "type": "Symbol",
+        "default": "`:small`",
+        "description": "The size of the panel. One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`."
+      },
+      {
+        "name": "select_variant",
+        "type": "Symbol",
+        "default": "`:single`",
+        "description": "One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
+      },
+      {
+        "name": "fetch_strategy",
+        "type": "Symbol",
+        "default": "`:remote`",
+        "description": "One of `:eventually_local`, `:local`, or `:remote`."
+      },
+      {
+        "name": "no_results_label",
+        "type": "String",
+        "default": "`\"No results found\"`",
+        "description": "The label to display when no results are found."
+      },
+      {
+        "name": "preload",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether to preload search results when the page loads. If this option is false, results are loaded when the panel is opened."
+      },
+      {
+        "name": "dynamic_label",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether or not to display the text of the currently selected item in the show button."
+      },
+      {
+        "name": "dynamic_label_prefix",
+        "type": "String",
+        "default": "`nil`",
+        "description": "If provided, the prefix is prepended to the dynamic label and displayed in the show button."
+      },
+      {
+        "name": "dynamic_aria_label_prefix",
+        "type": "String",
+        "default": "`nil`",
+        "description": "If provided, the prefix is prepended to the dynamic label and set as the value of the `aria-label` attribute on the show button."
+      },
+      {
+        "name": "body_id",
+        "type": "String",
+        "default": "`nil`",
+        "description": "The unique ID of the panel body. If not provided, the body ID will be set to the panel ID with a \"-body\" suffix."
+      },
+      {
+        "name": "list_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Arguments to pass to the underlying [ActionList](/components/alpha/actionlist) component. Only has an effect for the local fetch strategy."
+      },
+      {
+        "name": "form_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Form arguments to pass to the underlying [ActionList](/components/alpha/actionlist) component. Only has an effect for the local fetch strategy."
+      },
+      {
+        "name": "show_filter",
+        "type": "Boolean",
+        "default": "`true`",
+        "description": "Whether or not to show the filter input."
+      },
+      {
+        "name": "open_on_load",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Open the panel when the page loads."
+      },
+      {
+        "name": "anchor_align",
+        "type": "Symbol",
+        "default": "`:start`",
+        "description": "The anchor alignment of the Overlay. One of `:center`, `:end`, or `:start`."
+      },
+      {
+        "name": "anchor_side",
+        "type": "Symbol",
+        "default": "`:outside_bottom`",
+        "description": "The side to anchor the Overlay to. One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
+      }
+    ]
+  },
   {
     "component": "SubmitButton",
     "status": "alpha",

package/static/audited_at.json

@@ -52,6 +52,7 @@
   "Primer::Alpha::SegmentedControl": "2023-02-01",
   "Primer::Alpha::SegmentedControl::Item": "2023-02-01",
   "Primer::Alpha::Select": "",
+  "Primer::Alpha::SelectPanel": "",
   "Primer::Alpha::SubmitButton": "",
   "Primer::Alpha::TabContainer": "",
   "Primer::Alpha::TabNav": "",

package/static/constants.json

@@ -597,6 +597,22 @@
   },
   "Primer::Alpha::Select": {
   },
+  "Primer::Alpha::SelectPanel": {
+    "DEFAULT_FETCH_STRATEGY": "remote",
+    "DEFAULT_PRELOAD": false,
+    "DEFAULT_SELECT_VARIANT": "single",
+    "FETCH_STRATEGIES": [
+      "remote",
+      "eventually_local",
+      "local"
+    ],
+    "ItemList": "Primer::Alpha::ActionList",
+    "SELECT_VARIANT_OPTIONS": [
+      "single",
+      "multiple",
+      "none"
+    ]
+  },
   "Primer::Alpha::SubmitButton": {
   },
   "Primer::Alpha::TabContainer": {