@jobber/components 6.106.0 → 6.106.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.
Files changed (7) hide show
  1. package/dist/Page/Page.d.ts +1 -1
  2. package/dist/Page/index.cjs +2 -1
  3. package/dist/Page/index.mjs +2 -1
  4. package/dist/Page-cjs.js +20 -27
  5. package/dist/Page-es.js +20 -27
  6. package/dist/styles.css +22 -34
  7. package/package.json +2 -2
package/dist/Page/Page.d.ts CHANGED
@@ -4,7 +4,7 @@ import type { XOR } from "ts-xor";
4
4
  import { type ButtonProps } from "../Button";
5
5
  import { type SectionProps } from "../Menu";
6
6
  export type ButtonActionProps = ButtonProps & {
7
- ref?: React.RefObject<HTMLDivElement>;
7
+ ref?: React.RefObject<HTMLDivElement | null>;
8
8
  };
9
9
  interface PageFoundationProps {
10
10
  readonly children: ReactNode | ReactNode[];
package/dist/Page/index.cjs CHANGED
@@ -3,7 +3,6 @@
3
3
  var Page = require('../Page-cjs.js');
4
4
  require('react');
5
5
  require('classnames');
6
- require('@jobber/hooks');
7
6
  require('../Heading-cjs.js');
8
7
  require('../Typography-cjs.js');
9
8
  require('../Text-cjs.js');
@@ -19,12 +18,14 @@ require('../Icon-cjs.js');
19
18
  require('@jobber/design');
20
19
  require('../Menu-cjs.js');
21
20
  require('framer-motion');
21
+ require('@jobber/hooks');
22
22
  require('../floating-ui.react-cjs.js');
23
23
  require('react-dom');
24
24
  require('../Tree-cjs.js');
25
25
  require('../clsx-cjs.js');
26
26
  require('../useFormFieldFocus-cjs.js');
27
27
  require('../maxHeight-cjs.js');
28
+ require('../Container-cjs.js');
28
29
 
29
30
 
30
31
 
package/dist/Page/index.mjs CHANGED
@@ -1,7 +1,6 @@
1
1
  export { P as Page } from '../Page-es.js';
2
2
  import 'react';
3
3
  import 'classnames';
4
- import '@jobber/hooks';
5
4
  import '../Heading-es.js';
6
5
  import '../Typography-es.js';
7
6
  import '../Text-es.js';
@@ -17,9 +16,11 @@ import '../Icon-es.js';
17
16
  import '@jobber/design';
18
17
  import '../Menu-es.js';
19
18
  import 'framer-motion';
19
+ import '@jobber/hooks';
20
20
  import '../floating-ui.react-es.js';
21
21
  import 'react-dom';
22
22
  import '../Tree-es.js';
23
23
  import '../clsx-es.js';
24
24
  import '../useFormFieldFocus-es.js';
25
25
  import '../maxHeight-es.js';
26
+ import '../Container-es.js';
package/dist/Page-cjs.js CHANGED
@@ -2,7 +2,6 @@
2
2
 
3
3
  var React = require('react');
4
4
  var classnames = require('classnames');
5
- var jobberHooks = require('@jobber/hooks');
6
5
  var Heading = require('./Heading-cjs.js');
7
6
  var Text = require('./Text-cjs.js');
8
7
  var Content = require('./Content-cjs.js');
@@ -10,17 +9,12 @@ var Markdown = require('./Markdown-cjs.js');
10
9
  var Button = require('./Button-cjs.js');
11
10
  var Menu = require('./Menu-cjs.js');
12
11
  var Emphasis = require('./Emphasis-cjs.js');
12
+ var Container = require('./Container-cjs.js');
13
13
 
14
- 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-"};
14
+ var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA8-","narrow":"qgGzgDyS2NY-","titleBar":"lbmoDvdtQO4-","titleRow":"k9y5NuqTcks-","actionGroup":"_7t53-bnzh98-","primaryAction":"g-H7CKkX-LA-","actionButton":"RSP7jHjP-mw-","subtitle":"EqsNMrZVL-8-","spinning":"MJZVhEmx6h4-"};
15
15
 
16
16
  function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, children, width = "standard", primaryAction, secondaryAction, moreActionsMenu = [], }) {
17
17
  const pageStyles = classnames(styles.page, styles[width]);
18
- const [titleBarRef, { width: titleBarWidth = jobberHooks.Breakpoints.large }] = jobberHooks.useResizeObserver();
19
- const titleBarClasses = classnames(styles.titleBar, {
20
- [styles.small]: titleBarWidth > jobberHooks.Breakpoints.smaller,
21
- [styles.medium]: titleBarWidth > jobberHooks.Breakpoints.small,
22
- [styles.large]: titleBarWidth > jobberHooks.Breakpoints.base,
23
- });
24
18
  const showMenu = moreActionsMenu.length > 0;
25
19
  const showActionGroup = showMenu || primaryAction || secondaryAction;
26
20
  if (primaryAction != undefined) {
@@ -29,28 +23,27 @@ function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, child
29
23
  if (secondaryAction != undefined) {
30
24
  secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
31
25
  }
32
- if (secondaryAction != undefined) {
33
- secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
34
- }
35
26
  return (React.createElement("div", { className: pageStyles },
36
27
  React.createElement(Content.Content, null,
37
28
  React.createElement(Content.Content, null,
38
- React.createElement("div", { className: titleBarClasses, ref: titleBarRef },
39
- React.createElement("div", null,
40
- typeof title === "string" && titleMetaData ? (React.createElement("div", { className: styles.titleRow },
41
- React.createElement(Heading.Heading, { level: 1 }, title),
42
- titleMetaData)) : typeof title === "string" ? (React.createElement(Heading.Heading, { level: 1 }, title)) : (title),
43
- subtitle && (React.createElement("div", { className: styles.subtitle },
44
- React.createElement(Text.Text, { size: "large", variation: "subdued" },
45
- React.createElement(Emphasis.Emphasis, { variation: "bold" },
46
- React.createElement(Markdown.Markdown, { content: subtitle, basicUsage: true })))))),
47
- showActionGroup && (React.createElement("div", { className: styles.actionGroup },
48
- primaryAction && (React.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
49
- React.createElement(Button.Button, Object.assign({}, getActionProps(primaryAction))))),
50
- secondaryAction && (React.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
51
- React.createElement(Button.Button, Object.assign({}, getActionProps(secondaryAction))))),
52
- showMenu && (React.createElement("div", { className: styles.actionButton },
53
- React.createElement(Menu.Menu, { items: moreActionsMenu })))))),
29
+ React.createElement(Container.Container, { name: "page-titlebar", autoWidth: true },
30
+ React.createElement(Container.Container.Apply, { autoWidth: true },
31
+ React.createElement("div", { className: classnames(styles.titleBar) },
32
+ React.createElement("div", null,
33
+ typeof title === "string" && titleMetaData ? (React.createElement("div", { className: styles.titleRow },
34
+ React.createElement(Heading.Heading, { level: 1 }, title),
35
+ titleMetaData)) : typeof title === "string" ? (React.createElement(Heading.Heading, { level: 1 }, title)) : (title),
36
+ subtitle && (React.createElement("div", { className: styles.subtitle },
37
+ React.createElement(Text.Text, { size: "large", variation: "subdued" },
38
+ React.createElement(Emphasis.Emphasis, { variation: "bold" },
39
+ React.createElement(Markdown.Markdown, { content: subtitle, basicUsage: true })))))),
40
+ showActionGroup && (React.createElement("div", { className: styles.actionGroup },
41
+ primaryAction && (React.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
42
+ React.createElement(Button.Button, Object.assign({}, getActionProps(primaryAction))))),
43
+ secondaryAction && (React.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
44
+ React.createElement(Button.Button, Object.assign({}, getActionProps(secondaryAction))))),
45
+ showMenu && (React.createElement("div", { className: styles.actionButton },
46
+ React.createElement(Menu.Menu, { items: moreActionsMenu })))))))),
54
47
  intro && (React.createElement(Text.Text, { size: "large" },
55
48
  React.createElement(Markdown.Markdown, { content: intro, basicUsage: true, externalLink: externalIntroLinks })))),
56
49
  React.createElement(Content.Content, null, children))));
package/dist/Page-es.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import React__default from 'react';
2
2
  import classnames from 'classnames';
3
- import { useResizeObserver, Breakpoints } from '@jobber/hooks';
4
3
  import { H as Heading } from './Heading-es.js';
5
4
  import { T as Text } from './Text-es.js';
6
5
  import { C as Content } from './Content-es.js';
@@ -8,17 +7,12 @@ import { M as Markdown } from './Markdown-es.js';
8
7
  import { B as Button } from './Button-es.js';
9
8
  import { M as Menu } from './Menu-es.js';
10
9
  import { E as Emphasis } from './Emphasis-es.js';
10
+ import { C as Container } from './Container-es.js';
11
11
 
12
- 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-"};
12
+ var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA8-","narrow":"qgGzgDyS2NY-","titleBar":"lbmoDvdtQO4-","titleRow":"k9y5NuqTcks-","actionGroup":"_7t53-bnzh98-","primaryAction":"g-H7CKkX-LA-","actionButton":"RSP7jHjP-mw-","subtitle":"EqsNMrZVL-8-","spinning":"MJZVhEmx6h4-"};
13
13
 
14
14
  function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, children, width = "standard", primaryAction, secondaryAction, moreActionsMenu = [], }) {
15
15
  const pageStyles = classnames(styles.page, styles[width]);
16
- const [titleBarRef, { width: titleBarWidth = Breakpoints.large }] = useResizeObserver();
17
- const titleBarClasses = classnames(styles.titleBar, {
18
- [styles.small]: titleBarWidth > Breakpoints.smaller,
19
- [styles.medium]: titleBarWidth > Breakpoints.small,
20
- [styles.large]: titleBarWidth > Breakpoints.base,
21
- });
22
16
  const showMenu = moreActionsMenu.length > 0;
23
17
  const showActionGroup = showMenu || primaryAction || secondaryAction;
24
18
  if (primaryAction != undefined) {
@@ -27,28 +21,27 @@ function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, child
27
21
  if (secondaryAction != undefined) {
28
22
  secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
29
23
  }
30
- if (secondaryAction != undefined) {
31
- secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
32
- }
33
24
  return (React__default.createElement("div", { className: pageStyles },
34
25
  React__default.createElement(Content, null,
35
26
  React__default.createElement(Content, null,
36
- React__default.createElement("div", { className: titleBarClasses, ref: titleBarRef },
37
- React__default.createElement("div", null,
38
- typeof title === "string" && titleMetaData ? (React__default.createElement("div", { className: styles.titleRow },
39
- React__default.createElement(Heading, { level: 1 }, title),
40
- titleMetaData)) : typeof title === "string" ? (React__default.createElement(Heading, { level: 1 }, title)) : (title),
41
- subtitle && (React__default.createElement("div", { className: styles.subtitle },
42
- React__default.createElement(Text, { size: "large", variation: "subdued" },
43
- React__default.createElement(Emphasis, { variation: "bold" },
44
- React__default.createElement(Markdown, { content: subtitle, basicUsage: true })))))),
45
- showActionGroup && (React__default.createElement("div", { className: styles.actionGroup },
46
- primaryAction && (React__default.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
47
- React__default.createElement(Button, Object.assign({}, getActionProps(primaryAction))))),
48
- secondaryAction && (React__default.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
49
- React__default.createElement(Button, Object.assign({}, getActionProps(secondaryAction))))),
50
- showMenu && (React__default.createElement("div", { className: styles.actionButton },
51
- React__default.createElement(Menu, { items: moreActionsMenu })))))),
27
+ React__default.createElement(Container, { name: "page-titlebar", autoWidth: true },
28
+ React__default.createElement(Container.Apply, { autoWidth: true },
29
+ React__default.createElement("div", { className: classnames(styles.titleBar) },
30
+ React__default.createElement("div", null,
31
+ typeof title === "string" && titleMetaData ? (React__default.createElement("div", { className: styles.titleRow },
32
+ React__default.createElement(Heading, { level: 1 }, title),
33
+ titleMetaData)) : typeof title === "string" ? (React__default.createElement(Heading, { level: 1 }, title)) : (title),
34
+ subtitle && (React__default.createElement("div", { className: styles.subtitle },
35
+ React__default.createElement(Text, { size: "large", variation: "subdued" },
36
+ React__default.createElement(Emphasis, { variation: "bold" },
37
+ React__default.createElement(Markdown, { content: subtitle, basicUsage: true })))))),
38
+ showActionGroup && (React__default.createElement("div", { className: styles.actionGroup },
39
+ primaryAction && (React__default.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
40
+ React__default.createElement(Button, Object.assign({}, getActionProps(primaryAction))))),
41
+ secondaryAction && (React__default.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
42
+ React__default.createElement(Button, Object.assign({}, getActionProps(secondaryAction))))),
43
+ showMenu && (React__default.createElement("div", { className: styles.actionButton },
44
+ React__default.createElement(Menu, { items: moreActionsMenu })))))))),
52
45
  intro && (React__default.createElement(Text, { size: "large" },
53
46
  React__default.createElement(Markdown, { content: intro, basicUsage: true, externalLink: externalIntroLinks })))),
54
47
  React__default.createElement(Content, null, children))));
package/dist/styles.css CHANGED
@@ -9621,19 +9621,6 @@ input.oOrjwubmsVA- {
9621
9621
  flex: 1 0 auto;
9622
9622
  -ms-flex-item-align: baseline;
9623
9623
  align-self: baseline;
9624
- }
9625
-
9626
- .lbmoDvdtQO4-.SH0aNOLVhE8-,
9627
- .lbmoDvdtQO4-.Lc7Z0FsBa6w- {
9628
- display: -ms-flexbox;
9629
- display: flex;
9630
- -ms-flex-wrap: wrap;
9631
- flex-wrap: wrap;
9632
- -ms-flex-pack: justify;
9633
- justify-content: space-between;
9634
- }
9635
-
9636
- .lbmoDvdtQO4-.iF5IA1SYKoA- ._7t53-bnzh98- {
9637
9624
  display: -ms-flexbox;
9638
9625
  display: flex;
9639
9626
  -ms-flex-wrap: wrap;
@@ -9642,15 +9629,15 @@ input.oOrjwubmsVA- {
9642
9629
  justify-content: space-between;
9643
9630
  }
9644
9631
 
9645
- .lbmoDvdtQO4-.Lc7Z0FsBa6w- ._7t53-bnzh98-,
9646
- .lbmoDvdtQO4-.SH0aNOLVhE8- ._7t53-bnzh98- {
9647
- -ms-flex-wrap: nowrap;
9648
- flex-wrap: nowrap;
9649
- }
9632
+ /* Medium and up: inline actions (no wrap) */
9650
9633
 
9651
- .lbmoDvdtQO4-.Lc7Z0FsBa6w- ._7t53-bnzh98- {
9652
- -ms-flex-pack: end;
9653
- justify-content: flex-end;
9634
+ @container page-titlebar (min-width: 500px) {
9635
+ .lbmoDvdtQO4- > ._7t53-bnzh98- {
9636
+ -ms-flex-wrap: nowrap;
9637
+ flex-wrap: nowrap;
9638
+ -ms-flex-pack: end;
9639
+ justify-content: flex-end;
9640
+ }
9654
9641
  }
9655
9642
 
9656
9643
  .g-H7CKkX-LA- {
@@ -9671,23 +9658,24 @@ input.oOrjwubmsVA- {
9671
9658
  width: 100%;
9672
9659
  }
9673
9660
 
9674
- .lbmoDvdtQO4-.iF5IA1SYKoA- .RSP7jHjP-mw- {
9675
- margin-top: 0;
9676
- }
9661
+ /* Medium and up: inline spacing */
9677
9662
 
9678
- .lbmoDvdtQO4-.Lc7Z0FsBa6w- .g-H7CKkX-LA-,
9679
- .lbmoDvdtQO4-.Lc7Z0FsBa6w- .RSP7jHjP-mw- {
9680
- margin: 0;
9681
- -ms-flex: 0 auto;
9682
- flex: 0 auto;
9663
+ @container page-titlebar (min-width: 500px) {
9664
+ .lbmoDvdtQO4- .g-H7CKkX-LA-,
9665
+ .lbmoDvdtQO4- .RSP7jHjP-mw- {
9666
+ margin: 0;
9667
+ -ms-flex: 0 auto;
9668
+ flex: 0 auto;
9669
+ }
9670
+ .lbmoDvdtQO4- .RSP7jHjP-mw- {
9671
+ margin-left: 8px;
9672
+ margin-left: var(--space-small);
9673
+ }
9683
9674
  }
9684
9675
 
9685
- .lbmoDvdtQO4-.Lc7Z0FsBa6w- .RSP7jHjP-mw- {
9686
- margin-left: 8px;
9687
- margin-left: var(--space-small);
9688
- }
9676
+ /* Small: reduce top margin between stacked buttons */
9689
9677
 
9690
- .lbmoDvdtQO4-.iF5IA1SYKoA- .RSP7jHjP-mw- + .RSP7jHjP-mw- {
9678
+ .lbmoDvdtQO4- .RSP7jHjP-mw- + .RSP7jHjP-mw- {
9691
9679
  margin-left: 8px;
9692
9680
  margin-left: var(--space-small);
9693
9681
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jobber/components",
3
- "version": "6.106.0",
3
+ "version": "6.106.1",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
538
538
  "> 1%",
539
539
  "IE 10"
540
540
  ],
541
- "gitHead": "ea9cbb709f05442a469763a4f12a332a59cb6350"
541
+ "gitHead": "0343791f65e5c1080b89658c61eb456170da0866"
542
542
  }