@jobber/components 4.78.2 → 4.78.4

package/dist/DataList/index.js

@@ -304,13 +304,13 @@ styleInject_es.styleInject(css_248z$8);
 function DataListSortingOptions({ options, selectedOption, onSelectChange, onClose, optionsListRef, dataListHeaderTileRef, }) {
     useRefocusOnActivator.useRefocusOnActivator(!optionsListRef.current);
     useOnKeyDown.useOnKeyDown(() => onClose(), "Escape");
-    React__default["default"].useEffect(() => {
+    React.useEffect(() => {
         document.addEventListener("mousedown", handleClickOutside);
         return () => {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [optionsListRef, dataListHeaderTileRef, onClose]);
-    return (React__default["default"].createElement("ul", { className: styles$8.optionsList, ref: optionsListRef }, options.map((option, index) => (React__default["default"].createElement("li", { className: styles$8.option, key: index, onClick: () => onSelectChange(option), onKeyDown: event => handleKeyDown(event, option), tabIndex: 0, "data-value": option.id },
+    return (React__default["default"].createElement("ul", { className: styles$8.optionsList, ref: optionsListRef }, options.map(option => (React__default["default"].createElement("li", { className: styles$8.option, key: option.id, onClick: () => onSelectChange(option), onKeyDown: event => handleKeyDown(event, option), tabIndex: 0, "data-value": option.id },
         option.label,
         option.label === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && (React__default["default"].createElement(Icon.Icon, { name: "checkmark", color: "blue" })))))));
     function handleKeyDown(event, option) {
@@ -320,9 +320,9 @@ function DataListSortingOptions({ options, selectedOption, onSelectChange, onClo
     }
     function handleClickOutside(event) {
         var _a, _b;
-        const isClickInsideOptions = (_a = optionsListRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target);
-        const isClickInsideHeader = (_b = dataListHeaderTileRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target);
-        if (!isClickInsideOptions && !isClickInsideHeader) {
+        const isClickInside = ((_a = optionsListRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) ||
+            ((_b = dataListHeaderTileRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target));
+        if (!isClickInside) {
             onClose();
         }
     }
@@ -332,9 +332,9 @@ function DataListSortingOptions({ options, selectedOption, onSelectChange, onClo
 function DataListHeaderTile({ headers, headerKey, visible = false, }) {
     useRefocusOnActivator.useRefocusOnActivator(visible);
     const { sorting } = useDataListContext();
-    const [isDropDownOpen, setIsDropDownOpen] = React__default["default"].useState(false);
+    const [isDropDownOpen, setIsDropDownOpen] = React.useState(false);
     const optionsListRef = useFocusTrap.useFocusTrap(isDropDownOpen);
-    const dataListHeaderTileRef = React__default["default"].useRef(null);
+    const dataListHeaderTileRef = React.useRef(null);
     const sortableItem = sorting === null || sorting === void 0 ? void 0 : sorting.sortable.find(item => item.key === headerKey);
     const isSortable = Boolean(sortableItem);
     const sortingState = sorting === null || sorting === void 0 ? void 0 : sorting.state;
@@ -344,15 +344,15 @@ function DataListHeaderTile({ headers, headerKey, visible = false, }) {
         }), onClick: handleOnClick, ref: dataListHeaderTileRef },
         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(newSortingKey, newId, newLabel, newOrder) {
+        isSortable && (React__default["default"].createElement(DataListSortingArrows, { order: (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey ? sortingState.order : "none" }))));
+    function toggleSorting(newSortingKey, newId, newLabel) {
         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 && newOrder === undefined) {
+        if (isSameKey && isDescending) {
             sorting === null || sorting === void 0 ? void 0 : sorting.onSort(undefined);
             return;
         }
-        const sortingOrder = newOrder || (isSameKey && !isDescending ? "desc" : "asc");
+        const sortingOrder = isSameKey ? "desc" : "asc";
         setSorting(newSortingKey, newId, newLabel, sortingOrder);
     }
     function setSorting(newSortingKey, newId, newLabel, newOrder) {
@@ -371,11 +371,8 @@ function DataListHeaderTile({ headers, headerKey, visible = false, }) {
             setIsDropDownOpen(!isDropDownOpen);
         }
         else {
-            const headerValue = headers[headerKey];
             const id = ((_b = (_a = sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id) || headerKey;
-            if (headerValue !== undefined) {
-                toggleSorting(id, headerKey, headerValue);
-            }
+            toggleSorting(id, headerKey, headers[headerKey]);
         }
     }
     function handleSelectChange(newSortOption) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.78.2",
+  "version": "4.78.4",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@jobber/design": "^0.53.0",
     "@jobber/formatters": "*",
-    "@jobber/hooks": "^2.8.1",
+    "@jobber/hooks": "^2.8.2",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
     "@tanstack/react-table": "8.5.13",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "bace74cb8766041101b9a376ff372a78bc6c6386"
+  "gitHead": "f1a0ac8ba5499c0d892c534a5916c2c799e85ad7"
 }