@primer/view-components 0.26.0-rc.88d1e470 → 0.26.0-rc.b29924c9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/assets/javascripts/lib/primer/forms/primer_text_field.d.ts +27 -0
- package/app/assets/javascripts/primer_view_components.js +1 -1
- package/app/assets/javascripts/primer_view_components.js.map +1 -1
- package/app/assets/styles/primer_view_components.css +1 -1
- package/app/assets/styles/primer_view_components.css.map +1 -1
- package/app/components/primer/alpha/action_menu/action_menu_element.js +13 -43
- package/app/components/primer/alpha/tab_nav.css +1 -1
- package/lib/primer/forms/primer_text_field.d.ts +27 -0
- package/lib/primer/forms/primer_text_field.js +17 -5
- package/package.json +5 -5
- package/static/arguments.json +6 -6
- package/static/constants.json +1 -0
- package/static/info_arch.json +6 -0
|
@@ -15,7 +15,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
|
|
|
15
15
|
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");
|
|
16
16
|
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
17
17
|
};
|
|
18
|
-
var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_invokerBeingClicked, _ActionMenuElement_softDisableItems, _ActionMenuElement_potentiallyDisallowActivation,
|
|
18
|
+
var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_inputName, _ActionMenuElement_invokerBeingClicked, _ActionMenuElement_softDisableItems, _ActionMenuElement_potentiallyDisallowActivation, _ActionMenuElement_isAnchorActivationViaSpace, _ActionMenuElement_isActivation, _ActionMenuElement_handleInvokerActivated, _ActionMenuElement_handleDialogItemActivated, _ActionMenuElement_handleItemActivated, _ActionMenuElement_handleIncludeFragmentReplaced, _ActionMenuElement_handleFocusOut, _ActionMenuElement_show, _ActionMenuElement_hide, _ActionMenuElement_isOpen, _ActionMenuElement_setDynamicLabel, _ActionMenuElement_updateInput, _ActionMenuElement_firstItem_get;
|
|
19
19
|
import { controller, target } from '@github/catalyst';
|
|
20
20
|
import '@oddbird/popover-polyfill';
|
|
21
21
|
const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
|
|
@@ -152,18 +152,13 @@ let ActionMenuElement = class ActionMenuElement extends HTMLElement {
|
|
|
152
152
|
return;
|
|
153
153
|
}
|
|
154
154
|
}
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
// is called. While calling preventDefault() appears to have no effect on link navigation, it skips
|
|
159
|
-
// form submission. The code below therefore only calls preventDefault() if the button has been
|
|
160
|
-
// activated by the space key, and manually submits the form if the button is a submit button.
|
|
161
|
-
if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isKeyboardActivationViaSpace).call(this, event)) {
|
|
155
|
+
// Pressing the space key on a link will cause the page to scroll unless preventDefault() is called.
|
|
156
|
+
// We then click it manually to navigate.
|
|
157
|
+
if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isAnchorActivationViaSpace).call(this, event)) {
|
|
162
158
|
event.preventDefault();
|
|
163
|
-
|
|
164
|
-
item.closest('form')?.submit();
|
|
165
|
-
}
|
|
159
|
+
item.click();
|
|
166
160
|
}
|
|
161
|
+
__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_handleItemActivated).call(this, item);
|
|
167
162
|
return;
|
|
168
163
|
}
|
|
169
164
|
if (event.type === 'include-fragment-replaced') {
|
|
@@ -269,26 +264,18 @@ _ActionMenuElement_potentiallyDisallowActivation = function _ActionMenuElement_p
|
|
|
269
264
|
}
|
|
270
265
|
return false;
|
|
271
266
|
};
|
|
272
|
-
|
|
273
|
-
return
|
|
274
|
-
|
|
275
|
-
_ActionMenuElement_isKeyboardActivationViaEnter = function _ActionMenuElement_isKeyboardActivationViaEnter(event) {
|
|
276
|
-
return (event instanceof KeyboardEvent &&
|
|
277
|
-
event.type === 'keydown' &&
|
|
278
|
-
!(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
|
|
279
|
-
event.key === 'Enter');
|
|
280
|
-
};
|
|
281
|
-
_ActionMenuElement_isKeyboardActivationViaSpace = function _ActionMenuElement_isKeyboardActivationViaSpace(event) {
|
|
282
|
-
return (event instanceof KeyboardEvent &&
|
|
267
|
+
_ActionMenuElement_isAnchorActivationViaSpace = function _ActionMenuElement_isAnchorActivationViaSpace(event) {
|
|
268
|
+
return (event.target instanceof HTMLAnchorElement &&
|
|
269
|
+
event instanceof KeyboardEvent &&
|
|
283
270
|
event.type === 'keydown' &&
|
|
284
271
|
!(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
|
|
285
272
|
event.key === ' ');
|
|
286
273
|
};
|
|
287
|
-
_ActionMenuElement_isMouseActivation = function _ActionMenuElement_isMouseActivation(event) {
|
|
288
|
-
return event instanceof MouseEvent && event.type === 'click';
|
|
289
|
-
};
|
|
290
274
|
_ActionMenuElement_isActivation = function _ActionMenuElement_isActivation(event) {
|
|
291
|
-
|
|
275
|
+
// Some browsers fire MouseEvents (Firefox) and others fire PointerEvents (Chrome). Activating an item via
|
|
276
|
+
// enter or space counterintuitively fires one of these rather than a KeyboardEvent. Since PointerEvent
|
|
277
|
+
// inherits from MouseEvent, it is enough to check for MouseEvent here.
|
|
278
|
+
return (event instanceof MouseEvent && event.type === 'click') || __classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_isAnchorActivationViaSpace).call(this, event);
|
|
292
279
|
};
|
|
293
280
|
_ActionMenuElement_handleInvokerActivated = function _ActionMenuElement_handleInvokerActivated(event) {
|
|
294
281
|
event.preventDefault();
|
|
@@ -363,23 +350,6 @@ _ActionMenuElement_handleItemActivated = function _ActionMenuElement_handleItemA
|
|
|
363
350
|
detail: { item: item.parentElement, checked: this.isItemChecked(item.parentElement) },
|
|
364
351
|
}));
|
|
365
352
|
};
|
|
366
|
-
_ActionMenuElement_activateItem = function _ActionMenuElement_activateItem(event, item) {
|
|
367
|
-
const eventWillActivateByDefault = (event instanceof MouseEvent && event.type === 'click') ||
|
|
368
|
-
(event instanceof KeyboardEvent &&
|
|
369
|
-
event.type === 'keydown' &&
|
|
370
|
-
!(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
|
|
371
|
-
event.key === 'Enter');
|
|
372
|
-
// if the event will result in activating the current item by default, i.e. is a
|
|
373
|
-
// mouse click or keyboard enter, bail out
|
|
374
|
-
if (eventWillActivateByDefault)
|
|
375
|
-
return;
|
|
376
|
-
// otherwise, event will not result in activation by default, so we stop it and
|
|
377
|
-
// simulate a click
|
|
378
|
-
/* eslint-disable-next-line no-restricted-syntax */
|
|
379
|
-
event.stopPropagation();
|
|
380
|
-
const elem = item;
|
|
381
|
-
elem.click();
|
|
382
|
-
};
|
|
383
353
|
_ActionMenuElement_handleIncludeFragmentReplaced = function _ActionMenuElement_handleIncludeFragmentReplaced() {
|
|
384
354
|
if (__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get))
|
|
385
355
|
__classPrivateFieldGet(this, _ActionMenuElement_instances, "a", _ActionMenuElement_firstItem_get).focus();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tabnav{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);margin-bottom:var(--stack-gap-normal);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin)*-1);overflow:
|
|
1
|
+
.tabnav{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);margin-bottom:var(--stack-gap-normal);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin)*-1);overflow:hidden}.tabnav::part(tablist-wrapper){border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);margin-bottom:var(--stack-gap-normal)}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin) solid #0000;border-bottom:0;color:var(--fgColor-muted);display:inline-block;flex-shrink:0;font-size:var(--text-body-size-medium);line-height:23px;padding:var(--base-size-8) var(--control-medium-paddingInline-spacious);-webkit-text-decoration:none;text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--bgColor-default);border-color:var(--borderColor-default);border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0;color:var(--fgColor-default)}.tabnav-tab.selected .octicon,.tabnav-tab[aria-current]:not([aria-current=false]) .octicon,.tabnav-tab[aria-selected=true] .octicon{color:inherit}.tabnav-tab:hover{color:var(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0!important;outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--fgColor-muted)}.tabnav-tab .octicon{margin-right:var(--control-small-gap)}.tabnav-tab .Counter{color:inherit;margin-left:var(--control-small-gap)}tab-container .tabnav-tab{margin-bottom:-1px}.tabnav-extra{color:var(--fgColor-muted);display:inline-block;font-size:var(--text-body-size-small);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:2px}a.tabnav-extra:hover{color:var(--fgColor-accent);-webkit-text-decoration:none;text-decoration:none}.tabnav-btn{margin-left:var(--controlStack-medium-gap-condensed)}
|
|
@@ -1 +1,28 @@
|
|
|
1
1
|
import '@github/auto-check-element';
|
|
2
|
+
import type { AutoCheckErrorEvent, AutoCheckSuccessEvent } from '@github/auto-check-element';
|
|
3
|
+
declare global {
|
|
4
|
+
interface HTMLElementEventMap {
|
|
5
|
+
'auto-check-success': AutoCheckSuccessEvent;
|
|
6
|
+
'auto-check-error': AutoCheckErrorEvent;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
export declare class PrimerTextFieldElement extends HTMLElement {
|
|
10
|
+
#private;
|
|
11
|
+
inputElement: HTMLInputElement;
|
|
12
|
+
validationElement: HTMLElement;
|
|
13
|
+
validationMessageElement: HTMLElement;
|
|
14
|
+
validationSuccessIcon: HTMLElement;
|
|
15
|
+
validationErrorIcon: HTMLElement;
|
|
16
|
+
leadingVisual: HTMLElement;
|
|
17
|
+
leadingSpinner: HTMLElement;
|
|
18
|
+
connectedCallback(): void;
|
|
19
|
+
disconnectedCallback(): void;
|
|
20
|
+
clearContents(): void;
|
|
21
|
+
clearError(): void;
|
|
22
|
+
setValidationMessage(message: string): void;
|
|
23
|
+
toggleValidationStyling(isError: boolean): void;
|
|
24
|
+
setSuccess(message: string): void;
|
|
25
|
+
setError(message: string): void;
|
|
26
|
+
showLeadingSpinner(): void;
|
|
27
|
+
hideLeadingSpinner(): void;
|
|
28
|
+
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* eslint-disable custom-elements/expose-class-on-global */
|
|
1
2
|
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
3
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
4
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
@@ -18,10 +19,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
|
|
|
18
19
|
var _PrimerTextFieldElement_abortController;
|
|
19
20
|
import '@github/auto-check-element';
|
|
20
21
|
import { controller, target } from '@github/catalyst';
|
|
21
|
-
|
|
22
|
-
let PrimerTextFieldElement =
|
|
23
|
-
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
|
|
24
|
-
class PrimerTextFieldElement extends HTMLElement {
|
|
22
|
+
let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
|
|
25
23
|
constructor() {
|
|
26
24
|
super(...arguments);
|
|
27
25
|
_PrimerTextFieldElement_abortController.set(this, void 0);
|
|
@@ -83,6 +81,14 @@ class PrimerTextFieldElement extends HTMLElement {
|
|
|
83
81
|
this.setValidationMessage(message);
|
|
84
82
|
this.validationElement.hidden = false;
|
|
85
83
|
}
|
|
84
|
+
showLeadingSpinner() {
|
|
85
|
+
this.leadingSpinner?.removeAttribute('hidden');
|
|
86
|
+
this.leadingVisual?.setAttribute('hidden', '');
|
|
87
|
+
}
|
|
88
|
+
hideLeadingSpinner() {
|
|
89
|
+
this.leadingSpinner?.setAttribute('hidden', '');
|
|
90
|
+
this.leadingVisual?.removeAttribute('hidden');
|
|
91
|
+
}
|
|
86
92
|
};
|
|
87
93
|
_PrimerTextFieldElement_abortController = new WeakMap();
|
|
88
94
|
__decorate([
|
|
@@ -100,7 +106,13 @@ __decorate([
|
|
|
100
106
|
__decorate([
|
|
101
107
|
target
|
|
102
108
|
], PrimerTextFieldElement.prototype, "validationErrorIcon", void 0);
|
|
109
|
+
__decorate([
|
|
110
|
+
target
|
|
111
|
+
], PrimerTextFieldElement.prototype, "leadingVisual", void 0);
|
|
112
|
+
__decorate([
|
|
113
|
+
target
|
|
114
|
+
], PrimerTextFieldElement.prototype, "leadingSpinner", void 0);
|
|
103
115
|
PrimerTextFieldElement = __decorate([
|
|
104
116
|
controller
|
|
105
|
-
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
|
|
106
117
|
], PrimerTextFieldElement);
|
|
118
|
+
export { PrimerTextFieldElement };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/view-components",
|
|
3
|
-
"version": "0.26.0-rc.
|
|
3
|
+
"version": "0.26.0-rc.b29924c9",
|
|
4
4
|
"description": "ViewComponents for the Primer Design System",
|
|
5
5
|
"main": "app/assets/javascripts/primer_view_components.js",
|
|
6
6
|
"module": "app/components/primer/primer.js",
|
|
@@ -67,14 +67,14 @@
|
|
|
67
67
|
"@primer/stylelint-config": "^12.7.2",
|
|
68
68
|
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
69
69
|
"@rollup/plugin-typescript": "^8.3.3",
|
|
70
|
-
"@typescript-eslint/eslint-plugin": "^7.0.
|
|
71
|
-
"@typescript-eslint/parser": "^
|
|
70
|
+
"@typescript-eslint/eslint-plugin": "^7.0.1",
|
|
71
|
+
"@typescript-eslint/parser": "^7.0.1",
|
|
72
72
|
"axe-core": "^4.7.1",
|
|
73
73
|
"chokidar-cli": "^3.0.0",
|
|
74
74
|
"cssnano": "^7.0.1",
|
|
75
75
|
"eslint": "^8.23.1",
|
|
76
76
|
"eslint-plugin-custom-elements": "^0.0.8",
|
|
77
|
-
"eslint-plugin-github": "^
|
|
77
|
+
"eslint-plugin-github": "^5.0.1",
|
|
78
78
|
"eslint-plugin-prettier": "^5.0.0",
|
|
79
79
|
"markdownlint-cli2": "^0.13.0",
|
|
80
80
|
"mocha": "^10.0.0",
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
"postcss-import": "^16.0.0",
|
|
85
85
|
"postcss-mixins": "^10.0.0",
|
|
86
86
|
"postcss-preset-env": "^9.3.0",
|
|
87
|
-
"prettier": "3.3.
|
|
87
|
+
"prettier": "^3.3.2",
|
|
88
88
|
"rollup": "^2.79.1",
|
|
89
89
|
"rollup-plugin-terser": "^7.0.2",
|
|
90
90
|
"stylelint": "^16.1.0",
|
package/static/arguments.json
CHANGED
|
@@ -2752,6 +2752,12 @@
|
|
|
2752
2752
|
"default": "N/A",
|
|
2753
2753
|
"description": "Renders a leading visual icon before the text field's cursor. The hash will be passed to Primer's [Octicon](/components/beta/octicon) component."
|
|
2754
2754
|
},
|
|
2755
|
+
{
|
|
2756
|
+
"name": "leading_spinner",
|
|
2757
|
+
"type": "Boolean",
|
|
2758
|
+
"default": "N/A",
|
|
2759
|
+
"description": "If `true`, a leading spinner will be included in the markup. The spinner can be shown via the `showLeadingSpinner()` JavaScript method, and hidden via `hideLeadingSpinner()`. If this argument is `true`, a leading visual must also be provided."
|
|
2760
|
+
},
|
|
2755
2761
|
{
|
|
2756
2762
|
"name": "show_clear_button",
|
|
2757
2763
|
"type": "Boolean",
|
|
@@ -4276,12 +4282,6 @@
|
|
|
4276
4282
|
"default": "`box-sizing: content-box; color: var(--color-icon-primary);`",
|
|
4277
4283
|
"description": "Custom element styles."
|
|
4278
4284
|
},
|
|
4279
|
-
{
|
|
4280
|
-
"name": "sr_text",
|
|
4281
|
-
"type": "String",
|
|
4282
|
-
"default": "Loading",
|
|
4283
|
-
"description": "Screen reader only text, added unless aria-label is set."
|
|
4284
|
-
},
|
|
4285
4285
|
{
|
|
4286
4286
|
"name": "system_arguments",
|
|
4287
4287
|
"type": "Hash",
|
package/static/constants.json
CHANGED
package/static/info_arch.json
CHANGED
|
@@ -8143,6 +8143,12 @@
|
|
|
8143
8143
|
"default": "N/A",
|
|
8144
8144
|
"description": "Renders a leading visual icon before the text field's cursor. The hash will be passed to Primer's {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}} component."
|
|
8145
8145
|
},
|
|
8146
|
+
{
|
|
8147
|
+
"name": "leading_spinner",
|
|
8148
|
+
"type": "Boolean",
|
|
8149
|
+
"default": "N/A",
|
|
8150
|
+
"description": "If `true`, a leading spinner will be included in the markup. The spinner can be shown via the `showLeadingSpinner()` JavaScript method, and hidden via `hideLeadingSpinner()`. If this argument is `true`, a leading visual must also be provided."
|
|
8151
|
+
},
|
|
8146
8152
|
{
|
|
8147
8153
|
"name": "show_clear_button",
|
|
8148
8154
|
"type": "Boolean",
|