@tedi-design-system/react 19.1.2-rc.1 → 19.1.2-rc.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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tedi-design-system/react",
|
|
3
|
-
"version": "19.1.2-rc.
|
|
3
|
+
"version": "19.1.2-rc.2",
|
|
4
4
|
"description": "TEDI Design System React component library — accessible, reusable UI components. Docs & live examples: https://storybook.tedi.ee/react/rc/",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
package/src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),n=require("../../../../../../../external/classnames/index.cjs.js"),R=require("react"),S=require("../../../checkbox/checkbox.cjs.js"),A=require("../../../feedback-text/feedback-text.cjs.js"),H=require("../../../radio/radio.cjs.js"),L=require("../../choice-group-context.cjs.js"),e=require("./choice-group-item.module.scss.cjs.js"),O=require("../../../../../helpers/hooks/use-breakpoint-props.cjs.js"),V=require("../../../../layout/grid/col.cjs.js"),v=u=>{const{getCurrentBreakpointProps:_}=O.useBreakpointProps(u.defaultServerBreakpoint),{id:c,label:C,value:a,className:q,direction:h,disabled:d,colProps:N=h==="column"?{width:12}:{width:"auto"},onChange:m,hideLabel:$,helper:i,tooltip:B,type:p="radio",variant:l="default",color:G="primary",layout:I,showIndicator:k,justifyContent:x="start"}=_(u),{currentValue:r,name:b,onChange:f,inputType:P}=R.useContext(L.ChoiceGroupContext),s=Array.isArray(r)?r.includes(a):a===r,M=r===void 0?u.defaultChecked:s,y=(o,g)=>{f==null||f(o,g),m==null||m(o,g)},T=n.default(e.default[`tedi-choice-group-item--${I==="separated"?"separated":"segmented"}`],h&&e.default[`tedi-choice-group-item--${h}`]),w=n.default(e.default["tedi-choice-group-item"],e.default[`tedi-choice-group-item--${l}`],e.default[`tedi-choice-group-item--${l}-${G}`],k&&e.default["tedi-choice-group-item--indicator"],p&&e.default[`tedi-choice-group-item--${p}`],{[e.default["tedi-choice-group-item--disabled"]]:d},{[e.default["tedi-choice-group-item--checked"]]:s},{[`justify-content-${x}`]:x}),E=p==="radio"?H.Radio:S.Checkbox,F=o=>{var j;d||l!=="card"||o.target.closest("input, label")||(j=document.getElementById(c))==null||j.click()};return t.jsx(V.Col,{...N,className:T,children:t.jsx("div",{className:w,onClick:F,"aria-disabled":d||void 0,children:l==="default"||k?t.jsx(E,{id:c,label:C,value:a,name:b,className:n.default(e.default["tedi-choice-group-item__indicator"],q),disabled:d,checked:s,defaultChecked:M,onChange:y,hideLabel:$,helper:i?{...i,className:n.default(e.default["tedi-choice-group-item__feedback-text"],i.className)}:void 0,tooltip:B,"data-testid":"choice-group-item-indicator"}):t.jsxs(t.Fragment,{children:[t.jsx("input",{id:c,value:a,name:b,type:P,disabled:d,checked:s,defaultChecked:r===void 0?u.defaultChecked:void 0,onChange:o=>{y(a,o.target.checked)},className:"visually-hidden"}),t.jsxs("label",{htmlFor:c,className:e.default["tedi-choice-group-item__label"],children:[C,i&&t.jsx(A.FeedbackText,{...i,id:i.id??`${c}-helper`,className:e.default["tedi-choice-group-item__feedback-text"]})]})]})})})};exports.ChoiceGroupItem=v;exports.default=v;
|
package/src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.es.js
CHANGED
|
@@ -1,104 +1,98 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import { Checkbox as
|
|
5
|
-
import { FeedbackText as
|
|
6
|
-
import { Radio as
|
|
7
|
-
import { ChoiceGroupContext as
|
|
1
|
+
import { jsx as d, jsxs as v, Fragment as M } from "react/jsx-runtime";
|
|
2
|
+
import m from "../../../../../../../external/classnames/index.es.js";
|
|
3
|
+
import R from "react";
|
|
4
|
+
import { Checkbox as T } from "../../../checkbox/checkbox.es.js";
|
|
5
|
+
import { FeedbackText as H } from "../../../feedback-text/feedback-text.es.js";
|
|
6
|
+
import { Radio as L } from "../../../radio/radio.es.js";
|
|
7
|
+
import { ChoiceGroupContext as S } from "../../choice-group-context.es.js";
|
|
8
8
|
import e from "./choice-group-item.module.scss.es.js";
|
|
9
|
-
import { useBreakpointProps as
|
|
10
|
-
import { Col as
|
|
11
|
-
const
|
|
12
|
-
const { getCurrentBreakpointProps:
|
|
13
|
-
id:
|
|
9
|
+
import { useBreakpointProps as V } from "../../../../../helpers/hooks/use-breakpoint-props.es.js";
|
|
10
|
+
import { Col as q } from "../../../../layout/grid/col.es.js";
|
|
11
|
+
const te = (n) => {
|
|
12
|
+
const { getCurrentBreakpointProps: x } = V(n.defaultServerBreakpoint), {
|
|
13
|
+
id: o,
|
|
14
14
|
label: C,
|
|
15
|
-
value:
|
|
16
|
-
className:
|
|
17
|
-
direction:
|
|
18
|
-
disabled:
|
|
19
|
-
colProps:
|
|
15
|
+
value: c,
|
|
16
|
+
className: $,
|
|
17
|
+
direction: u,
|
|
18
|
+
disabled: r,
|
|
19
|
+
colProps: B = u === "column" ? { width: 12 } : { width: "auto" },
|
|
20
20
|
onChange: p,
|
|
21
|
-
hideLabel:
|
|
22
|
-
helper:
|
|
23
|
-
tooltip:
|
|
24
|
-
type:
|
|
25
|
-
variant:
|
|
26
|
-
color:
|
|
27
|
-
layout:
|
|
28
|
-
showIndicator:
|
|
29
|
-
justifyContent:
|
|
30
|
-
} =
|
|
31
|
-
f == null || f(i,
|
|
32
|
-
},
|
|
33
|
-
e[`tedi-choice-group-item--${
|
|
34
|
-
|
|
35
|
-
), A =
|
|
21
|
+
hideLabel: I,
|
|
22
|
+
helper: t,
|
|
23
|
+
tooltip: j,
|
|
24
|
+
type: h = "radio",
|
|
25
|
+
variant: l = "default",
|
|
26
|
+
color: w = "primary",
|
|
27
|
+
layout: E,
|
|
28
|
+
showIndicator: k,
|
|
29
|
+
justifyContent: b = "start"
|
|
30
|
+
} = x(n), { currentValue: a, name: y, onChange: f, inputType: F } = R.useContext(S), s = Array.isArray(a) ? a.includes(c) : c === a, G = a === void 0 ? n.defaultChecked : s, N = (i, g) => {
|
|
31
|
+
f == null || f(i, g), p == null || p(i, g);
|
|
32
|
+
}, P = m(
|
|
33
|
+
e[`tedi-choice-group-item--${E === "separated" ? "separated" : "segmented"}`],
|
|
34
|
+
u && e[`tedi-choice-group-item--${u}`]
|
|
35
|
+
), A = m(
|
|
36
36
|
e["tedi-choice-group-item"],
|
|
37
|
-
e[`tedi-choice-group-item--${
|
|
38
|
-
e[`tedi-choice-group-item--${
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
{ [e["tedi-choice-group-item--disabled"]]:
|
|
42
|
-
{ [e["tedi-choice-group-item--checked"]]:
|
|
43
|
-
{ [`justify-content-${
|
|
44
|
-
)
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
"
|
|
37
|
+
e[`tedi-choice-group-item--${l}`],
|
|
38
|
+
e[`tedi-choice-group-item--${l}-${w}`],
|
|
39
|
+
k && e["tedi-choice-group-item--indicator"],
|
|
40
|
+
h && e[`tedi-choice-group-item--${h}`],
|
|
41
|
+
{ [e["tedi-choice-group-item--disabled"]]: r },
|
|
42
|
+
{ [e["tedi-choice-group-item--checked"]]: s },
|
|
43
|
+
{ [`justify-content-${b}`]: b }
|
|
44
|
+
);
|
|
45
|
+
return /* @__PURE__ */ d(q, { ...B, className: P, children: /* @__PURE__ */ d("div", { className: A, onClick: (i) => {
|
|
46
|
+
var _;
|
|
47
|
+
r || l !== "card" || i.target.closest("input, label") || (_ = document.getElementById(o)) == null || _.click();
|
|
48
|
+
}, "aria-disabled": r || void 0, children: l === "default" || k ? /* @__PURE__ */ d(
|
|
49
|
+
h === "radio" ? L : T,
|
|
50
50
|
{
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
"
|
|
56
|
-
|
|
57
|
-
|
|
51
|
+
id: o,
|
|
52
|
+
label: C,
|
|
53
|
+
value: c,
|
|
54
|
+
name: y,
|
|
55
|
+
className: m(e["tedi-choice-group-item__indicator"], $),
|
|
56
|
+
disabled: r,
|
|
57
|
+
checked: s,
|
|
58
|
+
defaultChecked: G,
|
|
59
|
+
onChange: N,
|
|
60
|
+
hideLabel: I,
|
|
61
|
+
helper: t ? { ...t, className: m(e["tedi-choice-group-item__feedback-text"], t.className) } : void 0,
|
|
62
|
+
tooltip: j,
|
|
63
|
+
"data-testid": "choice-group-item-indicator"
|
|
64
|
+
}
|
|
65
|
+
) : /* @__PURE__ */ v(M, { children: [
|
|
66
|
+
/* @__PURE__ */ d(
|
|
67
|
+
"input",
|
|
68
|
+
{
|
|
69
|
+
id: o,
|
|
70
|
+
value: c,
|
|
71
|
+
name: y,
|
|
72
|
+
type: F,
|
|
73
|
+
disabled: r,
|
|
74
|
+
checked: s,
|
|
75
|
+
defaultChecked: a === void 0 ? n.defaultChecked : void 0,
|
|
76
|
+
onChange: (i) => {
|
|
77
|
+
N(c, i.target.checked);
|
|
78
|
+
},
|
|
79
|
+
className: "visually-hidden"
|
|
80
|
+
}
|
|
81
|
+
),
|
|
82
|
+
/* @__PURE__ */ v("label", { htmlFor: o, className: e["tedi-choice-group-item__label"], children: [
|
|
83
|
+
C,
|
|
84
|
+
t && /* @__PURE__ */ d(
|
|
85
|
+
H,
|
|
58
86
|
{
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
name: v,
|
|
63
|
-
className: u(e["tedi-choice-group-item__indicator"], B),
|
|
64
|
-
disabled: a,
|
|
65
|
-
checked: o,
|
|
66
|
-
defaultChecked: P,
|
|
67
|
-
onChange: x,
|
|
68
|
-
hideLabel: j,
|
|
69
|
-
helper: d ? { ...d, className: u(e["tedi-choice-group-item__feedback-text"], d.className) } : void 0,
|
|
70
|
-
tooltip: w,
|
|
71
|
-
"data-testid": "choice-group-item-indicator"
|
|
87
|
+
...t,
|
|
88
|
+
id: t.id ?? `${o}-helper`,
|
|
89
|
+
className: e["tedi-choice-group-item__feedback-text"]
|
|
72
90
|
}
|
|
73
|
-
)
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
{
|
|
77
|
-
id: c,
|
|
78
|
-
value: r,
|
|
79
|
-
name: v,
|
|
80
|
-
type: G,
|
|
81
|
-
disabled: a,
|
|
82
|
-
checked: o,
|
|
83
|
-
defaultChecked: n === void 0 ? l.defaultChecked : void 0,
|
|
84
|
-
onChange: (i) => {
|
|
85
|
-
x(r, i.target.checked);
|
|
86
|
-
},
|
|
87
|
-
className: "visually-hidden",
|
|
88
|
-
role: t === "radio" ? "radio" : void 0,
|
|
89
|
-
"aria-checked": o,
|
|
90
|
-
tabIndex: -1
|
|
91
|
-
}
|
|
92
|
-
),
|
|
93
|
-
/* @__PURE__ */ _("label", { htmlFor: c, className: e["tedi-choice-group-item__label"], children: [
|
|
94
|
-
C,
|
|
95
|
-
d && /* @__PURE__ */ s(V, { ...d, id: c, className: e["tedi-choice-group-item__feedback-text"] })
|
|
96
|
-
] })
|
|
97
|
-
] })
|
|
98
|
-
}
|
|
99
|
-
) });
|
|
91
|
+
)
|
|
92
|
+
] })
|
|
93
|
+
] }) }) });
|
|
100
94
|
};
|
|
101
95
|
export {
|
|
102
|
-
|
|
103
|
-
|
|
96
|
+
te as ChoiceGroupItem,
|
|
97
|
+
te as default
|
|
104
98
|
};
|