@stack-spot/citric-react 0.27.2 → 0.28.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.
- package/dist/citric.css +9 -3
- package/dist/components/AsyncContent.d.ts +1 -0
- package/dist/components/AsyncContent.d.ts.map +1 -1
- package/dist/components/AsyncContent.js +1 -0
- package/dist/components/AsyncContent.js.map +1 -1
- package/dist/components/Button.d.ts +5 -5
- package/dist/components/Button.d.ts.map +1 -1
- package/dist/components/Button.js +3 -3
- package/dist/components/Button.js.map +1 -1
- package/dist/components/ButtonLink.d.ts +2 -2
- package/dist/components/ButtonLink.d.ts.map +1 -1
- package/dist/components/ButtonLink.js +3 -3
- package/dist/components/ButtonLink.js.map +1 -1
- package/dist/components/IconBox.d.ts +6 -6
- package/dist/components/IconBox.d.ts.map +1 -1
- package/dist/components/IconBox.js +5 -5
- package/dist/components/IconBox.js.map +1 -1
- package/dist/components/ImageBox.d.ts +8 -6
- package/dist/components/ImageBox.d.ts.map +1 -1
- package/dist/components/ImageBox.js +7 -5
- package/dist/components/ImageBox.js.map +1 -1
- package/dist/components/Link.d.ts +5 -5
- package/dist/components/Link.d.ts.map +1 -1
- package/dist/components/Link.js +3 -3
- package/dist/components/Link.js.map +1 -1
- package/dist/types.d.ts +4 -4
- package/dist/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/AsyncContent.tsx +1 -0
- package/src/components/Button.tsx +6 -6
- package/src/components/ButtonLink.tsx +3 -3
- package/src/components/IconBox.tsx +8 -8
- package/src/components/ImageBox.tsx +10 -8
- package/src/components/Link.tsx +6 -6
- package/src/types.ts +4 -4
package/dist/citric.css
CHANGED
|
@@ -1826,12 +1826,13 @@ nav[data-citric="menu"].rounded-items, [data-citric="menu"].rounded-items nav {
|
|
|
1826
1826
|
--bg: var(--light-500);
|
|
1827
1827
|
--bg-hover: var(--light-600);
|
|
1828
1828
|
--fg: var(--light-contrastText);
|
|
1829
|
+
--radius: 50%;
|
|
1829
1830
|
|
|
1830
1831
|
/* General CSS */
|
|
1831
1832
|
|
|
1832
1833
|
box-sizing: border-box;
|
|
1833
1834
|
display: inline-flex;
|
|
1834
|
-
border-radius:
|
|
1835
|
+
border-radius: var(--radius);
|
|
1835
1836
|
align-items: center;
|
|
1836
1837
|
justify-content: center;
|
|
1837
1838
|
border: none;
|
|
@@ -1840,11 +1841,17 @@ nav[data-citric="menu"].rounded-items, [data-citric="menu"].rounded-items nav {
|
|
|
1840
1841
|
width: var(--size);
|
|
1841
1842
|
height: var(--size);
|
|
1842
1843
|
color: var(--fg);
|
|
1844
|
+
padding: 0;
|
|
1843
1845
|
|
|
1844
1846
|
&:not([data-feedback]) {
|
|
1845
1847
|
overflow: hidden;
|
|
1846
1848
|
}
|
|
1847
1849
|
|
|
1850
|
+
&[data-feedback] > * {
|
|
1851
|
+
overflow: hidden;
|
|
1852
|
+
border-radius: var(--radius);
|
|
1853
|
+
}
|
|
1854
|
+
|
|
1848
1855
|
/* Sizes */
|
|
1849
1856
|
|
|
1850
1857
|
&.xs {
|
|
@@ -1862,7 +1869,7 @@ nav[data-citric="menu"].rounded-items, [data-citric="menu"].rounded-items nav {
|
|
|
1862
1869
|
/* Appearances */
|
|
1863
1870
|
|
|
1864
1871
|
&.square {
|
|
1865
|
-
|
|
1872
|
+
--radius: var(--radius-xs);
|
|
1866
1873
|
}
|
|
1867
1874
|
|
|
1868
1875
|
&.text {
|
|
@@ -1874,7 +1881,6 @@ nav[data-citric="menu"].rounded-items, [data-citric="menu"].rounded-items nav {
|
|
|
1874
1881
|
--bg-hover: transparent;
|
|
1875
1882
|
--size: auto;
|
|
1876
1883
|
border-radius: 0;
|
|
1877
|
-
padding: 0;
|
|
1878
1884
|
}
|
|
1879
1885
|
|
|
1880
1886
|
/* Colors */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AsyncContent.d.ts","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAA8B,MAAM,OAAO,CAAA;AAMpE,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACnD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED
|
|
1
|
+
{"version":3,"file":"AsyncContent.d.ts","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAA8B,MAAM,OAAO,CAAA;AAMpE,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACnD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,eAAO,MAAM,YAAY,4CAAqD,KAAK,iIAoBjF,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AsyncContent.js","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoB,SAAS,EAAE,eAAe,EAAE,MAAM,OAAO,CAAA;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAsB7C
|
|
1
|
+
{"version":3,"file":"AsyncContent.js","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoB,SAAS,EAAE,eAAe,EAAE,MAAM,OAAO,CAAA;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAsB7C;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAS,EAAE,EAAE;IACrF,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;YACxB,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC;YACvB,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAiB,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;QAC7H,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;IAEpB,IAAI,OAAO;QAAE,OAAO,KAAC,YAAY,KAAG,CAAA;IACpC,IAAI,KAAK;QAAE,OAAO,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,CAAA;IAClG,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAC,CAAA"}
|
|
@@ -29,26 +29,26 @@ export interface BaseButtonProps extends WithColorScheme {
|
|
|
29
29
|
*/
|
|
30
30
|
onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => any;
|
|
31
31
|
/**
|
|
32
|
-
*
|
|
32
|
+
* Metadata for the general onClick event, set by the CitricController. Useful for creating analytics data.
|
|
33
33
|
*
|
|
34
|
-
* This only takes effect if there's a CitricController in React's context. The value of `
|
|
34
|
+
* This only takes effect if there's a CitricController in React's context. The value of `metadata` is passed to the function
|
|
35
35
|
* `onClickButton` of the controller.
|
|
36
36
|
*
|
|
37
37
|
* @default false
|
|
38
38
|
*/
|
|
39
|
-
|
|
39
|
+
metadata?: any;
|
|
40
40
|
}
|
|
41
41
|
export type ButtonProps = Omit<React.JSX.IntrinsicElements['button'], 'onClick'> & BaseButtonProps;
|
|
42
42
|
/**
|
|
43
43
|
* Renders a button. The type is "button" by default.
|
|
44
44
|
*
|
|
45
45
|
* Whenever a button is clicked, the function `onClickButton` of the nearest CitricController is called with the event and the value of the
|
|
46
|
-
* prop `
|
|
46
|
+
* prop `metadata`.
|
|
47
47
|
*
|
|
48
48
|
* @example
|
|
49
49
|
* ```
|
|
50
50
|
* <Button>My Button</Button>
|
|
51
51
|
* ```
|
|
52
52
|
*/
|
|
53
|
-
export declare const Button: ({ appearance, size, feedback, loading, disabled, onClick, className, children, type,
|
|
53
|
+
export declare const Button: ({ appearance, size, feedback, loading, disabled, onClick, className, children, type, metadata, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
54
54
|
//# sourceMappingURL=Button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAK1C,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,CAAC;IACxD;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,GAAG,CAAC;IAC1E;;;;;;;OAOG;IACH,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAK1C,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,CAAC;IACxD;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,GAAG,CAAC;IAC1E;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB;AAED,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,GAAG,eAAe,CAAA;AAElG;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,8GACqG,WAAW,4CA0CjI,CAAA"}
|
|
@@ -9,21 +9,21 @@ import { ProgressCircular } from './ProgressCircular.js';
|
|
|
9
9
|
* Renders a button. The type is "button" by default.
|
|
10
10
|
*
|
|
11
11
|
* Whenever a button is clicked, the function `onClickButton` of the nearest CitricController is called with the event and the value of the
|
|
12
|
-
* prop `
|
|
12
|
+
* prop `metadata`.
|
|
13
13
|
*
|
|
14
14
|
* @example
|
|
15
15
|
* ```
|
|
16
16
|
* <Button>My Button</Button>
|
|
17
17
|
* ```
|
|
18
18
|
*/
|
|
19
|
-
export const Button = withRef(({ appearance, size, feedback, loading, disabled, onClick, className, children, type = 'button',
|
|
19
|
+
export const Button = withRef(({ appearance, size, feedback, loading, disabled, onClick, className, children, type = 'button', metadata, ...props }) => {
|
|
20
20
|
const citric = useCitricController();
|
|
21
21
|
const [waiting, setWaiting] = useState(false);
|
|
22
22
|
const busy = loading || waiting;
|
|
23
23
|
const isAllLowercase = useMemo(() => !Children.toArray(children).some(c => typeof c === 'string' && c.toLocaleLowerCase() !== c), [children]);
|
|
24
24
|
async function handleClick(e) {
|
|
25
25
|
const result = onClick?.(e);
|
|
26
|
-
citric?.onClickButton?.(e,
|
|
26
|
+
citric?.onClickButton?.(e, metadata);
|
|
27
27
|
if (result instanceof Promise) {
|
|
28
28
|
setWaiting(true);
|
|
29
29
|
try {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AA4CrD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,OAAO,CAAC,CAC5B,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,GAAG,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AA4CrD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,OAAO,CAAC,CAC5B,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,GAAG,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe,EACjI,EAAE;IACF,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IACpC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,IAAI,GAAG,OAAO,IAAI,OAAO,CAAA;IAC/B,MAAM,cAAc,GAAG,OAAO,CAC5B,GAAG,EAAE,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC,EACjG,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,KAAK,UAAU,WAAW,CAAC,CAAkD;QAC3E,MAAM,MAAM,GAAG,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QAC3B,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAA;QACpC,IAAI,MAAM,YAAY,OAAO,EAAE,CAAC;YAC9B,UAAU,CAAC,IAAI,CAAC,CAAA;YAChB,IAAI,CAAC;gBACH,MAAM,MAAM,CAAA;YACd,CAAC;YAAC,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC;YACvB,UAAU,CAAC,KAAK,CAAC,CAAA;QACnB,CAAC;IACH,CAAC;IAED,OAAO,CACL,MAAC,eAAe,IACd,GAAG,EAAC,QAAQ,EACZ,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAE,WAAW,CAAC,CAAC,IAAI,EAAE,UAAU,EAAE,cAAc,IAAI,YAAY,EAAE,SAAS,CAAC,CAAC,mBACtE,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,WAAW,eACT,IAAI,EACf,QAAQ,EAAE,QAAQ,IAAI,IAAI,EAC1B,IAAI,EAAE,IAAI,KACN,KAAK,aAER,IAAI,CAAC,CAAC,CAAC,wBAAM,QAAQ,GAAO,CAAC,CAAC,CAAC,QAAQ,EACvC,IAAI,IAAI,CACP,cAAK,SAAS,EAAC,QAAQ,YACrB,KAAC,gBAAgB,IAAC,IAAI,EAAC,IAAI,GAAG,GAC1B,CACP,IACe,CACnB,CAAA;AACH,CAAC,CAAC,CAAA"}
|
|
@@ -5,12 +5,12 @@ export type ButtonLinkProps = React.JSX.IntrinsicElements['a'] & BaseButtonLinkP
|
|
|
5
5
|
* Renders a link with the appearance of a button.
|
|
6
6
|
*
|
|
7
7
|
* Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
|
|
8
|
-
* prop `
|
|
8
|
+
* prop `metadata`.
|
|
9
9
|
*
|
|
10
10
|
* @example
|
|
11
11
|
* ```
|
|
12
12
|
* <ButtonLink href="#">My Button Link</ButtonLink>
|
|
13
13
|
* ```
|
|
14
14
|
*/
|
|
15
|
-
export declare const ButtonLink: ({ appearance, size, feedback, onClick, className, children,
|
|
15
|
+
export declare const ButtonLink: ({ appearance, size, feedback, onClick, className, children, metadata, ...props }: ButtonLinkProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
16
|
//# sourceMappingURL=ButtonLink.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonLink.d.ts","sourceRoot":"","sources":["../../src/components/ButtonLink.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG1C,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC,CAAA;AACvF,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,mBAAmB,CAAA;AAEpF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"ButtonLink.d.ts","sourceRoot":"","sources":["../../src/components/ButtonLink.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG1C,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC,CAAA;AACvF,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,mBAAmB,CAAA;AAEpF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU,qFAC6D,eAAe,4CAsBjG,CAAA"}
|
|
@@ -8,14 +8,14 @@ import { asCitricProps, CitricComponent } from './CitricComponent.js';
|
|
|
8
8
|
* Renders a link with the appearance of a button.
|
|
9
9
|
*
|
|
10
10
|
* Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
|
|
11
|
-
* prop `
|
|
11
|
+
* prop `metadata`.
|
|
12
12
|
*
|
|
13
13
|
* @example
|
|
14
14
|
* ```
|
|
15
15
|
* <ButtonLink href="#">My Button Link</ButtonLink>
|
|
16
16
|
* ```
|
|
17
17
|
*/
|
|
18
|
-
export const ButtonLink = withRef(({ appearance, size, feedback, onClick, className, children,
|
|
18
|
+
export const ButtonLink = withRef(({ appearance, size, feedback, onClick, className, children, metadata, ...props }) => {
|
|
19
19
|
const citric = useCitricController();
|
|
20
20
|
const isAllLowercase = useMemo(() => !Children.toArray(children).some(c => typeof c === 'string' && c.toLocaleLowerCase() !== c), [children]);
|
|
21
21
|
const linkProps = {
|
|
@@ -23,7 +23,7 @@ export const ButtonLink = withRef(({ appearance, size, feedback, onClick, classN
|
|
|
23
23
|
className: listToClass([size, appearance, isAllLowercase && 'short-text', className]),
|
|
24
24
|
onClick: (e) => {
|
|
25
25
|
onClick?.(e);
|
|
26
|
-
citric?.onClickLink?.(e,
|
|
26
|
+
citric?.onClickLink?.(e, metadata);
|
|
27
27
|
},
|
|
28
28
|
'data-feedback': feedback || undefined,
|
|
29
29
|
...props,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonLink.js","sourceRoot":"","sources":["../../src/components/ButtonLink.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAKlE;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,CAChC,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"ButtonLink.js","sourceRoot":"","sources":["../../src/components/ButtonLink.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAKlE;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,CAChC,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB,EACjG,EAAE;IACF,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IACpC,MAAM,cAAc,GAAG,OAAO,CAC5B,GAAG,EAAE,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC,EACjG,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,MAAM,SAAS,GAAG;QAChB,SAAS,EAAE,QAAQ;QACnB,SAAS,EAAE,WAAW,CAAC,CAAC,IAAI,EAAE,UAAU,EAAE,cAAc,IAAI,YAAY,EAAE,SAAS,CAAC,CAAC;QACrF,OAAO,EAAE,CAAC,CAAsC,EAAE,EAAE;YAClD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;YACZ,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAA;QACpC,CAAC;QACD,eAAe,EAAE,QAAQ,IAAI,SAAS;QACtC,GAAG,KAAK;KACA,CAAA;IAEV,OAAO,MAAM,EAAE,UAAU;QACvB,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,GAAG,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC;QAC9D,CAAC,CAAC,KAAC,eAAe,IAAC,GAAG,EAAC,GAAG,KAAK,SAAS,YAAG,QAAQ,GAAmB,CAAA;AAC1E,CAAC,CAAC,CAAA"}
|
|
@@ -41,14 +41,14 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
|
|
|
41
41
|
/**
|
|
42
42
|
* Only valid if `tag` is "button" or "a".
|
|
43
43
|
*
|
|
44
|
-
*
|
|
44
|
+
* Metadata for the general onClick event, set by the CitricController. Useful for creating analytics data.
|
|
45
45
|
*
|
|
46
|
-
* This only takes effect if there's a CitricController in React's context. The value of `
|
|
46
|
+
* This only takes effect if there's a CitricController in React's context. The value of `metadata` is passed to the function
|
|
47
47
|
* `onClickButton/onClickLink` of the controller.
|
|
48
48
|
*
|
|
49
49
|
* @default false
|
|
50
50
|
*/
|
|
51
|
-
|
|
51
|
+
metadata?: any;
|
|
52
52
|
}
|
|
53
53
|
export type IconBoxProps<T extends IconBoxTag, G extends IconGroup> = Omit<HTMLTag[T], 'children'> & BaseIconBoxProps<T, G>;
|
|
54
54
|
/**
|
|
@@ -63,12 +63,12 @@ export type IconBoxProps<T extends IconBoxTag, G extends IconGroup> = Omit<HTMLT
|
|
|
63
63
|
* <IconBox icon="Search" colorScheme="primary" />
|
|
64
64
|
* ```
|
|
65
65
|
*/
|
|
66
|
-
export declare const IconBox: <T extends IconBoxTag = "i", G extends IconGroup = "outline">({ group, icon, tag, appearance, size, className,
|
|
66
|
+
export declare const IconBox: <T extends IconBoxTag = "i", G extends IconGroup = "outline">({ group, icon, tag, appearance, size, className, metadata, onClick, feedback, ...props }: IconBoxProps<T, G>) => import("react/jsx-runtime").JSX.Element;
|
|
67
67
|
/**
|
|
68
68
|
* A shortcut for `<IconBox tag="button">`.
|
|
69
69
|
*
|
|
70
70
|
* Whenever a button is clicked, the function `onClickButton` of the nearest CitricController is called with the event and the value of the
|
|
71
|
-
* prop `
|
|
71
|
+
* prop `metadata`.
|
|
72
72
|
*
|
|
73
73
|
* @example
|
|
74
74
|
* ```
|
|
@@ -80,7 +80,7 @@ export declare const IconButton: <G extends IconGroup = "outline">({ type, ...pr
|
|
|
80
80
|
* A shortcut for `<IconBox tag="a">`.
|
|
81
81
|
*
|
|
82
82
|
* Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
|
|
83
|
-
* prop `
|
|
83
|
+
* prop `metadata`.
|
|
84
84
|
*
|
|
85
85
|
* @example
|
|
86
86
|
* ```
|
|
@@ -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,
|
|
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,4CAoB/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"}
|
|
@@ -15,15 +15,15 @@ import { CitricComponent } from './CitricComponent.js';
|
|
|
15
15
|
* <IconBox icon="Search" colorScheme="primary" />
|
|
16
16
|
* ```
|
|
17
17
|
*/
|
|
18
|
-
export const IconBox = withRef(function IconBox({ group, icon, tag, appearance, size, className,
|
|
18
|
+
export const IconBox = withRef(function IconBox({ group, icon, tag, appearance, size, className, metadata, onClick, feedback, ...props }) {
|
|
19
19
|
props['aria-label'] ||= props.title; // accessibility
|
|
20
20
|
const citric = useCitricController();
|
|
21
21
|
function handleClick(e) {
|
|
22
22
|
onClick?.(e);
|
|
23
23
|
if (tag === 'button')
|
|
24
|
-
citric?.onClickButton?.(e,
|
|
24
|
+
citric?.onClickButton?.(e, metadata);
|
|
25
25
|
else if (tag === 'a')
|
|
26
|
-
citric?.onClickLink?.(e,
|
|
26
|
+
citric?.onClickLink?.(e, metadata);
|
|
27
27
|
}
|
|
28
28
|
return _jsx(CitricComponent, { tag: (tag || 'i'), component: "icon-box", className: listToClass(['citric-icon', group || 'outline', icon, appearance, size, className]), "data-feedback": feedback || undefined, onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick, ...props });
|
|
29
29
|
});
|
|
@@ -31,7 +31,7 @@ export const IconBox = withRef(function IconBox({ group, icon, tag, appearance,
|
|
|
31
31
|
* A shortcut for `<IconBox tag="button">`.
|
|
32
32
|
*
|
|
33
33
|
* Whenever a button is clicked, the function `onClickButton` of the nearest CitricController is called with the event and the value of the
|
|
34
|
-
* prop `
|
|
34
|
+
* prop `metadata`.
|
|
35
35
|
*
|
|
36
36
|
* @example
|
|
37
37
|
* ```
|
|
@@ -45,7 +45,7 @@ export const IconButton = withRef(function IconButton({ type, ...props }) {
|
|
|
45
45
|
* A shortcut for `<IconBox tag="a">`.
|
|
46
46
|
*
|
|
47
47
|
* Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
|
|
48
|
-
* prop `
|
|
48
|
+
* prop `metadata`.
|
|
49
49
|
*
|
|
50
50
|
* @example
|
|
51
51
|
* ```
|
|
@@ -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;AAwDnD;;;;;;;;;;;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,
|
|
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;AAwDnD;;;;;;;;;;;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,OAAO,KAAC,eAAe,IACrB,GAAG,EAAE,CAAC,GAAG,IAAI,GAAG,CAAQ,EACxB,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,CAAC,CAAC,aAAa,EAAE,KAAK,IAAI,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,mBAC/E,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,KAChE,KAAK,GACT,CAAA;AACJ,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"}
|
|
@@ -31,14 +31,14 @@ export interface BaseImageBoxProps<T extends ImageBoxTag> extends WithColorPalet
|
|
|
31
31
|
/**
|
|
32
32
|
* Only valid if `tag` is "button" or "a".
|
|
33
33
|
*
|
|
34
|
-
*
|
|
34
|
+
* Metadata for the general onClick event, set by the CitricController. Useful for creating analytics data.
|
|
35
35
|
*
|
|
36
|
-
* This only takes effect if there's a CitricController in React's context. The value of `
|
|
36
|
+
* This only takes effect if there's a CitricController in React's context. The value of `metadata` is passed to the function
|
|
37
37
|
* `onClickButton/onClickLink` of the controller.
|
|
38
38
|
*
|
|
39
39
|
* @default false
|
|
40
40
|
*/
|
|
41
|
-
|
|
41
|
+
metadata?: any;
|
|
42
42
|
}
|
|
43
43
|
export type ImageBoxProps<T extends ImageBoxTag> = HTMLTag[T] & BaseImageBoxProps<T>;
|
|
44
44
|
/**
|
|
@@ -47,17 +47,19 @@ export type ImageBoxProps<T extends ImageBoxTag> = HTMLTag[T] & BaseImageBoxProp
|
|
|
47
47
|
*
|
|
48
48
|
* Hover and focus effects are applied if the ImageBox is focusable.
|
|
49
49
|
*
|
|
50
|
+
* This works exactly like an IconBox, but instead of an Icon, it can contain anything.
|
|
51
|
+
*
|
|
50
52
|
* @example
|
|
51
53
|
* ```
|
|
52
54
|
* <ImageBox><img src="https://images.com/myimage.png" /></ImageBox>
|
|
53
55
|
* ```
|
|
54
56
|
*/
|
|
55
|
-
export declare const ImageBox: <T extends ImageBoxTag = "div">({ tag, appearance, size, className,
|
|
57
|
+
export declare const ImageBox: <T extends ImageBoxTag = "div">({ tag, appearance, size, className, metadata, onClick, feedback, ...props }: ImageBoxProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
56
58
|
/**
|
|
57
59
|
* A shortcut for `<ImageBox tag="button">`.
|
|
58
60
|
*
|
|
59
61
|
* Whenever a button is clicked, the function `onClickButton` of the nearest CitricController is called with the event and the value of the
|
|
60
|
-
* prop `
|
|
62
|
+
* prop `metadata`.
|
|
61
63
|
*
|
|
62
64
|
* @example
|
|
63
65
|
* ```
|
|
@@ -69,7 +71,7 @@ export declare const ImageButton: (props: Omit<ImageBoxProps<"button">, "tag">)
|
|
|
69
71
|
* A shortcut for `<ImageBox tag="a">`.
|
|
70
72
|
*
|
|
71
73
|
* Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
|
|
72
|
-
* prop `
|
|
74
|
+
* prop `metadata`.
|
|
73
75
|
*
|
|
74
76
|
* @example
|
|
75
77
|
* ```
|
|
@@ -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,
|
|
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,4CAoBhG,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"}
|
|
@@ -9,20 +9,22 @@ import { CitricComponent } from './CitricComponent.js';
|
|
|
9
9
|
*
|
|
10
10
|
* Hover and focus effects are applied if the ImageBox is focusable.
|
|
11
11
|
*
|
|
12
|
+
* This works exactly like an IconBox, but instead of an Icon, it can contain anything.
|
|
13
|
+
*
|
|
12
14
|
* @example
|
|
13
15
|
* ```
|
|
14
16
|
* <ImageBox><img src="https://images.com/myimage.png" /></ImageBox>
|
|
15
17
|
* ```
|
|
16
18
|
*/
|
|
17
|
-
export const ImageBox = withRef(function ImageBox({ tag, appearance, size, className,
|
|
19
|
+
export const ImageBox = withRef(function ImageBox({ tag, appearance, size, className, metadata, onClick, feedback, ...props }) {
|
|
18
20
|
props['aria-label'] ||= props.title; // accessibility
|
|
19
21
|
const citric = useCitricController();
|
|
20
22
|
function handleClick(e) {
|
|
21
23
|
onClick?.(e);
|
|
22
24
|
if (tag === 'button')
|
|
23
|
-
citric?.onClickButton?.(e,
|
|
25
|
+
citric?.onClickButton?.(e, metadata);
|
|
24
26
|
else if (tag === 'a')
|
|
25
|
-
citric?.onClickLink?.(e,
|
|
27
|
+
citric?.onClickLink?.(e, metadata);
|
|
26
28
|
}
|
|
27
29
|
return _jsx(CitricComponent, { tag: (tag || 'i'), component: "icon-box", className: listToClass([appearance, size, className]), "data-feedback": feedback || undefined, onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick, ...props });
|
|
28
30
|
});
|
|
@@ -30,7 +32,7 @@ export const ImageBox = withRef(function ImageBox({ tag, appearance, size, class
|
|
|
30
32
|
* A shortcut for `<ImageBox tag="button">`.
|
|
31
33
|
*
|
|
32
34
|
* Whenever a button is clicked, the function `onClickButton` of the nearest CitricController is called with the event and the value of the
|
|
33
|
-
* prop `
|
|
35
|
+
* prop `metadata`.
|
|
34
36
|
*
|
|
35
37
|
* @example
|
|
36
38
|
* ```
|
|
@@ -44,7 +46,7 @@ export const ImageButton = withRef(function ImageButton(props) {
|
|
|
44
46
|
* A shortcut for `<ImageBox tag="a">`.
|
|
45
47
|
*
|
|
46
48
|
* Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
|
|
47
|
-
* prop `
|
|
49
|
+
* prop `metadata`.
|
|
48
50
|
*
|
|
49
51
|
* @example
|
|
50
52
|
* ```
|
|
@@ -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+CnD
|
|
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+CnD;;;;;;;;;;;;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,OAAO,KAAC,eAAe,IACrB,GAAG,EAAE,CAAC,GAAG,IAAI,GAAG,CAAQ,EACxB,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,mBACtC,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,KAChE,KAAK,GACT,CAAA;AACJ,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"}
|
|
@@ -6,21 +6,21 @@ export interface BaseLinkProps extends WithColor {
|
|
|
6
6
|
*/
|
|
7
7
|
appearance?: TextAppearance;
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* Metadata for the general onClick event, set by the CitricController. Useful for creating analytics data.
|
|
10
10
|
*
|
|
11
|
-
* This only takes effect if there's a CitricController in React's context. The value of `
|
|
11
|
+
* This only takes effect if there's a CitricController in React's context. The value of `metadata` is passed to the function
|
|
12
12
|
* `onClickLink` of the controller.
|
|
13
13
|
*
|
|
14
14
|
* @default false
|
|
15
15
|
*/
|
|
16
|
-
|
|
16
|
+
metadata?: any;
|
|
17
17
|
}
|
|
18
18
|
export type LinkProps = React.JSX.IntrinsicElements['a'] & BaseLinkProps;
|
|
19
19
|
/**
|
|
20
20
|
* Renders an html anchor by default, the actual component to render may be set on a CitricController, through the function `renderLink`.
|
|
21
21
|
*
|
|
22
22
|
* Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
|
|
23
|
-
* prop `
|
|
23
|
+
* prop `metadata`.
|
|
24
24
|
*/
|
|
25
|
-
export declare const Link: ({ appearance, color, style, className, children, onClick,
|
|
25
|
+
export declare const Link: ({ appearance, color, style, className, children, onClick, metadata, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
|
|
26
26
|
//# sourceMappingURL=Link.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/components/Link.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAKpD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B;;;;;;;OAOG;IACH,
|
|
1
|
+
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/components/Link.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAKpD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB;AAED,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,aAAa,CAAA;AAExE;;;;;GAKG;AACH,eAAO,MAAM,IAAI,mFAA4F,SAAS,4CAepH,CAAA"}
|
package/dist/components/Link.js
CHANGED
|
@@ -7,9 +7,9 @@ import { asCitricProps, CitricComponent } from './CitricComponent.js';
|
|
|
7
7
|
* Renders an html anchor by default, the actual component to render may be set on a CitricController, through the function `renderLink`.
|
|
8
8
|
*
|
|
9
9
|
* Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
|
|
10
|
-
* prop `
|
|
10
|
+
* prop `metadata`.
|
|
11
11
|
*/
|
|
12
|
-
export const Link = withRef(({ appearance, color, style, className, children, onClick,
|
|
12
|
+
export const Link = withRef(({ appearance, color, style, className, children, onClick, metadata, ...props }) => {
|
|
13
13
|
const citric = useCitricController();
|
|
14
14
|
const linkProps = {
|
|
15
15
|
component: 'link',
|
|
@@ -17,7 +17,7 @@ export const Link = withRef(({ appearance, color, style, className, children, on
|
|
|
17
17
|
className: applyTextAppearance(className, appearance),
|
|
18
18
|
onClick: (e) => {
|
|
19
19
|
onClick?.(e);
|
|
20
|
-
citric?.onClickLink?.(e,
|
|
20
|
+
citric?.onClickLink?.(e, metadata ?? false);
|
|
21
21
|
},
|
|
22
22
|
...props,
|
|
23
23
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/components/Link.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAqBlE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/components/Link.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAqBlE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE;IACxH,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IACpC,MAAM,SAAS,GAAG;QAChB,SAAS,EAAE,MAAM;QACjB,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC;QAC/B,SAAS,EAAE,mBAAmB,CAAC,SAAS,EAAE,UAAU,CAAC;QACrD,OAAO,EAAE,CAAC,CAAsC,EAAE,EAAE;YAClD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;YACZ,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,QAAQ,IAAI,KAAK,CAAC,CAAA;QAC7C,CAAC;QACD,GAAG,KAAK;KACA,CAAA;IACV,OAAO,MAAM,EAAE,UAAU;QACvB,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,GAAG,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC;QAC9D,CAAC,CAAC,KAAC,eAAe,IAAC,GAAG,EAAC,GAAG,KAAK,SAAS,YAAG,QAAQ,GAAmB,CAAA;AAC1E,CAAC,CAAC,CAAA"}
|
package/dist/types.d.ts
CHANGED
|
@@ -171,15 +171,15 @@ export interface CitricController {
|
|
|
171
171
|
/**
|
|
172
172
|
* A function to run whenever the component Button is clicked.
|
|
173
173
|
* @param event the click event.
|
|
174
|
-
* @param
|
|
174
|
+
* @param metadata metadata of the button.
|
|
175
175
|
*/
|
|
176
|
-
onClickButton?: (event: React.MouseEvent<HTMLButtonElement>,
|
|
176
|
+
onClickButton?: (event: React.MouseEvent<HTMLButtonElement>, metadata: any) => void;
|
|
177
177
|
/**
|
|
178
178
|
* A function to run whenever the component Link is clicked.
|
|
179
179
|
* @param event the click event.
|
|
180
|
-
* @param
|
|
180
|
+
* @param metadata metadata of the anchor.
|
|
181
181
|
*/
|
|
182
|
-
onClickLink?: (event: React.MouseEvent<HTMLAnchorElement>,
|
|
182
|
+
onClickLink?: (event: React.MouseEvent<HTMLAnchorElement>, metadata: any) => void;
|
|
183
183
|
/**
|
|
184
184
|
* A custom renderer for error feedbacks.
|
|
185
185
|
*
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AACtF,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAA;AAEhF,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B;AAED,MAAM,WAAW,gBAAgB;IAC/B,YAAY,CAAC,EAAE,gBAAgB,CAAC;CACjC;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,QAAQ,CAAC;CAClB;AAED,MAAM,MAAM,kBAAkB,GAAG;IAAE,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAAA;CAAE,CAAA;AAEhF,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,YAAY,GACtI,aAAa,GAAG,aAAa,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAA;AAGvF,MAAM,MAAM,OAAO,GAAG;IACpB,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IACjD,UAAU,EAAE,KAAK,CAAC,wBAAwB,CAAC,gBAAgB,CAAC,CAAC;IAC7D,MAAM,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IACtD,GAAG,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IAC1C,IAAI,EAAE,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAC;IAChD,MAAM,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;IAC1C,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC7C,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC7C,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC7C,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC7C,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC7C,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAC7C,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;IACxC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;IACrC,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACjD,KAAK,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IACnD,KAAK,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IACnD,EAAE,EAAE,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC1C,GAAG,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;IACvC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;IAC9C,GAAG,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IAC1C,MAAM,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IACtD,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;IACzC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;IAC5C,KAAK,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IACnD,EAAE,EAAE,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;IACjD,EAAE,EAAE,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;IACjD,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,CAAC;IAC9C,QAAQ,EAAE,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;IAC5D,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;CAC5C,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,CAAA;AAC9F,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,UAAU,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC,CAAA;AAEjH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd;;OAEG;IACH,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;OAMG;IACH,CAAC,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,GAAG,MAAM,CAAC;IACvC;;;;;OAKG;IACH,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACzB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACzB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACzB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACzB;;;;;;OAMG;IACH,CAAC,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,GAAG,MAAM,CAAC;IACvC;;;;;OAKG;IACH,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACzB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACzB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACzB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB;;OAEG;IACH,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACnC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACvD;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAC/C;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;IACvE;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -36,14 +36,14 @@ export interface BaseButtonProps extends WithColorScheme {
|
|
|
36
36
|
*/
|
|
37
37
|
onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => any,
|
|
38
38
|
/**
|
|
39
|
-
*
|
|
39
|
+
* Metadata for the general onClick event, set by the CitricController. Useful for creating analytics data.
|
|
40
40
|
*
|
|
41
|
-
* This only takes effect if there's a CitricController in React's context. The value of `
|
|
41
|
+
* This only takes effect if there's a CitricController in React's context. The value of `metadata` is passed to the function
|
|
42
42
|
* `onClickButton` of the controller.
|
|
43
43
|
*
|
|
44
44
|
* @default false
|
|
45
45
|
*/
|
|
46
|
-
|
|
46
|
+
metadata?: any,
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
export type ButtonProps = Omit<React.JSX.IntrinsicElements['button'], 'onClick'> & BaseButtonProps
|
|
@@ -52,7 +52,7 @@ export type ButtonProps = Omit<React.JSX.IntrinsicElements['button'], 'onClick'>
|
|
|
52
52
|
* Renders a button. The type is "button" by default.
|
|
53
53
|
*
|
|
54
54
|
* Whenever a button is clicked, the function `onClickButton` of the nearest CitricController is called with the event and the value of the
|
|
55
|
-
* prop `
|
|
55
|
+
* prop `metadata`.
|
|
56
56
|
*
|
|
57
57
|
* @example
|
|
58
58
|
* ```
|
|
@@ -60,7 +60,7 @@ export type ButtonProps = Omit<React.JSX.IntrinsicElements['button'], 'onClick'>
|
|
|
60
60
|
* ```
|
|
61
61
|
*/
|
|
62
62
|
export const Button = withRef((
|
|
63
|
-
{ appearance, size, feedback, loading, disabled, onClick, className, children, type = 'button',
|
|
63
|
+
{ appearance, size, feedback, loading, disabled, onClick, className, children, type = 'button', metadata, ...props }: ButtonProps,
|
|
64
64
|
) => {
|
|
65
65
|
const citric = useCitricController()
|
|
66
66
|
const [waiting, setWaiting] = useState(false)
|
|
@@ -72,7 +72,7 @@ export const Button = withRef((
|
|
|
72
72
|
|
|
73
73
|
async function handleClick(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
|
|
74
74
|
const result = onClick?.(e)
|
|
75
|
-
citric?.onClickButton?.(e,
|
|
75
|
+
citric?.onClickButton?.(e, metadata)
|
|
76
76
|
if (result instanceof Promise) {
|
|
77
77
|
setWaiting(true)
|
|
78
78
|
try {
|
|
@@ -12,7 +12,7 @@ export type ButtonLinkProps = React.JSX.IntrinsicElements['a'] & BaseButtonLinkP
|
|
|
12
12
|
* Renders a link with the appearance of a button.
|
|
13
13
|
*
|
|
14
14
|
* Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
|
|
15
|
-
* prop `
|
|
15
|
+
* prop `metadata`.
|
|
16
16
|
*
|
|
17
17
|
* @example
|
|
18
18
|
* ```
|
|
@@ -20,7 +20,7 @@ export type ButtonLinkProps = React.JSX.IntrinsicElements['a'] & BaseButtonLinkP
|
|
|
20
20
|
* ```
|
|
21
21
|
*/
|
|
22
22
|
export const ButtonLink = withRef((
|
|
23
|
-
{ appearance, size, feedback, onClick, className, children,
|
|
23
|
+
{ appearance, size, feedback, onClick, className, children, metadata, ...props }: ButtonLinkProps,
|
|
24
24
|
) => {
|
|
25
25
|
const citric = useCitricController()
|
|
26
26
|
const isAllLowercase = useMemo(
|
|
@@ -33,7 +33,7 @@ export const ButtonLink = withRef((
|
|
|
33
33
|
className: listToClass([size, appearance, isAllLowercase && 'short-text', className]),
|
|
34
34
|
onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
|
|
35
35
|
onClick?.(e)
|
|
36
|
-
citric?.onClickLink?.(e,
|
|
36
|
+
citric?.onClickLink?.(e, metadata)
|
|
37
37
|
},
|
|
38
38
|
'data-feedback': feedback || undefined,
|
|
39
39
|
...props,
|
|
@@ -47,14 +47,14 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
|
|
|
47
47
|
/**
|
|
48
48
|
* Only valid if `tag` is "button" or "a".
|
|
49
49
|
*
|
|
50
|
-
*
|
|
50
|
+
* Metadata for the general onClick event, set by the CitricController. Useful for creating analytics data.
|
|
51
51
|
*
|
|
52
|
-
* This only takes effect if there's a CitricController in React's context. The value of `
|
|
52
|
+
* This only takes effect if there's a CitricController in React's context. The value of `metadata` is passed to the function
|
|
53
53
|
* `onClickButton/onClickLink` of the controller.
|
|
54
54
|
*
|
|
55
55
|
* @default false
|
|
56
56
|
*/
|
|
57
|
-
|
|
57
|
+
metadata?: any,
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
export type IconBoxProps<T extends IconBoxTag, G extends IconGroup> = Omit<HTMLTag[T], 'children'> & BaseIconBoxProps<T, G>
|
|
@@ -73,15 +73,15 @@ export type IconBoxProps<T extends IconBoxTag, G extends IconGroup> = Omit<HTMLT
|
|
|
73
73
|
*/
|
|
74
74
|
export const IconBox = withRef(
|
|
75
75
|
function IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outline'>(
|
|
76
|
-
{ group, icon, tag, appearance, size, className,
|
|
76
|
+
{ group, icon, tag, appearance, size, className, metadata, onClick, feedback, ...props }: IconBoxProps<T, G>,
|
|
77
77
|
) {
|
|
78
78
|
props['aria-label'] ||= props.title // accessibility
|
|
79
79
|
const citric = useCitricController()
|
|
80
80
|
|
|
81
81
|
function handleClick(e: React.MouseEvent<any>) {
|
|
82
82
|
onClick?.(e)
|
|
83
|
-
if (tag === 'button') citric?.onClickButton?.(e,
|
|
84
|
-
else if (tag === 'a') citric?.onClickLink?.(e,
|
|
83
|
+
if (tag === 'button') citric?.onClickButton?.(e, metadata)
|
|
84
|
+
else if (tag === 'a') citric?.onClickLink?.(e, metadata)
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
return <CitricComponent
|
|
@@ -99,7 +99,7 @@ export const IconBox = withRef(
|
|
|
99
99
|
* A shortcut for `<IconBox tag="button">`.
|
|
100
100
|
*
|
|
101
101
|
* Whenever a button is clicked, the function `onClickButton` of the nearest CitricController is called with the event and the value of the
|
|
102
|
-
* prop `
|
|
102
|
+
* prop `metadata`.
|
|
103
103
|
*
|
|
104
104
|
* @example
|
|
105
105
|
* ```
|
|
@@ -116,7 +116,7 @@ export const IconButton = withRef(
|
|
|
116
116
|
* A shortcut for `<IconBox tag="a">`.
|
|
117
117
|
*
|
|
118
118
|
* Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
|
|
119
|
-
* prop `
|
|
119
|
+
* prop `metadata`.
|
|
120
120
|
*
|
|
121
121
|
* @example
|
|
122
122
|
* ```
|
|
@@ -37,14 +37,14 @@ export interface BaseImageBoxProps<T extends ImageBoxTag> extends WithColorPalet
|
|
|
37
37
|
/**
|
|
38
38
|
* Only valid if `tag` is "button" or "a".
|
|
39
39
|
*
|
|
40
|
-
*
|
|
40
|
+
* Metadata for the general onClick event, set by the CitricController. Useful for creating analytics data.
|
|
41
41
|
*
|
|
42
|
-
* This only takes effect if there's a CitricController in React's context. The value of `
|
|
42
|
+
* This only takes effect if there's a CitricController in React's context. The value of `metadata` is passed to the function
|
|
43
43
|
* `onClickButton/onClickLink` of the controller.
|
|
44
44
|
*
|
|
45
45
|
* @default false
|
|
46
46
|
*/
|
|
47
|
-
|
|
47
|
+
metadata?: any,
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
export type ImageBoxProps<T extends ImageBoxTag> = HTMLTag[T] & BaseImageBoxProps<T>
|
|
@@ -55,6 +55,8 @@ export type ImageBoxProps<T extends ImageBoxTag> = HTMLTag[T] & BaseImageBoxProp
|
|
|
55
55
|
*
|
|
56
56
|
* Hover and focus effects are applied if the ImageBox is focusable.
|
|
57
57
|
*
|
|
58
|
+
* This works exactly like an IconBox, but instead of an Icon, it can contain anything.
|
|
59
|
+
*
|
|
58
60
|
* @example
|
|
59
61
|
* ```
|
|
60
62
|
* <ImageBox><img src="https://images.com/myimage.png" /></ImageBox>
|
|
@@ -62,15 +64,15 @@ export type ImageBoxProps<T extends ImageBoxTag> = HTMLTag[T] & BaseImageBoxProp
|
|
|
62
64
|
*/
|
|
63
65
|
export const ImageBox = withRef(
|
|
64
66
|
function ImageBox<T extends ImageBoxTag = 'div'>(
|
|
65
|
-
{ tag, appearance, size, className,
|
|
67
|
+
{ tag, appearance, size, className, metadata, onClick, feedback, ...props }: ImageBoxProps<T>,
|
|
66
68
|
) {
|
|
67
69
|
props['aria-label'] ||= props.title // accessibility
|
|
68
70
|
const citric = useCitricController()
|
|
69
71
|
|
|
70
72
|
function handleClick(e: React.MouseEvent<any>) {
|
|
71
73
|
onClick?.(e)
|
|
72
|
-
if (tag === 'button') citric?.onClickButton?.(e,
|
|
73
|
-
else if (tag === 'a') citric?.onClickLink?.(e,
|
|
74
|
+
if (tag === 'button') citric?.onClickButton?.(e, metadata)
|
|
75
|
+
else if (tag === 'a') citric?.onClickLink?.(e, metadata)
|
|
74
76
|
}
|
|
75
77
|
|
|
76
78
|
return <CitricComponent
|
|
@@ -88,7 +90,7 @@ export const ImageBox = withRef(
|
|
|
88
90
|
* A shortcut for `<ImageBox tag="button">`.
|
|
89
91
|
*
|
|
90
92
|
* Whenever a button is clicked, the function `onClickButton` of the nearest CitricController is called with the event and the value of the
|
|
91
|
-
* prop `
|
|
93
|
+
* prop `metadata`.
|
|
92
94
|
*
|
|
93
95
|
* @example
|
|
94
96
|
* ```
|
|
@@ -105,7 +107,7 @@ export const ImageButton = withRef(
|
|
|
105
107
|
* A shortcut for `<ImageBox tag="a">`.
|
|
106
108
|
*
|
|
107
109
|
* Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
|
|
108
|
-
* prop `
|
|
110
|
+
* prop `metadata`.
|
|
109
111
|
*
|
|
110
112
|
* @example
|
|
111
113
|
* ```
|
package/src/components/Link.tsx
CHANGED
|
@@ -11,14 +11,14 @@ export interface BaseLinkProps extends WithColor {
|
|
|
11
11
|
*/
|
|
12
12
|
appearance?: TextAppearance,
|
|
13
13
|
/**
|
|
14
|
-
*
|
|
14
|
+
* Metadata for the general onClick event, set by the CitricController. Useful for creating analytics data.
|
|
15
15
|
*
|
|
16
|
-
* This only takes effect if there's a CitricController in React's context. The value of `
|
|
16
|
+
* This only takes effect if there's a CitricController in React's context. The value of `metadata` is passed to the function
|
|
17
17
|
* `onClickLink` of the controller.
|
|
18
18
|
*
|
|
19
19
|
* @default false
|
|
20
20
|
*/
|
|
21
|
-
|
|
21
|
+
metadata?: any,
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
export type LinkProps = React.JSX.IntrinsicElements['a'] & BaseLinkProps
|
|
@@ -27,9 +27,9 @@ export type LinkProps = React.JSX.IntrinsicElements['a'] & BaseLinkProps
|
|
|
27
27
|
* Renders an html anchor by default, the actual component to render may be set on a CitricController, through the function `renderLink`.
|
|
28
28
|
*
|
|
29
29
|
* Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
|
|
30
|
-
* prop `
|
|
30
|
+
* prop `metadata`.
|
|
31
31
|
*/
|
|
32
|
-
export const Link = withRef(({ appearance, color, style, className, children, onClick,
|
|
32
|
+
export const Link = withRef(({ appearance, color, style, className, children, onClick, metadata, ...props }: LinkProps) => {
|
|
33
33
|
const citric = useCitricController()
|
|
34
34
|
const linkProps = {
|
|
35
35
|
component: 'link',
|
|
@@ -37,7 +37,7 @@ export const Link = withRef(({ appearance, color, style, className, children, on
|
|
|
37
37
|
className: applyTextAppearance(className, appearance),
|
|
38
38
|
onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
|
|
39
39
|
onClick?.(e)
|
|
40
|
-
citric?.onClickLink?.(e,
|
|
40
|
+
citric?.onClickLink?.(e, metadata ?? false)
|
|
41
41
|
},
|
|
42
42
|
...props,
|
|
43
43
|
} as const
|
package/src/types.ts
CHANGED
|
@@ -180,15 +180,15 @@ export interface CitricController {
|
|
|
180
180
|
/**
|
|
181
181
|
* A function to run whenever the component Button is clicked.
|
|
182
182
|
* @param event the click event.
|
|
183
|
-
* @param
|
|
183
|
+
* @param metadata metadata of the button.
|
|
184
184
|
*/
|
|
185
|
-
onClickButton?: (event: React.MouseEvent<HTMLButtonElement>,
|
|
185
|
+
onClickButton?: (event: React.MouseEvent<HTMLButtonElement>, metadata: any) => void,
|
|
186
186
|
/**
|
|
187
187
|
* A function to run whenever the component Link is clicked.
|
|
188
188
|
* @param event the click event.
|
|
189
|
-
* @param
|
|
189
|
+
* @param metadata metadata of the anchor.
|
|
190
190
|
*/
|
|
191
|
-
onClickLink?: (event: React.MouseEvent<HTMLAnchorElement>,
|
|
191
|
+
onClickLink?: (event: React.MouseEvent<HTMLAnchorElement>, metadata: any) => void,
|
|
192
192
|
/**
|
|
193
193
|
* A custom renderer for error feedbacks.
|
|
194
194
|
*
|