@stack-spot/citric-react 0.30.0 → 0.30.2
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 +17 -0
- package/dist/components/Accordion.js +2 -1
- 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 +1 -1
- package/src/components/IconBox.tsx +13 -9
- package/src/components/ImageBox.tsx +13 -9
package/dist/citric.css
CHANGED
|
@@ -2438,6 +2438,8 @@ button[data-citric="card"] {
|
|
|
2438
2438
|
top: calc(100% + 10px);
|
|
2439
2439
|
}
|
|
2440
2440
|
|
|
2441
|
+
/* Loading */
|
|
2442
|
+
|
|
2441
2443
|
.loader {
|
|
2442
2444
|
display: flex;
|
|
2443
2445
|
position: absolute;
|
|
@@ -2460,6 +2462,21 @@ button[data-citric="card"] {
|
|
|
2460
2462
|
opacity: 1;
|
|
2461
2463
|
}
|
|
2462
2464
|
}
|
|
2465
|
+
|
|
2466
|
+
[data-citric="progress-circular"] {
|
|
2467
|
+
width: 22px;
|
|
2468
|
+
}
|
|
2469
|
+
|
|
2470
|
+
&.sm [data-citric="progress-circular"] {
|
|
2471
|
+
width: 16px;
|
|
2472
|
+
}
|
|
2473
|
+
|
|
2474
|
+
&[data-color-scheme="light"] [data-citric="progress-circular"] {
|
|
2475
|
+
border-color: black;
|
|
2476
|
+
&:before {
|
|
2477
|
+
border-color: var(--light-700);
|
|
2478
|
+
}
|
|
2479
|
+
}
|
|
2463
2480
|
}
|
|
2464
2481
|
|
|
2465
2482
|
|
|
@@ -45,7 +45,8 @@ export const Accordion = withRef(({ id, appearance, expanded, onChange, header,
|
|
|
45
45
|
const [ariaHidden, setAriaHidden] = useState(!initialExpanded);
|
|
46
46
|
const accordionId = useMemo(() => id || `${Math.random()}`, [id]);
|
|
47
47
|
useEffect(() => {
|
|
48
|
-
|
|
48
|
+
if (expanded !== undefined)
|
|
49
|
+
setAriaHidden(!expanded);
|
|
49
50
|
}, [expanded]);
|
|
50
51
|
const expandBtn = _jsx("input", { type: "checkbox", defaultChecked: initialExpanded, checked: expanded, onChange: () => {
|
|
51
52
|
setAriaHidden(!ariaHidden);
|
|
@@ -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;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;
|
|
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,IAAI,QAAQ,KAAK,SAAS;YAAE,aAAa,CAAC,CAAC,QAAQ,CAAC,CAAA;IACtD,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"}
|
|
@@ -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
|
@@ -85,7 +85,7 @@ export const Accordion = withRef((
|
|
|
85
85
|
const accordionId = useMemo(() => id || `${Math.random()}`, [id])
|
|
86
86
|
|
|
87
87
|
useEffect(() => {
|
|
88
|
-
setAriaHidden(!expanded)
|
|
88
|
+
if (expanded !== undefined) setAriaHidden(!expanded)
|
|
89
89
|
}, [expanded])
|
|
90
90
|
|
|
91
91
|
const expandBtn = <input
|
|
@@ -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
|
|