@xylabs/react-button 6.2.19 → 6.3.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.
- package/dist/browser/index.mjs +55 -56
- package/dist/browser/index.mjs.map +1 -1
- package/package.json +12 -12
package/dist/browser/index.mjs
CHANGED
|
@@ -1,31 +1,45 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
-
|
|
4
|
-
// src/components/ButtonEx.tsx
|
|
5
|
-
import React3 from "react";
|
|
6
|
-
|
|
7
1
|
// src/components/ButtonExBase.tsx
|
|
8
2
|
import { Button, useTheme } from "@mui/material";
|
|
9
3
|
import { toPromise } from "@xylabs/promise";
|
|
10
4
|
import { useUserEvents } from "@xylabs/react-pixel";
|
|
11
|
-
import {
|
|
12
|
-
|
|
13
|
-
|
|
5
|
+
import {
|
|
6
|
+
BusyCircularProgress,
|
|
7
|
+
BusyLinearProgress,
|
|
8
|
+
mergeBoxlikeStyles
|
|
9
|
+
} from "@xylabs/react-shared";
|
|
10
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
+
var ButtonExBase = ({
|
|
12
|
+
ref,
|
|
13
|
+
funnel,
|
|
14
|
+
intent,
|
|
15
|
+
target,
|
|
16
|
+
placement,
|
|
17
|
+
disableUserEvents,
|
|
18
|
+
href,
|
|
19
|
+
...props
|
|
20
|
+
}) => {
|
|
14
21
|
const theme = useTheme();
|
|
15
22
|
const userEvents = useUserEvents();
|
|
16
|
-
const {
|
|
17
|
-
|
|
23
|
+
const {
|
|
24
|
+
busy,
|
|
25
|
+
busyVariant = "linear",
|
|
26
|
+
busyOpacity,
|
|
27
|
+
onClick,
|
|
28
|
+
children,
|
|
29
|
+
...rootProps
|
|
30
|
+
} = mergeBoxlikeStyles(theme, props);
|
|
31
|
+
const localOnClick = (event) => {
|
|
18
32
|
if (busy) {
|
|
19
33
|
event.preventDefault();
|
|
20
34
|
} else {
|
|
21
35
|
const elementName = props["aria-label"] ?? event.currentTarget.textContent;
|
|
22
|
-
const windowToNavigate =
|
|
23
|
-
const callOnClickAndFollowHref =
|
|
36
|
+
const windowToNavigate = () => target && href ? window.open("", target) ?? globalThis : globalThis;
|
|
37
|
+
const callOnClickAndFollowHref = (windowToNav = windowToNavigate()) => {
|
|
24
38
|
onClick?.(event);
|
|
25
39
|
if (href) {
|
|
26
40
|
windowToNav.location.href = href;
|
|
27
41
|
}
|
|
28
|
-
}
|
|
42
|
+
};
|
|
29
43
|
if (!disableUserEvents && userEvents) {
|
|
30
44
|
event.preventDefault();
|
|
31
45
|
const windowToNav = windowToNavigate();
|
|
@@ -47,70 +61,55 @@ var ButtonExBase = /* @__PURE__ */ __name(({ ref, funnel, intent, target, placem
|
|
|
47
61
|
callOnClickAndFollowHref();
|
|
48
62
|
}
|
|
49
63
|
}
|
|
50
|
-
}
|
|
51
|
-
return /* @__PURE__ */
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
}, busy && busyVariant === "linear" ? /* @__PURE__ */ React.createElement(BusyLinearProgress, {
|
|
58
|
-
rounded: true,
|
|
59
|
-
opacity: busyOpacity ?? 0
|
|
60
|
-
}) : null, busy && busyVariant === "circular" ? /* @__PURE__ */ React.createElement(BusyCircularProgress, {
|
|
61
|
-
rounded: true,
|
|
62
|
-
size: 24,
|
|
63
|
-
opacity: busyOpacity ?? 0.5
|
|
64
|
-
}) : null, children);
|
|
65
|
-
}, "ButtonExBase");
|
|
64
|
+
};
|
|
65
|
+
return /* @__PURE__ */ jsxs(Button, { ref, href, onClick: localOnClick, target, ...rootProps, children: [
|
|
66
|
+
busy && busyVariant === "linear" ? /* @__PURE__ */ jsx(BusyLinearProgress, { rounded: true, opacity: busyOpacity ?? 0 }) : null,
|
|
67
|
+
busy && busyVariant === "circular" ? /* @__PURE__ */ jsx(BusyCircularProgress, { rounded: true, size: 24, opacity: busyOpacity ?? 0.5 }) : null,
|
|
68
|
+
children
|
|
69
|
+
] });
|
|
70
|
+
};
|
|
66
71
|
ButtonExBase.displayName = "ButtonExBaseXYLabs";
|
|
67
72
|
|
|
68
73
|
// src/components/ButtonExTo.tsx
|
|
69
|
-
import React2 from "react";
|
|
70
74
|
import { useNavigate } from "react-router-dom";
|
|
71
|
-
|
|
75
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
76
|
+
var ButtonToEx = ({
|
|
77
|
+
ref,
|
|
78
|
+
to,
|
|
79
|
+
toOptions,
|
|
80
|
+
onClick,
|
|
81
|
+
...props
|
|
82
|
+
}) => {
|
|
72
83
|
const navigate = useNavigate();
|
|
73
|
-
const localOnClick =
|
|
84
|
+
const localOnClick = (event) => {
|
|
74
85
|
onClick?.(event);
|
|
75
86
|
if (to) {
|
|
76
87
|
void navigate(to, toOptions);
|
|
77
88
|
}
|
|
78
|
-
}
|
|
79
|
-
return /* @__PURE__ */
|
|
80
|
-
|
|
81
|
-
onClick: localOnClick,
|
|
82
|
-
...props
|
|
83
|
-
});
|
|
84
|
-
}, "ButtonToEx");
|
|
89
|
+
};
|
|
90
|
+
return /* @__PURE__ */ jsx2(ButtonExBase, { ref, onClick: localOnClick, ...props });
|
|
91
|
+
};
|
|
85
92
|
ButtonToEx.displayName = "ButtonToExXYLabs";
|
|
86
93
|
|
|
87
94
|
// src/components/ButtonEx.tsx
|
|
88
|
-
|
|
95
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
96
|
+
var ButtonEx = ({ ref, ...props }) => {
|
|
89
97
|
if (props.to) {
|
|
90
98
|
const { to, ...additionalProps } = props;
|
|
91
|
-
return /* @__PURE__ */
|
|
92
|
-
to,
|
|
93
|
-
ref,
|
|
94
|
-
...additionalProps
|
|
95
|
-
});
|
|
99
|
+
return /* @__PURE__ */ jsx3(ButtonToEx, { to, ref, ...additionalProps });
|
|
96
100
|
} else {
|
|
97
|
-
return /* @__PURE__ */
|
|
101
|
+
return /* @__PURE__ */ jsx3(ButtonExBase, { ...props });
|
|
98
102
|
}
|
|
99
|
-
}
|
|
103
|
+
};
|
|
100
104
|
ButtonEx.displayName = "ButtonExXYLabs";
|
|
101
105
|
|
|
102
106
|
// src/components/ButtonExProps.tsx
|
|
103
|
-
var asButtonHrefOrToProps =
|
|
107
|
+
var asButtonHrefOrToProps = (props) => {
|
|
104
108
|
if (props.href && (props.to || props.toOptions)) {
|
|
105
109
|
throw new Error("ButtonExProps: cannot have both href and to");
|
|
106
110
|
}
|
|
107
|
-
return props.href ? {
|
|
108
|
-
|
|
109
|
-
} : props.to ? {
|
|
110
|
-
to: props.to,
|
|
111
|
-
toOptions: props.toOptions
|
|
112
|
-
} : {};
|
|
113
|
-
}, "asButtonHrefOrToProps");
|
|
111
|
+
return props.href ? { href: props.href } : props.to ? { to: props.to, toOptions: props.toOptions } : {};
|
|
112
|
+
};
|
|
114
113
|
export {
|
|
115
114
|
ButtonEx,
|
|
116
115
|
asButtonHrefOrToProps
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/
|
|
1
|
+
{"version":3,"sources":["../../src/components/ButtonExBase.tsx","../../src/components/ButtonExTo.tsx","../../src/components/ButtonEx.tsx","../../src/components/ButtonExProps.tsx"],"sourcesContent":["import { Button, useTheme } from '@mui/material'\nimport { toPromise } from '@xylabs/promise'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport {\n BusyCircularProgress, BusyLinearProgress, mergeBoxlikeStyles,\n} from '@xylabs/react-shared'\nimport type { MouseEvent } from 'react'\nimport React from 'react'\n\nimport type { ButtonExProps } from './ButtonExProps.tsx'\n\nconst ButtonExBase = ({\n ref, funnel, intent, target, placement, disableUserEvents, href, ...props\n}: ButtonExProps) => {\n const theme = useTheme()\n const userEvents = useUserEvents()\n const {\n busy, busyVariant = 'linear', busyOpacity, onClick, children, ...rootProps\n } = mergeBoxlikeStyles<ButtonExProps>(theme, props)\n\n const localOnClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (busy) {\n // If it is busy, do not allow href clicks\n event.preventDefault()\n } else {\n const elementName = props['aria-label'] ?? event.currentTarget.textContent\n // we do this crazy navigate thing so that we can set it up outside the promise so that safari does not block it\n const windowToNavigate = () => (target && href) ? window.open('', target) ?? globalThis : globalThis\n const callOnClickAndFollowHref = (windowToNav = windowToNavigate()) => {\n onClick?.(event)\n if (href) {\n windowToNav.location.href = href\n }\n }\n if (!disableUserEvents && userEvents) {\n event.preventDefault()\n const windowToNav = windowToNavigate()\n if (href) {\n toPromise(userEvents.userClick({\n elementName, intent, funnel, placement,\n })).then(() => {\n callOnClickAndFollowHref(windowToNav)\n }).catch((ex) => {\n console.error('User event failed', elementName, funnel, placement, ex)\n callOnClickAndFollowHref(windowToNav)\n })\n }\n onClick?.(event)\n } else {\n callOnClickAndFollowHref()\n }\n }\n }\n\n return (\n <Button ref={ref} href={href} onClick={localOnClick} target={target} {...rootProps}>\n {busy && busyVariant === 'linear'\n ? <BusyLinearProgress rounded opacity={busyOpacity ?? 0} />\n : null}\n {busy && busyVariant === 'circular'\n ? <BusyCircularProgress rounded size={24} opacity={busyOpacity ?? 0.5} />\n : null}\n {children}\n </Button>\n )\n}\n\nButtonExBase.displayName = 'ButtonExBaseXYLabs'\n\nexport { ButtonExBase }\n","import type { MouseEvent } from 'react'\nimport React from 'react'\nimport { useNavigate } from 'react-router-dom'\n\nimport { ButtonExBase } from './ButtonExBase.tsx'\nimport type { ButtonExProps } from './ButtonExProps.tsx'\n\nconst ButtonToEx = ({\n ref, to, toOptions, onClick, ...props\n}: ButtonExProps) => {\n const navigate = useNavigate()\n const localOnClick = (event: MouseEvent<HTMLButtonElement>) => {\n onClick?.(event)\n if (to) {\n void navigate(to, toOptions)\n }\n }\n\n return <ButtonExBase ref={ref} onClick={localOnClick} {...props} />\n}\n\nButtonToEx.displayName = 'ButtonToExXYLabs'\n\nexport { ButtonToEx }\n","import React from 'react'\n\nimport { ButtonExBase } from './ButtonExBase.tsx'\nimport type { ButtonExProps } from './ButtonExProps.tsx'\nimport { ButtonToEx } from './ButtonExTo.tsx'\n\nconst ButtonEx = ({ ref, ...props }: ButtonExProps) => {\n if (props.to) {\n const { to, ...additionalProps } = props\n return <ButtonToEx to={to} ref={ref} {...additionalProps} />\n } else {\n return <ButtonExBase {...props} />\n }\n}\n\nButtonEx.displayName = 'ButtonExXYLabs'\n\nexport { ButtonEx }\n","import type { ButtonProps } from '@mui/material'\nimport type { BoxlikeComponentProps, BusyProps } from '@xylabs/react-shared'\nimport type { NavigateOptions, To } from 'react-router-dom'\n\nexport interface ButtonOnlyHrefProps {\n href?: string\n to?: never\n toOptions?: never\n}\n\nexport interface ButtonOnlyToProps {\n href?: never\n to?: To\n toOptions?: NavigateOptions\n}\n\nexport interface ButtonNoToOrHrefProps {\n href?: never\n to?: never\n toOptions?: never\n}\n\nexport type ButtonHrefOrToOrNoProps = ButtonOnlyHrefProps | ButtonOnlyToProps | ButtonNoToOrHrefProps\n\nexport interface ButtonHrefAndToProps {\n href?: string\n to?: To\n toOptions?: NavigateOptions\n}\n\nexport const asButtonHrefOrToProps = (props: ButtonHrefAndToProps): ButtonHrefOrToOrNoProps => {\n if (props.href && (props.to || props.toOptions)) {\n throw new Error('ButtonExProps: cannot have both href and to')\n }\n return props.href ? { href: props.href } : props.to ? { to: props.to, toOptions: props.toOptions } : {}\n}\n\nexport interface ButtonBaseExProps extends Omit<ButtonProps, 'href'>, BoxlikeComponentProps, BusyProps {\n disableUserEvents?: boolean\n funnel?: string\n intent?: string\n placement?: string\n target?: string\n}\n\nexport type ButtonExProps = ButtonBaseExProps & ButtonHrefOrToOrNoProps\n"],"mappings":"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","names":["jsx","jsx"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xylabs/react-button",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.3.0",
|
|
4
4
|
"description": "Common React library for all XY Labs projects that use React",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"utility",
|
|
@@ -37,20 +37,20 @@
|
|
|
37
37
|
"packages/*"
|
|
38
38
|
],
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@xylabs/promise": "^4.
|
|
41
|
-
"@xylabs/react-pixel": "^6.
|
|
42
|
-
"@xylabs/react-shared": "^6.
|
|
43
|
-
"react-router-dom": "^7.
|
|
40
|
+
"@xylabs/promise": "^4.9.15",
|
|
41
|
+
"@xylabs/react-pixel": "^6.3.0",
|
|
42
|
+
"@xylabs/react-shared": "^6.3.0",
|
|
43
|
+
"react-router-dom": "^7.6.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@mui/material": "^7.0
|
|
46
|
+
"@mui/material": "^7.1.0",
|
|
47
47
|
"@storybook/react": "^8.6.12",
|
|
48
|
-
"@types/react": "^19.1.
|
|
49
|
-
"@xylabs/react-flexbox": "^6.
|
|
50
|
-
"@xylabs/react-pixel": "^6.
|
|
51
|
-
"@xylabs/ts-scripts-yarn3": "^6.
|
|
52
|
-
"@xylabs/tsconfig-react": "^6.
|
|
53
|
-
"knip": "^5.
|
|
48
|
+
"@types/react": "^19.1.4",
|
|
49
|
+
"@xylabs/react-flexbox": "^6.3.0",
|
|
50
|
+
"@xylabs/react-pixel": "^6.3.0",
|
|
51
|
+
"@xylabs/ts-scripts-yarn3": "^6.5.5",
|
|
52
|
+
"@xylabs/tsconfig-react": "^6.5.5",
|
|
53
|
+
"knip": "^5.55.1",
|
|
54
54
|
"react": "^19.1.0",
|
|
55
55
|
"react-dom": "^19.1.0",
|
|
56
56
|
"storybook": "^8.6.12",
|