@jobber/components 4.42.1 → 4.43.1

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

@@ -1,5 +1,6 @@
 import { ReactElement, ReactNode } from "react";
 import { IconNames } from "@jobber/design";
+import { XOR } from "ts-xor";
 import { Breakpoints } from "./DataList.const";
 import { ButtonProps } from "../Button";
 export { Breakpoints } from "./DataList.const";
@@ -162,13 +163,32 @@ export interface DataListLayoutActionsContextProps<T extends DataListObject> {
     readonly activeItem?: T;
 }
 type Fragment<T> = T | T[];
-export interface DataListItemActionsProps<T extends DataListObject> {
+interface BaseDataListItemActionsProps<T extends DataListObject> {
     /**
      * The actions to render for each item in the DataList. This only accepts the
      * DataList.Action component.
      */
     readonly children?: Fragment<ReactElement<DataListActionProps<T>>>;
+    /**
+     * Callback when an item is clicked.
+     */
+    readonly onClick?: (item: T) => void;
+}
+interface DataListItemActionsPropsWithURL<T extends DataListObject> extends BaseDataListItemActionsProps<T> {
+    /**
+     * If a normal page navigation is needed, use this prop to change the element
+     * to an `a` tag with an `href`.
+     */
+    readonly url?: string | ((item: T) => string);
+}
+interface DataListItemActionsPropsWithTo<T extends DataListObject> extends BaseDataListItemActionsProps<T> {
+    /**
+     * If a React Navigation is needed, use this prop to use the `Link` component
+     * that comes with React Router.
+     */
+    readonly to?: string | ((item: T) => string);
 }
+export type DataListItemActionsProps<T extends DataListObject> = XOR<DataListItemActionsPropsWithURL<T>, DataListItemActionsPropsWithTo<T>>;
 export interface DataListActionProps<T extends DataListObject> {
     /**
      * The label of the action

package/dist/DataList/components/DataListItem/components/DataListItemClickable/DataListItemClickable.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from "react";
+export declare function DataListItemClickable({ children }: PropsWithChildren<object>): JSX.Element;

package/dist/DataList/components/DataListItem/components/DataListItemClickable/DataListItemClickableInternal.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from "react";
+import { DataListItemActionsProps, DataListObject } from "@jobber/components/DataList/DataList.types";
+export declare function DataListItemClickableInternal<T extends DataListObject>({ onClick, url, to, children, }: PropsWithChildren<Pick<DataListItemActionsProps<T>, "onClick" | "url" | "to">>): JSX.Element;

package/dist/DataList/components/DataListItem/components/DataListItemClickable/index.d.ts

@@ -0,0 +1 @@
+export * from "./DataListItemClickable";

package/dist/DataList/components/DataListLayoutActions/DataListLayoutContext/DataListLayoutContext.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { DataListLayoutActionsContextProps, DataListObject } from "@jobber/components/DataList/DataList.types";
 export declare const DataListLayoutActionsContext: import("react").Context<DataListLayoutActionsContextProps<DataListObject>>;
-export declare function useDataListLayoutActionsContext(): DataListLayoutActionsContextProps<DataListObject>;
+export declare function useDataListLayoutActionsContext<T extends DataListObject>(): DataListLayoutActionsContextProps<T>;

package/dist/DataList/index.js

@@ -10,7 +10,7 @@ var Glimmer = require('../Glimmer-cfa92a88.js');
 var framerMotion = require('framer-motion');
 var classnames = require('classnames');
 var noop = require('lodash/noop');
-require('react-router-dom');
+var reactRouterDom = require('react-router-dom');
 var Button = require('../Button-fd8413b2.js');
 var design = require('@jobber/design');
 var Typography = require('../Typography-fd6f932a.js');
@@ -56,8 +56,8 @@ var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles$f);
 var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-var css_248z$e = ".TkdrExYnvcY-,\n.TkdrExYnvcY- * {\n  box-sizing: border-box;\n}\n\n.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  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-pack: center;\n      justify-content: center;\n  min-height: calc(16px * 3);\n  min-height: var(--space-largest);\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.jMSVGIAr5tk- > p {\n  font-weight: 500;\n}\n\n.jMSVGIAr5tk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n}\n\n.ise8kHCfhCY- {\n  position: relative;\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  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ise8kHCfhCY-.Pc0JGX6jCD4- {\n  --data-list-item-active-color: var(--color-surface--background);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--data-list-item-active-color);\n}\n\n.d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: start;\n      align-items: flex-start;\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.d-79rkMqufg-,\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  grid-template-columns: -webkit-max-content minmax(0px, auto);\n  grid-template-columns: max-content minmax(0px, auto);\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          column-gap: var(--space-small);\n}\n\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.qm-SSuWTXkI- {\n  display: -ms-flexbox;\n  display: flex;\n  visibility: hidden;\n}\n\n.qm-SSuWTXkI-.VA9RnQp6nbI- {\n  visibility: visible;\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$e = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","headerBatchSelect":"jMSVGIAr5tk-","listItem":"ise8kHCfhCY-","active":"Pc0JGX6jCD4-","selectable":"d-79rkMqufg-","selectAllCheckbox":"qm-SSuWTXkI-","visible":"VA9RnQp6nbI-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-"};
+var css_248z$e = ".TkdrExYnvcY-,\n.TkdrExYnvcY- * {\n  box-sizing: border-box;\n}\n\n.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/*\n * Header\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  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-pack: center;\n      justify-content: center;\n  min-height: calc(16px * 3);\n  min-height: var(--space-largest);\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.jMSVGIAr5tk- > p {\n  font-weight: 500;\n}\n\n.jMSVGIAr5tk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n}\n\n/*\n * List Item\n */\n\n.ise8kHCfhCY- {\n  position: relative;\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  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ise8kHCfhCY-.Pc0JGX6jCD4-,\n.ise8kHCfhCY-:hover,\n.ise8kHCfhCY-:focus-within {\n  --data-list-item-active-color: var(--color-surface--background);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--data-list-item-active-color);\n}\n\n.Tq6e0BGwcSM- {\n  display: block;\n  margin: calc((16px / 2) * -1) 0;\n  margin: calc(calc(16px / 2) * -1) 0;\n  margin: calc(var(--space-small) * -1) 0;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  text-align: left;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n/**\n * Enable a better hover and focus experience when :has() is supported.\n * This is a workaround for Firefox where the :has() selector is not supported.\n */\n\n@supports selector(*:has(*)) {\n  .ise8kHCfhCY-:hover,\n  .ise8kHCfhCY-:focus-within {\n    background-color: transparent;\n  }\n\n  .ise8kHCfhCY-:has(.Tq6e0BGwcSM-:hover, .Tq6e0BGwcSM-:focus) {\n    background-color: var(--data-list-item-active-color);\n  }\n}\n\n/*\n * List Item Selection\n */\n\n.d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: start;\n      align-items: flex-start;\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.d-79rkMqufg-,\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  grid-template-columns: -webkit-max-content minmax(0px, auto);\n  grid-template-columns: max-content minmax(0px, auto);\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          column-gap: var(--space-small);\n}\n\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n  display: grid;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.qm-SSuWTXkI- {\n  display: -ms-flexbox;\n  display: flex;\n  visibility: hidden;\n}\n\n.qm-SSuWTXkI-.VA9RnQp6nbI- {\n  visibility: visible;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n  -ms-flex-order: 2;\n      order: 2;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n  -ms-flex-order: 1;\n      order: 1;\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- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n    padding-top: 0;\n    opacity: 0;\n}\n  }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :last-child {\n  opacity: 1;\n}\n\n/*\n * Filters\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$e = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","headerBatchSelect":"jMSVGIAr5tk-","listItem":"ise8kHCfhCY-","active":"Pc0JGX6jCD4-","listItemClickable":"Tq6e0BGwcSM-","selectable":"d-79rkMqufg-","selectAllCheckbox":"qm-SSuWTXkI-","visible":"VA9RnQp6nbI-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-"};
 styleInject_es.styleInject(css_248z$e);
 
 var css_248z$d = ".F56prQsXm3A- {\n  min-width: 80px;\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
@@ -128,7 +128,7 @@ function InternalDataListAction({ label, icon, destructive, onClick, item, }) {
             React__default["default"].createElement("span", { className: styles$a.label }, label))));
 }
 
-var css_248z$9 = ".aokwZU8jbWU- {\n  position: fixed;\n  top: 0;\n  top: var(--actions-menu-y, 0);\n  left: 0;\n  left: var(--actions-menu-x, 0);\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  min-width: 150px;\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  padding: calc(16px / 4);\n  padding: var(--space-smaller);\n  border: calc(16px / 16) solid rgb(225, 225, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.XtVRP97TVSE- {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  width: 100%;\n  height: 100%;\n}\n";
+var css_248z$9 = ".aokwZU8jbWU- {\n  position: fixed;\n  top: 0;\n  top: var(--actions-menu-y, 0);\n  left: 0;\n  left: var(--actions-menu-x, 0);\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  min-width: 150px;\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  padding: calc(16px / 4);\n  padding: var(--space-smaller);\n  border: calc(16px / 16) solid rgb(225, 225, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.XtVRP97TVSE- {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: calc(6 - 1);\n  z-index: calc(var(--elevation-menu) - 1);\n  width: 100%;\n  height: 100%;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n}\n";
 var styles$9 = {"menu":"aokwZU8jbWU-","overlay":"XtVRP97TVSE-"};
 styleInject_es.styleInject(css_248z$9);
 
@@ -162,10 +162,9 @@ function DataListActionsMenu({ visible = false, position, onRequestClose, childr
     useRefocusOnActivator.useRefocusOnActivator(visible);
     const focusTrapRef = useFocusTrap.useFocusTrap(visible);
     useOnKeyDown.useOnKeyDown(onRequestClose, "Escape");
-    return ReactDOM.createPortal(React__default["default"].createElement(framerMotion.AnimatePresence, null, visible && (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: styles$9.overlay, onClick: onRequestClose }),
-        React__default["default"].createElement(framerMotion.motion.div, { role: "menu", ref: setRef, variants: variants$1, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: TRANSITION_DELAY_IN_SECONDS }, className: styles$9.menu, style: getPositionCssVars(), onClick: onRequestClose },
-            React__default["default"].createElement("div", { tabIndex: 0, ref: focusTrapRef }, children))))), document.body);
+    return ReactDOM.createPortal(React__default["default"].createElement(framerMotion.AnimatePresence, null, visible && (React__default["default"].createElement("div", { ref: focusTrapRef },
+        React__default["default"].createElement(framerMotion.motion.div, { role: "menu", ref: setRef, variants: variants$1, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: TRANSITION_DELAY_IN_SECONDS }, className: styles$9.menu, style: getPositionCssVars(), onClick: onRequestClose }, children),
+        React__default["default"].createElement("button", { className: styles$9.overlay, onClick: onRequestClose, "aria-label": "Close menu" })))), document.body);
     function getPositionCssVars() {
         const { posX, posY } = getPosition();
         return {
@@ -267,8 +266,8 @@ function DataListItemInternal({ children, item, }) {
         return (React__default["default"].createElement("div", { className: classnames__default["default"](styles__default["default"].selectable, {
                 [styles__default["default"].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));
+            children,
+            React__default["default"].createElement(Checkbox.Checkbox, { checked: selected === null || selected === void 0 ? void 0 : selected.includes(item.id), onChange: handleChange })));
     }
     return children;
     function handleChange() {
@@ -281,6 +280,36 @@ function DataListItemInternal({ children, item, }) {
     }
 }
 
+function DataListItemClickableInternal({ onClick, url, to, children, }) {
+    const { activeItem } = useDataListLayoutActionsContext();
+    if (!activeItem)
+        return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+    if (to) {
+        const computedTo = typeof to === "string" ? to : to(activeItem);
+        return (React__default["default"].createElement(reactRouterDom.Link, { className: styles__default["default"].listItemClickable, to: computedTo, onClick: handleClick }, children));
+    }
+    if (url) {
+        const href = typeof url === "string" ? url : url(activeItem);
+        return (React__default["default"].createElement("a", { className: styles__default["default"].listItemClickable, href: href, onClick: handleClick }, children));
+    }
+    if (onClick) {
+        return (React__default["default"].createElement("button", { className: styles__default["default"].listItemClickable, onClick: handleClick }, children));
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+    function handleClick() {
+        activeItem && (onClick === null || onClick === void 0 ? void 0 : onClick(activeItem));
+    }
+}
+
+function DataListItemClickable({ children }) {
+    const { itemActionComponent } = useDataListContext();
+    if (itemActionComponent) {
+        const props = itemActionComponent.props;
+        return (React__default["default"].createElement(DataListItemClickableInternal, Object.assign({}, props), children));
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+}
+
 var css_248z$8 = ".WRV-UmQmPzo- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  overflow: hidden;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.liQeWCMenD0- {\n  --overflow-bg: var(--data-list-item-active-color, var(--color-surface));\n\n  display: -ms-flexbox;\n\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  padding-left: calc(16px * 1);\n  padding-left: var(--space-base);\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    rgba(255, 255, 255, 1) calc(16px * 1),\n    rgba(255, 255, 255, 1) 100%\n  );\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    var(--overflow-bg) var(--space-base),\n    var(--overflow-bg) 100%\n  );\n  -ms-flex-align: center;\n      align-items: center;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n";
 var styles$8 = {"tags":"WRV-UmQmPzo-","tagCount":"liQeWCMenD0-"};
 styleInject_es.styleInject(css_248z$8);
@@ -447,10 +476,11 @@ function DataListItem({ item, layout, }) {
     const isContextMenuVisible = Boolean(contextPosition);
     const shouldShowContextMenu = showMenu && isContextMenuVisible && Boolean(contextMenuActions);
     return (React__default["default"].createElement(DataListLayoutActionsContext.Provider, { value: { activeItem: item } },
-        React__default["default"].createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onContextMenu: handleContextMenu, className: classnames__default["default"](styles__default["default"].listItem, {
+        React__default["default"].createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: handleContextMenu, className: classnames__default["default"](styles__default["default"].listItem, {
                 [styles__default["default"].active]: showMenu && isContextMenuVisible,
             }), key: item.id },
-            React__default["default"].createElement(DataListItemInternal, { item: item }, layout.props.children(generatedItem)),
+            React__default["default"].createElement(DataListItemInternal, { item: item },
+                React__default["default"].createElement(DataListItemClickable, null, layout.props.children(generatedItem))),
             React__default["default"].createElement(framerMotion.AnimatePresence, null,
                 showMenu && !hasInLayoutActions && (React__default["default"].createElement(InternalDataListItemActions, { item: item })),
                 React__default["default"].createElement(DataListActionsMenu, { key: item.id, visible: shouldShowContextMenu, position: contextPosition || { x: 0, y: 0 }, onRequestClose: () => setContextPosition(undefined) }, contextMenuActions &&

package/dist/Link/Link.d.ts

@@ -1,9 +1,8 @@
 import { PropsWithChildren } from "react";
-interface LinkProps {
+export interface LinkProps {
     readonly url: string;
     readonly ariaLabel?: string;
     readonly ariaExpanded?: boolean;
     readonly external?: boolean;
 }
 export declare function Link({ url, children, ariaLabel, ariaExpanded, external, }: PropsWithChildren<LinkProps>): JSX.Element;
-export {};

package/dist/Link/index.d.ts

@@ -1 +1 @@
-export { Link } from "./Link";
+export { Link, LinkProps } from "./Link";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.42.1",
+  "version": "4.43.1",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@jobber/design": "^0.45.0",
     "@jobber/formatters": "*",
-    "@jobber/hooks": "^2.3.0",
+    "@jobber/hooks": "^2.4.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": "e46abe091488d7bacf653ac8fd7ffb73b575e8aa"
+  "gitHead": "9db197ad3e0e72af56eb5afb88b2f9c21ba8ee27"
 }