@stack-spot/citric-react 0.29.2 → 0.30.0
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.
|
@@ -11,6 +11,11 @@ export interface BaseAccordionProps {
|
|
|
11
11
|
* Controls the expansion state of the accordion.
|
|
12
12
|
*/
|
|
13
13
|
expanded?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* If the expansion is not controlled externally (expanded/onChange), this tells if the Accordion should start opened.
|
|
16
|
+
* @default false
|
|
17
|
+
*/
|
|
18
|
+
startExpanded?: boolean;
|
|
14
19
|
/**
|
|
15
20
|
* Controls the expansion state of the accordion. Called when the accordion is expanded or collapsed.
|
|
16
21
|
*/
|
|
@@ -62,5 +67,5 @@ export type AccordionProps = Omit<React.JSX.IntrinsicElements['div'], 'onChange'
|
|
|
62
67
|
* )
|
|
63
68
|
* ```
|
|
64
69
|
*/
|
|
65
|
-
export declare const Accordion: ({ id, appearance, expanded, onChange, header, maxHeight, className, style, children, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
|
|
70
|
+
export declare const Accordion: ({ id, appearance, expanded, onChange, header, maxHeight, startExpanded, className, style, children, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
|
|
66
71
|
//# sourceMappingURL=Accordion.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,MAAM,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAClF;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG,kBAAkB,CAAA;AAEtG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,MAAM,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAClF;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG,kBAAkB,CAAA;AAEtG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,SAAS,mHACkG,cAAc,4CAuCpI,CAAA"}
|
|
@@ -39,14 +39,15 @@ import { CitricComponent } from './CitricComponent.js';
|
|
|
39
39
|
* )
|
|
40
40
|
* ```
|
|
41
41
|
*/
|
|
42
|
-
export const Accordion = withRef(({ id, appearance, expanded, onChange, header, maxHeight = 300, className, style, children, ...props }) => {
|
|
42
|
+
export const Accordion = withRef(({ id, appearance, expanded, onChange, header, maxHeight = 300, startExpanded, className, style, children, ...props }) => {
|
|
43
43
|
const t = useTranslate(dictionary);
|
|
44
|
-
const
|
|
44
|
+
const initialExpanded = expanded ?? startExpanded ?? false;
|
|
45
|
+
const [ariaHidden, setAriaHidden] = useState(!initialExpanded);
|
|
45
46
|
const accordionId = useMemo(() => id || `${Math.random()}`, [id]);
|
|
46
47
|
useEffect(() => {
|
|
47
48
|
setAriaHidden(!expanded);
|
|
48
49
|
}, [expanded]);
|
|
49
|
-
const expandBtn = _jsx("input", { type: "checkbox", checked: expanded, onChange: () => {
|
|
50
|
+
const expandBtn = _jsx("input", { type: "checkbox", defaultChecked: initialExpanded, checked: expanded, onChange: () => {
|
|
50
51
|
setAriaHidden(!ariaHidden);
|
|
51
52
|
onChange?.(!expanded);
|
|
52
53
|
}, "aria-label": ariaHidden ? t.open : t.close, title: ariaHidden ? t.open : t.close, onKeyDown: e => e.key === 'Enter' && e.target.click?.(), "aria-controls": accordionId });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAuCnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,OAAO,CAAC,CAC/B,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,GAAG,GAAG,EAAE,aAAa,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAkB,EACpI,EAAE;IACF,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,MAAM,eAAe,GAAG,QAAQ,IAAI,aAAa,IAAI,KAAK,CAAA;IAC1D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,eAAe,CAAC,CAAA;IAC9D,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,CAAC,QAAQ,CAAC,CAAA;IAC1B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,MAAM,SAAS,GAAG,gBAChB,IAAI,EAAC,UAAU,EACf,cAAc,EAAE,eAAe,EAC/B,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,GAAG,EAAE;YACb,aAAa,CAAC,CAAC,UAAU,CAAC,CAAA;YAC1B,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAA;QACvB,CAAC,gBACW,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EACzC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EACpC,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAK,CAAC,CAAC,MAAsB,CAAC,KAAK,EAAE,EAAE,mBACzD,WAAW,GAC1B,CAAA;IACF,MAAM,aAAa,GAAG,OAAO,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,4BAAQ,MAAM,EAAE,SAAS,IAAS,CAAA;IAC3G,OAAO,CACL,MAAC,eAAe,IACd,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,WAAW,EACrB,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,EAC/C,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,SAAS,IAAI,CAAC,KAC1D,KAAK,aAET,2BAAS,aAAa,GAAU,EAChC,kBAAS,EAAE,EAAE,WAAW,iBAAe,UAAU,KAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,YACzF,UAAU,KAAK,MAAM,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,SAAS,YAAE,QAAQ,GAAO,CAAC,CAAC,CAAC,QAAQ,GACrE,IACM,CACnB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,OAAO;KACf;IACD,EAAE,EAAE;QACF,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,QAAQ;KAChB;CACmB,CAAA"}
|
package/package.json
CHANGED
|
@@ -18,6 +18,11 @@ export interface BaseAccordionProps {
|
|
|
18
18
|
* Controls the expansion state of the accordion.
|
|
19
19
|
*/
|
|
20
20
|
expanded?: boolean,
|
|
21
|
+
/**
|
|
22
|
+
* If the expansion is not controlled externally (expanded/onChange), this tells if the Accordion should start opened.
|
|
23
|
+
* @default false
|
|
24
|
+
*/
|
|
25
|
+
startExpanded?: boolean,
|
|
21
26
|
/**
|
|
22
27
|
* Controls the expansion state of the accordion. Called when the accordion is expanded or collapsed.
|
|
23
28
|
*/
|
|
@@ -72,10 +77,11 @@ export type AccordionProps = Omit<React.JSX.IntrinsicElements['div'], 'onChange'
|
|
|
72
77
|
* ```
|
|
73
78
|
*/
|
|
74
79
|
export const Accordion = withRef((
|
|
75
|
-
{ id, appearance, expanded, onChange, header, maxHeight = 300, className, style, children, ...props }: AccordionProps,
|
|
80
|
+
{ id, appearance, expanded, onChange, header, maxHeight = 300, startExpanded, className, style, children, ...props }: AccordionProps,
|
|
76
81
|
) => {
|
|
77
82
|
const t = useTranslate(dictionary)
|
|
78
|
-
const
|
|
83
|
+
const initialExpanded = expanded ?? startExpanded ?? false
|
|
84
|
+
const [ariaHidden, setAriaHidden] = useState(!initialExpanded)
|
|
79
85
|
const accordionId = useMemo(() => id || `${Math.random()}`, [id])
|
|
80
86
|
|
|
81
87
|
useEffect(() => {
|
|
@@ -84,6 +90,7 @@ export const Accordion = withRef((
|
|
|
84
90
|
|
|
85
91
|
const expandBtn = <input
|
|
86
92
|
type="checkbox"
|
|
93
|
+
defaultChecked={initialExpanded}
|
|
87
94
|
checked={expanded}
|
|
88
95
|
onChange={() => {
|
|
89
96
|
setAriaHidden(!ariaHidden)
|