@primer/view-components 0.0.93 → 0.0.95

package/app/components/primer/alpha/{toggle-switch-element.js → toggle_switch.js}

@@ -1,5 +1,3 @@
-/* eslint-disable custom-elements/expose-class-on-global */
-/* eslint-disable custom-elements/define-tag-after-class-definition */
 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);
@@ -104,6 +102,9 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
             const response = await fetch(this.src, {
                 credentials: 'same-origin',
                 method: 'POST',
+                headers: {
+                    'Requested-With': 'XMLHttpRequest'
+                },
                 body
             });
             if (response.ok) {
@@ -135,3 +136,7 @@ ToggleSwitchElement = __decorate([
     controller
 ], ToggleSwitchElement);
 export { ToggleSwitchElement };
+if (!window.customElements.get('toggle-switch')) {
+    window.ToggleSwitchElement = ToggleSwitchElement;
+    window.customElements.define('toggle-switch', ToggleSwitchElement);
+}

package/app/components/primer/alpha/{tool-tip-element.js → tool_tip.js}

@@ -247,7 +247,12 @@ class ToolTipElement extends HTMLElement {
             if (this.type === 'label') {
                 let labelledBy = this.control.getAttribute('aria-labelledby');
                 if (labelledBy) {
-                    labelledBy = `${labelledBy} ${this.id}`;
+                    if (!labelledBy.split(' ').includes(this.id)) {
+                        labelledBy = `${labelledBy} ${this.id}`;
+                    }
+                    else {
+                        labelledBy = `${labelledBy}`;
+                    }
                 }
                 else {
                     labelledBy = this.id;
@@ -258,7 +263,17 @@ class ToolTipElement extends HTMLElement {
             }
             else {
                 let describedBy = this.control.getAttribute('aria-describedby');
-                describedBy ? (describedBy = `${describedBy} ${this.id}`) : (describedBy = this.id);
+                if (describedBy) {
+                    if (!describedBy.split(' ').includes(this.id)) {
+                        describedBy = `${describedBy} ${this.id}`;
+                    }
+                    else {
+                        describedBy = `${describedBy}`;
+                    }
+                }
+                else {
+                    describedBy = this.id;
+                }
                 this.control.setAttribute('aria-describedby', describedBy);
             }
         }

package/app/components/primer/{clipboard_copy_component.js → clipboard_copy.js}

@@ -23,7 +23,7 @@ function showCheck(button) {
     showSVG(checkIcon);
 }
 const clipboardCopyElementTimers = new WeakMap();
-document.addEventListener('clipboard-copy', function ({ target }) {
+document.addEventListener('clipboard-copy', ({ target }) => {
     if (!(target instanceof HTMLElement))
         return;
     if (!target.hasAttribute('data-view-component'))

package/app/components/primer/experimental/{overflow-menu-element.d.ts → action_bar.d.ts}

@@ -2,6 +2,7 @@ export declare class ActionBarElement extends HTMLElement {
     #private;
     items: HTMLElement[];
     menuItems: HTMLElement[];
+    itemContainer: HTMLElement;
     moreMenu: HTMLElement;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/app/components/primer/experimental/action_bar.js

@@ -0,0 +1,141 @@
+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 __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+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 _ActionBarElement_instances, _ActionBarElement_observer, _ActionBarElement_initialBarWidth, _ActionBarElement_previousBarWidth, _ActionBarElement_itemGap, _ActionBarElement_focusController, _ActionBarElement_focusSettings, _ActionBarElement_availableSpace, _ActionBarElement_shrinking, _ActionBarElement_growing;
+import { controller, targets, target } from '@github/catalyst';
+import { focusZone, FocusKeys } from '@primer/behaviors';
+let ActionBarElement = class ActionBarElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _ActionBarElement_instances.add(this);
+        _ActionBarElement_observer.set(this, void 0);
+        _ActionBarElement_initialBarWidth.set(this, void 0);
+        _ActionBarElement_previousBarWidth.set(this, void 0);
+        _ActionBarElement_itemGap.set(this, void 0);
+        _ActionBarElement_focusController.set(this, void 0);
+        _ActionBarElement_focusSettings.set(this, {
+            bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd
+        });
+    }
+    connectedCallback() {
+        var _a, _b, _c;
+        __classPrivateFieldSet(this, _ActionBarElement_initialBarWidth, this.offsetWidth, "f");
+        __classPrivateFieldSet(this, _ActionBarElement_previousBarWidth, this.offsetWidth, "f");
+        __classPrivateFieldSet(this, _ActionBarElement_itemGap, parseInt((_a = window.getComputedStyle(this.itemContainer)) === null || _a === void 0 ? void 0 : _a.columnGap, 10) || 0, "f");
+        // Calculate the width of all the items before hiding anything
+        for (const item of this.items) {
+            const width = item.getBoundingClientRect().width;
+            const marginLeft = parseInt((_b = window.getComputedStyle(item)) === null || _b === void 0 ? void 0 : _b.marginLeft, 10);
+            const marginRight = parseInt((_c = window.getComputedStyle(item)) === null || _c === void 0 ? void 0 : _c.marginRight, 10);
+            item.setAttribute('data-offset-width', `${width + marginLeft + marginRight}`);
+        }
+        __classPrivateFieldSet(this, _ActionBarElement_focusController, focusZone(this, __classPrivateFieldGet(this, _ActionBarElement_focusSettings, "f")), "f");
+        this.style.maxWidth = `${this.itemContainer.offsetWidth}px`;
+        // Calculate visible items on page load until there is enough space
+        // to show all items or the first item is hidden
+        while (__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) < this.moreMenu.offsetWidth + __classPrivateFieldGet(this, _ActionBarElement_itemGap, "f") * 0.5 && !this.items[0].hidden) {
+            __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_shrinking).call(this);
+        }
+        this.style.overflow = 'visible';
+        __classPrivateFieldSet(this, _ActionBarElement_observer, new ResizeObserver(entries => {
+            for (const entry of entries) {
+                // Only recalculate if the bar width changed
+                if (__classPrivateFieldGet(this, _ActionBarElement_initialBarWidth, "f") !== entry.contentRect.width) {
+                    if (entry.contentRect.width < __classPrivateFieldGet(this, _ActionBarElement_previousBarWidth, "f")) {
+                        __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_shrinking).call(this);
+                    }
+                    else {
+                        __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_growing).call(this);
+                    }
+                    __classPrivateFieldSet(this, _ActionBarElement_previousBarWidth, entry.contentRect.width, "f");
+                }
+            }
+        }), "f");
+        __classPrivateFieldGet(this, _ActionBarElement_observer, "f").observe(this);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = __classPrivateFieldGet(this, _ActionBarElement_focusController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldGet(this, _ActionBarElement_observer, "f").unobserve(this);
+    }
+};
+_ActionBarElement_observer = new WeakMap(), _ActionBarElement_initialBarWidth = new WeakMap(), _ActionBarElement_previousBarWidth = new WeakMap(), _ActionBarElement_itemGap = new WeakMap(), _ActionBarElement_focusController = new WeakMap(), _ActionBarElement_focusSettings = new WeakMap(), _ActionBarElement_instances = new WeakSet(), _ActionBarElement_availableSpace = function _ActionBarElement_availableSpace() {
+    // Get the offset of the item container from the container edge
+    return this.offsetWidth - this.itemContainer.offsetWidth;
+}, _ActionBarElement_shrinking = function _ActionBarElement_shrinking() {
+    var _a;
+    if (this.items[0].hidden) {
+        return;
+    }
+    const gapSpace = __classPrivateFieldGet(this, _ActionBarElement_itemGap, "f") * 0.5;
+    if (__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) < this.moreMenu.offsetWidth + gapSpace) {
+        const visibleItems = this.items.filter(item => !item.hidden);
+        const hiddenMenuItems = this.menuItems.filter(item => item.hidden);
+        visibleItems[visibleItems.length - 1].hidden = true;
+        hiddenMenuItems[hiddenMenuItems.length - 1].hidden = false;
+        if (this.moreMenu.hidden) {
+            this.moreMenu.hidden = false;
+        }
+        // Reset focus controller
+        (_a = __classPrivateFieldGet(this, _ActionBarElement_focusController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldSet(this, _ActionBarElement_focusController, focusZone(this, __classPrivateFieldGet(this, _ActionBarElement_focusSettings, "f")), "f");
+    }
+}, _ActionBarElement_growing = function _ActionBarElement_growing() {
+    var _a;
+    if (this.moreMenu.hidden) {
+        return;
+    }
+    const gapSpace = __classPrivateFieldGet(this, _ActionBarElement_itemGap, "f") * 0.5;
+    const hiddenItems = this.items.filter(item => item.hidden);
+    if (hiddenItems.length === 0) {
+        return;
+    }
+    const hiddenItemWidth = Number(hiddenItems[0].getAttribute('data-offset-width'));
+    if (__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) >= this.moreMenu.offsetWidth + hiddenItemWidth + gapSpace) {
+        const visibleMenuItems = this.menuItems.filter(item => !item.hidden);
+        hiddenItems[0].hidden = false;
+        visibleMenuItems[0].hidden = true;
+        if (hiddenItems.length === 2) {
+            hiddenItems[1].hidden = false;
+            visibleMenuItems[1].hidden = true;
+        }
+        // If there was only one item left, hide the more menu
+        if (hiddenItems.length <= 2) {
+            this.moreMenu.hidden = true;
+        }
+        // Reset focus controller
+        (_a = __classPrivateFieldGet(this, _ActionBarElement_focusController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldSet(this, _ActionBarElement_focusController, focusZone(this, __classPrivateFieldGet(this, _ActionBarElement_focusSettings, "f")), "f");
+    }
+};
+__decorate([
+    targets
+], ActionBarElement.prototype, "items", void 0);
+__decorate([
+    targets
+], ActionBarElement.prototype, "menuItems", void 0);
+__decorate([
+    target
+], ActionBarElement.prototype, "itemContainer", void 0);
+__decorate([
+    target
+], ActionBarElement.prototype, "moreMenu", void 0);
+ActionBarElement = __decorate([
+    controller
+], ActionBarElement);
+export { ActionBarElement };
+window.ActionBarElement = ActionBarElement;

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

@@ -1,10 +1,10 @@
+import './alpha/modal_dialog';
+import './alpha/toggle_switch';
+import './alpha/tool_tip';
 import './beta/auto_complete/auto_complete';
-import './clipboard_copy_component';
+import './clipboard_copy';
+import './dropdown';
+import './image_crop';
+import './local_time';
 import './tab_container_component';
 import './time_ago_component';
-import './local_time';
-import './image_crop';
-import './dropdown';
-import './alpha/toggle-switch-element';
-import './alpha/tool-tip-element';
-import './alpha/modal-dialog-element';

package/app/components/primer/primer.js

@@ -1,10 +1,10 @@
+import './alpha/modal_dialog';
+import './alpha/toggle_switch';
+import './alpha/tool_tip';
 import './beta/auto_complete/auto_complete';
-import './clipboard_copy_component';
+import './clipboard_copy';
+import './dropdown';
+import './image_crop';
+import './local_time';
 import './tab_container_component';
 import './time_ago_component';
-import './local_time';
-import './image_crop';
-import './dropdown';
-import './alpha/toggle-switch-element';
-import './alpha/tool-tip-element';
-import './alpha/modal-dialog-element';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.0.93",
+  "version": "0.0.95",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -20,6 +20,7 @@
     "url": "https://github.com/primer/view_components/issues"
   },
   "files": [
+    "static/*.json",
     "app/assets/**/*",
     "app/components/primer/**/*.js",
     "app/components/primer/**/*.css",
@@ -30,8 +31,8 @@
     "build:docs": "cd docs && yarn gatsby build --prefix-paths",
     "build:docs:preview": "cd docs && yarn gatsby build",
     "prepare": "rm -rf docs/static && mkdir -p docs/static && yarn build:js && yarn build:css && cp app/assets/**/primer_view_components.* docs/static/",
-    "lint": "eslint 'app/components/**/*.ts' demo/.storybook",
-    "lint:fix": "eslint 'app/components/**/*.ts' demo/.storybook --fix",
+    "lint": "eslint 'app/components/**/*.ts'",
+    "lint:fix": "eslint 'app/components/**/*.ts' --fix",
     "changeset:version": "changeset version && script/version",
     "build:js": "tsc && rollup -c",
     "build:css": "postcss -o app/assets/styles/primer_view_components.css app/components/primer/primer.pcss"
@@ -45,23 +46,25 @@
     "@github/mini-throttle": "^2.1.0",
     "@github/tab-container-element": "^3.1.2",
     "@github/time-elements": "^3.1.2",
-    "@primer/behaviors": "^1.1.3"
+    "@primer/behaviors": "^1.2.0"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.6",
     "@changesets/cli": "^2.24.1",
     "@github/prettier-config": "0.0.4",
-    "@primer/css": "20.4.4",
+    "@primer/css": "20.4.5",
     "@primer/primitives": "^7.9.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.3",
     "@typescript-eslint/eslint-plugin": "^5.31.0",
     "@typescript-eslint/parser": "^5.31.0",
+    "chokidar-cli": "^3.0.0",
     "cssnano": "^5.1.13",
     "eslint": "^8.20.0",
     "eslint-plugin-custom-elements": "^0.0.6",
     "eslint-plugin-github": "^4.3.7",
     "eslint-plugin-prettier": "^4.2.1",
+    "markdownlint-cli": "^0.32.2",
     "mocha": "^10.0.0",
     "postcss": "^8.4.16",
     "postcss-cli": "^10.0.0",
@@ -74,8 +77,5 @@
     "tslib": "^2.4.0",
     "typescript": "^4.7.4"
   },
-  "prettier": "@github/prettier-config",
-  "storybook": {
-    "url": "https://primer.style/view-components/stories/"
-  }
+  "prettier": "@github/prettier-config"
 }