@dbcdk/react-components 0.0.202 → 0.0.204

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.
Files changed (28) hide show
  1. package/dist/components/chip/Chip.d.ts +2 -1
  2. package/dist/components/chip/Chip.module.css +13 -0
  3. package/dist/components/forms/checkbox/Checkbox.cjs +11 -6
  4. package/dist/components/forms/checkbox/Checkbox.d.ts +5 -1
  5. package/dist/components/forms/checkbox/Checkbox.js +11 -6
  6. package/dist/components/forms/checkbox/Checkbox.module.css +6 -7
  7. package/dist/components/forms/form-select/FormSelect.cjs +61 -63
  8. package/dist/components/forms/form-select/FormSelect.d.ts +1 -1
  9. package/dist/components/forms/form-select/FormSelect.js +62 -64
  10. package/dist/components/forms/form-select/FormSelect.module.css +10 -0
  11. package/dist/components/forms/input/Input.cjs +10 -1
  12. package/dist/components/forms/input/Input.js +10 -1
  13. package/dist/components/forms/input/Input.module.css +11 -130
  14. package/dist/components/forms/input-container/InputContainer.cjs +28 -10
  15. package/dist/components/forms/input-container/InputContainer.d.ts +4 -1
  16. package/dist/components/forms/input-container/InputContainer.js +29 -11
  17. package/dist/components/forms/input-container/InputContainer.module.css +33 -3
  18. package/dist/components/forms/input-container/messageIds.cjs +15 -0
  19. package/dist/components/forms/input-container/messageIds.d.ts +13 -0
  20. package/dist/components/forms/input-container/messageIds.js +12 -0
  21. package/dist/components/forms/select/Select.cjs +111 -113
  22. package/dist/components/forms/select/Select.d.ts +1 -1
  23. package/dist/components/forms/select/Select.js +112 -114
  24. package/dist/components/forms/select/Select.module.css +11 -33
  25. package/dist/components/forms/text-area/Textarea.cjs +5 -9
  26. package/dist/components/forms/text-area/Textarea.js +5 -9
  27. package/dist/components/forms/text-area/Textarea.module.css +11 -32
  28. package/package.json +1 -1
package/dist/components/forms/select/Select.cjs CHANGED
@@ -10,6 +10,7 @@ var ClearButton = require('../../clear-button/ClearButton');
10
10
  var Menu = require('../../menu/Menu');
11
11
  var Popover = require('../../popover/Popover');
12
12
  var InputContainer = require('../input-container/InputContainer');
13
+ var messageIds = require('../input-container/messageIds');
13
14
 
14
15
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
15
16
 
@@ -20,6 +21,7 @@ function Select({
20
21
  labelAction,
21
22
  error,
22
23
  helpText,
24
+ helpTextAddition,
23
25
  orientation = "vertical",
24
26
  labelWidth = "160px",
25
27
  fullWidth = true,
@@ -43,7 +45,6 @@ function Select({
43
45
  }) {
44
46
  const generatedId = react.useId();
45
47
  const controlId = id != null ? id : `select-${generatedId}`;
46
- const describedById = `${controlId}-desc`;
47
48
  const listboxId = `${controlId}-listbox`;
48
49
  const popoverRef = react.useRef(null);
49
50
  const triggerRef = react.useRef(null);
@@ -179,13 +180,12 @@ function Select({
179
180
  placement: tooltipPlacement,
180
181
  offset: 8
181
182
  });
182
- const describedBy = (() => {
183
- const ids = [];
184
- if (error || helpText) ids.push(describedById);
185
- if (tooltipEnabled) ids.push(tooltipId);
186
- return ids.length ? ids.join(" ") : void 0;
187
- })();
188
- return /* @__PURE__ */ jsxRuntime.jsxs(
183
+ const describedBy = messageIds.getDescribedBy(
184
+ controlId,
185
+ { error, helpText },
186
+ tooltipEnabled ? tooltipId : void 0
187
+ );
188
+ return /* @__PURE__ */ jsxRuntime.jsx(
189
189
  InputContainer.InputContainer,
190
190
  {
191
191
  label,
@@ -194,116 +194,114 @@ function Select({
194
194
  fullWidth,
195
195
  error,
196
196
  helpText,
197
+ helpTextAddition,
197
198
  orientation,
198
199
  labelWidth,
199
200
  required,
200
201
  modified,
201
- children: [
202
- /* @__PURE__ */ jsxRuntime.jsx(
203
- Popover.Popover,
204
- {
205
- ref: popoverRef,
206
- anchorRef: triggerRef,
207
- open,
208
- fullWidth,
209
- onOpenChange: (next) => {
210
- setOpen(next);
211
- if (next) resetActiveToSelected();
212
- },
213
- contentId: listboxId,
214
- autoFocusContent: false,
215
- returnFocus: true,
216
- trigger: (toggle, icon, isOpen) => /* @__PURE__ */ jsxRuntime.jsx(
217
- Button.Button,
218
- {
219
- disabled,
220
- ...tooltipEnabled ? triggerProps : {},
221
- ref: (node) => {
222
- triggerRef.current = node;
223
- if (tooltipEnabled) triggerProps.ref(node);
224
- },
225
- id: controlId,
226
- "data-cy": dataCy != null ? dataCy : "select-button",
227
- onKeyDown: handleKeyDown,
228
- fullWidth,
229
- variant,
230
- onClick: (e) => {
231
- resetActiveToSelected();
232
- toggle(e);
202
+ children: /* @__PURE__ */ jsxRuntime.jsx(
203
+ Popover.Popover,
204
+ {
205
+ ref: popoverRef,
206
+ anchorRef: triggerRef,
207
+ open,
208
+ fullWidth,
209
+ onOpenChange: (next) => {
210
+ setOpen(next);
211
+ if (next) resetActiveToSelected();
212
+ },
213
+ contentId: listboxId,
214
+ autoFocusContent: false,
215
+ returnFocus: true,
216
+ trigger: (toggle, icon, isOpen) => /* @__PURE__ */ jsxRuntime.jsx(
217
+ Button.Button,
218
+ {
219
+ disabled,
220
+ ...tooltipEnabled ? triggerProps : {},
221
+ ref: (node) => {
222
+ triggerRef.current = node;
223
+ if (tooltipEnabled) triggerProps.ref(node);
224
+ },
225
+ id: controlId,
226
+ "data-cy": dataCy != null ? dataCy : "select-button",
227
+ onKeyDown: handleKeyDown,
228
+ fullWidth,
229
+ variant,
230
+ onClick: (e) => {
231
+ resetActiveToSelected();
232
+ toggle(e);
233
+ },
234
+ size,
235
+ style: minWidth != null ? { minWidth } : void 0,
236
+ type: "button",
237
+ "data-forminput": true,
238
+ "aria-haspopup": "listbox",
239
+ "aria-expanded": !!isOpen,
240
+ "aria-controls": listboxId,
241
+ "aria-invalid": Boolean(error) || void 0,
242
+ "aria-describedby": describedBy,
243
+ className: error ? styles__default.default.triggerInvalid : void 0,
244
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
245
+ "span",
246
+ {
247
+ className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs",
248
+ style: { width: "100%" },
249
+ children: [
250
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: selected ? selected.label : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dbc-muted-text", children: placeholder }) }),
251
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [
252
+ onClear && selected && /* @__PURE__ */ jsxRuntime.jsx(
253
+ ClearButton.ClearButton,
254
+ {
255
+ onClick: onClear,
256
+ variant: variant === "header" ? "header" : "default",
257
+ as: "span",
258
+ revealOnHover: true
259
+ }
260
+ ),
261
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })
262
+ ] })
263
+ ]
264
+ }
265
+ )
266
+ }
267
+ ),
268
+ children: /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { onKeyDownCapture: handleKeyDown, role: "listbox", className: styles__default.default.menu, children: [
269
+ menuHeader ? /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: menuHeader }) : null,
270
+ options.map((opt, index) => {
271
+ const isSelected = typeof opt.value === "object" && typeof selectedValue === "object" && datakey ? (selectedValue == null ? void 0 : selectedValue[datakey]) === opt.value[datakey] : opt.value === selectedValue;
272
+ const isActive = index === activeIndex;
273
+ return /* @__PURE__ */ jsxRuntime.jsx(
274
+ Menu.Menu.Item,
275
+ {
276
+ active: isActive,
277
+ selected: isSelected,
278
+ itemRole: "option",
279
+ className: isSelected ? styles__default.default.selectedOption : void 0,
280
+ children: /* @__PURE__ */ jsxRuntime.jsx(
281
+ "button",
282
+ {
283
+ ref: (el) => {
284
+ optionRefs.current[index] = el;
285
+ },
286
+ type: "button",
287
+ tabIndex: isActive ? 0 : -1,
288
+ onClick: () => {
289
+ var _a;
290
+ onChange(opt.value);
291
+ (_a = popoverRef.current) == null ? void 0 : _a.close();
292
+ },
293
+ onFocus: () => setActiveIndex(index),
294
+ style: { display: "flex", alignItems: "center", width: "100%" },
295
+ children: opt.label
296
+ }
297
+ )
233
298
  },
234
- size,
235
- style: minWidth != null ? { minWidth } : void 0,
236
- type: "button",
237
- "data-forminput": true,
238
- "aria-haspopup": "listbox",
239
- "aria-expanded": !!isOpen,
240
- "aria-controls": listboxId,
241
- "aria-invalid": Boolean(error) || void 0,
242
- "aria-describedby": describedBy,
243
- className: modified ? styles__default.default.triggerModified : void 0,
244
- children: /* @__PURE__ */ jsxRuntime.jsxs(
245
- "span",
246
- {
247
- className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs",
248
- style: { width: "100%" },
249
- children: [
250
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: selected ? selected.label : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dbc-muted-text", children: placeholder }) }),
251
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [
252
- onClear && selected && /* @__PURE__ */ jsxRuntime.jsx(
253
- ClearButton.ClearButton,
254
- {
255
- onClick: onClear,
256
- variant: variant === "header" ? "header" : "default",
257
- as: "span",
258
- revealOnHover: true
259
- }
260
- ),
261
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })
262
- ] })
263
- ]
264
- }
265
- )
266
- }
267
- ),
268
- children: /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { onKeyDownCapture: handleKeyDown, role: "listbox", className: styles__default.default.menu, children: [
269
- menuHeader ? /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: menuHeader }) : null,
270
- options.map((opt, index) => {
271
- const isSelected = typeof opt.value === "object" && typeof selectedValue === "object" && datakey ? (selectedValue == null ? void 0 : selectedValue[datakey]) === opt.value[datakey] : opt.value === selectedValue;
272
- const isActive = index === activeIndex;
273
- return /* @__PURE__ */ jsxRuntime.jsx(
274
- Menu.Menu.Item,
275
- {
276
- active: isActive,
277
- selected: isSelected,
278
- itemRole: "option",
279
- className: isSelected ? styles__default.default.selectedOption : void 0,
280
- children: /* @__PURE__ */ jsxRuntime.jsx(
281
- "button",
282
- {
283
- ref: (el) => {
284
- optionRefs.current[index] = el;
285
- },
286
- type: "button",
287
- tabIndex: isActive ? 0 : -1,
288
- onClick: () => {
289
- var _a;
290
- onChange(opt.value);
291
- (_a = popoverRef.current) == null ? void 0 : _a.close();
292
- },
293
- onFocus: () => setActiveIndex(index),
294
- style: { display: "flex", alignItems: "center", width: "100%" },
295
- children: opt.label
296
- }
297
- )
298
- },
299
- String(opt.value)
300
- );
301
- })
302
- ] })
303
- }
304
- ),
305
- (error || helpText) && /* @__PURE__ */ jsxRuntime.jsx("span", { id: describedById, style: { display: "none" }, children: error != null ? error : helpText })
306
- ]
299
+ String(opt.value)
300
+ );
301
+ })
302
+ ] })
303
+ }
304
+ )
307
305
  }
308
306
  );
309
307
  }
package/dist/components/forms/select/Select.d.ts CHANGED
@@ -20,5 +20,5 @@ export type SelectProps<T> = Omit<InputContainerProps, 'children' | 'htmlFor' |
20
20
  tooltip?: React.ReactNode;
21
21
  tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
22
22
  };
23
- export declare function Select<T extends string | number | Record<string, any>>({ label, labelAction, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, id, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, minWidth, menuHeader, }: SelectProps<T>): React.ReactNode;
23
+ export declare function Select<T extends string | number | Record<string, any>>({ label, labelAction, error, helpText, helpTextAddition, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, id, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, minWidth, menuHeader, }: SelectProps<T>): React.ReactNode;
24
24
  export {};
package/dist/components/forms/select/Select.js CHANGED
@@ -1,5 +1,5 @@
1
1
  'use client';
2
- import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { jsx, jsxs } from 'react/jsx-runtime';
3
3
  import { useId, useRef, useMemo, useState, useEffect } from 'react';
4
4
  import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
5
5
  import styles from './Select.module.css';
@@ -8,12 +8,14 @@ import { ClearButton } from '../../clear-button/ClearButton';
8
8
  import { Menu } from '../../menu/Menu';
9
9
  import { Popover } from '../../popover/Popover';
10
10
  import { InputContainer } from '../input-container/InputContainer';
11
+ import { getDescribedBy } from '../input-container/messageIds';
11
12
 
12
13
  function Select({
13
14
  label,
14
15
  labelAction,
15
16
  error,
16
17
  helpText,
18
+ helpTextAddition,
17
19
  orientation = "vertical",
18
20
  labelWidth = "160px",
19
21
  fullWidth = true,
@@ -37,7 +39,6 @@ function Select({
37
39
  }) {
38
40
  const generatedId = useId();
39
41
  const controlId = id != null ? id : `select-${generatedId}`;
40
- const describedById = `${controlId}-desc`;
41
42
  const listboxId = `${controlId}-listbox`;
42
43
  const popoverRef = useRef(null);
43
44
  const triggerRef = useRef(null);
@@ -173,13 +174,12 @@ function Select({
173
174
  placement: tooltipPlacement,
174
175
  offset: 8
175
176
  });
176
- const describedBy = (() => {
177
- const ids = [];
178
- if (error || helpText) ids.push(describedById);
179
- if (tooltipEnabled) ids.push(tooltipId);
180
- return ids.length ? ids.join(" ") : void 0;
181
- })();
182
- return /* @__PURE__ */ jsxs(
177
+ const describedBy = getDescribedBy(
178
+ controlId,
179
+ { error, helpText },
180
+ tooltipEnabled ? tooltipId : void 0
181
+ );
182
+ return /* @__PURE__ */ jsx(
183
183
  InputContainer,
184
184
  {
185
185
  label,
@@ -188,116 +188,114 @@ function Select({
188
188
  fullWidth,
189
189
  error,
190
190
  helpText,
191
+ helpTextAddition,
191
192
  orientation,
192
193
  labelWidth,
193
194
  required,
194
195
  modified,
195
- children: [
196
- /* @__PURE__ */ jsx(
197
- Popover,
198
- {
199
- ref: popoverRef,
200
- anchorRef: triggerRef,
201
- open,
202
- fullWidth,
203
- onOpenChange: (next) => {
204
- setOpen(next);
205
- if (next) resetActiveToSelected();
206
- },
207
- contentId: listboxId,
208
- autoFocusContent: false,
209
- returnFocus: true,
210
- trigger: (toggle, icon, isOpen) => /* @__PURE__ */ jsx(
211
- Button,
212
- {
213
- disabled,
214
- ...tooltipEnabled ? triggerProps : {},
215
- ref: (node) => {
216
- triggerRef.current = node;
217
- if (tooltipEnabled) triggerProps.ref(node);
218
- },
219
- id: controlId,
220
- "data-cy": dataCy != null ? dataCy : "select-button",
221
- onKeyDown: handleKeyDown,
222
- fullWidth,
223
- variant,
224
- onClick: (e) => {
225
- resetActiveToSelected();
226
- toggle(e);
196
+ children: /* @__PURE__ */ jsx(
197
+ Popover,
198
+ {
199
+ ref: popoverRef,
200
+ anchorRef: triggerRef,
201
+ open,
202
+ fullWidth,
203
+ onOpenChange: (next) => {
204
+ setOpen(next);
205
+ if (next) resetActiveToSelected();
206
+ },
207
+ contentId: listboxId,
208
+ autoFocusContent: false,
209
+ returnFocus: true,
210
+ trigger: (toggle, icon, isOpen) => /* @__PURE__ */ jsx(
211
+ Button,
212
+ {
213
+ disabled,
214
+ ...tooltipEnabled ? triggerProps : {},
215
+ ref: (node) => {
216
+ triggerRef.current = node;
217
+ if (tooltipEnabled) triggerProps.ref(node);
218
+ },
219
+ id: controlId,
220
+ "data-cy": dataCy != null ? dataCy : "select-button",
221
+ onKeyDown: handleKeyDown,
222
+ fullWidth,
223
+ variant,
224
+ onClick: (e) => {
225
+ resetActiveToSelected();
226
+ toggle(e);
227
+ },
228
+ size,
229
+ style: minWidth != null ? { minWidth } : void 0,
230
+ type: "button",
231
+ "data-forminput": true,
232
+ "aria-haspopup": "listbox",
233
+ "aria-expanded": !!isOpen,
234
+ "aria-controls": listboxId,
235
+ "aria-invalid": Boolean(error) || void 0,
236
+ "aria-describedby": describedBy,
237
+ className: error ? styles.triggerInvalid : void 0,
238
+ children: /* @__PURE__ */ jsxs(
239
+ "span",
240
+ {
241
+ className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs",
242
+ style: { width: "100%" },
243
+ children: [
244
+ /* @__PURE__ */ jsx("span", { children: selected ? selected.label : /* @__PURE__ */ jsx("span", { className: "dbc-muted-text", children: placeholder }) }),
245
+ /* @__PURE__ */ jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [
246
+ onClear && selected && /* @__PURE__ */ jsx(
247
+ ClearButton,
248
+ {
249
+ onClick: onClear,
250
+ variant: variant === "header" ? "header" : "default",
251
+ as: "span",
252
+ revealOnHover: true
253
+ }
254
+ ),
255
+ /* @__PURE__ */ jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })
256
+ ] })
257
+ ]
258
+ }
259
+ )
260
+ }
261
+ ),
262
+ children: /* @__PURE__ */ jsxs(Menu, { onKeyDownCapture: handleKeyDown, role: "listbox", className: styles.menu, children: [
263
+ menuHeader ? /* @__PURE__ */ jsx(Menu.Header, { children: menuHeader }) : null,
264
+ options.map((opt, index) => {
265
+ const isSelected = typeof opt.value === "object" && typeof selectedValue === "object" && datakey ? (selectedValue == null ? void 0 : selectedValue[datakey]) === opt.value[datakey] : opt.value === selectedValue;
266
+ const isActive = index === activeIndex;
267
+ return /* @__PURE__ */ jsx(
268
+ Menu.Item,
269
+ {
270
+ active: isActive,
271
+ selected: isSelected,
272
+ itemRole: "option",
273
+ className: isSelected ? styles.selectedOption : void 0,
274
+ children: /* @__PURE__ */ jsx(
275
+ "button",
276
+ {
277
+ ref: (el) => {
278
+ optionRefs.current[index] = el;
279
+ },
280
+ type: "button",
281
+ tabIndex: isActive ? 0 : -1,
282
+ onClick: () => {
283
+ var _a;
284
+ onChange(opt.value);
285
+ (_a = popoverRef.current) == null ? void 0 : _a.close();
286
+ },
287
+ onFocus: () => setActiveIndex(index),
288
+ style: { display: "flex", alignItems: "center", width: "100%" },
289
+ children: opt.label
290
+ }
291
+ )
227
292
  },
228
- size,
229
- style: minWidth != null ? { minWidth } : void 0,
230
- type: "button",
231
- "data-forminput": true,
232
- "aria-haspopup": "listbox",
233
- "aria-expanded": !!isOpen,
234
- "aria-controls": listboxId,
235
- "aria-invalid": Boolean(error) || void 0,
236
- "aria-describedby": describedBy,
237
- className: modified ? styles.triggerModified : void 0,
238
- children: /* @__PURE__ */ jsxs(
239
- "span",
240
- {
241
- className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs",
242
- style: { width: "100%" },
243
- children: [
244
- /* @__PURE__ */ jsx("span", { children: selected ? selected.label : /* @__PURE__ */ jsx("span", { className: "dbc-muted-text", children: placeholder }) }),
245
- /* @__PURE__ */ jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [
246
- onClear && selected && /* @__PURE__ */ jsx(
247
- ClearButton,
248
- {
249
- onClick: onClear,
250
- variant: variant === "header" ? "header" : "default",
251
- as: "span",
252
- revealOnHover: true
253
- }
254
- ),
255
- /* @__PURE__ */ jsx("span", { style: { color: "var(--color-fg-subtle)", display: "inline-flex" }, children: icon })
256
- ] })
257
- ]
258
- }
259
- )
260
- }
261
- ),
262
- children: /* @__PURE__ */ jsxs(Menu, { onKeyDownCapture: handleKeyDown, role: "listbox", className: styles.menu, children: [
263
- menuHeader ? /* @__PURE__ */ jsx(Menu.Header, { children: menuHeader }) : null,
264
- options.map((opt, index) => {
265
- const isSelected = typeof opt.value === "object" && typeof selectedValue === "object" && datakey ? (selectedValue == null ? void 0 : selectedValue[datakey]) === opt.value[datakey] : opt.value === selectedValue;
266
- const isActive = index === activeIndex;
267
- return /* @__PURE__ */ jsx(
268
- Menu.Item,
269
- {
270
- active: isActive,
271
- selected: isSelected,
272
- itemRole: "option",
273
- className: isSelected ? styles.selectedOption : void 0,
274
- children: /* @__PURE__ */ jsx(
275
- "button",
276
- {
277
- ref: (el) => {
278
- optionRefs.current[index] = el;
279
- },
280
- type: "button",
281
- tabIndex: isActive ? 0 : -1,
282
- onClick: () => {
283
- var _a;
284
- onChange(opt.value);
285
- (_a = popoverRef.current) == null ? void 0 : _a.close();
286
- },
287
- onFocus: () => setActiveIndex(index),
288
- style: { display: "flex", alignItems: "center", width: "100%" },
289
- children: opt.label
290
- }
291
- )
292
- },
293
- String(opt.value)
294
- );
295
- })
296
- ] })
297
- }
298
- ),
299
- (error || helpText) && /* @__PURE__ */ jsx("span", { id: describedById, style: { display: "none" }, children: error != null ? error : helpText })
300
- ]
293
+ String(opt.value)
294
+ );
295
+ })
296
+ ] })
297
+ }
298
+ )
301
299
  }
302
300
  );
303
301
  }
package/dist/components/forms/select/Select.module.css CHANGED
@@ -1,36 +1,3 @@
1
- .triggerModified {
2
- background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, var(--color-bg-surface));
3
- border-color: color-mix(
4
- in srgb,
5
- var(--color-status-warning-border) 45%,
6
- var(--color-border-default)
7
- );
8
- border-left-color: var(--color-status-warning-border);
9
- border-left-width: 4px;
10
- }
11
-
12
- .triggerModified:hover:not([disabled]) {
13
- background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
14
- border-color: color-mix(
15
- in srgb,
16
- var(--color-status-warning-border) 60%,
17
- var(--color-border-default)
18
- );
19
- border-left-color: var(--color-status-warning-border);
20
- }
21
-
22
- .triggerModified:focus-visible {
23
- background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
24
- border-color: color-mix(
25
- in srgb,
26
- var(--color-status-warning-border) 75%,
27
- var(--color-border-default)
28
- );
29
- border-left-color: var(--color-status-warning-border);
30
- box-shadow: inset 0 0 0 1px
31
- color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
32
- }
33
-
34
1
  .selectedOption > button {
35
2
  background-color: var(--color-bg-toolbar-hover);
36
3
  }
@@ -39,3 +6,14 @@
39
6
  .selectedOption > button:focus-visible {
40
7
  background-color: var(--color-bg-toolbar-hover);
41
8
  }
9
+
10
+ /* Error: wins over modified styles (attribute bumps specificity over Button's own styles) */
11
+ .triggerInvalid[data-forminput],
12
+ .triggerInvalid[data-forminput]:hover:not([disabled]) {
13
+ border-color: var(--color-status-error);
14
+ }
15
+
16
+ .triggerInvalid[data-forminput]:focus-visible {
17
+ border-color: var(--color-status-error);
18
+ box-shadow: inset 0 0 0 1px var(--color-status-error);
19
+ }
package/dist/components/forms/text-area/Textarea.cjs CHANGED
@@ -6,6 +6,7 @@ var react = require('react');
6
6
  var useTooltipTrigger = require('../../../components/overlay/tooltip/useTooltipTrigger');
7
7
  var styles = require('./Textarea.module.css');
8
8
  var InputContainer = require('../input-container/InputContainer');
9
+ var messageIds = require('../input-container/messageIds');
9
10
 
10
11
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
11
12
 
@@ -77,10 +78,11 @@ const Textarea = function Textarea2({
77
78
  value,
78
79
  onChange: onInput,
79
80
  disabled,
80
- "aria-invalid": Boolean(error) || void 0
81
+ "aria-invalid": Boolean(error) || void 0,
82
+ "aria-describedby": messageIds.getDescribedBy(textareaId, { error, helpText }, rest["aria-describedby"])
81
83
  }
82
84
  ),
83
- [rest, textareaId, className, placeholder, rows, value, onInput, disabled, error]
85
+ [rest, textareaId, className, placeholder, rows, value, onInput, disabled, error, helpText]
84
86
  );
85
87
  const tooltipEnabled = Boolean(tooltip) && (showTooltip != null ? showTooltip : true);
86
88
  const { triggerProps } = useTooltipTrigger.useTooltipTrigger({
@@ -105,13 +107,7 @@ const Textarea = function Textarea2({
105
107
  fullWidth,
106
108
  required,
107
109
  labelAction,
108
- children: /* @__PURE__ */ jsxRuntime.jsx(
109
- "div",
110
- {
111
- className: [styles__default.default.container, modified ? styles__default.default.modified : ""].filter(Boolean).join(" "),
112
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...tooltipEnabled ? triggerProps : {}, children: inputField })
113
- }
114
- )
110
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: [styles__default.default.container, error ? styles__default.default.invalid : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...tooltipEnabled ? triggerProps : {}, children: inputField }) })
115
111
  }
116
112
  );
117
113
  };
package/dist/components/forms/text-area/Textarea.js CHANGED
@@ -4,6 +4,7 @@ import { useId, useRef, useCallback, useLayoutEffect, useMemo } from 'react';
4
4
  import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
5
5
  import styles from './Textarea.module.css';
6
6
  import { InputContainer } from '../input-container/InputContainer';
7
+ import { getDescribedBy } from '../input-container/messageIds';
7
8
 
8
9
  const Textarea = function Textarea2({
9
10
  value,
@@ -71,10 +72,11 @@ const Textarea = function Textarea2({
71
72
  value,
72
73
  onChange: onInput,
73
74
  disabled,
74
- "aria-invalid": Boolean(error) || void 0
75
+ "aria-invalid": Boolean(error) || void 0,
76
+ "aria-describedby": getDescribedBy(textareaId, { error, helpText }, rest["aria-describedby"])
75
77
  }
76
78
  ),
77
- [rest, textareaId, className, placeholder, rows, value, onInput, disabled, error]
79
+ [rest, textareaId, className, placeholder, rows, value, onInput, disabled, error, helpText]
78
80
  );
79
81
  const tooltipEnabled = Boolean(tooltip) && (showTooltip != null ? showTooltip : true);
80
82
  const { triggerProps } = useTooltipTrigger({
@@ -99,13 +101,7 @@ const Textarea = function Textarea2({
99
101
  fullWidth,
100
102
  required,
101
103
  labelAction,
102
- children: /* @__PURE__ */ jsx(
103
- "div",
104
- {
105
- className: [styles.container, modified ? styles.modified : ""].filter(Boolean).join(" "),
106
- children: /* @__PURE__ */ jsx("div", { ...tooltipEnabled ? triggerProps : {}, children: inputField })
107
- }
108
- )
104
+ children: /* @__PURE__ */ jsx("div", { className: [styles.container, error ? styles.invalid : ""].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx("div", { ...tooltipEnabled ? triggerProps : {}, children: inputField }) })
109
105
  }
110
106
  );
111
107
  };