@db-ux/react-core-components 2.0.7 → 2.0.9

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 (16) hide show
  1. package/dist/components/button/button.js +1 -1
  2. package/dist/components/card/card.js +1 -1
  3. package/dist/components/checkbox/checkbox.js +2 -1
  4. package/dist/components/custom-select/custom-select.js +70 -60
  5. package/dist/components/custom-select/model.d.ts +3 -3
  6. package/dist/components/link/link.js +1 -1
  7. package/dist/components/navigation-item/navigation-item.js +1 -1
  8. package/dist/components/radio/model.d.ts +1 -3
  9. package/dist/components/radio/radio.d.ts +1 -1
  10. package/dist/components/radio/radio.js +2 -1
  11. package/dist/components/select/select.js +5 -5
  12. package/dist/components/switch/switch.js +2 -1
  13. package/dist/components/textarea/textarea.js +2 -2
  14. package/dist/shared/model.d.ts +1 -0
  15. package/dist/utils/document-click-listener.js +4 -4
  16. package/package.json +3 -3
package/dist/components/button/button.js CHANGED
@@ -6,8 +6,8 @@ import { cls, getBoolean, getBooleanAsString, getHideProp } from "../../utils";
6
6
  function DBButtonFn(props, component) {
7
7
  const _ref = component || useRef(component);
8
8
  function handleClick(event) {
9
- event.stopPropagation();
10
9
  if (props.onClick) {
10
+ event.stopPropagation();
11
11
  props.onClick(event);
12
12
  }
13
13
  }
package/dist/components/card/card.js CHANGED
@@ -6,8 +6,8 @@ import { cls } from "../../utils";
6
6
  function DBCardFn(props, component) {
7
7
  const _ref = component || useRef(component);
8
8
  function handleClick(event) {
9
- event.stopPropagation();
10
9
  if (props.onClick) {
10
+ event.stopPropagation();
11
11
  props.onClick(event);
12
12
  }
13
13
  }
package/dist/components/checkbox/checkbox.js CHANGED
@@ -6,6 +6,7 @@ import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_MES
6
6
  import DBInfotext from "../infotext/infotext";
7
7
  import { cls, delay, getBoolean, getHideProp, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
8
8
  function DBCheckboxFn(props, component) {
9
+ var _a;
9
10
  const _ref = component || useRef(component);
10
11
  const [initialized, setInitialized] = useState(() => false);
11
12
  const [_id, set_id] = useState(() => undefined);
@@ -114,7 +115,7 @@ function DBCheckboxFn(props, component) {
114
115
  }, [initialized, _ref.current, props.checked]);
115
116
  return (React.createElement("div", Object.assign({}, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-checkbox", props.className), "data-size": props.size, "data-hide-label": getHideProp(props.showLabel) }),
116
117
  React.createElement("label", { htmlFor: _id },
117
- React.createElement("input", Object.assign({ type: "checkbox", "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: _id, name: props.name, checked: getBoolean(props.checked, "checked"), disabled: getBoolean(props.disabled, "disabled"), value: props.value, required: getBoolean(props.required, "required"), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": _descByIds })),
118
+ React.createElement("input", Object.assign({ type: "checkbox", "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: _id, name: props.name, checked: getBoolean(props.checked, "checked"), disabled: getBoolean(props.disabled, "disabled"), value: props.value, required: getBoolean(props.required, "required"), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": (_a = props.ariaDescribedBy) !== null && _a !== void 0 ? _a : _descByIds })),
118
119
  props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children)),
119
120
  stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
120
121
  hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, props.validMessage || DEFAULT_VALID_MESSAGE)) : null,
package/dist/components/custom-select/custom-select.js CHANGED
@@ -14,7 +14,7 @@ import DBTooltip from "../tooltip/tooltip";
14
14
  import DBInput from "../input/input";
15
15
  import { DocumentClickListener } from "../../utils/document-click-listener";
16
16
  function DBCustomSelectFn(props, component) {
17
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
17
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
18
18
  props = Object.assign({ clearSelectionText: "Clear selection", showClearSelection: true }, props);
19
19
  const _ref = component || useRef(component);
20
20
  const detailsRef = useRef(null);
@@ -87,10 +87,16 @@ function DBCustomSelectFn(props, component) {
87
87
  }
88
88
  function handleDropdownToggle(event) {
89
89
  if (props.onDropdownToggle) {
90
+ event.stopPropagation();
90
91
  props.onDropdownToggle(event);
91
92
  }
92
93
  if (event.target.open) {
93
94
  set_documentClickListenerCallbackId(new DocumentClickListener().addCallback((event) => handleDocumentClose(event)));
95
+ handleAutoPlacement();
96
+ if (!event.target.dataset.test) {
97
+ // We need this workaround for snapshot testing
98
+ handleOpenByKeyboardFocus();
99
+ }
94
100
  }
95
101
  else {
96
102
  if (_documentClickListenerCallbackId) {
@@ -134,9 +140,12 @@ function DBCustomSelectFn(props, component) {
134
140
  return ((_b = (_a = option.id) !== null && _a !== void 0 ? _a : option.value) !== null && _b !== void 0 ? _b : uuid()).toString();
135
141
  }
136
142
  function getTagRemoveLabel(index) {
137
- return props.removeTagsTexts && props.removeTagsTexts.length > index
138
- ? props.removeTagsTexts.at(index)
139
- : `${DEFAULT_REMOVE} ${_selectedOptions ? getOptionLabel(_selectedOptions[index]) : ""}`;
143
+ if (props.removeTagsTexts && props.removeTagsTexts.length > index) {
144
+ return props.removeTagsTexts.at(index);
145
+ }
146
+ else {
147
+ return `${DEFAULT_REMOVE} ${_selectedOptions ? getOptionLabel(_selectedOptions[index]) : ""}`;
148
+ }
140
149
  }
141
150
  function handleTagRemove(option, event) {
142
151
  event.stopPropagation();
@@ -149,15 +158,15 @@ function DBCustomSelectFn(props, component) {
149
158
  if (dropdown) {
150
159
  delay(() => {
151
160
  handleDataOutside(dropdown);
152
- }, 100);
161
+ }, 1);
153
162
  }
154
163
  }
155
164
  }
156
165
  function handleArrowDownUp(event) {
157
166
  var _a, _b, _c, _d, _e, _f, _g;
158
167
  if ((_a = detailsRef.current) === null || _a === void 0 ? void 0 : _a.open) {
159
- if (document) {
160
- const activeElement = document.activeElement;
168
+ if (self.document) {
169
+ const activeElement = self.document.activeElement;
161
170
  if (activeElement) {
162
171
  // 1. we check if we are currently focusing a checkbox in the dropdown
163
172
  const isCheckbox = activeElement.getAttribute("type") === "checkbox" ||
@@ -214,8 +223,6 @@ function DBCustomSelectFn(props, component) {
214
223
  }
215
224
  }
216
225
  }
217
- event.stopPropagation();
218
- event.preventDefault();
219
226
  }
220
227
  else if (event.key === "ArrowDown" || event.key === "ArrowRight") {
221
228
  // Open dropdown with arrows see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#keyboardinteraction
@@ -224,15 +231,14 @@ function DBCustomSelectFn(props, component) {
224
231
  detailsRef.current.open = true;
225
232
  }
226
233
  handleOpenByKeyboardFocus();
227
- event.stopPropagation();
228
- event.preventDefault();
229
234
  }
235
+ event.stopPropagation();
236
+ event.preventDefault();
230
237
  }
231
238
  function handleKeyboardPress(event) {
232
239
  var _a;
233
- if (event.key === "Escape" &&
234
- detailsRef.current &&
235
- ((_a = detailsRef.current) === null || _a === void 0 ? void 0 : _a.open)) {
240
+ event.stopPropagation();
241
+ if (event.key === "Escape" && ((_a = detailsRef.current) === null || _a === void 0 ? void 0 : _a.open)) {
236
242
  handleClose("close");
237
243
  handleSummaryFocus();
238
244
  }
@@ -252,25 +258,29 @@ function DBCustomSelectFn(props, component) {
252
258
  else if (detailsRef.current.open && (event === null || event === void 0 ? void 0 : event.relatedTarget)) {
253
259
  const relatedTarget = event.relatedTarget;
254
260
  if (!detailsRef.current.contains(relatedTarget)) {
255
- detailsRef.current.open = false;
261
+ // We need to use delay here because the combination of `contains`
262
+ // and changing the DOM element causes a race condition inside browser
263
+ delay(() => (detailsRef.current.open = false), 1);
256
264
  }
257
265
  }
258
266
  }
259
267
  }
260
268
  function handleDocumentClose(event) {
261
269
  var _a;
262
- // stencil is sending a custom event which wraps the pointer event into details
263
- const target = event.target;
264
- if (((_a = detailsRef.current) === null || _a === void 0 ? void 0 : _a.open) && !detailsRef.current.contains(target)) {
265
- detailsRef.current.open = false;
270
+ if (event) {
271
+ // stencil is sending a custom event which wraps the pointer event into details
272
+ const target = event.target;
273
+ if (((_a = detailsRef.current) === null || _a === void 0 ? void 0 : _a.open) && !detailsRef.current.contains(target)) {
274
+ detailsRef.current.open = false;
275
+ }
266
276
  }
267
277
  }
268
278
  function handleOptionSelected(values) {
269
279
  const skip = new Date().getTime() - _internalChangeTimestamp < 200;
270
280
  if (skip)
271
281
  return;
282
+ set_values(values);
272
283
  if (props.onOptionSelected) {
273
- set_values(values);
274
284
  props.onOptionSelected(values !== null && values !== void 0 ? values : []);
275
285
  }
276
286
  set_internalChangeTimestamp(new Date().getTime());
@@ -291,7 +301,8 @@ function DBCustomSelectFn(props, component) {
291
301
  }
292
302
  }
293
303
  }
294
- function handleSelectAll() {
304
+ function handleSelectAll(event) {
305
+ event.stopPropagation();
295
306
  if ((_values === null || _values === void 0 ? void 0 : _values.length) === amountOptions) {
296
307
  handleOptionSelected([]);
297
308
  }
@@ -323,12 +334,12 @@ function DBCustomSelectFn(props, component) {
323
334
  delay(() => {
324
335
  // Takes some time until element can be focused
325
336
  checkbox.focus();
326
- }, 100);
337
+ }, 1);
327
338
  }
328
339
  }
329
340
  }
330
341
  }
331
- function handleOpenByKeyboardFocus(onlySearch) {
342
+ function handleOpenByKeyboardFocus() {
332
343
  if (detailsRef.current) {
333
344
  // Focus search if possible
334
345
  const search = getSearchInput(detailsRef.current);
@@ -336,9 +347,9 @@ function DBCustomSelectFn(props, component) {
336
347
  delay(() => {
337
348
  // Takes some time until element can be focused
338
349
  search.focus();
339
- }, 100);
350
+ }, 1);
340
351
  }
341
- else if (!onlySearch) {
352
+ else {
342
353
  // Focus first checkbox otherwise
343
354
  handleFocusFirstDropdownCheckbox();
344
355
  }
@@ -347,25 +358,33 @@ function DBCustomSelectFn(props, component) {
347
358
  function handleSearch(event) {
348
359
  event.stopPropagation();
349
360
  const filterText = event.target.value;
350
- set_options(!props.options || !filterText || filterText.length === 0
351
- ? props.options
352
- : props.options.filter((option) => !option.isGroupTitle &&
361
+ if (!props.options || !filterText || filterText.length === 0) {
362
+ set_options(props.options);
363
+ }
364
+ else {
365
+ set_options(props.options.filter((option) => !option.isGroupTitle &&
353
366
  getOptionLabel(option)
354
367
  .toLowerCase()
355
368
  .includes(filterText.toLowerCase())));
369
+ }
356
370
  }
357
- function handleClearAll() {
371
+ function handleClearAll(event) {
372
+ event.stopPropagation();
358
373
  handleOptionSelected([]);
359
374
  handleSummaryFocus();
360
375
  }
361
376
  function handleSummaryFocus() {
362
- var _a, _b;
363
- (_b = (_a = detailsRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("summary")) === null || _b === void 0 ? void 0 : _b.focus();
377
+ var _a;
378
+ if (detailsRef.current) {
379
+ (_a = detailsRef.current
380
+ .querySelector("summary")) === null || _a === void 0 ? void 0 : _a.focus();
381
+ }
364
382
  }
365
383
  const [selectAllChecked, setSelectAllChecked] = useState(() => false);
366
384
  const [selectAllIndeterminate, setSelectAllIndeterminate] = useState(() => false);
367
- function satisfyReact() {
368
- // This is an empty function to satisfy React
385
+ function satisfyReact(event) {
386
+ // This is a function to satisfy React
387
+ event.stopPropagation();
369
388
  }
370
389
  useEffect(() => {
371
390
  var _a;
@@ -384,19 +403,6 @@ function DBCustomSelectFn(props, component) {
384
403
  }, []);
385
404
  useEffect(() => {
386
405
  if (detailsRef.current) {
387
- const summary = detailsRef.current.querySelector("summary");
388
- if (summary) {
389
- summary.addEventListener("click", () => {
390
- handleAutoPlacement();
391
- handleOpenByKeyboardFocus(true);
392
- });
393
- summary.addEventListener("keydown", (event) => {
394
- var _a;
395
- if (event.code === "Space" && !((_a = detailsRef.current) === null || _a === void 0 ? void 0 : _a.open)) {
396
- handleOpenByKeyboardFocus();
397
- }
398
- });
399
- }
400
406
  detailsRef.current.addEventListener("focusout", (event) => handleClose(event));
401
407
  }
402
408
  }, [detailsRef.current]);
@@ -417,10 +423,11 @@ function DBCustomSelectFn(props, component) {
417
423
  }
418
424
  }, [_id]);
419
425
  useEffect(() => {
426
+ var _a;
420
427
  if (detailsRef.current) {
421
428
  const summary = detailsRef.current.querySelector("summary");
422
429
  if (summary) {
423
- summary.setAttribute("aria-describedby", _descByIds || "");
430
+ summary.setAttribute("aria-describedby", (_a = props.ariaDescribedBy) !== null && _a !== void 0 ? _a : (_descByIds || ""));
424
431
  }
425
432
  }
426
433
  }, [detailsRef.current, _descByIds]);
@@ -433,10 +440,12 @@ function DBCustomSelectFn(props, component) {
433
440
  }
434
441
  }, [props.showNoResults, _options]);
435
442
  useEffect(() => {
436
- setSelectAllEnabled(Boolean(props.multiple && (props.showSelectAll || amountOptions > 5)));
443
+ var _a;
444
+ setSelectAllEnabled(Boolean(props.multiple && ((_a = props.showSelectAll) !== null && _a !== void 0 ? _a : amountOptions > 5)));
437
445
  }, [props.showSelectAll, amountOptions, props.multiple]);
438
446
  useEffect(() => {
439
- setSearchEnabled(props.showSearch || amountOptions > 9);
447
+ var _a;
448
+ setSearchEnabled((_a = props.showSearch) !== null && _a !== void 0 ? _a : amountOptions > 9);
440
449
  }, [props.showSearch, amountOptions]);
441
450
  useEffect(() => {
442
451
  var _a;
@@ -471,15 +480,16 @@ function DBCustomSelectFn(props, component) {
471
480
  setAmountOptions((_b = (_a = props.options) === null || _a === void 0 ? void 0 : _a.filter((option) => !option.isGroupTitle).length) !== null && _b !== void 0 ? _b : 0);
472
481
  }, [props.options]);
473
482
  useEffect(() => {
474
- if (_options === null || _options === void 0 ? void 0 : _options.length) {
475
- set_selectedOptions(_options === null || _options === void 0 ? void 0 : _options.filter((option) => {
483
+ var _a, _b;
484
+ if ((_a = props.options) === null || _a === void 0 ? void 0 : _a.length) {
485
+ set_selectedOptions((_b = props.options) === null || _b === void 0 ? void 0 : _b.filter((option) => {
476
486
  if (!option.value || !(_values === null || _values === void 0 ? void 0 : _values["includes"])) {
477
487
  return false;
478
488
  }
479
489
  return !option.isGroupTitle && (_values === null || _values === void 0 ? void 0 : _values.includes(option.value));
480
490
  }));
481
491
  }
482
- }, [_options, _values]);
492
+ }, [props.options, _values]);
483
493
  useEffect(() => {
484
494
  if (_selectedOptions === null || _selectedOptions === void 0 ? void 0 : _selectedOptions.length) {
485
495
  if (props.selectedType === "amount") {
@@ -518,7 +528,7 @@ function DBCustomSelectFn(props, component) {
518
528
  ? "above"
519
529
  : props.variant, "data-required": getBooleanAsString(props.required), "data-placement": props.placement, "data-selected-type": props.multiple ? props.selectedType : "text", "data-hide-label": getHideProp(props.showLabel), "data-icon": props.icon, "data-hide-icon": getHideProp(props.showIcon) }),
520
530
  React.createElement("label", { id: _labelId }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL,
521
- React.createElement("select", { role: "none", hidden: true, id: _selectId, tabIndex: -1, ref: selectRef, form: props.form, name: props.name, multiple: getBoolean(props.multiple, "multiple"), disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), onChange: (event) => satisfyReact() }, (_options === null || _options === void 0 ? void 0 : _options.length) ? (React.createElement(React.Fragment, null, _options === null || _options === void 0 ? void 0 : _options.map((option) => (React.createElement("option", { disabled: option.disabled, value: option.value, key: "native-select-option-" + getOptionKey(option) }, getOptionLabel(option)))))) : null)),
531
+ React.createElement("select", { role: "none", hidden: true, id: _selectId, tabIndex: -1, ref: selectRef, form: props.form, name: props.name, multiple: getBoolean(props.multiple, "multiple"), disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), onChange: (event) => satisfyReact(event) }, ((_b = props.options) === null || _b === void 0 ? void 0 : _b.length) ? (React.createElement(React.Fragment, null, (_c = props.options) === null || _c === void 0 ? void 0 : _c.map((option) => (React.createElement("option", { disabled: option.disabled, value: option.value, key: "native-select-option-" + getOptionKey(option) }, getOptionLabel(option)))))) : null)),
522
532
  React.createElement("details", { ref: detailsRef, open: props.open, onToggle: (event) => handleDropdownToggle(event), onKeyDown: (event) => handleKeyboardPress(event) },
523
533
  props.children,
524
534
  props.options ? (React.createElement(React.Fragment, null,
@@ -527,23 +537,23 @@ function DBCustomSelectFn(props, component) {
527
537
  props.selectedType === "tag" ? (React.createElement("div", null, _selectedOptions === null || _selectedOptions === void 0 ? void 0 : _selectedOptions.map((option, index) => (React.createElement(DBTag, { emphasis: "strong", behavior: "removable", removeButton: getTagRemoveLabel(index), onRemove: (event) => handleTagRemove(option, event), key: "tag-" + getOptionKey(option) }, getOptionLabel(option)))))) : null),
528
538
  React.createElement(DBCustomSelectDropdown, { width: props.dropdownWidth },
529
539
  searchEnabled ? (React.createElement("div", null,
530
- React.createElement(DBInput, { type: "search", ref: searchInputRef, name: _id, form: _id, showLabel: false, label: (_b = props.searchLabel) !== null && _b !== void 0 ? _b : DEFAULT_LABEL, placeholder: (_c = props.searchPlaceholder) !== null && _c !== void 0 ? _c : props.searchLabel, ariaDescribedBy: _hasNoOptions || props.showLoading
540
+ React.createElement(DBInput, { type: "search", ref: searchInputRef, name: _id, form: _id, showLabel: false, label: (_d = props.searchLabel) !== null && _d !== void 0 ? _d : DEFAULT_LABEL, placeholder: (_e = props.searchPlaceholder) !== null && _e !== void 0 ? _e : props.searchLabel, ariaDescribedBy: _hasNoOptions || props.showLoading
531
541
  ? _infoTextId
532
542
  : undefined, onInput: (event) => handleSearch(event) }))) : null,
533
- _hasNoOptions || props.showLoading ? (React.createElement(DBInfotext, { id: _infoTextId, icon: _hasNoOptions ? undefined : "circular_arrows", semantic: _hasNoOptions ? "warning" : "informational" }, (_d = (_hasNoOptions ? props.noResultsText : props.loadingText)) !== null && _d !== void 0 ? _d : DEFAULT_MESSAGE)) : (React.createElement(React.Fragment, null,
543
+ _hasNoOptions || props.showLoading ? (React.createElement(DBInfotext, { id: _infoTextId, icon: _hasNoOptions ? undefined : "circular_arrows", semantic: _hasNoOptions ? "warning" : "informational" }, (_f = (_hasNoOptions ? props.noResultsText : props.loadingText)) !== null && _f !== void 0 ? _f : DEFAULT_MESSAGE)) : (React.createElement(React.Fragment, null,
534
544
  React.createElement(React.Fragment, null,
535
545
  selectAllEnabled ? (React.createElement("div", null,
536
546
  React.createElement("div", { className: "db-checkbox db-custom-select-list-item" },
537
547
  React.createElement("label", null,
538
- React.createElement("input", { type: "checkbox", value: "select-all", ref: selectAllRef, form: _id, checked: selectAllChecked, onChange: (event) => handleSelectAll() }),
548
+ React.createElement("input", { type: "checkbox", value: "select-all", ref: selectAllRef, form: _id, checked: selectAllChecked, onChange: (event) => handleSelectAll(event) }),
539
549
  getSelectAllLabel())))) : null,
540
- React.createElement(DBCustomSelectList, { multiple: getBoolean(props.multiple, "multiple"), label: (_f = (_e = props.ariaListLabel) !== null && _e !== void 0 ? _e : props.label) !== null && _f !== void 0 ? _f : DEFAULT_LABEL }, _options === null || _options === void 0 ? void 0 : _options.map((option) => (React.createElement(DBCustomSelectListItem, { type: props.multiple ? "checkbox" : "radio", showDivider: option.showDivider, icon: option.icon, isGroupTitle: option.isGroupTitle, groupTitle: getOptionLabel(option), name: _id, checked: getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: (event) => handleSelect(option.value), key: "custom-select-list-item-" + getOptionKey(option) }, !option.isGroupTitle ? (React.createElement(React.Fragment, null, getOptionLabel(option))) : null))))))),
550
+ React.createElement(DBCustomSelectList, { multiple: getBoolean(props.multiple, "multiple"), label: (_h = (_g = props.ariaListLabel) !== null && _g !== void 0 ? _g : props.label) !== null && _h !== void 0 ? _h : DEFAULT_LABEL }, _options === null || _options === void 0 ? void 0 : _options.map((option) => (React.createElement(DBCustomSelectListItem, { type: props.multiple ? "checkbox" : "radio", showDivider: option.showDivider, icon: option.icon, isGroupTitle: option.isGroupTitle, groupTitle: getOptionLabel(option), name: _id, checked: getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: (event) => handleSelect(option.value), key: "custom-select-list-item-" + getOptionKey(option) }, !option.isGroupTitle ? (React.createElement(React.Fragment, null, getOptionLabel(option))) : null))))))),
541
551
  React.createElement("div", null,
542
- React.createElement(DBButton, { variant: "ghost", width: "full", icon: "cross", size: "small", name: _id, form: _id, onClick: (event) => handleClose("close") }, (_g = props.mobileCloseButtonText) !== null && _g !== void 0 ? _g : DEFAULT_CLOSE_BUTTON))))) : null),
543
- ((_h = props.showClearSelection) !== null && _h !== void 0 ? _h : true) && (_values === null || _values === void 0 ? void 0 : _values.length) ? (React.createElement(DBButton, { icon: "cross", variant: "ghost", size: "small", noText: true, name: _id, form: _id, onClick: (event) => handleClearAll() },
552
+ React.createElement(DBButton, { variant: "ghost", width: "full", icon: "cross", size: "small", name: _id, form: _id, onClick: (event) => handleClose("close") }, (_j = props.mobileCloseButtonText) !== null && _j !== void 0 ? _j : DEFAULT_CLOSE_BUTTON))))) : null),
553
+ ((_k = props.showClearSelection) !== null && _k !== void 0 ? _k : true) && (_values === null || _values === void 0 ? void 0 : _values.length) ? (React.createElement(DBButton, { icon: "cross", variant: "ghost", size: "small", noText: true, name: _id, form: _id, onClick: (event) => handleClearAll(event) },
544
554
  props.clearSelectionText,
545
555
  React.createElement(DBTooltip, { placement: "top" }, props.clearSelectionText))) : null,
546
- React.createElement("span", { "aria-hidden": getBooleanAsString(true), id: _placeholderId }, (_j = props.placeholder) !== null && _j !== void 0 ? _j : props.label),
556
+ React.createElement("span", { "aria-hidden": getBooleanAsString(true), id: _placeholderId }, (_l = props.placeholder) !== null && _l !== void 0 ? _l : props.label),
547
557
  stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
548
558
  hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, props.validMessage || DEFAULT_VALID_MESSAGE)) : null,
549
559
  React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, _invalidMessage),
package/dist/components/custom-select/model.d.ts CHANGED
@@ -176,11 +176,11 @@ export type DBCustomSelectDefaultState = {
176
176
  handleTagRemove: (option: CustomSelectOptionType, event?: any) => void;
177
177
  handleSummaryFocus: () => void;
178
178
  handleSelect: (value?: string) => void;
179
- handleSelectAll: () => void;
180
- handleClearAll: () => void;
179
+ handleSelectAll: (event: any) => void;
180
+ handleClearAll: (event: any) => void;
181
181
  handleDropdownToggle: (event: any) => void;
182
182
  handleDocumentClose: (event: any) => void;
183
- handleOpenByKeyboardFocus: (onlySearch?: boolean) => void;
183
+ handleOpenByKeyboardFocus: () => void;
184
184
  handleFocusFirstDropdownCheckbox: (activeElement?: Element) => void;
185
185
  handleKeyboardPress: (event: any) => void;
186
186
  handleArrowDownUp: (event: any) => void;
package/dist/components/link/link.js CHANGED
@@ -7,8 +7,8 @@ function DBLinkFn(props, component) {
7
7
  var _a;
8
8
  const _ref = component || useRef(component);
9
9
  function handleClick(event) {
10
- event.stopPropagation();
11
10
  if (props.onClick) {
11
+ event.stopPropagation();
12
12
  props.onClick(event);
13
13
  }
14
14
  }
package/dist/components/navigation-item/navigation-item.js CHANGED
@@ -25,8 +25,8 @@ function DBNavigationItemFn(props, component) {
25
25
  }
26
26
  }
27
27
  function handleClick(event) {
28
- event.stopPropagation();
29
28
  if (props.onClick) {
29
+ event.stopPropagation();
30
30
  props.onClick(event);
31
31
  }
32
32
  if (hasAreaPopup) {
package/dist/components/radio/model.d.ts CHANGED
@@ -1,7 +1,5 @@
1
1
  import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormProps, FormState, GlobalProps, GlobalState, InitializedState, SizeProps } from '../../shared/model';
2
- export type DBRadioDefaultProps = {
3
- describedbyid?: string;
4
- };
2
+ export type DBRadioDefaultProps = {};
5
3
  export type DBRadioProps = DBRadioDefaultProps & GlobalProps & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & FormCheckProps & SizeProps;
6
4
  export type DBRadioDefaultState = {};
7
5
  export type DBRadioState = DBRadioDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & InitializedState;
package/dist/components/radio/radio.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import * as React from "react";
2
- declare const DBRadio: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, "required" | "value" | "size" | "checked" | keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | "showLabel"> & import("./model").DBRadioDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").CustomFormProps & import("../../shared/model").BaseFormProps & import("../../shared/model").RequiredProps & import("../../shared/model").ShowLabelProps & import("../../shared/model").ValueProps & import("../../shared/model").FormCheckProps & import("../../shared/model").SizeProps & React.RefAttributes<any>>;
2
+ declare const DBRadio: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, "required" | "value" | "size" | "checked" | keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | "showLabel"> & import("../../shared/model").GlobalProps & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").CustomFormProps & import("../../shared/model").BaseFormProps & import("../../shared/model").RequiredProps & import("../../shared/model").ShowLabelProps & import("../../shared/model").ValueProps & import("../../shared/model").FormCheckProps & import("../../shared/model").SizeProps & React.RefAttributes<any>>;
3
3
  export default DBRadio;
package/dist/components/radio/radio.js CHANGED
@@ -4,6 +4,7 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
4
4
  import { useState, useRef, useEffect, forwardRef } from "react";
5
5
  import { cls, getBoolean, getHideProp, uuid } from "../../utils";
6
6
  function DBRadioFn(props, component) {
7
+ var _a;
7
8
  const _ref = component || useRef(component);
8
9
  const [initialized, setInitialized] = useState(() => false);
9
10
  const [_id, set_id] = useState(() => undefined);
@@ -36,7 +37,7 @@ function DBRadioFn(props, component) {
36
37
  }
37
38
  }, [initialized, _ref.current, props.checked]);
38
39
  return (React.createElement("label", Object.assign({ "data-size": props.size, "data-hide-label": getHideProp(props.showLabel) }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-radio", props.className), htmlFor: _id }),
39
- React.createElement("input", Object.assign({ type: "radio", "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: _id, name: props.name, checked: getBoolean(props.checked, "checked"), disabled: getBoolean(props.disabled, "disabled"), "aria-describedby": props.describedbyid, value: props.value, required: getBoolean(props.required, "required"), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event) })),
40
+ React.createElement("input", Object.assign({ type: "radio", "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: _id, name: props.name, checked: getBoolean(props.checked, "checked"), disabled: getBoolean(props.disabled, "disabled"), "aria-describedby": (_a = props.describedbyid) !== null && _a !== void 0 ? _a : props.ariaDescribedBy, value: props.value, required: getBoolean(props.required, "required"), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event) })),
40
41
  props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children)));
41
42
  }
42
43
  const DBRadio = forwardRef(DBRadioFn);
package/dist/components/select/select.js CHANGED
@@ -6,7 +6,7 @@ import { cls, delay, getBoolean, getHideProp, hasVoiceOver, stringPropVisible, u
6
6
  import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
7
7
  import DBInfotext from "../infotext/infotext";
8
8
  function DBSelectFn(props, component) {
9
- var _a, _b, _c;
9
+ var _a, _b, _c, _d;
10
10
  const _ref = component || useRef(component);
11
11
  const [_id, set_id] = useState(() => undefined);
12
12
  const [_messageId, set_messageId] = useState(() => undefined);
@@ -52,8 +52,8 @@ function DBSelectFn(props, component) {
52
52
  }
53
53
  }
54
54
  function handleClick(event) {
55
- event.stopPropagation();
56
55
  if (props.onClick) {
56
+ event.stopPropagation();
57
57
  props.onClick(event);
58
58
  }
59
59
  }
@@ -126,15 +126,15 @@ function DBSelectFn(props, component) {
126
126
  }, [props.value]);
127
127
  return (React.createElement("div", Object.assign({}, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-select", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel), "data-icon": props.icon, "data-hide-icon": getHideProp(props.showIcon) }),
128
128
  React.createElement("label", { htmlFor: _id }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL),
129
- React.createElement("select", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { required: getBoolean(props.required, "required"), disabled: getBoolean(props.disabled, "disabled"), id: _id, name: props.name, size: props.size, value: props.value, autoComplete: props.autocomplete, multiple: props.multiple, onInput: (event) => handleInput(event), onClick: (event) => handleClick(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": _descByIds }),
129
+ React.createElement("select", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { required: getBoolean(props.required, "required"), disabled: getBoolean(props.disabled, "disabled"), id: _id, name: props.name, size: props.size, value: props.value, autoComplete: props.autocomplete, multiple: props.multiple, onInput: (event) => handleInput(event), onClick: (event) => handleClick(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": (_b = props.ariaDescribedBy) !== null && _b !== void 0 ? _b : _descByIds }),
130
130
  React.createElement("option", { hidden: true }),
131
- props.options ? (React.createElement(React.Fragment, null, (_b = props.options) === null || _b === void 0 ? void 0 : _b.map((option) => {
131
+ props.options ? (React.createElement(React.Fragment, null, (_c = props.options) === null || _c === void 0 ? void 0 : _c.map((option) => {
132
132
  var _a;
133
133
  return (React.createElement(React.Fragment, { key: uuid() },
134
134
  option.options ? (React.createElement("optgroup", { label: getOptionLabel(option) }, (_a = option.options) === null || _a === void 0 ? void 0 : _a.map((optgroupOption) => (React.createElement("option", { key: optgroupOption.value.toString(), value: optgroupOption.value, disabled: optgroupOption.disabled }, getOptionLabel(optgroupOption)))))) : null,
135
135
  !option.options ? (React.createElement("option", { value: option.value, disabled: option.disabled }, getOptionLabel(option))) : null));
136
136
  }))) : (React.createElement(React.Fragment, null, props.children))),
137
- React.createElement("span", { id: _placeholderId }, (_c = props.placeholder) !== null && _c !== void 0 ? _c : props.label),
137
+ React.createElement("span", { id: _placeholderId }, (_d = props.placeholder) !== null && _d !== void 0 ? _d : props.label),
138
138
  stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
139
139
  hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, props.validMessage || DEFAULT_VALID_MESSAGE)) : null,
140
140
  React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, _invalidMessage),
package/dist/components/switch/switch.js CHANGED
@@ -4,6 +4,7 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
4
4
  import { useState, useRef, useEffect, forwardRef } from "react";
5
5
  import { cls, getBoolean, getBooleanAsString, getHideProp, uuid, } from "../../utils";
6
6
  function DBSwitchFn(props, component) {
7
+ var _a;
7
8
  const _ref = component || useRef(component);
8
9
  const [_id, set_id] = useState(() => undefined);
9
10
  const [_checked, set_checked] = useState(() => { var _a; return (_a = props["defaultChecked"]) !== null && _a !== void 0 ? _a : false; });
@@ -38,7 +39,7 @@ function DBSwitchFn(props, component) {
38
39
  }
39
40
  }, [props.checked]);
40
41
  return (React.createElement("label", Object.assign({ "data-visual-aid": getBooleanAsString(props.visualAid), "data-size": props.size, "data-hide-label": getHideProp(props.showLabel), "data-emphasis": props.emphasis, htmlFor: _id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-switch", props.className) }),
41
- React.createElement("input", Object.assign({ type: "checkbox", role: "switch", id: _id, "aria-checked": getBooleanAsString(_checked), ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { checked: getBoolean(props.checked, "checked"), value: props.value, disabled: getBoolean(props.disabled, "disabled"), "aria-describedby": props.describedbyid, "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, name: props.name, required: getBoolean(props.required, "required"), "data-aid-icon": props.icon, "data-aid-icon-after": props.iconAfter, onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event) })),
42
+ React.createElement("input", Object.assign({ type: "checkbox", role: "switch", id: _id, "aria-checked": getBooleanAsString(_checked), ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { checked: getBoolean(props.checked, "checked"), value: props.value, disabled: getBoolean(props.disabled, "disabled"), "aria-describedby": (_a = props.describedbyid) !== null && _a !== void 0 ? _a : props.ariaDescribedBy, "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, name: props.name, required: getBoolean(props.required, "required"), "data-aid-icon": props.icon, "data-aid-icon-after": props.iconAfter, onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event) })),
42
43
  props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children)));
43
44
  }
44
45
  const DBSwitch = forwardRef(DBSwitchFn);
package/dist/components/textarea/textarea.js CHANGED
@@ -6,7 +6,7 @@ import DBInfotext from "../infotext/infotext";
6
6
  import { cls, delay, getBoolean, getHideProp, getNumber, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
7
7
  import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_ROWS, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
8
8
  function DBTextareaFn(props, component) {
9
- var _a, _b;
9
+ var _a, _b, _c;
10
10
  const _ref = component || useRef(component);
11
11
  const [_id, set_id] = useState(() => undefined);
12
12
  const [_messageId, set_messageId] = useState(() => undefined);
@@ -107,7 +107,7 @@ function DBTextareaFn(props, component) {
107
107
  return (React.createElement("div", Object.assign({}, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-textarea", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel) }),
108
108
  React.createElement("label", { htmlFor: _id }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL),
109
109
  React.createElement("textarea", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: _id, "data-resize": props.resize, disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), readOnly: getBoolean(props.readOnly, "readOnly") ||
110
- getBoolean(props.readonly, "readonly"), form: props.form, maxLength: getNumber(props.maxLength, props.maxlength), minLength: getNumber(props.minLength, props.minlength), name: props.name, wrap: props.wrap, spellCheck: props.spellCheck, autoComplete: props.autocomplete, onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), value: props.value, "aria-describedby": _descByIds, placeholder: (_b = props.placeholder) !== null && _b !== void 0 ? _b : DEFAULT_PLACEHOLDER, rows: getNumber(props.rows, DEFAULT_ROWS), cols: getNumber(props.cols) })),
110
+ getBoolean(props.readonly, "readonly"), form: props.form, maxLength: getNumber(props.maxLength, props.maxlength), minLength: getNumber(props.minLength, props.minlength), name: props.name, wrap: props.wrap, spellCheck: props.spellCheck, autoComplete: props.autocomplete, onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), value: props.value, "aria-describedby": (_b = props.ariaDescribedBy) !== null && _b !== void 0 ? _b : _descByIds, placeholder: (_c = props.placeholder) !== null && _c !== void 0 ? _c : DEFAULT_PLACEHOLDER, rows: getNumber(props.rows, DEFAULT_ROWS), cols: getNumber(props.cols) })),
111
111
  stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
112
112
  hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, props.validMessage || DEFAULT_VALID_MESSAGE)) : null,
113
113
  React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, _invalidMessage),
package/dist/shared/model.d.ts CHANGED
@@ -14,6 +14,7 @@ export type GlobalProps = {
14
14
  */
15
15
  class?: string | any;
16
16
  /**
17
+ * @deprecated
17
18
  * [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) is used to link to the elements that describe the element with the set attribute.
18
19
  */
19
20
  describedbyid?: string;
package/dist/utils/document-click-listener.js CHANGED
@@ -1,19 +1,19 @@
1
1
  import { uuid } from './index';
2
2
  export class DocumentClickListener {
3
3
  static runCallbacks(event) {
4
- Object.values(DocumentClickListener.callbacks).forEach(callback => {
4
+ for (const callback of Object.values(DocumentClickListener.callbacks)) {
5
5
  if (typeof callback === 'function') {
6
6
  callback(event);
7
7
  }
8
- });
8
+ }
9
9
  }
10
10
  constructor() {
11
11
  if (DocumentClickListener._instance) {
12
12
  return DocumentClickListener._instance;
13
13
  }
14
14
  DocumentClickListener._instance = this;
15
- if (document) {
16
- document.addEventListener('click', event => DocumentClickListener.runCallbacks(event));
15
+ if (self.document) {
16
+ self.document.addEventListener('click', event => DocumentClickListener.runCallbacks(event));
17
17
  }
18
18
  }
19
19
  addCallback(callback) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@db-ux/react-core-components",
3
- "version": "2.0.7",
3
+ "version": "2.0.9",
4
4
  "description": "React components for @db-ux/core-components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -38,7 +38,7 @@
38
38
  },
39
39
  "sideEffects": false,
40
40
  "dependencies": {
41
- "@db-ux/core-components": "2.0.7",
42
- "@db-ux/core-foundations": "2.0.7"
41
+ "@db-ux/core-components": "2.0.9",
42
+ "@db-ux/core-foundations": "2.0.9"
43
43
  }
44
44
  }