@payfit/unity-components 2.22.1 → 2.22.3
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,15 +1,15 @@
|
|
|
1
1
|
import { jsx as e, jsxs as i } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef as
|
|
2
|
+
import { forwardRef as d, useMemo as f } from "react";
|
|
3
3
|
import { uyTv as y } from "@payfit/unity-themes";
|
|
4
|
-
import { useId as
|
|
5
|
-
import { FormattedMessage as
|
|
6
|
-
import { SkipLinks as
|
|
4
|
+
import { useId as c } from "react-aria";
|
|
5
|
+
import { FormattedMessage as a } from "react-intl";
|
|
6
|
+
import { SkipLinks as p, SkipLink as o } from "../skip-links/SkipLinks.js";
|
|
7
7
|
import { FunnelLayoutProvider as m } from "./FunnelLayout.context.js";
|
|
8
8
|
const I = y({
|
|
9
9
|
base: "uy:relative uy:h-dvh uy:flex uy:flex-col uy:bg-canvas uy:overflow-auto"
|
|
10
|
-
}), k =
|
|
11
|
-
({ children: u, header: l, ...r },
|
|
12
|
-
const n =
|
|
10
|
+
}), k = d(
|
|
11
|
+
({ children: u, header: l, ...r }, s) => {
|
|
12
|
+
const n = c(), t = f(
|
|
13
13
|
() => ({
|
|
14
14
|
mainContentId: `funnel-main-content-${n}`,
|
|
15
15
|
topbarId: `funnel-top-bar-${n}`,
|
|
@@ -26,34 +26,37 @@ const I = y({
|
|
|
26
26
|
{
|
|
27
27
|
"data-dd-privacy": "mask-user-input",
|
|
28
28
|
...r,
|
|
29
|
-
ref:
|
|
29
|
+
ref: s,
|
|
30
30
|
className: I(),
|
|
31
31
|
"data-unity-component": "FunnelLayout",
|
|
32
|
+
style: {
|
|
33
|
+
"--uy-funnel-sidebar-offset": "calc(var(--uy-spacing-800) + var(--uy-spacing-600))"
|
|
34
|
+
},
|
|
32
35
|
children: [
|
|
33
|
-
/* @__PURE__ */ i(
|
|
34
|
-
/* @__PURE__ */ e(
|
|
35
|
-
|
|
36
|
+
/* @__PURE__ */ i(p, { children: [
|
|
37
|
+
/* @__PURE__ */ e(o, { targetId: t.topbarId, children: /* @__PURE__ */ e(
|
|
38
|
+
a,
|
|
36
39
|
{
|
|
37
40
|
id: "unity:layout:funnel:skip-links:top-bar",
|
|
38
41
|
defaultMessage: "Top bar"
|
|
39
42
|
}
|
|
40
43
|
) }),
|
|
41
|
-
/* @__PURE__ */ e(
|
|
42
|
-
|
|
44
|
+
/* @__PURE__ */ e(o, { targetId: t.mainContentId, children: /* @__PURE__ */ e(
|
|
45
|
+
a,
|
|
43
46
|
{
|
|
44
47
|
id: "unity:layout:funnel:skip-links:main-content",
|
|
45
48
|
defaultMessage: "Main content"
|
|
46
49
|
}
|
|
47
50
|
) }),
|
|
48
|
-
/* @__PURE__ */ e(
|
|
49
|
-
|
|
51
|
+
/* @__PURE__ */ e(o, { targetId: t.asideId, children: /* @__PURE__ */ e(
|
|
52
|
+
a,
|
|
50
53
|
{
|
|
51
54
|
id: "unity:layout:funnel:skip-links:sidebar",
|
|
52
55
|
defaultMessage: "Sidebar"
|
|
53
56
|
}
|
|
54
57
|
) }),
|
|
55
|
-
/* @__PURE__ */ e(
|
|
56
|
-
|
|
58
|
+
/* @__PURE__ */ e(o, { targetId: t.footerId, children: /* @__PURE__ */ e(
|
|
59
|
+
a,
|
|
57
60
|
{
|
|
58
61
|
id: "unity:layout:funnel:skip-links:footer",
|
|
59
62
|
defaultMessage: "Footer"
|
|
@@ -5,18 +5,46 @@ export declare const funnelSidebar: import('tailwind-variants').TVReturnType<{
|
|
|
5
5
|
true: string;
|
|
6
6
|
false: string;
|
|
7
7
|
};
|
|
8
|
-
|
|
8
|
+
position: {
|
|
9
|
+
sticky: string[];
|
|
10
|
+
static: string[];
|
|
11
|
+
fixed: string[];
|
|
12
|
+
};
|
|
13
|
+
}, undefined, string[], {
|
|
9
14
|
isSticky: {
|
|
10
15
|
true: string;
|
|
11
16
|
false: string;
|
|
12
17
|
};
|
|
18
|
+
position: {
|
|
19
|
+
sticky: string[];
|
|
20
|
+
static: string[];
|
|
21
|
+
fixed: string[];
|
|
22
|
+
};
|
|
13
23
|
}, undefined, import('tailwind-variants').TVReturnType<{
|
|
14
24
|
isSticky: {
|
|
15
25
|
true: string;
|
|
16
26
|
false: string;
|
|
17
27
|
};
|
|
18
|
-
|
|
28
|
+
position: {
|
|
29
|
+
sticky: string[];
|
|
30
|
+
static: string[];
|
|
31
|
+
fixed: string[];
|
|
32
|
+
};
|
|
33
|
+
}, undefined, string[], unknown, unknown, undefined>>;
|
|
19
34
|
export interface FunnelSidebarProps extends PropsWithChildren<VariantProps<typeof funnelSidebar>> {
|
|
35
|
+
/**
|
|
36
|
+
* Whether the sidebar is sticky or not
|
|
37
|
+
* `@deprecated` use position="sticky" instead
|
|
38
|
+
*/
|
|
39
|
+
isSticky?: VariantProps<typeof funnelSidebar>['isSticky'];
|
|
40
|
+
/**
|
|
41
|
+
* The sidebar's positioning scheme. It can be one of three values:
|
|
42
|
+
* - `static`: the sidebar does not scroll horizontally with the content
|
|
43
|
+
* - `sticky`: When scrolling down, the sidebar sticks close to the top bar
|
|
44
|
+
* - `fixed`: the sidebar always stays in the same position when scrolling down
|
|
45
|
+
* @default 'sticky'
|
|
46
|
+
*/
|
|
47
|
+
position?: VariantProps<typeof funnelSidebar>['position'];
|
|
20
48
|
'aria-label'?: string;
|
|
21
49
|
}
|
|
22
50
|
/**
|
|
@@ -1,43 +1,54 @@
|
|
|
1
1
|
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import { uyTv as
|
|
4
|
-
import { useIntl as
|
|
5
|
-
import { useFunnelLayoutContext as
|
|
6
|
-
const
|
|
7
|
-
base:
|
|
2
|
+
import { forwardRef as d } from "react";
|
|
3
|
+
import { uyTv as l } from "@payfit/unity-themes";
|
|
4
|
+
import { useIntl as c } from "react-intl";
|
|
5
|
+
import { useFunnelLayoutContext as m } from "../FunnelLayout.context.js";
|
|
6
|
+
const f = l({
|
|
7
|
+
base: [
|
|
8
|
+
"uy:w-full uy:self-start uy:shrink uy:grow-0",
|
|
9
|
+
// sidebar is always sticky in mobile
|
|
10
|
+
"uy:sticky uy:top-8 uy:z-9",
|
|
11
|
+
"uy:md:basis-1/3 uy:lg:basis-1/4 uy:md:shrink-0"
|
|
12
|
+
],
|
|
8
13
|
variants: {
|
|
9
14
|
isSticky: {
|
|
10
15
|
true: "uy:sticky uy:top-8 uy:md:top-10 uy:z-9",
|
|
11
16
|
false: "uy:static"
|
|
17
|
+
},
|
|
18
|
+
position: {
|
|
19
|
+
sticky: ["uy:md:sticky uy:md:top-10"],
|
|
20
|
+
static: ["uy:md:static"],
|
|
21
|
+
fixed: ["uy:md:sticky uy:md:top-[var(--uy-funnel-sidebar-offset)]"]
|
|
12
22
|
}
|
|
13
23
|
},
|
|
14
24
|
defaultVariants: {
|
|
15
|
-
isSticky: !0
|
|
25
|
+
isSticky: !0,
|
|
26
|
+
position: "sticky"
|
|
16
27
|
}
|
|
17
|
-
}),
|
|
18
|
-
({ children:
|
|
19
|
-
const { ids:
|
|
28
|
+
}), p = d(
|
|
29
|
+
({ children: s, isSticky: t, position: a, "aria-label": e, ...o }, u) => {
|
|
30
|
+
const r = t !== void 0 ? t ? "sticky" : "static" : a, { ids: i } = m(), y = c();
|
|
20
31
|
return /* @__PURE__ */ n(
|
|
21
32
|
"aside",
|
|
22
33
|
{
|
|
23
|
-
ref:
|
|
24
|
-
"aria-label":
|
|
34
|
+
ref: u,
|
|
35
|
+
"aria-label": e ?? y.formatMessage({
|
|
25
36
|
id: "unity:layout:funnel:sidebar:aria-label",
|
|
26
37
|
defaultMessage: "Process steps"
|
|
27
38
|
}),
|
|
28
|
-
"aria-describedby":
|
|
29
|
-
className:
|
|
30
|
-
id:
|
|
39
|
+
"aria-describedby": i.funnelTitleId,
|
|
40
|
+
className: f({ position: r }),
|
|
41
|
+
id: i.asideId,
|
|
31
42
|
"data-unity-component": "FunnelSidebar",
|
|
32
43
|
"data-dd-privacy": "allow",
|
|
33
|
-
...
|
|
34
|
-
children:
|
|
44
|
+
...o,
|
|
45
|
+
children: s
|
|
35
46
|
}
|
|
36
47
|
);
|
|
37
48
|
}
|
|
38
49
|
);
|
|
39
|
-
|
|
50
|
+
p.displayName = "FunnelSidebar";
|
|
40
51
|
export {
|
|
41
|
-
|
|
42
|
-
|
|
52
|
+
p as FunnelSidebar,
|
|
53
|
+
f as funnelSidebar
|
|
43
54
|
};
|
|
@@ -9,7 +9,7 @@ const c = d({
|
|
|
9
9
|
slots: {
|
|
10
10
|
base: [
|
|
11
11
|
"uy:relative uy:flex uy:flex-col uy:shadow-raising uy:bg-surface-neutral",
|
|
12
|
-
"uy:md:border uy:md:border-solid uy:md:border-border-neutral uy:md:rounded-
|
|
12
|
+
"uy:md:border uy:md:border-solid uy:md:border-border-neutral uy:md:rounded-300 uy:md:p-300"
|
|
13
13
|
]
|
|
14
14
|
}
|
|
15
15
|
}), b = u(
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@payfit/unity-components",
|
|
3
|
-
"version": "2.22.
|
|
3
|
+
"version": "2.22.3",
|
|
4
4
|
"module": "./dist/esm/index.js",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"@hookform/devtools": "4.4.0",
|
|
43
43
|
"@hookform/resolvers": "5.2.1",
|
|
44
44
|
"@internationalized/date": "3.12.0",
|
|
45
|
-
"@payfit/unity-illustrations": "2.22.
|
|
45
|
+
"@payfit/unity-illustrations": "2.22.3",
|
|
46
46
|
"@radix-ui/react-avatar": "1.1.11",
|
|
47
47
|
"@radix-ui/react-slot": "1.2.4",
|
|
48
48
|
"@react-aria/interactions": "3.27.1",
|
|
@@ -67,15 +67,15 @@
|
|
|
67
67
|
"react-international-phone": "4.5.0",
|
|
68
68
|
"react-intl": "7.1.14",
|
|
69
69
|
"react-stately": "3.45.0",
|
|
70
|
-
"storybook": "10.3.
|
|
70
|
+
"storybook": "10.3.5",
|
|
71
71
|
"tailwind-variants": "3.2.2",
|
|
72
72
|
"usehooks-ts": "3.1.1",
|
|
73
73
|
"zod": "4.3.6"
|
|
74
74
|
},
|
|
75
75
|
"peerDependencies": {
|
|
76
76
|
"@hookform/devtools": "^4",
|
|
77
|
-
"@payfit/unity-icons": "2.22.
|
|
78
|
-
"@payfit/unity-themes": "2.22.
|
|
77
|
+
"@payfit/unity-icons": "2.22.3",
|
|
78
|
+
"@payfit/unity-themes": "2.22.3",
|
|
79
79
|
"@storybook/react-vite": "^10.3.2",
|
|
80
80
|
"@tanstack/react-query": "^5",
|
|
81
81
|
"@tanstack/react-router": "^1.131",
|
|
@@ -95,16 +95,16 @@
|
|
|
95
95
|
"@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
|
|
96
96
|
"@payfit/storybook-addon-console-errors": "0.0.0-use.local",
|
|
97
97
|
"@payfit/storybook-config": "0.0.0-use.local",
|
|
98
|
-
"@payfit/unity-icons": "2.22.
|
|
99
|
-
"@payfit/unity-illustrations": "2.22.
|
|
100
|
-
"@payfit/unity-themes": "2.22.
|
|
98
|
+
"@payfit/unity-icons": "2.22.3",
|
|
99
|
+
"@payfit/unity-illustrations": "2.22.3",
|
|
100
|
+
"@payfit/unity-themes": "2.22.3",
|
|
101
101
|
"@payfit/vite-configs": "0.0.0-use.local",
|
|
102
|
-
"@storybook/addon-a11y": "10.3.
|
|
102
|
+
"@storybook/addon-a11y": "10.3.5",
|
|
103
103
|
"@storybook/addon-designs": "11.1.3",
|
|
104
|
-
"@storybook/addon-docs": "10.3.
|
|
105
|
-
"@storybook/addon-links": "10.3.
|
|
106
|
-
"@storybook/addon-vitest": "10.3.
|
|
107
|
-
"@storybook/react-vite": "10.3.
|
|
104
|
+
"@storybook/addon-docs": "10.3.5",
|
|
105
|
+
"@storybook/addon-links": "10.3.5",
|
|
106
|
+
"@storybook/addon-vitest": "10.3.5",
|
|
107
|
+
"@storybook/react-vite": "10.3.5",
|
|
108
108
|
"@tanstack/react-devtools": "0.10.1",
|
|
109
109
|
"@tanstack/react-form-devtools": "0.2.20",
|
|
110
110
|
"@tanstack/react-query": "5.96.2",
|
|
@@ -125,7 +125,7 @@
|
|
|
125
125
|
"prettier": "3.1.0",
|
|
126
126
|
"react-docgen-typescript": "2.2.2",
|
|
127
127
|
"react-hot-toast": "2.5.1",
|
|
128
|
-
"storybook": "10.3.
|
|
128
|
+
"storybook": "10.3.5",
|
|
129
129
|
"storybook-addon-pseudo-states": "10.3.2",
|
|
130
130
|
"storybook-addon-tag-badges": "3.0.6",
|
|
131
131
|
"storybook-mock-date-decorator": "3.0.0",
|