@uxf/ui 11.15.0 → 11.15.2
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/button/button.d.ts +2 -0
- package/button/button.js +3 -2
- package/button/next-link.d.ts +19 -0
- package/button/next-link.js +2 -0
- package/button-list/button-list.js +3 -1
- package/package.json +1 -1
package/button/button.d.ts
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { UseAnchorProps } from "@uxf/core/hooks/useAnchorProps";
|
|
2
2
|
import { ButtonColors, ButtonSizes, ButtonVariants } from "@uxf/ui/button/theme";
|
|
3
3
|
import React, { AnchorHTMLAttributes } from "react";
|
|
4
|
+
import { NextLink } from "./next-link";
|
|
4
5
|
export type ButtonVariant = keyof ButtonVariants;
|
|
5
6
|
export type ButtonSize = keyof ButtonSizes;
|
|
6
7
|
export type ButtonColor = keyof ButtonColors;
|
|
7
8
|
export interface ButtonProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type">, UseAnchorProps {
|
|
9
|
+
as?: NextLink | "a";
|
|
8
10
|
color?: ButtonColor;
|
|
9
11
|
isFullWidth?: boolean;
|
|
10
12
|
isIconButton?: boolean;
|
package/button/button.js
CHANGED
|
@@ -29,11 +29,12 @@ const cx_1 = require("@uxf/core/utils/cx");
|
|
|
29
29
|
const react_1 = __importStar(require("react"));
|
|
30
30
|
exports.Button = (0, react_1.forwardRef)((props, ref) => {
|
|
31
31
|
// eslint-disable-next-line react/destructuring-assignment
|
|
32
|
-
const { color, isIconButton, isFullWidth, size, variant, className, ...restProps } = props;
|
|
32
|
+
const { as = "a", color, isIconButton, isFullWidth, size, variant, className, ...restProps } = props;
|
|
33
|
+
const Component = as;
|
|
33
34
|
const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
|
|
34
35
|
...restProps,
|
|
35
36
|
className: (0, cx_1.cx)("uxf-button", `uxf-button--color-${color !== null && color !== void 0 ? color : "default"}`, `uxf-button--size-${size !== null && size !== void 0 ? size : "default"}`, `uxf-button--variant-${variant !== null && variant !== void 0 ? variant : "default"}`, isIconButton && "uxf-button--icon-button", isFullWidth && "uxf-button--full-width", className),
|
|
36
37
|
});
|
|
37
|
-
return (react_1.default.createElement(
|
|
38
|
+
return (react_1.default.createElement(Component, { ref: ref, ...anchorProps }, typeof props.children === "string" ? (react_1.default.createElement("span", { className: "uxf-button__text" }, props.children)) : (props.children)));
|
|
38
39
|
});
|
|
39
40
|
exports.Button.displayName = "UxfUiButton";
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/// <reference types="node" />
|
|
2
|
+
import React from "react";
|
|
3
|
+
import type { UrlObject } from "url";
|
|
4
|
+
type Url = string | UrlObject;
|
|
5
|
+
type InternalLinkProps = {
|
|
6
|
+
href: Url;
|
|
7
|
+
as?: Url;
|
|
8
|
+
replace?: boolean;
|
|
9
|
+
scroll?: boolean;
|
|
10
|
+
shallow?: boolean;
|
|
11
|
+
prefetch?: boolean;
|
|
12
|
+
onMouseEnter?: React.MouseEventHandler<HTMLAnchorElement>;
|
|
13
|
+
onTouchStart?: React.TouchEventHandler<HTMLAnchorElement>;
|
|
14
|
+
onClick?: React.MouseEventHandler<HTMLAnchorElement>;
|
|
15
|
+
};
|
|
16
|
+
export type NextLink = React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof InternalLinkProps> & InternalLinkProps & {
|
|
17
|
+
children?: React.ReactNode;
|
|
18
|
+
} & React.RefAttributes<HTMLAnchorElement>>;
|
|
19
|
+
export {};
|
|
@@ -55,6 +55,8 @@ const ButtonList = (props) => {
|
|
|
55
55
|
if ((0, is_empty_1.isEmpty)(props.buttons)) {
|
|
56
56
|
return null;
|
|
57
57
|
}
|
|
58
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
59
|
+
const { as, ...openButtonProps } = props.openButton ? props.openButton : { as: null };
|
|
58
60
|
return (react_3.default.createElement("div", { className: (0, cx_1.cx)("uxf-button-list", props.className) },
|
|
59
61
|
buttonsToRender.map((button, index) => {
|
|
60
62
|
var _a, _b, _c;
|
|
@@ -66,7 +68,7 @@ const ButtonList = (props) => {
|
|
|
66
68
|
restButtons.length > 0 && (react_3.default.createElement(react_2.Menu, { as: "div", className: "uxf-button-list__menu" }, ({ open }) => {
|
|
67
69
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
68
70
|
return (react_3.default.createElement(react_3.default.Fragment, null,
|
|
69
|
-
react_3.default.createElement(react_2.Menu.Button, { as: button_1.Button, ...
|
|
71
|
+
react_3.default.createElement(react_2.Menu.Button, { as: button_1.Button, ...openButtonProps, color: (_b = (_a = props.openButton) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : props.color, size: (_d = (_c = props.openButton) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : props.size, variant: (_f = (_e = props.openButton) === null || _e === void 0 ? void 0 : _e.variant) !== null && _f !== void 0 ? _f : props.variant, className: (0, cx_1.cx)((_g = props.openButton) === null || _g === void 0 ? void 0 : _g.className, "uxf-button-list__open-button"), isIconButton: !!openButtonIcon && !openButtonLabel, ref: dropdown.refs.setReference },
|
|
70
72
|
openButtonIcon && (react_3.default.createElement(icon_1.Icon, { name: openButtonIcon, className: "uxf-button-list__open-button-icon" })),
|
|
71
73
|
openButtonLabel && (react_3.default.createElement("span", { className: "uxf-button-list__open-button-label" }, openButtonLabel))),
|
|
72
74
|
open && (react_3.default.createElement(react_1.FloatingPortal, null,
|