@payfit/unity-components 2.51.4 → 2.51.6
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.
|
@@ -47,11 +47,11 @@ type UnionButtonProps = (UnityButtonProps & {
|
|
|
47
47
|
} & ButtonGhost) | (UnityButtonProps & {
|
|
48
48
|
variant: 'outlined';
|
|
49
49
|
} & ButtonOutlined);
|
|
50
|
-
export type ButtonProps = PropsWithChildren<Omit<UnionButtonProps, 'style'>>;
|
|
50
|
+
export type ButtonProps = PropsWithChildren<Omit<UnionButtonProps, 'style' | 'className'>>;
|
|
51
51
|
/**
|
|
52
52
|
* Buttons allow users to take actions, and make choices, with a single tap.
|
|
53
53
|
*/
|
|
54
|
-
declare const Button: import('react').ForwardRefExoticComponent<Omit<UnionButtonProps, "style"> & {
|
|
54
|
+
declare const Button: import('react').ForwardRefExoticComponent<Omit<UnionButtonProps, "style" | "className"> & {
|
|
55
55
|
children?: import('react').ReactNode | undefined;
|
|
56
56
|
} & import('react').RefAttributes<HTMLButtonElement>>;
|
|
57
57
|
export { Button };
|
|
@@ -9,32 +9,26 @@ import { useIntl as u } from "react-intl";
|
|
|
9
9
|
import { useSelector as d } from "@tanstack/react-store";
|
|
10
10
|
//#region src/components/inline-field-group/parts/InlineFieldGroupActions.tsx
|
|
11
11
|
var f = o({
|
|
12
|
-
slots: {
|
|
13
|
-
container: "",
|
|
14
|
-
button: ""
|
|
15
|
-
},
|
|
12
|
+
slots: { container: "" },
|
|
16
13
|
variants: { orientation: {
|
|
17
14
|
horizontal: { container: "uy:flex uy:gap-100 uy:items-center" },
|
|
18
|
-
vertical: {
|
|
19
|
-
container: "uy:flex uy:flex-col uy:gap-100 uy:w-full",
|
|
20
|
-
button: "uy:w-full"
|
|
21
|
-
}
|
|
15
|
+
vertical: { container: "uy:flex uy:flex-col uy:gap-100 uy:w-full" }
|
|
22
16
|
} },
|
|
23
17
|
defaultVariants: { orientation: "horizontal" }
|
|
24
18
|
});
|
|
25
19
|
function p({ orientation: o = "horizontal", customActions: p }) {
|
|
26
20
|
let m = u(), h = i(r), g = e(), _ = g === "xs" || g === "sm";
|
|
27
21
|
if (!h) throw Error("InlineFieldGroupActions must be used within InlineFieldGroup");
|
|
28
|
-
let { mode: v, enterEditMode: y, exitEditMode: b, editViewId: x, isLoading: S, editButtonRef: C, editLabel: w, saveLabel: T, cancelLabel: E, onEditPress: D, onSavePress: O, onCancelPress: k } = h, { isDirty: A } = d(n().store, (e) => ({ isDirty: e.isDirty })), { container: j
|
|
22
|
+
let { mode: v, enterEditMode: y, exitEditMode: b, editViewId: x, isLoading: S, editButtonRef: C, editLabel: w, saveLabel: T, cancelLabel: E, onEditPress: D, onSavePress: O, onCancelPress: k } = h, { isDirty: A } = d(n().store, (e) => ({ isDirty: e.isDirty })), { container: j } = f({ orientation: o }), M = w || m.formatMessage({
|
|
29
23
|
id: "unity:component:inline-field-group:edit",
|
|
30
24
|
defaultMessage: "Edit"
|
|
31
|
-
}),
|
|
25
|
+
}), N = T || m.formatMessage({
|
|
32
26
|
id: "unity:component:inline-field-group:save",
|
|
33
27
|
defaultMessage: "Save"
|
|
34
|
-
}),
|
|
28
|
+
}), P = E || m.formatMessage({
|
|
35
29
|
id: "unity:component:inline-field-group:cancel",
|
|
36
30
|
defaultMessage: "Cancel"
|
|
37
|
-
}),
|
|
31
|
+
}), F = a(() => _ ? /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(t, {
|
|
38
32
|
variant: "primary",
|
|
39
33
|
size: "default",
|
|
40
34
|
isDisabled: !A || S,
|
|
@@ -43,8 +37,7 @@ function p({ orientation: o = "horizontal", customActions: p }) {
|
|
|
43
37
|
onPress: () => {
|
|
44
38
|
O?.();
|
|
45
39
|
},
|
|
46
|
-
|
|
47
|
-
children: P
|
|
40
|
+
children: N
|
|
48
41
|
}), /* @__PURE__ */ c(t, {
|
|
49
42
|
variant: "secondary",
|
|
50
43
|
size: "default",
|
|
@@ -53,8 +46,7 @@ function p({ orientation: o = "horizontal", customActions: p }) {
|
|
|
53
46
|
},
|
|
54
47
|
isDisabled: S,
|
|
55
48
|
type: "button",
|
|
56
|
-
|
|
57
|
-
children: F
|
|
49
|
+
children: P
|
|
58
50
|
})] }) : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(t, {
|
|
59
51
|
variant: "secondary",
|
|
60
52
|
size: "default",
|
|
@@ -63,8 +55,7 @@ function p({ orientation: o = "horizontal", customActions: p }) {
|
|
|
63
55
|
},
|
|
64
56
|
isDisabled: S,
|
|
65
57
|
type: "button",
|
|
66
|
-
|
|
67
|
-
children: F
|
|
58
|
+
children: P
|
|
68
59
|
}), /* @__PURE__ */ c(t, {
|
|
69
60
|
variant: "primary",
|
|
70
61
|
size: "default",
|
|
@@ -74,12 +65,10 @@ function p({ orientation: o = "horizontal", customActions: p }) {
|
|
|
74
65
|
onPress: () => {
|
|
75
66
|
O?.();
|
|
76
67
|
},
|
|
77
|
-
|
|
78
|
-
children: P
|
|
68
|
+
children: N
|
|
79
69
|
})] }), [
|
|
80
|
-
M,
|
|
81
|
-
F,
|
|
82
70
|
P,
|
|
71
|
+
N,
|
|
83
72
|
b,
|
|
84
73
|
A,
|
|
85
74
|
S,
|
|
@@ -101,9 +90,8 @@ function p({ orientation: o = "horizontal", customActions: p }) {
|
|
|
101
90
|
prefixIcon: "PencilSimpleOutlined",
|
|
102
91
|
"aria-expanded": !1,
|
|
103
92
|
"aria-controls": x,
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
}) : I]
|
|
93
|
+
children: M
|
|
94
|
+
}) : F]
|
|
107
95
|
});
|
|
108
96
|
}
|
|
109
97
|
p.displayName = "InlineFieldGroupActions";
|
|
@@ -1,41 +1,38 @@
|
|
|
1
1
|
import { VariantProps } from '@payfit/unity-themes';
|
|
2
2
|
import { PropsWithChildren } from 'react';
|
|
3
3
|
export declare const sidePanel: import('tailwind-variants').TVReturnType<{
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
wrapper?: import('tailwind-merge').ClassNameValue;
|
|
4
|
+
isModal: {
|
|
5
|
+
false: {
|
|
6
|
+
overlay: string;
|
|
7
|
+
wrapper: string;
|
|
9
8
|
};
|
|
10
9
|
};
|
|
11
|
-
}
|
|
12
|
-
[x: string]: {
|
|
13
|
-
[x: string]: import('tailwind-merge').ClassNameValue | {
|
|
14
|
-
content?: import('tailwind-merge').ClassNameValue;
|
|
15
|
-
overlay?: import('tailwind-merge').ClassNameValue;
|
|
16
|
-
wrapper?: import('tailwind-merge').ClassNameValue;
|
|
17
|
-
};
|
|
18
|
-
};
|
|
19
|
-
} | {}, {
|
|
10
|
+
}, {
|
|
20
11
|
overlay: string[];
|
|
21
12
|
wrapper: string[];
|
|
22
|
-
content: string
|
|
13
|
+
content: string;
|
|
23
14
|
}, undefined, {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
wrapper?: import('tailwind-merge').ClassNameValue;
|
|
15
|
+
isModal: {
|
|
16
|
+
false: {
|
|
17
|
+
overlay: string;
|
|
18
|
+
wrapper: string;
|
|
29
19
|
};
|
|
30
20
|
};
|
|
31
|
-
}
|
|
21
|
+
}, {
|
|
32
22
|
overlay: string[];
|
|
33
23
|
wrapper: string[];
|
|
34
|
-
content: string
|
|
35
|
-
}, import('tailwind-variants').TVReturnType<
|
|
24
|
+
content: string;
|
|
25
|
+
}, import('tailwind-variants').TVReturnType<{
|
|
26
|
+
isModal: {
|
|
27
|
+
false: {
|
|
28
|
+
overlay: string;
|
|
29
|
+
wrapper: string;
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
}, {
|
|
36
33
|
overlay: string[];
|
|
37
34
|
wrapper: string[];
|
|
38
|
-
content: string
|
|
35
|
+
content: string;
|
|
39
36
|
}, undefined, unknown, unknown, undefined>>;
|
|
40
37
|
export interface SidePanelProps extends PropsWithChildren<VariantProps<typeof sidePanel>> {
|
|
41
38
|
/**
|
|
@@ -64,6 +61,24 @@ export interface SidePanelProps extends PropsWithChildren<VariantProps<typeof si
|
|
|
64
61
|
* Required when using controlled mode with `isOpen`.
|
|
65
62
|
*/
|
|
66
63
|
onOpenChange?: (isOpen: boolean) => void;
|
|
64
|
+
/**
|
|
65
|
+
* Accessible label for the side panel when no visible title is associated.
|
|
66
|
+
*/
|
|
67
|
+
'aria-label'?: string;
|
|
68
|
+
/**
|
|
69
|
+
* ID of the element that labels the side panel.
|
|
70
|
+
*/
|
|
71
|
+
'aria-labelledby'?: string;
|
|
72
|
+
/**
|
|
73
|
+
* Whether the panel should behave as a modal.
|
|
74
|
+
*
|
|
75
|
+
* When true, the side panel traps focus, locks background scroll and blocks
|
|
76
|
+
* interaction with the rest of the page. When false, the side panel remains
|
|
77
|
+
* open without trapping focus, so other overlays such as notifications can be
|
|
78
|
+
* focused and interacted with.
|
|
79
|
+
* @default true
|
|
80
|
+
*/
|
|
81
|
+
isModal?: boolean;
|
|
67
82
|
/**
|
|
68
83
|
* If true, scroll locking will be disabled, allowing background scrolling while the panel is open.
|
|
69
84
|
* **Requires** controlled mode with `isOpen`/`onOpenChange`.
|
|
@@ -2,52 +2,90 @@ import { SidePanelDragIndicator as e } from "./parts/SidePanelDragIndicator.js";
|
|
|
2
2
|
import { forwardRef as t, useEffect as n } from "react";
|
|
3
3
|
import { uyTv as r } from "@payfit/unity-themes";
|
|
4
4
|
import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
5
|
-
import { Dialog as o } from "react-aria-components/Dialog";
|
|
6
|
-
import { Modal as
|
|
5
|
+
import { Dialog as o, OverlayTriggerStateContext as s } from "react-aria-components/Dialog";
|
|
6
|
+
import { Modal as c, ModalOverlay as l } from "react-aria-components/Modal";
|
|
7
|
+
import { useOverlayTriggerState as u } from "react-stately/useOverlayTriggerState";
|
|
8
|
+
import { createPortal as d } from "react-dom";
|
|
7
9
|
//#region src/components/side-panel/SidePanel.tsx
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
10
|
+
var f = r({
|
|
11
|
+
slots: {
|
|
12
|
+
overlay: [
|
|
13
|
+
"uy:md:bg-gradient-to-r uy:md:from-grayscale-l12/0 uy:md:to-grayscale-l12/10 uy:md:from-70% uy:md:via-100%",
|
|
14
|
+
"uy:fixed uy:inset-0 uy:isolate uy:z-30",
|
|
15
|
+
"uy:data-[entering]:animate-fade-in uy:data-[exiting]:animate-fade-out"
|
|
16
|
+
],
|
|
17
|
+
wrapper: [
|
|
18
|
+
"uy:w-full uy:md:w-[400px]",
|
|
19
|
+
"uy:fixed uy:bottom-0 uy:md:inset-y-200 uy:md:right-200",
|
|
20
|
+
"uy:bg-surface-neutral uy:rounded-t-200 uy:md:rounded-200 uy:shadow-flying",
|
|
21
|
+
"uy:flex uy:flex-col uy:h-[95svh] uy:md:max-h-[calc(100vh-2rem)]",
|
|
22
|
+
"uy:overflow-hidden",
|
|
23
|
+
"uy:data-[entering]:animate-slide-up-fade-in uy:data-[exiting]:animate-slide-down-fade-out uy:md:data-[entering]:animate-slide-right-fade-in uy:md:data-[exiting]:animate-slide-right-fade-out"
|
|
24
|
+
],
|
|
25
|
+
content: "uy:flex uy:flex-col uy:h-full uy:overflow-hidden uy:outline-none"
|
|
26
|
+
},
|
|
27
|
+
variants: { isModal: { false: {
|
|
28
|
+
overlay: "uy:pointer-events-none",
|
|
29
|
+
wrapper: "uy:pointer-events-auto"
|
|
30
|
+
} } }
|
|
31
|
+
}), p = t(({ children: t, isOpen: r, onOpenChange: p, defaultOpen: m, isDismissable: h = !0, isKeyboardDismissDisabled: g = !1, isModal: _ = !0, disableScrollLocking: v = !1, "aria-label": y = "Side panel", "aria-labelledby": b, ...x }, S) => {
|
|
32
|
+
let C = u({
|
|
33
|
+
isOpen: r,
|
|
34
|
+
onOpenChange: p,
|
|
35
|
+
defaultOpen: m
|
|
36
|
+
}), { overlay: w, wrapper: T, content: E } = f({ isModal: _ });
|
|
25
37
|
return n(() => {
|
|
26
|
-
|
|
38
|
+
v && (r ?? m) && (document.documentElement.style.overflow = "", document.body.style.overflow = "");
|
|
27
39
|
}, [
|
|
28
|
-
|
|
40
|
+
v,
|
|
29
41
|
r,
|
|
30
|
-
|
|
31
|
-
]), /* @__PURE__ */ i(
|
|
32
|
-
className:
|
|
42
|
+
m
|
|
43
|
+
]), _ ? /* @__PURE__ */ i(l, {
|
|
44
|
+
className: w(),
|
|
33
45
|
isOpen: r,
|
|
34
|
-
onOpenChange:
|
|
35
|
-
defaultOpen:
|
|
36
|
-
isDismissable:
|
|
37
|
-
isKeyboardDismissDisabled:
|
|
38
|
-
children: /* @__PURE__ */ a(
|
|
46
|
+
onOpenChange: p,
|
|
47
|
+
defaultOpen: m,
|
|
48
|
+
isDismissable: h,
|
|
49
|
+
isKeyboardDismissDisabled: g,
|
|
50
|
+
children: /* @__PURE__ */ a(c, {
|
|
39
51
|
"data-dd-privacy": "allow",
|
|
40
|
-
...
|
|
41
|
-
ref:
|
|
42
|
-
className:
|
|
52
|
+
...x,
|
|
53
|
+
ref: S,
|
|
54
|
+
className: T(),
|
|
43
55
|
"data-unity-side-panel": !0,
|
|
44
56
|
children: [/* @__PURE__ */ i(e, {}), /* @__PURE__ */ i(o, {
|
|
45
|
-
className:
|
|
57
|
+
className: E(),
|
|
46
58
|
children: t
|
|
47
59
|
})]
|
|
48
60
|
})
|
|
49
|
-
})
|
|
61
|
+
}) : !C.isOpen || typeof document > "u" || !document.body ? null : d(/* @__PURE__ */ i(s.Provider, {
|
|
62
|
+
value: C,
|
|
63
|
+
children: /* @__PURE__ */ i("div", {
|
|
64
|
+
className: w(),
|
|
65
|
+
children: /* @__PURE__ */ a("div", {
|
|
66
|
+
"data-dd-privacy": "allow",
|
|
67
|
+
...x,
|
|
68
|
+
ref: S,
|
|
69
|
+
className: T(),
|
|
70
|
+
"data-unity-side-panel": !0,
|
|
71
|
+
onClickCapture: (e) => {
|
|
72
|
+
e.target instanceof Element && e.target.closest("[slot=\"close\"]") && C.close();
|
|
73
|
+
},
|
|
74
|
+
onKeyDownCapture: (e) => {
|
|
75
|
+
h && e.key === "Escape" && !g && C.close();
|
|
76
|
+
},
|
|
77
|
+
children: [/* @__PURE__ */ i(e, {}), /* @__PURE__ */ i("div", {
|
|
78
|
+
"aria-label": b ? void 0 : y,
|
|
79
|
+
"aria-labelledby": b,
|
|
80
|
+
"aria-modal": !1,
|
|
81
|
+
className: E(),
|
|
82
|
+
role: "dialog",
|
|
83
|
+
children: t
|
|
84
|
+
})]
|
|
85
|
+
})
|
|
86
|
+
})
|
|
87
|
+
}), document.body);
|
|
50
88
|
});
|
|
51
|
-
|
|
89
|
+
p.displayName = "SidePanel";
|
|
52
90
|
//#endregion
|
|
53
|
-
export {
|
|
91
|
+
export { p as SidePanel, f as sidePanel };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@payfit/unity-components",
|
|
3
|
-
"version": "2.51.
|
|
3
|
+
"version": "2.51.6",
|
|
4
4
|
"module": "./dist/esm/index.js",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
"tailwind-variants": "3.2.2",
|
|
92
92
|
"usehooks-ts": "3.1.1",
|
|
93
93
|
"zod": "4.4.3",
|
|
94
|
-
"@payfit/unity-illustrations": "2.51.
|
|
94
|
+
"@payfit/unity-illustrations": "2.51.6"
|
|
95
95
|
},
|
|
96
96
|
"peerDependencies": {
|
|
97
97
|
"@hookform/devtools": "^4",
|
|
@@ -103,8 +103,8 @@
|
|
|
103
103
|
"react-hook-form": "^7",
|
|
104
104
|
"react-router-dom": "^5",
|
|
105
105
|
"zod": "^3 || ^4",
|
|
106
|
-
"@payfit/unity-icons": "2.51.
|
|
107
|
-
"@payfit/unity-themes": "2.51.
|
|
106
|
+
"@payfit/unity-icons": "2.51.6",
|
|
107
|
+
"@payfit/unity-themes": "2.51.6"
|
|
108
108
|
},
|
|
109
109
|
"devDependencies": {
|
|
110
110
|
"@figma/code-connect": "1.4.8",
|
|
@@ -152,12 +152,12 @@
|
|
|
152
152
|
"vitest": "4.1.9",
|
|
153
153
|
"@payfit/hr-app-eslint": "0.0.0-use.local",
|
|
154
154
|
"@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
|
|
155
|
-
"@payfit/storybook-addon-console-errors": "0.0.0-use.local",
|
|
156
155
|
"@payfit/storybook-config": "0.0.0-use.local",
|
|
157
|
-
"@payfit/
|
|
158
|
-
"@payfit/unity-
|
|
156
|
+
"@payfit/storybook-addon-console-errors": "0.0.0-use.local",
|
|
157
|
+
"@payfit/unity-illustrations": "2.51.6",
|
|
158
|
+
"@payfit/unity-themes": "2.51.6",
|
|
159
159
|
"@payfit/vite-configs": "0.0.0-use.local",
|
|
160
|
-
"@payfit/unity-icons": "2.51.
|
|
160
|
+
"@payfit/unity-icons": "2.51.6"
|
|
161
161
|
},
|
|
162
162
|
"peerDependenciesMeta": {
|
|
163
163
|
"@hookform/devtools": {
|