@jobber/components 4.33.0 → 4.35.0

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

@@ -76,6 +76,14 @@ export interface DataListProps<T extends DataListObject> {
      * The callback function when the user scrolls to the bottom of the list.
      */
     readonly onLoadMore?: () => void;
+    /**
+     * Callback when an item checkbox is clicked.
+     */
+    readonly onSelect?: (items: T["id"][]) => void;
+    /**
+     * The list of Selected Item ids
+     */
+    readonly selected?: T["id"][];
 }
 export interface DataListLayoutProps<T extends DataListObject> {
     readonly children: (item: DataListItemType<T[]>) => JSX.Element;

package/dist/DataList/components/DataListLayoutInternal/DataListItemInternal.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DataListObject } from "../../DataList.types";
+interface ListItemInternalProps<T extends DataListObject> {
+    readonly children: JSX.Element;
+    readonly item: T;
+}
+export declare function DataListItemInternal<T extends DataListObject>({ children, item, }: ListItemInternalProps<T>): JSX.Element;
+export {};

package/dist/DataList/components/DataListLoadMore/DataListLoadMore.d.ts

@@ -1,2 +1,7 @@
 /// <reference types="react" />
-export declare function DataListLoadMore(): JSX.Element;
+interface DataListLoadMoreProps {
+    readonly onBackToTop: () => void;
+}
+export declare const MAX_DATA_COUNT = 50;
+export declare function DataListLoadMore({ onBackToTop }: DataListLoadMoreProps): JSX.Element;
+export {};

package/dist/DataList/components/DataListLoadMore/DataListLoadMoreTrigger.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function DataListLoadMoreTrigger(): JSX.Element;

package/dist/DataList/context/DataListContext/DataListContext.d.ts

@@ -5,6 +5,7 @@ export declare const defaultValues: {
     data: never[];
     headers: {};
     children: never[];
+    selected: never[];
 };
 export declare const DataListContext: import("react").Context<DataListContextProps<DataListObject>>;
 export declare function useDataListContext(): DataListContextProps<DataListObject>;

package/dist/DataList/index.js

@@ -12,6 +12,9 @@ var InlineLabel = require('../InlineLabel-afd5fc6f.js');
 var FormatDate = require('../FormatDate-70ea5b43.js');
 var Heading = require('../Heading-a1191b15.js');
 var classnames = require('classnames');
+require('uuid');
+require('react-hook-form');
+var Checkbox = require('../Checkbox-3bccf65c.js');
 require('../Typography-fd6f932a.js');
 var useInView = require('@jobber/hooks/useInView');
 var debounce = require('lodash/debounce');
@@ -21,10 +24,8 @@ var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
 var Spinner = require('../Spinner-9d8fc7ff.js');
 require('../tslib.es6-5b8768b7.js');
 require('../Content-2ca1ffe1.js');
-require('../FormField-0f880b07.js');
-require('uuid');
-require('react-hook-form');
 require('../Icon-405a216c.js');
+require('../FormField-0f880b07.js');
 require('../InputValidation-b5a3d92c.js');
 require('framer-motion');
 require('react-router-dom');
@@ -36,8 +37,8 @@ var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-var css_248z$8 = ".TkdrExYnvcY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  -ms-flex: 1;\n      flex: 1;\n}\n\n.IcAlZHoB4LI- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.TFO76ysivmg- {\n  display: grid;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  gap: calc(16px / 2);\n  grid-gap: calc(16px / 2);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-template-columns: auto -webkit-max-content;\n  grid-template-columns: auto max-content;\n}\n\n.jGHZZYZm1ZY- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 8) solid rgb(225, 225, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.Gj9kAGnfKco- > * {\n  font-weight: 500;\n}\n\n.ise8kHCfhCY- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(225, 225, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.Kkp-IYmwq-s- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgba(255, 255, 255, 0.6);\n  background-color: var(--color-overlay--dimmed);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.m-eCShL7TU4- {\n  position: sticky;\n  top: 50vh;\n}\n\n.xeUxuTlqQtk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n}\n";
-var styles$8 = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","headerLabel":"Gj9kAGnfKco-","listItem":"ise8kHCfhCY-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-","loadingMore":"xeUxuTlqQtk-"};
+var css_248z$8 = ".TkdrExYnvcY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  -ms-flex: 1;\n      flex: 1;\n}\n\n.IcAlZHoB4LI- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.TFO76ysivmg- {\n  display: grid;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  gap: calc(16px / 2);\n  grid-gap: calc(16px / 2);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-template-columns: auto -webkit-max-content;\n  grid-template-columns: auto max-content;\n}\n\n.jGHZZYZm1ZY- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 8) solid rgb(225, 225, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.Gj9kAGnfKco- > * {\n  font-weight: 500;\n}\n\n.ise8kHCfhCY- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(225, 225, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.d-79rkMqufg- {\n  display: grid;\n  -webkit-column-gap: calc(16px / 2);\n  -webkit-column-gap: var(--space-small);\n     -moz-column-gap: calc(16px / 2);\n     -moz-column-gap: var(--space-small);\n          column-gap: calc(16px / 2);\n          grid-column-gap: calc(16px / 2);\n          grid-column-gap: var(--space-small);\n          column-gap: var(--space-small);\n  -ms-flex-align: start;\n      align-items: flex-start;\n  grid-template-columns: -webkit-max-content minmax(0px, auto);\n  grid-template-columns: max-content minmax(0px, auto);\n}\n\n@media (min-width: 768px) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.d-79rkMqufg- {\n    -ms-flex-align: center;\n        align-items: center;\n}\n  }\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n  padding-top: calc(16px / 4);\n  padding-top: var(--space-smaller);\n  opacity: 1;\n  transition: opacity 100ms ease-in-out;\n  transition: opacity var(--transition-properties);\n  --transition-properties: var(--timing-quick) ease-in-out;\n}\n\n@media (min-width: 768px) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :first-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :first-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :first-child {\n  opacity: 1;\n}\n\n.Kkp-IYmwq-s- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgba(255, 255, 255, 0.6);\n  background-color: var(--color-overlay--dimmed);\n  -ms-flex-align: start;\n      align-items: flex-start;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.m-eCShL7TU4- {\n  position: sticky;\n  top: 50vh;\n}\n";
+var styles$8 = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","headerLabel":"Gj9kAGnfKco-","listItem":"ise8kHCfhCY-","selectable":"d-79rkMqufg-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-"};
 styleInject_es.styleInject(css_248z$8);
 
 var css_248z$7 = ".F56prQsXm3A- {\n  min-width: 80px;\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
@@ -227,11 +228,44 @@ function isLayoutVisible({ layoutSize, mediaMatches, sizePropsOfLayouts, }) {
     return isVisibleBreakpoint && largerLayoutIsNotVisible;
 }
 
+const defaultValues = {
+    title: "",
+    data: [],
+    headers: {},
+    children: [],
+    selected: [],
+};
+const DataListContext = React.createContext(defaultValues);
+function useDataListContext() {
+    return React.useContext(DataListContext);
+}
+
+function DataListItemInternal({ children, item, }) {
+    const { selected, onSelect } = useDataListContext();
+    if (selected !== undefined && onSelect) {
+        return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$8.selectable, {
+                [styles$8.selected]: selected === null || selected === void 0 ? void 0 : selected.length,
+            }) },
+            React__default["default"].createElement(Checkbox.Checkbox, { checked: selected === null || selected === void 0 ? void 0 : selected.includes(item.id), onChange: handleChange }),
+            children));
+    }
+    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));
+        }
+        else if (selected) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect([...selected, item.id]);
+        }
+    }
+}
+
 function DataListItems({ layouts, mediaMatches, data, }) {
     const elementData = generateListItemElements(data);
     return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, mediaMatches: mediaMatches, renderLayout: layout => {
             return (React__default["default"].createElement(React__default["default"].Fragment, null, elementData.map((child, i) => {
-                return (React__default["default"].createElement("div", { className: styles$8.listItem, key: `${data[i].id}` }, layout.props.children(child)));
+                return (React__default["default"].createElement("div", { className: styles$8.listItem, key: `${data[i].id}` },
+                    React__default["default"].createElement(DataListItemInternal, { item: data[i] }, layout.props.children(child))));
             })));
         } }));
 }
@@ -286,17 +320,6 @@ styleInject_es.styleInject(css_248z$4);
 
 const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
 
-const defaultValues = {
-    title: "",
-    data: [],
-    headers: {},
-    children: [],
-};
-const DataListContext = React.createContext(defaultValues);
-function useDataListContext() {
-    return React.useContext(DataListContext);
-}
-
 // This component is meant to capture the props of the DataList.Filters
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function DataListFilters(_) {
@@ -432,11 +455,11 @@ function getEmptyStates(components) {
     return { defaultEmptyState, filteredEmptyState };
 }
 
-var css_248z = ".IC-Y9bTIVFo- {\n  position: relative;\n  -webkit-transform: translateY(calc((16px * 3) * -1));\n  -webkit-transform: translateY(calc(calc(16px * 3) * -1));\n  -webkit-transform: translateY(calc(var(--space-largest) * -1));\n          transform: translateY(calc((16px * 3) * -1));\n          transform: translateY(calc(calc(16px * 3) * -1));\n          transform: translateY(calc(var(--space-largest) * -1));\n}\n";
-var styles = {"trigger":"IC-Y9bTIVFo-"};
+var css_248z = ".IC-Y9bTIVFo- {\n  position: relative;\n  -webkit-transform: translateY(calc((16px * 3) * -1));\n  -webkit-transform: translateY(calc(calc(16px * 3) * -1));\n  -webkit-transform: translateY(calc(var(--space-largest) * -1));\n          transform: translateY(calc((16px * 3) * -1));\n          transform: translateY(calc(calc(16px * 3) * -1));\n          transform: translateY(calc(var(--space-largest) * -1));\n}\n\n.PbZLGpbI6ZM-,\n._6zA6B-jmz6o- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n}\n\n._6zA6B-jmz6o- {\n  opacity: 0;\n  -webkit-animation: gZ4DUv82g5I- 200ms ease 200ms forwards;\n  -webkit-animation: gZ4DUv82g5I- var(--timing-base) ease var(--timing-base) forwards;\n          animation: gZ4DUv82g5I- 200ms ease 200ms forwards;\n          animation: gZ4DUv82g5I- var(--timing-base) ease var(--timing-base) forwards;\n}\n\n@-webkit-keyframes gZ4DUv82g5I- {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes gZ4DUv82g5I- {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n";
+var styles = {"trigger":"IC-Y9bTIVFo-","loadingMore":"PbZLGpbI6ZM-","backToTop":"_6zA6B-jmz6o-","fadeIn":"gZ4DUv82g5I-"};
 styleInject_es.styleInject(css_248z);
 
-function DataListLoadMore() {
+function DataListLoadMoreTrigger() {
     const { onLoadMore } = useDataListContext();
     const [inViewRef, isInView] = useInView.useInView();
     React.useEffect(() => {
@@ -445,6 +468,18 @@ function DataListLoadMore() {
     return (React__default["default"].createElement("div", { ref: inViewRef, className: styles.trigger, "data-testid": DATA_LOAD_MORE_TEST_ID }));
 }
 
+const MAX_DATA_COUNT = 50;
+function DataListLoadMore({ onBackToTop }) {
+    const { loadingState, data } = useDataListContext();
+    const showBackToTop = data.length > MAX_DATA_COUNT && loadingState !== "loadingMore";
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(DataListLoadMoreTrigger, { key: data.length }),
+        loadingState === "loadingMore" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_LOADING_MORE_SPINNER_TEST_ID, className: styles.loadingMore },
+            React__default["default"].createElement(Spinner.Spinner, { size: "small" }))),
+        showBackToTop && (React__default["default"].createElement("div", { className: styles.backToTop },
+            React__default["default"].createElement(Button.Button, { label: "Back to top", onClick: onBackToTop, size: "small", variation: "subtle" })))));
+}
+
 function useLayoutMediaQueries() {
     const mediaQueries = BREAKPOINTS.reduce((previous, breakpoint) => (Object.assign(Object.assign({}, previous), { [breakpoint]: window.matchMedia(breakpointToMediaQuery(breakpoint)) })), {});
     const initialMatches = BREAKPOINTS.reduce((previous, breakpoint) => (Object.assign(Object.assign({}, previous), { [breakpoint]: mediaQueries[breakpoint].matches })), {});
@@ -471,18 +506,20 @@ function breakpointToMediaQuery(breakpoint) {
 }
 
 function DataList(props) {
+    var _a;
     const searchComponent = getCompoundComponent(props.children, DataListSearch);
     const filterComponent = getCompoundComponent(props.children, DataListFilters);
     const layoutComponents = getCompoundComponents(props.children, DataListLayout);
     const emptyStateComponents = getCompoundComponents(props.children, DataListEmptyState);
-    return (React__default["default"].createElement(DataListContext.Provider, { value: Object.assign({ searchComponent,
+    return (React__default["default"].createElement(DataListContext.Provider, { value: Object.assign(Object.assign({ searchComponent,
             filterComponent,
             layoutComponents,
-            emptyStateComponents }, props) },
+            emptyStateComponents }, props), { selected: (_a = props.selected) !== null && _a !== void 0 ? _a : [] }) },
         React__default["default"].createElement(InternalDataList, null)));
 }
 function InternalDataList() {
     const { data, headers, title, totalCount, headerVisibility = { xs: true, sm: true, md: true, lg: true, xl: true }, loadingState = "none", layoutComponents, } = useDataListContext();
+    const backToTopRef = React.useRef(null);
     const headerData = generateHeaderElements(headers);
     const mediaMatches = useLayoutMediaQueries();
     const initialLoading = loadingState === "initial";
@@ -492,6 +529,7 @@ function InternalDataList() {
         React__default["default"].createElement("div", { className: styles$8.titleContainer },
             title && React__default["default"].createElement(Heading.Heading, { level: 3 }, title),
             React__default["default"].createElement(DataListTotalCount, { totalCount: totalCount, loading: initialLoading })),
+        React__default["default"].createElement("div", { ref: backToTopRef }),
         React__default["default"].createElement(DataListStickyHeader, null,
             React__default["default"].createElement("div", { className: styles$8.headerFilters },
                 React__default["default"].createElement(InternalDataListFilters, null),
@@ -503,9 +541,19 @@ function InternalDataList() {
         loadingState === "filtering" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_FILTERING_SPINNER_TEST_ID, className: styles$8.filtering },
             React__default["default"].createElement("div", { className: styles$8.filteringSpinner },
                 React__default["default"].createElement(Spinner.Spinner, { size: "small" })))),
-        shouldRenderLoadMoreTrigger && React__default["default"].createElement(DataListLoadMore, null),
-        loadingState === "loadingMore" && (React__default["default"].createElement("div", { "data-testid": DATA_LIST_LOADING_MORE_SPINNER_TEST_ID, className: styles$8.loadingMore },
-            React__default["default"].createElement(Spinner.Spinner, { size: "small" })))));
+        shouldRenderLoadMoreTrigger && (React__default["default"].createElement(DataListLoadMore, { onBackToTop: handleBackToTop }))));
+    function handleBackToTop() {
+        var _a;
+        // For testing purposes since jest doesn't know scrollIntoView.
+        // This prevents consumer's tests from needing to mock scrollIntoView.
+        if (!window.HTMLElement.prototype.scrollIntoView)
+            return;
+        (_a = backToTopRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "start",
+        });
+    }
 }
 DataList.Layout = DataListLayout;
 DataList.EmptyState = DataListEmptyState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.33.0",
+  "version": "4.35.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@jobber/design": "^0.44.4",
     "@jobber/formatters": "*",
-    "@jobber/hooks": "^2.2.1",
+    "@jobber/hooks": "^2.3.0",
     "@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": "4ad7db01af3c57a0eefed5e714059615d71b56d3"
+  "gitHead": "616c498cc1bfeedcc752700c6bcbc64f4f914350"
 }