@bi-digital/react 0.0.0-experimental-510f80a → 0.0.0-experimental-426d58d
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/{checkbox-CXVZj5Vv.js → checkbox-CxA8UXr6.js} +2 -1
- package/dist/{checkbox-CXVZj5Vv.js.map → checkbox-CxA8UXr6.js.map} +1 -1
- package/dist/components/checkbox/checkbox.js +1 -1
- package/dist/components/checkbox/index.js +1 -1
- package/dist/components/index.js +4 -4
- package/dist/components/radio/index.js +1 -1
- package/dist/components/radio/radio.js +1 -1
- package/dist/components/search/index.js +1 -1
- package/dist/components/search/search.js +1 -1
- package/dist/components/textfield/index.js +1 -1
- package/dist/components/textfield/textfield.js +1 -1
- package/dist/main.js +4 -4
- package/dist/{radio-ulWuU7RE.js → radio-Cn3PqpMt.js} +2 -1
- package/dist/{radio-ulWuU7RE.js.map → radio-Cn3PqpMt.js.map} +1 -1
- package/dist/{search-Cqnboh3z.js → search-CdV5su_L.js} +2 -1
- package/dist/{search-Cqnboh3z.js.map → search-CdV5su_L.js.map} +1 -1
- package/dist/{textfield-D9Ssbb43.js → textfield-CdqVq5R0.js} +3 -1
- package/dist/{textfield-D9Ssbb43.js.map → textfield-CdqVq5R0.js.map} +1 -1
- package/package.json +4 -4
|
@@ -35,6 +35,7 @@ const Checkbox = ({ dark, label, description, error, fullwidth, style, className
|
|
|
35
35
|
ref: refs,
|
|
36
36
|
"aria-invalid": error || void 0,
|
|
37
37
|
"aria-describedby": ariaDescribedBy,
|
|
38
|
+
dark,
|
|
38
39
|
...props
|
|
39
40
|
}),
|
|
40
41
|
label && /* @__PURE__ */ jsx(Label, {
|
|
@@ -54,4 +55,4 @@ const Checkbox = ({ dark, label, description, error, fullwidth, style, className
|
|
|
54
55
|
|
|
55
56
|
//#endregion
|
|
56
57
|
export { Checkbox };
|
|
57
|
-
//# sourceMappingURL=checkbox-
|
|
58
|
+
//# sourceMappingURL=checkbox-CxA8UXr6.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox-
|
|
1
|
+
{"version":3,"file":"checkbox-CxA8UXr6.js","names":["input: HTMLInputElement | null"],"sources":["../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { useEffect, useId, useRef, type ReactNode, type Ref } from 'react';\n\nimport type { LabelRequiredProps } from '../../types';\nimport type { MergeRight } from '../../utilities';\nimport { Field, FieldDescription } from '../field';\nimport { Input, type InputProps } from '../input';\nimport { Label } from '../label';\nimport { useMergeRefs } from '../../utilities/hooks';\n\nexport type CheckboxProps = MergeRight<\n LabelRequiredProps & Omit<InputProps, 'type' | 'role' | 'size'>,\n {\n /** Label */\n label?: ReactNode;\n /** Description */\n description?: ReactNode;\n /** Add error indication to the checkbox. */\n error?: boolean;\n /** Specify whether the Checkbox is indeterminate */\n indeterminate?: boolean;\n /** If true, the checkbox will take up the full width of the container, and not just \"fit-content\" which is default */\n fullwidth?: boolean;\n ref?: Ref<HTMLInputElement>;\n }\n>;\n\nexport const Checkbox = ({\n dark,\n label,\n description,\n error,\n fullwidth,\n style,\n className,\n indeterminate,\n ref,\n id,\n 'aria-describedby': ariaDescribedByProp,\n ...props\n}: CheckboxProps) => {\n const checkRef = useRef<HTMLInputElement>(null);\n const refs = useMergeRefs([checkRef, ref]);\n const descriptionId = useId();\n\n useEffect(() => {\n let input: HTMLInputElement | null;\n if (ref && typeof ref !== 'function') {\n input = ref.current;\n } else {\n input = checkRef.current;\n }\n\n if (input) {\n input.indeterminate = indeterminate || false;\n }\n }, [indeterminate, checkRef, ref]);\n\n const ariaDescribedBy = [description ? descriptionId : '', ariaDescribedByProp].join(' ').trim() || undefined;\n\n return (\n <Field className={className} data-dark={dark} style={style} fullwidth={fullwidth} asChild>\n <label>\n <Input\n type='checkbox'\n id={id}\n ref={refs}\n aria-invalid={error || undefined}\n aria-describedby={ariaDescribedBy}\n dark={dark}\n {...props}\n />\n {label && (\n <Label weight='medium' htmlFor={id} asChild>\n <span>{label}</span>\n </Label>\n )}\n {description && (\n // Aria-hidden is used to prevent screen readers from reading the description twice:\n // once as part of the label and once from being connected through aria-describedby.\n <FieldDescription aria-hidden='true' id={descriptionId}>\n {description}\n </FieldDescription>\n )}\n </label>\n </Field>\n );\n};\n"],"mappings":";;;;;;;;;AA0BA,MAAa,WAAW,CAAC,EACvB,MACA,OACA,aACA,OACA,WACA,OACA,WACA,eACA,KACA,IACA,oBAAoB,oBACpB,GAAG,OACW,KAAK;CACnB,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,OAAO,aAAa,CAAC,UAAU,GAAI,EAAC;CAC1C,MAAM,gBAAgB,OAAO;AAE7B,WAAU,MAAM;EACd,IAAIA;AACJ,MAAI,cAAc,QAAQ,WACxB,SAAQ,IAAI;MAEZ,SAAQ,SAAS;AAGnB,MAAI,MACF,OAAM,gBAAgB,iBAAiB;CAE1C,GAAE;EAAC;EAAe;EAAU;CAAI,EAAC;CAElC,MAAM,kBAAkB,CAAC,cAAc,gBAAgB,IAAI,mBAAoB,EAAC,KAAK,IAAI,CAAC,MAAM;AAEhG,wBACE,IAAC;EAAiB;EAAW,aAAW;EAAa;EAAkB;EAAW;4BAChF,KAAC;mBACC,IAAC;IACC,MAAK;IACD;IACJ,KAAK;IACL,gBAAc;IACd,oBAAkB;IACZ;IACN,GAAI;KACJ;GACD,yBACC,IAAC;IAAM,QAAO;IAAS,SAAS;IAAI;8BAClC,IAAC,oBAAM,QAAa;KACd;GAET,+BAGC,IAAC;IAAiB,eAAY;IAAO,IAAI;cACtC;KACgB;MAEf;GACF;AAEX"}
|
|
@@ -11,6 +11,6 @@ import "../../useIsomorphicLayoutEffect-B5btmYlF.js";
|
|
|
11
11
|
import "../../useMergeRefs-CcJMoo46.js";
|
|
12
12
|
import "../../usePagination-DNqO-ob2.js";
|
|
13
13
|
import "../../hooks-BmaG9QJW.js";
|
|
14
|
-
import { Checkbox } from "../../checkbox-
|
|
14
|
+
import { Checkbox } from "../../checkbox-CxA8UXr6.js";
|
|
15
15
|
|
|
16
16
|
export { Checkbox };
|
|
@@ -11,7 +11,7 @@ import "../../useIsomorphicLayoutEffect-B5btmYlF.js";
|
|
|
11
11
|
import "../../useMergeRefs-CcJMoo46.js";
|
|
12
12
|
import "../../usePagination-DNqO-ob2.js";
|
|
13
13
|
import "../../hooks-BmaG9QJW.js";
|
|
14
|
-
import { Checkbox } from "../../checkbox-
|
|
14
|
+
import { Checkbox } from "../../checkbox-CxA8UXr6.js";
|
|
15
15
|
import { CheckboxSubsection } from "../../checkbox-subsection-CGXgII6v.js";
|
|
16
16
|
import "../../checkbox-DdQn64cR.js";
|
|
17
17
|
|
package/dist/components/index.js
CHANGED
|
@@ -30,7 +30,7 @@ import "../useIsomorphicLayoutEffect-B5btmYlF.js";
|
|
|
30
30
|
import "../useMergeRefs-CcJMoo46.js";
|
|
31
31
|
import "../usePagination-DNqO-ob2.js";
|
|
32
32
|
import "../hooks-BmaG9QJW.js";
|
|
33
|
-
import { Checkbox } from "../checkbox-
|
|
33
|
+
import { Checkbox } from "../checkbox-CxA8UXr6.js";
|
|
34
34
|
import { CheckboxSubsection } from "../checkbox-subsection-CGXgII6v.js";
|
|
35
35
|
import "../checkbox-DdQn64cR.js";
|
|
36
36
|
import { Chip } from "../chip-CRcC9TkL.js";
|
|
@@ -84,9 +84,9 @@ import { Pagination } from "../pagination-DxXjiIgC.js";
|
|
|
84
84
|
import { PaginationButton } from "../pagination-button-CjEZPPC8.js";
|
|
85
85
|
import { PaginationItem } from "../pagination-item-DXnI0BWj.js";
|
|
86
86
|
import "../pagination-DUyQRuUE.js";
|
|
87
|
-
import { Radio } from "../radio-
|
|
87
|
+
import { Radio } from "../radio-Cn3PqpMt.js";
|
|
88
88
|
import "../radio-Uyx2D7dl.js";
|
|
89
|
-
import { Search } from "../search-
|
|
89
|
+
import { Search } from "../search-CdV5su_L.js";
|
|
90
90
|
import "../search-VYIc3wFh.js";
|
|
91
91
|
import { Select } from "../select-DCZV6wZu.js";
|
|
92
92
|
import { SelectOption } from "../select-option-BByWq34J.js";
|
|
@@ -105,7 +105,7 @@ import { Textarea } from "../textarea-C580HmQX.js";
|
|
|
105
105
|
import "../textarea-D37K5D86.js";
|
|
106
106
|
import { ValidationMessage } from "../validation-message-6AQTIup_.js";
|
|
107
107
|
import "../validation-message-B4lI2a0K.js";
|
|
108
|
-
import { Textfield } from "../textfield-
|
|
108
|
+
import { Textfield } from "../textfield-CdqVq5R0.js";
|
|
109
109
|
import "../textfield-CWoUw1b2.js";
|
|
110
110
|
import "../components-CUDHzsYh.js";
|
|
111
111
|
|
|
@@ -6,7 +6,7 @@ import "../../input-Dr7BnTyd.js";
|
|
|
6
6
|
import "../../input-03FO9IIL.js";
|
|
7
7
|
import "../../label-DUzvAx-T.js";
|
|
8
8
|
import "../../label-nhrfSiaP.js";
|
|
9
|
-
import { Radio } from "../../radio-
|
|
9
|
+
import { Radio } from "../../radio-Cn3PqpMt.js";
|
|
10
10
|
import "../../radio-Uyx2D7dl.js";
|
|
11
11
|
|
|
12
12
|
export { Radio };
|
|
@@ -8,7 +8,7 @@ import "../../field-affix-npc6m7XL.js";
|
|
|
8
8
|
import "../../field-B7y2WBzu.js";
|
|
9
9
|
import "../../input-Dr7BnTyd.js";
|
|
10
10
|
import "../../input-03FO9IIL.js";
|
|
11
|
-
import { Search } from "../../search-
|
|
11
|
+
import { Search } from "../../search-CdV5su_L.js";
|
|
12
12
|
import "../../search-VYIc3wFh.js";
|
|
13
13
|
|
|
14
14
|
export { Search };
|
|
@@ -8,6 +8,6 @@ import "../../field-affix-npc6m7XL.js";
|
|
|
8
8
|
import "../../field-B7y2WBzu.js";
|
|
9
9
|
import "../../input-Dr7BnTyd.js";
|
|
10
10
|
import "../../input-03FO9IIL.js";
|
|
11
|
-
import { Search } from "../../search-
|
|
11
|
+
import { Search } from "../../search-CdV5su_L.js";
|
|
12
12
|
|
|
13
13
|
export { Search };
|
|
@@ -10,7 +10,7 @@ import "../../textarea-C580HmQX.js";
|
|
|
10
10
|
import "../../textarea-D37K5D86.js";
|
|
11
11
|
import "../../validation-message-6AQTIup_.js";
|
|
12
12
|
import "../../validation-message-B4lI2a0K.js";
|
|
13
|
-
import { Textfield } from "../../textfield-
|
|
13
|
+
import { Textfield } from "../../textfield-CdqVq5R0.js";
|
|
14
14
|
import "../../textfield-CWoUw1b2.js";
|
|
15
15
|
|
|
16
16
|
export { Textfield };
|
|
@@ -10,6 +10,6 @@ import "../../textarea-C580HmQX.js";
|
|
|
10
10
|
import "../../textarea-D37K5D86.js";
|
|
11
11
|
import "../../validation-message-6AQTIup_.js";
|
|
12
12
|
import "../../validation-message-B4lI2a0K.js";
|
|
13
|
-
import { Textfield } from "../../textfield-
|
|
13
|
+
import { Textfield } from "../../textfield-CdqVq5R0.js";
|
|
14
14
|
|
|
15
15
|
export { Textfield };
|
package/dist/main.js
CHANGED
|
@@ -30,7 +30,7 @@ import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect-B5btmYlF.
|
|
|
30
30
|
import "./useMergeRefs-CcJMoo46.js";
|
|
31
31
|
import { usePagination } from "./usePagination-DNqO-ob2.js";
|
|
32
32
|
import "./hooks-BmaG9QJW.js";
|
|
33
|
-
import { Checkbox } from "./checkbox-
|
|
33
|
+
import { Checkbox } from "./checkbox-CxA8UXr6.js";
|
|
34
34
|
import { CheckboxSubsection } from "./checkbox-subsection-CGXgII6v.js";
|
|
35
35
|
import "./checkbox-DdQn64cR.js";
|
|
36
36
|
import { Chip } from "./chip-CRcC9TkL.js";
|
|
@@ -84,9 +84,9 @@ import { Pagination } from "./pagination-DxXjiIgC.js";
|
|
|
84
84
|
import { PaginationButton } from "./pagination-button-CjEZPPC8.js";
|
|
85
85
|
import { PaginationItem } from "./pagination-item-DXnI0BWj.js";
|
|
86
86
|
import "./pagination-DUyQRuUE.js";
|
|
87
|
-
import { Radio } from "./radio-
|
|
87
|
+
import { Radio } from "./radio-Cn3PqpMt.js";
|
|
88
88
|
import "./radio-Uyx2D7dl.js";
|
|
89
|
-
import { Search } from "./search-
|
|
89
|
+
import { Search } from "./search-CdV5su_L.js";
|
|
90
90
|
import "./search-VYIc3wFh.js";
|
|
91
91
|
import { Select } from "./select-DCZV6wZu.js";
|
|
92
92
|
import { SelectOption } from "./select-option-BByWq34J.js";
|
|
@@ -105,7 +105,7 @@ import { Textarea } from "./textarea-C580HmQX.js";
|
|
|
105
105
|
import "./textarea-D37K5D86.js";
|
|
106
106
|
import { ValidationMessage } from "./validation-message-6AQTIup_.js";
|
|
107
107
|
import "./validation-message-B4lI2a0K.js";
|
|
108
|
-
import { Textfield } from "./textfield-
|
|
108
|
+
import { Textfield } from "./textfield-CdqVq5R0.js";
|
|
109
109
|
import "./textfield-CWoUw1b2.js";
|
|
110
110
|
import "./components-CUDHzsYh.js";
|
|
111
111
|
import "./utilities-JoKvbhOy.js";
|
|
@@ -22,6 +22,7 @@ const Radio = ({ dark, label, description, error, fullwidth, style, className, r
|
|
|
22
22
|
ref,
|
|
23
23
|
"aria-invalid": error || void 0,
|
|
24
24
|
"aria-describedby": ariaDescribedBy,
|
|
25
|
+
dark,
|
|
25
26
|
...props
|
|
26
27
|
}),
|
|
27
28
|
label && /* @__PURE__ */ jsx(Label, {
|
|
@@ -41,4 +42,4 @@ const Radio = ({ dark, label, description, error, fullwidth, style, className, r
|
|
|
41
42
|
|
|
42
43
|
//#endregion
|
|
43
44
|
export { Radio };
|
|
44
|
-
//# sourceMappingURL=radio-
|
|
45
|
+
//# sourceMappingURL=radio-Cn3PqpMt.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-
|
|
1
|
+
{"version":3,"file":"radio-Cn3PqpMt.js","names":[],"sources":["../src/components/radio/radio.tsx"],"sourcesContent":["import { useId, type ReactNode, type Ref } from 'react';\n\nimport type { LabelRequiredProps } from '../../types';\nimport type { MergeRight } from '../../utilities';\nimport { Field, FieldDescription } from '../field';\nimport { Input, type InputProps } from '../input';\nimport { Label } from '../label';\n\nexport type RadioProps = MergeRight<\n LabelRequiredProps & Omit<InputProps, 'type' | 'role' | 'size'>,\n {\n /** Label */\n label?: ReactNode;\n /** Description */\n description?: ReactNode;\n /** Add error indication to the radio. */\n error?: boolean;\n /** If true, the radio will take up the full width of the container, and not just \"fit-content\" which is default */\n fullwidth?: boolean;\n ref?: Ref<HTMLInputElement>;\n }\n>;\n\nexport const Radio = ({\n dark,\n label,\n description,\n error,\n fullwidth,\n style,\n className,\n ref,\n id,\n 'aria-describedby': ariaDescribedByProp,\n ...props\n}: RadioProps) => {\n const descriptionId = useId();\n\n const ariaDescribedBy = [description ? descriptionId : '', ariaDescribedByProp].join(' ').trim() || undefined;\n\n return (\n <Field className={className} data-dark={dark} style={style} fullwidth={fullwidth} asChild>\n <label>\n <Input\n type='radio'\n id={id}\n ref={ref}\n aria-invalid={error || undefined}\n aria-describedby={ariaDescribedBy}\n dark={dark}\n {...props}\n />\n {label && (\n <Label weight='medium' htmlFor={id} asChild>\n <span>{label}</span>\n </Label>\n )}\n {description && (\n // Aria-hidden is used to prevent screen readers from reading the description twice:\n // once as part of the label and once from being connected through aria-describedby.\n <FieldDescription aria-hidden='true' id={descriptionId}>\n {description}\n </FieldDescription>\n )}\n </label>\n </Field>\n );\n};\n"],"mappings":";;;;;;;;AAuBA,MAAa,QAAQ,CAAC,EACpB,MACA,OACA,aACA,OACA,WACA,OACA,WACA,KACA,IACA,oBAAoB,oBACpB,GAAG,OACQ,KAAK;CAChB,MAAM,gBAAgB,OAAO;CAE7B,MAAM,kBAAkB,CAAC,cAAc,gBAAgB,IAAI,mBAAoB,EAAC,KAAK,IAAI,CAAC,MAAM;AAEhG,wBACE,IAAC;EAAiB;EAAW,aAAW;EAAa;EAAkB;EAAW;4BAChF,KAAC;mBACC,IAAC;IACC,MAAK;IACD;IACC;IACL,gBAAc;IACd,oBAAkB;IACZ;IACN,GAAI;KACJ;GACD,yBACC,IAAC;IAAM,QAAO;IAAS,SAAS;IAAI;8BAClC,IAAC,oBAAM,QAAa;KACd;GAET,+BAGC,IAAC;IAAiB,eAAY;IAAO,IAAI;cACtC;KACgB;MAEf;GACF;AAEX"}
|
|
@@ -32,6 +32,7 @@ const Search = ({ className, onSubmit, onReset, clearAriaLabel = "Clear", size =
|
|
|
32
32
|
type: "text",
|
|
33
33
|
ref,
|
|
34
34
|
size,
|
|
35
|
+
dark,
|
|
35
36
|
...props
|
|
36
37
|
}),
|
|
37
38
|
/* @__PURE__ */ jsx(FieldAffix, {
|
|
@@ -56,4 +57,4 @@ const Search = ({ className, onSubmit, onReset, clearAriaLabel = "Clear", size =
|
|
|
56
57
|
|
|
57
58
|
//#endregion
|
|
58
59
|
export { Search };
|
|
59
|
-
//# sourceMappingURL=search-
|
|
60
|
+
//# sourceMappingURL=search-CdV5su_L.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search-
|
|
1
|
+
{"version":3,"file":"search-CdV5su_L.js","names":["e: React.FormEvent<HTMLFormElement>"],"sources":["../src/components/search/search.tsx"],"sourcesContent":["import clsx from 'clsx/lite';\nimport { Field, FieldAffixes, FieldAffix } from '../field';\nimport { Input, type InputProps } from '../input';\nimport { BiIconCrossSmall, BiIconMagnefyingGlass } from '@bi-digital/icons-react';\nimport type { MergeRight } from '../../utilities';\nimport { Button } from '../button';\n\nexport type SearchProps = MergeRight<\n Omit<InputProps, 'type' | 'size'>,\n {\n /**\n * Size of the search.\n * @default 'medium'\n */\n size?: 'medium' | 'large';\n /** Called when the user presses enter. You can use this to for example navigate on submit. */\n onSubmit?: (value: string) => void;\n /** Called when the user resets the search input. */\n onReset?: (value: string) => void;\n /**\n * Aria-label for the clear button.\n * @defaultValue 'Clear'\n */\n clearAriaLabel?: string;\n }\n>;\n\nexport const Search = ({\n className,\n onSubmit,\n onReset,\n clearAriaLabel = 'Clear',\n size = 'medium',\n ref,\n dark,\n style,\n ...props\n}: SearchProps) => {\n const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n e.preventDefault();\n if (onSubmit) {\n const input = e.currentTarget.querySelector('input');\n onSubmit(input?.value || '');\n }\n };\n const handleReset = () => {\n if (onReset) {\n onReset('');\n }\n };\n return (\n <Field className={clsx('bi-search', className)} data-dark={dark} style={style} asChild>\n <form onSubmit={handleSubmit} onReset={handleReset}>\n <FieldAffixes>\n <FieldAffix>\n <BiIconMagnefyingGlass size={size} />\n </FieldAffix>\n <Input type='text' ref={ref} size={size} dark={dark} {...props} />\n <FieldAffix aria-hidden='false'>\n <Button aria-label={clearAriaLabel} icon size={size} dark={dark} variant='text' type='reset'>\n <BiIconCrossSmall size={size} aria-hidden='true' />\n </Button>\n </FieldAffix>\n </FieldAffixes>\n </form>\n </Field>\n );\n};\n"],"mappings":";;;;;;;;;AA2BA,MAAa,SAAS,CAAC,EACrB,WACA,UACA,SACA,iBAAiB,SACjB,OAAO,UACP,KACA,MACA,MACA,GAAG,OACS,KAAK;CACjB,MAAM,eAAe,CAACA,MAAwC;AAC5D,IAAE,gBAAgB;AAClB,MAAI,UAAU;GACZ,MAAM,QAAQ,EAAE,cAAc,cAAc,QAAQ;AACpD,YAAS,OAAO,SAAS,GAAG;EAC7B;CACF;CACD,MAAM,cAAc,MAAM;AACxB,MAAI,QACF,SAAQ,GAAG;CAEd;AACD,wBACE,IAAC;EAAM,WAAW,KAAK,aAAa,UAAU;EAAE,aAAW;EAAa;EAAO;4BAC7E,IAAC;GAAK,UAAU;GAAc,SAAS;6BACrC,KAAC;oBACC,IAAC,wCACC,IAAC,yBAA4B,OAAQ,GAC1B;oBACb,IAAC;KAAM,MAAK;KAAY;KAAW;KAAY;KAAM,GAAI;MAAS;oBAClE,IAAC;KAAW,eAAY;+BACtB,IAAC;MAAO,cAAY;MAAgB;MAAW;MAAY;MAAM,SAAQ;MAAO,MAAK;gCACnF,IAAC;OAAuB;OAAM,eAAY;QAAS;OAC5C;MACE;OACA;IACV;GACD;AAEX"}
|
|
@@ -39,12 +39,14 @@ const Textfield = ({ dark, label, description, error, multiline, prefix, suffix,
|
|
|
39
39
|
ref,
|
|
40
40
|
"aria-invalid": Boolean(error) || void 0,
|
|
41
41
|
"aria-describedby": ariaDescribedBy,
|
|
42
|
+
dark,
|
|
42
43
|
...props
|
|
43
44
|
}) : /* @__PURE__ */ jsx(Input, {
|
|
44
45
|
id,
|
|
45
46
|
ref,
|
|
46
47
|
"aria-invalid": Boolean(error) || void 0,
|
|
47
48
|
"aria-describedby": ariaDescribedBy,
|
|
49
|
+
dark,
|
|
48
50
|
...props
|
|
49
51
|
}),
|
|
50
52
|
suffix && /* @__PURE__ */ jsx(FieldAffix, { children: suffix })
|
|
@@ -59,4 +61,4 @@ const Textfield = ({ dark, label, description, error, multiline, prefix, suffix,
|
|
|
59
61
|
|
|
60
62
|
//#endregion
|
|
61
63
|
export { Textfield };
|
|
62
|
-
//# sourceMappingURL=textfield-
|
|
64
|
+
//# sourceMappingURL=textfield-CdqVq5R0.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textfield-
|
|
1
|
+
{"version":3,"file":"textfield-CdqVq5R0.js","names":[],"sources":["../src/components/textfield/textfield.tsx"],"sourcesContent":["import { useId, type ReactNode, type Ref } from 'react';\n\nimport type { DefaultProps, LabelRequiredProps } from '../../types';\nimport { Field, FieldAffix, FieldAffixes, FieldDescription } from '../field';\nimport { Input, type InputProps } from '../input';\nimport { Label } from '../label';\nimport { Textarea, type TextareaProps } from '../textarea';\nimport { ValidationMessage } from '../validation-message';\n\ntype InputPropsFiltered = Omit<InputProps, 'prefix' | 'className' | 'style'>;\ntype TextareaPropsFiltered = Omit<TextareaProps, 'prefix' | 'className' | 'style'>;\n\ntype BaseTextfieldProps = LabelRequiredProps &\n DefaultProps & {\n /** Label */\n label?: ReactNode;\n /** Description */\n description?: ReactNode;\n /** Prefix */\n prefix?: string;\n /** Suffix */\n suffix?: string;\n /** Error message for field */\n error?: ReactNode;\n /** `className` for the `Field` element */\n className?: InputProps['className'];\n /** `style` for the `Field` element */\n style?: InputProps['style'];\n };\n\ntype TextfieldTextareaProps = {\n /** Render `Textarea` instead of a `Input`. The `Textarea` has support for multiple rows of input. */\n multiline: true;\n} & TextareaPropsFiltered;\n\ntype TextfieldInputProps = {\n /** Render `Textarea` instead of a `Input`. The `Textarea` has support for multiple rows of input. */\n multiline?: never | false;\n} & InputPropsFiltered;\n\nexport type TextfieldProps = BaseTextfieldProps &\n // We use either Textarea or Input props, depending on the `multiline` prop.\n (TextfieldTextareaProps | TextfieldInputProps) & {\n ref?: Ref<HTMLInputElement | HTMLTextAreaElement>;\n };\n\nexport const Textfield = ({\n dark,\n label,\n description,\n error,\n multiline,\n prefix,\n suffix,\n style,\n className,\n ref,\n id: idProp,\n 'aria-describedby': ariaDescribedByProp,\n ...props\n}: TextfieldProps) => {\n const generatedId = useId();\n const descriptionId = useId();\n const validationId = useId();\n const id = idProp || generatedId;\n\n const ariaDescribedBy =\n [description ? descriptionId : '', error ? validationId : '', ariaDescribedByProp].join(' ').trim() || undefined;\n return (\n <Field className={className} data-dark={dark} style={style}>\n {label && <Label htmlFor={id}>{label}</Label>}\n {description && <FieldDescription id={descriptionId}>{description}</FieldDescription>}\n <FieldAffixes>\n {prefix && <FieldAffix>{prefix}</FieldAffix>}\n {multiline ? (\n <Textarea\n id={id}\n ref={ref as Ref<HTMLTextAreaElement>}\n aria-invalid={Boolean(error) || undefined}\n aria-describedby={ariaDescribedBy}\n dark={dark}\n {...(props as TextareaPropsFiltered)}\n />\n ) : (\n <Input\n id={id}\n ref={ref as Ref<HTMLInputElement>}\n aria-invalid={Boolean(error) || undefined}\n aria-describedby={ariaDescribedBy}\n dark={dark}\n {...(props as InputPropsFiltered)}\n />\n )}\n {suffix && <FieldAffix>{suffix}</FieldAffix>}\n </FieldAffixes>\n {!!error && <ValidationMessage id={validationId}>{error}</ValidationMessage>}\n </Field>\n );\n};\n"],"mappings":";;;;;;;;;;;AA8CA,MAAa,YAAY,CAAC,EACxB,MACA,OACA,aACA,OACA,WACA,QACA,QACA,OACA,WACA,KACA,IAAI,QACJ,oBAAoB,oBACpB,GAAG,OACY,KAAK;CACpB,MAAM,cAAc,OAAO;CAC3B,MAAM,gBAAgB,OAAO;CAC7B,MAAM,eAAe,OAAO;CAC5B,MAAM,KAAK,UAAU;CAErB,MAAM,kBACJ;EAAC,cAAc,gBAAgB;EAAI,QAAQ,eAAe;EAAI;CAAoB,EAAC,KAAK,IAAI,CAAC,MAAM;AACrG,wBACE,KAAC;EAAiB;EAAW,aAAW;EAAa;;GAClD,yBAAS,IAAC;IAAM,SAAS;cAAK;KAAc;GAC5C,+BAAe,IAAC;IAAiB,IAAI;cAAgB;KAA+B;mBACrF,KAAC;IACE,0BAAU,IAAC,wBAAY,SAAoB;IAC3C,4BACC,IAAC;KACK;KACC;KACL,gBAAc,QAAQ,MAAM;KAC5B,oBAAkB;KACZ;KACN,GAAK;MACL,mBAEF,IAAC;KACK;KACC;KACL,gBAAc,QAAQ,MAAM;KAC5B,oBAAkB;KACZ;KACN,GAAK;MACL;IAEH,0BAAU,IAAC,wBAAY,SAAoB;OAC/B;KACZ,yBAAS,IAAC;IAAkB,IAAI;cAAe;KAA0B;;GACtE;AAEX"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bi-digital/react",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-426d58d",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "React components from BI Digital",
|
|
6
6
|
"author": "BI Digital",
|
|
@@ -47,13 +47,13 @@
|
|
|
47
47
|
"tsdown": "^0.12.7",
|
|
48
48
|
"typescript": "^5.7.2",
|
|
49
49
|
"vitest": "^3.2.1",
|
|
50
|
-
"@bi-digital/icons-react": "0.0.0-experimental-
|
|
50
|
+
"@bi-digital/icons-react": "0.0.0-experimental-426d58d"
|
|
51
51
|
},
|
|
52
52
|
"peerDependencies": {
|
|
53
53
|
"react": "^19",
|
|
54
54
|
"react-dom": "^19",
|
|
55
|
-
"@bi-digital/css": "0.0.0-experimental-
|
|
56
|
-
"@bi-digital/icons-react": "0.0.0-experimental-
|
|
55
|
+
"@bi-digital/css": "0.0.0-experimental-426d58d",
|
|
56
|
+
"@bi-digital/icons-react": "0.0.0-experimental-426d58d"
|
|
57
57
|
},
|
|
58
58
|
"scripts": {
|
|
59
59
|
"build": "tsdown",
|