@stack-spot/citric-react 0.30.1 → 0.30.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/citric.css +17 -0
- package/dist/components/Accordion.js +2 -1
- package/dist/components/Accordion.js.map +1 -1
- package/dist/components/Card.d.ts.map +1 -1
- package/dist/components/Card.js +13 -2
- package/dist/components/Card.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Accordion.tsx +1 -1
- package/src/components/Card.tsx +13 -12
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":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAK9D,KAAK,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,GAAG,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAE9G,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,CAAE,SAAQ,eAAe,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC;IAC7H;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5D;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD;;;;OAIG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACjC;AAGD,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,aAAa,IAAI,CAC/C,CAAC,SAAS,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,CACjD,CAAC,SAAS,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,GACxD,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,aAAa,CAAA;AAE1D;;;;;;;;GAQG;AACH,eAAO,MAAM,IAAI,GACD,CAAC,SAAS,aAAa,kEAA0E,SAAS,CAAC,CAAC,CAAC,4CAc5H,CAAA"}
|
package/dist/components/Card.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { listToClass } from '@stack-spot/portal-theme';
|
|
3
|
+
import { useCitricController } from '../context/hooks.js';
|
|
3
4
|
import { applyStyles } from '../utils/css.js';
|
|
4
5
|
import { withRef } from '../utils/react.js';
|
|
5
|
-
import { CitricComponent } from './CitricComponent.js';
|
|
6
|
+
import { asCitricProps, CitricComponent } from './CitricComponent.js';
|
|
6
7
|
/**
|
|
7
8
|
* Renders a box with padding, border and background-color. If the card is focusable or has an onClick listener, hover events are also
|
|
8
9
|
* present.
|
|
@@ -13,7 +14,17 @@ import { CitricComponent } from './CitricComponent.js';
|
|
|
13
14
|
* ```
|
|
14
15
|
*/
|
|
15
16
|
export const Card = withRef(function Card({ tag = 'div', onClick, size, bgLevel, className, children, ...props }) {
|
|
17
|
+
const citric = useCitricController();
|
|
16
18
|
const clickable = onClick || props.tabIndex === 0 || tag === 'button' || tag === 'a';
|
|
17
|
-
|
|
19
|
+
const componentProps = {
|
|
20
|
+
tag,
|
|
21
|
+
component: 'card',
|
|
22
|
+
onClick,
|
|
23
|
+
className: listToClass([clickable && 'clickable', size, bgLevel && `bg-${bgLevel}`, className]),
|
|
24
|
+
...applyStyles(props),
|
|
25
|
+
};
|
|
26
|
+
return tag === 'a' && citric?.renderLink
|
|
27
|
+
? citric.renderLink(asCitricProps(componentProps))
|
|
28
|
+
: _jsx(CitricComponent, { ...componentProps, children: children });
|
|
18
29
|
});
|
|
19
30
|
//# sourceMappingURL=Card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAgClE;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,OAAO,CACzB,SAAS,IAAI,CAA0B,EAAE,GAAG,GAAG,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB;IACzH,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IACpC,MAAM,SAAS,GAAG,OAAO,IAAI,KAAK,CAAC,QAAQ,KAAK,CAAC,IAAI,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,GAAG,CAAA;IACpF,MAAM,cAAc,GAAG;QACrB,GAAG;QACH,SAAS,EAAE,MAAM;QACjB,OAAO;QACP,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,IAAI,WAAW,EAAE,IAAI,EAAE,OAAO,IAAI,MAAM,OAAO,EAAE,EAAE,SAAS,CAAC,CAAC;QAC/F,GAAG,WAAW,CAAC,KAAK,CAAC;KACb,CAAA;IACV,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,YAAG,QAAQ,GAAmB,CAAA;AACvE,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
|
package/src/components/Card.tsx
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { listToClass } from '@stack-spot/portal-theme'
|
|
2
|
+
import { useCitricController } from '../context/hooks'
|
|
2
3
|
import { WithColorScheme, WithStyleShortcuts } from '../types'
|
|
3
4
|
import { applyStyles } from '../utils/css'
|
|
4
5
|
import { withRef } from '../utils/react'
|
|
5
|
-
import { CitricComponent } from './CitricComponent'
|
|
6
|
+
import { asCitricProps, CitricComponent } from './CitricComponent'
|
|
6
7
|
|
|
7
8
|
type SupportedTags = 'div' | 'header' | 'ul' | 'ol' | 'dl' | 'section' | 'article' | 'a' | 'button' | 'header'
|
|
8
9
|
|
|
@@ -45,17 +46,17 @@ export type CardProps<T extends SupportedTags> = (
|
|
|
45
46
|
*/
|
|
46
47
|
export const Card = withRef(
|
|
47
48
|
function Card<T extends SupportedTags>({ tag = 'div', onClick, size, bgLevel, className, children, ...props }: CardProps<T>) {
|
|
49
|
+
const citric = useCitricController()
|
|
48
50
|
const clickable = onClick || props.tabIndex === 0 || tag === 'button' || tag === 'a'
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
</CitricComponent>
|
|
59
|
-
)
|
|
51
|
+
const componentProps = {
|
|
52
|
+
tag,
|
|
53
|
+
component: 'card',
|
|
54
|
+
onClick,
|
|
55
|
+
className: listToClass([clickable && 'clickable', size, bgLevel && `bg-${bgLevel}`, className]),
|
|
56
|
+
...applyStyles(props),
|
|
57
|
+
} as const
|
|
58
|
+
return tag === 'a' && citric?.renderLink
|
|
59
|
+
? citric.renderLink(asCitricProps(componentProps))
|
|
60
|
+
: <CitricComponent {...componentProps}>{children}</CitricComponent>
|
|
60
61
|
},
|
|
61
62
|
)
|