@jobber/components 4.60.5 → 4.60.6

package/dist/Autocomplete/index.js

@@ -7,9 +7,9 @@ var React = require('react');
 var debounce = require('lodash/debounce');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var classnames = require('classnames');
-var useEventListener = require('@use-it/event-listener');
 var ReactDOM = require('react-dom');
 var reactPopper = require('react-popper');
+var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var Text = require('../Text-54334431.js');
 var Icon = require('../Icon-405a216c.js');
 var Heading = require('../Heading-4cde9989.js');
@@ -30,7 +30,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
-var useEventListener__default = /*#__PURE__*/_interopDefaultLegacy(useEventListener);
 
 var css_248z = ".v0Cys9vQ-NE- {\n  position: relative;\n  width: 100%;\n}\n\n.CX-N-e0e6og- {\n  display: none;\n  position: absolute;\n  z-index: calc(6 + 1001);\n  z-index: calc(var(--elevation-menu) + var(--elevation-modal));\n  width: 100%;\n  /* Unfortunately this is how we define our line item picker height in jobber online.\n  This is a concession to maintain visual parity. */\n  max-height: 300px;\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  border: calc(16px / 16) solid var(--color-color-border);\n  border: var(--border-base) solid var(--color-color-border);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  overflow: auto;\n  scroll-behavior: smooth;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.CX-N-e0e6og- h5 {\n  padding: calc(16px / 2) 0 calc(16px / 4) calc(16px / 2);\n  padding: var(--space-small) 0 var(--space-smaller) var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(1, 41, 57);\n  border-bottom: var(--border-base) solid var(--color-border--section);\n}\n\n.CX-N-e0e6og-._4PlUaegVpkk- {\n  display: block;\n}\n\n.CX-N-e0e6og-._4PlUaegVpkk-:empty {\n  display: none;\n}\n\n.ucQtG0iwqbo- {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  -ms-flex-direction: row;\n      flex-direction: row;\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n  -ms-flex-pack: start;\n      justify-content: flex-start;\n  -ms-flex-line-pack: stretch;\n      align-content: stretch;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border: none;\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  text-align: left;\n  list-style: none;\n  background-color: transparent;\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ucQtG0iwqbo-:hover,\n.ucQtG0iwqbo-:focus,\n.ucQtG0iwqbo-.r8HS-ma79QE- {\n  background-color: rgb(250, 246, 219);\n  background-color: var(--color-surface--hover);\n  outline-color: rgb(231, 213, 87);\n  outline-color: var(--color-focus);\n}\n\n.ucQtG0iwqbo-.ydwLX44YFZc-:not(:last-child) {\n  border-bottom: calc(16px / 16) solid rgb(225, 225, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.CX-N-e0e6og-:hover .ucQtG0iwqbo-.r8HS-ma79QE-:not(:hover) {\n  background-color: transparent;\n  outline-color: transparent;\n}\n\n.v0Cys9vQ-NE- .PvUgNoAUG7A-:not(:first-child) {\n  padding-top: calc(16px / 2);\n  padding-top: var(--space-small);\n}\n\n.ucQtG0iwqbo- .DAOOFUZ1BRM- {\n  -ms-flex: 0 1 auto;\n      flex: 0 1 auto;\n  -ms-flex-item-align: auto;\n      align-self: auto;\n  width: calc(16px * 1.5);\n  width: var(--space-large);\n}\n\n.ucQtG0iwqbo- .cjKJFup6hGY- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex: 1 100%;\n      flex: 1 100%;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n}\n\n.ucQtG0iwqbo- .hG5zNBuI2wA- {\n  -ms-flex: 2;\n      flex: 2;\n}\n\n.ucQtG0iwqbo- ._3CwjFCbhqi4- {\n  -ms-flex: 1;\n      flex: 1;\n  -ms-flex-item-align: end;\n      align-self: flex-end;\n  text-align: right;\n}\n";
 var styles = {"autocomplete":"v0Cys9vQ-NE-","options":"CX-N-e0e6og-","visible":"_4PlUaegVpkk-","option":"ucQtG0iwqbo-","active":"r8HS-ma79QE-","separator":"ydwLX44YFZc-","heading":"PvUgNoAUG7A-","icon":"DAOOFUZ1BRM-","text":"cjKJFup6hGY-","label":"hG5zNBuI2wA-","details":"_3CwjFCbhqi4-"};
@@ -78,26 +77,26 @@ function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
                 inline: "start",
             });
         }, [highlightedIndex]);
-        useOnKeyDown("ArrowDown", (event) => {
+        useOnKeyDown.useOnKeyDown((event) => {
             const indexChange = arrowKeyPress(event, IndexChange.Next);
             if (indexChange) {
                 setHighlightedIndex(Math.min(options.length - 1, highlightedIndex + indexChange));
             }
-        });
-        useOnKeyDown("ArrowUp", (event) => {
+        }, "ArrowDown");
+        useOnKeyDown.useOnKeyDown((event) => {
             const indexChange = arrowKeyPress(event, IndexChange.Previous);
             if (indexChange) {
                 setHighlightedIndex(Math.max(0, highlightedIndex + indexChange));
             }
-        });
-        useOnKeyDown("Enter", (event) => {
+        }, "ArrowUp");
+        useOnKeyDown.useOnKeyDown((event) => {
             if (!visible)
                 return;
             if (isGroup(options[highlightedIndex]))
                 return;
             event.preventDefault();
             onOptionSelect(options[highlightedIndex]);
-        });
+        }, "Enter");
     }
     function arrowKeyPress(event, direction) {
         if (!visible)
@@ -112,17 +111,6 @@ function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
 function isOptionSelected(selectedOption, option) {
     return selectedOption && selectedOption.value === option.value;
 }
-// Split this out into a hooks package.
-function useOnKeyDown(keyName, handler) {
-    // Pending: https://github.com/donavon/use-event-listener/pull/12
-    // The types in useEventListener mistakenly require a SyntheticEvent for the passed generic.
-    useEventListener__default["default"]("keydown", event => {
-        const newEvent = event;
-        if (newEvent.key === keyName) {
-            handler(newEvent);
-        }
-    });
-}
 function isGroup(option) {
     if (option.options)
         return true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.60.5",
+  "version": "4.60.6",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@jobber/design": "^0.47.0",
     "@jobber/formatters": "*",
-    "@jobber/hooks": "^2.7.0",
+    "@jobber/hooks": "^2.7.1",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
     "@tanstack/react-table": "8.5.13",
@@ -31,7 +31,6 @@
     "@types/react-router": "5.1.7",
     "@types/react-router-dom": "^5.3.3",
     "@types/uuid": "^8.3.3",
-    "@use-it/event-listener": "^0.1.3",
     "axios": "^0.21.2",
     "classnames": "^2.3.2",
     "color": "^3.1.2",
@@ -84,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "17b4af7f87186237b2b396dcd81a20804777cf2b"
+  "gitHead": "b514c578d69d01182bb0b88080d1b39ea4f94235"
 }

package/rollup.config.js

@@ -63,7 +63,6 @@ export default {
     "uuid",
     new RegExp("lodash/.*"),
     "@std-proposal/temporal",
-    "@use-it/event-listener",
     "@jobber/design",
     "@jobber/design/foundation",
     "@jobber/formatters",