@jobber/components 6.117.0 → 6.117.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.
- package/dist/Page/types.d.ts +3 -0
- package/dist/Page-cjs.js +12 -4
- package/dist/Page-es.js +13 -5
- package/package.json +2 -2
package/dist/Page/types.d.ts
CHANGED
|
@@ -114,6 +114,9 @@ export interface PageMenuProps {
|
|
|
114
114
|
readonly children: ReactNode;
|
|
115
115
|
readonly triggerLabel?: string;
|
|
116
116
|
}
|
|
117
|
+
export interface PageContextValue {
|
|
118
|
+
readonly width: PageComposableProps["width"];
|
|
119
|
+
}
|
|
117
120
|
export interface PageBodyProps {
|
|
118
121
|
readonly children: ReactNode;
|
|
119
122
|
}
|
package/dist/Page-cjs.js
CHANGED
|
@@ -15,18 +15,24 @@ var filterDataAttributes = require('./filterDataAttributes-cjs.js');
|
|
|
15
15
|
|
|
16
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-"};
|
|
17
17
|
|
|
18
|
+
const PageContext = React.createContext({ width: undefined });
|
|
19
|
+
function usePageContext() {
|
|
20
|
+
return React.useContext(PageContext);
|
|
21
|
+
}
|
|
18
22
|
/** Discriminates between the props-based API and the composable children API. */
|
|
19
23
|
function isLegacy(props) {
|
|
20
24
|
return "title" in props;
|
|
21
25
|
}
|
|
22
26
|
function Page(props) {
|
|
23
27
|
var _a;
|
|
24
|
-
const
|
|
28
|
+
const width = (_a = props.width) !== null && _a !== void 0 ? _a : "standard";
|
|
29
|
+
const pageStyles = classnames(styles.page, styles[width]);
|
|
25
30
|
if (isLegacy(props)) {
|
|
26
31
|
return React.createElement(PageLegacy, Object.assign({}, props, { pageStyles: pageStyles }));
|
|
27
32
|
}
|
|
28
|
-
return (React.createElement(
|
|
29
|
-
React.createElement(
|
|
33
|
+
return (React.createElement(PageContext.Provider, { value: { width } },
|
|
34
|
+
React.createElement("div", { className: pageStyles },
|
|
35
|
+
React.createElement(Content.Content, null, props.children))));
|
|
30
36
|
}
|
|
31
37
|
/** Props-based renderer. Preserves the original Page behavior for existing consumers. */
|
|
32
38
|
function PageLegacy(_a) {
|
|
@@ -163,11 +169,13 @@ function PageSecondaryButton(_a) {
|
|
|
163
169
|
function PageMenu(_a) {
|
|
164
170
|
var { children, triggerLabel = "More Actions" } = _a, rest = tslib_es6.__rest(_a, ["children", "triggerLabel"]);
|
|
165
171
|
const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
|
|
172
|
+
const { width } = usePageContext();
|
|
173
|
+
const preferredPlacement = width === "fill" ? "bottom end" : undefined;
|
|
166
174
|
return (React.createElement("div", Object.assign({}, dataAttrs),
|
|
167
175
|
React.createElement(Menu.Menu, null,
|
|
168
176
|
React.createElement(Menu.Menu.Trigger, { UNSAFE_style: { display: "block" } },
|
|
169
177
|
React.createElement(Button.Button, { icon: "more", label: triggerLabel, type: "secondary", fullWidth: true })),
|
|
170
|
-
React.createElement(Menu.Menu.Content,
|
|
178
|
+
React.createElement(Menu.Menu.Content, { preferredPlacement: preferredPlacement }, children))));
|
|
171
179
|
}
|
|
172
180
|
/** Main content area of the page. */
|
|
173
181
|
function PageBody({ children }) {
|
package/dist/Page-es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { _ as __rest } from './tslib.es6-es.js';
|
|
2
|
-
import React__default from 'react';
|
|
2
|
+
import React__default, { createContext, useContext } from 'react';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
import { useResizeObserver, Breakpoints } from '@jobber/hooks';
|
|
5
5
|
import { H as Heading } from './Heading-es.js';
|
|
@@ -13,18 +13,24 @@ import { f as filterDataAttributes } from './filterDataAttributes-es.js';
|
|
|
13
13
|
|
|
14
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-"};
|
|
15
15
|
|
|
16
|
+
const PageContext = createContext({ width: undefined });
|
|
17
|
+
function usePageContext() {
|
|
18
|
+
return useContext(PageContext);
|
|
19
|
+
}
|
|
16
20
|
/** Discriminates between the props-based API and the composable children API. */
|
|
17
21
|
function isLegacy(props) {
|
|
18
22
|
return "title" in props;
|
|
19
23
|
}
|
|
20
24
|
function Page(props) {
|
|
21
25
|
var _a;
|
|
22
|
-
const
|
|
26
|
+
const width = (_a = props.width) !== null && _a !== void 0 ? _a : "standard";
|
|
27
|
+
const pageStyles = classnames(styles.page, styles[width]);
|
|
23
28
|
if (isLegacy(props)) {
|
|
24
29
|
return React__default.createElement(PageLegacy, Object.assign({}, props, { pageStyles: pageStyles }));
|
|
25
30
|
}
|
|
26
|
-
return (React__default.createElement(
|
|
27
|
-
React__default.createElement(
|
|
31
|
+
return (React__default.createElement(PageContext.Provider, { value: { width } },
|
|
32
|
+
React__default.createElement("div", { className: pageStyles },
|
|
33
|
+
React__default.createElement(Content, null, props.children))));
|
|
28
34
|
}
|
|
29
35
|
/** Props-based renderer. Preserves the original Page behavior for existing consumers. */
|
|
30
36
|
function PageLegacy(_a) {
|
|
@@ -161,11 +167,13 @@ function PageSecondaryButton(_a) {
|
|
|
161
167
|
function PageMenu(_a) {
|
|
162
168
|
var { children, triggerLabel = "More Actions" } = _a, rest = __rest(_a, ["children", "triggerLabel"]);
|
|
163
169
|
const dataAttrs = filterDataAttributes(rest);
|
|
170
|
+
const { width } = usePageContext();
|
|
171
|
+
const preferredPlacement = width === "fill" ? "bottom end" : undefined;
|
|
164
172
|
return (React__default.createElement("div", Object.assign({}, dataAttrs),
|
|
165
173
|
React__default.createElement(Menu, null,
|
|
166
174
|
React__default.createElement(Menu.Trigger, { UNSAFE_style: { display: "block" } },
|
|
167
175
|
React__default.createElement(Button, { icon: "more", label: triggerLabel, type: "secondary", fullWidth: true })),
|
|
168
|
-
React__default.createElement(Menu.Content,
|
|
176
|
+
React__default.createElement(Menu.Content, { preferredPlacement: preferredPlacement }, children))));
|
|
169
177
|
}
|
|
170
178
|
/** Main content area of the page. */
|
|
171
179
|
function PageBody({ children }) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components",
|
|
3
|
-
"version": "6.117.
|
|
3
|
+
"version": "6.117.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
@@ -541,5 +541,5 @@
|
|
|
541
541
|
"> 1%",
|
|
542
542
|
"IE 10"
|
|
543
543
|
],
|
|
544
|
-
"gitHead": "
|
|
544
|
+
"gitHead": "2005605be27d94b3e18231d7ede6fff71132f371"
|
|
545
545
|
}
|