@jobber/components 4.78.0 → 4.78.2-JOB-87981.8

package/dist/Combobox/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Combobox = require('../Combobox-237caf42.js');
+var Combobox = require('../Combobox-1c91da1f.js');
 require('react');
 require('classnames');
 require('react-dom');

package/dist/{Combobox-237caf42.js → Combobox-1c91da1f.js}

@@ -66,7 +66,7 @@ var css_248z$4 = ".SgMzjOcdE-E- {\n  position: relative;\n  padding: calc(16px /
 var styles$4 = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-","scrollTop":"T6E3VwBGoQM-","scrollNone":"_6HQzxMQkXnE-","scrollBottom":"_5YsJZyMDkbA-","loadingContainer":"A6z4OI58xoE-"};
 styleInject_es.styleInject(css_248z$4);
 
-var css_248z$3 = "._5QdRGmaNHvc- {\n  display: -ms-flexbox;\n  display: flex;\n  min-height: calc((calc(16px * 3) - calc(16px / 4)));\n  min-height: calc((var(--space-largest) - var(--space-smaller)));\n  box-sizing: border-box;\n  margin: 0 calc(16px / 2);\n  margin: 0 var(--space-small);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.jobber-retheme ._5QdRGmaNHvc- {\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n\n._5QdRGmaNHvc-:hover,\n._5QdRGmaNHvc-:focus-visible {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n._5QdRGmaNHvc-:focus,\n._5QdRGmaNHvc-:focus-visible {\n  outline: none;\n}\n\n._5QdRGmaNHvc-: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";
+var css_248z$3 = "._5QdRGmaNHvc- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  min-height: calc((calc(16px * 3) - calc(16px / 4)));\n  min-height: calc((var(--space-largest) - var(--space-smaller)));\n  box-sizing: border-box;\n  margin: 0 calc(16px / 2);\n  margin: 0 var(--space-small);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.jobber-retheme ._5QdRGmaNHvc- {\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n\n._5QdRGmaNHvc-:hover,\n._5QdRGmaNHvc-:focus-visible {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n._5QdRGmaNHvc-:focus,\n._5QdRGmaNHvc-:focus-visible {\n  outline: none;\n}\n\n._5QdRGmaNHvc-: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";
 var styles$3 = {"option":"_5QdRGmaNHvc-"};
 styleInject_es.styleInject(css_248z$3);
 
@@ -82,7 +82,7 @@ function ComboboxOption(props) {
     return (React__default["default"].createElement("li", { key: props.id, tabIndex: -1, "data-selected": isSelected, role: "option", "aria-selected": isSelected, onClick: () => selectionHandler &&
             selectionHandler({ id: props.id, label: props.label }), className: classnames__default["default"](styles$3.option) },
         props.label,
-        isSelected && React__default["default"].createElement(Icon.Icon, { name: "checkmark", color: "blue" })));
+        React__default["default"].createElement("div", null, isSelected && React__default["default"].createElement(Icon.Icon, { name: "checkmark", color: "blue" }))));
 }
 
 function ComboboxContentList(props) {
@@ -123,7 +123,7 @@ function useScrollState(optionsListRef, options) {
                 else if (scrollTop === 0) {
                     setlistScrollState("scrollTop");
                 }
-                else if (scrollTop + clientHeight === scrollHeight) {
+                else if (scrollTop + clientHeight >= scrollHeight) {
                     setlistScrollState("scrollBottom");
                 }
                 else {

package/dist/DataList/DataList.types.d.ts

@@ -39,6 +39,10 @@ export interface SortableOptions {
     readonly label: string;
     readonly order: "asc" | "desc";
 }
+export interface DataListSortable {
+    readonly key: string;
+    readonly options?: SortableOptions[];
+}
 export interface DataListProps<T extends DataListObject> {
     /**
      * The data to render in the DataList.
@@ -92,10 +96,7 @@ export interface DataListProps<T extends DataListObject> {
      * `onSort`: The callback function when the user sorting a column.
      */
     readonly sorting?: {
-        readonly sortable: {
-            key: string;
-            options?: SortableOptions[];
-        }[];
+        readonly sortable: DataListSortable[];
         readonly state: DataListSorting | undefined;
         readonly onSort: (sorting?: DataListSorting) => void;
     };

package/dist/DataList/index.d.ts

@@ -1,2 +1,2 @@
 export * from "./DataList";
-export { DataListItemType, DataListSorting, DataListSelectedType, DataListSelectedAllType, } from "./DataList.types";
+export { DataListItemType, DataListSorting, DataListSortable, DataListSelectedType, DataListSelectedAllType, } from "./DataList.types";

package/dist/DataList/index.js

@@ -26,7 +26,7 @@ var ReactDOM = require('react-dom');
 var Checkbox = require('../Checkbox-99f6297f.js');
 var reactRouterDom = require('react-router-dom');
 var AnimatedSwitcher = require('../AnimatedSwitcher-3d45ec5d.js');
-var Combobox = require('../Combobox-237caf42.js');
+var Combobox = require('../Combobox-1c91da1f.js');
 var Chip = require('../Chip-c91fd6c8.js');
 var debounce = require('lodash/debounce');
 var InputText = require('../InputText-6e356985.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.0",
+  "version": "4.78.2-JOB-87981.8+f4a2d66d",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,8 +20,8 @@
   ],
   "dependencies": {
     "@jobber/design": "^0.53.0",
-    "@jobber/formatters": "*",
-    "@jobber/hooks": "^2.8.1",
+    "@jobber/formatters": "^0.2.2",
+    "@jobber/hooks": "^2.8.2-JOB-87981.36+f4a2d66d",
     "@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": "e6ea2817fa008fa463a8adbc6b918566d05d9d38"
+  "gitHead": "f4a2d66d2549815555e05aec6c5fb09feb09f2c8"
 }