@jobber/components 4.40.0 → 4.41.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 (2) hide show
  1. package/dist/DataList/index.js +44 -17
  2. package/package.json +2 -2
package/dist/DataList/index.js CHANGED
@@ -8,10 +8,10 @@ var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
8
8
  var Text = require('../Text-e7ed0974.js');
9
9
  var Glimmer = require('../Glimmer-cfa92a88.js');
10
10
  var framerMotion = require('framer-motion');
11
+ var classnames = require('classnames');
11
12
  var design = require('@jobber/design');
12
13
  var isEmpty = require('lodash/isEmpty');
13
14
  var InlineLabel = require('../InlineLabel-afd5fc6f.js');
14
- var classnames = require('classnames');
15
15
  var FormatDate = require('../FormatDate-70ea5b43.js');
16
16
  var Heading = require('../Heading-a1191b15.js');
17
17
  require('uuid');
@@ -47,12 +47,12 @@ require('../InputValidation-b5a3d92c.js');
47
47
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
48
48
 
49
49
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
50
- var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
51
50
  var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
51
+ var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
52
52
  var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
53
53
 
54
- var css_248z$d = ".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}\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";
55
- var styles$d = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","headerBatchSelect":"jMSVGIAr5tk-","listItem":"ise8kHCfhCY-","selectable":"d-79rkMqufg-","selectAllCheckbox":"qm-SSuWTXkI-","visible":"VA9RnQp6nbI-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-"};
54
+ var css_248z$d = ".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";
55
+ var styles$d = {"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-"};
56
56
  styleInject_es.styleInject(css_248z$d);
57
57
 
58
58
  var css_248z$c = ".F56prQsXm3A- {\n min-width: 80px;\n margin-left: calc(16px / 2);\n margin-left: var(--space-small);\n}\n";
@@ -101,7 +101,7 @@ const DATA_LOAD_MORE_TEST_ID = "ATL-DataList-LoadMore-trigger";
101
101
  const TRANSITION_DURATION_IN_SECONDS = design.tokens["timing-base"] / 1000;
102
102
  const TRANSITION_DELAY_IN_SECONDS = design.tokens["timing-quick"] / 1000;
103
103
 
104
- var css_248z$a = ".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(--color-white);\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}\n";
104
+ var css_248z$a = ".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";
105
105
  var styles$a = {"tags":"WRV-UmQmPzo-","tagCount":"liQeWCMenD0-"};
106
106
  styleInject_es.styleInject(css_248z$a);
107
107
 
@@ -357,7 +357,7 @@ function DataListActionsMenu({ visible = false, position, onRequestClose, childr
357
357
  useOnKeyDown.useOnKeyDown(onRequestClose, "Escape");
358
358
  return (React__default["default"].createElement(framerMotion.AnimatePresence, null, visible && (React__default["default"].createElement(React__default["default"].Fragment, null,
359
359
  React__default["default"].createElement("div", { className: styles$5.overlay, onClick: onRequestClose }),
360
- React__default["default"].createElement(framerMotion.motion.div, { ref: setRef, variants: variants$1, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: TRANSITION_DELAY_IN_SECONDS }, className: styles$5.menu, style: getPositionCssVars() },
360
+ 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$5.menu, style: getPositionCssVars() },
361
361
  React__default["default"].createElement("div", { tabIndex: 0, ref: focusTrapRef }, children))))));
362
362
  function getPositionCssVars() {
363
363
  const { posX, posY } = getPosition();
@@ -419,7 +419,7 @@ function InternalDataListItemActions({ item, }) {
419
419
  return (React__default["default"].createElement(framerMotion.motion.div, { variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
420
420
  duration: TRANSITION_DURATION_IN_SECONDS,
421
421
  delay: TRANSITION_DELAY_IN_SECONDS,
422
- }, className: styles$7.menu },
422
+ }, className: styles$7.menu, onContextMenu: handleContextMenu },
423
423
  exposedActions.map(({ props }) => {
424
424
  if (!props.icon)
425
425
  return null;
@@ -428,6 +428,9 @@ function InternalDataListItemActions({ item, }) {
428
428
  }),
429
429
  React__default["default"].createElement(DataListItemActionsOverflow, { actions: childrenArray, item: item })));
430
430
  }
431
+ function handleContextMenu(event) {
432
+ event.stopPropagation();
433
+ }
431
434
  function getExposedActions(childrenArray) {
432
435
  const firstTwoChildren = childrenArray.slice(0, 2);
433
436
  return firstTwoChildren.reduce((result, child, i) => {
@@ -446,16 +449,40 @@ function getExposedActions(childrenArray) {
446
449
  }
447
450
 
448
451
  function DataListItems({ layouts, mediaMatches, data, }) {
449
- const elementData = generateListItemElements(data);
450
- const [hover, setHover] = React.useState();
451
- return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, mediaMatches: mediaMatches, renderLayout: layout => {
452
- return (React__default["default"].createElement(React__default["default"].Fragment, null, elementData.map((child, i) => {
453
- const item = data[i];
454
- return (React__default["default"].createElement("div", { onMouseEnter: () => setHover(item.id), onMouseLeave: () => setHover(undefined), className: styles$d.listItem, key: item.id },
455
- React__default["default"].createElement(DataListItemInternal, { item: data[i] }, layout.props.children(child)),
456
- React__default["default"].createElement(framerMotion.AnimatePresence, null, hover === item.id && (React__default["default"].createElement(InternalDataListItemActions, { item: item })))));
457
- })));
458
- } }));
452
+ const { itemActionComponent } = useDataListContext();
453
+ const elementData = React.useMemo(() => generateListItemElements(data), [data]);
454
+ const [activeID, setActiveID] = React.useState();
455
+ const [contextPosition, setContextPosition] = React.useState();
456
+ const contextMenuActions = itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children;
457
+ const isContextMenuVisible = Boolean(contextPosition);
458
+ return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, mediaMatches: mediaMatches, renderLayout: layout => (React__default["default"].createElement(React__default["default"].Fragment, null, elementData.map((child, i) => {
459
+ const item = data[i];
460
+ const isActive = activeID === item.id;
461
+ const shouldShowContextMenu = isActive && isContextMenuVisible && Boolean(contextMenuActions);
462
+ return (React__default["default"].createElement("div", { onMouseEnter: handleMouseEnter(item), onMouseLeave: handleMouseLeave, onContextMenu: handleContextMenu, className: classnames__default["default"](styles$d.listItem, {
463
+ [styles$d.active]: isActive && isContextMenuVisible,
464
+ }), key: item.id },
465
+ React__default["default"].createElement(DataListItemInternal, { item: data[i] }, layout.props.children(child)),
466
+ React__default["default"].createElement(framerMotion.AnimatePresence, null,
467
+ isActive && React__default["default"].createElement(InternalDataListItemActions, { item: item }),
468
+ React__default["default"].createElement(DataListActionsMenu, { key: item.id, visible: shouldShowContextMenu, position: contextPosition || { x: 0, y: 0 }, onRequestClose: () => setContextPosition(undefined) }, contextMenuActions &&
469
+ React.Children.map(contextMenuActions, action => (React__default["default"].createElement(InternalDataListAction, Object.assign({ key: item.id }, action.props, { item: item }))))))));
470
+ }))) }));
471
+ function handleMouseEnter(item) {
472
+ return () => setActiveID(item.id);
473
+ }
474
+ function handleMouseLeave() {
475
+ !isContextMenuVisible && setActiveID(undefined);
476
+ }
477
+ function handleContextMenu(event) {
478
+ if (!contextMenuActions || isContextMenuVisible)
479
+ return;
480
+ event.preventDefault();
481
+ setContextPosition({
482
+ x: event.clientX,
483
+ y: event.clientY,
484
+ });
485
+ }
459
486
  }
460
487
 
461
488
  function DataListHeaderCheckbox({ children }) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jobber/components",
3
- "version": "4.40.0",
3
+ "version": "4.41.0",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -84,5 +84,5 @@
84
84
  "> 1%",
85
85
  "IE 10"
86
86
  ],
87
- "gitHead": "621f279e8f27d74e69fd76f63b763e38196cd000"
87
+ "gitHead": "43230912b7cb5c6e144d2d44331dfcc904f6e4ec"
88
88
  }