@jobber/components 4.34.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/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: 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-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-"};
+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(_) {
@@ -483,14 +506,15 @@ 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() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.34.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": "0ec05cc759f6bc3bb8346239dadbabd009bf8aab"
+  "gitHead": "616c498cc1bfeedcc752700c6bcbc64f4f914350"
 }