@payfit/unity-components 2.51.3 → 2.51.5
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.
|
@@ -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.5",
|
|
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.5"
|
|
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.5",
|
|
107
|
+
"@payfit/unity-themes": "2.51.5"
|
|
108
108
|
},
|
|
109
109
|
"devDependencies": {
|
|
110
110
|
"@figma/code-connect": "1.4.8",
|
|
@@ -154,9 +154,9 @@
|
|
|
154
154
|
"@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
|
|
155
155
|
"@payfit/storybook-addon-console-errors": "0.0.0-use.local",
|
|
156
156
|
"@payfit/storybook-config": "0.0.0-use.local",
|
|
157
|
-
"@payfit/unity-icons": "2.51.
|
|
158
|
-
"@payfit/unity-illustrations": "2.51.
|
|
159
|
-
"@payfit/unity-themes": "2.51.
|
|
157
|
+
"@payfit/unity-icons": "2.51.5",
|
|
158
|
+
"@payfit/unity-illustrations": "2.51.5",
|
|
159
|
+
"@payfit/unity-themes": "2.51.5",
|
|
160
160
|
"@payfit/vite-configs": "0.0.0-use.local"
|
|
161
161
|
},
|
|
162
162
|
"peerDependenciesMeta": {
|