@jobber/components 9.6.2 → 9.6.3-JOB-142550-a7d2ff6.7

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 (6) hide show
  1. package/dist/Page/index.cjs +1 -1
  2. package/dist/Page/index.mjs +1 -1
  3. package/dist/Page-cjs.js +20 -31
  4. package/dist/Page-es.js +20 -31
  5. package/dist/styles.css +76 -47
  6. package/package.json +2 -2
package/dist/Page/index.cjs CHANGED
@@ -4,8 +4,8 @@ var Page = require('../Page-cjs.js');
4
4
  require('../tslib.es6-cjs.js');
5
5
  require('react');
6
6
  require('classnames');
7
- require('@jobber/hooks');
8
7
  require('../Menu-cjs.js');
8
+ require('@jobber/hooks');
9
9
  require('framer-motion');
10
10
  require('../floating-ui.react-cjs.js');
11
11
  require('../floating-ui.utils-cjs.js');
package/dist/Page/index.mjs CHANGED
@@ -2,8 +2,8 @@ export { P as Page } from '../Page-es.js';
2
2
  import '../tslib.es6-es.js';
3
3
  import 'react';
4
4
  import 'classnames';
5
- import '@jobber/hooks';
6
5
  import '../Menu-es.js';
6
+ import '@jobber/hooks';
7
7
  import 'framer-motion';
8
8
  import '../floating-ui.react-es.js';
9
9
  import '../floating-ui.utils-es.js';
package/dist/Page-cjs.js CHANGED
@@ -3,7 +3,6 @@
3
3
  var tslib_es6 = require('./tslib.es6-cjs.js');
4
4
  var React = require('react');
5
5
  var classnames = require('classnames');
6
- var jobberHooks = require('@jobber/hooks');
7
6
  var Menu = require('./Menu-cjs.js');
8
7
  var Heading = require('./Heading-cjs.js');
9
8
  var Text = require('./Text-cjs.js');
@@ -15,7 +14,7 @@ var filterDataAttributes = require('./filterDataAttributes-cjs.js');
15
14
  var useAtlantisI18n = require('./useAtlantisI18n-cjs.js');
16
15
  require('./AtlantisContext-cjs.js');
17
16
 
18
- var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA8-","narrow":"qgGzgDyS2NY-","titleBar":"lbmoDvdtQO4-","titleRow":"k9y5NuqTcks-","actionGroup":"_7t53-bnzh98-","large":"SH0aNOLVhE8-","medium":"Lc7Z0FsBa6w-","small":"iF5IA1SYKoA-","primaryAction":"g-H7CKkX-LA-","actionButton":"RSP7jHjP-mw-","subtitle":"EqsNMrZVL-8-","spinning":"MJZVhEmx6h4-"};
17
+ var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA8-","narrow":"qgGzgDyS2NY-","titleBar":"lbmoDvdtQO4-","titleRow":"k9y5NuqTcks-","titleBarContainer":"QY-7D1tlDqY-","actionGroup":"_7t53-bnzh98-","primaryAction":"g-H7CKkX-LA-","actionButton":"RSP7jHjP-mw-","subtitle":"EqsNMrZVL-8-","spinning":"MJZVhEmx6h4-"};
19
18
 
20
19
  const PageContext = React.createContext({ width: undefined });
21
20
  function usePageContext() {
@@ -40,33 +39,28 @@ function Page(props) {
40
39
  function PageLegacy(_a) {
41
40
  var { title, titleMetaData, intro, externalIntroLinks, subtitle, children, primaryAction, secondaryAction, moreActionsMenu = [], pageStyles } = _a, rest = tslib_es6.__rest(_a, ["title", "titleMetaData", "intro", "externalIntroLinks", "subtitle", "children", "primaryAction", "secondaryAction", "moreActionsMenu", "pageStyles"]);
42
41
  const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
43
- const [titleBarRef, { width: titleBarWidth = jobberHooks.Breakpoints.large }] = jobberHooks.useResizeObserver();
44
- const titleBarClasses = classnames(styles.titleBar, {
45
- [styles.small]: titleBarWidth > jobberHooks.Breakpoints.smaller,
46
- [styles.medium]: titleBarWidth > jobberHooks.Breakpoints.small,
47
- [styles.large]: titleBarWidth > jobberHooks.Breakpoints.base,
48
- });
49
42
  const showMenu = moreActionsMenu.length > 0;
50
43
  const showActionGroup = showMenu || primaryAction || secondaryAction;
51
44
  return (React.createElement("div", Object.assign({ className: pageStyles }, dataAttrs),
52
45
  React.createElement(Content.Content, null,
53
46
  React.createElement(Content.Content, null,
54
- React.createElement("div", { className: titleBarClasses, ref: titleBarRef },
55
- React.createElement("div", null,
56
- typeof title === "string" && titleMetaData ? (React.createElement("div", { className: styles.titleRow },
57
- React.createElement(Heading.Heading, { level: 1 }, title),
58
- titleMetaData)) : typeof title === "string" ? (React.createElement(Heading.Heading, { level: 1 }, title)) : (title),
59
- subtitle && (React.createElement("div", { className: styles.subtitle },
60
- React.createElement(Text.Text, { size: "large", variation: "subdued" },
61
- React.createElement(Emphasis.Emphasis, { variation: "bold" },
62
- React.createElement(Markdown.Markdown, { content: subtitle, basicUsage: true })))))),
63
- showActionGroup && (React.createElement("div", { className: styles.actionGroup },
64
- primaryAction && (React.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
65
- React.createElement(Button.Button, Object.assign({}, getActionProps(primaryAction), { fullWidth: true })))),
66
- secondaryAction && (React.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
67
- React.createElement(Button.Button, Object.assign({}, getActionProps(secondaryAction), { fullWidth: true, type: "secondary" })))),
68
- showMenu && (React.createElement("div", { className: styles.actionButton },
69
- React.createElement(Menu.Menu, { items: moreActionsMenu })))))),
47
+ React.createElement("div", { className: styles.titleBarContainer },
48
+ React.createElement("div", { className: styles.titleBar },
49
+ React.createElement("div", null,
50
+ typeof title === "string" && titleMetaData ? (React.createElement("div", { className: styles.titleRow },
51
+ React.createElement(Heading.Heading, { level: 1 }, title),
52
+ titleMetaData)) : typeof title === "string" ? (React.createElement(Heading.Heading, { level: 1 }, title)) : (title),
53
+ subtitle && (React.createElement("div", { className: styles.subtitle },
54
+ React.createElement(Text.Text, { size: "large", variation: "subdued" },
55
+ React.createElement(Emphasis.Emphasis, { variation: "bold" },
56
+ React.createElement(Markdown.Markdown, { content: subtitle, basicUsage: true })))))),
57
+ showActionGroup && (React.createElement("div", { className: styles.actionGroup },
58
+ primaryAction && (React.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
59
+ React.createElement(Button.Button, Object.assign({}, getActionProps(primaryAction), { fullWidth: true })))),
60
+ secondaryAction && (React.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
61
+ React.createElement(Button.Button, Object.assign({}, getActionProps(secondaryAction), { fullWidth: true, type: "secondary" })))),
62
+ showMenu && (React.createElement("div", { className: styles.actionButton },
63
+ React.createElement(Menu.Menu, { items: moreActionsMenu }))))))),
70
64
  intro && (React.createElement(Text.Text, { size: "large" },
71
65
  React.createElement(Markdown.Markdown, { content: intro, basicUsage: true, externalLink: externalIntroLinks })))),
72
66
  React.createElement(Content.Content, null, children))));
@@ -79,13 +73,8 @@ function PageLegacy(_a) {
79
73
  function PageHeader(_a) {
80
74
  var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
81
75
  const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
82
- const [titleBarRef, { width: titleBarWidth = jobberHooks.Breakpoints.large }] = jobberHooks.useResizeObserver();
83
- const titleBarClasses = classnames(styles.titleBar, {
84
- [styles.small]: titleBarWidth > jobberHooks.Breakpoints.smaller,
85
- [styles.medium]: titleBarWidth > jobberHooks.Breakpoints.small,
86
- [styles.large]: titleBarWidth > jobberHooks.Breakpoints.base,
87
- });
88
- return (React.createElement("div", Object.assign({ className: titleBarClasses, ref: titleBarRef }, dataAttrs), children));
76
+ return (React.createElement("div", { className: styles.titleBarContainer },
77
+ React.createElement("div", Object.assign({ className: styles.titleBar }, dataAttrs), children)));
89
78
  }
90
79
  /** Wraps the title area (title, subtitle) inside `Page.Header`. Use when the header contains more than one content element to keep them stacked vertically. */
91
80
  function PageHeaderContent(_a) {
package/dist/Page-es.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { _ as __rest } from './tslib.es6-es.js';
2
2
  import React__default, { createContext, useContext } from 'react';
3
3
  import classnames from 'classnames';
4
- import { useResizeObserver, Breakpoints } from '@jobber/hooks';
5
4
  import { M as Menu, m as menuMessages } from './Menu-es.js';
6
5
  import { H as Heading } from './Heading-es.js';
7
6
  import { T as Text } from './Text-es.js';
@@ -13,7 +12,7 @@ import { f as filterDataAttributes } from './filterDataAttributes-es.js';
13
12
  import { u as useAtlantisI18n } from './useAtlantisI18n-es.js';
14
13
  import './AtlantisContext-es.js';
15
14
 
16
- var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA8-","narrow":"qgGzgDyS2NY-","titleBar":"lbmoDvdtQO4-","titleRow":"k9y5NuqTcks-","actionGroup":"_7t53-bnzh98-","large":"SH0aNOLVhE8-","medium":"Lc7Z0FsBa6w-","small":"iF5IA1SYKoA-","primaryAction":"g-H7CKkX-LA-","actionButton":"RSP7jHjP-mw-","subtitle":"EqsNMrZVL-8-","spinning":"MJZVhEmx6h4-"};
15
+ var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA8-","narrow":"qgGzgDyS2NY-","titleBar":"lbmoDvdtQO4-","titleRow":"k9y5NuqTcks-","titleBarContainer":"QY-7D1tlDqY-","actionGroup":"_7t53-bnzh98-","primaryAction":"g-H7CKkX-LA-","actionButton":"RSP7jHjP-mw-","subtitle":"EqsNMrZVL-8-","spinning":"MJZVhEmx6h4-"};
17
16
 
18
17
  const PageContext = createContext({ width: undefined });
19
18
  function usePageContext() {
@@ -38,33 +37,28 @@ function Page(props) {
38
37
  function PageLegacy(_a) {
39
38
  var { title, titleMetaData, intro, externalIntroLinks, subtitle, children, primaryAction, secondaryAction, moreActionsMenu = [], pageStyles } = _a, rest = __rest(_a, ["title", "titleMetaData", "intro", "externalIntroLinks", "subtitle", "children", "primaryAction", "secondaryAction", "moreActionsMenu", "pageStyles"]);
40
39
  const dataAttrs = filterDataAttributes(rest);
41
- const [titleBarRef, { width: titleBarWidth = Breakpoints.large }] = useResizeObserver();
42
- const titleBarClasses = classnames(styles.titleBar, {
43
- [styles.small]: titleBarWidth > Breakpoints.smaller,
44
- [styles.medium]: titleBarWidth > Breakpoints.small,
45
- [styles.large]: titleBarWidth > Breakpoints.base,
46
- });
47
40
  const showMenu = moreActionsMenu.length > 0;
48
41
  const showActionGroup = showMenu || primaryAction || secondaryAction;
49
42
  return (React__default.createElement("div", Object.assign({ className: pageStyles }, dataAttrs),
50
43
  React__default.createElement(Content, null,
51
44
  React__default.createElement(Content, null,
52
- React__default.createElement("div", { className: titleBarClasses, ref: titleBarRef },
53
- React__default.createElement("div", null,
54
- typeof title === "string" && titleMetaData ? (React__default.createElement("div", { className: styles.titleRow },
55
- React__default.createElement(Heading, { level: 1 }, title),
56
- titleMetaData)) : typeof title === "string" ? (React__default.createElement(Heading, { level: 1 }, title)) : (title),
57
- subtitle && (React__default.createElement("div", { className: styles.subtitle },
58
- React__default.createElement(Text, { size: "large", variation: "subdued" },
59
- React__default.createElement(Emphasis, { variation: "bold" },
60
- React__default.createElement(Markdown, { content: subtitle, basicUsage: true })))))),
61
- showActionGroup && (React__default.createElement("div", { className: styles.actionGroup },
62
- primaryAction && (React__default.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
63
- React__default.createElement(Button, Object.assign({}, getActionProps(primaryAction), { fullWidth: true })))),
64
- secondaryAction && (React__default.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
65
- React__default.createElement(Button, Object.assign({}, getActionProps(secondaryAction), { fullWidth: true, type: "secondary" })))),
66
- showMenu && (React__default.createElement("div", { className: styles.actionButton },
67
- React__default.createElement(Menu, { items: moreActionsMenu })))))),
45
+ React__default.createElement("div", { className: styles.titleBarContainer },
46
+ React__default.createElement("div", { className: styles.titleBar },
47
+ React__default.createElement("div", null,
48
+ typeof title === "string" && titleMetaData ? (React__default.createElement("div", { className: styles.titleRow },
49
+ React__default.createElement(Heading, { level: 1 }, title),
50
+ titleMetaData)) : typeof title === "string" ? (React__default.createElement(Heading, { level: 1 }, title)) : (title),
51
+ subtitle && (React__default.createElement("div", { className: styles.subtitle },
52
+ React__default.createElement(Text, { size: "large", variation: "subdued" },
53
+ React__default.createElement(Emphasis, { variation: "bold" },
54
+ React__default.createElement(Markdown, { content: subtitle, basicUsage: true })))))),
55
+ showActionGroup && (React__default.createElement("div", { className: styles.actionGroup },
56
+ primaryAction && (React__default.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
57
+ React__default.createElement(Button, Object.assign({}, getActionProps(primaryAction), { fullWidth: true })))),
58
+ secondaryAction && (React__default.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
59
+ React__default.createElement(Button, Object.assign({}, getActionProps(secondaryAction), { fullWidth: true, type: "secondary" })))),
60
+ showMenu && (React__default.createElement("div", { className: styles.actionButton },
61
+ React__default.createElement(Menu, { items: moreActionsMenu }))))))),
68
62
  intro && (React__default.createElement(Text, { size: "large" },
69
63
  React__default.createElement(Markdown, { content: intro, basicUsage: true, externalLink: externalIntroLinks })))),
70
64
  React__default.createElement(Content, null, children))));
@@ -77,13 +71,8 @@ function PageLegacy(_a) {
77
71
  function PageHeader(_a) {
78
72
  var { children } = _a, rest = __rest(_a, ["children"]);
79
73
  const dataAttrs = filterDataAttributes(rest);
80
- const [titleBarRef, { width: titleBarWidth = Breakpoints.large }] = useResizeObserver();
81
- const titleBarClasses = classnames(styles.titleBar, {
82
- [styles.small]: titleBarWidth > Breakpoints.smaller,
83
- [styles.medium]: titleBarWidth > Breakpoints.small,
84
- [styles.large]: titleBarWidth > Breakpoints.base,
85
- });
86
- return (React__default.createElement("div", Object.assign({ className: titleBarClasses, ref: titleBarRef }, dataAttrs), children));
74
+ return (React__default.createElement("div", { className: styles.titleBarContainer },
75
+ React__default.createElement("div", Object.assign({ className: styles.titleBar }, dataAttrs), children)));
87
76
  }
88
77
  /** Wraps the title area (title, subtitle) inside `Page.Header`. Use when the header contains more than one content element to keep them stacked vertically. */
89
78
  function PageHeaderContent(_a) {
package/dist/styles.css CHANGED
@@ -13352,6 +13352,17 @@ input.oOrjwubmsVA- {
13352
13352
  margin-bottom: 0;
13353
13353
  }
13354
13354
 
13355
+ /*
13356
+ * Wrapper because a container query can't style the container itself, and
13357
+ * containment on .page would capture fixed/absolute positioning of consumer
13358
+ * content in the page body.
13359
+ */
13360
+
13361
+ .QY-7D1tlDqY- {
13362
+ container-name: page-titlebar;
13363
+ container-type: inline-size;
13364
+ }
13365
+
13355
13366
  .lbmoDvdtQO4- > ._7t53-bnzh98- {
13356
13367
  -ms-flex: 1 0 auto;
13357
13368
  flex: 1 0 auto;
@@ -13359,36 +13370,6 @@ input.oOrjwubmsVA- {
13359
13370
  align-self: baseline;
13360
13371
  }
13361
13372
 
13362
- .lbmoDvdtQO4-.SH0aNOLVhE8-,
13363
- .lbmoDvdtQO4-.Lc7Z0FsBa6w- {
13364
- display: -ms-flexbox;
13365
- display: flex;
13366
- -ms-flex-wrap: wrap;
13367
- flex-wrap: wrap;
13368
- -ms-flex-pack: justify;
13369
- justify-content: space-between;
13370
- }
13371
-
13372
- .lbmoDvdtQO4-.iF5IA1SYKoA- ._7t53-bnzh98- {
13373
- display: -ms-flexbox;
13374
- display: flex;
13375
- -ms-flex-wrap: wrap;
13376
- flex-wrap: wrap;
13377
- -ms-flex-pack: justify;
13378
- justify-content: space-between;
13379
- }
13380
-
13381
- .lbmoDvdtQO4-.Lc7Z0FsBa6w- ._7t53-bnzh98-,
13382
- .lbmoDvdtQO4-.SH0aNOLVhE8- ._7t53-bnzh98- {
13383
- -ms-flex-wrap: nowrap;
13384
- flex-wrap: nowrap;
13385
- }
13386
-
13387
- .lbmoDvdtQO4-.Lc7Z0FsBa6w- ._7t53-bnzh98- {
13388
- -ms-flex-pack: end;
13389
- justify-content: flex-end;
13390
- }
13391
-
13392
13373
  .g-H7CKkX-LA- {
13393
13374
  -ms-flex: 0 0 100%;
13394
13375
  flex: 0 0 100%;
@@ -13407,30 +13388,78 @@ input.oOrjwubmsVA- {
13407
13388
  width: 100%;
13408
13389
  }
13409
13390
 
13410
- .lbmoDvdtQO4-.iF5IA1SYKoA- .RSP7jHjP-mw- {
13411
- margin-top: 0;
13391
+ .lbmoDvdtQO4- .EqsNMrZVL-8- {
13392
+ margin-bottom: 16px;
13393
+ margin-bottom: var(--space-base);
13412
13394
  }
13413
13395
 
13414
- .lbmoDvdtQO4-.Lc7Z0FsBa6w- .g-H7CKkX-LA-,
13415
- .lbmoDvdtQO4-.Lc7Z0FsBa6w- .RSP7jHjP-mw- {
13416
- margin: 0;
13417
- -ms-flex: 0 auto;
13418
- flex: 0 auto;
13419
- }
13396
+ /*
13397
+ * The wrapper's containment traps trailing title/subtitle margins that used
13398
+ * to collapse out of the (block, below 640px) titlebar into the following
13399
+ * Content spacing; cancel them to keep that spacing unchanged.
13400
+ */
13420
13401
 
13421
- .lbmoDvdtQO4-.Lc7Z0FsBa6w- .RSP7jHjP-mw- {
13422
- margin-left: 8px;
13423
- margin-left: var(--space-small);
13402
+ @container page-titlebar (width < 640px) {
13403
+ .lbmoDvdtQO4- > :last-child,
13404
+ .lbmoDvdtQO4- > div:last-child > :last-child {
13405
+ margin-bottom: 0;
13406
+ }
13424
13407
  }
13425
13408
 
13426
- .lbmoDvdtQO4-.iF5IA1SYKoA- .RSP7jHjP-mw- + .RSP7jHjP-mw- {
13427
- margin-left: 8px;
13428
- margin-left: var(--space-small);
13409
+ /*
13410
+ * 500/640 are the effective switch points of the replaced useResizeObserver
13411
+ * implementation (it snapped widths to Breakpoints values before comparing).
13412
+ * Hardcoded because @container accepts neither custom media nor var().
13413
+ */
13414
+
13415
+ @container page-titlebar (min-width: 500px) {
13416
+ .lbmoDvdtQO4- ._7t53-bnzh98- {
13417
+ display: -ms-flexbox;
13418
+ display: flex;
13419
+ -ms-flex-wrap: wrap;
13420
+ flex-wrap: wrap;
13421
+ -ms-flex-pack: justify;
13422
+ justify-content: space-between;
13423
+ }
13424
+
13425
+ .lbmoDvdtQO4- .RSP7jHjP-mw- {
13426
+ margin-top: 0;
13427
+ }
13428
+
13429
+ .lbmoDvdtQO4- .RSP7jHjP-mw- + .RSP7jHjP-mw- {
13430
+ margin-left: 8px;
13431
+ margin-left: var(--space-small);
13432
+ }
13429
13433
  }
13430
13434
 
13431
- .lbmoDvdtQO4- .EqsNMrZVL-8- {
13432
- margin-bottom: 16px;
13433
- margin-bottom: var(--space-base);
13435
+ @container page-titlebar (min-width: 640px) {
13436
+ .lbmoDvdtQO4- {
13437
+ display: -ms-flexbox;
13438
+ display: flex;
13439
+ -ms-flex-wrap: wrap;
13440
+ flex-wrap: wrap;
13441
+ -ms-flex-pack: justify;
13442
+ justify-content: space-between;
13443
+ }
13444
+
13445
+ .lbmoDvdtQO4- ._7t53-bnzh98- {
13446
+ -ms-flex-wrap: nowrap;
13447
+ flex-wrap: nowrap;
13448
+ -ms-flex-pack: end;
13449
+ justify-content: flex-end;
13450
+ }
13451
+
13452
+ .lbmoDvdtQO4- .g-H7CKkX-LA-,
13453
+ .lbmoDvdtQO4- .RSP7jHjP-mw- {
13454
+ margin: 0;
13455
+ -ms-flex: 0 auto;
13456
+ flex: 0 auto;
13457
+ }
13458
+
13459
+ .lbmoDvdtQO4- .RSP7jHjP-mw- {
13460
+ margin-left: 8px;
13461
+ margin-left: var(--space-small);
13462
+ }
13434
13463
  }
13435
13464
 
13436
13465
  .rY8OtuArIi0- {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jobber/components",
3
- "version": "9.6.2",
3
+ "version": "9.6.3-JOB-142550-a7d2ff6.7+a7d2ff60",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
@@ -549,5 +549,5 @@
549
549
  "> 1%",
550
550
  "IE 10"
551
551
  ],
552
- "gitHead": "a3e6d42140c69289bcda7f63dadfc2d47688b5d5"
552
+ "gitHead": "a7d2ff60e266f47c464c609007653a06eb20ce2f"
553
553
  }