@jobber/components 4.61.0 → 4.63.0

package/dist/ConfirmationModal/index.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ConfirmationModal = require('../ConfirmationModal-285c3cbe.js');
+var ConfirmationModal = require('../ConfirmationModal-467f6d4e.js');
 require('react');
 require('@jobber/hooks/useOnKeyDown');
-require('../Modal-c17cc105.js');
+require('../Modal-7daf6831.js');
 require('react-dom');
 require('classnames');
 require('framer-motion');

package/dist/{ConfirmationModal-285c3cbe.js → ConfirmationModal-467f6d4e.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
-var Modal = require('./Modal-c17cc105.js');
+var Modal = require('./Modal-7daf6831.js');
 var Content = require('./Content-2ca1ffe1.js');
 var Markdown = require('./Markdown-d53b01bf.js');
 

package/dist/DataList/DataList.d.ts

@@ -17,8 +17,8 @@ export declare namespace DataList {
     var Filters: typeof DataListFilters;
     var Search: typeof DataListSearch;
     var ItemActions: typeof DataListItemActions;
-    var BulkActions: typeof DataListBulkActions;
     var ItemAction: typeof DataListAction;
+    var BatchActions: typeof DataListBulkActions;
     var BatchAction: (props: DataListBulkActionProps) => JSX.Element;
     var StatusBar: typeof DataListStatusBar;
 }

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

@@ -92,16 +92,38 @@ export interface DataListProps<T extends DataListObject> {
         readonly state: DataListSorting | undefined;
         readonly onSort: (sorting?: DataListSorting) => void;
     };
+    /**
+     * The list of Selected Item ids
+     */
+    readonly selected?: DataListSelectedType<T["id"]>;
     /**
      * Callback when an item checkbox is clicked.
      */
-    readonly onSelect?: (items: T["id"][]) => void;
+    readonly onSelect?: (selected: DataListSelectedType<T["id"]>) => void;
     /**
-     * The list of Selected Item ids
+     * Callback when the select all checkbox is clicked.
+     */
+    readonly onSelectAll?: (selected: DataListSelectedType<T["id"]>) => void;
+}
+/**
+ * Select all items in the DataList except the ones in the unselected array.
+ *
+ * This is used in scenarios where we need to select all items in the DataList
+ * but couldn't query all the ID's. So instead of feeding all the ID's to the
+ * DataList, we set all checkboxes to be checked except for the items that are
+ * in the unselected array.
+ */
+export interface DataListSelectedAllType<T extends DataListObject = DataListObject> {
+    /**
+     * The total number of selected items in the DataList.
+     */
+    readonly totalCount: number;
+    /**
+     * Track the ID's of the unchecked items.
      */
-    readonly selected?: T["id"][];
-    readonly onSelectAll?: () => void;
+    readonly unselected: T["id"][];
 }
+export type DataListSelectedType<T extends string | number = DataListObject["id"]> = T[] | DataListSelectedAllType;
 export type LayoutRenderer<T extends DataListObject> = (item: DataListItemType<T[]>) => JSX.Element;
 export interface DataListLayoutProps<T extends DataListObject> {
     readonly children: LayoutRenderer<T>;

package/dist/DataList/hooks/useBatchSelect.d.ts

@@ -0,0 +1,13 @@
+import { DataListSelectedType } from "../DataList.types";
+export declare function useBatchSelect(): {
+    canSelect: boolean;
+    canSelectAll: boolean;
+    hasAtLeastOneSelected: boolean;
+    isSelectAll: boolean;
+    isSelectSome: boolean;
+    selectedCount: number;
+    selectedIDs: (string | number)[];
+    selected: DataListSelectedType<string | number> | undefined;
+    onSelect: ((selected: DataListSelectedType<string | number>) => void) | undefined;
+    onSelectAll: ((selected: DataListSelectedType<string | number>) => void) | undefined;
+};

package/dist/DataList/index.d.ts

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

package/dist/DataList/index.js

@@ -509,22 +509,79 @@ function handleContextMenu(event) {
     event.stopPropagation();
 }
 
+function useBatchSelect() {
+    const { selected, onSelect, onSelectAll } = useDataListContext();
+    const isArray = Array.isArray(selected);
+    const selectedIDs = getIDs(selected);
+    const isSelectAll = !isArray;
+    return {
+        canSelect: Boolean(selected && onSelect),
+        canSelectAll: Boolean(onSelect && onSelectAll),
+        hasAtLeastOneSelected: isSelectAll || selectedIDs.length > 0,
+        isSelectAll,
+        isSelectSome: isArray,
+        selectedCount: getSelectedCount(selected),
+        selectedIDs,
+        selected,
+        onSelect,
+        onSelectAll,
+    };
+}
+function getIDs(selected) {
+    if (Array.isArray(selected))
+        return selected;
+    if (selected === undefined)
+        return [];
+    return selected.unselected;
+}
+function getSelectedCount(selected) {
+    if (Array.isArray(selected))
+        return selected.length;
+    if (selected === undefined)
+        return 0;
+    return selected.totalCount - selected.unselected.length;
+}
+
 function DataListItemInternal({ children, item, }) {
-    const { selected, onSelect } = useDataListContext();
-    if (selected !== undefined && onSelect) {
-        return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$f.selectable, {
-                [styles$f.selected]: selected === null || selected === void 0 ? void 0 : selected.length,
-            }) },
-            children,
-            React__default["default"].createElement(Checkbox.Checkbox, { checked: selected === null || selected === void 0 ? void 0 : selected.includes(item.id), onChange: handleChange })));
+    const { canSelect, hasAtLeastOneSelected, isSelectAll, selectedIDs, selected, onSelect, } = useBatchSelect();
+    if (!canSelect)
+        return children;
+    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$f.selectable, {
+            [styles$f.selected]: hasAtLeastOneSelected,
+        }) },
+        children,
+        React__default["default"].createElement(Checkbox.Checkbox, { checked: getIsChecked(), onChange: handleChange })));
+    function getIsChecked() {
+        const isItemInSelectedIDs = selectedIDs.includes(item.id);
+        // If we're in a "select all" state, the selectedID's becomes a list of
+        // unchecked ID's.
+        if (isSelectAll)
+            return !isItemInSelectedIDs;
+        // Otherwise, we're in a "select some" state, so we can just check if the
+        // item is in the selectedIDs list.
+        return isItemInSelectedIDs;
     }
-    return children;
     function handleChange() {
-        if (selected === null || selected === void 0 ? void 0 : selected.includes(item.id)) {
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected === null || selected === void 0 ? void 0 : selected.filter(id => id !== item.id));
+        if (isSelectAll)
+            return handleSelectAllChange();
+        return handleSelectSomeChange();
+    }
+    function handleSelectAllChange() {
+        if (!selected || Array.isArray(selected))
+            return;
+        if (selectedIDs === null || selectedIDs === void 0 ? void 0 : selectedIDs.includes(item.id)) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(Object.assign(Object.assign({}, selected), { unselected: selectedIDs === null || selectedIDs === void 0 ? void 0 : selectedIDs.filter(id => id !== item.id) }));
+        }
+        else if (selectedIDs) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(Object.assign(Object.assign({}, selected), { unselected: [...selectedIDs, item.id] }));
+        }
+    }
+    function handleSelectSomeChange() {
+        if (selectedIDs === null || selectedIDs === void 0 ? void 0 : selectedIDs.includes(item.id)) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedIDs === null || selectedIDs === void 0 ? void 0 : selectedIDs.filter(id => id !== item.id));
         }
-        else if (selected) {
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect([...selected, item.id]);
+        else if (selectedIDs) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect([...selectedIDs, item.id]);
         }
     }
 }
@@ -674,47 +731,69 @@ function InternalDataListBulkActions() {
 }
 
 function DataListHeaderCheckbox({ children }) {
-    const { data, totalCount, selected = [], onSelectAll, onSelect, } = useDataListContext();
-    if (!onSelectAll && !onSelect)
-        return children;
     const { sm } = useResponsiveSizing();
-    // Show "Deselect All" if breakpoint is sm or higher
+    const { data, totalCount } = useDataListContext();
+    const { canSelectAll, hasAtLeastOneSelected, isSelectAll, selectedCount, selectedIDs, selected, onSelectAll, onSelect, } = useBatchSelect();
+    // If there's no onSelectAll or onSelect, we don't need to render the checkbox.
+    if (!canSelectAll)
+        return children;
     const deselectText = sm ? "Deselect All" : "Deselect";
-    const selectedLabel = selected.length ? `${selected.length} selected` : "";
-    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$f.selectable) },
+    const selectedLabel = selectedCount ? `${selectedCount} selected` : "";
+    return (React__default["default"].createElement("div", { className: styles$f.selectable },
         React__default["default"].createElement("div", { className: classnames__default["default"](styles$f.selectAllCheckbox, {
-                [styles$f.visible]: Boolean(onSelectAll),
+                [styles$f.visible]: canSelectAll,
             }) },
-            React__default["default"].createElement(Checkbox.Checkbox, { checked: isAllSelected(), indeterminate: selected.length > 0 && !isAllSelected(), onChange: onSelectAll },
+            React__default["default"].createElement(Checkbox.Checkbox, { checked: isAllSelected(), indeterminate: isIndeterminate(), onChange: handleSelectAll },
                 React__default["default"].createElement("div", { className: styles$f.srOnly }, selectedLabel))),
-        React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: Boolean(selected.length), initialChild: children, switchTo: React__default["default"].createElement("div", { className: styles$f.batchSelectContainer },
+        React__default["default"].createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React__default["default"].createElement("div", { className: styles$f.batchSelectContainer },
                 React__default["default"].createElement("div", { className: styles$f.headerBatchSelect },
-                    React__default["default"].createElement(Text.Text, null,
-                        selected.length,
+                    Boolean(selectedCount) && React__default["default"].createElement(Text.Text, null,
+                        selectedCount,
                         " selected"),
                     React__default["default"].createElement(Button.Button, { label: deselectText, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })),
                 React__default["default"].createElement(InternalDataListBulkActions, null)) })));
+    function isIndeterminate() {
+        if (isSelectAll)
+            return selectedIDs.length > 0;
+        return selectedCount > 0 && !isAllSelected();
+    }
     function isAllSelected() {
+        if (isSelectAll)
+            return true;
         // If there's a totalCount, we can use that to accurately determine if the
         // user have "selected all".
         if (totalCount) {
-            return totalCount === selected.length;
+            return totalCount === selectedCount;
         }
         // Otherwise, we'll use the total count of data. This is not as reliable, as
         // it's possible that the would select all loaded data while we're
         // loading more. It's still hard to get to that state as the load more
         // triggers before you see the last item.
-        return data.length > 0 && selected.length >= data.length;
+        return data.length > 0 && selectedCount >= data.length;
+    }
+    function handleSelectAll() {
+        if (isAllSelected()) {
+            return onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll([]);
+        }
+        onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll({ totalCount: getTotalCount(), unselected: [] });
+    }
+    function getTotalCount() {
+        if (selected && "totalCount" in selected)
+            return selected.totalCount;
+        if (totalCount)
+            return totalCount;
+        return 0;
     }
 }
 
 function DataListHeader() {
     const breakpoints = useResponsiveSizing();
-    const { headerVisibility = { xs: true, sm: true, md: true, lg: true, xl: true }, headers, selected, layoutBreakpoints, } = useDataListContext();
+    const { headerVisibility = { xs: true, sm: true, md: true, lg: true, xl: true }, headers, layoutBreakpoints, } = useDataListContext();
+    const { selectedIDs } = useBatchSelect();
     const size = getVisibleSize();
     const { layout } = useActiveLayout();
     const visible = headerVisibility[size];
-    const noItemsSelected = (selected === null || selected === void 0 ? void 0 : selected.length) === 0;
+    const noItemsSelected = (selectedIDs === null || selectedIDs === void 0 ? void 0 : selectedIDs.length) === 0;
     if ((!visible && noItemsSelected) || !layout)
         return null;
     const headerData = generateHeaderElements(headers);
@@ -1123,18 +1202,18 @@ DataList.Search = DataListSearch;
  * Defines the group actions you could do on a single DataList item.
  */
 DataList.ItemActions = DataListItemActions;
-/**
- * Defines the group actions you could do on multiple DataList items.
- */
-DataList.BulkActions = DataListBulkActions;
 /**
  * Defines the action in a DataList. This should be used inside the
  * DataListItemActions component.
  */
 DataList.ItemAction = DataListAction;
+/**
+ * Defines the group actions you could do on multiple DataList items.
+ */
+DataList.BatchActions = DataListBulkActions;
 /**
  * Defines the batch action in a DataList. This should be used inside the
- * DataListBulkActions component.
+ * DataListBatchActions component.
  */
 DataList.BatchAction = function DataListBatchAction(props) {
     return React__default["default"].createElement(DataListAction, Object.assign({}, props));

package/dist/FormatFile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormatFile = require('../FormatFile-6423c3b5.js');
+var FormatFile = require('../FormatFile-bdd09938.js');
 require('react');
 require('classnames');
 require('filesize');
@@ -12,9 +12,9 @@ require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Typography-83915c54.js');
-require('../ConfirmationModal-285c3cbe.js');
+require('../ConfirmationModal-467f6d4e.js');
 require('@jobber/hooks/useOnKeyDown');
-require('../Modal-c17cc105.js');
+require('../Modal-7daf6831.js');
 require('react-dom');
 require('framer-motion');
 require('@jobber/hooks/useRefocusOnActivator');

package/dist/{FormatFile-6423c3b5.js → FormatFile-bdd09938.js}

@@ -5,7 +5,7 @@ var classnames = require('classnames');
 var getHumanReadableFileSize = require('filesize');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Button = require('./Button-db6114a6.js');
-var ConfirmationModal = require('./ConfirmationModal-285c3cbe.js');
+var ConfirmationModal = require('./ConfirmationModal-467f6d4e.js');
 var Glimmer = require('./Glimmer-cfa92a88.js');
 var Icon = require('./Icon-405a216c.js');
 var Typography = require('./Typography-83915c54.js');

package/dist/Gallery/index.js

@@ -6,7 +6,7 @@ var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var LightBox = require('../LightBox-93ef99b9.js');
-var FormatFile = require('../FormatFile-6423c3b5.js');
+var FormatFile = require('../FormatFile-bdd09938.js');
 var Button = require('../Button-db6114a6.js');
 require('framer-motion');
 require('react-dom');
@@ -16,8 +16,8 @@ require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useFocusTrap');
 require('../ButtonDismiss-1ccb84ec.js');
 require('filesize');
-require('../ConfirmationModal-285c3cbe.js');
-require('../Modal-c17cc105.js');
+require('../ConfirmationModal-467f6d4e.js');
+require('../Modal-7daf6831.js');
 require('../Heading-4cde9989.js');
 require('../Typography-83915c54.js');
 require('../Content-2ca1ffe1.js');

package/dist/Modal/Modal.d.ts

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 import sizes from "./Sizes.css";
 import { ButtonProps } from "../Button";
-interface ModalProps {
+export interface ModalProps {
     /**
      * @default false
      */
@@ -19,4 +19,3 @@ interface ModalProps {
     onRequestClose?(): void;
 }
 export declare function Modal({ open, title, size, dismissible, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }: ModalProps): React.ReactPortal;
-export {};

package/dist/Modal/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Modal = require('../Modal-c17cc105.js');
+var Modal = require('../Modal-7daf6831.js');
 require('react');
 require('react-dom');
 require('classnames');

package/dist/{Modal-c17cc105.js → Modal-7daf6831.js}

@@ -31,7 +31,7 @@ function Modal({ open = false, title, size, dismissible = true, children, primar
     useRefocusOnActivator.useRefocusOnActivator(open);
     const modalRef = useFocusTrap.useFocusTrap(open);
     useOnKeyDown.useOnKeyDown(handleRequestClose, "Escape");
-    const template = (React__default["default"].createElement(framerMotion.AnimatePresence, null, open && (React__default["default"].createElement("div", { ref: modalRef, className: styles.container, tabIndex: 0 },
+    const template = (React__default["default"].createElement(framerMotion.AnimatePresence, null, open && (React__default["default"].createElement("div", { ref: modalRef, role: "dialog", className: styles.container, tabIndex: 0 },
         React__default["default"].createElement(framerMotion.motion.div, { key: styles.overlay, className: styles.overlay, onClick: onRequestClose, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }),
         React__default["default"].createElement(framerMotion.motion.div, { key: styles.modal, className: modalClassName, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
                 duration: 0.2,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.61.0",
+  "version": "4.63.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -83,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "c4ebb94961e32303004d56d30daf6f6489feed0e"
+  "gitHead": "8acc3a5d06d6e04c2718e9ed81990642eaa10157"
 }