From 6396a5c4a9dbe3673c00462242f80eed9e98ebed Mon Sep 17 00:00:00 2001 From: Luis Almeida Date: Wed, 9 Aug 2023 12:18:05 +0200 Subject: [PATCH] fix: correct rebase mistake --- assets/vendor.js | 36 +++----- package.json | 2 +- script.js | 236 +++++++++++++++++++++++++++++++++++------------ yarn.lock | 11 ++- 4 files changed, 201 insertions(+), 84 deletions(-) diff --git a/assets/vendor.js b/assets/vendor.js index 7fcf0d80b..de8b41a90 100644 --- a/assets/vendor.js +++ b/assets/vendor.js @@ -157,17 +157,17 @@ var l=requireObjectAssign(),n=60103,p=60106;react_production_min.Fragment=60107; return react_production_min; } -var hasRequiredReact; +{ + react.exports = requireReact_production_min(); +} -function requireReact () { - if (hasRequiredReact) return react.exports; - hasRequiredReact = 1; +var reactExports = react.exports; +var React__default = /*@__PURE__*/getDefaultExportFromCjs(reactExports); - { - react.exports = requireReact_production_min(); - } - return react.exports; -} +var React = /*#__PURE__*/_mergeNamespaces({ + __proto__: null, + default: React__default +}, [reactExports]); /** @license React v17.0.2 * react-jsx-runtime.production.min.js @@ -183,7 +183,7 @@ var hasRequiredReactJsxRuntime_production_min; function requireReactJsxRuntime_production_min () { if (hasRequiredReactJsxRuntime_production_min) return reactJsxRuntime_production_min; hasRequiredReactJsxRuntime_production_min = 1; -requireObjectAssign();var f=requireReact(),g=60103;reactJsxRuntime_production_min.Fragment=60107;if("function"===typeof Symbol&&Symbol.for){var h=Symbol.for;g=h("react.element");reactJsxRuntime_production_min.Fragment=h("react.fragment");}var m=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0}; +requireObjectAssign();var f=reactExports,g=60103;reactJsxRuntime_production_min.Fragment=60107;if("function"===typeof Symbol&&Symbol.for){var h=Symbol.for;g=h("react.element");reactJsxRuntime_production_min.Fragment=h("react.fragment");}var m=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0}; function q(c,a,k){var b,d={},e=null,l=null;void 0!==k&&(e=""+k);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(l=a.ref);for(b in a)n.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return {$$typeof:g,type:c,key:e,ref:l,props:d,_owner:m.current}}reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q; return reactJsxRuntime_production_min; } @@ -259,7 +259,7 @@ var hasRequiredReactDom_production_min; function requireReactDom_production_min () { if (hasRequiredReactDom_production_min) return reactDom_production_min; hasRequiredReactDom_production_min = 1; -var aa=requireReact(),m=requireObjectAssign(),r=requireScheduler();function y(a){for(var b="https://reactjs.org/docs/error-decoder.html?invariant="+a,c=1;c"object"==typeof e&&null!=e&&1===e.nodeType,t=(e,t)=>(!t||"hidden"!==e)&&("visible"!==e&&"clip"!==e),n=(e,n)=>{if(e.clientHeight{let t=(e=>{if(!e.ownerDocument||!e.ownerDocument.defaultView)return null;try{return e.ownerDocument.defaultView.frameElement}catch(e){return null}})(e);return !!t&&(t.clientHeightot||o>e&&r=t&&d>=n?o-e-l:r>t&&dn?r-t+i:0,i=e=>{let t=e.parentElement;return null==t?e.getRootNode().host||null:t};var o=(t,o)=>{var r,d,h,f,u,s;if("undefined"==typeof document)return [];let{scrollMode:a,block:c,inline:g,boundary:m,skipOverflowHiddenElements:p}=o,w="function"==typeof m?m:e=>e!==m;if(!e(t))throw new TypeError("Invalid target");let W=document.scrollingElement||document.documentElement,H=[],b=t;for(;e(b)&&w(b);){if(b=i(b),b===W){H.push(b);break}null!=b&&b===document.body&&n(b)&&!n(document.documentElement)||null!=b&&n(b,p)&&H.push(b);}let v=null!=(d=null==(r=window.visualViewport)?void 0:r.width)?d:innerWidth,y=null!=(f=null==(h=window.visualViewport)?void 0:h.height)?f:innerHeight,E=null!=(u=window.scrollX)?u:pageXOffset,M=null!=(s=window.scrollY)?s:pageYOffset,{height:x,width:I,top:C,right:R,bottom:T,left:V}=t.getBoundingClientRect(),k="start"===c||"nearest"===c?C:"end"===c?T:C+x/2,B="center"===g?V+I/2:"end"===g?R:V,D=[];for(let e=0;e=0&&V>=0&&T<=y&&R<=v&&C>=o&&T<=d&&V>=h&&R<=r)return D;let f=getComputedStyle(t),u=parseInt(f.borderLeftWidth,10),s=parseInt(f.borderTopWidth,10),m=parseInt(f.borderRightWidth,10),p=parseInt(f.borderBottomWidth,10),w=0,b=0,O="offsetWidth"in t?t.offsetWidth-t.clientWidth-u-m:0,X="offsetHeight"in t?t.offsetHeight-t.clientHeight-s-p:0,Y="offsetWidth"in t?0===t.offsetWidth?0:i/t.offsetWidth:0,L="offsetHeight"in t?0===t.offsetHeight?0:n/t.offsetHeight:0;if(W===t)w="start"===c?k:"end"===c?k-y:"nearest"===c?l(M,M+y,y,s,p,M+k,M+k+x,x):k-y/2,b="start"===g?B:"center"===g?B-v/2:"end"===g?B-v:l(E,E+v,v,u,m,E+B,E+B+I,I),w=Math.max(0,w+M),b=Math.max(0,b+E);else {w="start"===c?k-o-s:"end"===c?k-d+p+X:"nearest"===c?l(o,d,n,s,p+X,k,k+x,x):k-(o+n/2)+X/2,b="start"===g?B-h-u:"center"===g?B-(h+i/2)+O/2:"end"===g?B-r+m+O:l(h,r,i,u,m+O,B,B+I,I);let{scrollLeft:e,scrollTop:f}=t;w=Math.max(0,Math.min(f+w/L,t.scrollHeight-n/L+X)),b=Math.max(0,Math.min(e+b/Y,t.scrollWidth-i/Y+O)),k+=f-w,B+=e-b;}D.push({el:t,top:w,left:b});}return D}; -/****************************************************************************** +/*! ***************************************************************************** Copyright (c) Microsoft Corporation. Permission to use, copy, modify, and/or distribute this software for any @@ -16522,7 +16514,7 @@ implementation.exports; exports.__esModule = true; - var _react = requireReact(); + var _react = reactExports; _interopRequireDefault(_react); @@ -16721,7 +16713,7 @@ lib.exports; exports.__esModule = true; - var _react = requireReact(); + var _react = reactExports; var _react2 = _interopRequireDefault(_react); diff --git a/package.json b/package.json index be3981ed3..c84b0ca16 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,6 @@ "zcli": "zcli" }, "dependencies": { - "@zendesk/zcli": "^1.0.0-beta.35", "@zendeskgarden/react-buttons": "^8.69.1", "@zendeskgarden/react-dropdowns.next": "^8.69.1", "@zendeskgarden/react-forms": "^8.69.1", @@ -40,6 +39,7 @@ "@types/styled-components": "^5.1.26", "@typescript-eslint/eslint-plugin": "^6.1.0", "@typescript-eslint/parser": "^6.1.0", + "@zendesk/zcli": "^1.0.0-beta.38", "concurrently": "8.0.1", "dotenv": "16.0.3", "eslint": "8.35.0", diff --git a/script.js b/script.js index 0ff1a8305..16f7674cc 100644 --- a/script.js +++ b/script.js @@ -4,17 +4,15 @@ // Key map const ENTER = 13; const ESCAPE = 27; - const SPACE = 32; - const UP = 38; - const DOWN = 40; - const TAB = 9; function toggleNavigation(toggle, menu) { const isExpanded = menu.getAttribute("aria-expanded") === "true"; + menu.setAttribute("aria-expanded", !isExpanded); toggle.setAttribute("aria-expanded", !isExpanded); } - function closeNavigation(toggle) { + function closeNavigation(toggle, menu) { + menu.setAttribute("aria-expanded", false); toggle.setAttribute("aria-expanded", false); toggle.focus(); } @@ -33,7 +31,7 @@ menuList.addEventListener("keyup", (event) => { if (event.keyCode === ESCAPE) { event.stopPropagation(); - closeNavigation(menuButton); + closeNavigation(menuButton, menuList); } }); @@ -54,7 +52,7 @@ element.addEventListener("keyup", (event) => { console.log("escape"); if (event.keyCode === ESCAPE) { - closeNavigation(toggle); + closeNavigation(toggle, element); } }); }); @@ -79,6 +77,10 @@ }); }); + const isPrintableChar = (str) => { + return str.length === 1 && str.match(/^\S$/); + }; + function Dropdown(toggle, menu) { this.toggle = toggle; this.menu = menu; @@ -91,30 +93,48 @@ this.toggle.addEventListener("click", this.clickHandler.bind(this)); this.toggle.addEventListener("keydown", this.toggleKeyHandler.bind(this)); this.menu.addEventListener("keydown", this.menuKeyHandler.bind(this)); + document.body.addEventListener("click", this.outsideClickHandler.bind(this)); + + const toggleId = this.toggle.getAttribute("id") || crypto.randomUUID(); + const menuId = this.menu.getAttribute("id") || crypto.randomUUID(); + + this.toggle.setAttribute("id", toggleId); + this.menu.setAttribute("id", menuId); + + this.toggle.setAttribute("aria-controls", menuId); + this.menu.setAttribute("aria-labelledby", toggleId); + + this.menu.setAttribute("tabindex", -1); + this.menuItems.forEach((menuItem) => { + menuItem.tabIndex = -1; + }); + + this.focusedIndex = -1; } Dropdown.prototype = { get isExpanded() { - return this.menu.getAttribute("aria-expanded") === "true"; + return this.toggle.getAttribute("aria-expanded") === "true"; }, get menuItems() { return Array.prototype.slice.call( - this.menu.querySelectorAll("[role='menuitem']") + this.menu.querySelectorAll("[role='menuitem'], [role='menuitemradio']") ); }, dismiss: function () { if (!this.isExpanded) return; - this.menu.setAttribute("aria-expanded", false); + this.toggle.removeAttribute("aria-expanded"); this.menu.classList.remove("dropdown-menu-end", "dropdown-menu-top"); + this.focusedIndex = -1; }, open: function () { if (this.isExpanded) return; - this.menu.setAttribute("aria-expanded", true); + this.toggle.setAttribute("aria-expanded", true); this.handleOverflow(); }, @@ -139,95 +159,196 @@ } }, + focusByIndex: function (index) { + if (!this.menuItems.length) return; + + this.menuItems.forEach((item, itemIndex) => { + if (itemIndex === index) { + item.tabIndex = 0; + item.focus(); + } else { + item.tabIndex = -1; + } + }); + + this.focusedIndex = index; + }, + + focusFirstMenuItem: function () { + this.focusByIndex(0); + }, + + focusLastMenuItem: function () { + this.focusByIndex(this.menuItems.length - 1); + }, + focusNextMenuItem: function (currentItem) { if (!this.menuItems.length) return; - var currentIndex = this.menuItems.indexOf(currentItem); - var nextIndex = - currentIndex === this.menuItems.length - 1 || currentIndex < 0 - ? 0 - : currentIndex + 1; + const currentIndex = this.menuItems.indexOf(currentItem); + const nextIndex = (currentIndex + 1) % this.menuItems.length; - this.menuItems[nextIndex].focus(); + this.focusByIndex(nextIndex); }, focusPreviousMenuItem: function (currentItem) { if (!this.menuItems.length) return; - var currentIndex = this.menuItems.indexOf(currentItem); - var previousIndex = + const currentIndex = this.menuItems.indexOf(currentItem); + const previousIndex = currentIndex <= 0 ? this.menuItems.length - 1 : currentIndex - 1; - this.menuItems[previousIndex].focus(); + this.focusByIndex(previousIndex); + }, + + focusByChar: function (currentItem, char) { + char = char.toLowerCase(); + + const itemChars = this.menuItems.map((menuItem) => + menuItem.textContent.trim()[0].toLowerCase() + ); + + const startIndex = + (this.menuItems.indexOf(currentItem) + 1) % this.menuItems.length; + + // look up starting from current index + let index = itemChars.indexOf(char, startIndex); + + // if not found, start from start + if (index === -1) { + index = itemChars.indexOf(char, 0); + } + + if (index > -1) { + this.focusByIndex(index); + } }, - clickHandler: function () { + outsideClickHandler: function (e) { + if ( + this.isExpanded && + !this.toggle.contains(e.target) && + !e.composedPath().includes(this.menu) + ) { + this.dismiss(); + this.toggle.focus(); + } + }, + + clickHandler: function (event) { + event.stopPropagation(); + event.preventDefault(); + if (this.isExpanded) { this.dismiss(); + this.toggle.focus(); } else { this.open(); + this.focusFirstMenuItem(); } }, toggleKeyHandler: function (e) { - switch (e.keyCode) { - case ENTER: - case SPACE: - case DOWN: + const key = e.key; + + switch (key) { + case "Enter": + case " ": + case "ArrowDown": + case "Down": { + e.stopPropagation(); e.preventDefault(); + this.open(); - this.focusNextMenuItem(); + this.focusFirstMenuItem(); break; - case UP: + } + case "ArrowUp": + case "Up": { + e.stopPropagation(); e.preventDefault(); + this.open(); - this.focusPreviousMenuItem(); + this.focusLastMenuItem(); break; - case ESCAPE: + } + case "Esc": + case "Escape": { + e.stopPropagation(); + e.preventDefault(); + this.dismiss(); this.toggle.focus(); break; + } } }, menuKeyHandler: function (e) { - var firstItem = this.menuItems[0]; - var lastItem = this.menuItems[this.menuItems.length - 1]; - var currentElement = e.target; + const key = e.key; + const currentElement = this.menuItems[this.focusedIndex]; + + if (e.ctrlKey || e.altKey || e.metaKey) { + return; + } + + switch (key) { + case "Esc": + case "Escape": { + e.stopPropagation(); + e.preventDefault(); - switch (e.keyCode) { - case ESCAPE: this.dismiss(); this.toggle.focus(); break; - case DOWN: + } + case "ArrowDown": + case "Down": { + e.stopPropagation(); e.preventDefault(); + this.focusNextMenuItem(currentElement); break; - case UP: + } + case "ArrowUp": + case "Up": { + e.stopPropagation(); e.preventDefault(); this.focusPreviousMenuItem(currentElement); break; - case TAB: + } + case "Home": + case "PageUp": { + e.stopPropagation(); + e.preventDefault(); + this.focusFirstMenuItem(); + break; + } + case "End": + case "PageDown": { + e.stopPropagation(); + e.preventDefault(); + this.focusLastMenuItem(); + break; + } + case "Tab": { if (e.shiftKey) { - if (currentElement === firstItem) { - this.dismiss(); - } else { - e.preventDefault(); - this.focusPreviousMenuItem(currentElement); - } - } else if (currentElement === lastItem) { + e.stopPropagation(); + e.preventDefault(); this.dismiss(); + this.toggle.focus(); } else { - e.preventDefault(); - this.focusNextMenuItem(currentElement); + this.dismiss(); } break; - case ENTER: - case SPACE: - e.preventDefault(); - currentElement.click(); - break; + } + default: { + if (isPrintableChar(key)) { + e.stopPropagation(); + e.preventDefault(); + this.focusByChar(currentElement, key); + } + } } }, }; @@ -244,14 +365,6 @@ dropdowns.push(new Dropdown(toggle, menu)); } }); - - document.addEventListener("click", (event) => { - dropdowns.forEach((dropdown) => { - if (!dropdown.toggle.contains(event.target)) { - dropdown.dismiss(); - } - }); - }); }); // Share @@ -527,6 +640,11 @@ requestOrganisationSelect.addEventListener("change", () => { requestOrganisationSelect.form.submit(); }); + + requestOrganisationSelect.addEventListener("click", (e) => { + // Prevents Ticket details collapsible-sidebar to close on mobile + e.stopPropagation(); + }); } // If there are any error notifications below an input field, focus that field diff --git a/yarn.lock b/yarn.lock index 95c69df54..cf2a8d0e3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1935,6 +1935,13 @@ "@types/react" "*" csstype "^3.0.2" +"@types/through@*": + version "0.0.30" + resolved "https://registry.yarnpkg.com/@types/through/-/through-0.0.30.tgz#e0e42ce77e897bd6aead6f6ea62aeb135b8a3895" + integrity sha512-FvnCJljyxhPM3gkRgWmxmDZyAQSiBQQWLI0A0VFL0K7W1oRUrPJSqNO0NvTnLkBcotdlp3lKvaT0JrnyRDkzOg== + dependencies: + "@types/node" "*" + "@types/tough-cookie@*": version "4.0.2" resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.2.tgz#6286b4c7228d58ab7866d19716f3696e03a09397" @@ -2148,7 +2155,7 @@ sass "^1.60.0" ws "^8.13.0" -"@zendesk/zcli@^1.0.0-beta.35": +"@zendesk/zcli@^1.0.0-beta.38": version "1.0.0-beta.38" resolved "https://registry.yarnpkg.com/@zendesk/zcli/-/zcli-1.0.0-beta.38.tgz#c67568c9603e659614a12890beb242dd879fc87f" integrity sha512-I1Rar6AjEJHIC2v2PY5H3IulNA139KjoYJ6inD7saHsneHuaeLd+18q6nQ+bvakfhzZuwzi3B8i/JE9nY6y62g== @@ -8284,7 +8291,7 @@ run-parallel@^1.1.9: dependencies: queue-microtask "^1.2.2" -rxjs@^7.5.5, rxjs@^7.8.0: +rxjs@^7.2.0, rxjs@^7.5.5, rxjs@^7.8.0: version "7.8.1" resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543" integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==