@primer/view-components 0.35.0-rc.3e3b8771 → 0.35.0-rc.42cc0f9a

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

@@ -0,0 +1,27 @@
+import '@github/include-fragment-element';
+import '@github/remote-input-element';
+import './alpha/action_list';
+import './alpha/action_bar_element';
+import './alpha/dropdown';
+import './anchored_position';
+import './dialog_helper';
+import './focus_group';
+import './scrollable_region';
+import './aria_live';
+import './shared_events';
+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';
+import './alpha/x_banner';
+import './beta/auto_complete/auto_complete';
+import './beta/clipboard_copy';
+import './beta/relative_time';
+import './alpha/tab_container';
+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

@@ -9,7 +9,6 @@ import './focus_group';
 import './scrollable_region';
 import './aria_live';
 import './shared_events';
-import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './beta/nav_list';
 import './beta/nav_list_group_element';

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

@@ -0,0 +1,13 @@
+export declare class ScrollableRegionElement extends HTMLElement {
+    hasOverflow: boolean;
+    labelledBy: string;
+    observer: ResizeObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+}
+declare global {
+    interface Window {
+        ScrollableRegionElement: typeof ScrollableRegionElement;
+    }
+}

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

@@ -0,0 +1,11 @@
+export type ItemActivatedEvent = {
+    item: Element;
+    checked: boolean;
+    value: string | null;
+};
+declare global {
+    interface HTMLElementEventMap {
+        itemActivated: CustomEvent<ItemActivatedEvent>;
+        beforeItemActivated: CustomEvent<ItemActivatedEvent>;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.35.0-rc.3e3b8771",
+  "version": "0.35.0-rc.42cc0f9a",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -27,16 +27,14 @@
     "app/components/primer/**/*.css.json",
     "app/components/primer/**/*.d.ts",
     "app/lib/primer/forms/**/*.js",
-    "app/lib/primer/forms/**/*.d.ts",
-    "lib/primer/forms/**/*.js",
-    "lib/primer/forms/**/*.d.ts"
+    "app/lib/primer/forms/**/*.d.ts"
   ],
   "scripts": {
     "clean": "git clean -fdX -- app/",
     "prepare": "script/build-assets",
     "lint": "npm run lint:stylelint && npm run lint:eslint",
-    "lint:stylelint": "stylelint 'app/components/**/*.pcss'",
-    "lint:stylelint:fix": "stylelint 'app/components/**/*.pcss' --fix",
+    "lint:stylelint": "stylelint --rd -q 'app/components/**/*.pcss'",
+    "lint:stylelint:fix": "npm run lint:stylelint --  --fix",
     "lint:eslint": "eslint 'app/components/**/*.ts'",
     "lint:eslint:fix": "eslint 'app/components/**/*.ts' --fix",
     "changeset:version": "changeset version && script/version",
@@ -66,9 +64,9 @@
     "@github/markdownlint-github": "^0.6.0",
     "@github/prettier-config": "0.0.6",
     "@playwright/test": "^1.35.1",
-    "@primer/css": "21.3.6",
+    "@primer/css": "21.5.0",
     "@primer/primitives": "^9.0.2",
-    "@primer/stylelint-config": "^13.0.1",
+    "@primer/stylelint-config": "^13.1.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^8.3.3",
     "@typescript-eslint/eslint-plugin": "^7.0.1",

package/static/arguments.json

@@ -974,6 +974,12 @@
         "default": "`false`",
         "description": "If true will hide the heading title, while still making it available to Screen Readers."
       },
+      {
+        "name": "disable_scroll",
+        "type": "Boolean",
+        "default": "`true`",
+        "description": "When true, disables scrolling the page when the dialog is open."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -1345,34 +1351,6 @@
       }
     ]
   },
-  {
-    "component": "ImageCrop",
-    "status": "alpha",
-    "a11y_reviewed": false,
-    "short_name": "ImageCrop",
-    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/image_crop.rb",
-    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/image_crop/default/",
-    "parameters": [
-      {
-        "name": "src",
-        "type": "String",
-        "default": "N/A",
-        "description": "The path of the image to crop."
-      },
-      {
-        "name": "rounded",
-        "type": "Boolean",
-        "default": "`true`",
-        "description": "If the crop mask should be a circle. Defaults to true."
-      },
-      {
-        "name": "system_arguments",
-        "type": "Hash",
-        "default": "N/A",
-        "description": "[System arguments](/system-arguments)"
-      }
-    ]
-  },
   {
     "component": "Layout",
     "status": "alpha",

package/static/audited_at.json

@@ -30,7 +30,6 @@
   "Primer::Alpha::HellipButton": "",
   "Primer::Alpha::HiddenTextExpander": "",
   "Primer::Alpha::Image": "",
-  "Primer::Alpha::ImageCrop": "",
   "Primer::Alpha::Layout": "",
   "Primer::Alpha::Layout::Main": "",
   "Primer::Alpha::Layout::Sidebar": "",

package/static/constants.json

@@ -356,8 +356,6 @@
   },
   "Primer::Alpha::Image": {
   },
-  "Primer::Alpha::ImageCrop": {
-  },
   "Primer::Alpha::Layout": {
     "FIRST_IN_SOURCE_DEFAULT": "sidebar",
     "FIRST_IN_SOURCE_OPTIONS": [

package/static/info_arch.json

@@ -3306,6 +3306,12 @@
         "default": "`false`",
         "description": "If true will hide the heading title, while still making it available to Screen Readers."
       },
+      {
+        "name": "disable_scroll",
+        "type": "Boolean",
+        "default": "`true`",
+        "description": "When true, disables scrolling the page when the dialog is open."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -4614,101 +4620,6 @@
 
     ]
   },
-  {
-    "fully_qualified_name": "Primer::Alpha::ImageCrop",
-    "description": "A client-side mechanism to crop images.",
-    "accessibility_docs": null,
-    "is_form_component": false,
-    "is_published": true,
-    "requires_js": true,
-    "component": "ImageCrop",
-    "status": "alpha",
-    "a11y_reviewed": false,
-    "short_name": "ImageCrop",
-    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/image_crop.rb",
-    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/image_crop/default/",
-    "parameters": [
-      {
-        "name": "src",
-        "type": "String",
-        "default": "N/A",
-        "description": "The path of the image to crop."
-      },
-      {
-        "name": "rounded",
-        "type": "Boolean",
-        "default": "`true`",
-        "description": "If the crop mask should be a circle. Defaults to true."
-      },
-      {
-        "name": "system_arguments",
-        "type": "Hash",
-        "default": "N/A",
-        "description": "{{link_to_system_arguments_docs}}"
-      }
-    ],
-    "slots": [
-      {
-        "name": "loading",
-        "description": "A loading indicator that is shown while the image is loading.",
-        "parameters": [
-          {
-            "name": "system_arguments",
-            "type": "Hash",
-            "default": "N/A",
-            "description": "{{link_to_system_arguments_docs}}"
-          }
-        ]
-      }
-    ],
-    "methods": [
-
-    ],
-    "previews": [
-      {
-        "preview_path": "primer/alpha/image_crop/playground",
-        "name": "playground",
-        "snapshot": "false",
-        "skip_rules": {
-          "wont_fix": [
-            "region"
-          ],
-          "will_fix": [
-            "color-contrast"
-          ]
-        }
-      },
-      {
-        "preview_path": "primer/alpha/image_crop/default",
-        "name": "default",
-        "snapshot": "false",
-        "skip_rules": {
-          "wont_fix": [
-            "region"
-          ],
-          "will_fix": [
-            "color-contrast"
-          ]
-        }
-      },
-      {
-        "preview_path": "primer/alpha/image_crop/loading",
-        "name": "loading",
-        "snapshot": "false",
-        "skip_rules": {
-          "wont_fix": [
-            "region"
-          ],
-          "will_fix": [
-            "color-contrast"
-          ]
-        }
-      }
-    ],
-    "subcomponents": [
-
-    ]
-  },
   {
     "fully_qualified_name": "Primer::Alpha::Layout",
     "description": "`Layout` provides foundational patterns for responsive pages.\n`Layout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences.\n On smaller screens, `Layout` uses vertically stacked rows to display content.\n\n`Layout` flows as both column, when there's enough horizontal space to render both `Main` and `Sidebar`side-by-side (on a desktop of tablet device, per instance);\nor it flows as a row, when `Main` and `Sidebar` are stacked vertically (e.g. on a mobile device).\n`Layout` should always work in any screen size.",
@@ -8185,6 +8096,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/select_panel/scroll_container",
+        "name": "scroll_container",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [

package/static/previews.json

@@ -3978,53 +3978,6 @@
       }
     ]
   },
-  {
-    "name": "image_crop",
-    "component": "ImageCrop",
-    "status": "alpha",
-    "lookup_path": "primer/alpha/image_crop",
-    "examples": [
-      {
-        "preview_path": "primer/alpha/image_crop/playground",
-        "name": "playground",
-        "snapshot": "false",
-        "skip_rules": {
-          "wont_fix": [
-            "region"
-          ],
-          "will_fix": [
-            "color-contrast"
-          ]
-        }
-      },
-      {
-        "preview_path": "primer/alpha/image_crop/default",
-        "name": "default",
-        "snapshot": "false",
-        "skip_rules": {
-          "wont_fix": [
-            "region"
-          ],
-          "will_fix": [
-            "color-contrast"
-          ]
-        }
-      },
-      {
-        "preview_path": "primer/alpha/image_crop/loading",
-        "name": "loading",
-        "snapshot": "false",
-        "skip_rules": {
-          "wont_fix": [
-            "region"
-          ],
-          "will_fix": [
-            "color-contrast"
-          ]
-        }
-      }
-    ]
-  },
   {
     "name": "label",
     "component": "Label",
@@ -6212,6 +6165,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/select_panel/scroll_container",
+        "name": "scroll_container",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },

package/static/statuses.json

@@ -30,7 +30,6 @@
   "Primer::Alpha::HellipButton": "alpha",
   "Primer::Alpha::HiddenTextExpander": "alpha",
   "Primer::Alpha::Image": "alpha",
-  "Primer::Alpha::ImageCrop": "alpha",
   "Primer::Alpha::Layout": "alpha",
   "Primer::Alpha::Layout::Main": "alpha",
   "Primer::Alpha::Layout::Sidebar": "alpha",

package/app/assets/javascripts/components/primer/alpha/image_crop.d.ts

@@ -1 +0,0 @@
-import '@github/image-crop-element';

package/app/components/primer/alpha/image_crop.js

@@ -1 +0,0 @@
-import '@github/image-crop-element';

package/lib/primer/forms/primer_multi_input.d.ts

@@ -1,10 +0,0 @@
-export declare class PrimerMultiInputElement extends HTMLElement {
-    fields: HTMLInputElement[];
-    activateField(name: string): void;
-    private findField;
-}
-declare global {
-    interface Window {
-        PrimerMultiInputElement: typeof PrimerMultiInputElement;
-    }
-}

package/lib/primer/forms/primer_text_field.d.ts

@@ -1,28 +0,0 @@
-import '@github/auto-check-element';
-import type { AutoCheckErrorEvent, AutoCheckSuccessEvent } from '@github/auto-check-element';
-declare global {
-    interface HTMLElementEventMap {
-        'auto-check-success': AutoCheckSuccessEvent;
-        'auto-check-error': AutoCheckErrorEvent;
-    }
-}
-export declare class PrimerTextFieldElement extends HTMLElement {
-    #private;
-    inputElement: HTMLInputElement;
-    validationElement: HTMLElement;
-    validationMessageElement: HTMLElement;
-    validationSuccessIcon: HTMLElement;
-    validationErrorIcon: HTMLElement;
-    leadingVisual: HTMLElement;
-    leadingSpinner: HTMLElement;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    clearContents(): void;
-    clearError(): void;
-    setValidationMessage(message: string): void;
-    toggleValidationStyling(isError: boolean): void;
-    setSuccess(message: string): void;
-    setError(message: string): void;
-    showLeadingSpinner(): void;
-    hideLeadingSpinner(): void;
-}

package/lib/primer/forms/toggle_switch_input.d.ts

@@ -1,5 +0,0 @@
-export declare class ToggleSwitchInputElement extends HTMLElement {
-    validationElement: HTMLElement;
-    validationMessageElement: HTMLElement;
-    connectedCallback(): void;
-}