@jobber/components 6.109.2 → 6.109.4

package/dist/Autocomplete/index.cjs

@@ -241,6 +241,24 @@ function createInteractionPointerDownHandler(isHandlingMenuInteractionRef) {
 function useAutocomplete(props) {
     const { menu, emptyActions, getOptionLabel: getOptionLabelProp, isOptionEqualToValue, inputValue, onInputChange, value, onChange, multiple, openOnFocus = true, readOnly = false, debounce: debounceMs = 300, } = props;
     const isHandlingMenuInteractionRef = React.useRef(false);
+    const isValidSingleSelection = (v) => {
+        if (v && typeof v === "object" && "label" in v && v.label) {
+            return true;
+        }
+        return false;
+    };
+    const getSingleSelection = (v) => {
+        if (isValidSingleSelection(v)) {
+            return v;
+        }
+        return undefined;
+    };
+    const getFirstItemFromMultiSelection = (v) => {
+        if (v && Array.isArray(v)) {
+            return v[0];
+        }
+        return undefined;
+    };
     // TODO: Clean up the types in these refs by enhancing the type system in useCallbackRef
     const getOptionLabelPropRef = jobberHooks.useCallbackRef((opt) => getOptionLabelProp === null || getOptionLabelProp === void 0 ? void 0 : getOptionLabelProp(opt));
     const getOptionLabel = React.useCallback((opt) => {
@@ -258,8 +276,7 @@ function useAutocomplete(props) {
             const current = (_a = value) !== null && _a !== void 0 ? _a : [];
             return current.some(v => equals(v, opt));
         }
-        const current = value;
-        return current != null ? equals(current, opt) : false;
+        return isValidSingleSelection(value) ? equals(value, opt) : false;
     }, [multiple, value, equals]);
     const flatInitial = React.useMemo(() => flattenMenu(menu), [menu]);
     const sections = flatInitial.sections;
@@ -344,7 +361,7 @@ function useAutocomplete(props) {
             const current = (_a = value) !== null && _a !== void 0 ? _a : [];
             return Array.isArray(current) && current.length > 0;
         }
-        return value != null;
+        return isValidSingleSelection(value);
     }, [multiple, value]);
     const headerInteractivePersistents = persistentsHeaders.filter(p => Boolean(p.onClick));
     const footerInteractivePersistents = persistentsFooters.filter(p => Boolean(p.onClick));
@@ -355,8 +372,8 @@ function useAutocomplete(props) {
     // Compute the currently selected index in the global navigable list (header -> middle -> footer)
     const selectedIndex = React.useMemo(() => {
         const selectedValue = multiple
-            ? value === null || value === void 0 ? void 0 : value[0]
-            : value;
+            ? getFirstItemFromMultiSelection(value)
+            : getSingleSelection(value);
         if (!selectedValue)
             return null;
         const middleIndex = findNavigableIndexForValue(renderable, equals, selectedValue);
@@ -442,8 +459,8 @@ function useAutocomplete(props) {
         if (!hasSelection)
             return;
         const selectedValue = multiple
-            ? value === null || value === void 0 ? void 0 : value[0]
-            : value;
+            ? getFirstItemFromMultiSelection(value)
+            : getSingleSelection(value);
         if (!selectedValue)
             return;
         const idx = findNavigableIndexForValue(renderable, equals, selectedValue);
@@ -466,8 +483,8 @@ function useAutocomplete(props) {
         // - If there is a current selection, highlight that option
         // - Otherwise, leave the highlight unset (null)
         const selectedValue = multiple
-            ? value === null || value === void 0 ? void 0 : value[0]
-            : value;
+            ? getFirstItemFromMultiSelection(value)
+            : getSingleSelection(value);
         if (selectedValue) {
             const selectedNavigableIndex = findNavigableIndexForValue(renderable, equals, selectedValue);
             if (selectedNavigableIndex != null) {
@@ -521,8 +538,8 @@ function useAutocomplete(props) {
         if (props.allowFreeForm === true)
             return;
         const selectedValue = multiple
-            ? value === null || value === void 0 ? void 0 : value[0]
-            : value;
+            ? getFirstItemFromMultiSelection(value)
+            : getSingleSelection(value);
         if (!selectedValue)
             return;
         const selectedLabel = getOptionLabel(selectedValue);

package/dist/Autocomplete/index.mjs

@@ -239,6 +239,24 @@ function createInteractionPointerDownHandler(isHandlingMenuInteractionRef) {
 function useAutocomplete(props) {
     const { menu, emptyActions, getOptionLabel: getOptionLabelProp, isOptionEqualToValue, inputValue, onInputChange, value, onChange, multiple, openOnFocus = true, readOnly = false, debounce: debounceMs = 300, } = props;
     const isHandlingMenuInteractionRef = useRef(false);
+    const isValidSingleSelection = (v) => {
+        if (v && typeof v === "object" && "label" in v && v.label) {
+            return true;
+        }
+        return false;
+    };
+    const getSingleSelection = (v) => {
+        if (isValidSingleSelection(v)) {
+            return v;
+        }
+        return undefined;
+    };
+    const getFirstItemFromMultiSelection = (v) => {
+        if (v && Array.isArray(v)) {
+            return v[0];
+        }
+        return undefined;
+    };
     // TODO: Clean up the types in these refs by enhancing the type system in useCallbackRef
     const getOptionLabelPropRef = useCallbackRef((opt) => getOptionLabelProp === null || getOptionLabelProp === void 0 ? void 0 : getOptionLabelProp(opt));
     const getOptionLabel = useCallback((opt) => {
@@ -256,8 +274,7 @@ function useAutocomplete(props) {
             const current = (_a = value) !== null && _a !== void 0 ? _a : [];
             return current.some(v => equals(v, opt));
         }
-        const current = value;
-        return current != null ? equals(current, opt) : false;
+        return isValidSingleSelection(value) ? equals(value, opt) : false;
     }, [multiple, value, equals]);
     const flatInitial = useMemo(() => flattenMenu(menu), [menu]);
     const sections = flatInitial.sections;
@@ -342,7 +359,7 @@ function useAutocomplete(props) {
             const current = (_a = value) !== null && _a !== void 0 ? _a : [];
             return Array.isArray(current) && current.length > 0;
         }
-        return value != null;
+        return isValidSingleSelection(value);
     }, [multiple, value]);
     const headerInteractivePersistents = persistentsHeaders.filter(p => Boolean(p.onClick));
     const footerInteractivePersistents = persistentsFooters.filter(p => Boolean(p.onClick));
@@ -353,8 +370,8 @@ function useAutocomplete(props) {
     // Compute the currently selected index in the global navigable list (header -> middle -> footer)
     const selectedIndex = useMemo(() => {
         const selectedValue = multiple
-            ? value === null || value === void 0 ? void 0 : value[0]
-            : value;
+            ? getFirstItemFromMultiSelection(value)
+            : getSingleSelection(value);
         if (!selectedValue)
             return null;
         const middleIndex = findNavigableIndexForValue(renderable, equals, selectedValue);
@@ -440,8 +457,8 @@ function useAutocomplete(props) {
         if (!hasSelection)
             return;
         const selectedValue = multiple
-            ? value === null || value === void 0 ? void 0 : value[0]
-            : value;
+            ? getFirstItemFromMultiSelection(value)
+            : getSingleSelection(value);
         if (!selectedValue)
             return;
         const idx = findNavigableIndexForValue(renderable, equals, selectedValue);
@@ -464,8 +481,8 @@ function useAutocomplete(props) {
         // - If there is a current selection, highlight that option
         // - Otherwise, leave the highlight unset (null)
         const selectedValue = multiple
-            ? value === null || value === void 0 ? void 0 : value[0]
-            : value;
+            ? getFirstItemFromMultiSelection(value)
+            : getSingleSelection(value);
         if (selectedValue) {
             const selectedNavigableIndex = findNavigableIndexForValue(renderable, equals, selectedValue);
             if (selectedNavigableIndex != null) {
@@ -519,8 +536,8 @@ function useAutocomplete(props) {
         if (props.allowFreeForm === true)
             return;
         const selectedValue = multiple
-            ? value === null || value === void 0 ? void 0 : value[0]
-            : value;
+            ? getFirstItemFromMultiSelection(value)
+            : getSingleSelection(value);
         if (!selectedValue)
             return;
         const selectedLabel = getOptionLabel(selectedValue);

package/dist/DataTable/components/DataTableFooter.d.ts

@@ -1,9 +1,5 @@
 import React from "react";
 export interface DataTableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {
     readonly children: React.ReactNode;
-    /**
-     * Number of columns to span across. This should match the number of columns in your table.
-     */
-    readonly colSpan: number;
 }
-export declare function DataTableFooter({ children, className, colSpan, ...props }: DataTableFooterProps): React.JSX.Element;
+export declare function DataTableFooter({ children, className, ...props }: DataTableFooterProps): React.JSX.Element;

package/dist/DataTableTable-cjs.js

@@ -59,10 +59,8 @@ function DataTableContainer(props) {
 }
 
 function DataTableFooter(_a) {
-    var { children, className, colSpan } = _a, props = tslib_es6.__rest(_a, ["children", "className", "colSpan"]);
-    return (React.createElement("tfoot", Object.assign({}, props, { className: classnames(styles.footer, className) }),
-        React.createElement("tr", null,
-            React.createElement("td", { colSpan: colSpan }, children))));
+    var { children, className } = _a, props = tslib_es6.__rest(_a, ["children", "className"]);
+    return (React.createElement("tfoot", Object.assign({}, props, { className: classnames(styles.footer, className) }), children));
 }
 
 function DataTableHeader(props) {

package/dist/DataTableTable-es.js

@@ -57,10 +57,8 @@ function DataTableContainer(props) {
 }
 
 function DataTableFooter(_a) {
-    var { children, className, colSpan } = _a, props = __rest(_a, ["children", "className", "colSpan"]);
-    return (React__default.createElement("tfoot", Object.assign({}, props, { className: classnames(styles.footer, className) }),
-        React__default.createElement("tr", null,
-            React__default.createElement("td", { colSpan: colSpan }, children))));
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return (React__default.createElement("tfoot", Object.assign({}, props, { className: classnames(styles.footer, className) }), children));
 }
 
 function DataTableHeader(props) {

package/dist/styles.css

@@ -6724,6 +6724,8 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 .thJ-CSoe0ps- {
   padding: 8px 16px;
   padding: var(--space-small) var(--space-base);
+  border-top: 1px solid hsl(200, 13%, 87%);
+  border-top: var(--border-base) solid var(--color-border);
 }
 
  {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.109.2",
+  "version": "6.109.4",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "210d6b515ba31e1f62cfc7ef55633d733952cbd2"
+  "gitHead": "8774f1709929f5e6dec002492593914bd8cb035d"
 }