@frontify/fondue 12.0.0-beta.300 → 12.0.0-beta.301
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/RadioList/RadioList.d.ts +2 -1
- package/dist/components/RadioList/RadioList.es.js +22 -21
- package/dist/components/RadioList/RadioList.es.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
|
@@ -8,6 +8,7 @@ export type RadioListProps = {
|
|
|
8
8
|
onChange?: (value: string) => void;
|
|
9
9
|
direction?: RadioListDirection;
|
|
10
10
|
defaultValue?: string;
|
|
11
|
+
name?: string;
|
|
11
12
|
ariaLabel?: string;
|
|
12
13
|
};
|
|
13
|
-
export declare const RadioList: ({ children, defaultValue, direction, onChange, ariaLabel, }: RadioListProps) => JSX.Element;
|
|
14
|
+
export declare const RadioList: ({ children, defaultValue, direction, onChange, name, ariaLabel, }: RadioListProps) => JSX.Element;
|
|
@@ -1,19 +1,20 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { generateRandomId as
|
|
1
|
+
import d from "../../foundation/Icon/Generated/IconQuestionMarkCircle.es.js";
|
|
2
|
+
import { generateRandomId as b } from "../../utilities/generateRandomId.es.js";
|
|
3
3
|
import { merge as n } from "../../utilities/merge.es.js";
|
|
4
|
-
import t, { useRef as
|
|
5
|
-
import { RadioButtonEmphasis as
|
|
6
|
-
import { Tooltip as
|
|
7
|
-
import { IconSize as
|
|
8
|
-
var
|
|
9
|
-
const
|
|
4
|
+
import t, { useRef as x, useState as v, Children as g, isValidElement as k, useEffect as m } from "react";
|
|
5
|
+
import { RadioButtonEmphasis as E } from "./RadioButton.es.js";
|
|
6
|
+
import { Tooltip as h, TooltipAlignment as z, TooltipPosition as N } from "../Tooltip/Tooltip.es.js";
|
|
7
|
+
import { IconSize as R } from "../../foundation/Icon/IconSize.es.js";
|
|
8
|
+
var T = /* @__PURE__ */ ((a) => (a.Horizontal = "Horizontal", a.Vertical = "Vertical", a))(T || {});
|
|
9
|
+
const V = ({
|
|
10
10
|
children: a,
|
|
11
11
|
defaultValue: o,
|
|
12
12
|
direction: p = "Horizontal",
|
|
13
13
|
onChange: s,
|
|
14
|
-
|
|
14
|
+
name: u = "default-radio",
|
|
15
|
+
ariaLabel: f
|
|
15
16
|
}) => {
|
|
16
|
-
const l =
|
|
17
|
+
const l = x(null), [r, c] = v(o), w = g.map(a, (e) => k(e) ? e == null ? void 0 : e.props : null) ?? [];
|
|
17
18
|
return m(() => {
|
|
18
19
|
c(o);
|
|
19
20
|
}, [o]), m(() => {
|
|
@@ -26,12 +27,12 @@ const I = ({
|
|
|
26
27
|
{
|
|
27
28
|
"data-test-id": "radio-list-wrapper",
|
|
28
29
|
role: "radiogroup",
|
|
29
|
-
"aria-label":
|
|
30
|
+
"aria-label": f ?? "Choose an option",
|
|
30
31
|
ref: l,
|
|
31
32
|
className: n(["tw-flex", p === "Horizontal" ? "tw-gap-4" : "tw-flex-col"])
|
|
32
33
|
},
|
|
33
|
-
|
|
34
|
-
const i =
|
|
34
|
+
w.map((e) => {
|
|
35
|
+
const i = b();
|
|
35
36
|
return /* @__PURE__ */ t.createElement("div", { className: "tw-flex tw-items-center tw-mb-2", key: i }, /* @__PURE__ */ t.createElement(
|
|
36
37
|
"input",
|
|
37
38
|
{
|
|
@@ -39,14 +40,14 @@ const I = ({
|
|
|
39
40
|
disabled: e.disabled,
|
|
40
41
|
id: i,
|
|
41
42
|
type: "radio",
|
|
42
|
-
name:
|
|
43
|
+
name: u,
|
|
43
44
|
value: e.value,
|
|
44
45
|
"aria-label": "radio",
|
|
45
46
|
"aria-checked": e.value === r,
|
|
46
47
|
defaultChecked: e.value === r,
|
|
47
48
|
className: n([
|
|
48
49
|
"tw-peer tw-form-radio w-w-4 tw-h-4 tw-border-black-60 disabled:tw-border-black-10 focus:tw-ring-0 focus:tw-ring-offset-0 focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2",
|
|
49
|
-
e.emphasis ===
|
|
50
|
+
e.emphasis === E.Weak ? "tw-text-black-80" : "tw-text-box-selected-strong"
|
|
50
51
|
]),
|
|
51
52
|
onChange: () => {
|
|
52
53
|
c(e.value), s && s(e.value);
|
|
@@ -64,13 +65,13 @@ const I = ({
|
|
|
64
65
|
e.value,
|
|
65
66
|
e.helperText && /* @__PURE__ */ t.createElement("span", { className: "tw-text-black-80 tw-font-normal" }, e.helperText)
|
|
66
67
|
), e.tooltip && /* @__PURE__ */ t.createElement(
|
|
67
|
-
|
|
68
|
+
h,
|
|
68
69
|
{
|
|
69
|
-
alignment:
|
|
70
|
+
alignment: z.Middle,
|
|
70
71
|
content: e.tooltip,
|
|
71
72
|
hoverDelay: 75,
|
|
72
|
-
position:
|
|
73
|
-
triggerElement: /* @__PURE__ */ t.createElement("button", { className: "tw-flex tw-text-black-80 tw-mx-2 tw-self-center" }, /* @__PURE__ */ t.createElement(
|
|
73
|
+
position: N.Top,
|
|
74
|
+
triggerElement: /* @__PURE__ */ t.createElement("button", { className: "tw-flex tw-text-black-80 tw-mx-2 tw-self-center" }, /* @__PURE__ */ t.createElement(d, { size: R.Size16 })),
|
|
74
75
|
withArrow: !0
|
|
75
76
|
}
|
|
76
77
|
));
|
|
@@ -78,7 +79,7 @@ const I = ({
|
|
|
78
79
|
);
|
|
79
80
|
};
|
|
80
81
|
export {
|
|
81
|
-
|
|
82
|
-
|
|
82
|
+
V as RadioList,
|
|
83
|
+
T as RadioListDirection
|
|
83
84
|
};
|
|
84
85
|
//# sourceMappingURL=RadioList.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioList.es.js","sources":["../../../src/components/RadioList/RadioList.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Tooltip, TooltipAlignment, TooltipPosition } from '@components/Tooltip';\nimport IconQuestionMarkCircle from '@foundation/Icon/Generated/IconQuestionMarkCircle';\nimport { IconSize } from '@foundation/Icon';\nimport { generateRandomId } from '@utilities/generateRandomId';\nimport { merge } from '@utilities/merge';\nimport React, { Children, ReactNode, isValidElement, useEffect, useRef, useState } from 'react';\nimport { RadioButtonEmphasis, RadioButtonProps } from './RadioButton';\n\nexport enum RadioListDirection {\n Horizontal = 'Horizontal',\n Vertical = 'Vertical',\n}\n\nexport type RadioListProps = {\n children: ReactNode;\n onChange?: (value: string) => void;\n direction?: RadioListDirection;\n defaultValue?: string;\n ariaLabel?: string;\n};\n\nexport const RadioList = ({\n children,\n defaultValue,\n direction = RadioListDirection.Horizontal,\n onChange,\n ariaLabel,\n}: RadioListProps) => {\n const radioGroupRef = useRef<HTMLDivElement | null>(null);\n\n const [activeValue, setActiveValue] = useState(defaultValue);\n\n const radioButtons: RadioButtonProps[] =\n Children.map(children, (child) => {\n if (!isValidElement<RadioButtonProps>(child)) {\n return null;\n }\n return child?.props;\n }) ?? [];\n\n useEffect(() => {\n setActiveValue(defaultValue);\n }, [defaultValue]);\n\n useEffect(() => {\n if (radioGroupRef.current) {\n const activeRadioButton = radioGroupRef.current.querySelector(`input[value=\"${activeValue}\"]`);\n if (activeRadioButton) {\n (activeRadioButton as HTMLDivElement).focus();\n }\n }\n }, [activeValue]);\n\n return (\n <div\n data-test-id=\"radio-list-wrapper\"\n role=\"radiogroup\"\n aria-label={ariaLabel ?? 'Choose an option'}\n ref={radioGroupRef}\n className={merge(['tw-flex', direction === RadioListDirection.Horizontal ? 'tw-gap-4' : 'tw-flex-col'])}\n >\n {radioButtons.map((radio) => {\n const id = generateRandomId();\n return (\n <div className=\"tw-flex tw-items-center tw-mb-2\" key={id}>\n <input\n data-test-id=\"radio-input\"\n disabled={radio.disabled}\n id={id}\n type=\"radio\"\n name
|
|
1
|
+
{"version":3,"file":"RadioList.es.js","sources":["../../../src/components/RadioList/RadioList.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Tooltip, TooltipAlignment, TooltipPosition } from '@components/Tooltip';\nimport IconQuestionMarkCircle from '@foundation/Icon/Generated/IconQuestionMarkCircle';\nimport { IconSize } from '@foundation/Icon';\nimport { generateRandomId } from '@utilities/generateRandomId';\nimport { merge } from '@utilities/merge';\nimport React, { Children, ReactNode, isValidElement, useEffect, useRef, useState } from 'react';\nimport { RadioButtonEmphasis, RadioButtonProps } from './RadioButton';\n\nexport enum RadioListDirection {\n Horizontal = 'Horizontal',\n Vertical = 'Vertical',\n}\n\nexport type RadioListProps = {\n children: ReactNode;\n onChange?: (value: string) => void;\n direction?: RadioListDirection;\n defaultValue?: string;\n name?: string;\n ariaLabel?: string;\n};\n\nexport const RadioList = ({\n children,\n defaultValue,\n direction = RadioListDirection.Horizontal,\n onChange,\n name = 'default-radio',\n ariaLabel,\n}: RadioListProps) => {\n const radioGroupRef = useRef<HTMLDivElement | null>(null);\n\n const [activeValue, setActiveValue] = useState(defaultValue);\n\n const radioButtons: RadioButtonProps[] =\n Children.map(children, (child) => {\n if (!isValidElement<RadioButtonProps>(child)) {\n return null;\n }\n return child?.props;\n }) ?? [];\n\n useEffect(() => {\n setActiveValue(defaultValue);\n }, [defaultValue]);\n\n useEffect(() => {\n if (radioGroupRef.current) {\n const activeRadioButton = radioGroupRef.current.querySelector(`input[value=\"${activeValue}\"]`);\n if (activeRadioButton) {\n (activeRadioButton as HTMLDivElement).focus();\n }\n }\n }, [activeValue]);\n\n return (\n <div\n data-test-id=\"radio-list-wrapper\"\n role=\"radiogroup\"\n aria-label={ariaLabel ?? 'Choose an option'}\n ref={radioGroupRef}\n className={merge(['tw-flex', direction === RadioListDirection.Horizontal ? 'tw-gap-4' : 'tw-flex-col'])}\n >\n {radioButtons.map((radio) => {\n const id = generateRandomId();\n return (\n <div className=\"tw-flex tw-items-center tw-mb-2\" key={id}>\n <input\n data-test-id=\"radio-input\"\n disabled={radio.disabled}\n id={id}\n type=\"radio\"\n name={name}\n value={radio.value}\n aria-label=\"radio\"\n aria-checked={radio.value === activeValue}\n defaultChecked={radio.value === activeValue}\n className={merge([\n 'tw-peer tw-form-radio w-w-4 tw-h-4 tw-border-black-60 disabled:tw-border-black-10 focus:tw-ring-0 focus:tw-ring-offset-0 focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2',\n radio.emphasis === RadioButtonEmphasis.Weak\n ? 'tw-text-black-80'\n : 'tw-text-box-selected-strong',\n ])}\n onChange={() => {\n setActiveValue(radio.value);\n if (onChange) {\n onChange(radio.value);\n }\n }}\n />\n {!radio.hideLabel && (\n <label\n data-test-id=\"radio-label\"\n htmlFor={id}\n className={merge([\n 'tw-flex tw-flex-col tw-pl-2 tw-text-sm tw-font-normal peer-checked:tw-font-medium tw-text-black-80 peer-disabled:tw-text-black-40',\n ])}\n >\n {radio.value}\n {radio.helperText && (\n <span className=\"tw-text-black-80 tw-font-normal\">{radio.helperText}</span>\n )}\n </label>\n )}\n {radio.tooltip && (\n <Tooltip\n alignment={TooltipAlignment.Middle}\n content={radio.tooltip}\n hoverDelay={75}\n position={TooltipPosition.Top}\n triggerElement={\n <button className=\"tw-flex tw-text-black-80 tw-mx-2 tw-self-center\">\n <IconQuestionMarkCircle size={IconSize.Size16} />\n </button>\n }\n withArrow\n />\n )}\n </div>\n );\n })}\n </div>\n );\n};\n"],"names":["RadioListDirection","RadioList","children","defaultValue","direction","onChange","name","ariaLabel","radioGroupRef","useRef","activeValue","setActiveValue","useState","radioButtons","Children","child","isValidElement","useEffect","activeRadioButton","React","merge","radio","id","generateRandomId","RadioButtonEmphasis","Tooltip","TooltipAlignment","TooltipPosition","IconQuestionMarkCircle","IconSize"],"mappings":";;;;;;;AAUY,IAAAA,sBAAAA,OACRA,EAAA,aAAa,cACbA,EAAA,WAAW,YAFHA,IAAAA,KAAA,CAAA,CAAA;AAcL,MAAMC,IAAY,CAAC;AAAA,EACtB,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC;AACJ,MAAsB;AACZ,QAAAC,IAAgBC,EAA8B,IAAI,GAElD,CAACC,GAAaC,CAAc,IAAIC,EAAST,CAAY,GAErDU,IACFC,EAAS,IAAIZ,GAAU,CAACa,MACfC,EAAiCD,CAAK,IAGpCA,KAAA,gBAAAA,EAAO,QAFH,IAGd,KAAK,CAAA;AAEV,SAAAE,EAAU,MAAM;AACZ,IAAAN,EAAeR,CAAY;AAAA,EAAA,GAC5B,CAACA,CAAY,CAAC,GAEjBc,EAAU,MAAM;AACZ,QAAIT,EAAc,SAAS;AACvB,YAAMU,IAAoBV,EAAc,QAAQ,cAAc,gBAAgBE,KAAe;AAC7F,MAAIQ,KACCA,EAAqC,MAAM;AAAA,IAEpD;AAAA,EAAA,GACD,CAACR,CAAW,CAAC,GAGZ,gBAAAS,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,MAAK;AAAA,MACL,cAAYZ,KAAa;AAAA,MACzB,KAAKC;AAAA,MACL,WAAWY,EAAM,CAAC,WAAWhB,MAAc,eAAgC,aAAa,aAAa,CAAC;AAAA,IAAA;AAAA,IAErGS,EAAa,IAAI,CAACQ,MAAU;AACzB,YAAMC,IAAKC;AACX,aACK,gBAAAJ,EAAA,cAAA,OAAA,EAAI,WAAU,mCAAkC,KAAKG,KAClD,gBAAAH,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,gBAAa;AAAA,UACb,UAAUE,EAAM;AAAA,UAChB,IAAAC;AAAA,UACA,MAAK;AAAA,UACL,MAAAhB;AAAA,UACA,OAAOe,EAAM;AAAA,UACb,cAAW;AAAA,UACX,gBAAcA,EAAM,UAAUX;AAAA,UAC9B,gBAAgBW,EAAM,UAAUX;AAAA,UAChC,WAAWU,EAAM;AAAA,YACb;AAAA,YACAC,EAAM,aAAaG,EAAoB,OACjC,qBACA;AAAA,UAAA,CACT;AAAA,UACD,UAAU,MAAM;AACZ,YAAAb,EAAeU,EAAM,KAAK,GACtBhB,KACAA,EAASgB,EAAM,KAAK;AAAA,UAE5B;AAAA,QAAA;AAAA,MACJ,GACC,CAACA,EAAM,aACJ,gBAAAF,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,gBAAa;AAAA,UACb,SAASG;AAAA,UACT,WAAWF,EAAM;AAAA,YACb;AAAA,UAAA,CACH;AAAA,QAAA;AAAA,QAEAC,EAAM;AAAA,QACNA,EAAM,cACH,gBAAAF,EAAA,cAAC,UAAK,WAAU,kCAAA,GAAmCE,EAAM,UAAW;AAAA,MAAA,GAI/EA,EAAM,WACH,gBAAAF,EAAA;AAAA,QAACM;AAAA,QAAA;AAAA,UACG,WAAWC,EAAiB;AAAA,UAC5B,SAASL,EAAM;AAAA,UACf,YAAY;AAAA,UACZ,UAAUM,EAAgB;AAAA,UAC1B,gBACK,gBAAAR,EAAA,cAAA,UAAA,EAAO,WAAU,kDAAA,mCACbS,GAAuB,EAAA,MAAMC,EAAS,OAAQ,CAAA,CACnD;AAAA,UAEJ,WAAS;AAAA,QAAA;AAAA,MAAA,CAGrB;AAAA,IAAA,CAEP;AAAA,EAAA;AAGb;"}
|