@jobber/components 4.42.1 → 4.43.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/DataList/DataList.types.d.ts +21 -1
  2. package/dist/DataList/components/DataListItem/components/DataListItemClickable/DataListItemClickable.d.ts +2 -0
  3. package/dist/DataList/components/DataListItem/components/DataListItemClickable/DataListItemClickableInternal.d.ts +3 -0
  4. package/dist/DataList/components/DataListItem/components/DataListItemClickable/index.d.ts +1 -0
  5. package/dist/DataList/components/DataListLayoutActions/DataListLayoutContext/DataListLayoutContext.d.ts +1 -1
  6. package/dist/DataList/index.js +42 -12
  7. package/package.json +3 -3
package/dist/DataList/DataList.types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { ReactElement, ReactNode } from "react";
2
2
  import { IconNames } from "@jobber/design";
3
+ import { XOR } from "ts-xor";
3
4
  import { Breakpoints } from "./DataList.const";
4
5
  import { ButtonProps } from "../Button";
5
6
  export { Breakpoints } from "./DataList.const";
@@ -162,13 +163,32 @@ export interface DataListLayoutActionsContextProps<T extends DataListObject> {
162
163
  readonly activeItem?: T;
163
164
  }
164
165
  type Fragment<T> = T | T[];
165
- export interface DataListItemActionsProps<T extends DataListObject> {
166
+ interface BaseDataListItemActionsProps<T extends DataListObject> {
166
167
  /**
167
168
  * The actions to render for each item in the DataList. This only accepts the
168
169
  * DataList.Action component.
169
170
  */
170
171
  readonly children?: Fragment<ReactElement<DataListActionProps<T>>>;
172
+ /**
173
+ * Callback when an item is clicked.
174
+ */
175
+ readonly onClick?: (item: T) => void;
176
+ }
177
+ interface DataListItemActionsPropsWithURL<T extends DataListObject> extends BaseDataListItemActionsProps<T> {
178
+ /**
179
+ * If a normal page navigation is needed, use this prop to change the element
180
+ * to an `a` tag with an `href`.
181
+ */
182
+ readonly url?: string | ((item: T) => string);
183
+ }
184
+ interface DataListItemActionsPropsWithTo<T extends DataListObject> extends BaseDataListItemActionsProps<T> {
185
+ /**
186
+ * If a React Navigation is needed, use this prop to use the `Link` component
187
+ * that comes with React Router.
188
+ */
189
+ readonly to?: string | ((item: T) => string);
171
190
  }
191
+ export type DataListItemActionsProps<T extends DataListObject> = XOR<DataListItemActionsPropsWithURL<T>, DataListItemActionsPropsWithTo<T>>;
172
192
  export interface DataListActionProps<T extends DataListObject> {
173
193
  /**
174
194
  * The label of the action
package/dist/DataList/components/DataListItem/components/DataListItemClickable/DataListItemClickable.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { PropsWithChildren } from "react";
2
+ export declare function DataListItemClickable({ children }: PropsWithChildren<object>): JSX.Element;
package/dist/DataList/components/DataListItem/components/DataListItemClickable/DataListItemClickableInternal.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { PropsWithChildren } from "react";
2
+ import { DataListItemActionsProps, DataListObject } from "@jobber/components/DataList/DataList.types";
3
+ 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 ADDED
@@ -0,0 +1 @@
1
+ export * from "./DataListItemClickable";
package/dist/DataList/components/DataListLayoutActions/DataListLayoutContext/DataListLayoutContext.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  /// <reference types="react" />
2
2
  import { DataListLayoutActionsContextProps, DataListObject } from "@jobber/components/DataList/DataList.types";
3
3
  export declare const DataListLayoutActionsContext: import("react").Context<DataListLayoutActionsContextProps<DataListObject>>;
4
- export declare function useDataListLayoutActionsContext(): DataListLayoutActionsContextProps<DataListObject>;
4
+ export declare function useDataListLayoutActionsContext<T extends DataListObject>(): DataListLayoutActionsContextProps<T>;
package/dist/DataList/index.js CHANGED
@@ -10,7 +10,7 @@ var Glimmer = require('../Glimmer-cfa92a88.js');
10
10
  var framerMotion = require('framer-motion');
11
11
  var classnames = require('classnames');
12
12
  var noop = require('lodash/noop');
13
- require('react-router-dom');
13
+ var reactRouterDom = require('react-router-dom');
14
14
  var Button = require('../Button-fd8413b2.js');
15
15
  var design = require('@jobber/design');
16
16
  var Typography = require('../Typography-fd6f932a.js');
@@ -56,8 +56,8 @@ var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles$f);
56
56
  var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
57
57
  var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
58
58
 
59
- 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";
60
- 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-"};
59
+ 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";
60
+ 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-"};
61
61
  styleInject_es.styleInject(css_248z$e);
62
62
 
63
63
  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, }) {
128
128
  React__default["default"].createElement("span", { className: styles$a.label }, label))));
129
129
  }
130
130
 
131
- 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";
131
+ 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";
132
132
  var styles$9 = {"menu":"aokwZU8jbWU-","overlay":"XtVRP97TVSE-"};
133
133
  styleInject_es.styleInject(css_248z$9);
134
134
 
@@ -162,10 +162,9 @@ function DataListActionsMenu({ visible = false, position, onRequestClose, childr
162
162
  useRefocusOnActivator.useRefocusOnActivator(visible);
163
163
  const focusTrapRef = useFocusTrap.useFocusTrap(visible);
164
164
  useOnKeyDown.useOnKeyDown(onRequestClose, "Escape");
165
- return ReactDOM.createPortal(React__default["default"].createElement(framerMotion.AnimatePresence, null, visible && (React__default["default"].createElement(React__default["default"].Fragment, null,
166
- React__default["default"].createElement("div", { className: styles$9.overlay, onClick: onRequestClose }),
167
- 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 },
168
- React__default["default"].createElement("div", { tabIndex: 0, ref: focusTrapRef }, children))))), document.body);
165
+ return ReactDOM.createPortal(React__default["default"].createElement(framerMotion.AnimatePresence, null, visible && (React__default["default"].createElement("div", { ref: focusTrapRef },
166
+ 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),
167
+ React__default["default"].createElement("button", { className: styles$9.overlay, onClick: onRequestClose, "aria-label": "Close menu" })))), document.body);
169
168
  function getPositionCssVars() {
170
169
  const { posX, posY } = getPosition();
171
170
  return {
@@ -267,8 +266,8 @@ function DataListItemInternal({ children, item, }) {
267
266
  return (React__default["default"].createElement("div", { className: classnames__default["default"](styles__default["default"].selectable, {
268
267
  [styles__default["default"].selected]: selected === null || selected === void 0 ? void 0 : selected.length,
269
268
  }) },
270
- React__default["default"].createElement(Checkbox.Checkbox, { checked: selected === null || selected === void 0 ? void 0 : selected.includes(item.id), onChange: handleChange }),
271
- children));
269
+ children,
270
+ React__default["default"].createElement(Checkbox.Checkbox, { checked: selected === null || selected === void 0 ? void 0 : selected.includes(item.id), onChange: handleChange })));
272
271
  }
273
272
  return children;
274
273
  function handleChange() {
@@ -281,6 +280,36 @@ function DataListItemInternal({ children, item, }) {
281
280
  }
282
281
  }
283
282
 
283
+ function DataListItemClickableInternal({ onClick, url, to, children, }) {
284
+ const { activeItem } = useDataListLayoutActionsContext();
285
+ if (!activeItem)
286
+ return React__default["default"].createElement(React__default["default"].Fragment, null, children);
287
+ if (to) {
288
+ const computedTo = typeof to === "string" ? to : to(activeItem);
289
+ return (React__default["default"].createElement(reactRouterDom.Link, { className: styles__default["default"].listItemClickable, to: computedTo, onClick: handleClick }, children));
290
+ }
291
+ if (url) {
292
+ const href = typeof url === "string" ? url : url(activeItem);
293
+ return (React__default["default"].createElement("a", { className: styles__default["default"].listItemClickable, href: href, onClick: handleClick }, children));
294
+ }
295
+ if (onClick) {
296
+ return (React__default["default"].createElement("button", { className: styles__default["default"].listItemClickable, onClick: handleClick }, children));
297
+ }
298
+ return React__default["default"].createElement(React__default["default"].Fragment, null, children);
299
+ function handleClick() {
300
+ activeItem && (onClick === null || onClick === void 0 ? void 0 : onClick(activeItem));
301
+ }
302
+ }
303
+
304
+ function DataListItemClickable({ children }) {
305
+ const { itemActionComponent } = useDataListContext();
306
+ if (itemActionComponent) {
307
+ const props = itemActionComponent.props;
308
+ return (React__default["default"].createElement(DataListItemClickableInternal, Object.assign({}, props), children));
309
+ }
310
+ return React__default["default"].createElement(React__default["default"].Fragment, null, children);
311
+ }
312
+
284
313
  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";
285
314
  var styles$8 = {"tags":"WRV-UmQmPzo-","tagCount":"liQeWCMenD0-"};
286
315
  styleInject_es.styleInject(css_248z$8);
@@ -447,10 +476,11 @@ function DataListItem({ item, layout, }) {
447
476
  const isContextMenuVisible = Boolean(contextPosition);
448
477
  const shouldShowContextMenu = showMenu && isContextMenuVisible && Boolean(contextMenuActions);
449
478
  return (React__default["default"].createElement(DataListLayoutActionsContext.Provider, { value: { activeItem: item } },
450
- React__default["default"].createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onContextMenu: handleContextMenu, className: classnames__default["default"](styles__default["default"].listItem, {
479
+ React__default["default"].createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: handleContextMenu, className: classnames__default["default"](styles__default["default"].listItem, {
451
480
  [styles__default["default"].active]: showMenu && isContextMenuVisible,
452
481
  }), key: item.id },
453
- React__default["default"].createElement(DataListItemInternal, { item: item }, layout.props.children(generatedItem)),
482
+ React__default["default"].createElement(DataListItemInternal, { item: item },
483
+ React__default["default"].createElement(DataListItemClickable, null, layout.props.children(generatedItem))),
454
484
  React__default["default"].createElement(framerMotion.AnimatePresence, null,
455
485
  showMenu && !hasInLayoutActions && (React__default["default"].createElement(InternalDataListItemActions, { item: item })),
456
486
  React__default["default"].createElement(DataListActionsMenu, { key: item.id, visible: shouldShowContextMenu, position: contextPosition || { x: 0, y: 0 }, onRequestClose: () => setContextPosition(undefined) }, contextMenuActions &&
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jobber/components",
3
- "version": "4.42.1",
3
+ "version": "4.43.0",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -21,7 +21,7 @@
21
21
  "dependencies": {
22
22
  "@jobber/design": "^0.45.0",
23
23
  "@jobber/formatters": "*",
24
- "@jobber/hooks": "^2.3.0",
24
+ "@jobber/hooks": "^2.4.0",
25
25
  "@popperjs/core": "^2.0.6",
26
26
  "@std-proposal/temporal": "0.0.1",
27
27
  "@tanstack/react-table": "8.5.13",
@@ -84,5 +84,5 @@
84
84
  "> 1%",
85
85
  "IE 10"
86
86
  ],
87
- "gitHead": "e46abe091488d7bacf653ac8fd7ffb73b575e8aa"
87
+ "gitHead": "f9530a9ef052c5a914c9c9270260b372b720ecf4"
88
88
  }