@clubmed/trident-ui 1.3.1-beta.1 → 1.3.1-beta.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 +7 -0
- package/hooks/useValue.js +6 -6
- package/hooks/useValue.js.map +1 -1
- package/molecules/Forms/Checkboxes/Checkbox.js +1 -1
- package/molecules/Forms/Checkboxes/Checkbox.js.map +1 -1
- package/molecules/Forms/Filter.js +1 -1
- package/molecules/Forms/Filter.js.map +1 -1
- package/molecules/Forms/Radios/Radio.js +5 -5
- package/molecules/Forms/Radios/Radio.js.map +1 -1
- package/molecules/Forms/Range.js.map +1 -1
- package/molecules/Forms/Switch.js +5 -5
- package/molecules/Forms/Switch.js.map +1 -1
- package/package.json +17 -13
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# ClubMed React UI components changelog
|
|
2
2
|
|
|
3
|
+
## [1.3.1-beta.2](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.3.1-beta.1...v1.3.1-beta.2) (2025-10-01)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* **chromatic:** include build number in deployment message for better tracking ([fa7c661](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/fa7c661868b9e7d6be28884f9a8a4566447fd6a4))
|
|
9
|
+
|
|
3
10
|
## [1.3.1-beta.1](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.3.0...v1.3.1-beta.1) (2025-09-29)
|
|
4
11
|
|
|
5
12
|
|
package/hooks/useValue.js
CHANGED
|
@@ -2,19 +2,19 @@ import { useState as x, useEffect as E } from "react";
|
|
|
2
2
|
function S({
|
|
3
3
|
name: p,
|
|
4
4
|
initialValue: s,
|
|
5
|
-
onChange:
|
|
6
|
-
defaultValue:
|
|
5
|
+
onChange: o,
|
|
6
|
+
defaultValue: u = "",
|
|
7
7
|
formatter: c = (e) => e
|
|
8
8
|
}) {
|
|
9
|
-
const [e,
|
|
9
|
+
const [e, f] = x(c(s || u));
|
|
10
10
|
E(() => {
|
|
11
|
-
s !== void 0 &&
|
|
11
|
+
s !== void 0 && f(c(s));
|
|
12
12
|
}, [s]);
|
|
13
13
|
function r(t) {
|
|
14
|
-
t = c(t),
|
|
14
|
+
t = c(t), f(t), o && o(p, t);
|
|
15
15
|
}
|
|
16
16
|
function v() {
|
|
17
|
-
|
|
17
|
+
f(u);
|
|
18
18
|
}
|
|
19
19
|
return {
|
|
20
20
|
value: e,
|
package/hooks/useValue.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useValue.js","sources":["../../lib/hooks/useValue.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport interface UseValueProps<Value = string, InitialValue = Value> {\n name: string;\n initialValue?: InitialValue;\n defaultValue?: Value | string;\n formatter?: (v: Value) => Value;\n onChange?: (name: string, value: Value) => void;\n}\n\nexport function useValue<Value = string, InitialValue = Value>({\n name,\n initialValue,\n onChange,\n defaultValue = '',\n formatter = (v: Value) => v as unknown as Value,\n}: UseValueProps<Value, InitialValue>) {\n const [value, setValue] = useState<Value>(formatter((initialValue || defaultValue) as Value));\n\n useEffect(() => {\n initialValue !== undefined
|
|
1
|
+
{"version":3,"file":"useValue.js","sources":["../../lib/hooks/useValue.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport interface UseValueProps<Value = string, InitialValue = Value> {\n name: string;\n initialValue?: InitialValue;\n defaultValue?: Value | string;\n formatter?: (v: Value) => Value;\n onChange?: (name: string, value: Value) => void;\n}\n\nexport function useValue<Value = string, InitialValue = Value>({\n name,\n initialValue,\n onChange,\n defaultValue = '',\n formatter = (v: Value) => v as unknown as Value,\n}: UseValueProps<Value, InitialValue>) {\n const [value, setValue] = useState<Value>(formatter((initialValue || defaultValue) as Value));\n\n useEffect(() => {\n if (initialValue !== undefined) {\n setValue(formatter(initialValue as Value));\n }\n }, [initialValue]);\n\n function setNewValue(newValue: Value) {\n newValue = formatter(newValue);\n setValue(newValue);\n if (onChange) onChange(name, newValue);\n }\n\n function resetValue() {\n setValue(defaultValue as Value);\n }\n\n return {\n value,\n setValue: setNewValue,\n resetValue,\n };\n}\n"],"names":["useValue","name","initialValue","onChange","defaultValue","formatter","v","value","setValue","useState","useEffect","setNewValue","newValue","resetValue"],"mappings":";AAUO,SAASA,EAA+C;AAAA,EAC7D,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC,IAAY,CAACC,MAAaA;AAC5B,GAAuC;AACrC,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAgBJ,EAAWH,KAAgBE,CAAsB,CAAC;AAE5F,EAAAM,EAAU,MAAM;AACd,IAAIR,MAAiB,UACnBM,EAASH,EAAUH,CAAqB,CAAC;AAAA,EAE7C,GAAG,CAACA,CAAY,CAAC;AAEjB,WAASS,EAAYC,GAAiB;AACpC,IAAAA,IAAWP,EAAUO,CAAQ,GAC7BJ,EAASI,CAAQ,GACbT,KAAUA,EAASF,GAAMW,CAAQ;AAAA,EACvC;AAEA,WAASC,IAAa;AACpB,IAAAL,EAASJ,CAAqB;AAAA,EAChC;AAEA,SAAO;AAAA,IACL,OAAAG;AAAA,IACA,UAAUI;AAAA,IACV,YAAAE;AAAA,EAAA;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../../../lib/molecules/Forms/Checkboxes/Checkbox.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useId } from 'react';\nimport { useValue } from '@/hooks/useValue.js';\nimport '../controls.css';\nimport type { FormControlProps } from '@/molecules/Forms/FormControl';\nimport { useInternalStatus } from '@/hooks/useInternalStatus';\nimport { Icon } from '@clubmed/trident-icons';\n\nexport interface CheckboxProps<Value = string> extends FormControlProps<Value> {\n size?: number;\n onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Checkbox<Value = string>(props: CheckboxProps<Value>) {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n className,\n dataTestId,\n disabled = false,\n checked: initialChecked = false,\n value,\n size = 24,\n tabIndex = 0,\n validationStatus = 'default',\n errorMessage,\n children,\n onChange,\n ...rest\n } = props;\n\n const { value: checked, setValue } = useValue<boolean>({\n name,\n initialValue: initialChecked,\n onChange(name, checked) {\n onChange?.(name, checked ? ((value !== undefined ? value : checked) as Value) : null);\n },\n });\n const internalStatus = useInternalStatus({\n isDisabled: disabled,\n validationStatus,\n });\n\n const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n return (\n <div\n className={classnames('flex flex-col space-y-2', className)}\n data-testid={`checkbox-container-${id}`}\n >\n <label\n className={classnames('cursor-pointer relative flex text-b3 items-center', {\n 'text-grey': internalStatus === 'disabled',\n 'text-black': internalStatus !== 'default',\n })}\n >\n <span className=\"relative self-start me-8\">\n <input\n {...rest}\n name={name}\n data-testid={dataTestId}\n type=\"checkbox\"\n tabIndex={tabIndex}\n onChange={() => {\n !disabled
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../../../lib/molecules/Forms/Checkboxes/Checkbox.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useId } from 'react';\nimport { useValue } from '@/hooks/useValue.js';\nimport '../controls.css';\nimport type { FormControlProps } from '@/molecules/Forms/FormControl';\nimport { useInternalStatus } from '@/hooks/useInternalStatus';\nimport { Icon } from '@clubmed/trident-icons';\n\nexport interface CheckboxProps<Value = string> extends FormControlProps<Value> {\n size?: number;\n onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Checkbox<Value = string>(props: CheckboxProps<Value>) {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n className,\n dataTestId,\n disabled = false,\n checked: initialChecked = false,\n value,\n size = 24,\n tabIndex = 0,\n validationStatus = 'default',\n errorMessage,\n children,\n onChange,\n ...rest\n } = props;\n\n const { value: checked, setValue } = useValue<boolean>({\n name,\n initialValue: initialChecked,\n onChange(name, checked) {\n onChange?.(name, checked ? ((value !== undefined ? value : checked) as Value) : null);\n },\n });\n const internalStatus = useInternalStatus({\n isDisabled: disabled,\n validationStatus,\n });\n\n const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n return (\n <div\n className={classnames('flex flex-col space-y-2', className)}\n data-testid={`checkbox-container-${id}`}\n >\n <label\n className={classnames('cursor-pointer relative flex text-b3 items-center', {\n 'text-grey': internalStatus === 'disabled',\n 'text-black': internalStatus !== 'default',\n })}\n >\n <span className=\"relative self-start me-8\">\n <input\n {...rest}\n name={name}\n data-testid={dataTestId}\n type=\"checkbox\"\n tabIndex={tabIndex}\n onChange={() => {\n if (!disabled) setValue(!checked);\n }}\n checked={checked}\n data-name=\"Checkbox\"\n disabled={disabled}\n value={value as any}\n />\n\n <span\n style={{ height: size, width: size }}\n className={classnames({ '!border-red': internalStatus === 'error' })}\n data-testid={`check-container-${id}`}\n >\n <Icon\n name=\"CheckDefault\"\n type=\"svg\"\n width={`${size}px`}\n color=\"black\"\n className=\"absolute\"\n />\n </span>\n </span>\n\n {children}\n </label>\n\n {shouldDisplayErrorMessage && (\n <span className=\"text-red text-b4 flex items-start space-x-4 ps-20\" role=\"alert\">\n <Icon name=\"Error\" width=\"20px\" />\n {errorMessage}\n </span>\n )}\n </div>\n );\n}\n"],"names":["Checkbox","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","size","tabIndex","validationStatus","errorMessage","children","onChange","rest","checked","setValue","useValue","internalStatus","useInternalStatus","shouldDisplayErrorMessage","jsxs","classnames","jsx","Icon"],"mappings":";;;;;;;AAaO,SAASA,EAAyBC,GAA6B;AACpE,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,kBAAAC,IAAmB;AAAA,IACnB,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDhB,GAEE,EAAE,OAAOiB,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAf;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMa,GAAS;AACtB,MAAAF,IAAWX,GAAMa,IAAYR,MAAU,SAAYA,IAAQQ,IAAqB,IAAI;AAAA,IACtF;AAAA,EAAA,CACD,GACKG,IAAiBC,EAAkB;AAAA,IACvC,YAAYd;AAAA,IACZ,kBAAAK;AAAA,EAAA,CACD,GAEKU,IAA4BF,MAAmB,WAAWP;AAEhE,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAW,2BAA2BnB,CAAS;AAAA,MAC1D,eAAa,sBAAsBF,CAAE;AAAA,MAErC,UAAA;AAAA,QAAA,gBAAAoB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAW,qDAAqD;AAAA,cACzE,aAAaJ,MAAmB;AAAA,cAChC,cAAcA,MAAmB;AAAA,YAAA,CAClC;AAAA,YAED,UAAA;AAAA,cAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,4BACd,UAAA;AAAA,gBAAA,gBAAAE;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACE,GAAGT;AAAA,oBACJ,MAAAZ;AAAA,oBACA,eAAaE;AAAA,oBACb,MAAK;AAAA,oBACL,UAAAK;AAAA,oBACA,UAAU,MAAM;AACd,sBAAKJ,KAAUW,EAAS,CAACD,CAAO;AAAA,oBAClC;AAAA,oBACA,SAAAA;AAAA,oBACA,aAAU;AAAA,oBACV,UAAAV;AAAA,oBACA,OAAAE;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGF,gBAAAgB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,OAAO,EAAE,QAAQf,GAAM,OAAOA,EAAA;AAAA,oBAC9B,WAAWc,EAAW,EAAE,eAAeJ,MAAmB,SAAS;AAAA,oBACnE,eAAa,mBAAmBjB,CAAE;AAAA,oBAElC,UAAA,gBAAAsB;AAAA,sBAACC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,MAAK;AAAA,wBACL,OAAO,GAAGhB,CAAI;AAAA,wBACd,OAAM;AAAA,wBACN,WAAU;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACZ;AAAA,gBAAA;AAAA,cACF,GACF;AAAA,cAECI;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGFQ,KACC,gBAAAC,EAAC,QAAA,EAAK,WAAU,qDAAoD,MAAK,SACvE,UAAA;AAAA,UAAA,gBAAAE,EAACC,GAAA,EAAK,MAAK,SAAQ,OAAM,QAAO;AAAA,UAC/Bb;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Filter.js","sources":["../../../lib/molecules/Forms/Filter.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type InputHTMLAttributes, useId } from 'react';\nimport './controls.css';\nimport { Icon } from '@clubmed/trident-icons';\nimport { useValue } from '@/hooks/useValue.js';\n\nexport interface FilterProps<Value = string>\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n /**\n * The data-testid to apply to the button.\n * This is used for testing purposes.\n * */\n dataTestId?: string;\n /**\n * Is it attached to a dropdown?\n */\n hasDropdown?: boolean;\n\n onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Filter<Value = string>(props: FilterProps<Value>) {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n className,\n dataTestId,\n disabled,\n checked: initialChecked = false,\n value,\n tabIndex = 0,\n onChange,\n hasDropdown,\n children,\n ...rest\n } = props;\n\n const { value: checked, setValue } = useValue<boolean>({\n name,\n initialValue: initialChecked,\n onChange(name, checked) {\n onChange?.(name, checked ? ((value !== undefined ? value : checked) as Value) : null);\n },\n });\n\n return (\n <label className={classnames(className, 'relative')}>\n <input\n {...rest}\n name={name}\n data-testid={dataTestId}\n type=\"checkbox\"\n tabIndex={tabIndex}\n onChange={() => {\n !disabled
|
|
1
|
+
{"version":3,"file":"Filter.js","sources":["../../../lib/molecules/Forms/Filter.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type InputHTMLAttributes, useId } from 'react';\nimport './controls.css';\nimport { Icon } from '@clubmed/trident-icons';\nimport { useValue } from '@/hooks/useValue.js';\n\nexport interface FilterProps<Value = string>\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n /**\n * The data-testid to apply to the button.\n * This is used for testing purposes.\n * */\n dataTestId?: string;\n /**\n * Is it attached to a dropdown?\n */\n hasDropdown?: boolean;\n\n onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Filter<Value = string>(props: FilterProps<Value>) {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n className,\n dataTestId,\n disabled,\n checked: initialChecked = false,\n value,\n tabIndex = 0,\n onChange,\n hasDropdown,\n children,\n ...rest\n } = props;\n\n const { value: checked, setValue } = useValue<boolean>({\n name,\n initialValue: initialChecked,\n onChange(name, checked) {\n onChange?.(name, checked ? ((value !== undefined ? value : checked) as Value) : null);\n },\n });\n\n return (\n <label className={classnames(className, 'relative')}>\n <input\n {...rest}\n name={name}\n data-testid={dataTestId}\n type=\"checkbox\"\n tabIndex={tabIndex}\n onChange={() => {\n if (!disabled) setValue(!checked);\n }}\n checked={checked}\n data-name=\"Filter\"\n disabled={disabled}\n value={value}\n />\n <span>\n <span className={classnames('text-b3 font-semibold')}>{children}</span>\n <Icon width={null} name=\"CheckDefault\" color=\"black\" />\n {hasDropdown && (\n <Icon name=\"ArrowDefaultDown\" className=\"ml-8\" width=\"24px\" color=\"black\" />\n )}\n </span>\n </label>\n );\n}\n"],"names":["Filter","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","tabIndex","onChange","hasDropdown","children","rest","checked","setValue","useValue","classnames","jsx","Icon"],"mappings":";;;;;;AAqBO,SAASA,EAAuBC,GAA2B;AAChE,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDd,GAEE,EAAE,OAAOe,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAb;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMW,GAAS;AACtB,MAAAJ,IAAWP,GAAMW,IAAYN,MAAU,SAAYA,IAAQM,IAAqB,IAAI;AAAA,IACtF;AAAA,EAAA,CACD;AAED,2BACG,SAAA,EAAM,WAAWG,EAAWb,GAAW,UAAU,GAChD,UAAA;AAAA,IAAA,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGL;AAAA,QACJ,MAAAV;AAAA,QACA,eAAaE;AAAA,QACb,MAAK;AAAA,QACL,UAAAI;AAAA,QACA,UAAU,MAAM;AACd,UAAKH,KAAUS,EAAS,CAACD,CAAO;AAAA,QAClC;AAAA,QACA,SAAAA;AAAA,QACA,aAAU;AAAA,QACV,UAAAR;AAAA,QACA,OAAAE;AAAA,MAAA;AAAA,IAAA;AAAA,sBAED,QAAA,EACC,UAAA;AAAA,MAAA,gBAAAU,EAAC,QAAA,EAAK,WAAWD,EAAW,uBAAuB,GAAI,UAAAL,GAAS;AAAA,wBAC/DO,GAAA,EAAK,OAAO,MAAM,MAAK,gBAAe,OAAM,SAAQ;AAAA,MACpDR,KACC,gBAAAO,EAACC,GAAA,EAAK,MAAK,oBAAmB,WAAU,QAAO,OAAM,QAAO,OAAM,QAAA,CAAQ;AAAA,IAAA,EAAA,CAE9E;AAAA,EAAA,GACF;AAEJ;"}
|
|
@@ -13,8 +13,8 @@ function k(r) {
|
|
|
13
13
|
checked: h = !1,
|
|
14
14
|
value: i,
|
|
15
15
|
size: s = 24,
|
|
16
|
-
tabIndex:
|
|
17
|
-
children:
|
|
16
|
+
tabIndex: f = 0,
|
|
17
|
+
children: p,
|
|
18
18
|
onChange: u,
|
|
19
19
|
...v
|
|
20
20
|
} = r, { value: l, setValue: x } = b({
|
|
@@ -39,9 +39,9 @@ function k(r) {
|
|
|
39
39
|
name: t,
|
|
40
40
|
"data-testid": m,
|
|
41
41
|
type: "radio",
|
|
42
|
-
tabIndex:
|
|
42
|
+
tabIndex: f,
|
|
43
43
|
onChange: () => {
|
|
44
|
-
|
|
44
|
+
a || x(!l);
|
|
45
45
|
},
|
|
46
46
|
defaultChecked: l,
|
|
47
47
|
"data-name": "Radio",
|
|
@@ -51,7 +51,7 @@ function k(r) {
|
|
|
51
51
|
),
|
|
52
52
|
/* @__PURE__ */ e("span", { style: { height: s, width: s }, children: /* @__PURE__ */ e("svg", { viewBox: "0 0 16 16", width: s * 2 / 3, className: "overflow-visible", children: /* @__PURE__ */ e("circle", { cx: "8", cy: "8", r: "8px", style: { fill: "hsl(var(--color-saffron))" } }) }) })
|
|
53
53
|
] }),
|
|
54
|
-
|
|
54
|
+
p
|
|
55
55
|
]
|
|
56
56
|
}
|
|
57
57
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sources":["../../../../lib/molecules/Forms/Radios/Radio.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type InputHTMLAttributes, useId } from 'react';\nimport { useValue } from '@/hooks/useValue.js';\nimport '../controls.css';\n\nexport interface RadioProps<Value = string>\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n /**\n * The data-testid to apply to the button.\n * This is used for testing purposes.\n * */\n dataTestId?: string;\n /**\n * The diameter of the radio button.\n * */\n size?: number;\n\n onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Radio<Value = string>(props: RadioProps<Value>) {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n className,\n dataTestId,\n disabled,\n checked: initialChecked = false,\n value,\n size = 24,\n tabIndex = 0,\n children,\n onChange,\n ...rest\n } = props;\n\n const { value: checked, setValue } = useValue<boolean>({\n name,\n initialValue: initialChecked,\n onChange(name, checked) {\n onChange?.(name, (value !== undefined ? value : checked) as Value);\n },\n });\n\n return (\n <label\n className={classnames(className, 'relative flex items-center gap-8', {\n 'text-grey': disabled,\n })}\n >\n <span className=\"relative\">\n <input\n {...rest}\n name={name}\n data-testid={dataTestId}\n type=\"radio\"\n tabIndex={tabIndex}\n onChange={() => {\n !disabled
|
|
1
|
+
{"version":3,"file":"Radio.js","sources":["../../../../lib/molecules/Forms/Radios/Radio.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type InputHTMLAttributes, useId } from 'react';\nimport { useValue } from '@/hooks/useValue.js';\nimport '../controls.css';\n\nexport interface RadioProps<Value = string>\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n /**\n * The data-testid to apply to the button.\n * This is used for testing purposes.\n * */\n dataTestId?: string;\n /**\n * The diameter of the radio button.\n * */\n size?: number;\n\n onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Radio<Value = string>(props: RadioProps<Value>) {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n className,\n dataTestId,\n disabled,\n checked: initialChecked = false,\n value,\n size = 24,\n tabIndex = 0,\n children,\n onChange,\n ...rest\n } = props;\n\n const { value: checked, setValue } = useValue<boolean>({\n name,\n initialValue: initialChecked,\n onChange(name, checked) {\n onChange?.(name, (value !== undefined ? value : checked) as Value);\n },\n });\n\n return (\n <label\n className={classnames(className, 'relative flex items-center gap-8', {\n 'text-grey': disabled,\n })}\n >\n <span className=\"relative\">\n <input\n {...rest}\n name={name}\n data-testid={dataTestId}\n type=\"radio\"\n tabIndex={tabIndex}\n onChange={() => {\n if (!disabled) {\n setValue(!checked);\n }\n }}\n defaultChecked={checked}\n data-name=\"Radio\"\n disabled={disabled}\n value={value}\n />\n\n <span style={{ height: size, width: size }}>\n <svg viewBox=\"0 0 16 16\" width={(size * 2) / 3} className=\"overflow-visible\">\n <circle cx=\"8\" cy=\"8\" r=\"8px\" style={{ fill: 'hsl(var(--color-saffron))' }} />\n </svg>\n </span>\n </span>\n\n {children}\n </label>\n );\n}\n\nRadio.displayName = 'Radio';\n"],"names":["Radio","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","size","tabIndex","children","onChange","rest","checked","setValue","useValue","jsxs","classnames","jsx"],"mappings":";;;;;AAoBO,SAASA,EAAsBC,GAA0B;AAC9D,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDd,GAEE,EAAE,OAAOe,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAb;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMW,GAAS;AACtB,MAAAF,IAAWT,GAAOK,MAAU,SAAYA,IAAQM,CAAiB;AAAA,IACnE;AAAA,EAAA,CACD;AAED,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAWd,GAAW,oCAAoC;AAAA,QACnE,aAAaE;AAAA,MAAA,CACd;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAW,EAAC,QAAA,EAAK,WAAU,YACd,UAAA;AAAA,UAAA,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAGN;AAAA,cACJ,MAAAV;AAAA,cACA,eAAaE;AAAA,cACb,MAAK;AAAA,cACL,UAAAK;AAAA,cACA,UAAU,MAAM;AACd,gBAAKJ,KACHS,EAAS,CAACD,CAAO;AAAA,cAErB;AAAA,cACA,gBAAgBA;AAAA,cAChB,aAAU;AAAA,cACV,UAAAR;AAAA,cACA,OAAAE;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF,gBAAAW,EAAC,QAAA,EAAK,OAAO,EAAE,QAAQV,GAAM,OAAOA,EAAA,GAClC,UAAA,gBAAAU,EAAC,OAAA,EAAI,SAAQ,aAAY,OAAQV,IAAO,IAAK,GAAG,WAAU,oBACxD,UAAA,gBAAAU,EAAC,UAAA,EAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM,OAAO,EAAE,MAAM,4BAAA,EAA4B,CAAG,GAC9E,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QAECR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAb,EAAM,cAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Range.js","sources":["../../../node_modules/debounce/index.js","../../../node_modules/react-use-measure/dist/web.js","../../../lib/molecules/Forms/Range.tsx"],"sourcesContent":["/**\n * Returns a function, that, as long as it continues to be invoked, will not\n * be triggered. The function will be called after it stops being called for\n * N milliseconds. If `immediate` is passed, trigger the function on the\n * leading edge, instead of the trailing. The function also has a property 'clear' \n * that is a function which will clear the timer to prevent previously scheduled executions. \n *\n * @source underscore.js\n * @see http://unscriptable.com/2009/03/20/debouncing-javascript-methods/\n * @param {Function} function to wrap\n * @param {Number} timeout in ms (`100`)\n * @param {Boolean} whether to execute at the beginning (`false`)\n * @api public\n */\nfunction debounce(func, wait, immediate){\n var timeout, args, context, timestamp, result;\n if (null == wait) wait = 100;\n\n function later() {\n var last = Date.now() - timestamp;\n\n if (last < wait && last >= 0) {\n timeout = setTimeout(later, wait - last);\n } else {\n timeout = null;\n if (!immediate) {\n result = func.apply(context, args);\n context = args = null;\n }\n }\n };\n\n var debounced = function(){\n context = this;\n args = arguments;\n timestamp = Date.now();\n var callNow = immediate && !timeout;\n if (!timeout) timeout = setTimeout(later, wait);\n if (callNow) {\n result = func.apply(context, args);\n context = args = null;\n }\n\n return result;\n };\n\n debounced.clear = function() {\n if (timeout) {\n clearTimeout(timeout);\n timeout = null;\n }\n };\n \n debounced.flush = function() {\n if (timeout) {\n result = func.apply(context, args);\n context = args = null;\n \n clearTimeout(timeout);\n timeout = null;\n }\n };\n\n return debounced;\n};\n\n// Adds compatibility for ES modules\ndebounce.debounce = debounce;\n\nmodule.exports = debounce;\n","import { useState, useRef, useEffect, useMemo } from 'react';\nimport createDebounce from 'debounce';\n\nfunction useMeasure(_temp) {\n let {\n debounce,\n scroll,\n polyfill,\n offsetSize\n } = _temp === void 0 ? {\n debounce: 0,\n scroll: false,\n offsetSize: false\n } : _temp;\n const ResizeObserver = polyfill || (typeof window === 'undefined' ? class ResizeObserver {} : window.ResizeObserver);\n\n if (!ResizeObserver) {\n throw new Error('This browser does not support ResizeObserver out of the box. See: https://github.com/react-spring/react-use-measure/#resize-observer-polyfills');\n }\n\n const [bounds, set] = useState({\n left: 0,\n top: 0,\n width: 0,\n height: 0,\n bottom: 0,\n right: 0,\n x: 0,\n y: 0\n }); // keep all state in a ref\n\n const state = useRef({\n element: null,\n scrollContainers: null,\n resizeObserver: null,\n lastBounds: bounds\n }); // set actual debounce values early, so effects know if they should react accordingly\n\n const scrollDebounce = debounce ? typeof debounce === 'number' ? debounce : debounce.scroll : null;\n const resizeDebounce = debounce ? typeof debounce === 'number' ? debounce : debounce.resize : null; // make sure to update state only as long as the component is truly mounted\n\n const mounted = useRef(false);\n useEffect(() => {\n mounted.current = true;\n return () => void (mounted.current = false);\n }); // memoize handlers, so event-listeners know when they should update\n\n const [forceRefresh, resizeChange, scrollChange] = useMemo(() => {\n const callback = () => {\n if (!state.current.element) return;\n const {\n left,\n top,\n width,\n height,\n bottom,\n right,\n x,\n y\n } = state.current.element.getBoundingClientRect();\n const size = {\n left,\n top,\n width,\n height,\n bottom,\n right,\n x,\n y\n };\n\n if (state.current.element instanceof HTMLElement && offsetSize) {\n size.height = state.current.element.offsetHeight;\n size.width = state.current.element.offsetWidth;\n }\n\n Object.freeze(size);\n if (mounted.current && !areBoundsEqual(state.current.lastBounds, size)) set(state.current.lastBounds = size);\n };\n\n return [callback, resizeDebounce ? createDebounce(callback, resizeDebounce) : callback, scrollDebounce ? createDebounce(callback, scrollDebounce) : callback];\n }, [set, offsetSize, scrollDebounce, resizeDebounce]); // cleanup current scroll-listeners / observers\n\n function removeListeners() {\n if (state.current.scrollContainers) {\n state.current.scrollContainers.forEach(element => element.removeEventListener('scroll', scrollChange, true));\n state.current.scrollContainers = null;\n }\n\n if (state.current.resizeObserver) {\n state.current.resizeObserver.disconnect();\n state.current.resizeObserver = null;\n }\n } // add scroll-listeners / observers\n\n\n function addListeners() {\n if (!state.current.element) return;\n state.current.resizeObserver = new ResizeObserver(scrollChange);\n state.current.resizeObserver.observe(state.current.element);\n\n if (scroll && state.current.scrollContainers) {\n state.current.scrollContainers.forEach(scrollContainer => scrollContainer.addEventListener('scroll', scrollChange, {\n capture: true,\n passive: true\n }));\n }\n } // the ref we expose to the user\n\n\n const ref = node => {\n if (!node || node === state.current.element) return;\n removeListeners();\n state.current.element = node;\n state.current.scrollContainers = findScrollContainers(node);\n addListeners();\n }; // add general event listeners\n\n\n useOnWindowScroll(scrollChange, Boolean(scroll));\n useOnWindowResize(resizeChange); // respond to changes that are relevant for the listeners\n\n useEffect(() => {\n removeListeners();\n addListeners();\n }, [scroll, scrollChange, resizeChange]); // remove all listeners when the components unmounts\n\n useEffect(() => removeListeners, []);\n return [ref, bounds, forceRefresh];\n} // Adds native resize listener to window\n\n\nfunction useOnWindowResize(onWindowResize) {\n useEffect(() => {\n const cb = onWindowResize;\n window.addEventListener('resize', cb);\n return () => void window.removeEventListener('resize', cb);\n }, [onWindowResize]);\n}\n\nfunction useOnWindowScroll(onScroll, enabled) {\n useEffect(() => {\n if (enabled) {\n const cb = onScroll;\n window.addEventListener('scroll', cb, {\n capture: true,\n passive: true\n });\n return () => void window.removeEventListener('scroll', cb, true);\n }\n }, [onScroll, enabled]);\n} // Returns a list of scroll offsets\n\n\nfunction findScrollContainers(element) {\n const result = [];\n if (!element || element === document.body) return result;\n const {\n overflow,\n overflowX,\n overflowY\n } = window.getComputedStyle(element);\n if ([overflow, overflowX, overflowY].some(prop => prop === 'auto' || prop === 'scroll')) result.push(element);\n return [...result, ...findScrollContainers(element.parentElement)];\n} // Checks if element boundaries are equal\n\n\nconst keys = ['x', 'y', 'top', 'bottom', 'left', 'right', 'width', 'height'];\n\nconst areBoundsEqual = (a, b) => keys.every(key => a[key] === b[key]);\n\nexport { useMeasure as default };\n","import { ResizeObserver } from '@juggle/resize-observer';\nimport classnames from 'classnames';\nimport {\n type ChangeEvent,\n type CSSProperties,\n type InputHTMLAttributes,\n useId,\n useState,\n} from 'react';\n\nimport useMeasure from 'react-use-measure';\nimport './range.css';\n\ninterface RangeProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n /**\n * Aria label\n * @default 'Range'\n * */\n ariaLabel?: string;\n /**\n * Additional class names\n * */\n className?: string;\n /**\n * Data test id\n * */\n dataTestId?: string;\n /**\n * Single cursor mode\n * @default false\n * */\n singleCursorMode?: boolean;\n /**\n * Min value\n * @default 0\n * */\n min?: number;\n /**\n * On change\n * */\n onChange?: (name: string, value: number[]) => void;\n /**\n * Options\n * @default []\n * */\n options: { value: number; label: string }[];\n}\n\nexport const Range = (props: RangeProps) => {\n const internalId = useId();\n\n const {\n ariaLabel,\n className,\n dataTestId = 'range',\n id = internalId,\n name = id,\n singleCursorMode = false,\n min = 0,\n options = [],\n step = 1,\n readOnly,\n disabled,\n onChange,\n ...rest\n } = props;\n\n const [valueA, setValueA] = useState(options.length - 1);\n const [valueB, setValueB] = useState(min);\n const [containerRef, { width }] = useMeasure({ polyfill: ResizeObserver });\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (!readOnly) {\n e.persist();\n const inputValue = Number(e.target.value);\n const inputId = e.target.id[e.target.id.length - 1];\n\n if (inputId === 'a') {\n setValueA(inputValue);\n } else {\n setValueB(inputValue);\n }\n\n onChange && onChange(name, [valueA, valueB]);\n }\n };\n\n return (\n <div\n style={\n {\n '--min': min,\n '--max': options.length - 1,\n '--inputWidth': `${width}px`,\n '--inputHeight': '4px',\n '--thumbWidth': '32px',\n '--usefulWidth': 'calc(var(--inputWidth) - var(--thumbWidth))',\n '--valueA': valueA,\n '--valueB': valueB,\n } as CSSProperties\n }\n className={classnames('relative w-full', className)}\n data-testid={dataTestId}\n data-name=\"Range\"\n ref={containerRef}\n >\n <div className=\"input-range-container\">\n <input\n {...rest}\n aria-label={ariaLabel}\n className=\"input-range\"\n id={`${id}-a`}\n max={options.length - 1}\n min={min}\n name={name}\n onChange={handleChange}\n disabled={disabled}\n step={step}\n type=\"range\"\n value={valueA}\n />\n {!singleCursorMode && (\n <input\n {...rest}\n aria-label={ariaLabel}\n className=\"input-range\"\n disabled={disabled}\n id={`${id}-b`}\n max={options.length - 1}\n min={min}\n name={name}\n onChange={handleChange}\n step={step}\n type=\"range\"\n value={valueB}\n />\n )}\n </div>\n <output\n htmlFor={`${id}-a`}\n style={{ '--value': valueA } as CSSProperties}\n className=\"input-range-output\"\n >\n {options[valueA].label}\n </output>\n {!singleCursorMode && (\n <output\n htmlFor={`${id}-b`}\n style={{ '--value': valueB } as CSSProperties}\n className=\"input-range-output\"\n >\n {options[valueB].label}\n </output>\n )}\n </div>\n );\n};\n"],"names":["debounce","func","wait","immediate","timeout","args","context","timestamp","result","later","last","debounced","callNow","debounce_1","useMeasure","_temp","scroll","polyfill","offsetSize","ResizeObserver","bounds","set","useState","state","useRef","scrollDebounce","resizeDebounce","mounted","useEffect","forceRefresh","resizeChange","scrollChange","useMemo","callback","left","top","width","height","bottom","right","x","y","size","areBoundsEqual","createDebounce","removeListeners","element","addListeners","scrollContainer","ref","node","findScrollContainers","useOnWindowScroll","useOnWindowResize","onWindowResize","cb","onScroll","enabled","overflow","overflowX","overflowY","prop","keys","a","b","key","Range","props","internalId","useId","ariaLabel","className","dataTestId","id","name","singleCursorMode","min","options","step","readOnly","disabled","onChange","rest","valueA","setValueA","valueB","setValueB","containerRef","handleChange","e","inputValue","jsxs","classnames","jsx"],"mappings":"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","x_google_ignoreList":[0,1]}
|
|
1
|
+
{"version":3,"file":"Range.js","sources":["../../../node_modules/debounce/index.js","../../../node_modules/react-use-measure/dist/web.js","../../../lib/molecules/Forms/Range.tsx"],"sourcesContent":["/**\n * Returns a function, that, as long as it continues to be invoked, will not\n * be triggered. The function will be called after it stops being called for\n * N milliseconds. If `immediate` is passed, trigger the function on the\n * leading edge, instead of the trailing. The function also has a property 'clear' \n * that is a function which will clear the timer to prevent previously scheduled executions. \n *\n * @source underscore.js\n * @see http://unscriptable.com/2009/03/20/debouncing-javascript-methods/\n * @param {Function} function to wrap\n * @param {Number} timeout in ms (`100`)\n * @param {Boolean} whether to execute at the beginning (`false`)\n * @api public\n */\nfunction debounce(func, wait, immediate){\n var timeout, args, context, timestamp, result;\n if (null == wait) wait = 100;\n\n function later() {\n var last = Date.now() - timestamp;\n\n if (last < wait && last >= 0) {\n timeout = setTimeout(later, wait - last);\n } else {\n timeout = null;\n if (!immediate) {\n result = func.apply(context, args);\n context = args = null;\n }\n }\n };\n\n var debounced = function(){\n context = this;\n args = arguments;\n timestamp = Date.now();\n var callNow = immediate && !timeout;\n if (!timeout) timeout = setTimeout(later, wait);\n if (callNow) {\n result = func.apply(context, args);\n context = args = null;\n }\n\n return result;\n };\n\n debounced.clear = function() {\n if (timeout) {\n clearTimeout(timeout);\n timeout = null;\n }\n };\n \n debounced.flush = function() {\n if (timeout) {\n result = func.apply(context, args);\n context = args = null;\n \n clearTimeout(timeout);\n timeout = null;\n }\n };\n\n return debounced;\n};\n\n// Adds compatibility for ES modules\ndebounce.debounce = debounce;\n\nmodule.exports = debounce;\n","import { useState, useRef, useEffect, useMemo } from 'react';\nimport createDebounce from 'debounce';\n\nfunction useMeasure(_temp) {\n let {\n debounce,\n scroll,\n polyfill,\n offsetSize\n } = _temp === void 0 ? {\n debounce: 0,\n scroll: false,\n offsetSize: false\n } : _temp;\n const ResizeObserver = polyfill || (typeof window === 'undefined' ? class ResizeObserver {} : window.ResizeObserver);\n\n if (!ResizeObserver) {\n throw new Error('This browser does not support ResizeObserver out of the box. See: https://github.com/react-spring/react-use-measure/#resize-observer-polyfills');\n }\n\n const [bounds, set] = useState({\n left: 0,\n top: 0,\n width: 0,\n height: 0,\n bottom: 0,\n right: 0,\n x: 0,\n y: 0\n }); // keep all state in a ref\n\n const state = useRef({\n element: null,\n scrollContainers: null,\n resizeObserver: null,\n lastBounds: bounds\n }); // set actual debounce values early, so effects know if they should react accordingly\n\n const scrollDebounce = debounce ? typeof debounce === 'number' ? debounce : debounce.scroll : null;\n const resizeDebounce = debounce ? typeof debounce === 'number' ? debounce : debounce.resize : null; // make sure to update state only as long as the component is truly mounted\n\n const mounted = useRef(false);\n useEffect(() => {\n mounted.current = true;\n return () => void (mounted.current = false);\n }); // memoize handlers, so event-listeners know when they should update\n\n const [forceRefresh, resizeChange, scrollChange] = useMemo(() => {\n const callback = () => {\n if (!state.current.element) return;\n const {\n left,\n top,\n width,\n height,\n bottom,\n right,\n x,\n y\n } = state.current.element.getBoundingClientRect();\n const size = {\n left,\n top,\n width,\n height,\n bottom,\n right,\n x,\n y\n };\n\n if (state.current.element instanceof HTMLElement && offsetSize) {\n size.height = state.current.element.offsetHeight;\n size.width = state.current.element.offsetWidth;\n }\n\n Object.freeze(size);\n if (mounted.current && !areBoundsEqual(state.current.lastBounds, size)) set(state.current.lastBounds = size);\n };\n\n return [callback, resizeDebounce ? createDebounce(callback, resizeDebounce) : callback, scrollDebounce ? createDebounce(callback, scrollDebounce) : callback];\n }, [set, offsetSize, scrollDebounce, resizeDebounce]); // cleanup current scroll-listeners / observers\n\n function removeListeners() {\n if (state.current.scrollContainers) {\n state.current.scrollContainers.forEach(element => element.removeEventListener('scroll', scrollChange, true));\n state.current.scrollContainers = null;\n }\n\n if (state.current.resizeObserver) {\n state.current.resizeObserver.disconnect();\n state.current.resizeObserver = null;\n }\n } // add scroll-listeners / observers\n\n\n function addListeners() {\n if (!state.current.element) return;\n state.current.resizeObserver = new ResizeObserver(scrollChange);\n state.current.resizeObserver.observe(state.current.element);\n\n if (scroll && state.current.scrollContainers) {\n state.current.scrollContainers.forEach(scrollContainer => scrollContainer.addEventListener('scroll', scrollChange, {\n capture: true,\n passive: true\n }));\n }\n } // the ref we expose to the user\n\n\n const ref = node => {\n if (!node || node === state.current.element) return;\n removeListeners();\n state.current.element = node;\n state.current.scrollContainers = findScrollContainers(node);\n addListeners();\n }; // add general event listeners\n\n\n useOnWindowScroll(scrollChange, Boolean(scroll));\n useOnWindowResize(resizeChange); // respond to changes that are relevant for the listeners\n\n useEffect(() => {\n removeListeners();\n addListeners();\n }, [scroll, scrollChange, resizeChange]); // remove all listeners when the components unmounts\n\n useEffect(() => removeListeners, []);\n return [ref, bounds, forceRefresh];\n} // Adds native resize listener to window\n\n\nfunction useOnWindowResize(onWindowResize) {\n useEffect(() => {\n const cb = onWindowResize;\n window.addEventListener('resize', cb);\n return () => void window.removeEventListener('resize', cb);\n }, [onWindowResize]);\n}\n\nfunction useOnWindowScroll(onScroll, enabled) {\n useEffect(() => {\n if (enabled) {\n const cb = onScroll;\n window.addEventListener('scroll', cb, {\n capture: true,\n passive: true\n });\n return () => void window.removeEventListener('scroll', cb, true);\n }\n }, [onScroll, enabled]);\n} // Returns a list of scroll offsets\n\n\nfunction findScrollContainers(element) {\n const result = [];\n if (!element || element === document.body) return result;\n const {\n overflow,\n overflowX,\n overflowY\n } = window.getComputedStyle(element);\n if ([overflow, overflowX, overflowY].some(prop => prop === 'auto' || prop === 'scroll')) result.push(element);\n return [...result, ...findScrollContainers(element.parentElement)];\n} // Checks if element boundaries are equal\n\n\nconst keys = ['x', 'y', 'top', 'bottom', 'left', 'right', 'width', 'height'];\n\nconst areBoundsEqual = (a, b) => keys.every(key => a[key] === b[key]);\n\nexport { useMeasure as default };\n","import { ResizeObserver } from '@juggle/resize-observer';\nimport classnames from 'classnames';\nimport {\n type ChangeEvent,\n type CSSProperties,\n type InputHTMLAttributes,\n useId,\n useState,\n} from 'react';\n\nimport useMeasure from 'react-use-measure';\nimport './range.css';\n\ninterface RangeProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n /**\n * Aria label\n * @default 'Range'\n * */\n ariaLabel?: string;\n /**\n * Additional class names\n * */\n className?: string;\n /**\n * Data test id\n * */\n dataTestId?: string;\n /**\n * Single cursor mode\n * @default false\n * */\n singleCursorMode?: boolean;\n /**\n * Min value\n * @default 0\n * */\n min?: number;\n /**\n * On change\n * */\n onChange?: (name: string, value: number[]) => void;\n /**\n * Options\n * @default []\n * */\n options: { value: number; label: string }[];\n}\n\nexport const Range = (props: RangeProps) => {\n const internalId = useId();\n\n const {\n ariaLabel,\n className,\n dataTestId = 'range',\n id = internalId,\n name = id,\n singleCursorMode = false,\n min = 0,\n options = [],\n step = 1,\n readOnly,\n disabled,\n onChange,\n ...rest\n } = props;\n\n const [valueA, setValueA] = useState(options.length - 1);\n const [valueB, setValueB] = useState(min);\n const [containerRef, { width }] = useMeasure({ polyfill: ResizeObserver });\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (!readOnly) {\n e.persist();\n const inputValue = Number(e.target.value);\n const inputId = e.target.id[e.target.id.length - 1];\n\n if (inputId === 'a') {\n setValueA(inputValue);\n } else {\n setValueB(inputValue);\n }\n\n if (onChange) {\n onChange(name, [valueA, valueB]);\n }\n }\n };\n\n return (\n <div\n style={\n {\n '--min': min,\n '--max': options.length - 1,\n '--inputWidth': `${width}px`,\n '--inputHeight': '4px',\n '--thumbWidth': '32px',\n '--usefulWidth': 'calc(var(--inputWidth) - var(--thumbWidth))',\n '--valueA': valueA,\n '--valueB': valueB,\n } as CSSProperties\n }\n className={classnames('relative w-full', className)}\n data-testid={dataTestId}\n data-name=\"Range\"\n ref={containerRef}\n >\n <div className=\"input-range-container\">\n <input\n {...rest}\n aria-label={ariaLabel}\n className=\"input-range\"\n id={`${id}-a`}\n max={options.length - 1}\n min={min}\n name={name}\n onChange={handleChange}\n disabled={disabled}\n step={step}\n type=\"range\"\n value={valueA}\n />\n {!singleCursorMode && (\n <input\n {...rest}\n aria-label={ariaLabel}\n className=\"input-range\"\n disabled={disabled}\n id={`${id}-b`}\n max={options.length - 1}\n min={min}\n name={name}\n onChange={handleChange}\n step={step}\n type=\"range\"\n value={valueB}\n />\n )}\n </div>\n <output\n htmlFor={`${id}-a`}\n style={{ '--value': valueA } as CSSProperties}\n className=\"input-range-output\"\n >\n {options[valueA].label}\n </output>\n {!singleCursorMode && (\n <output\n htmlFor={`${id}-b`}\n style={{ '--value': valueB } as CSSProperties}\n className=\"input-range-output\"\n >\n {options[valueB].label}\n </output>\n )}\n </div>\n );\n};\n"],"names":["debounce","func","wait","immediate","timeout","args","context","timestamp","result","later","last","debounced","callNow","debounce_1","useMeasure","_temp","scroll","polyfill","offsetSize","ResizeObserver","bounds","set","useState","state","useRef","scrollDebounce","resizeDebounce","mounted","useEffect","forceRefresh","resizeChange","scrollChange","useMemo","callback","left","top","width","height","bottom","right","x","y","size","areBoundsEqual","createDebounce","removeListeners","element","addListeners","scrollContainer","ref","node","findScrollContainers","useOnWindowScroll","useOnWindowResize","onWindowResize","cb","onScroll","enabled","overflow","overflowX","overflowY","prop","keys","a","b","key","Range","props","internalId","useId","ariaLabel","className","dataTestId","id","name","singleCursorMode","min","options","step","readOnly","disabled","onChange","rest","valueA","setValueA","valueB","setValueB","containerRef","handleChange","e","inputValue","jsxs","classnames","jsx"],"mappings":"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","x_google_ignoreList":[0,1]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs as c, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { c as
|
|
3
|
-
import { useValue as
|
|
2
|
+
import { c as f } from "../../chunks/index.js";
|
|
3
|
+
import { useValue as x } from "../../hooks/useValue.js";
|
|
4
4
|
/* empty css */
|
|
5
5
|
import { useId as w } from "react";
|
|
6
6
|
function C(s) {
|
|
@@ -14,7 +14,7 @@ function C(s) {
|
|
|
14
14
|
onChange: d,
|
|
15
15
|
tabIndex: m = 0,
|
|
16
16
|
children: p
|
|
17
|
-
} = s, { value: r, setValue: u } =
|
|
17
|
+
} = s, { value: r, setValue: u } = x({
|
|
18
18
|
initialValue: h,
|
|
19
19
|
name: a,
|
|
20
20
|
onChange: d
|
|
@@ -22,7 +22,7 @@ function C(s) {
|
|
|
22
22
|
return /* @__PURE__ */ c(
|
|
23
23
|
"label",
|
|
24
24
|
{
|
|
25
|
-
className:
|
|
25
|
+
className: f(i, "relative flex items-center gap-[10px]", {
|
|
26
26
|
"text-b2": !i?.includes("text-"),
|
|
27
27
|
"font-semibold": !i?.includes("font-"),
|
|
28
28
|
"text-grey": t,
|
|
@@ -42,7 +42,7 @@ function C(s) {
|
|
|
42
42
|
role: "switch",
|
|
43
43
|
className: "absolute w-full h-full opacity-0 cursor-pointer",
|
|
44
44
|
onChange: () => {
|
|
45
|
-
|
|
45
|
+
t || u(!r);
|
|
46
46
|
},
|
|
47
47
|
"data-name": "Switch"
|
|
48
48
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sources":["../../../lib/molecules/Forms/Switch.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useValue } from '@/hooks/useValue.js';\nimport './controls.css';\nimport type { FormControlProps } from './FormControl.js';\nimport { useId } from 'react';\n\nexport interface SwitchProps extends FormControlProps<boolean> {\n width?: number;\n}\n\nexport function Switch(props: SwitchProps) {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n className,\n checked: initialChecked,\n disabled,\n width = 56,\n onChange,\n tabIndex = 0,\n children,\n } = props;\n\n const { value: checked, setValue } = useValue<boolean>({\n initialValue: initialChecked,\n name,\n onChange,\n });\n\n return (\n <label\n className={classnames(className, 'relative flex items-center gap-[10px]', {\n 'text-b2': !className?.includes('text-'),\n 'font-semibold': !className?.includes('font-'),\n 'text-grey': disabled,\n 'cursor-pointer': !disabled,\n })}\n data-testid=\"SwitchContainer\"\n >\n <span className=\"relative\">\n <input\n type=\"checkbox\"\n name={name}\n tabIndex={tabIndex}\n checked={checked}\n disabled={disabled}\n role=\"switch\"\n className=\"absolute w-full h-full opacity-0 cursor-pointer\"\n onChange={() => {\n !disabled
|
|
1
|
+
{"version":3,"file":"Switch.js","sources":["../../../lib/molecules/Forms/Switch.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useValue } from '@/hooks/useValue.js';\nimport './controls.css';\nimport type { FormControlProps } from './FormControl.js';\nimport { useId } from 'react';\n\nexport interface SwitchProps extends FormControlProps<boolean> {\n width?: number;\n}\n\nexport function Switch(props: SwitchProps) {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n className,\n checked: initialChecked,\n disabled,\n width = 56,\n onChange,\n tabIndex = 0,\n children,\n } = props;\n\n const { value: checked, setValue } = useValue<boolean>({\n initialValue: initialChecked,\n name,\n onChange,\n });\n\n return (\n <label\n className={classnames(className, 'relative flex items-center gap-[10px]', {\n 'text-b2': !className?.includes('text-'),\n 'font-semibold': !className?.includes('font-'),\n 'text-grey': disabled,\n 'cursor-pointer': !disabled,\n })}\n data-testid=\"SwitchContainer\"\n >\n <span className=\"relative\">\n <input\n type=\"checkbox\"\n name={name}\n tabIndex={tabIndex}\n checked={checked}\n disabled={disabled}\n role=\"switch\"\n className=\"absolute w-full h-full opacity-0 cursor-pointer\"\n onChange={() => {\n if (!disabled) {\n setValue(!checked);\n }\n }}\n data-name=\"Switch\"\n />\n\n <span style={{ height: (width * 4) / 7, width }}>\n <svg viewBox=\"0 0 24 24\" width={(width * 3) / 7}>\n <g>\n <circle cx={12} cy={12} r={12} fill=\"hsl(var(--color-white))\" />\n <circle cx={12} cy={12} r={4} fill=\"hsl(var(--color-grey))\" />\n </g>\n </svg>\n </span>\n </span>\n\n <span>{children}</span>\n </label>\n );\n}\n"],"names":["Switch","props","internalId","useId","id","name","className","initialChecked","disabled","width","onChange","tabIndex","children","checked","setValue","useValue","jsxs","classnames","jsx"],"mappings":";;;;;AAUO,SAASA,EAAOC,GAAoB;AACzC,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,SAASC;AAAA,IACT,UAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,EAAA,IACEX,GAEE,EAAE,OAAOY,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,cAAcR;AAAA,IACd,MAAAF;AAAA,IACA,UAAAK;AAAA,EAAA,CACD;AAED,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAWX,GAAW,yCAAyC;AAAA,QACxE,WAAW,CAACA,GAAW,SAAS,OAAO;AAAA,QACvC,iBAAiB,CAACA,GAAW,SAAS,OAAO;AAAA,QAC7C,aAAaE;AAAA,QACb,kBAAkB,CAACA;AAAA,MAAA,CACpB;AAAA,MACD,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAU,YACd,UAAA;AAAA,UAAA,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAAb;AAAA,cACA,UAAAM;AAAA,cACA,SAAAE;AAAA,cACA,UAAAL;AAAA,cACA,MAAK;AAAA,cACL,WAAU;AAAA,cACV,UAAU,MAAM;AACd,gBAAKA,KACHM,EAAS,CAACD,CAAO;AAAA,cAErB;AAAA,cACA,aAAU;AAAA,YAAA;AAAA,UAAA;AAAA,4BAGX,QAAA,EAAK,OAAO,EAAE,QAASJ,IAAQ,IAAK,GAAG,OAAAA,EAAA,GACtC,UAAA,gBAAAS,EAAC,OAAA,EAAI,SAAQ,aAAY,OAAQT,IAAQ,IAAK,GAC5C,4BAAC,KAAA,EACC,UAAA;AAAA,YAAA,gBAAAS,EAAC,UAAA,EAAO,IAAI,IAAI,IAAI,IAAI,GAAG,IAAI,MAAK,0BAAA,CAA0B;AAAA,YAC9D,gBAAAA,EAAC,YAAO,IAAI,IAAI,IAAI,IAAI,GAAG,GAAG,MAAK,yBAAA,CAAyB;AAAA,UAAA,EAAA,CAC9D,GACF,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QAEA,gBAAAA,EAAC,UAAM,UAAAN,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtB;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@clubmed/trident-ui",
|
|
3
|
-
"version": "1.3.1-beta.
|
|
3
|
+
"version": "1.3.1-beta.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Shared ClubMed React UI components",
|
|
6
6
|
"keywords": [
|
|
@@ -102,6 +102,7 @@
|
|
|
102
102
|
"dev": "storybook dev -p 6006",
|
|
103
103
|
"build": "vite build && npm run build:exports",
|
|
104
104
|
"build:storybook": "storybook build",
|
|
105
|
+
"build-storybook": "storybook build",
|
|
105
106
|
"lint": "eslint . --report-unused-disable-directives",
|
|
106
107
|
"lint:fix": "eslint . --fix",
|
|
107
108
|
"prettier:write": "prettier . --write --ignore-unknown",
|
|
@@ -109,7 +110,8 @@
|
|
|
109
110
|
"test:dev": "vitest watch",
|
|
110
111
|
"test:update": "vitest -u",
|
|
111
112
|
"prepare": "husky",
|
|
112
|
-
"build:exports": "NODE_NO_WARNINGS=1 node --loader ts-node/esm tools/exports-builder/index.ts"
|
|
113
|
+
"build:exports": "NODE_NO_WARNINGS=1 node --loader ts-node/esm tools/exports-builder/index.ts",
|
|
114
|
+
"chromatic": "chromatic"
|
|
113
115
|
},
|
|
114
116
|
"dependencies": {
|
|
115
117
|
"@juggle/resize-observer": "^3.4.0",
|
|
@@ -123,18 +125,19 @@
|
|
|
123
125
|
"use-resize-observer": "^9.1.0"
|
|
124
126
|
},
|
|
125
127
|
"devDependencies": {
|
|
128
|
+
"@chromatic-com/storybook": "^4.1.1",
|
|
126
129
|
"@clubmed/trident-icons": ">=1.3.3",
|
|
127
130
|
"@commitlint/cli": "18.6.1",
|
|
128
131
|
"@commitlint/config-conventional": "18.6.2",
|
|
129
132
|
"@netsells/storybook-mockdate": "0.3.3",
|
|
130
133
|
"@react-spring/web": "^9.7.3",
|
|
131
|
-
"@storybook/addon-a11y": "9.1.
|
|
132
|
-
"@storybook/addon-docs": "9.1.
|
|
133
|
-
"@storybook/addon-links": "9.1.
|
|
134
|
-
"@storybook/addon-onboarding": "9.1.
|
|
135
|
-
"@storybook/addon-themes": "9.1.
|
|
136
|
-
"@storybook/addon-vitest": "
|
|
137
|
-
"@storybook/react-vite": "9.1.
|
|
134
|
+
"@storybook/addon-a11y": "9.1.7",
|
|
135
|
+
"@storybook/addon-docs": "9.1.7",
|
|
136
|
+
"@storybook/addon-links": "9.1.7",
|
|
137
|
+
"@storybook/addon-onboarding": "9.1.7",
|
|
138
|
+
"@storybook/addon-themes": "9.1.7",
|
|
139
|
+
"@storybook/addon-vitest": "9.1.7",
|
|
140
|
+
"@storybook/react-vite": "9.1.7",
|
|
138
141
|
"@svgr/rollup": "8.1.0",
|
|
139
142
|
"@testing-library/jest-dom": "^6.3.0",
|
|
140
143
|
"@testing-library/react": "^14.1.2",
|
|
@@ -144,11 +147,12 @@
|
|
|
144
147
|
"@types/lodash": "^4.17.20",
|
|
145
148
|
"@types/react": "^18.2.48",
|
|
146
149
|
"@types/react-dom": "^18.2.18",
|
|
147
|
-
"@typescript-eslint/eslint-plugin": "
|
|
148
|
-
"@typescript-eslint/parser": "
|
|
150
|
+
"@typescript-eslint/eslint-plugin": "8.45.0",
|
|
151
|
+
"@typescript-eslint/parser": "8.45.0",
|
|
149
152
|
"@vitejs/plugin-react-swc": "^4.0.0",
|
|
150
153
|
"@vitest/browser": "3.2.4",
|
|
151
154
|
"@vitest/coverage-v8": "3.2.4",
|
|
155
|
+
"chromatic": "^13.2.1",
|
|
152
156
|
"add": "^2.0.6",
|
|
153
157
|
"autoprefixer": "^10.4.17",
|
|
154
158
|
"change-case": "^5.4.3",
|
|
@@ -158,7 +162,7 @@
|
|
|
158
162
|
"eslint-plugin-prettier": "5.1.3",
|
|
159
163
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
160
164
|
"eslint-plugin-react-refresh": "^0.4.5",
|
|
161
|
-
"eslint-plugin-storybook": "
|
|
165
|
+
"eslint-plugin-storybook": "9.1.7",
|
|
162
166
|
"figures": "^6.1.0",
|
|
163
167
|
"fs-extra": "^11.2.0",
|
|
164
168
|
"globby": "^14.0.1",
|
|
@@ -174,7 +178,7 @@
|
|
|
174
178
|
"react-dom": "^18.2.0",
|
|
175
179
|
"react-syntax-highlighter": "^15.5.0",
|
|
176
180
|
"rollup-preserve-directives": "^1.1.1",
|
|
177
|
-
"storybook": "9.1.
|
|
181
|
+
"storybook": "9.1.7",
|
|
178
182
|
"svgtofont": "^4.2.0",
|
|
179
183
|
"tailwindcss": "^3.3.5",
|
|
180
184
|
"ts-node": "^10.9.2",
|