@stack-spot/citric-react 0.29.2 → 0.30.1
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/components/Accordion.d.ts +6 -1
- package/dist/components/Accordion.d.ts.map +1 -1
- package/dist/components/Accordion.js +4 -3
- package/dist/components/Accordion.js.map +1 -1
- package/dist/components/IconBox.d.ts.map +1 -1
- package/dist/components/IconBox.js +12 -2
- package/dist/components/IconBox.js.map +1 -1
- package/dist/components/ImageBox.d.ts.map +1 -1
- package/dist/components/ImageBox.js +12 -2
- package/dist/components/ImageBox.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Accordion.tsx +9 -2
- package/src/components/IconBox.tsx +13 -9
- package/src/components/ImageBox.tsx +13 -9
|
@@ -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":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconBox.d.ts","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAGnE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAIrE,KAAK,UAAU,GAAG,GAAG,GAAG,QAAQ,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,CAAA;AAEvD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,gBAAgB;IACtI;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACnD;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AAE3H;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,OAAO,GACD,CAAC,SAAS,UAAU,QAAQ,CAAC,SAAS,SAAS,wGAC4B,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"IconBox.d.ts","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAGnE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAIrE,KAAK,UAAU,GAAG,GAAG,GAAG,QAAQ,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,CAAA;AAEvD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,gBAAgB;IACtI;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACnD;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AAE3H;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,OAAO,GACD,CAAC,SAAS,UAAU,QAAQ,CAAC,SAAS,SAAS,wGAC4B,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,4CAwB/G,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU,GACD,CAAC,SAAS,SAAS,kCAAkC,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,4CAGhH,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,GACD,CAAC,SAAS,SAAS,qBAAqB,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,4CAG5F,CAAA"}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { listToClass } from '@stack-spot/portal-theme';
|
|
3
3
|
import { useCitricController } from '../context/hooks.js';
|
|
4
4
|
import { withRef } from '../utils/react.js';
|
|
5
|
-
import { CitricComponent } from './CitricComponent.js';
|
|
5
|
+
import { asCitricProps, CitricComponent } from './CitricComponent.js';
|
|
6
6
|
/**
|
|
7
7
|
* Renders a wrapper for an icon. The icon must specified by the properties "icon" and "group", this component accepts no children.
|
|
8
8
|
*
|
|
@@ -25,7 +25,17 @@ export const IconBox = withRef(function IconBox({ group, icon, tag, appearance,
|
|
|
25
25
|
else if (tag === 'a')
|
|
26
26
|
citric?.onClickLink?.(e, metadata);
|
|
27
27
|
}
|
|
28
|
-
|
|
28
|
+
const componentProps = {
|
|
29
|
+
tag: (tag || 'i'),
|
|
30
|
+
component: 'icon-box',
|
|
31
|
+
className: listToClass(['citric-icon', group || 'outline', icon, appearance, size, className]),
|
|
32
|
+
'data-feedback': feedback || undefined,
|
|
33
|
+
onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick,
|
|
34
|
+
...props,
|
|
35
|
+
};
|
|
36
|
+
return tag === 'a' && citric?.renderLink
|
|
37
|
+
? citric.renderLink(asCitricProps(componentProps))
|
|
38
|
+
: _jsx(CitricComponent, { ...componentProps });
|
|
29
39
|
});
|
|
30
40
|
/**
|
|
31
41
|
* A shortcut for `<IconBox tag="button">`.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconBox.js","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"IconBox.js","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAwDlE;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAC5B,SAAS,OAAO,CACd,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAsB;IAE5G,KAAK,CAAC,YAAY,CAAC,KAAK,KAAK,CAAC,KAAK,CAAA,CAAC,gBAAgB;IACpD,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,SAAS,WAAW,CAAC,CAAwB;QAC3C,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QACZ,IAAI,GAAG,KAAK,QAAQ;YAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAA;aACrD,IAAI,GAAG,KAAK,GAAG;YAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAA;IAC1D,CAAC;IAED,MAAM,cAAc,GAAG;QACrB,GAAG,EAAE,CAAC,GAAG,IAAI,GAAG,CAAQ;QACxB,SAAS,EAAE,UAAU;QACrB,SAAS,EAAE,WAAW,CAAC,CAAC,aAAa,EAAE,KAAK,IAAI,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;QAC9F,eAAe,EAAE,QAAQ,IAAI,SAAS;QACtC,OAAO,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO;QACpE,GAAG,KAAK;KACA,CAAA;IAEV,OAAO,GAAG,KAAK,GAAG,IAAI,MAAM,EAAE,UAAU;QACtC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAClD,CAAC,CAAC,KAAC,eAAe,OAAK,cAAc,GAAI,CAAA;AAC7C,CAAC,CACF,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAC/B,SAAS,UAAU,CAAkC,EAAE,IAAI,EAAE,GAAG,KAAK,EAA0C;IAC7G,OAAO,KAAC,OAAO,OAAK,KAAK,EAAE,GAAG,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,IAAI,QAAQ,GAAK,CAAA;AACrE,CAAC,CACF,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAO,CAC7B,SAAS,QAAQ,CAAkC,KAAwC;IACzF,OAAO,KAAC,OAAO,OAAK,KAAK,EAAE,GAAG,EAAC,GAAG,GAAG,CAAA;AACvC,CAAC,CACF,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageBox.d.ts","sourceRoot":"","sources":["../../src/components/ImageBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAIrE,KAAK,WAAW,GAAG,GAAG,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,CAAA;AAElD,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,WAAW,CAAE,SAAQ,gBAAgB,EAAE,eAAe;IACjG;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAA;AAEpF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,GACD,CAAC,SAAS,WAAW,uFACwC,aAAa,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"ImageBox.d.ts","sourceRoot":"","sources":["../../src/components/ImageBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAIrE,KAAK,WAAW,GAAG,GAAG,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,CAAA;AAElD,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,WAAW,CAAE,SAAQ,gBAAgB,EAAE,eAAe;IACjG;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAA;AAEpF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,GACD,CAAC,SAAS,WAAW,uFACwC,aAAa,CAAC,CAAC,CAAC,4CAwBhG,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,UACM,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,4CAGjE,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,UACM,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,4CAG1D,CAAA"}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { listToClass } from '@stack-spot/portal-theme';
|
|
3
3
|
import { useCitricController } from '../context/hooks.js';
|
|
4
4
|
import { withRef } from '../utils/react.js';
|
|
5
|
-
import { CitricComponent } from './CitricComponent.js';
|
|
5
|
+
import { asCitricProps, CitricComponent } from './CitricComponent.js';
|
|
6
6
|
/**
|
|
7
7
|
* Renders a wrapper for its child (normally an image). The image will be resized and cropped to fit the container. The image is not cropped
|
|
8
8
|
* if the property "feedback" is set.
|
|
@@ -26,7 +26,17 @@ export const ImageBox = withRef(function ImageBox({ tag, appearance, size, class
|
|
|
26
26
|
else if (tag === 'a')
|
|
27
27
|
citric?.onClickLink?.(e, metadata);
|
|
28
28
|
}
|
|
29
|
-
|
|
29
|
+
const componentProps = {
|
|
30
|
+
tag: (tag || 'i'),
|
|
31
|
+
component: 'icon-box',
|
|
32
|
+
className: listToClass([appearance, size, className]),
|
|
33
|
+
'data-feedback': feedback || undefined,
|
|
34
|
+
onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick,
|
|
35
|
+
...props,
|
|
36
|
+
};
|
|
37
|
+
return tag === 'a' && citric?.renderLink
|
|
38
|
+
? citric.renderLink(asCitricProps(componentProps))
|
|
39
|
+
: _jsx(CitricComponent, { ...componentProps });
|
|
30
40
|
});
|
|
31
41
|
/**
|
|
32
42
|
* A shortcut for `<ImageBox tag="button">`.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageBox.js","sourceRoot":"","sources":["../../src/components/ImageBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA+
|
|
1
|
+
{"version":3,"file":"ImageBox.js","sourceRoot":"","sources":["../../src/components/ImageBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA+ClE;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAO,CAC7B,SAAS,QAAQ,CACf,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAoB;IAE7F,KAAK,CAAC,YAAY,CAAC,KAAK,KAAK,CAAC,KAAK,CAAA,CAAC,gBAAgB;IACpD,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,SAAS,WAAW,CAAC,CAAwB;QAC3C,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QACZ,IAAI,GAAG,KAAK,QAAQ;YAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAA;aACrD,IAAI,GAAG,KAAK,GAAG;YAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAA;IAC1D,CAAC;IAED,MAAM,cAAc,GAAG;QACrB,GAAG,EAAE,CAAC,GAAG,IAAI,GAAG,CAAQ;QACxB,SAAS,EAAE,UAAU;QACrB,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;QACrD,eAAe,EAAE,QAAQ,IAAI,SAAS;QACtC,OAAO,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO;QACpE,GAAG,KAAK;KACA,CAAA;IAEV,OAAO,GAAG,KAAK,GAAG,IAAI,MAAM,EAAE,UAAU;QACtC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAClD,CAAC,CAAC,KAAC,eAAe,OAAK,cAAc,GAAI,CAAA;AAC7C,CAAC,CACF,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,OAAO,CAChC,SAAS,WAAW,CAAC,KAA2C;IAC9D,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,GAAG,EAAC,QAAQ,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,GAAI,CAAA;AAC3E,CAAC,CACF,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,OAAO,CAC9B,SAAS,SAAS,CAAC,KAAsC;IACvD,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,GAAG,EAAC,GAAG,GAAG,CAAA;AACxC,CAAC,CACF,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)
|
|
@@ -3,7 +3,7 @@ import { listToClass } from '@stack-spot/portal-theme'
|
|
|
3
3
|
import { useCitricController } from '../context/hooks'
|
|
4
4
|
import { HTMLTag, WithColorPalette, WithColorScheme } from '../types'
|
|
5
5
|
import { withRef } from '../utils/react'
|
|
6
|
-
import { CitricComponent } from './CitricComponent'
|
|
6
|
+
import { asCitricProps, CitricComponent } from './CitricComponent'
|
|
7
7
|
|
|
8
8
|
type IconBoxTag = 'a' | 'button' | 'i' | 'span' | 'div'
|
|
9
9
|
|
|
@@ -84,14 +84,18 @@ export const IconBox = withRef(
|
|
|
84
84
|
else if (tag === 'a') citric?.onClickLink?.(e, metadata)
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
-
|
|
88
|
-
tag
|
|
89
|
-
component
|
|
90
|
-
className
|
|
91
|
-
data-feedback
|
|
92
|
-
onClick
|
|
93
|
-
|
|
94
|
-
|
|
87
|
+
const componentProps = {
|
|
88
|
+
tag: (tag || 'i') as any,
|
|
89
|
+
component: 'icon-box',
|
|
90
|
+
className: listToClass(['citric-icon', group || 'outline', icon, appearance, size, className]),
|
|
91
|
+
'data-feedback': feedback || undefined,
|
|
92
|
+
onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick,
|
|
93
|
+
...props,
|
|
94
|
+
} as const
|
|
95
|
+
|
|
96
|
+
return tag === 'a' && citric?.renderLink
|
|
97
|
+
? citric.renderLink(asCitricProps(componentProps))
|
|
98
|
+
: <CitricComponent {...componentProps} />
|
|
95
99
|
},
|
|
96
100
|
)
|
|
97
101
|
|
|
@@ -2,7 +2,7 @@ import { listToClass } from '@stack-spot/portal-theme'
|
|
|
2
2
|
import { useCitricController } from '../context/hooks'
|
|
3
3
|
import { HTMLTag, WithColorPalette, WithColorScheme } from '../types'
|
|
4
4
|
import { withRef } from '../utils/react'
|
|
5
|
-
import { CitricComponent } from './CitricComponent'
|
|
5
|
+
import { asCitricProps, CitricComponent } from './CitricComponent'
|
|
6
6
|
|
|
7
7
|
type ImageBoxTag = 'a' | 'button' | 'span' | 'div'
|
|
8
8
|
|
|
@@ -75,14 +75,18 @@ export const ImageBox = withRef(
|
|
|
75
75
|
else if (tag === 'a') citric?.onClickLink?.(e, metadata)
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
-
|
|
79
|
-
tag
|
|
80
|
-
component
|
|
81
|
-
className
|
|
82
|
-
data-feedback
|
|
83
|
-
onClick
|
|
84
|
-
|
|
85
|
-
|
|
78
|
+
const componentProps = {
|
|
79
|
+
tag: (tag || 'i') as any,
|
|
80
|
+
component: 'icon-box',
|
|
81
|
+
className: listToClass([appearance, size, className]),
|
|
82
|
+
'data-feedback': feedback || undefined,
|
|
83
|
+
onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick,
|
|
84
|
+
...props,
|
|
85
|
+
} as const
|
|
86
|
+
|
|
87
|
+
return tag === 'a' && citric?.renderLink
|
|
88
|
+
? citric.renderLink(asCitricProps(componentProps))
|
|
89
|
+
: <CitricComponent {...componentProps} />
|
|
86
90
|
},
|
|
87
91
|
)
|
|
88
92
|
|