@payfit/unity-components 2.55.1 → 2.55.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.
- package/dist/esm/components/collapsible/Collapsible.d.ts +37 -14
- package/dist/esm/components/collapsible/Collapsible.js +18 -19
- package/dist/esm/components/collapsible/Collapsible.variants.d.ts +69 -0
- package/dist/esm/components/collapsible/Collapsible.variants.js +42 -0
- package/dist/esm/components/collapsible/figma/Collapsible.figma.d.ts +7 -0
- package/dist/esm/components/collapsible/parts/CollapsibleContent.d.ts +28 -7
- package/dist/esm/components/collapsible/parts/CollapsibleContent.js +21 -15
- package/dist/esm/components/collapsible/parts/CollapsibleTitle.d.ts +32 -5
- package/dist/esm/components/collapsible/parts/CollapsibleTitle.js +29 -29
- package/dist/esm/components/collapsible-group/CollapsibleGroup.d.ts +50 -0
- package/dist/esm/components/collapsible-group/CollapsibleGroup.js +32 -0
- package/dist/esm/components/collapsible-group/figma/CollapsibleGroup.figma.d.ts +7 -0
- package/dist/esm/docs/reference/catalog/catalog.generated.d.ts +18 -0
- package/dist/esm/index.d.ts +1 -0
- package/dist/esm/index.js +2 -1
- package/package.json +9 -9
|
@@ -1,33 +1,56 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { DisclosureProps } from 'react-aria-components/Disclosure';
|
|
3
|
-
|
|
3
|
+
import { collapsible } from './Collapsible.variants.js';
|
|
4
|
+
import { VariantProps } from 'tailwind-variants';
|
|
5
|
+
export interface CollapsibleProps extends VariantProps<typeof collapsible>, Omit<DisclosureProps, 'className'> {
|
|
4
6
|
/**
|
|
5
7
|
* The content of the collapsible component.
|
|
6
8
|
* Typically includes a CollapsibleTitle and CollapsibleContent.
|
|
7
9
|
*/
|
|
8
10
|
children: ReactNode;
|
|
9
11
|
/**
|
|
10
|
-
* Controls whether the collapsible is expanded
|
|
12
|
+
* Controls whether the collapsible is expanded.
|
|
13
|
+
* Use this prop with `onExpandedChange` when another component owns the expanded state.
|
|
11
14
|
* @default false
|
|
12
15
|
*/
|
|
13
16
|
isExpanded?: boolean;
|
|
14
17
|
}
|
|
15
18
|
/**
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
+
* Hides and reveals a section of content behind an accessible disclosure trigger.
|
|
20
|
+
* Use `Collapsible` to keep optional or secondary information available without keeping every detail visible at once.
|
|
21
|
+
* Compose it with `CollapsibleTitle` for the trigger and `CollapsibleContent` for the revealed panel.
|
|
22
|
+
* @param {CollapsibleProps} props - React Aria disclosure props, Unity visual variant props, and composed title/content children.
|
|
19
23
|
* @example
|
|
20
24
|
* ```tsx
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
25
|
+
* import {
|
|
26
|
+
* Collapsible,
|
|
27
|
+
* CollapsibleContent,
|
|
28
|
+
* CollapsibleTitle,
|
|
29
|
+
* } from '@payfit/unity-components'
|
|
30
|
+
*
|
|
31
|
+
* function Example() {
|
|
32
|
+
* return (
|
|
33
|
+
* <Collapsible>
|
|
34
|
+
* <CollapsibleTitle>Section Title</CollapsibleTitle>
|
|
35
|
+
* <CollapsibleContent>
|
|
36
|
+
* Content that can be shown or hidden
|
|
37
|
+
* </CollapsibleContent>
|
|
38
|
+
* </Collapsible>
|
|
39
|
+
* )
|
|
40
|
+
* }
|
|
27
41
|
* ```
|
|
28
|
-
* @
|
|
29
|
-
*
|
|
30
|
-
*
|
|
42
|
+
* @remarks
|
|
43
|
+
* - Set `defaultExpanded` to make an uncontrolled collapsible open on first render.
|
|
44
|
+
* - Set `isExpanded` with `onExpandedChange` when the expanded state is controlled elsewhere.
|
|
45
|
+
* - Set `variant` to `outlined` or `filled` when the section needs stronger visual separation.
|
|
46
|
+
* - Wrap several related collapsibles in `CollapsibleGroup` when the expanded state must be coordinated across sections.
|
|
47
|
+
* @see {@link CollapsibleProps} for all available props.
|
|
48
|
+
* @see {@link CollapsibleTitle} for the clickable title component.
|
|
49
|
+
* @see {@link CollapsibleContent} for the revealed content panel.
|
|
50
|
+
* @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/collapsible GitHub}
|
|
51
|
+
* @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=7034-34016 Figma}
|
|
52
|
+
* @see Design docs in {@link https://www.payfit.design/24f360409/p/816353-collapsible PayFit.design}
|
|
53
|
+
* @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-collapsible--docs unity-components.payfit.io}
|
|
31
54
|
*/
|
|
32
55
|
declare const Collapsible: import('react').ForwardRefExoticComponent<CollapsibleProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
33
56
|
export { Collapsible };
|
|
@@ -1,23 +1,22 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { collapsible as e } from "./Collapsible.variants.js";
|
|
2
|
+
import { forwardRef as t } from "react";
|
|
3
3
|
import { jsx as n } from "react/jsx-runtime";
|
|
4
4
|
import { Disclosure as r } from "react-aria-components/Disclosure";
|
|
5
5
|
//#region src/components/collapsible/Collapsible.tsx
|
|
6
|
-
var i = t({
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
a.displayName = "Collapsible";
|
|
6
|
+
var i = t(({ children: t, isExpanded: i, defaultExpanded: a, variant: o, isDisabled: s, ...c }, l) => {
|
|
7
|
+
let u = s && i !== void 0 ? !1 : i, d = s ? !1 : a;
|
|
8
|
+
return u !== void 0 && (d = void 0), /* @__PURE__ */ n(r, {
|
|
9
|
+
"data-dd-privacy": "allow",
|
|
10
|
+
...c,
|
|
11
|
+
isDisabled: s,
|
|
12
|
+
className: e({ variant: o }),
|
|
13
|
+
ref: l,
|
|
14
|
+
defaultExpanded: d,
|
|
15
|
+
isExpanded: u,
|
|
16
|
+
"data-uy-variant": o,
|
|
17
|
+
children: t
|
|
18
|
+
});
|
|
19
|
+
});
|
|
20
|
+
i.displayName = "Collapsible";
|
|
22
21
|
//#endregion
|
|
23
|
-
export {
|
|
22
|
+
export { i as Collapsible };
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
export declare const collapsible: import('tailwind-variants').TVReturnType<{
|
|
2
|
+
variant: {
|
|
3
|
+
ghost: string;
|
|
4
|
+
outlined: string;
|
|
5
|
+
filled: string[];
|
|
6
|
+
};
|
|
7
|
+
}, undefined, string[], {
|
|
8
|
+
variant: {
|
|
9
|
+
ghost: string;
|
|
10
|
+
outlined: string;
|
|
11
|
+
filled: string[];
|
|
12
|
+
};
|
|
13
|
+
}, undefined, import('tailwind-variants').TVReturnType<{
|
|
14
|
+
variant: {
|
|
15
|
+
ghost: string;
|
|
16
|
+
outlined: string;
|
|
17
|
+
filled: string[];
|
|
18
|
+
};
|
|
19
|
+
}, undefined, string[], unknown, unknown, undefined>>;
|
|
20
|
+
export declare const collapsibleTitle: import('tailwind-variants').TVReturnType<{
|
|
21
|
+
isExpanded: {
|
|
22
|
+
true: {
|
|
23
|
+
button: string;
|
|
24
|
+
icon: string;
|
|
25
|
+
};
|
|
26
|
+
false: {
|
|
27
|
+
button: string;
|
|
28
|
+
icon: string;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
}, {
|
|
32
|
+
base: string;
|
|
33
|
+
button: string[];
|
|
34
|
+
title: string;
|
|
35
|
+
icon: string;
|
|
36
|
+
}, undefined, {
|
|
37
|
+
isExpanded: {
|
|
38
|
+
true: {
|
|
39
|
+
button: string;
|
|
40
|
+
icon: string;
|
|
41
|
+
};
|
|
42
|
+
false: {
|
|
43
|
+
button: string;
|
|
44
|
+
icon: string;
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
}, {
|
|
48
|
+
base: string;
|
|
49
|
+
button: string[];
|
|
50
|
+
title: string;
|
|
51
|
+
icon: string;
|
|
52
|
+
}, import('tailwind-variants').TVReturnType<{
|
|
53
|
+
isExpanded: {
|
|
54
|
+
true: {
|
|
55
|
+
button: string;
|
|
56
|
+
icon: string;
|
|
57
|
+
};
|
|
58
|
+
false: {
|
|
59
|
+
button: string;
|
|
60
|
+
icon: string;
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
}, {
|
|
64
|
+
base: string;
|
|
65
|
+
button: string[];
|
|
66
|
+
title: string;
|
|
67
|
+
icon: string;
|
|
68
|
+
}, undefined, unknown, unknown, undefined>>;
|
|
69
|
+
export declare const collapsibleContent: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:transition-all uy:transition-discrete uy:duration-200 uy:origin-top uy:aria-hidden:opacity-0 uy:aria-hidden:scale-y-0 uy:overflow-hidden uy:aria-hidden:max-h-0 uy:not-aria-hidden:py-100", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:transition-all uy:transition-discrete uy:duration-200 uy:origin-top uy:aria-hidden:opacity-0 uy:aria-hidden:scale-y-0 uy:overflow-hidden uy:aria-hidden:max-h-0 uy:not-aria-hidden:py-100", unknown, unknown, undefined>>;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { uyTv as e } from "@payfit/unity-themes";
|
|
2
|
+
//#region src/components/collapsible/Collapsible.variants.ts
|
|
3
|
+
var t = e({
|
|
4
|
+
base: [
|
|
5
|
+
"uy:group",
|
|
6
|
+
"uy:w-full ",
|
|
7
|
+
"uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-2",
|
|
8
|
+
"uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-solid",
|
|
9
|
+
"uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-offset-2",
|
|
10
|
+
"uy:data-[focus-visible-within=true]:not-has-data-[focus-visible-within=true]:outline-utility-focus-ring"
|
|
11
|
+
],
|
|
12
|
+
variants: { variant: {
|
|
13
|
+
ghost: "uy:rounded-50",
|
|
14
|
+
outlined: "uy:border-t uy:border-t-solid uy:border-border-neutral",
|
|
15
|
+
filled: ["uy:border uy:border-solid uy:border-border-neutral uy:rounded-100", "uy:data-[disabled]:border-border-neutral-disabled"]
|
|
16
|
+
} },
|
|
17
|
+
defaultVariants: { variant: "ghost" }
|
|
18
|
+
}), n = e({
|
|
19
|
+
slots: {
|
|
20
|
+
base: "uy:w-full",
|
|
21
|
+
button: [
|
|
22
|
+
"uy:flex uy:gap-100 uy:pb-100 uy:pt-100 uy:w-full uy:cursor-pointer uy:hover:not-group-data-[disabled]:text-content-neutral-hover uy:focus-visible:outline-none uy:items-center",
|
|
23
|
+
"uy:group-data-[uy-variant=filled]:bg-surface-neutral-low uy:group-data-[uy-variant=filled]:rounded-t-100 uy:group-data-[uy-variant=filled]:px-150 uy:group-data-[uy-variant=filled]:py-200",
|
|
24
|
+
"uy:group-data-[disabled]:text-content-neutral-disabled uy:group-data-[disabled]:group-data-[uy-variant=filled]:bg-surface-neutral-disabled"
|
|
25
|
+
],
|
|
26
|
+
title: "uy:flex uy:grow uy:text-left uy:items-center",
|
|
27
|
+
icon: "uy:m-25 uy:shrink-0 uy:transition-transform uy:duration-150 uy:ease-linear uy:origin-center"
|
|
28
|
+
},
|
|
29
|
+
variants: { isExpanded: {
|
|
30
|
+
true: {
|
|
31
|
+
button: "uy:group-data-[uy-variant=filled]:rounded-b-0",
|
|
32
|
+
icon: "uy:rotate-180"
|
|
33
|
+
},
|
|
34
|
+
false: {
|
|
35
|
+
button: "uy:group-data-[uy-variant=filled]:rounded-b-100",
|
|
36
|
+
icon: "uy:rotate-0"
|
|
37
|
+
}
|
|
38
|
+
} },
|
|
39
|
+
defaultVariants: { isExpanded: !1 }
|
|
40
|
+
}), r = e({ base: "uy:transition-all uy:transition-discrete uy:duration-200 uy:origin-top uy:aria-hidden:opacity-0 uy:aria-hidden:scale-y-0 uy:overflow-hidden uy:aria-hidden:max-h-0 uy:not-aria-hidden:py-100" });
|
|
41
|
+
//#endregion
|
|
42
|
+
export { t as collapsible, r as collapsibleContent, n as collapsibleTitle };
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
+
import { SpacingToken } from '../../../utils/spacing.js';
|
|
3
|
+
import { ResponsiveValue } from '../../../hooks/use-responsive-value.js';
|
|
2
4
|
/**
|
|
3
5
|
* @description
|
|
4
6
|
* The CollapsibleContent component renders the content that is shown or hidden
|
|
@@ -9,6 +11,12 @@ export interface CollapsibleContentProps {
|
|
|
9
11
|
* The content to be shown or hidden.
|
|
10
12
|
*/
|
|
11
13
|
children: ReactNode;
|
|
14
|
+
/**
|
|
15
|
+
* Sets the left indentation of the panel content with a Unity spacing token.
|
|
16
|
+
* Accepts responsive values such as `{ base: '$400', md: '$800' }`.
|
|
17
|
+
* @default '$400'
|
|
18
|
+
*/
|
|
19
|
+
leftMargin?: SpacingToken | ResponsiveValue<SpacingToken>;
|
|
12
20
|
}
|
|
13
21
|
/**
|
|
14
22
|
* The content component for a Collapsible.
|
|
@@ -17,14 +25,27 @@ export interface CollapsibleContentProps {
|
|
|
17
25
|
* based on the expanded state of the parent Collapsible component.
|
|
18
26
|
* @example
|
|
19
27
|
* ```tsx
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
28
|
+
* import {
|
|
29
|
+
* Collapsible,
|
|
30
|
+
* CollapsibleContent,
|
|
31
|
+
* CollapsibleTitle,
|
|
32
|
+
* } from '@payfit/unity-components'
|
|
33
|
+
*
|
|
34
|
+
* function Example() {
|
|
35
|
+
* return (
|
|
36
|
+
* <Collapsible>
|
|
37
|
+
* <CollapsibleTitle>Section Title</CollapsibleTitle>
|
|
38
|
+
* <CollapsibleContent leftMargin={{ initial: '$400', md: '$800' }}>
|
|
39
|
+
* This content will be shown or hidden based on the expanded state.
|
|
40
|
+
* </CollapsibleContent>
|
|
41
|
+
* </Collapsible>
|
|
42
|
+
* )
|
|
43
|
+
* }
|
|
26
44
|
* ```
|
|
27
|
-
* @
|
|
45
|
+
* @remarks
|
|
46
|
+
* - The content is visible only when the parent Collapsible is expanded.
|
|
47
|
+
* - The default `leftMargin` is `$400`, matching the standard title indentation.
|
|
48
|
+
* - Pass a responsive `leftMargin` value to adapt indentation across breakpoints.
|
|
28
49
|
* @see {@link Collapsible} - The parent component
|
|
29
50
|
* @see {@link CollapsibleTitle} - The title component that toggles the expanded state
|
|
30
51
|
* @param {CollapsibleContentProps} props - The component props
|
|
@@ -1,17 +1,23 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import { useResponsiveValue as e } from "../../../hooks/use-responsive-value.js";
|
|
2
|
+
import { collapsibleContent as t } from "../Collapsible.variants.js";
|
|
3
|
+
import { forwardRef as n } from "react";
|
|
4
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
5
|
+
import { DisclosurePanel as i } from "react-aria-components/Disclosure";
|
|
4
6
|
//#region src/components/collapsible/parts/CollapsibleContent.tsx
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
className:
|
|
12
|
-
children:
|
|
13
|
-
|
|
14
|
-
})
|
|
15
|
-
|
|
7
|
+
var a = n(({ children: n, leftMargin: a = "$400", ...o }, s) => {
|
|
8
|
+
let c = e(a);
|
|
9
|
+
return /* @__PURE__ */ r(i, {
|
|
10
|
+
ref: s,
|
|
11
|
+
"data-dd-privacy": "allow",
|
|
12
|
+
...o,
|
|
13
|
+
className: t(),
|
|
14
|
+
children: /* @__PURE__ */ r("div", {
|
|
15
|
+
className: "uy:typography-body uy:ml-(--uy-collapsible-content-left-margin)",
|
|
16
|
+
style: { "--uy-collapsible-content-left-margin": `var(--uy-spacing-${c.replace("$", "")})` },
|
|
17
|
+
children: n
|
|
18
|
+
})
|
|
19
|
+
});
|
|
20
|
+
});
|
|
21
|
+
a.displayName = "CollapsibleContent";
|
|
16
22
|
//#endregion
|
|
17
|
-
export {
|
|
23
|
+
export { a as CollapsibleContent };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
+
import { HeadingProps } from 'react-aria-components/Heading';
|
|
2
3
|
/**
|
|
3
4
|
* @description
|
|
4
5
|
* The CollapsibleTitle component renders the clickable header of a Collapsible component.
|
|
@@ -14,15 +15,24 @@ import { ReactNode } from 'react';
|
|
|
14
15
|
* @see {@link Collapsible} - The parent component
|
|
15
16
|
* @see {@link CollapsibleContent} - The content component that is shown/hidden
|
|
16
17
|
*/
|
|
17
|
-
interface CollapsibleTitleProps {
|
|
18
|
+
interface CollapsibleTitleProps extends Omit<HeadingProps, 'prefix'> {
|
|
18
19
|
/**
|
|
19
20
|
* The content of the collapsible title.
|
|
20
21
|
*/
|
|
21
22
|
children: ReactNode;
|
|
23
|
+
/**
|
|
24
|
+
* Optional content displayed before the title.
|
|
25
|
+
*/
|
|
26
|
+
prefix?: ReactNode;
|
|
22
27
|
/**
|
|
23
28
|
* Optional content to display after the title.
|
|
24
29
|
*/
|
|
25
30
|
suffix?: ReactNode;
|
|
31
|
+
/**
|
|
32
|
+
* Places the disclosure caret before or after the title content.
|
|
33
|
+
* @default 'left'
|
|
34
|
+
*/
|
|
35
|
+
disclosurePosition?: 'left' | 'right';
|
|
26
36
|
}
|
|
27
37
|
/**
|
|
28
38
|
* The title component for a Collapsible.
|
|
@@ -30,10 +40,27 @@ interface CollapsibleTitleProps {
|
|
|
30
40
|
* This component renders a heading with a button that toggles the expanded state of the parent Collapsible.
|
|
31
41
|
* It displays an icon that rotates based on the expanded state to indicate the current state.
|
|
32
42
|
* @param {CollapsibleTitleProps} props - The component props
|
|
33
|
-
* @
|
|
34
|
-
*
|
|
35
|
-
*
|
|
36
|
-
*
|
|
43
|
+
* @example
|
|
44
|
+
* ```tsx
|
|
45
|
+
* import {
|
|
46
|
+
* Collapsible,
|
|
47
|
+
* CollapsibleContent,
|
|
48
|
+
* CollapsibleTitle,
|
|
49
|
+
* } from '@payfit/unity-components'
|
|
50
|
+
*
|
|
51
|
+
* function Example() {
|
|
52
|
+
* return (
|
|
53
|
+
* <Collapsible>
|
|
54
|
+
* <CollapsibleTitle suffix="12.5 days" disclosurePosition="right">
|
|
55
|
+
* Balance information
|
|
56
|
+
* </CollapsibleTitle>
|
|
57
|
+
* <CollapsibleContent>Details about the balance.</CollapsibleContent>
|
|
58
|
+
* </Collapsible>
|
|
59
|
+
* )
|
|
60
|
+
* }
|
|
61
|
+
* ```
|
|
62
|
+
* @see {@link Collapsible} - The parent component
|
|
63
|
+
* @see {@link CollapsibleContent} - The content component that is shown/hidden
|
|
37
64
|
*/
|
|
38
65
|
declare const CollapsibleTitle: import('react').ForwardRefExoticComponent<CollapsibleTitleProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
39
66
|
export { CollapsibleTitle };
|
|
@@ -1,53 +1,53 @@
|
|
|
1
1
|
import { Icon as e } from "../../icon/Icon.js";
|
|
2
2
|
import { Text as t } from "../../text/Text.js";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { collapsibleTitle as n } from "../Collapsible.variants.js";
|
|
4
|
+
import { forwardRef as r, useContext as i } from "react";
|
|
5
5
|
import { jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
6
6
|
import { Button as s } from "react-aria-components/Button";
|
|
7
7
|
import { Heading as c } from "react-aria-components/Heading";
|
|
8
8
|
import { DisclosureStateContext as l } from "react-aria-components/Disclosure";
|
|
9
9
|
//#region src/components/collapsible/parts/CollapsibleTitle.tsx
|
|
10
|
-
var u =
|
|
11
|
-
|
|
12
|
-
base: "uy:w-full",
|
|
13
|
-
button: ["uy:flex uy:gap-50 uy:pb-100 uy:pt-100 uy:w-full uy:cursor-pointer uy:hover:text-content-neutral-hover uy:focus-visible:outline-none"],
|
|
14
|
-
title: "uy:flex uy:grow uy:text-left uy:items-center",
|
|
15
|
-
icon: "uy:mr-100 uy:transition-transform uy:duration-150 uy:ease-linear uy:origin-center"
|
|
16
|
-
},
|
|
17
|
-
variants: { isExpanded: {
|
|
18
|
-
true: { icon: "uy:rotate-180" },
|
|
19
|
-
false: { icon: "uy:rotate-0" }
|
|
20
|
-
} },
|
|
21
|
-
defaultVariants: { isExpanded: !1 }
|
|
22
|
-
}), d = n(({ children: n, suffix: i, ...d }, f) => {
|
|
23
|
-
let { base: p, button: m, title: h, icon: g } = u({ isExpanded: r(l)?.isExpanded });
|
|
10
|
+
var u = r(({ children: r, prefix: u, suffix: d, level: f, disclosurePosition: p = "left", ...m }, h) => {
|
|
11
|
+
let { base: g, button: _, title: v, icon: y } = n({ isExpanded: i(l)?.isExpanded });
|
|
24
12
|
return /* @__PURE__ */ a(c, {
|
|
13
|
+
level: f,
|
|
25
14
|
"data-dd-privacy": "allow",
|
|
26
|
-
...
|
|
27
|
-
ref:
|
|
28
|
-
className:
|
|
15
|
+
...m,
|
|
16
|
+
ref: h,
|
|
17
|
+
className: g(),
|
|
29
18
|
children: /* @__PURE__ */ o(s, {
|
|
30
|
-
className:
|
|
19
|
+
className: _(),
|
|
31
20
|
slot: "trigger",
|
|
32
21
|
children: [
|
|
33
|
-
/* @__PURE__ */ a(e, {
|
|
22
|
+
p === "left" && /* @__PURE__ */ a(e, {
|
|
34
23
|
src: "CaretDownOutlined",
|
|
35
|
-
className:
|
|
24
|
+
className: y(),
|
|
36
25
|
role: "presentation"
|
|
37
26
|
}),
|
|
27
|
+
u ? /* @__PURE__ */ a(t, {
|
|
28
|
+
variant: "body",
|
|
29
|
+
asElement: "span",
|
|
30
|
+
children: u
|
|
31
|
+
}) : null,
|
|
38
32
|
/* @__PURE__ */ a(t, {
|
|
39
33
|
variant: "bodyStrong",
|
|
40
|
-
className:
|
|
41
|
-
children:
|
|
34
|
+
className: v(),
|
|
35
|
+
children: r
|
|
42
36
|
}),
|
|
43
|
-
|
|
37
|
+
d ? /* @__PURE__ */ a(t, {
|
|
44
38
|
variant: "body",
|
|
45
|
-
|
|
46
|
-
|
|
39
|
+
asElement: "span",
|
|
40
|
+
children: d
|
|
41
|
+
}) : null,
|
|
42
|
+
p === "right" && /* @__PURE__ */ a(e, {
|
|
43
|
+
src: "CaretDownOutlined",
|
|
44
|
+
className: y(),
|
|
45
|
+
role: "presentation"
|
|
46
|
+
})
|
|
47
47
|
]
|
|
48
48
|
})
|
|
49
49
|
});
|
|
50
50
|
});
|
|
51
|
-
|
|
51
|
+
u.displayName = "CollapsibleTitle";
|
|
52
52
|
//#endregion
|
|
53
|
-
export {
|
|
53
|
+
export { u as CollapsibleTitle };
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { DisclosureGroupProps } from 'react-aria-components';
|
|
2
|
+
import { SpacingToken } from '../../utils/spacing.js';
|
|
3
|
+
import { ResponsiveValue } from '../../hooks/use-responsive-value.js';
|
|
4
|
+
export interface CollapsibleGroupProps extends Omit<DisclosureGroupProps, 'className' | 'style'> {
|
|
5
|
+
/**
|
|
6
|
+
* Space between each `Collapsible` item.
|
|
7
|
+
* Use a Unity spacing token, or a responsive spacing value when the group needs different density across breakpoints.
|
|
8
|
+
*/
|
|
9
|
+
gap?: SpacingToken | ResponsiveValue<SpacingToken>;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Groups related `Collapsible` items into one accessible accordion pattern.
|
|
13
|
+
* Use `CollapsibleGroup` when several sections belong to the same workflow and users need to scan section titles before opening the relevant details.
|
|
14
|
+
* @param {CollapsibleGroupProps} props - React Aria disclosure group props, plus the Unity `gap` spacing prop.
|
|
15
|
+
* @example
|
|
16
|
+
* ```tsx
|
|
17
|
+
* import {
|
|
18
|
+
* Collapsible,
|
|
19
|
+
* CollapsibleContent,
|
|
20
|
+
* CollapsibleGroup,
|
|
21
|
+
* CollapsibleTitle,
|
|
22
|
+
* } from '@payfit/unity-components'
|
|
23
|
+
*
|
|
24
|
+
* function Example() {
|
|
25
|
+
* return (
|
|
26
|
+
* <CollapsibleGroup defaultExpandedKeys={['balance']}>
|
|
27
|
+
* <Collapsible id="balance">
|
|
28
|
+
* <CollapsibleTitle>Estimated balance</CollapsibleTitle>
|
|
29
|
+
* <CollapsibleContent>12.5 days available</CollapsibleContent>
|
|
30
|
+
* </Collapsible>
|
|
31
|
+
* <Collapsible id="requests">
|
|
32
|
+
* <CollapsibleTitle>Pending requests</CollapsibleTitle>
|
|
33
|
+
* <CollapsibleContent>2 requests waiting for approval</CollapsibleContent>
|
|
34
|
+
* </Collapsible>
|
|
35
|
+
* </CollapsibleGroup>
|
|
36
|
+
* )
|
|
37
|
+
* }
|
|
38
|
+
* ```
|
|
39
|
+
* @remarks
|
|
40
|
+
* - Set `defaultExpandedKeys` for uncontrolled initial state.
|
|
41
|
+
* - Set `expandedKeys` with `onExpandedChange` when another part of the interface owns the open state.
|
|
42
|
+
* - Set `allowsMultipleExpanded` when users need to compare several sections at the same time.
|
|
43
|
+
* - Set `isDisabled` to make every child disclosure unavailable.
|
|
44
|
+
* @see {@link CollapsibleGroupProps} for all available props.
|
|
45
|
+
* @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/collapsible-group GitHub}
|
|
46
|
+
* @see Design specs {@link https://www.figma.com/design/d03KzkEEEfAS6DfaP8HYeD/Accordion Figma}
|
|
47
|
+
* @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-collapsiblegroup--docs unity-components.payfit.io}
|
|
48
|
+
*/
|
|
49
|
+
declare const CollapsibleGroup: import('react').ForwardRefExoticComponent<CollapsibleGroupProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
50
|
+
export { CollapsibleGroup };
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { useResponsiveValue as e } from "../../hooks/use-responsive-value.js";
|
|
2
|
+
import { Children as t, forwardRef as n, isValidElement as r } from "react";
|
|
3
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
4
|
+
import { DisclosureGroup as a } from "react-aria-components/DisclosureGroup";
|
|
5
|
+
//#region src/components/collapsible-group/CollapsibleGroup.tsx
|
|
6
|
+
var o = (e) => {
|
|
7
|
+
let n = /* @__PURE__ */ new Set();
|
|
8
|
+
return t.forEach(e, (e) => {
|
|
9
|
+
r(e) && e.props.isDisabled === !0 && e.props.id != null && n.add(e.props.id);
|
|
10
|
+
}), n;
|
|
11
|
+
}, s = (e, t) => {
|
|
12
|
+
if (e !== void 0) return new Set([...e].filter((e) => !t.has(e)));
|
|
13
|
+
}, c = ({ defaultExpandedKeys: e, disabledKeys: t, expandedKeys: n, isDisabled: r }) => n === void 0 ? { defaultExpandedKeys: r ? [] : s(e, t) } : { expandedKeys: r ? /* @__PURE__ */ new Set() : s(n, t) }, l = n(({ children: t, gap: n, isDisabled: r, defaultExpandedKeys: s, expandedKeys: l, ...u }, d) => {
|
|
14
|
+
let f = e(n), p = c({
|
|
15
|
+
defaultExpandedKeys: s,
|
|
16
|
+
disabledKeys: typeof t == "function" ? /* @__PURE__ */ new Set() : o(t),
|
|
17
|
+
expandedKeys: l,
|
|
18
|
+
isDisabled: r
|
|
19
|
+
});
|
|
20
|
+
return /* @__PURE__ */ i(a, {
|
|
21
|
+
ref: d,
|
|
22
|
+
className: "uy:flex uy:flex-col uy:gap-(--uy-collapsible-group-gap)",
|
|
23
|
+
style: { "--uy-collapsible-group-gap": `var(--uy-spacing-${f ? f.replace("$", "") : 0})` },
|
|
24
|
+
isDisabled: r,
|
|
25
|
+
...p,
|
|
26
|
+
...u,
|
|
27
|
+
children: t
|
|
28
|
+
});
|
|
29
|
+
});
|
|
30
|
+
l.displayName = "CollapsibleGroup";
|
|
31
|
+
//#endregion
|
|
32
|
+
export { l as CollapsibleGroup };
|
|
@@ -250,6 +250,24 @@ export declare const catalogEntries: ({
|
|
|
250
250
|
tags: ("type:component" | "category:content" | "category:information" | "behavior:disclosure")[];
|
|
251
251
|
title: string;
|
|
252
252
|
principal?: undefined;
|
|
253
|
+
} | {
|
|
254
|
+
description: string;
|
|
255
|
+
docsHref: string;
|
|
256
|
+
id: string;
|
|
257
|
+
keywords: string[];
|
|
258
|
+
preview: {
|
|
259
|
+
type: "story";
|
|
260
|
+
story: string;
|
|
261
|
+
storyId: string;
|
|
262
|
+
zoom?: undefined;
|
|
263
|
+
src?: undefined;
|
|
264
|
+
alt?: undefined;
|
|
265
|
+
};
|
|
266
|
+
related: string[];
|
|
267
|
+
section: "components";
|
|
268
|
+
tags: ("type:component" | "category:information" | "behavior:disclosure")[];
|
|
269
|
+
title: string;
|
|
270
|
+
principal?: undefined;
|
|
253
271
|
} | {
|
|
254
272
|
description: string;
|
|
255
273
|
docsHref: string;
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -236,3 +236,4 @@ export { useFieldA11yContext } from './components/form-field/TanstackFormField.c
|
|
|
236
236
|
export { fieldRevalidateLogic } from './utils/field-revalidate-logic.js';
|
|
237
237
|
export type { FieldRevalidateLogicProps } from './utils/field-revalidate-logic.js';
|
|
238
238
|
export * from './providers/router/RouterProvider.js';
|
|
239
|
+
export * from './components/collapsible-group/CollapsibleGroup.js';
|
package/dist/esm/index.js
CHANGED
|
@@ -237,4 +237,5 @@ import { useTanstackUnityForm as oa, withFieldGroup as sa, withForm as ca } from
|
|
|
237
237
|
import { tanstackFormDefaultValues as la } from "./hooks/tanstack-form-default-values.js";
|
|
238
238
|
import { useFieldA11yContext as ua } from "./components/form-field/TanstackFormField.context.js";
|
|
239
239
|
import { fieldRevalidateLogic as da } from "./utils/field-revalidate-logic.js";
|
|
240
|
-
|
|
240
|
+
import { CollapsibleGroup as fa } from "./components/collapsible-group/CollapsibleGroup.js";
|
|
241
|
+
export { y as ActionBar, u as ActionBarAction, d as ActionBarButton, m as ActionBarIconButton, b as ActionBarRoot, e as Actionable, w as Alert, T as AlertActions, O as AlertContent, k as AlertTitle, A as Anchor, j as AppLayout, F as AppMenu, M as AppMenuContext, N as AppMenuContextProvider, U as AppMenuFooter, K as AppMenuHeader, q as AppMenuNavContent, J as Autocomplete, Y as AutocompleteItem, Z as AutocompleteItemGroup, I as Avatar, R as AvatarFallback, $ as AvatarIcon, z as AvatarImage, ee as AvatarPair, _e as BREADCRUMB_ITEM_MAX_WIDTH, B as Badge, te as BadgeDot, ne as BottomSheet, ie as BottomSheetContent, oe as BottomSheetFooter, ce as BottomSheetHeader, de as Breadcrumb, ue as Breadcrumbs, l as Button, ke as Card, Me as CardContent, je as CardTitle, xe as Carousel, Te as CarouselContent, Ce as CarouselHeader, ye as CarouselNav, De as CarouselSlide, Ie as Checkbox, Ui as CheckboxField, Pe as CheckboxGroup, Wi as CheckboxGroupField, Le as CheckboxStandalone, S as CircularIconButton, Re as Collapsible, ze as CollapsibleContent, fa as CollapsibleGroup, Be as CollapsibleTitle, n as DESKTOP_BREAKPOINTS, pt as DataTable, gt as DataTableBulkActions, mt as DataTableRoot, _t as DateCalendar, vt as DatePicker, Ki as DatePickerField, yt as DateRangeCalendar, bt as DateRangePicker, St as DefinitionItem, xt as DefinitionList, Ct as DefinitionTooltip, Et as Dialog, wt as DialogActions, Tt as DialogButton, kt as DialogContent, At as DialogTitle, Dt as DialogTrigger, Ge as EmptyState, Ke as EmptyStateActions, qe as EmptyStateContent, Rt as EmptyStateGetStarted, Bt as EmptyStateGoodJob, Je as EmptyStateIcon, Ht as EmptyStateNoSearchResults, Vt as EmptyStateUpgradeRequired, Ut as EmptyStateUseDesktop, zt as EmptyStateWaitingForData, Gt as ErrorState, Yt as FieldGroup, qt as Fieldset, Xt as Filter, rn as FilterAdapters, Zt as FilterControls, Qt as FilterLabels, an as FilterToolbar, ln as Flex, dn as FlexItem, tn as FloatingActionBar, pn as Form, Vi as FormControl, Hi as FormFeedbackText, zi as FormField, Li as FormHelperText, Gi as FormLabel, mn as FullPageLoader, kn as FunnelBackButton, bn as FunnelBody, vn as FunnelLayout, Sn as FunnelPage, wn as FunnelPageAction, Tn as FunnelPageActions, Dn as FunnelPageContent, An as FunnelPageFooter, Mn as FunnelPageHeader, Pn as FunnelSidebar, In as FunnelTopBar, Bn as Grid, Vn as GridItem, s as Icon, p as IconButton, Hn as Input, Ne as Label, Wn as ListView, Yn as ListViewItemLabel, Xn as ListViewItemText, qn as ListViewSection, r as MOBILE_BREAKPOINTS, h as Menu, g as MenuContent, H as MenuHeader, Zn as MenuSection, V as MenuSeparator, _ as MenuTrigger, Qn as MultiSelect, qi as MultiSelectField, $n as MultiSelectOptGroup, er as MultiSelectOption, tr as Nav, ir as NavGroup, lr as NavigationCardDescription, or as NavigationCardGroup, cr as NavigationCardLabel, fe as NoopRouterProvider, Ji as NumberField, ur as NumberInput, fr as Page, mr as PageHeader, gr as PageHeading, _r as Pagination, yr as PaginationContent, Er as PaginationEllipsis, xr as PaginationItem, W as PayFitBrand, G as PayFitBrandPreprod, kr as PhoneNumberInput, Ar as Pill, Mr as Popover, jr as PopoverTrigger, Nr as ProgressBar, Pt as PromoDialog, jt as PromoDialogActions, Lt as PromoDialogContent, Mt as PromoDialogHero, It as PromoDialogSubtitle, Nt as PromoDialogTitle, Lr as RadioButton, Pr as RadioButtonGroup, Xi as RadioButtonGroupField, Fr as RadioButtonHelper, Ir as RadioIndicator, ve as RawBreadcrumbLink, Ri as RawFormContextualLink, he as RawLink, Un as RawLinkButton, Gn as RawListViewItem, v as RawMenuItem, nr as RawNavItem, ar as RawNavigationCard, Sr as RawPaginationLink, Tr as RawPaginationNext, wr as RawPaginationPrevious, vi as RawSubTask, pi as RawTab, bi as RawTask, pe as RouterProvider, at as Search, zr as SegmentedButtonGroup, ct as Select, st as SelectButton, ea as SelectField, it as SelectOption, Yr as SelectOptionGroup, Xr as SelectOptionHelper, Ur as SelectableButton, Vr as SelectableButtonGroup, Zi as SelectableButtonGroupField, Kr as SelectableCardCheckbox, Gr as SelectableCardCheckboxGroup, Qi as SelectableCardCheckboxGroupField, Jr as SelectableCardRadio, qr as SelectableCardRadioGroup, $i as SelectableCardRadioGroupField, Zr as SidePanel, $r as SidePanelContent, ti as SidePanelFooter, ri as SidePanelHeader, gn as SkipLink, _n as SkipLinks, c as Spinner, un as Stack, fn as StackItem, oi as Step, ai as Stepper, ki as TOAST_CONFIG, mi as TabList, hi as TabPanel, dt as Table, Ve as TableBody, ci as TableCell, Ue as TableColumnHeader, Ye as TableEmptyState, Xe as TableEmptyStateError, Ze as TableEmptyStateLoading, Qe as TableEmptyStateNoData, $e as TableEmptyStateText, nt as TableHeader, et as TableNoSearchResults, lt as TablePagination, ft as TableRoot, ui as TableRow, fi as Tabs, Si as TaskGroup, gi as TaskMenu, D as Text, Ci as TextArea, ta as TextField, Ti as Timeline, Ei as TimelineStep, Oi as TimelineStepDescription, Di as TimelineStepHeader, Ai as ToastManager, Br as ToggleButton, Pi as ToggleSwitch, na as ToggleSwitchField, Mi as ToggleSwitchGroup, ra as ToggleSwitchGroupField, f as Tooltip, x as actionBarRoot, X as autocompleteItem, Q as autocompleteItemGroup, re as bottomSheet, ae as bottomSheetContent, se as bottomSheetFooter, le as bottomSheetHeader, Ae as card, Se as carousel, Ee as carouselContent, we as carouselHeader, be as carouselNav, Oe as carouselSlide, Fe as checkboxGroup, C as circularIconButton, ht as dataTableRoot, Ot as dialog, Kt as errorState, da as fieldRevalidateLogic, Jt as fieldset, $t as filterContainer, en as filterDismissButton, on as filterToolbar, sn as flex, cn as flexItem, nn as floatingActionBar, hn as fullPageLoader, xn as funnelBody, yn as funnelLayout, Cn as funnelPage, En as funnelPageActions, On as funnelPageContent, jn as funnelPageFooter, Nn as funnelPageHeader, Fn as funnelSidebar, Ln as funnelTopBar, L as getInitials, Rn as grid, zn as gridItem, i as isDesktopBreakpoint, a as isMobileBreakpoint, ge as link, Kn as listViewItem, Jn as listViewSection, rr as navItemBase, sr as navigationCardGroup, Yi as numberField, dr as numberInput, pr as page, hr as pageHeader, vr as pagination, br as paginationContent, Cr as paginationLink, Ft as promoDialog, Rr as radioButton, yi as rawSubTask, xi as rawTask, ot as search, Wr as selectableButton, Hr as selectableButtonGroup, Qr as sidePanel, ei as sidePanelContent, ni as sidePanelFooter, ii as sidePanelHeader, He as tableBody, li as tableCell, We as tableColumnHeader, tt as tableEmptyState, rt as tableHeader, ut as tablePagination, di as tableRow, la as tanstackFormDefaultValues, _i as taskMenu, E as text, wi as textArea, ji as toast, Fi as toggleSwitch, Ni as toggleSwitchGroup, P as useAppMenuContext, Ii as useAsyncList, o as useBreakpointListener, Wt as useContainerQueryLevel, ua as useFieldA11yContext, ia as useFieldContext, aa as useFormContext, t as useMediaQuery, Or as usePaginationState, Dr as usePaginationWindow, me as useRouter, si as useStepper, oa as useTanstackUnityForm, Bi as useUnityForm, sa as withFieldGroup, ca as withForm };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@payfit/unity-components",
|
|
3
|
-
"version": "2.55.
|
|
3
|
+
"version": "2.55.3",
|
|
4
4
|
"module": "./dist/esm/index.js",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
"tailwind-variants": "3.2.2",
|
|
94
94
|
"usehooks-ts": "3.1.1",
|
|
95
95
|
"zod": "4.4.3",
|
|
96
|
-
"@payfit/unity-illustrations": "2.55.
|
|
96
|
+
"@payfit/unity-illustrations": "2.55.3"
|
|
97
97
|
},
|
|
98
98
|
"peerDependencies": {
|
|
99
99
|
"@hookform/devtools": "^4",
|
|
@@ -105,8 +105,8 @@
|
|
|
105
105
|
"react-hook-form": "^7",
|
|
106
106
|
"react-router-dom": "^5",
|
|
107
107
|
"zod": "^3 || ^4",
|
|
108
|
-
"@payfit/unity-
|
|
109
|
-
"@payfit/unity-
|
|
108
|
+
"@payfit/unity-themes": "2.55.3",
|
|
109
|
+
"@payfit/unity-icons": "2.55.3"
|
|
110
110
|
},
|
|
111
111
|
"devDependencies": {
|
|
112
112
|
"@figma/code-connect": "1.4.8",
|
|
@@ -152,14 +152,14 @@
|
|
|
152
152
|
"vite": "8.0.16",
|
|
153
153
|
"vite-plugin-node-polyfills": "0.28.0",
|
|
154
154
|
"vitest": "4.1.9",
|
|
155
|
-
"@payfit/hr-app-eslint": "0.0.0-use.local",
|
|
156
155
|
"@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
|
|
156
|
+
"@payfit/hr-app-eslint": "0.0.0-use.local",
|
|
157
157
|
"@payfit/storybook-addon-console-errors": "0.0.0-use.local",
|
|
158
|
-
"@payfit/unity-icons": "2.55.1",
|
|
159
|
-
"@payfit/vite-configs": "0.0.0-use.local",
|
|
160
158
|
"@payfit/storybook-config": "0.0.0-use.local",
|
|
161
|
-
"@payfit/unity-illustrations": "2.55.
|
|
162
|
-
"@payfit/unity-
|
|
159
|
+
"@payfit/unity-illustrations": "2.55.3",
|
|
160
|
+
"@payfit/unity-icons": "2.55.3",
|
|
161
|
+
"@payfit/unity-themes": "2.55.3",
|
|
162
|
+
"@payfit/vite-configs": "0.0.0-use.local"
|
|
163
163
|
},
|
|
164
164
|
"peerDependenciesMeta": {
|
|
165
165
|
"@hookform/devtools": {
|