@uxf/core 3.0.0 → 3.1.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/README.md +14 -2
- package/constants/classes.d.ts +5 -1
- package/constants/classes.js +6 -2
- package/hooks/useAnchorProps.d.ts +2 -2
- package/hooks/useAnchorProps.js +5 -4
- package/hooks/useButtonProps.js +2 -2
- package/hooks/useClickableProps.d.ts +2 -2
- package/hooks/useClickableProps.js +4 -3
- package/package.json +1 -1
- package/utils/forwardRef.d.ts +10 -0
- package/utils/forwardRef.js +11 -0
package/README.md
CHANGED
|
@@ -161,7 +161,7 @@ const anchorProps = useAnchorProps<AnchorHTMLAttributes<HTMLAnchorElement>>({
|
|
|
161
161
|
href: "https://www.google.com/",
|
|
162
162
|
loading: false,
|
|
163
163
|
onClick: () => console.log("success"),
|
|
164
|
-
|
|
164
|
+
type: "submit", // simulate <button type="submit" /> function
|
|
165
165
|
});
|
|
166
166
|
|
|
167
167
|
<a {...anchorProps}>Click me</a>
|
|
@@ -224,7 +224,7 @@ const clickableProps = useClickableProps<HTMLAttributes<HTMLDivElement>>({
|
|
|
224
224
|
disabled: false,
|
|
225
225
|
loading: false,
|
|
226
226
|
onClick: () => console.log("success"),
|
|
227
|
-
|
|
227
|
+
type: "submit", // simulate <button type="submit" /> function
|
|
228
228
|
});
|
|
229
229
|
|
|
230
230
|
<div {...clickableProps}>Click me</div>
|
|
@@ -314,6 +314,18 @@ import { cx } from "@uxf/core/utils/cx";
|
|
|
314
314
|
const example = cx("foo", true && "bar", "baz", false && "bam", undefined) /* returns "foo bar baz" */
|
|
315
315
|
```
|
|
316
316
|
```tsx
|
|
317
|
+
import { forwardRef } from "@uxf/core/utils/forwardRef";
|
|
318
|
+
|
|
319
|
+
interface Props {
|
|
320
|
+
className?: string;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
// will enforce 'displayName'
|
|
324
|
+
export const ExampleComponent = forwardRef<HTMLDivElement, Props>("ExampleComponent", (props, ref) => {
|
|
325
|
+
return <div className={props.className} ref={ref} />;
|
|
326
|
+
});
|
|
327
|
+
```
|
|
328
|
+
```tsx
|
|
317
329
|
import { isBrowser } from "@uxf/core/utils/isBrowser";
|
|
318
330
|
import { isServer } from "@uxf/core/utils/isServer";
|
|
319
331
|
|
package/constants/classes.d.ts
CHANGED
|
@@ -2,14 +2,18 @@
|
|
|
2
2
|
export declare const CLASSES: {
|
|
3
3
|
readonly FOCUS_VISIBLE: "focus-visible";
|
|
4
4
|
readonly IS_ACTIVE: "is-active";
|
|
5
|
-
readonly IS_BUSY: "is-busy";
|
|
6
5
|
readonly IS_DISABLED: "is-disabled";
|
|
6
|
+
readonly IS_EMPTY: "is-empty";
|
|
7
7
|
readonly IS_FOCUSED: "is-focused";
|
|
8
8
|
readonly IS_HOVERABLE: "is-hoverable";
|
|
9
9
|
readonly IS_HOVERED: "is-hovered";
|
|
10
|
+
readonly IS_INDETERMINATE: "is-indeterminate";
|
|
10
11
|
readonly IS_INVALID: "is-invalid";
|
|
11
12
|
readonly IS_LOADING: "is-loading";
|
|
13
|
+
readonly IS_NOT_EMPTY: "is-not-empty";
|
|
12
14
|
readonly IS_NOT_HOVERABLE: "is-not-hoverable";
|
|
15
|
+
readonly IS_NOT_OPEN: "is-not-open";
|
|
16
|
+
readonly IS_OPEN: "is-open";
|
|
13
17
|
readonly IS_READONLY: "is-readonly";
|
|
14
18
|
readonly IS_REQUIRED: "is-required";
|
|
15
19
|
readonly IS_SELECTED: "is-selected";
|
package/constants/classes.js
CHANGED
|
@@ -5,16 +5,20 @@ exports.CLASSES = void 0;
|
|
|
5
5
|
exports.CLASSES = {
|
|
6
6
|
FOCUS_VISIBLE: "focus-visible",
|
|
7
7
|
IS_ACTIVE: "is-active",
|
|
8
|
-
IS_BUSY: "is-busy",
|
|
9
8
|
IS_DISABLED: "is-disabled",
|
|
9
|
+
IS_EMPTY: "is-empty",
|
|
10
10
|
IS_FOCUSED: "is-focused",
|
|
11
11
|
IS_HOVERABLE: "is-hoverable",
|
|
12
12
|
IS_HOVERED: "is-hovered",
|
|
13
|
+
IS_INDETERMINATE: "is-indeterminate",
|
|
13
14
|
IS_INVALID: "is-invalid",
|
|
14
15
|
IS_LOADING: "is-loading",
|
|
16
|
+
IS_NOT_EMPTY: "is-not-empty",
|
|
15
17
|
IS_NOT_HOVERABLE: "is-not-hoverable",
|
|
18
|
+
IS_NOT_OPEN: "is-not-open",
|
|
19
|
+
IS_OPEN: "is-open",
|
|
16
20
|
IS_READONLY: "is-readonly",
|
|
17
21
|
IS_REQUIRED: "is-required",
|
|
18
22
|
IS_SELECTED: "is-selected",
|
|
19
23
|
};
|
|
20
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
24
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2xhc3Nlcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb25zdGFudHMvY2xhc3Nlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7QUFBQSx3REFBd0Q7QUFDM0MsUUFBQSxPQUFPLEdBQUc7SUFDbkIsYUFBYSxFQUFFLGVBQWU7SUFDOUIsU0FBUyxFQUFFLFdBQVc7SUFDdEIsV0FBVyxFQUFFLGFBQWE7SUFDMUIsUUFBUSxFQUFFLFVBQVU7SUFDcEIsVUFBVSxFQUFFLFlBQVk7SUFDeEIsWUFBWSxFQUFFLGNBQWM7SUFDNUIsVUFBVSxFQUFFLFlBQVk7SUFDeEIsZ0JBQWdCLEVBQUUsa0JBQWtCO0lBQ3BDLFVBQVUsRUFBRSxZQUFZO0lBQ3hCLFVBQVUsRUFBRSxZQUFZO0lBQ3hCLFlBQVksRUFBRSxjQUFjO0lBQzVCLGdCQUFnQixFQUFFLGtCQUFrQjtJQUNwQyxXQUFXLEVBQUUsYUFBYTtJQUMxQixPQUFPLEVBQUUsU0FBUztJQUNsQixXQUFXLEVBQUUsYUFBYTtJQUMxQixXQUFXLEVBQUUsYUFBYTtJQUMxQixXQUFXLEVBQUUsYUFBYTtDQUNwQixDQUFDIn0=
|
|
@@ -3,6 +3,6 @@ export interface UseAnchorProps {
|
|
|
3
3
|
analyticsCallback?: () => void;
|
|
4
4
|
disabled?: boolean;
|
|
5
5
|
loading?: boolean;
|
|
6
|
-
|
|
6
|
+
type?: "submit";
|
|
7
7
|
}
|
|
8
|
-
export declare function useAnchorProps<T extends AnchorHTMLAttributes<HTMLAnchorElement>>({ ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, analyticsCallback, className, disabled, download, href, hrefLang, loading, media, onClick, onKeyDown, onKeyUp, ping, referrerPolicy, rel, role,
|
|
8
|
+
export declare function useAnchorProps<T extends AnchorHTMLAttributes<HTMLAnchorElement>>({ ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, analyticsCallback, className, disabled, download, href, hrefLang, loading, media, onClick, onKeyDown, onKeyUp, ping, referrerPolicy, rel, role, tabIndex, target, type, ...restProps }: UseAnchorProps & T): T;
|
package/hooks/useAnchorProps.js
CHANGED
|
@@ -52,13 +52,14 @@ var classes_1 = require("../constants/classes");
|
|
|
52
52
|
var cx_1 = require("../utils/cx");
|
|
53
53
|
var _useSimulatedButton_1 = require("./_useSimulatedButton");
|
|
54
54
|
function useAnchorProps(_a) {
|
|
55
|
-
var ariaBusy = _a["aria-busy"], ariaDisabled = _a["aria-disabled"], analyticsCallback = _a.analyticsCallback, className = _a.className, disabled = _a.disabled, download = _a.download, href = _a.href, hrefLang = _a.hrefLang, loading = _a.loading, media = _a.media, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, ping = _a.ping, referrerPolicy = _a.referrerPolicy, rel = _a.rel, role = _a.role,
|
|
55
|
+
var ariaBusy = _a["aria-busy"], ariaDisabled = _a["aria-disabled"], analyticsCallback = _a.analyticsCallback, className = _a.className, disabled = _a.disabled, download = _a.download, href = _a.href, hrefLang = _a.hrefLang, loading = _a.loading, media = _a.media, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, ping = _a.ping, referrerPolicy = _a.referrerPolicy, rel = _a.rel, role = _a.role, tabIndex = _a.tabIndex, target = _a.target, type = _a.type, restProps = __rest(_a, ["aria-busy", "aria-disabled", "analyticsCallback", "className", "disabled", "download", "href", "hrefLang", "loading", "media", "onClick", "onKeyDown", "onKeyUp", "ping", "referrerPolicy", "rel", "role", "tabIndex", "target", "type"]);
|
|
56
56
|
var isBusy = loading ? loading : Boolean(ariaBusy);
|
|
57
57
|
var isDisabled = disabled ? disabled : Boolean(ariaDisabled);
|
|
58
58
|
var isBusyOrDisabled = isBusy || isDisabled;
|
|
59
|
+
var submit = type === "submit";
|
|
59
60
|
var isButton = submit || !!onClick;
|
|
60
61
|
var tabIndexInteractive = isBusyOrDisabled ? -1 : tabIndex;
|
|
61
|
-
var _className = [isBusy && classes_1.CLASSES.
|
|
62
|
+
var _className = [isBusy && classes_1.CLASSES.IS_LOADING, disabled && classes_1.CLASSES.IS_DISABLED, className];
|
|
62
63
|
var simulatedButton = (0, _useSimulatedButton_1._useSimulatedButton)({
|
|
63
64
|
analyticsCallback: analyticsCallback,
|
|
64
65
|
isClickable: !isBusyOrDisabled || isButton,
|
|
@@ -69,7 +70,7 @@ function useAnchorProps(_a) {
|
|
|
69
70
|
submit: submit,
|
|
70
71
|
});
|
|
71
72
|
if (href) {
|
|
72
|
-
return __assign({ "aria-busy": isBusy, "aria-disabled": isDisabled, className: cx_1.cx.apply(void 0, __spreadArray([classes_1.CLASSES.IS_HOVERABLE], __read(_className), false)), download: download, href: href, hrefLang: hrefLang, media: media, onClick: simulatedButton.onClick, onKeyDown: simulatedButton.onKeyDown, onKeyUp: simulatedButton.onKeyUp, ping: ping, referrerPolicy: referrerPolicy, rel: target === "_blank" ? (rel ? "noopener noreferrer ".concat(role) : "noopener noreferrer") : rel, role: role || (isButton ? "button" : undefined), tabIndex: tabIndexInteractive, target: target
|
|
73
|
+
return __assign({ "aria-busy": isBusy, "aria-disabled": isDisabled, className: cx_1.cx.apply(void 0, __spreadArray([classes_1.CLASSES.IS_HOVERABLE], __read(_className), false)), download: download, href: href, hrefLang: hrefLang, media: media, onClick: simulatedButton.onClick, onKeyDown: simulatedButton.onKeyDown, onKeyUp: simulatedButton.onKeyUp, ping: ping, referrerPolicy: referrerPolicy, rel: target === "_blank" ? (rel ? "noopener noreferrer ".concat(role) : "noopener noreferrer") : rel, role: role || (isButton ? "button" : undefined), tabIndex: tabIndexInteractive, target: target }, restProps);
|
|
73
74
|
}
|
|
74
75
|
if (isButton) {
|
|
75
76
|
return __assign({ "aria-busy": isBusy, "aria-disabled": isDisabled, className: cx_1.cx.apply(void 0, __spreadArray([classes_1.CLASSES.IS_HOVERABLE], __read(_className), false)), onClick: simulatedButton.onClick, onKeyDown: simulatedButton.onKeyDown, onKeyUp: simulatedButton.onKeyUp, role: role || "button", tabIndex: tabIndexInteractive !== null && tabIndexInteractive !== void 0 ? tabIndexInteractive : 0 }, restProps);
|
|
@@ -77,4 +78,4 @@ function useAnchorProps(_a) {
|
|
|
77
78
|
return __assign({ className: cx_1.cx.apply(void 0, __spreadArray([], __read(_className), false)), role: role || "none", tabIndex: tabIndex }, restProps);
|
|
78
79
|
}
|
|
79
80
|
exports.useAnchorProps = useAnchorProps;
|
|
80
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
81
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlQW5jaG9yUHJvcHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvaG9va3MvdXNlQW5jaG9yUHJvcHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFDQSxnREFBK0M7QUFDL0Msa0NBQWlDO0FBQ2pDLDZEQUE0RDtBQVM1RCxTQUFnQixjQUFjLENBQW9ELEVBc0I3RDtJQXJCakIsSUFBZSxRQUFRLGtCQUFBLEVBQ0osWUFBWSxzQkFBQSxFQUMvQixpQkFBaUIsdUJBQUEsRUFDakIsU0FBUyxlQUFBLEVBQ1QsUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ1IsSUFBSSxVQUFBLEVBQ0osUUFBUSxjQUFBLEVBQ1IsT0FBTyxhQUFBLEVBQ1AsS0FBSyxXQUFBLEVBQ0wsT0FBTyxhQUFBLEVBQ1AsU0FBUyxlQUFBLEVBQ1QsT0FBTyxhQUFBLEVBQ1AsSUFBSSxVQUFBLEVBQ0osY0FBYyxvQkFBQSxFQUNkLEdBQUcsU0FBQSxFQUNILElBQUksVUFBQSxFQUNKLFFBQVEsY0FBQSxFQUNSLE1BQU0sWUFBQSxFQUNOLElBQUksVUFBQSxFQUNELFNBQVMsY0FyQmtFLDBPQXNCakYsQ0FEZTtJQUVaLElBQU0sTUFBTSxHQUFHLE9BQU8sQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDckQsSUFBTSxVQUFVLEdBQUcsUUFBUSxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxZQUFZLENBQUMsQ0FBQztJQUMvRCxJQUFNLGdCQUFnQixHQUFHLE1BQU0sSUFBSSxVQUFVLENBQUM7SUFDOUMsSUFBTSxNQUFNLEdBQUcsSUFBSSxLQUFLLFFBQVEsQ0FBQztJQUNqQyxJQUFNLFFBQVEsR0FBRyxNQUFNLElBQUksQ0FBQyxDQUFDLE9BQU8sQ0FBQztJQUNyQyxJQUFNLG1CQUFtQixHQUFHLGdCQUFnQixDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDO0lBQzdELElBQU0sVUFBVSxHQUFHLENBQUMsTUFBTSxJQUFJLGlCQUFPLENBQUMsVUFBVSxFQUFFLFFBQVEsSUFBSSxpQkFBTyxDQUFDLFdBQVcsRUFBRSxTQUFTLENBQUMsQ0FBQztJQUU5RixJQUFNLGVBQWUsR0FBRyxJQUFBLHlDQUFtQixFQUFDO1FBQ3hDLGlCQUFpQixtQkFBQTtRQUNqQixXQUFXLEVBQUUsQ0FBQyxnQkFBZ0IsSUFBSSxRQUFRO1FBQzFDLFdBQVcsRUFBRSxDQUFDLGdCQUFnQixJQUFJLENBQUMsQ0FBQyxJQUFJO1FBQ3hDLE9BQU8sU0FBQTtRQUNQLFNBQVMsV0FBQTtRQUNULE9BQU8sU0FBQTtRQUNQLE1BQU0sUUFBQTtLQUNULENBQUMsQ0FBQztJQUVILElBQUksSUFBSSxFQUFFO1FBQ04sT0FBTyxXQUNILFdBQVcsRUFBRSxNQUFNLEVBQ25CLGVBQWUsRUFBRSxVQUFVLEVBQzNCLFNBQVMsRUFBRSxPQUFFLDhCQUFDLGlCQUFPLENBQUMsWUFBWSxVQUFLLFVBQVUsWUFDakQsUUFBUSxVQUFBLEVBQ1IsSUFBSSxNQUFBLEVBQ0osUUFBUSxVQUFBLEVBQ1IsS0FBSyxPQUFBLEVBQ0wsT0FBTyxFQUFFLGVBQWUsQ0FBQyxPQUFPLEVBQ2hDLFNBQVMsRUFBRSxlQUFlLENBQUMsU0FBUyxFQUNwQyxPQUFPLEVBQUUsZUFBZSxDQUFDLE9BQU8sRUFDaEMsSUFBSSxNQUFBLEVBQ0osY0FBYyxnQkFBQSxFQUNkLEdBQUcsRUFBRSxNQUFNLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsOEJBQXVCLElBQUksQ0FBRSxDQUFDLENBQUMsQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDLENBQUMsQ0FBQyxHQUFHLEVBQzlGLElBQUksRUFBRSxJQUFJLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLEVBQy9DLFFBQVEsRUFBRSxtQkFBbUIsRUFDN0IsTUFBTSxRQUFBLElBQ0gsU0FBUyxDQUNWLENBQUM7S0FDVjtJQUVELElBQUksUUFBUSxFQUFFO1FBQ1YsT0FBTyxXQUNILFdBQVcsRUFBRSxNQUFNLEVBQ25CLGVBQWUsRUFBRSxVQUFVLEVBQzNCLFNBQVMsRUFBRSxPQUFFLDhCQUFDLGlCQUFPLENBQUMsWUFBWSxVQUFLLFVBQVUsWUFDakQsT0FBTyxFQUFFLGVBQWUsQ0FBQyxPQUFPLEVBQ2hDLFNBQVMsRUFBRSxlQUFlLENBQUMsU0FBUyxFQUNwQyxPQUFPLEVBQUUsZUFBZSxDQUFDLE9BQU8sRUFDaEMsSUFBSSxFQUFFLElBQUksSUFBSSxRQUFRLEVBQ3RCLFFBQVEsRUFBRSxtQkFBbUIsYUFBbkIsbUJBQW1CLGNBQW5CLG1CQUFtQixHQUFJLENBQUMsSUFDL0IsU0FBUyxDQUNWLENBQUM7S0FDVjtJQUVELE9BQU8sV0FDSCxTQUFTLEVBQUUsT0FBRSx3Q0FBSSxVQUFVLFlBQzNCLElBQUksRUFBRSxJQUFJLElBQUksTUFBTSxFQUNwQixRQUFRLFVBQUEsSUFDTCxTQUFTLENBQ1YsQ0FBQztBQUNYLENBQUM7QUFuRkQsd0NBbUZDIn0=
|
package/hooks/useButtonProps.js
CHANGED
|
@@ -56,7 +56,7 @@ function useButtonProps(_a) {
|
|
|
56
56
|
var isBusy = loading ? loading : Boolean(ariaBusy);
|
|
57
57
|
var isDisabled = disabled ? disabled : Boolean(ariaDisabled);
|
|
58
58
|
var isBusyOrDisabled = isBusy || isDisabled;
|
|
59
|
-
var _className = [isBusy && classes_1.CLASSES.
|
|
59
|
+
var _className = [isBusy && classes_1.CLASSES.IS_LOADING, isDisabled && classes_1.CLASSES.IS_DISABLED, className];
|
|
60
60
|
var _onClick = (0, react_1.useCallback)(function (e) {
|
|
61
61
|
if (isBusyOrDisabled) {
|
|
62
62
|
e.preventDefault();
|
|
@@ -88,4 +88,4 @@ function useButtonProps(_a) {
|
|
|
88
88
|
return __assign({ className: cx_1.cx.apply(void 0, __spreadArray([], __read(_className), false)), role: role, tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : -1 }, restProps);
|
|
89
89
|
}
|
|
90
90
|
exports.useButtonProps = useButtonProps;
|
|
91
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
91
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlQnV0dG9uUHJvcHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvaG9va3MvdXNlQnV0dG9uUHJvcHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSwrQkFBNkU7QUFDN0UsZ0RBQStDO0FBQy9DLGtDQUFpQztBQU9qQyxTQUFnQixjQUFjLENBQW9ELEVBb0I3RDtJQW5CakIsSUFBZSxRQUFRLGtCQUFBLEVBQ0osWUFBWSxzQkFBQSxFQUMvQixTQUFTLGVBQUEsRUFDVCxpQkFBaUIsdUJBQUEsRUFDakIsU0FBUyxlQUFBLEVBQ1QsUUFBUSxjQUFBLEVBQ1IsVUFBVSxnQkFBQSxFQUNWLFdBQVcsaUJBQUEsRUFDWCxVQUFVLGdCQUFBLEVBQ1YsY0FBYyxvQkFBQSxFQUNkLFVBQVUsZ0JBQUEsRUFDVixPQUFPLGFBQUEsRUFDUCxJQUFJLFVBQUEsRUFDSixPQUFPLGFBQUEsRUFDUCxJQUFJLFVBQUEsRUFDSixRQUFRLGNBQUEsRUFDUixJQUFJLFVBQUEsRUFDSixLQUFLLFdBQUEsRUFDRixTQUFTLGNBbkJrRSx1T0FvQmpGLENBRGU7SUFFWixJQUFNLE1BQU0sR0FBRyxPQUFPLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ3JELElBQU0sVUFBVSxHQUFHLFFBQVEsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDL0QsSUFBTSxnQkFBZ0IsR0FBRyxNQUFNLElBQUksVUFBVSxDQUFDO0lBQzlDLElBQU0sVUFBVSxHQUFHLENBQUMsTUFBTSxJQUFJLGlCQUFPLENBQUMsVUFBVSxFQUFFLFVBQVUsSUFBSSxpQkFBTyxDQUFDLFdBQVcsRUFBRSxTQUFTLENBQUMsQ0FBQztJQUVoRyxJQUFNLFFBQVEsR0FBRyxJQUFBLG1CQUFXLEVBQ3hCLFVBQUEsQ0FBQztRQUNHLElBQUksZ0JBQWdCLEVBQUU7WUFDbEIsQ0FBQyxDQUFDLGNBQWMsRUFBRSxDQUFDO1NBQ3RCO2FBQU07WUFDSCxJQUFJLGlCQUFpQixFQUFFO2dCQUNuQixpQkFBaUIsRUFBRSxDQUFDO2FBQ3ZCO1lBQ0QsSUFBSSxPQUFPLEVBQUU7Z0JBQ1QsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDO2FBQ2Q7U0FDSjtJQUNMLENBQUMsRUFDRCxDQUFDLGlCQUFpQixFQUFFLGdCQUFnQixFQUFFLE9BQU8sQ0FBQyxDQUNqRCxDQUFDO0lBRUYsSUFBSSxPQUFPLElBQUksSUFBSSxLQUFLLE9BQU8sSUFBSSxJQUFJLEtBQUssUUFBUSxFQUFFO1FBQ2xELElBQUksV0FBVyxHQUFHLEVBQUUsQ0FBQztRQUNyQixJQUFJLElBQUksS0FBSyxRQUFRLEVBQUU7WUFDbkIsV0FBVyxHQUFHO2dCQUNWLFVBQVUsWUFBQTtnQkFDVixXQUFXLGFBQUE7Z0JBQ1gsVUFBVSxZQUFBO2dCQUNWLGNBQWMsZ0JBQUE7Z0JBQ2QsVUFBVSxZQUFBO2dCQUNWLElBQUksTUFBQTtnQkFDSixLQUFLLE9BQUE7YUFDUixDQUFDO1NBQ0w7UUFFRCxPQUFPLG9CQUNILFdBQVcsRUFBRSxNQUFNLEVBQ25CLGVBQWUsRUFBRSxZQUFZLEVBQzdCLFNBQVMsV0FBQSxFQUNULFNBQVMsRUFBRSxPQUFFLDhCQUFDLGlCQUFPLENBQUMsWUFBWSxVQUFLLFVBQVUsWUFDakQsUUFBUSxVQUFBLEVBQ1IsT0FBTyxFQUFFLFFBQVEsRUFDakIsSUFBSSxNQUFBLEVBQ0osUUFBUSxFQUFFLGdCQUFnQixDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsUUFBUSxFQUMxQyxJQUFJLE1BQUEsSUFDRCxXQUFXLEdBQ1gsU0FBUyxDQUNWLENBQUM7S0FDVjtJQUVELE9BQU8sV0FDSCxTQUFTLEVBQUUsT0FBRSx3Q0FBSSxVQUFVLFlBQzNCLElBQUksTUFBQSxFQUNKLFFBQVEsRUFBRSxRQUFRLGFBQVIsUUFBUSxjQUFSLFFBQVEsR0FBSSxDQUFDLENBQUMsSUFDckIsU0FBUyxDQUNWLENBQUM7QUFDWCxDQUFDO0FBN0VELHdDQTZFQyJ9
|
|
@@ -3,6 +3,6 @@ export interface UseClickableProps {
|
|
|
3
3
|
analyticsCallback?: () => void;
|
|
4
4
|
disabled?: boolean;
|
|
5
5
|
loading?: boolean;
|
|
6
|
-
|
|
6
|
+
type?: "submit";
|
|
7
7
|
}
|
|
8
|
-
export declare function useClickableProps<T extends HTMLAttributes<HTMLElement>>({ ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, analyticsCallback, className, disabled, loading, onClick, onKeyDown, onKeyUp, role,
|
|
8
|
+
export declare function useClickableProps<T extends HTMLAttributes<HTMLElement>>({ ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, analyticsCallback, className, disabled, loading, onClick, onKeyDown, onKeyUp, role, tabIndex, type, ...restProps }: UseClickableProps & T): T;
|
|
@@ -52,12 +52,13 @@ var classes_1 = require("../constants/classes");
|
|
|
52
52
|
var cx_1 = require("../utils/cx");
|
|
53
53
|
var _useSimulatedButton_1 = require("./_useSimulatedButton");
|
|
54
54
|
function useClickableProps(_a) {
|
|
55
|
-
var ariaBusy = _a["aria-busy"], ariaDisabled = _a["aria-disabled"], analyticsCallback = _a.analyticsCallback, className = _a.className, disabled = _a.disabled, loading = _a.loading, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, role = _a.role,
|
|
55
|
+
var ariaBusy = _a["aria-busy"], ariaDisabled = _a["aria-disabled"], analyticsCallback = _a.analyticsCallback, className = _a.className, disabled = _a.disabled, loading = _a.loading, onClick = _a.onClick, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, role = _a.role, tabIndex = _a.tabIndex, type = _a.type, restProps = __rest(_a, ["aria-busy", "aria-disabled", "analyticsCallback", "className", "disabled", "loading", "onClick", "onKeyDown", "onKeyUp", "role", "tabIndex", "type"]);
|
|
56
56
|
var isBusy = loading ? loading : Boolean(ariaBusy);
|
|
57
57
|
var isDisabled = disabled ? disabled : Boolean(ariaDisabled);
|
|
58
58
|
var isBusyOrDisabled = isBusy || isDisabled;
|
|
59
|
+
var submit = type === "submit";
|
|
59
60
|
var isButton = submit || !!onClick;
|
|
60
|
-
var _className = [isBusy && classes_1.CLASSES.
|
|
61
|
+
var _className = [isBusy && classes_1.CLASSES.IS_LOADING, isDisabled && classes_1.CLASSES.IS_DISABLED, className];
|
|
61
62
|
var simulatedButton = (0, _useSimulatedButton_1._useSimulatedButton)({
|
|
62
63
|
analyticsCallback: analyticsCallback,
|
|
63
64
|
isClickable: !isBusyOrDisabled || isButton,
|
|
@@ -73,4 +74,4 @@ function useClickableProps(_a) {
|
|
|
73
74
|
return __assign({ className: cx_1.cx.apply(void 0, __spreadArray([], __read(_className), false)), role: role, tabIndex: tabIndex }, restProps);
|
|
74
75
|
}
|
|
75
76
|
exports.useClickableProps = useClickableProps;
|
|
76
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
77
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlQ2xpY2thYmxlUHJvcHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvaG9va3MvdXNlQ2xpY2thYmxlUHJvcHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFDQSxnREFBK0M7QUFDL0Msa0NBQWlDO0FBQ2pDLDZEQUE0RDtBQVM1RCxTQUFnQixpQkFBaUIsQ0FBd0MsRUFjakQ7SUFicEIsSUFBZSxRQUFRLGtCQUFBLEVBQ0osWUFBWSxzQkFBQSxFQUMvQixpQkFBaUIsdUJBQUEsRUFDakIsU0FBUyxlQUFBLEVBQ1QsUUFBUSxjQUFBLEVBQ1IsT0FBTyxhQUFBLEVBQ1AsT0FBTyxhQUFBLEVBQ1AsU0FBUyxlQUFBLEVBQ1QsT0FBTyxhQUFBLEVBQ1AsSUFBSSxVQUFBLEVBQ0osUUFBUSxjQUFBLEVBQ1IsSUFBSSxVQUFBLEVBQ0QsU0FBUyxjQWJ5RCxzSkFjeEUsQ0FEZTtJQUVaLElBQU0sTUFBTSxHQUFHLE9BQU8sQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDckQsSUFBTSxVQUFVLEdBQUcsUUFBUSxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxZQUFZLENBQUMsQ0FBQztJQUMvRCxJQUFNLGdCQUFnQixHQUFHLE1BQU0sSUFBSSxVQUFVLENBQUM7SUFDOUMsSUFBTSxNQUFNLEdBQUcsSUFBSSxLQUFLLFFBQVEsQ0FBQztJQUNqQyxJQUFNLFFBQVEsR0FBRyxNQUFNLElBQUksQ0FBQyxDQUFDLE9BQU8sQ0FBQztJQUNyQyxJQUFNLFVBQVUsR0FBRyxDQUFDLE1BQU0sSUFBSSxpQkFBTyxDQUFDLFVBQVUsRUFBRSxVQUFVLElBQUksaUJBQU8sQ0FBQyxXQUFXLEVBQUUsU0FBUyxDQUFDLENBQUM7SUFFaEcsSUFBTSxlQUFlLEdBQUcsSUFBQSx5Q0FBbUIsRUFBQztRQUN4QyxpQkFBaUIsbUJBQUE7UUFDakIsV0FBVyxFQUFFLENBQUMsZ0JBQWdCLElBQUksUUFBUTtRQUMxQyxXQUFXLEVBQUUsS0FBSztRQUNsQixPQUFPLFNBQUE7UUFDUCxTQUFTLFdBQUE7UUFDVCxPQUFPLFNBQUE7UUFDUCxNQUFNLFFBQUE7S0FDVCxDQUFDLENBQUM7SUFFSCxJQUFJLFFBQVEsRUFBRTtRQUNWLE9BQU8sV0FDSCxXQUFXLEVBQUUsTUFBTSxFQUNuQixlQUFlLEVBQUUsVUFBVSxFQUMzQixTQUFTLEVBQUUsT0FBRSw4QkFBQyxpQkFBTyxDQUFDLFlBQVksVUFBSyxVQUFVLFlBQ2pELE9BQU8sRUFBRSxlQUFlLENBQUMsT0FBTyxFQUNoQyxTQUFTLEVBQUUsZUFBZSxDQUFDLFNBQVMsRUFDcEMsT0FBTyxFQUFFLGVBQWUsQ0FBQyxPQUFPLEVBQ2hDLElBQUksRUFBRSxJQUFJLElBQUksUUFBUSxFQUN0QixRQUFRLEVBQUUsZ0JBQWdCLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxRQUFRLGFBQVIsUUFBUSxjQUFSLFFBQVEsR0FBSSxDQUFDLElBQzVDLFNBQVMsQ0FDVixDQUFDO0tBQ1Y7SUFFRCxPQUFPLFdBQ0gsU0FBUyxFQUFFLE9BQUUsd0NBQUksVUFBVSxZQUMzQixJQUFJLE1BQUEsRUFDSixRQUFRLFVBQUEsSUFDTCxTQUFTLENBQ1YsQ0FBQztBQUNYLENBQUM7QUFwREQsOENBb0RDIn0=
|
package/package.json
CHANGED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ForwardedRef, ForwardRefExoticComponent, PropsWithoutRef, ReactElement, RefAttributes } from "react";
|
|
2
|
+
export declare type ForwardRefRenderFunction<T, P> = {
|
|
3
|
+
(props: P, ref: ForwardedRef<T>): ReactElement | null;
|
|
4
|
+
displayName?: string;
|
|
5
|
+
/** defaultProps are not supported on render functions */
|
|
6
|
+
defaultProps?: never;
|
|
7
|
+
/** propTypes are not supported on render functions */
|
|
8
|
+
propTypes?: never;
|
|
9
|
+
};
|
|
10
|
+
export declare const forwardRef: <T, P>(name: string, render: ForwardRefRenderFunction<T, P>) => ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.forwardRef = void 0;
|
|
4
|
+
var react_1 = require("react");
|
|
5
|
+
var forwardRef = function (name, render) {
|
|
6
|
+
var Component = (0, react_1.forwardRef)(render);
|
|
7
|
+
Component.displayName = name;
|
|
8
|
+
return Component;
|
|
9
|
+
};
|
|
10
|
+
exports.forwardRef = forwardRef;
|
|
11
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9yd2FyZFJlZi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy91dGlscy9mb3J3YXJkUmVmLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7OztBQUFBLCtCQU9lO0FBYVIsSUFBTSxVQUFVLEdBQUcsVUFDdEIsSUFBWSxFQUNaLE1BQXNDO0lBRXRDLElBQU0sU0FBUyxHQUFHLElBQUEsa0JBQWUsRUFBQyxNQUFNLENBQUMsQ0FBQztJQUMxQyxTQUFTLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQztJQUM3QixPQUFPLFNBQVMsQ0FBQztBQUNyQixDQUFDLENBQUM7QUFQVyxRQUFBLFVBQVUsY0FPckIifQ==
|