@clubmed/trident-ui 2.0.0-beta.53 → 2.0.0-beta.54
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 +1 -1
- package/ui/forms/TextField.js +16 -6
- package/ui/forms/TextField.js.map +1 -1
package/package.json
CHANGED
package/ui/forms/TextField.js
CHANGED
|
@@ -39,7 +39,7 @@ var c = (c) => {
|
|
|
39
39
|
onChange: (e) => j(e.target.value, e.nativeEvent),
|
|
40
40
|
style: {
|
|
41
41
|
"--nbIconsStart": Number(!!g && E),
|
|
42
|
-
"--nbIconsEnd": Number(!!g && !E) + Number(N ||
|
|
42
|
+
"--nbIconsEnd": Number(!!g && !E) + Number(w && !N || N && M !== "error") + Number(M === "error" || M === "success")
|
|
43
43
|
},
|
|
44
44
|
className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none ps-[calc(20px+var(--nbIconsStart)*32px)] pe-[calc(20px+var(--nbIconsEnd)*32px)]", {
|
|
45
45
|
"border-middleGrey focus:border-black active:border-black": M === "default",
|
|
@@ -61,23 +61,33 @@ var c = (c) => {
|
|
|
61
61
|
}), /* @__PURE__ */ s("span", {
|
|
62
62
|
className: "ms-auto flex gap-x-8",
|
|
63
63
|
children: [
|
|
64
|
-
M === "error" && /* @__PURE__ */ o(
|
|
64
|
+
M === "error" && (N ? /* @__PURE__ */ o("button", {
|
|
65
|
+
className: "pointer-events-auto cursor-pointer flex",
|
|
66
|
+
onClick: (e) => j("", e.nativeEvent),
|
|
67
|
+
"aria-label": T,
|
|
68
|
+
type: "reset",
|
|
69
|
+
children: /* @__PURE__ */ o(a, {
|
|
70
|
+
name: "CrossDefault",
|
|
71
|
+
width: "24px",
|
|
72
|
+
type: _
|
|
73
|
+
})
|
|
74
|
+
}) : /* @__PURE__ */ o(a, {
|
|
65
75
|
name: "CrossDefault",
|
|
66
76
|
width: "24px",
|
|
67
77
|
type: _
|
|
68
|
-
}),
|
|
78
|
+
})),
|
|
69
79
|
M === "success" && /* @__PURE__ */ o(a, {
|
|
70
80
|
name: "CheckDefault",
|
|
71
81
|
width: "24px",
|
|
72
82
|
type: _
|
|
73
83
|
}),
|
|
74
|
-
(w || N) && (N ? /* @__PURE__ */ o("button", {
|
|
75
|
-
className: "pointer-events-auto flex",
|
|
84
|
+
(w || N && M !== "error") && (N ? /* @__PURE__ */ o("button", {
|
|
85
|
+
className: "pointer-events-auto cursor-pointer flex",
|
|
76
86
|
onClick: (e) => j("", e.nativeEvent),
|
|
77
87
|
"aria-label": T,
|
|
78
88
|
type: "reset",
|
|
79
89
|
children: /* @__PURE__ */ o(a, {
|
|
80
|
-
name: "
|
|
90
|
+
name: "CrossDefault",
|
|
81
91
|
className: "text-black",
|
|
82
92
|
width: "24px"
|
|
83
93
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.js","names":[],"sources":["../../../lib/ui/forms/TextField.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useValue, type UseValueProps } from '../hooks/useValue';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { useId } from 'react';\n\nexport interface TextFieldProps<Value> extends FormControlProps<Value> {\n description?: string;\n icon?: IconicNames;\n iconType?: IconicTypes;\n errorMessage?: string;\n dataTestId?: string;\n formatter?: UseValueProps<Value>['formatter'];\n hasDropdown?: boolean;\n clear?: string;\n iconFirst?: boolean;\n}\n\nexport const TextField = <Value = string,>(props: TextFieldProps<Value>) => {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n label,\n value: initialValue,\n description,\n validationStatus = 'default',\n icon,\n iconType,\n errorMessage,\n disabled = false,\n required = false,\n hideRequiredStar,\n className,\n dataTestId = 'TextField',\n hasDropdown = false,\n clear = '',\n iconFirst = true,\n onChange,\n formatter,\n ...rest\n } = props;\n\n const { value, setValue } = useValue<Value>({ initialValue, onChange, formatter });\n const internalStatus = useInternalStatus({\n isDisabled: disabled,\n validationStatus,\n });\n\n const shouldDisplayClearButton =\n !disabled && value !== '' && value !== null && value !== undefined && !!clear;\n\n return (\n <FormControl\n id={id}\n label={label}\n className={className}\n description={description}\n dataName=\"TextField\"\n dataTestId={dataTestId}\n disabled={disabled}\n required={required}\n hideRequiredStar={hideRequiredStar}\n validationStatus={validationStatus}\n errorMessage={errorMessage}\n >\n <div className=\"relative\">\n <input\n {...rest}\n id={id}\n name={name}\n disabled={disabled}\n required={required}\n value={value as any}\n onChange={(e) => setValue(e.target.value as Value, e.nativeEvent)}\n style={\n {\n '--nbIconsStart': Number(!!icon && iconFirst),\n '--nbIconsEnd':\n Number(!!icon && !iconFirst) +\n Number(shouldDisplayClearButton
|
|
1
|
+
{"version":3,"file":"TextField.js","names":[],"sources":["../../../lib/ui/forms/TextField.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useValue, type UseValueProps } from '../hooks/useValue';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { useId } from 'react';\n\nexport interface TextFieldProps<Value> extends FormControlProps<Value> {\n description?: string;\n icon?: IconicNames;\n iconType?: IconicTypes;\n errorMessage?: string;\n dataTestId?: string;\n formatter?: UseValueProps<Value>['formatter'];\n hasDropdown?: boolean;\n clear?: string;\n iconFirst?: boolean;\n}\n\nexport const TextField = <Value = string,>(props: TextFieldProps<Value>) => {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n label,\n value: initialValue,\n description,\n validationStatus = 'default',\n icon,\n iconType,\n errorMessage,\n disabled = false,\n required = false,\n hideRequiredStar,\n className,\n dataTestId = 'TextField',\n hasDropdown = false,\n clear = '',\n iconFirst = true,\n onChange,\n formatter,\n ...rest\n } = props;\n\n const { value, setValue } = useValue<Value>({ initialValue, onChange, formatter });\n const internalStatus = useInternalStatus({\n isDisabled: disabled,\n validationStatus,\n });\n\n const shouldDisplayClearButton =\n !disabled && value !== '' && value !== null && value !== undefined && !!clear;\n\n return (\n <FormControl\n id={id}\n label={label}\n className={className}\n description={description}\n dataName=\"TextField\"\n dataTestId={dataTestId}\n disabled={disabled}\n required={required}\n hideRequiredStar={hideRequiredStar}\n validationStatus={validationStatus}\n errorMessage={errorMessage}\n >\n <div className=\"relative\">\n <input\n {...rest}\n id={id}\n name={name}\n disabled={disabled}\n required={required}\n value={value as any}\n onChange={(e) => setValue(e.target.value as Value, e.nativeEvent)}\n style={\n {\n '--nbIconsStart': Number(!!icon && iconFirst),\n '--nbIconsEnd':\n Number(!!icon && !iconFirst) +\n Number(\n (hasDropdown && !shouldDisplayClearButton) ||\n (shouldDisplayClearButton && internalStatus !== 'error'),\n ) +\n Number(internalStatus === 'error' || internalStatus === 'success'),\n } as React.CSSProperties\n }\n className={clsx(\n 'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none ps-[calc(20px+var(--nbIconsStart)*32px)] pe-[calc(20px+var(--nbIconsEnd)*32px)]',\n {\n 'border-middleGrey focus:border-black active:border-black':\n internalStatus === 'default',\n 'bg-white text-black': internalStatus !== 'disabled',\n 'bg-pearl border-middleGrey': internalStatus === 'disabled',\n 'border-red': internalStatus === 'error',\n 'border-green': internalStatus === 'success',\n },\n )}\n aria-label={name}\n />\n\n <div\n className={clsx(\n 'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n {\n 'text-grey': internalStatus === 'disabled',\n 'text-red': internalStatus === 'error',\n 'text-green': internalStatus === 'success',\n },\n )}\n >\n {icon && iconFirst && <Icon name={icon} width=\"24px\" />}\n\n <span className=\"ms-auto flex gap-x-8\">\n {internalStatus === 'error' &&\n (shouldDisplayClearButton ? (\n <button\n className=\"pointer-events-auto cursor-pointer flex\"\n onClick={(e) => setValue('' as Value, e.nativeEvent)}\n aria-label={clear}\n type=\"reset\"\n >\n <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n </button>\n ) : (\n <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n ))}\n\n {internalStatus === 'success' && (\n <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n )}\n {(hasDropdown || (shouldDisplayClearButton && internalStatus !== 'error')) &&\n (shouldDisplayClearButton ? (\n <button\n className=\"pointer-events-auto cursor-pointer flex\"\n onClick={(e) => setValue('' as Value, e.nativeEvent)}\n aria-label={clear}\n type=\"reset\"\n >\n <Icon name=\"CrossDefault\" className=\"text-black\" width=\"24px\" />\n </button>\n ) : (\n <Icon name=\"ArrowDefaultDown\" className=\"text-black\" width=\"24px\" />\n ))}\n {!iconFirst && icon && <Icon name={icon} width=\"24px\" />}\n </span>\n </div>\n </div>\n </FormControl>\n );\n};\n"],"mappings":";;;;;;;;AAmBA,IAAa,KAA8B,MAAiC;CAC1E,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,UACA,OAAO,GACP,gBACA,sBAAmB,WACnB,SACA,aACA,iBACA,cAAW,IACX,cAAW,IACX,qBACA,cACA,gBAAa,aACb,iBAAc,IACd,WAAQ,IACR,eAAY,IACZ,aACA,cACA,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAAgB;EAAE;EAAc;EAAU;EAAW,CAAC,EAC5E,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC,EAEI,IACJ,CAAC,KAAY,MAAU,MAAM,KAAU,QAA+B,CAAC,CAAC;AAE1E,QACE,kBAAC,GAAD;EACM;EACG;EACI;EACE;EACb,UAAS;EACG;EACF;EACA;EACQ;EACA;EACJ;YAEd,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,SAAD;IACE,GAAI;IACA;IACE;IACI;IACA;IACH;IACP,WAAW,MAAM,EAAS,EAAE,OAAO,OAAgB,EAAE,YAAY;IACjE,OACE;KACE,kBAAkB,OAAO,CAAC,CAAC,KAAQ,EAAU;KAC7C,gBACE,OAAO,CAAC,CAAC,KAAQ,CAAC,EAAU,GAC5B,OACG,KAAe,CAAC,KACd,KAA4B,MAAmB,QACnD,GACD,OAAO,MAAmB,WAAW,MAAmB,UAAU;KACrE;IAEH,WAAW,EACT,2KACA;KACE,4DACE,MAAmB;KACrB,uBAAuB,MAAmB;KAC1C,8BAA8B,MAAmB;KACjD,cAAc,MAAmB;KACjC,gBAAgB,MAAmB;KACpC,CACF;IACD,cAAY;IACZ,CAAA,EAEF,kBAAC,OAAD;IACE,WAAW,EACT,sFACA;KACE,aAAa,MAAmB;KAChC,YAAY,MAAmB;KAC/B,cAAc,MAAmB;KAClC,CACF;cARH,CAUG,KAAQ,KAAa,kBAAC,GAAD;KAAM,MAAM;KAAM,OAAM;KAAS,CAAA,EAEvD,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,MAAmB,YACjB,IACC,kBAAC,UAAD;OACE,WAAU;OACV,UAAU,MAAM,EAAS,IAAa,EAAE,YAAY;OACpD,cAAY;OACZ,MAAK;iBAEL,kBAAC,GAAD;QAAM,MAAK;QAAe,OAAM;QAAO,MAAM;QAAY,CAAA;OAClD,CAAA,GAET,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;MAG5D,MAAmB,aAClB,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;OAEzD,KAAgB,KAA4B,MAAmB,aAC9D,IACC,kBAAC,UAAD;OACE,WAAU;OACV,UAAU,MAAM,EAAS,IAAa,EAAE,YAAY;OACpD,cAAY;OACZ,MAAK;iBAEL,kBAAC,GAAD;QAAM,MAAK;QAAe,WAAU;QAAa,OAAM;QAAS,CAAA;OACzD,CAAA,GAET,kBAAC,GAAD;OAAM,MAAK;OAAmB,WAAU;OAAa,OAAM;OAAS,CAAA;MAEvE,CAAC,KAAa,KAAQ,kBAAC,GAAD;OAAM,MAAM;OAAM,OAAM;OAAS,CAAA;MACnD;OACH;MACF;;EACM,CAAA"}
|