@jobber/components 4.60.4 → 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/dist/DataList/index.js

@@ -218,14 +218,15 @@ function DataListOverflowFade({ children }) {
             React__default["default"].createElement("span", { ref: rightRef, className: styles$b.overflowTrigger }))));
 }
 
-var css_248z$a = ".WRV-UmQmPzo- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  overflow: hidden;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  white-space: nowrap;\n}\n\n.liQeWCMenD0- {\n  --overflow-bg: var(--data-list-item-active-color, var(--color-surface));\n\n  display: -ms-flexbox;\n\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  padding-left: calc(16px * 1);\n  padding-left: var(--space-base);\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    rgba(255, 255, 255, 1) calc(16px * 1),\n    rgba(255, 255, 255, 1) 100%\n  );\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    var(--overflow-bg) var(--space-base),\n    var(--overflow-bg) 100%\n  );\n  -ms-flex-align: center;\n      align-items: center;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n";
-var styles$a = {"tags":"WRV-UmQmPzo-","tagCount":"liQeWCMenD0-"};
+var css_248z$a = "._8MYxAQYdZzM- {\n  position: relative;\n}\n\n.WRV-UmQmPzo- {\n  display: -ms-flexbox;\n  display: flex;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  overflow: hidden;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  white-space: nowrap;\n}\n\n.ND-cN-mX5-c- {\n  -webkit-mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent calc(16px * 1.5),\n    rgba(0, 0, 0, 1) calc(16px * 3),\n    rgba(0, 0, 0, 1)\n  );\n  -webkit-mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent var(--space-large),\n    rgba(0, 0, 0, 1) var(--space-largest),\n    rgba(0, 0, 0, 1)\n  );\n          mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent calc(16px * 1.5),\n    rgba(0, 0, 0, 1) calc(16px * 3),\n    rgba(0, 0, 0, 1)\n  );\n          mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent var(--space-large),\n    rgba(0, 0, 0, 1) var(--space-largest),\n    rgba(0, 0, 0, 1)\n  );\n}\n\n.liQeWCMenD0- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
+var styles$a = {"tagWrapper":"_8MYxAQYdZzM-","tags":"WRV-UmQmPzo-","tagsMask":"ND-cN-mX5-c-","tagCount":"liQeWCMenD0-"};
 styleInject_es.styleInject(css_248z$a);
 
 function DataListTags({ items }) {
     const ref = React.useRef(null);
     const [visibleIndex, setVisibleIndex] = React.useState([]);
     const visibleItems = visibleIndex.filter(Boolean).length;
+    const shouldShowTagCount = Boolean(visibleItems);
     React.useEffect(() => {
         var _a;
         if (!window.IntersectionObserver)
@@ -240,10 +241,12 @@ function DataListTags({ items }) {
             elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.unobserve(element));
         };
     }, [items]);
-    return (React__default["default"].createElement("div", { className: styles$a.tags, ref: ref },
-        items.filter(Boolean).map((tag, index) => (React__default["default"].createElement("div", { key: tag, "data-tag-element": index },
-            React__default["default"].createElement(InlineLabel.InlineLabel, null, tag)))),
-        Boolean(visibleItems) && (React__default["default"].createElement("div", { className: styles$a.tagCount },
+    return (React__default["default"].createElement("div", { className: styles$a.tagWrapper, ref: ref },
+        React__default["default"].createElement("div", { className: classnames__default["default"](styles$a.tags, {
+                [styles$a.tagsMask]: shouldShowTagCount,
+            }) }, items.filter(Boolean).map((tag, index) => (React__default["default"].createElement("div", { key: tag, "data-tag-element": index },
+            React__default["default"].createElement(InlineLabel.InlineLabel, null, tag))))),
+        shouldShowTagCount && (React__default["default"].createElement("div", { className: styles$a.tagCount },
             React__default["default"].createElement(Text.Text, null,
                 "+",
                 visibleItems)))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.60.4",
+  "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": "4965f5f31932673abb34aacb9bdd581aab33e3fe"
+  "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",