@servicetitan/anvil2 1.20.0 → 1.20.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 +24 -0
- package/README.md +79 -15
- package/dist/Alert3.js +4 -6
- package/dist/Alert3.js.map +1 -1
- package/dist/Combobox2.js +26 -13
- package/dist/Combobox2.js.map +1 -1
- package/dist/EditCard.css +17 -15
- package/dist/EditCard.d.ts +3 -3
- package/dist/EditCard2.js +27 -20
- package/dist/EditCard2.js.map +1 -1
- package/dist/SearchField.css +8 -5
- package/dist/SearchField2.js +6 -4
- package/dist/SearchField2.js.map +1 -1
- package/dist/TextField.css +24 -21
- package/dist/TextField.module.js +10 -10
- package/dist/TextField.module.js.map +1 -1
- package/dist/Textarea.css +13 -14
- package/dist/Textarea2.js +7 -7
- package/dist/Textarea2.js.map +1 -1
- package/dist/anvil2.d.ts +3 -3
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,29 @@
|
|
|
1
1
|
# @servicetitan/anvil2
|
|
2
2
|
|
|
3
|
+
## 1.20.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#932](https://github.com/servicetitan/hammer/pull/932) [`61c9dde`](https://github.com/servicetitan/hammer/commit/61c9ddede8c10394e175efb49ce7cdac4aedd6b1) Thanks [@tounsoo](https://github.com/tounsoo)! - Fix inconsistant placeholder color between input components
|
|
8
|
+
|
|
9
|
+
- [#944](https://github.com/servicetitan/hammer/pull/944) [`af80dff`](https://github.com/servicetitan/hammer/commit/af80dff03043f6d7ba180d467072f45d6ee5c77e) Thanks [@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n)! - Refactor `Combobox.SelectTrigger` aria label usage
|
|
10
|
+
|
|
11
|
+
- [#943](https://github.com/servicetitan/hammer/pull/943) [`3ce0920`](https://github.com/servicetitan/hammer/commit/3ce0920ae2e315e4c12ce0ca7e1c3f7efaa4d595) Thanks [@pbuckingham-st](https://github.com/pbuckingham-st)! - Minor updates to `EditCard` to align with design
|
|
12
|
+
|
|
13
|
+
- Updated dependencies [[`61c9dde`](https://github.com/servicetitan/hammer/commit/61c9ddede8c10394e175efb49ce7cdac4aedd6b1), [`af80dff`](https://github.com/servicetitan/hammer/commit/af80dff03043f6d7ba180d467072f45d6ee5c77e), [`3ce0920`](https://github.com/servicetitan/hammer/commit/3ce0920ae2e315e4c12ce0ca7e1c3f7efaa4d595)]:
|
|
14
|
+
- @servicetitan/hammer-react@1.23.2
|
|
15
|
+
|
|
16
|
+
## 1.20.1
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- [#938](https://github.com/servicetitan/hammer/pull/938) [`46787fc`](https://github.com/servicetitan/hammer/commit/46787fcf0baca7e1dc56d13e4303a57d67e18209) Thanks [@pbuckingham-st](https://github.com/pbuckingham-st)! - Bug fixes for EditCard
|
|
21
|
+
|
|
22
|
+
- [#940](https://github.com/servicetitan/hammer/pull/940) [`5849aa8`](https://github.com/servicetitan/hammer/commit/5849aa8ce29e0f86cccc92b6ecca921c02145d4d) Thanks [@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n)! - Fix implementation of semantic aria labels within Comboboxes
|
|
23
|
+
|
|
24
|
+
- Updated dependencies [[`46787fc`](https://github.com/servicetitan/hammer/commit/46787fcf0baca7e1dc56d13e4303a57d67e18209), [`5849aa8`](https://github.com/servicetitan/hammer/commit/5849aa8ce29e0f86cccc92b6ecca921c02145d4d)]:
|
|
25
|
+
- @servicetitan/hammer-react@1.23.1
|
|
26
|
+
|
|
3
27
|
## 1.20.0
|
|
4
28
|
|
|
5
29
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
<h1 align="center">
|
|
2
|
-
Anvil2
|
|
2
|
+
Anvil2 React Library
|
|
3
3
|
</h1>
|
|
4
4
|
|
|
5
5
|
Anvil2 contains reusable components, fonts, icons, and more for building ServiceTitan products.
|
|
6
6
|
|
|
7
|
+
## Hammer and Anvil2 Note
|
|
8
|
+
|
|
9
|
+
In this monorepo, there are both Hammer and Anvil2 packages. Hammer (e.g. `@servicetitan/hammer-react`), is the base library that the Anvil team maintains and `@servicetitan/anvil2` builds on top of.
|
|
10
|
+
|
|
11
|
+
Anvil2 is more opinionated and ServiceTitan-specific, and can also include more complex components and customizations of Hammer.
|
|
12
|
+
|
|
13
|
+
Much of the source code for Anvil2 components actually exists in the `packages/hammer-react` package in this monorepo. When releasing updates, making changes in Hammer will automatically propagate to Anvil2, as long as the component/function/type is exported from the `packages/anvil2` package as well.
|
|
14
|
+
|
|
7
15
|
# Getting Started
|
|
8
16
|
|
|
9
17
|
## Installation
|
|
@@ -14,45 +22,97 @@ We recommend installing Anvil2 by running the following `npm` command (or the eq
|
|
|
14
22
|
npm install @servicetitan/anvil2
|
|
15
23
|
```
|
|
16
24
|
|
|
17
|
-
|
|
25
|
+
### Note on versions with MFEs
|
|
26
|
+
|
|
27
|
+
If you are using a Micro Front End (MFE) with the light bundle, the version of `@servicetitan/anvil2` that is installed in the host app will be used when the MFE is loaded within the host app. If you need features or bug fixes from newer versions, update the version in the host app first.
|
|
18
28
|
|
|
19
29
|
## Usage
|
|
20
30
|
|
|
21
|
-
|
|
31
|
+
### Components
|
|
22
32
|
|
|
23
|
-
|
|
33
|
+
Components can be imported as named exports from the package root:
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
24
36
|
import { Button, Icon } from "@servicetitan/anvil2";
|
|
25
37
|
```
|
|
26
38
|
|
|
27
|
-
|
|
39
|
+
### Icons
|
|
28
40
|
|
|
29
41
|
Anvil2 icons are expected to be used with the [SVGR](https://github.com/gregberge/svgr) library, which will import SVGs as React components. SVGR should already be part of the latest `@servicetitan/startup` Webpack configuration.
|
|
30
42
|
|
|
31
43
|
Importing and using an icon:
|
|
32
44
|
|
|
33
|
-
```
|
|
45
|
+
```tsx
|
|
34
46
|
import { Button, Icon } from "@servicetitan/anvil2";
|
|
35
47
|
|
|
36
48
|
import Warning from "@servicetitan/anvil2/assets/icons/material/round/warning.svg";
|
|
37
|
-
import Star from
|
|
38
|
-
import LocalSettings from
|
|
49
|
+
import Star from "@servicetitan/anvil2/assets/icons/material/round/star.svg";
|
|
50
|
+
import LocalSettings from "@servicetitan/anvil2/assets/icons/st/local_settings.svg";
|
|
51
|
+
|
|
52
|
+
export const Example = () => (
|
|
53
|
+
<>
|
|
54
|
+
<Icon svg={Warning} size="large" />
|
|
55
|
+
<Button icon={Star} aria-label="Favorite" />
|
|
56
|
+
<Button icon={LocalSettings}>Settings</Button>
|
|
57
|
+
</>
|
|
58
|
+
);
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### CSS Utils
|
|
62
|
+
|
|
63
|
+
A set of CSS Utils classes are available. See the [source code in our repo](https://github.com/servicetitan/hammer/blob/master/packages/anvil2/public/assets/css-utils) to see the full list.
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
import { Card } from "@servicetitan/anvil2";
|
|
67
|
+
import "@servicetitan/anvil2/assets/css-utils/utils.css";
|
|
39
68
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
<
|
|
69
|
+
export const Example = () => (
|
|
70
|
+
<>
|
|
71
|
+
<Card className="m-inline-4">Card with inline margin</Card>
|
|
72
|
+
</>
|
|
73
|
+
);
|
|
43
74
|
```
|
|
44
75
|
|
|
45
|
-
|
|
76
|
+
#### NOTES
|
|
46
77
|
|
|
47
|
-
|
|
78
|
+
- If the `utils.css` file is already loaded by the host app, you might not need to import it.
|
|
79
|
+
- There is currently a known issue related to some temporary CSS overrides we've had to make to prevent some legacy CSS in the monolith from overriding Anvil2 component styles. If the CSS util you add doesn't work, and you see something like this in the browser inspector: `:not(.aXNw) [data-anv='text']`, you will need to instead add the styles you want in a custom `className`, and add an `@layer` around it:
|
|
48
80
|
|
|
81
|
+
```css
|
|
82
|
+
@layer application {
|
|
83
|
+
/* replaces .c-danger */
|
|
84
|
+
.custom-class {
|
|
85
|
+
color: var(--status-color-danger);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
49
88
|
```
|
|
89
|
+
|
|
90
|
+
> We are actively working on a long-term solution with the Front-End Platform team.
|
|
91
|
+
|
|
92
|
+
### `AnvilProvider`
|
|
93
|
+
|
|
94
|
+
When using the Anvil2 component library, we recommend wrapping the top level of your app in the `AnvilProvider` component, which also supports light/dark themes, localization, and `data-tracking-id` configurations:
|
|
95
|
+
|
|
96
|
+
```tsx
|
|
50
97
|
import { AnvilProvider } from "@servicetitan/anvil2";
|
|
51
98
|
|
|
52
|
-
<AnvilProvider themeData={...} localizationData={...}>
|
|
99
|
+
<AnvilProvider themeData={...} localizationData={...} trackingIdData={...}>
|
|
53
100
|
...
|
|
54
101
|
</AnvilProvider>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### Data Tracking IDs for FullStory
|
|
55
105
|
|
|
106
|
+
In order to enable consistent FullStory data tracking with Anvil2 components, a `data-tracking-id` is automatically generated for all **interactive** components. This id will only change if certain props change, which are determined on a per-component basis.
|
|
107
|
+
|
|
108
|
+
If your team or product already has a different strategy for tagging components in place, you can disable the auto-generated `data-tracking-id` tags using the `AnvilProvider.trackingIdData` or `TrackingProvider.optOut`:
|
|
109
|
+
|
|
110
|
+
```tsx
|
|
111
|
+
// Using AnvilProvider
|
|
112
|
+
<AnvilProvider trackingIdData={{ optOut: true }}>...</AnvilProvider>
|
|
113
|
+
|
|
114
|
+
// Using TrackingProvider
|
|
115
|
+
<TrackingProvider scope="ST" optOut>...</TrackingProvider>
|
|
56
116
|
```
|
|
57
117
|
|
|
58
118
|
# Documentation
|
|
@@ -61,4 +121,8 @@ You can read the Anvil2 docs at: https://anvil.servicetitan.com/
|
|
|
61
121
|
|
|
62
122
|
# Contributing
|
|
63
123
|
|
|
64
|
-
We welcome contributions of all kinds from design to code
|
|
124
|
+
We welcome contributions of all kinds from design to code!
|
|
125
|
+
|
|
126
|
+
Please reach out to our team in [#ask-designsystem](https://servicetitan.enterprise.slack.com/archives/CBSRGHTRS) if you would like to make a contribution.
|
|
127
|
+
|
|
128
|
+
Check out the [root-level Contributing docs](../../README.md#contributing) for more details on making changes to this package.
|
package/dist/Alert3.js
CHANGED
|
@@ -34,9 +34,6 @@ const statusIconMap = {
|
|
|
34
34
|
warning: SvgWarning,
|
|
35
35
|
danger: SvgError
|
|
36
36
|
};
|
|
37
|
-
const getIcon = (status = "info") => {
|
|
38
|
-
return statusIconMap[status];
|
|
39
|
-
};
|
|
40
37
|
const Alert = forwardRef((props, ref) => {
|
|
41
38
|
const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
|
|
42
39
|
const {
|
|
@@ -45,6 +42,7 @@ const Alert = forwardRef((props, ref) => {
|
|
|
45
42
|
title,
|
|
46
43
|
status = "info",
|
|
47
44
|
style,
|
|
45
|
+
onClose,
|
|
48
46
|
...rest
|
|
49
47
|
} = componentProps;
|
|
50
48
|
const alertCx = cx(styles["alert"], className, {
|
|
@@ -73,19 +71,19 @@ const Alert = forwardRef((props, ref) => {
|
|
|
73
71
|
{
|
|
74
72
|
size: "large",
|
|
75
73
|
className: styles["status-icon"],
|
|
76
|
-
svg:
|
|
74
|
+
svg: statusIconMap[status ?? "info"]
|
|
77
75
|
}
|
|
78
76
|
),
|
|
79
77
|
title
|
|
80
78
|
] }),
|
|
81
|
-
!!
|
|
79
|
+
!!onClose && /* @__PURE__ */ jsx("span", { className: styles["close-container"], children: /* @__PURE__ */ jsx(
|
|
82
80
|
Button,
|
|
83
81
|
{
|
|
84
82
|
icon: SvgClose,
|
|
85
83
|
size: "small",
|
|
86
84
|
appearance: "ghost",
|
|
87
85
|
className: styles["close-button"],
|
|
88
|
-
onClick: (e) =>
|
|
86
|
+
onClick: (e) => onClose(e),
|
|
89
87
|
"aria-label": `Dismiss ${status} alert`
|
|
90
88
|
}
|
|
91
89
|
) })
|
package/dist/Alert3.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert3.js","sources":["../../hammer-react/dist/Alert.js"],"sourcesContent":["import { jsxs, jsx } from 'react/jsx-runtime';\nimport { forwardRef } from 'react';\nimport cx from 'classnames';\nimport { Button } from './Button2.js';\nimport Close from '@servicetitan/hammer-icon/mdi/round/close.svg';\nimport Info from '@servicetitan/hammer-icon/mdi/round/info.svg';\nimport Warning from '@servicetitan/hammer-icon/mdi/round/warning.svg';\nimport Danger from '@servicetitan/hammer-icon/mdi/round/error.svg';\nimport Success from '@servicetitan/hammer-icon/mdi/round/check_circle.svg';\nimport { Icon } from './Icon.js';\nimport { useLayoutPropsUtil } from './useLayoutPropsUtil.js';\n\nimport './index.css';const alert = \"_alert_1885o_4\";\nconst content = \"_content_1885o_36\";\nconst top = \"_top_1885o_44\";\nconst success = \"_success_1885o_62\";\nconst warning = \"_warning_1885o_68\";\nconst danger = \"_danger_1885o_74\";\nconst styles = {\n\talert: alert,\n\t\"close-container\": \"_close-container_1885o_29\",\n\tcontent: content,\n\ttop: top,\n\t\"title-container\": \"_title-container_1885o_50\",\n\t\"status-icon\": \"_status-icon_1885o_58\",\n\tsuccess: success,\n\twarning: warning,\n\tdanger: danger,\n\t\"close-button\": \"_close-button_1885o_82\"\n};\n\nconst statusIconMap = {\n info: Info,\n success: Success,\n warning: Warning,\n danger: Danger\n};\nconst
|
|
1
|
+
{"version":3,"file":"Alert3.js","sources":["../../hammer-react/dist/Alert.js"],"sourcesContent":["import { jsxs, jsx } from 'react/jsx-runtime';\nimport { forwardRef } from 'react';\nimport cx from 'classnames';\nimport { Button } from './Button2.js';\nimport Close from '@servicetitan/hammer-icon/mdi/round/close.svg';\nimport Info from '@servicetitan/hammer-icon/mdi/round/info.svg';\nimport Warning from '@servicetitan/hammer-icon/mdi/round/warning.svg';\nimport Danger from '@servicetitan/hammer-icon/mdi/round/error.svg';\nimport Success from '@servicetitan/hammer-icon/mdi/round/check_circle.svg';\nimport { Icon } from './Icon.js';\nimport { useLayoutPropsUtil } from './useLayoutPropsUtil.js';\n\nimport './index.css';const alert = \"_alert_1885o_4\";\nconst content = \"_content_1885o_36\";\nconst top = \"_top_1885o_44\";\nconst success = \"_success_1885o_62\";\nconst warning = \"_warning_1885o_68\";\nconst danger = \"_danger_1885o_74\";\nconst styles = {\n\talert: alert,\n\t\"close-container\": \"_close-container_1885o_29\",\n\tcontent: content,\n\ttop: top,\n\t\"title-container\": \"_title-container_1885o_50\",\n\t\"status-icon\": \"_status-icon_1885o_58\",\n\tsuccess: success,\n\twarning: warning,\n\tdanger: danger,\n\t\"close-button\": \"_close-button_1885o_82\"\n};\n\nconst statusIconMap = {\n info: Info,\n success: Success,\n warning: Warning,\n danger: Danger\n};\nconst Alert = forwardRef((props, ref) => {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n children,\n className,\n title,\n status = \"info\",\n style,\n onClose,\n ...rest\n } = componentProps;\n const alertCx = cx(styles[\"alert\"], className, {\n [styles[\"success\"]]: status === \"success\",\n [styles[\"warning\"]]: status === \"warning\",\n [styles[\"danger\"]]: status === \"danger\"\n });\n const styleCombined = {\n ...style,\n ...layoutStyles\n };\n return /* @__PURE__ */ jsxs(\n \"div\",\n {\n \"data-anv\": \"alert\",\n role: \"status\",\n className: alertCx,\n style: styleCombined,\n ...rest,\n ref,\n children: [\n /* @__PURE__ */ jsxs(\"div\", { className: styles[\"top\"], children: [\n /* @__PURE__ */ jsxs(\"span\", { className: styles[\"title-container\"], children: [\n /* @__PURE__ */ jsx(\n Icon,\n {\n size: \"large\",\n className: styles[\"status-icon\"],\n svg: statusIconMap[status ?? \"info\"]\n }\n ),\n title\n ] }),\n !!onClose && /* @__PURE__ */ jsx(\"span\", { className: styles[\"close-container\"], children: /* @__PURE__ */ jsx(\n Button,\n {\n icon: Close,\n size: \"small\",\n appearance: \"ghost\",\n className: styles[\"close-button\"],\n onClick: (e) => onClose(e),\n \"aria-label\": `Dismiss ${status} alert`\n }\n ) })\n ] }),\n children && /* @__PURE__ */ jsx(\"div\", { className: styles[\"content\"], children })\n ]\n }\n );\n});\nAlert.displayName = \"Alert\";\n\nexport { Alert };\n//# sourceMappingURL=Alert.js.map\n"],"names":["Info","Success","Warning","Danger","Close"],"mappings":"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"}
|
package/dist/Combobox2.js
CHANGED
|
@@ -6342,6 +6342,7 @@ const ComboboxTrigger = ({
|
|
|
6342
6342
|
prefix,
|
|
6343
6343
|
suffix,
|
|
6344
6344
|
maxRows,
|
|
6345
|
+
id,
|
|
6345
6346
|
disabled,
|
|
6346
6347
|
readOnly,
|
|
6347
6348
|
...rest
|
|
@@ -6407,10 +6408,10 @@ const ComboboxTrigger = ({
|
|
|
6407
6408
|
return;
|
|
6408
6409
|
setIsReadOnly(readOnly);
|
|
6409
6410
|
}, [readOnly, setIsReadOnly]);
|
|
6410
|
-
const labelUid = useId();
|
|
6411
|
-
const helperUid = useId();
|
|
6412
|
-
|
|
6413
|
-
|
|
6411
|
+
const labelUid = "label" + useId();
|
|
6412
|
+
const helperUid = "helper" + useId();
|
|
6413
|
+
const placeholderUid = "placeholder" + useId();
|
|
6414
|
+
const ariaDescribedBy = `${helperUid} ${placeholderUid}`;
|
|
6414
6415
|
const errorMessage = typeof error !== "boolean" ? error : void 0;
|
|
6415
6416
|
const handleBlur = (e) => {
|
|
6416
6417
|
const target = e.relatedTarget ?? e.target;
|
|
@@ -6486,10 +6487,10 @@ const ComboboxTrigger = ({
|
|
|
6486
6487
|
{
|
|
6487
6488
|
...getLabelProps({
|
|
6488
6489
|
className: styles["label"],
|
|
6489
|
-
id: labelUid,
|
|
6490
6490
|
required,
|
|
6491
6491
|
moreInfo,
|
|
6492
|
-
openMoreInfo
|
|
6492
|
+
openMoreInfo,
|
|
6493
|
+
id: labelUid
|
|
6493
6494
|
}),
|
|
6494
6495
|
children: label
|
|
6495
6496
|
}
|
|
@@ -6503,7 +6504,10 @@ const ComboboxTrigger = ({
|
|
|
6503
6504
|
...getToggleButtonProps({
|
|
6504
6505
|
disabled: isDisabled,
|
|
6505
6506
|
readOnly: isReadOnly,
|
|
6506
|
-
ref: context.refs.setReference
|
|
6507
|
+
ref: context.refs.setReference,
|
|
6508
|
+
id,
|
|
6509
|
+
"aria-describedby": ariaDescribedBy,
|
|
6510
|
+
"aria-labelledby": labelUid
|
|
6507
6511
|
})
|
|
6508
6512
|
} : {
|
|
6509
6513
|
ref: context.refs.setReference,
|
|
@@ -6585,14 +6589,19 @@ const ComboboxTrigger = ({
|
|
|
6585
6589
|
...getDropdownProps != null ? getDropdownProps({
|
|
6586
6590
|
className: ComboboxInputClassNames,
|
|
6587
6591
|
required,
|
|
6588
|
-
"aria-labelledby": ariaLabelledBy,
|
|
6589
6592
|
preventKeyAction: isOpen
|
|
6590
6593
|
}) : {
|
|
6591
6594
|
className: ComboboxInputClassNames,
|
|
6592
|
-
required
|
|
6593
|
-
"aria-labelledby": ariaLabelledBy
|
|
6595
|
+
required
|
|
6594
6596
|
},
|
|
6595
|
-
children: selectedItems.length ? null : selectedItem ? itemToString(selectedItem) : /* @__PURE__ */ jsx(
|
|
6597
|
+
children: selectedItems.length ? null : selectedItem ? itemToString(selectedItem) : /* @__PURE__ */ jsx(
|
|
6598
|
+
"span",
|
|
6599
|
+
{
|
|
6600
|
+
className: styles["fake-placeholder"],
|
|
6601
|
+
id: placeholderUid,
|
|
6602
|
+
children: rest.placeholder
|
|
6603
|
+
}
|
|
6604
|
+
)
|
|
6596
6605
|
}
|
|
6597
6606
|
) : /* @__PURE__ */ jsx(
|
|
6598
6607
|
"input",
|
|
@@ -6605,7 +6614,9 @@ const ComboboxTrigger = ({
|
|
|
6605
6614
|
readOnly: isReadOnly,
|
|
6606
6615
|
required,
|
|
6607
6616
|
autoComplete: "off",
|
|
6608
|
-
|
|
6617
|
+
id,
|
|
6618
|
+
"aria-describedby": ariaDescribedBy,
|
|
6619
|
+
"aria-labelledby": labelUid,
|
|
6609
6620
|
preventKeyAction: isOpen,
|
|
6610
6621
|
ref: inputRef
|
|
6611
6622
|
})
|
|
@@ -6616,7 +6627,9 @@ const ComboboxTrigger = ({
|
|
|
6616
6627
|
readOnly: isReadOnly,
|
|
6617
6628
|
required,
|
|
6618
6629
|
autoComplete: "off",
|
|
6619
|
-
|
|
6630
|
+
id,
|
|
6631
|
+
"aria-describedby": ariaDescribedBy,
|
|
6632
|
+
"aria-labelledby": labelUid,
|
|
6620
6633
|
ref: inputRef
|
|
6621
6634
|
}) : {}
|
|
6622
6635
|
}
|