@payfit/unity-components 3.21.5 → 3.22.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.
|
@@ -17,6 +17,10 @@ export declare const dialog: import('tailwind-variants').TVReturnType<{
|
|
|
17
17
|
dismissIcon: string;
|
|
18
18
|
};
|
|
19
19
|
};
|
|
20
|
+
height: {
|
|
21
|
+
default: {};
|
|
22
|
+
full: {};
|
|
23
|
+
};
|
|
20
24
|
}, {
|
|
21
25
|
overlay: string[];
|
|
22
26
|
wrapper: string[];
|
|
@@ -38,6 +42,10 @@ export declare const dialog: import('tailwind-variants').TVReturnType<{
|
|
|
38
42
|
dismissIcon: string;
|
|
39
43
|
};
|
|
40
44
|
};
|
|
45
|
+
height: {
|
|
46
|
+
default: {};
|
|
47
|
+
full: {};
|
|
48
|
+
};
|
|
41
49
|
}, {
|
|
42
50
|
overlay: string[];
|
|
43
51
|
wrapper: string[];
|
|
@@ -59,13 +67,17 @@ export declare const dialog: import('tailwind-variants').TVReturnType<{
|
|
|
59
67
|
dismissIcon: string;
|
|
60
68
|
};
|
|
61
69
|
};
|
|
70
|
+
height: {
|
|
71
|
+
default: {};
|
|
72
|
+
full: {};
|
|
73
|
+
};
|
|
62
74
|
}, {
|
|
63
75
|
overlay: string[];
|
|
64
76
|
wrapper: string[];
|
|
65
77
|
content: string[];
|
|
66
78
|
dismissIcon: string[];
|
|
67
79
|
}>>;
|
|
68
|
-
|
|
80
|
+
interface DialogBaseProps extends Omit<VariantProps<typeof dialog>, 'size' | 'height'> {
|
|
69
81
|
/**
|
|
70
82
|
* Dialog content. A render function can be provided to access `close`, which
|
|
71
83
|
* closes an uncontrolled dialog programmatically.
|
|
@@ -80,6 +92,14 @@ export interface DialogProps extends VariantProps<typeof dialog> {
|
|
|
80
92
|
/** if false it does not allow to close the modal when click outside, default: true*/
|
|
81
93
|
isDismissable?: boolean;
|
|
82
94
|
}
|
|
95
|
+
export type DialogProps = DialogBaseProps & ({
|
|
96
|
+
size: 'lg';
|
|
97
|
+
/** Allows long content in large desktop dialogs to use more viewport height. */
|
|
98
|
+
height?: 'default' | 'full';
|
|
99
|
+
} | {
|
|
100
|
+
size?: 'sm' | 'md';
|
|
101
|
+
height?: never;
|
|
102
|
+
});
|
|
83
103
|
/**
|
|
84
104
|
* The Dialog component provides a modal interface for displaying important information and gathering user input
|
|
85
105
|
* without requiring navigation to a different page. It maintains context and focus while demanding attention.
|
|
@@ -98,6 +118,7 @@ export interface DialogProps extends VariantProps<typeof dialog> {
|
|
|
98
118
|
* @param props.onOpenChange - Callback fired when open state changes
|
|
99
119
|
* @param props.isDismissable - Whether the dialog can be dismissed by clicking outside or pressing Escape
|
|
100
120
|
* @param props.size - The size variant of the dialog (sm, md, lg)
|
|
121
|
+
* @param props.height - The height limit of large dialogs (default or full); other sizes use default
|
|
101
122
|
* @param props.aria-label - Accessible label when DialogTitle is not provided
|
|
102
123
|
* @see {@link DialogProps} for all available props
|
|
103
124
|
* @example
|
|
@@ -132,7 +153,7 @@ export interface DialogProps extends VariantProps<typeof dialog> {
|
|
|
132
153
|
* @remarks
|
|
133
154
|
* [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-dialog--docs) • [Design Docs](https://www.payfit.design/24f360409/p/01f5dc-dialog)
|
|
134
155
|
*/
|
|
135
|
-
export declare function Dialog({ children, isOpen, onOpenChange, isDismissable, size, ...rest }: DialogProps): import('react/jsx-runtime').JSX.Element;
|
|
156
|
+
export declare function Dialog({ children, isOpen, onOpenChange, isDismissable, size, height, ...rest }: DialogProps): import('react/jsx-runtime').JSX.Element;
|
|
136
157
|
export declare namespace Dialog {
|
|
137
158
|
var displayName: string;
|
|
138
159
|
}
|
|
@@ -37,42 +37,59 @@ var g = a({
|
|
|
37
37
|
],
|
|
38
38
|
dismissIcon: ["uy:absolute uy:right-200 uy:top-200 uy:z-20"]
|
|
39
39
|
},
|
|
40
|
-
variants: {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
40
|
+
variants: {
|
|
41
|
+
size: {
|
|
42
|
+
sm: {
|
|
43
|
+
wrapper: "uy:md:w-4/12 uy:md:max-w-62.5",
|
|
44
|
+
content: ["uy:md:max-h-[calc(82dvh-(var(--uy-spacing-400)*2))]"]
|
|
45
|
+
},
|
|
46
|
+
md: {
|
|
47
|
+
wrapper: "uy:md:w-5/12 uy:md:max-w-80",
|
|
48
|
+
content: ["uy:md:max-h-[calc(82dvh-(var(--uy-spacing-400)*2))]"]
|
|
49
|
+
},
|
|
50
|
+
lg: {
|
|
51
|
+
wrapper: "uy:md:w-11/12 uy:md:max-w-[1000px] uy:md:rounded-300 uy:md:pt-9 uy:md:px-500 uy:md:pb-400",
|
|
52
|
+
content: ["uy:md:max-h-[calc(82dvh-(var(--uy-spacing)*9)-var(--uy-spacing-400))]"],
|
|
53
|
+
dismissIcon: "uy:md:right-300 uy:md:top-300"
|
|
54
|
+
}
|
|
44
55
|
},
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
56
|
+
height: {
|
|
57
|
+
default: {},
|
|
58
|
+
full: {}
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
compoundVariants: [{
|
|
62
|
+
height: "full",
|
|
63
|
+
size: "lg",
|
|
64
|
+
class: {
|
|
65
|
+
wrapper: "uy:md:max-h-[92dvh]",
|
|
66
|
+
content: "uy:md:max-h-[calc(92dvh-(var(--uy-spacing)*9)-var(--uy-spacing-400))]"
|
|
53
67
|
}
|
|
54
|
-
}
|
|
68
|
+
}],
|
|
55
69
|
defaultVariants: { size: "md" }
|
|
56
70
|
}), _ = (e) => n.toArray(e).some((e) => r(e) ? r(e) && e.type === t && e.props.variant === "danger" ? !0 : _(e.props.children) : !1);
|
|
57
|
-
function v({ children: e, isOpen: t, onOpenChange: n, isDismissable: r = !0, size: i = "md",
|
|
58
|
-
let
|
|
71
|
+
function v({ children: e, isOpen: t, onOpenChange: n, isDismissable: r = !0, size: i = "md", height: a, ...s }) {
|
|
72
|
+
let u = c(), f = l(), { overlay: p, wrapper: _, content: v, dismissIcon: b } = g({
|
|
73
|
+
size: i,
|
|
74
|
+
height: a
|
|
75
|
+
});
|
|
59
76
|
return /* @__PURE__ */ o(h, {
|
|
60
77
|
isDismissable: r,
|
|
61
78
|
isOpen: t,
|
|
62
79
|
onOpenChange: n,
|
|
63
|
-
className:
|
|
80
|
+
className: p(),
|
|
64
81
|
children: /* @__PURE__ */ o(m, {
|
|
65
|
-
className:
|
|
82
|
+
className: _(),
|
|
66
83
|
"data-unity-dialog": !0,
|
|
67
84
|
"data-dd-privacy": "allow",
|
|
68
85
|
children: /* @__PURE__ */ o(d.Provider, {
|
|
69
|
-
value: { "aria-describedby":
|
|
86
|
+
value: { "aria-describedby": f },
|
|
70
87
|
children: /* @__PURE__ */ o(y, {
|
|
71
|
-
"aria-label":
|
|
72
|
-
dialogContentId:
|
|
73
|
-
contentClassName:
|
|
74
|
-
dismissIconClassName:
|
|
75
|
-
dismissButtonLabel:
|
|
88
|
+
"aria-label": s["aria-label"],
|
|
89
|
+
dialogContentId: f,
|
|
90
|
+
contentClassName: v(),
|
|
91
|
+
dismissIconClassName: b(),
|
|
92
|
+
dismissButtonLabel: u.formatMessage({ id: "unity:component:common:close:label" }),
|
|
76
93
|
isDismissable: r,
|
|
77
94
|
size: i,
|
|
78
95
|
children: e
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@payfit/unity-components",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.22.1",
|
|
4
4
|
"module": "./dist/esm/index.js",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
"@formatjs/intl": "4.1.12",
|
|
104
104
|
"@internationalized/date": "3.12.4",
|
|
105
105
|
"minimatch": "10.2.5",
|
|
106
|
-
"@payfit/unity-illustrations": "3.
|
|
106
|
+
"@payfit/unity-illustrations": "3.22.1",
|
|
107
107
|
"@radix-ui/react-avatar": "1.2.7",
|
|
108
108
|
"@radix-ui/react-slot": "1.4.0",
|
|
109
109
|
"@react-aria/interactions": "3.28.1",
|
|
@@ -132,8 +132,8 @@
|
|
|
132
132
|
"zod": "4.6.5"
|
|
133
133
|
},
|
|
134
134
|
"peerDependencies": {
|
|
135
|
-
"@payfit/unity-icons": "3.
|
|
136
|
-
"@payfit/unity-themes": "3.
|
|
135
|
+
"@payfit/unity-icons": "3.22.1",
|
|
136
|
+
"@payfit/unity-themes": "3.22.1",
|
|
137
137
|
"@storybook/react-vite": "^10",
|
|
138
138
|
"@tanstack/react-query": "^5",
|
|
139
139
|
"@tanstack/form-core": "1.33.5",
|
|
@@ -156,8 +156,8 @@
|
|
|
156
156
|
"@payfit/storybook-addon-console-errors": "0.0.0-use.local",
|
|
157
157
|
"@payfit/storybook-addon-datadog-rum": "0.0.0-use.local",
|
|
158
158
|
"@payfit/storybook-config": "0.0.0-use.local",
|
|
159
|
-
"@payfit/unity-icons": "3.
|
|
160
|
-
"@payfit/unity-themes": "3.
|
|
159
|
+
"@payfit/unity-icons": "3.22.1",
|
|
160
|
+
"@payfit/unity-themes": "3.22.1",
|
|
161
161
|
"@payfit/vite-configs": "0.0.0-use.local",
|
|
162
162
|
"@storybook/addon-a11y": "10.6.1",
|
|
163
163
|
"@storybook/addon-designs": "11.1.4",
|