@jobber/components 4.77.2 → 4.77.4

package/dist/Combobox/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Combobox = require('../Combobox-6e7dbc9c.js');
+var Combobox = require('../Combobox-d85ce78c.js');
 require('react');
 require('classnames');
 require('react-dom');
@@ -27,6 +27,7 @@ require('color');
 require('../Tooltip-27771182.js');
 require('framer-motion');
 require('lodash/debounce');
+require('lodash/noop');
 require('@jobber/hooks/useAssert');
 
 

package/dist/{Combobox-6e7dbc9c.js → Combobox-d85ce78c.js}

@@ -16,6 +16,7 @@ var reactPopper = require('react-popper');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var Chip = require('./Chip-c91fd6c8.js');
 var debounce = require('lodash/debounce');
+var noop = require('lodash/noop');
 require('@jobber/design');
 var useAssert = require('@jobber/hooks/useAssert');
 
@@ -25,6 +26,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
 
 var css_248z$6 = ".m1w5vdUZ6rQ- {\n  z-index: 1002;\n  z-index: var(--elevation-tooltip);\n  width: calc((16px * 4) * 3.75);\n  width: calc(calc(16px * 4) * 3.75);\n  width: calc(var(--space-extravagant) * 3.75);\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  margin-top: calc(16px / 2);\n  margin-top: var(--space-small);\n  border: calc(16px / 16) solid rgb(217, 223, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  overflow: auto;\n  background: rgba(255, 255, 255, 1);\n  background: var(--color-surface);\n}\n\n.jobber-retheme .m1w5vdUZ6rQ- {\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n\n/* CAUTION: Tests for content visibility assume this class' presence hides the content\n* so please be careful if you change this class name, or the css rules within.\n*/\n\n.m1w5vdUZ6rQ-.Zlkv2HA096A- {\n  display: none;\n  visibility: hidden;\n}\n\n.m1w5vdUZ6rQ-:focus,\n.m1w5vdUZ6rQ-:focus-visible {\n  outline: none;\n}\n\n.m1w5vdUZ6rQ-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.YQry-Rd6zfQ- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: sticky;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n  bottom: 0;\n  width: 100%;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.TcpqL34s4lI- {\n  padding-bottom: calc(16px / 2);\n  padding-bottom: var(--space-small);\n}\n";
 var styles$6 = {"content":"m1w5vdUZ6rQ-","hidden":"Zlkv2HA096A-","actions":"YQry-Rd6zfQ-","actionPadding":"TcpqL34s4lI-"};
@@ -373,15 +375,9 @@ function useCombobox(selected, onSelect, options, onClose, multiSelect, onSearch
     const shouldScroll = React.useRef(false);
     const [open, setOpen] = React.useState(false);
     const [searchValue, setSearchValue] = React.useState("");
-    const [internalFilteredOptions, setInternalFilteredOptions] = React.useState(options);
-    const searchCallback = React.useCallback(debounce__default["default"]((value) => onSearch && onSearch(value), debounceTime), []);
-    const debouncedFilterOptions = React.useCallback((value) => {
-        const filtered = options.filter(option => {
-            return option.label.toLowerCase().includes(value.toLowerCase());
-        });
-        setInternalFilteredOptions(filtered);
-    }, []);
+    const searchCallback = React.useCallback(debounce__default["default"]((value) => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value), debounceTime), [onSearch, debounceTime]);
     const { handleClose, handleSelection } = useMakeComboboxHandlers(setOpen, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose);
+    const internalFilteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase()));
     return {
         wrapperRef,
         searchValue,
@@ -394,7 +390,7 @@ function useCombobox(selected, onSelect, options, onClose, multiSelect, onSearch
         handleClose,
         handleSelection,
         internalFilteredOptions,
-        handleSearchChange: onSearch ? searchCallback : debouncedFilterOptions,
+        handleSearchChange: onSearch ? searchCallback : noop__default["default"],
     };
 }
 

package/dist/DataList/index.js

@@ -26,7 +26,7 @@ var ReactDOM = require('react-dom');
 var Checkbox = require('../Checkbox-1cdd5cf6.js');
 var reactRouterDom = require('react-router-dom');
 var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
-var Combobox = require('../Combobox-6e7dbc9c.js');
+var Combobox = require('../Combobox-d85ce78c.js');
 var Chip = require('../Chip-c91fd6c8.js');
 var debounce = require('lodash/debounce');
 var InputText = require('../InputText-9e61365c.js');
@@ -345,21 +345,22 @@ function DataListHeaderTile({ headers, headerKey, visible = false, }) {
         React__default["default"].createElement(Text.Text, { maxLines: "single" }, headers[headerKey]),
         isSortable && (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) && isDropDownOpen && (React__default["default"].createElement(DataListSortingOptions, { options: sortableItem.options, selectedOption: (sorting === null || sorting === void 0 ? void 0 : sorting.state) || null, onSelectChange: handleSelectChange, onClose: () => setIsDropDownOpen(false), optionsListRef: optionsListRef, dataListHeaderTileRef: dataListHeaderTileRef })),
         (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey ? (React__default["default"].createElement(DataListSortingArrows, { order: sortingState.order })) : (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) !== headerKey && isSortable ? (React__default["default"].createElement(DataListSortingArrows, { order: "none" })) : null));
-    function toggleSorting(sortingKey, id, label, order) {
-        const isSameKey = (sortingState === null || sortingState === void 0 ? void 0 : sortingState.label) === label && sortingKey === (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key);
+    function toggleSorting(newSortingKey, newId, newLabel, newOrder) {
+        const isSameKey = newSortingKey === (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key);
         const isDescending = (sortingState === null || sortingState === void 0 ? void 0 : sortingState.order) === "desc";
-        if (isSameKey && isDescending && order !== "asc") {
-            if (order === "desc")
-                return;
+        if (isSameKey && isDescending && newOrder === undefined) {
             sorting === null || sorting === void 0 ? void 0 : sorting.onSort(undefined);
             return;
         }
-        const sortingOrder = order || (isSameKey && !isDescending ? "desc" : "asc");
+        const sortingOrder = newOrder || (isSameKey && !isDescending ? "desc" : "asc");
+        setSorting(newSortingKey, newId, newLabel, sortingOrder);
+    }
+    function setSorting(newSortingKey, newId, newLabel, newOrder) {
         sorting === null || sorting === void 0 ? void 0 : sorting.onSort({
-            key: sortingKey,
-            id,
-            label,
-            order: sortingOrder,
+            key: newSortingKey,
+            id: newId,
+            label: newLabel,
+            order: newOrder,
         });
     }
     function handleOnClick() {
@@ -379,7 +380,7 @@ function DataListHeaderTile({ headers, headerKey, visible = false, }) {
     }
     function handleSelectChange(newSortOption) {
         if (sortableItem) {
-            toggleSorting(sortableItem.key, newSortOption.id, newSortOption.label, newSortOption.order);
+            setSorting(sortableItem.key, newSortOption.id, newSortOption.label, newSortOption.order);
         }
         setIsDropDownOpen(true);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.77.2",
+  "version": "4.77.4",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "b1e06d1334c34d9a11b4106fceafb869a7e34079"
+  "gitHead": "c9d875673aae72b4ba26698297d7c1f78af10db0"
 }