@clubmed/trident-ui 1.3.0-rc.1 → 1.3.0-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/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# ClubMed React UI components changelog
|
|
2
2
|
|
|
3
|
+
# [1.3.0-rc.2](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.3.0-rc.1...v1.3.0-rc.2) (2025-08-11)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* **radio:** change props order to allow color override ([93e66a3](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/93e66a376a6d698a0a0971c08baa2e4eedf90dd2))
|
|
9
|
+
|
|
3
10
|
# [1.3.0-rc.1](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.2.0...v1.3.0-rc.1) (2025-08-11)
|
|
4
11
|
|
|
5
12
|
|
|
@@ -40,10 +40,10 @@ function G(k) {
|
|
|
40
40
|
return e;
|
|
41
41
|
const n = e.type.displayName, t = e.props.value, l = r === t;
|
|
42
42
|
return n?.includes("Button") ? y(e, {
|
|
43
|
+
color: l ? "black" : "white",
|
|
43
44
|
...e.props,
|
|
44
45
|
value: void 0,
|
|
45
46
|
role: "radio",
|
|
46
|
-
color: l ? "black" : "white",
|
|
47
47
|
name: u,
|
|
48
48
|
component: "span",
|
|
49
49
|
id: `${s}-${o}`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sources":["../../../../lib/molecules/Forms/Radios/RadioGroup.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n type HTMLAttributes,\n isValidElement,\n useId,\n type ReactElement,\n} from 'react';\nimport type { FormControlProps } from '@/molecules/Forms/FormControl.js';\nimport type { RadioProps } from '@/molecules/Forms/Radios/Radio.js';\nimport { useValue } from '@/hooks/useValue.js';\nimport classnames from 'classnames';\nimport type { ButtonProps } from '@/molecules/Buttons/v2/Button';\nimport { KEY } from '@/hooks/keyboard.constants';\n\nexport interface RadioGroupProps<Value = string>\n extends Pick<\n FormControlProps<Value>,\n | 'id'\n | 'name'\n | 'value'\n | 'onChange'\n | 'disabled'\n | 'readOnly'\n | 'tabIndex'\n | 'description'\n | 'validationStatus'\n | 'errorMessage'\n >,\n Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {}\n\nexport function RadioGroup<Value = string>(props: RadioGroupProps<Value>) {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n children,\n value: initialValue,\n defaultValue,\n onChange,\n disabled,\n readOnly,\n tabIndex = 0,\n ...rest\n } = props;\n\n const { value, setValue } = useValue<Value>({\n name,\n initialValue,\n defaultValue: defaultValue as Value,\n onChange,\n });\n\n const handleKeyDown = (e: KeyboardEvent, index: number) => {\n let newIndex = index;\n const options = (e.target as any)!.parentNode!.querySelectorAll('[role=\"radio\"]');\n\n if (e.key === KEY.ARROW_RIGHT || e.key === KEY.ARROW_DOWN) {\n newIndex = (index + 1) % options.length;\n options[newIndex]?.focus();\n } else if (e.key === KEY.ARROW_LEFT || e.key === KEY.ARROW_UP) {\n newIndex = (index - 1 + options.length) % options.length;\n options[newIndex]?.focus();\n } else if (e.key === KEY.SPACE || e.key === KEY.ENTER) {\n setValue(options[index].dataset.value as Value);\n return;\n }\n };\n\n function getTabIndex(checked: boolean, index: number) {\n if (value === undefined || value === null || value === '') {\n return tabIndex === index ? 0 : -1;\n }\n\n return checked ? 0 : -1;\n }\n\n return (\n <div {...rest} className={classnames('flex gap-12', rest.className)} role=\"radiogroup\">\n {Children.map(children, (child, index) => {\n if (!isValidElement(child)) {\n return child;\n }\n\n const type = (child.type as unknown as ReactElement & { displayName?: string }).displayName;\n const itemValue = (child.props as ButtonProps | RadioProps).value;\n const checked = value === itemValue;\n\n if (type?.includes('Button')) {\n return cloneElement(child, {\n ...child.props,\n value: undefined,\n role: 'radio',\n
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sources":["../../../../lib/molecules/Forms/Radios/RadioGroup.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n type HTMLAttributes,\n isValidElement,\n useId,\n type ReactElement,\n} from 'react';\nimport type { FormControlProps } from '@/molecules/Forms/FormControl.js';\nimport type { RadioProps } from '@/molecules/Forms/Radios/Radio.js';\nimport { useValue } from '@/hooks/useValue.js';\nimport classnames from 'classnames';\nimport type { ButtonProps } from '@/molecules/Buttons/v2/Button';\nimport { KEY } from '@/hooks/keyboard.constants';\n\nexport interface RadioGroupProps<Value = string>\n extends Pick<\n FormControlProps<Value>,\n | 'id'\n | 'name'\n | 'value'\n | 'onChange'\n | 'disabled'\n | 'readOnly'\n | 'tabIndex'\n | 'description'\n | 'validationStatus'\n | 'errorMessage'\n >,\n Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {}\n\nexport function RadioGroup<Value = string>(props: RadioGroupProps<Value>) {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n children,\n value: initialValue,\n defaultValue,\n onChange,\n disabled,\n readOnly,\n tabIndex = 0,\n ...rest\n } = props;\n\n const { value, setValue } = useValue<Value>({\n name,\n initialValue,\n defaultValue: defaultValue as Value,\n onChange,\n });\n\n const handleKeyDown = (e: KeyboardEvent, index: number) => {\n let newIndex = index;\n const options = (e.target as any)!.parentNode!.querySelectorAll('[role=\"radio\"]');\n\n if (e.key === KEY.ARROW_RIGHT || e.key === KEY.ARROW_DOWN) {\n newIndex = (index + 1) % options.length;\n options[newIndex]?.focus();\n } else if (e.key === KEY.ARROW_LEFT || e.key === KEY.ARROW_UP) {\n newIndex = (index - 1 + options.length) % options.length;\n options[newIndex]?.focus();\n } else if (e.key === KEY.SPACE || e.key === KEY.ENTER) {\n setValue(options[index].dataset.value as Value);\n return;\n }\n };\n\n function getTabIndex(checked: boolean, index: number) {\n if (value === undefined || value === null || value === '') {\n return tabIndex === index ? 0 : -1;\n }\n\n return checked ? 0 : -1;\n }\n\n return (\n <div {...rest} className={classnames('flex gap-12', rest.className)} role=\"radiogroup\">\n {Children.map(children, (child, index) => {\n if (!isValidElement(child)) {\n return child;\n }\n\n const type = (child.type as unknown as ReactElement & { displayName?: string }).displayName;\n const itemValue = (child.props as ButtonProps | RadioProps).value;\n const checked = value === itemValue;\n\n if (type?.includes('Button')) {\n return cloneElement(child, {\n color: checked ? 'black' : 'white',\n ...child.props,\n value: undefined,\n role: 'radio',\n name,\n component: 'span',\n id: `${id}-${index}`,\n disabled,\n readOnly,\n tabIndex: getTabIndex(checked, index),\n 'data-value': itemValue,\n 'aria-checked': value === itemValue,\n onKeyDown: (e: KeyboardEvent) => handleKeyDown(e, index),\n onClick() {\n setValue(itemValue as Value);\n child.props?.onClick?.(itemValue as Value);\n },\n } as ButtonProps);\n }\n\n return cloneElement(child, {\n ...child.props,\n name,\n id: `${id}-${index}`,\n disabled,\n readOnly,\n tabIndex: getTabIndex(checked, index),\n checked: checked,\n onChange(_: string, value: Value) {\n setValue(value);\n },\n } as RadioProps<Value>);\n })}\n </div>\n );\n}\n"],"names":["RadioGroup","props","internalId","useId","id","name","children","initialValue","defaultValue","onChange","disabled","readOnly","tabIndex","rest","value","setValue","useValue","handleKeyDown","index","newIndex","options","KEY","getTabIndex","checked","classnames","Children","child","isValidElement","type","itemValue","cloneElement","e","_"],"mappings":";;;;;AA+BO,SAASA,EAA2BC,GAA+B;AACxE,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,UAAAE;AAAA,IACA,OAAOC;AAAA,IACP,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EAAA,IACDZ,GAEE,EAAE,OAAAa,GAAO,UAAAC,EAAA,IAAaC,EAAgB;AAAA,IAC1C,MAAAX;AAAA,IACA,cAAAE;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,CACD,GAEKQ,IAAgB,CAAC,GAAkBC,MAAkB;AACzD,QAAIC,IAAWD;AACf,UAAME,IAAW,EAAE,OAAgB,WAAY,iBAAiB,gBAAgB;AAEhF,QAAI,EAAE,QAAQC,EAAI,eAAe,EAAE,QAAQA,EAAI;AAC7C,MAAAF,KAAYD,IAAQ,KAAKE,EAAQ,QACjCA,EAAQD,CAAQ,GAAG,MAAA;AAAA,aACV,EAAE,QAAQE,EAAI,cAAc,EAAE,QAAQA,EAAI;AACnD,MAAAF,KAAYD,IAAQ,IAAIE,EAAQ,UAAUA,EAAQ,QAClDA,EAAQD,CAAQ,GAAG,MAAA;AAAA,aACV,EAAE,QAAQE,EAAI,SAAS,EAAE,QAAQA,EAAI,OAAO;AACrD,MAAAN,EAASK,EAAQF,CAAK,EAAE,QAAQ,KAAc;AAC9C;AAAA,IACF;AAAA,EACF;AAEA,WAASI,EAAYC,GAAkBL,GAAe;AACpD,WAA2BJ,KAAU,QAAQA,MAAU,KAC9CF,MAAaM,IAAQ,IAAI,KAG3BK,IAAU,IAAI;AAAA,EACvB;AAEA,2BACG,OAAA,EAAK,GAAGV,GAAM,WAAWW,EAAW,eAAeX,EAAK,SAAS,GAAG,MAAK,cACvE,UAAAY,EAAS,IAAInB,GAAU,CAACoB,GAAOR,MAAU;AACxC,QAAI,CAACS,EAAeD,CAAK;AACvB,aAAOA;AAGT,UAAME,IAAQF,EAAM,KAA4D,aAC1EG,IAAaH,EAAM,MAAmC,OACtDH,IAAUT,MAAUe;AAE1B,WAAID,GAAM,SAAS,QAAQ,IAClBE,EAAaJ,GAAO;AAAA,MACzB,OAAOH,IAAU,UAAU;AAAA,MAC3B,GAAGG,EAAM;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAArB;AAAA,MACA,WAAW;AAAA,MACX,IAAI,GAAGD,CAAE,IAAIc,CAAK;AAAA,MAClB,UAAAR;AAAA,MACA,UAAAC;AAAA,MACA,UAAUW,EAAYC,GAASL,CAAK;AAAA,MACpC,cAAcW;AAAA,MACd,gBAAgBf,MAAUe;AAAA,MAC1B,WAAW,CAACE,MAAqBd,EAAcc,GAAGb,CAAK;AAAA,MACvD,UAAU;AACR,QAAAH,EAASc,CAAkB,GAC3BH,EAAM,OAAO,UAAUG,CAAkB;AAAA,MAC3C;AAAA,IAAA,CACc,IAGXC,EAAaJ,GAAO;AAAA,MACzB,GAAGA,EAAM;AAAA,MACT,MAAArB;AAAA,MACA,IAAI,GAAGD,CAAE,IAAIc,CAAK;AAAA,MAClB,UAAAR;AAAA,MACA,UAAAC;AAAA,MACA,UAAUW,EAAYC,GAASL,CAAK;AAAA,MACpC,SAAAK;AAAA,MACA,SAASS,GAAWlB,GAAc;AAChC,QAAAC,EAASD,CAAK;AAAA,MAChB;AAAA,IAAA,CACoB;AAAA,EACxB,CAAC,EAAA,CACH;AAEJ;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@clubmed/trident-ui",
|
|
3
|
-
"version": "1.3.0-rc.
|
|
3
|
+
"version": "1.3.0-rc.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Shared ClubMed React UI components",
|
|
6
6
|
"keywords": [
|
|
@@ -31,16 +31,16 @@
|
|
|
31
31
|
"import": "./atoms/Icons/index.js",
|
|
32
32
|
"default": "./atoms/Icons/index.js"
|
|
33
33
|
},
|
|
34
|
-
"./atoms/Icons/svg-use": {
|
|
35
|
-
"types": "./atoms/Icons/svg-use/index.d.ts",
|
|
36
|
-
"import": "./atoms/Icons/svg-use/index.js",
|
|
37
|
-
"default": "./atoms/Icons/svg-use/index.js"
|
|
38
|
-
},
|
|
39
34
|
"./atoms/Icons/svg": {
|
|
40
35
|
"types": "./atoms/Icons/svg/index.d.ts",
|
|
41
36
|
"import": "./atoms/Icons/svg/index.js",
|
|
42
37
|
"default": "./atoms/Icons/svg/index.js"
|
|
43
38
|
},
|
|
39
|
+
"./atoms/Icons/svg-use": {
|
|
40
|
+
"types": "./atoms/Icons/svg-use/index.d.ts",
|
|
41
|
+
"import": "./atoms/Icons/svg-use/index.js",
|
|
42
|
+
"default": "./atoms/Icons/svg-use/index.js"
|
|
43
|
+
},
|
|
44
44
|
"./molecules/Tabs": {
|
|
45
45
|
"types": "./molecules/Tabs/index.d.ts",
|
|
46
46
|
"import": "./molecules/Tabs/index.js",
|