@jobber/components 9.12.0 → 9.12.1

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.
@@ -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('react/jsx-runtime');
@@ -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 'react/jsx-runtime';
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
@@ -14749,6 +14749,16 @@ input.oOrjwubmsVA- {
14749
14749
  margin-bottom: 0;
14750
14750
  }
14751
14751
 
14752
+ /*
14753
+ * Wrapper because a container query can't style the container itself, and
14754
+ * containment on .page would capture fixed/absolute positioning of consumer
14755
+ * content in the page body.
14756
+ */
14757
+ .QY-7D1tlDqY- {
14758
+ container-name: page-titlebar;
14759
+ container-type: inline-size;
14760
+ }
14761
+
14752
14762
  .lbmoDvdtQO4- > ._7t53-bnzh98- {
14753
14763
  -ms-flex: 1 0 auto;
14754
14764
  flex: 1 0 auto;
@@ -14756,36 +14766,6 @@ input.oOrjwubmsVA- {
14756
14766
  align-self: baseline;
14757
14767
  }
14758
14768
 
14759
- .lbmoDvdtQO4-.SH0aNOLVhE8-,
14760
- .lbmoDvdtQO4-.Lc7Z0FsBa6w- {
14761
- display: -ms-flexbox;
14762
- display: flex;
14763
- -ms-flex-wrap: wrap;
14764
- flex-wrap: wrap;
14765
- -ms-flex-pack: justify;
14766
- justify-content: space-between;
14767
- }
14768
-
14769
- .lbmoDvdtQO4-.iF5IA1SYKoA- ._7t53-bnzh98- {
14770
- display: -ms-flexbox;
14771
- display: flex;
14772
- -ms-flex-wrap: wrap;
14773
- flex-wrap: wrap;
14774
- -ms-flex-pack: justify;
14775
- justify-content: space-between;
14776
- }
14777
-
14778
- .lbmoDvdtQO4-.Lc7Z0FsBa6w- ._7t53-bnzh98-,
14779
- .lbmoDvdtQO4-.SH0aNOLVhE8- ._7t53-bnzh98- {
14780
- -ms-flex-wrap: nowrap;
14781
- flex-wrap: nowrap;
14782
- }
14783
-
14784
- .lbmoDvdtQO4-.Lc7Z0FsBa6w- ._7t53-bnzh98- {
14785
- -ms-flex-pack: end;
14786
- justify-content: flex-end;
14787
- }
14788
-
14789
14769
  .g-H7CKkX-LA- {
14790
14770
  -ms-flex: 0 0 100%;
14791
14771
  flex: 0 0 100%;
@@ -14804,30 +14784,76 @@ input.oOrjwubmsVA- {
14804
14784
  width: 100%;
14805
14785
  }
14806
14786
 
14807
- .lbmoDvdtQO4-.iF5IA1SYKoA- .RSP7jHjP-mw- {
14808
- margin-top: 0;
14787
+ .lbmoDvdtQO4- .EqsNMrZVL-8- {
14788
+ margin-bottom: 16px;
14789
+ margin-bottom: var(--space-base);
14809
14790
  }
14810
14791
 
14811
- .lbmoDvdtQO4-.Lc7Z0FsBa6w- .g-H7CKkX-LA-,
14812
- .lbmoDvdtQO4-.Lc7Z0FsBa6w- .RSP7jHjP-mw- {
14813
- margin: 0;
14814
- -ms-flex: 0 auto;
14815
- flex: 0 auto;
14792
+ /*
14793
+ * The wrapper's containment traps trailing title/subtitle margins that used
14794
+ * to collapse out of the (block, below 640px) titlebar into the following
14795
+ * Content spacing; cancel them to keep that spacing unchanged.
14796
+ */
14797
+ @container page-titlebar (width < 640px) {
14798
+ .lbmoDvdtQO4- > :last-child,
14799
+ .lbmoDvdtQO4- > div:last-child > :last-child {
14800
+ margin-bottom: 0;
14801
+ }
14816
14802
  }
14817
14803
 
14818
- .lbmoDvdtQO4-.Lc7Z0FsBa6w- .RSP7jHjP-mw- {
14819
- margin-left: 8px;
14820
- margin-left: var(--space-small);
14821
- }
14804
+ /*
14805
+ * 500/640 are the effective switch points of the replaced useResizeObserver
14806
+ * implementation (it snapped widths to Breakpoints values before comparing).
14807
+ * Hardcoded because @container accepts neither custom media nor var().
14808
+ */
14809
+ @container page-titlebar (min-width: 500px) {
14810
+ .lbmoDvdtQO4- ._7t53-bnzh98- {
14811
+ display: -ms-flexbox;
14812
+ display: flex;
14813
+ -ms-flex-wrap: wrap;
14814
+ flex-wrap: wrap;
14815
+ -ms-flex-pack: justify;
14816
+ justify-content: space-between;
14817
+ }
14822
14818
 
14823
- .lbmoDvdtQO4-.iF5IA1SYKoA- .RSP7jHjP-mw- + .RSP7jHjP-mw- {
14824
- margin-left: 8px;
14825
- margin-left: var(--space-small);
14819
+ .lbmoDvdtQO4- .RSP7jHjP-mw- {
14820
+ margin-top: 0;
14821
+ }
14822
+
14823
+ .lbmoDvdtQO4- .RSP7jHjP-mw- + .RSP7jHjP-mw- {
14824
+ margin-left: 8px;
14825
+ margin-left: var(--space-small);
14826
+ }
14826
14827
  }
14827
14828
 
14828
- .lbmoDvdtQO4- .EqsNMrZVL-8- {
14829
- margin-bottom: 16px;
14830
- margin-bottom: var(--space-base);
14829
+ @container page-titlebar (min-width: 640px) {
14830
+ .lbmoDvdtQO4- {
14831
+ display: -ms-flexbox;
14832
+ display: flex;
14833
+ -ms-flex-wrap: wrap;
14834
+ flex-wrap: wrap;
14835
+ -ms-flex-pack: justify;
14836
+ justify-content: space-between;
14837
+ }
14838
+
14839
+ .lbmoDvdtQO4- ._7t53-bnzh98- {
14840
+ -ms-flex-wrap: nowrap;
14841
+ flex-wrap: nowrap;
14842
+ -ms-flex-pack: end;
14843
+ justify-content: flex-end;
14844
+ }
14845
+
14846
+ .lbmoDvdtQO4- .g-H7CKkX-LA-,
14847
+ .lbmoDvdtQO4- .RSP7jHjP-mw- {
14848
+ margin: 0;
14849
+ -ms-flex: 0 auto;
14850
+ flex: 0 auto;
14851
+ }
14852
+
14853
+ .lbmoDvdtQO4- .RSP7jHjP-mw- {
14854
+ margin-left: 8px;
14855
+ margin-left: var(--space-small);
14856
+ }
14831
14857
  }
14832
14858
 
14833
14859
  @-webkit-keyframes MJZVhEmx6h4- {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jobber/components",
3
- "version": "9.12.0",
3
+ "version": "9.12.1",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
@@ -506,13 +506,11 @@
506
506
  "@storybook/addon-mcp": "^0.4.2",
507
507
  "@storybook/addon-vitest": "10.3.5",
508
508
  "@storybook/react-vite": "10.3.5",
509
- "@types/glob": "^7.1.1",
510
509
  "@types/node": "^22.10.1",
511
510
  "@vitest/browser-playwright": "^4.1.2",
512
511
  "@vitest/coverage-v8": "^4.1.2",
513
512
  "autoprefixer": "^10.4.0",
514
513
  "copyfiles": "^2.4.1",
515
- "glob": "^7.1.4",
516
514
  "jsdom-testing-mocks": "^1.9.0",
517
515
  "playwright": "1.59.1",
518
516
  "postcss": "^8.5.25",
@@ -549,5 +547,5 @@
549
547
  "> 1%",
550
548
  "IE 10"
551
549
  ],
552
- "gitHead": "ae408ecc8d3eecc819118b2932493d653819aa9f"
550
+ "gitHead": "2631b0995f78204f24e3175185951d9b0f1ac4bc"
553
551
  }