@db-ux/react-core-components 4.4.1 → 4.4.2-eslint-plugin2-696cb23
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 +8 -0
- package/dist/components/accordion/accordion.js +6 -9
- package/dist/components/accordion/model.d.ts +2 -2
- package/dist/components/accordion-item/accordion-item.js +2 -5
- package/dist/components/accordion-item/model.d.ts +2 -2
- package/dist/components/checkbox/checkbox.d.ts +1 -1
- package/dist/components/checkbox/checkbox.js +4 -2
- package/dist/components/custom-select/custom-select.js +4 -2
- package/dist/components/custom-select-list-item/custom-select-list-item.d.ts +1 -1
- package/dist/components/custom-select-list-item/custom-select-list-item.js +2 -7
- package/dist/components/custom-select-list-item/model.d.ts +2 -2
- package/dist/components/input/input.d.ts +1 -1
- package/dist/components/input/input.js +4 -2
- package/dist/components/navigation/model.d.ts +2 -2
- package/dist/components/navigation/navigation.js +3 -8
- package/dist/components/navigation-item/model.d.ts +0 -1
- package/dist/components/navigation-item/navigation-item.js +2 -3
- package/dist/components/radio/radio.d.ts +1 -1
- package/dist/components/radio/radio.js +4 -2
- package/dist/components/select/select.d.ts +1 -1
- package/dist/components/select/select.js +4 -2
- package/dist/components/switch/switch.d.ts +1 -1
- package/dist/components/switch/switch.js +4 -2
- package/dist/components/tab-list/model.d.ts +2 -2
- package/dist/components/tab-list/tab-list.js +3 -8
- package/dist/components/tabs/model.d.ts +2 -2
- package/dist/components/tabs/tabs.js +5 -5
- package/dist/components/textarea/textarea.d.ts +1 -1
- package/dist/components/textarea/textarea.js +4 -2
- package/dist/components/tooltip/tooltip.js +10 -3
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @db-ux/react-core-components
|
|
2
2
|
|
|
3
|
+
## 4.4.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- fix(SSR-compatibility): Implement framework-specific `useId` for UUID generation in React and Vue outputs - [see commit 1073c46](https://github.com/db-ux-design-system/core-web/commit/1073c469a20bf1346f150c00364ee1aeab7643d0)
|
|
8
|
+
|
|
9
|
+
- fix: issue with DBInput not working properly with `datalist` and `type="time"` - [see commit 72ccb09](https://github.com/db-ux-design-system/core-web/commit/72ccb09d1304aec894b4fde27624f90029efec9d)
|
|
10
|
+
|
|
3
11
|
## 4.4.1
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import { filterPassingProps, getRootProps } from "../../utils/react";
|
|
4
4
|
import { useState, useRef, useEffect, forwardRef } from "react";
|
|
5
|
-
import {
|
|
6
|
-
import { cls, uuid } from "../../utils";
|
|
5
|
+
import { cls } from "../../utils";
|
|
7
6
|
import DBAccordionItem from "../accordion-item/accordion-item";
|
|
7
|
+
import { useId } from "react";
|
|
8
8
|
function DBAccordionFn(props, component) {
|
|
9
9
|
var _a;
|
|
10
|
+
const uuid = useId();
|
|
10
11
|
const _ref = component || useRef(component);
|
|
11
|
-
const [_id, set_id] = useState(() => DEFAULT_ID);
|
|
12
12
|
const [_name, set_name] = useState(() => "");
|
|
13
13
|
const [initialized, setInitialized] = useState(() => false);
|
|
14
14
|
const [_initOpenIndexDone, set_initOpenIndexDone] = useState(() => false);
|
|
@@ -25,7 +25,6 @@ function DBAccordionFn(props, component) {
|
|
|
25
25
|
return [];
|
|
26
26
|
}
|
|
27
27
|
useEffect(() => {
|
|
28
|
-
set_id(props.id || "accordion-" + uuid());
|
|
29
28
|
setInitialized(true);
|
|
30
29
|
set_initOpenIndexDone(true);
|
|
31
30
|
}, []);
|
|
@@ -40,16 +39,14 @@ function DBAccordionFn(props, component) {
|
|
|
40
39
|
}
|
|
41
40
|
}
|
|
42
41
|
else {
|
|
43
|
-
|
|
44
|
-
set_name(_id);
|
|
45
|
-
}
|
|
42
|
+
set_name(`accordion-${uuid}`);
|
|
46
43
|
}
|
|
47
44
|
}
|
|
48
45
|
else {
|
|
49
46
|
set_name("");
|
|
50
47
|
}
|
|
51
48
|
}
|
|
52
|
-
}, [initialized, props.name, props.behavior
|
|
49
|
+
}, [initialized, props.name, props.behavior]);
|
|
53
50
|
useEffect(() => {
|
|
54
51
|
if (_ref.current) {
|
|
55
52
|
const childDetails = _ref.current.getElementsByTagName("details");
|
|
@@ -83,7 +80,7 @@ function DBAccordionFn(props, component) {
|
|
|
83
80
|
set_initOpenIndexDone(false);
|
|
84
81
|
}
|
|
85
82
|
}, [_ref.current, _initOpenIndexDone, props.initOpenIndex]);
|
|
86
|
-
return (React.createElement("ul", Object.assign({ 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:
|
|
83
|
+
return (React.createElement("ul", Object.assign({ 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: props.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-accordion", props.className), "data-variant": props.variant }),
|
|
87
84
|
!props.items ? React.createElement(React.Fragment, null, props.children) : null,
|
|
88
85
|
props.items ? (React.createElement(React.Fragment, null, (_a = convertItems()) === null || _a === void 0 ? void 0 : _a.map((item, index) => (React.createElement(DBAccordionItem, { key: `accordion-item-${index}`, headlinePlain: item.headlinePlain, disabled: item.disabled, text: item.text }))))) : null));
|
|
89
86
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { GlobalProps,
|
|
1
|
+
import { GlobalProps, InitializedState } from '../../shared/model';
|
|
2
2
|
import { DBAccordionItemDefaultProps } from '../accordion-item/model';
|
|
3
3
|
export declare const AccordionVariantList: readonly ["divider", "card"];
|
|
4
4
|
export type AccordionVariantType = (typeof AccordionVariantList)[number];
|
|
@@ -38,4 +38,4 @@ export type DBAccordionDefaultState = {
|
|
|
38
38
|
_name?: string;
|
|
39
39
|
convertItems: () => DBAccordionItemDefaultProps[];
|
|
40
40
|
};
|
|
41
|
-
export type DBAccordionState = DBAccordionDefaultState &
|
|
41
|
+
export type DBAccordionState = DBAccordionDefaultState & InitializedState;
|
|
@@ -2,11 +2,9 @@
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import { filterPassingProps, getRootProps } from "../../utils/react";
|
|
4
4
|
import { useState, useRef, useEffect, forwardRef } from "react";
|
|
5
|
-
import {
|
|
6
|
-
import { cls, getBooleanAsString, uuid } from "../../utils";
|
|
5
|
+
import { cls, getBooleanAsString } from "../../utils";
|
|
7
6
|
function DBAccordionItemFn(props, component) {
|
|
8
7
|
const _ref = component || useRef(component);
|
|
9
|
-
const [_id, set_id] = useState(() => DEFAULT_ID);
|
|
10
8
|
const [_open, set_open] = useState(() => false);
|
|
11
9
|
const [_name, set_name] = useState(() => undefined);
|
|
12
10
|
const [initialized, setInitialized] = useState(() => false);
|
|
@@ -31,7 +29,6 @@ function DBAccordionItemFn(props, component) {
|
|
|
31
29
|
set_open(newStateOpen);
|
|
32
30
|
}
|
|
33
31
|
useEffect(() => {
|
|
34
|
-
set_id(props.id || "accordion-item-" + uuid());
|
|
35
32
|
if (props.defaultOpen) {
|
|
36
33
|
set_open(props.defaultOpen);
|
|
37
34
|
}
|
|
@@ -47,7 +44,7 @@ function DBAccordionItemFn(props, component) {
|
|
|
47
44
|
set_name(props.name);
|
|
48
45
|
}
|
|
49
46
|
}, [props.name]);
|
|
50
|
-
return (React.createElement("li", Object.assign({ id:
|
|
47
|
+
return (React.createElement("li", Object.assign({ id: props.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-accordion-item", props.className) }),
|
|
51
48
|
React.createElement("details", Object.assign({ "aria-disabled": getBooleanAsString(props.disabled), 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", "onToggle"]), { name: _name, open: _open }),
|
|
52
49
|
React.createElement("summary", { onClick: (event) => handleToggle(event) },
|
|
53
50
|
props.headlinePlain ? React.createElement(React.Fragment, null, props.headlinePlain) : null,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { GlobalProps,
|
|
1
|
+
import { GlobalProps, InitializedState, NameProps, NameState, TextProps, ToggleEventProps, ToggleEventState } from '../../shared/model';
|
|
2
2
|
export type DBAccordionItemDefaultProps = {
|
|
3
3
|
/**
|
|
4
4
|
* Initial state for the accordion item
|
|
@@ -21,4 +21,4 @@ export type DBAccordionItemProps = DBAccordionItemDefaultProps & GlobalProps & T
|
|
|
21
21
|
export type DBAccordionItemDefaultState = {
|
|
22
22
|
_open?: boolean;
|
|
23
23
|
};
|
|
24
|
-
export type DBAccordionItemState = DBAccordionItemDefaultState &
|
|
24
|
+
export type DBAccordionItemState = DBAccordionItemDefaultState & ToggleEventState<HTMLElement> & InitializedState & NameState;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
declare const DBCheckbox: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>,
|
|
2
|
+
declare const DBCheckbox: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "value" | "size" | "indeterminate" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | keyof import("../../shared/model").RequiredProps | "showLabel" | "checked" | keyof import("../../shared/model").FormMessageProps> & import("./model").DBCheckboxDefaultProps & 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").FormMessageProps & import("../../shared/model").SizeProps & React.RefAttributes<any>>;
|
|
3
3
|
export default DBCheckbox;
|
|
@@ -3,11 +3,13 @@ import * as React from "react";
|
|
|
3
3
|
import { filterPassingProps, getRootProps } from "../../utils/react";
|
|
4
4
|
import { useState, useRef, useEffect, forwardRef } from "react";
|
|
5
5
|
import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
|
|
6
|
-
import { cls, delay, getBoolean, getHideProp, hasVoiceOver, stringPropVisible,
|
|
6
|
+
import { cls, delay, getBoolean, getHideProp, hasVoiceOver, stringPropVisible, } from "../../utils";
|
|
7
7
|
import { addCheckedResetEventListener, } from "../../utils/form-components";
|
|
8
8
|
import DBInfotext from "../infotext/infotext";
|
|
9
|
+
import { useId } from "react";
|
|
9
10
|
function DBCheckboxFn(props, component) {
|
|
10
11
|
var _a;
|
|
12
|
+
const uuid = useId();
|
|
11
13
|
const _ref = component || useRef(component);
|
|
12
14
|
const [initialized, setInitialized] = useState(() => false);
|
|
13
15
|
const [_id, set_id] = useState(() => undefined);
|
|
@@ -70,7 +72,7 @@ function DBCheckboxFn(props, component) {
|
|
|
70
72
|
useEffect(() => {
|
|
71
73
|
var _a;
|
|
72
74
|
setInitialized(true);
|
|
73
|
-
const mId = (_a = props.id) !== null && _a !== void 0 ? _a : `checkbox-${uuid
|
|
75
|
+
const mId = (_a = props.id) !== null && _a !== void 0 ? _a : `checkbox-${uuid}`;
|
|
74
76
|
set_id(mId);
|
|
75
77
|
set_messageId(mId + DEFAULT_MESSAGE_ID_SUFFIX);
|
|
76
78
|
set_validMessageId(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
|
|
@@ -3,7 +3,7 @@ import * as React from "react";
|
|
|
3
3
|
import { filterPassingProps, getRootProps } from "../../utils/react";
|
|
4
4
|
import { useState, useRef, useEffect, forwardRef } from "react";
|
|
5
5
|
import { DEFAULT_CLOSE_BUTTON, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_LABEL_ID_SUFFIX, DEFAULT_MESSAGE, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_REMOVE, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_SELECTED, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
|
|
6
|
-
import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getOptionKey, getSearchInput, hasVoiceOver, stringPropVisible,
|
|
6
|
+
import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getOptionKey, getSearchInput, hasVoiceOver, stringPropVisible, } from "../../utils";
|
|
7
7
|
import { DocumentClickListener } from "../../utils/document-click-listener";
|
|
8
8
|
import { DocumentScrollListener } from "../../utils/document-scroll-listener";
|
|
9
9
|
import { handleFixedDropdown } from "../../utils/floating-components";
|
|
@@ -16,9 +16,11 @@ import DBInfotext from "../infotext/infotext";
|
|
|
16
16
|
import DBInput from "../input/input";
|
|
17
17
|
import DBTag from "../tag/tag";
|
|
18
18
|
import DBTooltip from "../tooltip/tooltip";
|
|
19
|
+
import { useId } from "react";
|
|
19
20
|
function DBCustomSelectFn(props, component) {
|
|
20
21
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
21
22
|
props = Object.assign({ clearSelectionText: "Clear selection", showClearSelection: true }, props);
|
|
23
|
+
const uuid = useId();
|
|
22
24
|
const _ref = component || useRef(component);
|
|
23
25
|
const detailsRef = useRef(null);
|
|
24
26
|
const selectRef = useRef(null);
|
|
@@ -472,7 +474,7 @@ function DBCustomSelectFn(props, component) {
|
|
|
472
474
|
}
|
|
473
475
|
useEffect(() => {
|
|
474
476
|
var _a;
|
|
475
|
-
const mId = (_a = props.id) !== null && _a !== void 0 ? _a : `custom-select-${uuid
|
|
477
|
+
const mId = (_a = props.id) !== null && _a !== void 0 ? _a : `custom-select-${uuid}`;
|
|
476
478
|
set_id(mId);
|
|
477
479
|
set_messageId(mId + DEFAULT_MESSAGE_ID_SUFFIX);
|
|
478
480
|
set_validMessageId(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
declare const DBCustomSelectListItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>,
|
|
2
|
+
declare const DBCustomSelectListItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "value" | "icon" | "showIcon" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").BaseFormProps | "checked" | keyof import("./model").DBCustomSelectListItemDefaultProps | "isGroupTitle" | "showDivider"> & import("./model").DBCustomSelectListItemDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").BaseFormProps & import("../../shared/model").ValueProps & import("../../shared/model").FormCheckProps & import("../../shared/model").ChangeEventProps<HTMLInputElement> & {
|
|
3
3
|
isGroupTitle?: boolean;
|
|
4
4
|
showDivider?: boolean;
|
|
5
5
|
} & import("../../shared/model").IconProps & import("../../shared/model").ShowIconProps & React.RefAttributes<any>>;
|
|
@@ -2,10 +2,9 @@
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import { filterPassingProps, getRootProps } from "../../utils/react";
|
|
4
4
|
import { useState, useRef, useEffect, forwardRef } from "react";
|
|
5
|
-
import { cls, getBoolean, getBooleanAsString
|
|
5
|
+
import { cls, getBoolean, getBooleanAsString } from "../../utils";
|
|
6
6
|
function DBCustomSelectListItemFn(props, component) {
|
|
7
7
|
const _ref = component || useRef(component);
|
|
8
|
-
const [_id, set_id] = useState(() => undefined);
|
|
9
8
|
const [hasDivider, setHasDivider] = useState(() => false);
|
|
10
9
|
function handleChange(event) {
|
|
11
10
|
event.stopPropagation();
|
|
@@ -19,14 +18,10 @@ function DBCustomSelectListItemFn(props, component) {
|
|
|
19
18
|
}
|
|
20
19
|
return getBoolean(props.checked, "checked") ? "check" : "x_placeholder";
|
|
21
20
|
}
|
|
22
|
-
useEffect(() => {
|
|
23
|
-
var _a;
|
|
24
|
-
set_id((_a = props.id) !== null && _a !== void 0 ? _a : `custom-select-list-item-${uuid()}`);
|
|
25
|
-
}, []);
|
|
26
21
|
useEffect(() => {
|
|
27
22
|
setHasDivider(Boolean(props.isGroupTitle || props.showDivider));
|
|
28
23
|
}, [props.isGroupTitle, props.showDivider]);
|
|
29
|
-
return (React.createElement("li", Object.assign({ 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:
|
|
24
|
+
return (React.createElement("li", Object.assign({ 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: props.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-custom-select-list-item", props.className, {
|
|
30
25
|
"db-checkbox": props.type === "checkbox" && !props.isGroupTitle,
|
|
31
26
|
"db-radio": props.type !== "checkbox" && !props.isGroupTitle,
|
|
32
27
|
}), "data-divider": getBooleanAsString(hasDivider) }), !props.isGroupTitle ? (React.createElement("label", { "data-icon": props.type !== "checkbox" && props.icon ? props.icon : undefined, "data-show-icon": getBooleanAsString(props.showIcon), "data-icon-trailing": getIconTrailing() },
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BaseFormProps, ChangeEventProps, ChangeEventState, FormCheckProps, GlobalProps,
|
|
1
|
+
import { BaseFormProps, ChangeEventProps, ChangeEventState, FormCheckProps, GlobalProps, IconProps, ShowIconProps, ValueProps } from '../../shared/model';
|
|
2
2
|
export declare const CustomSelectListItemTypeList: readonly ["checkbox", "radio"];
|
|
3
3
|
export type CustomSelectListItemTypeType = (typeof CustomSelectListItemTypeList)[number];
|
|
4
4
|
export type DBCustomSelectListItemExtraProps = {
|
|
@@ -26,4 +26,4 @@ export type DBCustomSelectListItemDefaultState = {
|
|
|
26
26
|
getIconTrailing: () => string | undefined;
|
|
27
27
|
hasDivider?: boolean;
|
|
28
28
|
};
|
|
29
|
-
export type DBCustomSelectListItemState = DBCustomSelectListItemDefaultState & ChangeEventState<HTMLInputElement
|
|
29
|
+
export type DBCustomSelectListItemState = DBCustomSelectListItemDefaultState & ChangeEventState<HTMLInputElement>;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
declare const DBInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>,
|
|
2
|
+
declare const DBInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "value" | "size" | "icon" | "showIcon" | "showIconLeading" | "showIconTrailing" | "iconLeading" | "iconTrailing" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | keyof import("../../shared/model").RequiredProps | "showLabel" | keyof import("../../shared/model").FormMessageProps | keyof import("./model").DBInputDefaultProps | keyof import("../../shared/model").FormTextProps | keyof import("../../shared/model").InputEventProps<HTMLInputElement>> & import("./model").DBInputDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").FormTextProps & import("../../shared/model").InputEventProps<HTMLInputElement> & 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").IconProps & import("../../shared/model").IconTrailingProps & import("../../shared/model").FormMessageProps & import("../../shared/model").ShowIconProps & import("../../shared/model").IconLeadingProps & import("../../shared/model").ShowIconLeadingProps & import("../../shared/model").ShowIconTrailingProps & import("../../shared/model").FormSizeProps & React.RefAttributes<any>>;
|
|
3
3
|
export default DBInput;
|
|
@@ -3,11 +3,13 @@ import * as React from "react";
|
|
|
3
3
|
import { filterPassingProps, getRootProps } from "../../utils/react";
|
|
4
4
|
import { useState, useRef, useEffect, forwardRef } from "react";
|
|
5
5
|
import { DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
|
|
6
|
-
import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getInputValue, getNumber, getStep, hasVoiceOver, isArrayOfStrings, isIOSSafari, stringPropVisible,
|
|
6
|
+
import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getInputValue, getNumber, getStep, hasVoiceOver, isArrayOfStrings, isIOSSafari, stringPropVisible, } from "../../utils";
|
|
7
7
|
import { addValueResetEventListener, } from "../../utils/form-components";
|
|
8
8
|
import DBInfotext from "../infotext/infotext";
|
|
9
|
+
import { useId } from "react";
|
|
9
10
|
function DBInputFn(props, component) {
|
|
10
11
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
12
|
+
const uuid = useId();
|
|
11
13
|
const _ref = component || useRef(component);
|
|
12
14
|
const [_id, set_id] = useState(() => undefined);
|
|
13
15
|
const [_messageId, set_messageId] = useState(() => undefined);
|
|
@@ -85,7 +87,7 @@ function DBInputFn(props, component) {
|
|
|
85
87
|
}
|
|
86
88
|
useEffect(() => {
|
|
87
89
|
var _a;
|
|
88
|
-
const mId = (_a = props.id) !== null && _a !== void 0 ? _a : `input-${uuid
|
|
90
|
+
const mId = (_a = props.id) !== null && _a !== void 0 ? _a : `input-${uuid}`;
|
|
89
91
|
set_id(mId);
|
|
90
92
|
set_messageId(mId + DEFAULT_MESSAGE_ID_SUFFIX);
|
|
91
93
|
set_validMessageId(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { GlobalProps
|
|
1
|
+
import { GlobalProps } from '../../shared/model';
|
|
2
2
|
export type DBNavigationDefaultProps = {};
|
|
3
3
|
export type DBNavigationProps = DBNavigationDefaultProps & GlobalProps;
|
|
4
4
|
export type DBNavigationDefaultState = {};
|
|
5
|
-
export type DBNavigationState = DBNavigationDefaultState
|
|
5
|
+
export type DBNavigationState = DBNavigationDefaultState;
|
|
@@ -1,16 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import { filterPassingProps, getRootProps } from "../../utils/react";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import { cls, uuid } from "../../utils";
|
|
4
|
+
import { useRef, forwardRef } from "react";
|
|
5
|
+
import { cls } from "../../utils";
|
|
7
6
|
function DBNavigationFn(props, component) {
|
|
8
7
|
const _ref = component || useRef(component);
|
|
9
|
-
|
|
10
|
-
useEffect(() => {
|
|
11
|
-
set_id(props.id || "navigation-" + uuid());
|
|
12
|
-
}, []);
|
|
13
|
-
return (React.createElement("nav", Object.assign({ 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 }, 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-navigation", props.className) }),
|
|
8
|
+
return (React.createElement("nav", Object.assign({ 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: props.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-navigation", props.className) }),
|
|
14
9
|
React.createElement("menu", null, props.children)));
|
|
15
10
|
}
|
|
16
11
|
const DBNavigation = forwardRef(DBNavigationFn);
|
|
@@ -23,7 +23,6 @@ export type DBNavigationItemDefaultState = {
|
|
|
23
23
|
handleBackClick: (event: ClickEvent<HTMLButtonElement>) => void;
|
|
24
24
|
hasAreaPopup: boolean;
|
|
25
25
|
isSubNavigationExpanded: boolean;
|
|
26
|
-
subNavigationId: string;
|
|
27
26
|
/**
|
|
28
27
|
* Internal state property to show/hide sub-navigation button
|
|
29
28
|
*/
|
|
@@ -3,7 +3,7 @@ import * as React from "react";
|
|
|
3
3
|
import { filterPassingProps, getRootProps } from "../../utils/react";
|
|
4
4
|
import { useState, useRef, useEffect, forwardRef } from "react";
|
|
5
5
|
import { DEFAULT_BACK } from "../../shared/constants";
|
|
6
|
-
import { cls, delay, getBoolean, getBooleanAsString
|
|
6
|
+
import { cls, delay, getBoolean, getBooleanAsString } from "../../utils";
|
|
7
7
|
import { NavigationItemSafeTriangle } from "../../utils/navigation";
|
|
8
8
|
import DBButton from "../button/button";
|
|
9
9
|
function DBNavigationItemFn(props, component) {
|
|
@@ -14,7 +14,6 @@ function DBNavigationItemFn(props, component) {
|
|
|
14
14
|
const [hasSubNavigation, setHasSubNavigation] = useState(() => true);
|
|
15
15
|
const [isSubNavigationExpanded, setIsSubNavigationExpanded] = useState(() => false);
|
|
16
16
|
const [autoClose, setAutoClose] = useState(() => false);
|
|
17
|
-
const [subNavigationId, setSubNavigationId] = useState(() => "sub-navigation-" + uuid());
|
|
18
17
|
const [navigationItemSafeTriangle, setNavigationItemSafeTriangle] = useState(() => undefined);
|
|
19
18
|
function handleNavigationItemClick(event) {
|
|
20
19
|
var _a;
|
|
@@ -67,7 +66,7 @@ function DBNavigationItemFn(props, component) {
|
|
|
67
66
|
!hasSubNavigation ? (React.createElement(React.Fragment, null, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children))) : null,
|
|
68
67
|
hasSubNavigation ? (React.createElement(React.Fragment, null,
|
|
69
68
|
React.createElement("button", { className: "db-navigation-item-expand-button", "aria-haspopup": hasAreaPopup, "aria-expanded": isSubNavigationExpanded, disabled: getBoolean(props.disabled, "disabled"), onClick: (event) => handleClick(event) }, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)),
|
|
70
|
-
React.createElement("menu", { className: "db-sub-navigation", "data-force-close": autoClose,
|
|
69
|
+
React.createElement("menu", { className: "db-sub-navigation", "data-force-close": autoClose, onClick: (event) => handleNavigationItemClick(event) },
|
|
71
70
|
hasAreaPopup ? (React.createElement("div", { className: "db-mobile-navigation-back" },
|
|
72
71
|
React.createElement(DBButton, { icon: "arrow_left", variant: "ghost", id: props.backButtonId, onClick: (event) => handleBackClick(event) }, (_a = props.backButtonText) !== null && _a !== void 0 ? _a : DEFAULT_BACK))) : null,
|
|
73
72
|
React.createElement(React.Fragment, null, props.subNavigation)))) : null));
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
declare const DBRadio: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>,
|
|
2
|
+
declare const DBRadio: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "value" | "size" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | keyof import("../../shared/model").RequiredProps | "showLabel" | "checked" | keyof import("../../shared/model").InputEventProps<HTMLInputElement>> & import("../../shared/model").GlobalProps & import("../../shared/model").InputEventProps<HTMLInputElement> & 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;
|
|
@@ -2,9 +2,11 @@
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import { filterPassingProps, getRootProps } from "../../utils/react";
|
|
4
4
|
import { useState, useRef, useEffect, forwardRef } from "react";
|
|
5
|
-
import { cls, delay, getBoolean, getHideProp
|
|
5
|
+
import { cls, delay, getBoolean, getHideProp } from "../../utils";
|
|
6
6
|
import { addResetEventListener, } from "../../utils/form-components";
|
|
7
|
+
import { useId } from "react";
|
|
7
8
|
function DBRadioFn(props, component) {
|
|
9
|
+
const uuid = useId();
|
|
8
10
|
const _ref = component || useRef(component);
|
|
9
11
|
const [initialized, setInitialized] = useState(() => false);
|
|
10
12
|
const [_id, set_id] = useState(() => undefined);
|
|
@@ -32,7 +34,7 @@ function DBRadioFn(props, component) {
|
|
|
32
34
|
useEffect(() => {
|
|
33
35
|
var _a;
|
|
34
36
|
setInitialized(true);
|
|
35
|
-
set_id((_a = props.id) !== null && _a !== void 0 ? _a : `radio-${uuid
|
|
37
|
+
set_id((_a = props.id) !== null && _a !== void 0 ? _a : `radio-${uuid}`);
|
|
36
38
|
}, []);
|
|
37
39
|
useEffect(() => {
|
|
38
40
|
if (props.checked && initialized && _ref.current) {
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
declare const DBSelect: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<any>,
|
|
2
|
+
declare const DBSelect: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "value" | "size" | "icon" | "showIcon" | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | keyof import("../../shared/model").RequiredProps | "showLabel" | keyof import("../../shared/model").FormMessageProps | keyof import("../../shared/model").ClickEventProps<HTMLSelectElement> | keyof import("../../shared/model").ChangeEventProps<HTMLSelectElement> | keyof import("../../shared/model").FocusEventProps<HTMLSelectElement> | keyof import("../../shared/model").InputEventProps<HTMLSelectElement> | keyof import("./model").DBSelectDefaultProps> & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLSelectElement> & import("../../shared/model").ChangeEventProps<HTMLSelectElement> & import("../../shared/model").FocusEventProps<HTMLSelectElement> & import("../../shared/model").InputEventProps<HTMLSelectElement> & import("../../shared/model").CustomFormProps & import("../../shared/model").BaseFormProps & import("../../shared/model").RequiredProps & import("../../shared/model").ShowLabelProps & import("../../shared/model").ValueProps & import("../../shared/model").IconProps & import("../../shared/model").FormMessageProps & import("./model").DBSelectDefaultProps & import("../../shared/model").ShowIconProps & import("../../shared/model").FormSizeProps & React.RefAttributes<any>>;
|
|
3
3
|
export default DBSelect;
|
|
@@ -3,11 +3,13 @@ import * as React from "react";
|
|
|
3
3
|
import { filterPassingProps, getRootProps } from "../../utils/react";
|
|
4
4
|
import { useState, useRef, useEffect, forwardRef } from "react";
|
|
5
5
|
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";
|
|
6
|
-
import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getOptionKey, hasVoiceOver, stringPropVisible,
|
|
6
|
+
import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getOptionKey, hasVoiceOver, stringPropVisible, } from "../../utils";
|
|
7
7
|
import { addValueResetEventListener, } from "../../utils/form-components";
|
|
8
8
|
import DBInfotext from "../infotext/infotext";
|
|
9
|
+
import { useId } from "react";
|
|
9
10
|
function DBSelectFn(props, component) {
|
|
10
11
|
var _a, _b, _c, _d;
|
|
12
|
+
const uuid = useId();
|
|
11
13
|
const _ref = component || useRef(component);
|
|
12
14
|
const [_id, set_id] = useState(() => undefined);
|
|
13
15
|
const [_messageId, set_messageId] = useState(() => undefined);
|
|
@@ -101,7 +103,7 @@ function DBSelectFn(props, component) {
|
|
|
101
103
|
useEffect(() => {
|
|
102
104
|
var _a;
|
|
103
105
|
setInitialized(true);
|
|
104
|
-
const mId = (_a = props.id) !== null && _a !== void 0 ? _a : `select-${uuid
|
|
106
|
+
const mId = (_a = props.id) !== null && _a !== void 0 ? _a : `select-${uuid}`;
|
|
105
107
|
set_id(mId);
|
|
106
108
|
set_messageId(mId + DEFAULT_MESSAGE_ID_SUFFIX);
|
|
107
109
|
set_validMessageId(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
declare const DBSwitch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, "form" | "
|
|
2
|
+
declare const DBSwitch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, "form" | "name" | "label" | "disabled" | "children" | "className" | "class" | "id" | "autofocus" | "onFocus" | "onBlur" | "onChange" | "variant" | "value" | "size" | "icon" | "iconLeading" | "iconTrailing" | "blur" | "change" | "focus" | "ariaDescribedBy" | "validation" | "required" | "showRequiredAsterisk" | "showLabel" | "checked" | "placeholder" | "message" | "validMessage" | "invalidMessage" | "messageIcon" | "autocomplete" | "showMessage" | "visualAid"> & 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").FormMessageProps & import("../../shared/model").SizeProps & import("../../shared/model").IconProps & import("../../shared/model").IconTrailingProps & import("../../shared/model").IconLeadingProps & import("./model").DBSwitchDefaultProps & React.RefAttributes<any>>;
|
|
3
3
|
export default DBSwitch;
|
|
@@ -3,11 +3,13 @@ import * as React from "react";
|
|
|
3
3
|
import { filterPassingProps, getRootProps } from "../../utils/react";
|
|
4
4
|
import { useState, useRef, useEffect, forwardRef } from "react";
|
|
5
5
|
import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
|
|
6
|
-
import { cls, delay, getBoolean, getBooleanAsString, getHideProp, hasVoiceOver, stringPropVisible,
|
|
6
|
+
import { cls, delay, getBoolean, getBooleanAsString, getHideProp, hasVoiceOver, stringPropVisible, } from "../../utils";
|
|
7
7
|
import { addCheckedResetEventListener, } from "../../utils/form-components";
|
|
8
8
|
import DBInfotext from "../infotext/infotext";
|
|
9
|
+
import { useId } from "react";
|
|
9
10
|
function DBSwitchFn(props, component) {
|
|
10
11
|
var _a, _b, _c;
|
|
12
|
+
const uuid = useId();
|
|
11
13
|
const _ref = component || useRef(component);
|
|
12
14
|
const [_id, set_id] = useState(() => undefined);
|
|
13
15
|
const [_messageId, set_messageId] = useState(() => undefined);
|
|
@@ -81,7 +83,7 @@ function DBSwitchFn(props, component) {
|
|
|
81
83
|
}
|
|
82
84
|
useEffect(() => {
|
|
83
85
|
var _a;
|
|
84
|
-
set_id((_a = props.id) !== null && _a !== void 0 ? _a : `switch-${uuid
|
|
86
|
+
set_id((_a = props.id) !== null && _a !== void 0 ? _a : `switch-${uuid}`);
|
|
85
87
|
set_messageId(`${_id}${DEFAULT_MESSAGE_ID_SUFFIX}`);
|
|
86
88
|
set_validMessageId(`${_id}${DEFAULT_VALID_MESSAGE_ID_SUFFIX}`);
|
|
87
89
|
set_invalidMessageId(`${_id}${DEFAULT_INVALID_MESSAGE_ID_SUFFIX}`);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { GlobalProps
|
|
1
|
+
import { GlobalProps } from '../../shared/model';
|
|
2
2
|
export type DBTabListDefaultProps = {};
|
|
3
3
|
export type DBTabListProps = DBTabListDefaultProps & GlobalProps;
|
|
4
4
|
export type DBTabListDefaultState = {};
|
|
5
|
-
export type DBTabListState = DBTabListDefaultState
|
|
5
|
+
export type DBTabListState = DBTabListDefaultState;
|
|
@@ -1,16 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import { filterPassingProps, getRootProps } from "../../utils/react";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import { cls, uuid } from "../../utils";
|
|
4
|
+
import { useRef, forwardRef } from "react";
|
|
5
|
+
import { cls } from "../../utils";
|
|
7
6
|
function DBTabListFn(props, component) {
|
|
8
7
|
const _ref = component || useRef(component);
|
|
9
|
-
|
|
10
|
-
useEffect(() => {
|
|
11
|
-
set_id(props.id || "tab-list-" + uuid());
|
|
12
|
-
}, []);
|
|
13
|
-
return (React.createElement("div", Object.assign({ 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 }, 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-tab-list", props.className) }),
|
|
8
|
+
return (React.createElement("div", Object.assign({ 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: props.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-tab-list", props.className) }),
|
|
14
9
|
React.createElement("ul", { role: "tablist" }, props.children)));
|
|
15
10
|
}
|
|
16
11
|
const DBTabList = forwardRef(DBTabListFn);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AlignmentProps, GlobalProps,
|
|
1
|
+
import { AlignmentProps, GlobalProps, InitializedState, InputEvent, OrientationProps, WidthProps } from '../../shared/model';
|
|
2
2
|
import { DBTabItemProps } from '../tab-item/model';
|
|
3
3
|
import { DBTabPanelProps } from '../tab-panel/model';
|
|
4
4
|
export declare const TabsBehaviorList: readonly ["scrollbar", "arrows"];
|
|
@@ -64,4 +64,4 @@ export type DBTabsDefaultState = {
|
|
|
64
64
|
handleChange: (event: InputEvent<HTMLElement>) => void;
|
|
65
65
|
_resizeObserver?: ResizeObserver;
|
|
66
66
|
};
|
|
67
|
-
export type DBTabsState = DBTabsDefaultState &
|
|
67
|
+
export type DBTabsState = DBTabsDefaultState & InitializedState;
|
|
@@ -2,15 +2,16 @@
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import { filterPassingProps, getRootProps } from "../../utils/react";
|
|
4
4
|
import { useState, useRef, useEffect, forwardRef } from "react";
|
|
5
|
-
import { cls
|
|
5
|
+
import { cls } from "../../utils";
|
|
6
6
|
import DBButton from "../button/button";
|
|
7
7
|
import DBTabItem from "../tab-item/tab-item";
|
|
8
8
|
import DBTabList from "../tab-list/tab-list";
|
|
9
9
|
import DBTabPanel from "../tab-panel/tab-panel";
|
|
10
|
+
import { useId } from "react";
|
|
10
11
|
function DBTabsFn(props, component) {
|
|
11
12
|
var _a, _b, _c, _d;
|
|
13
|
+
const uuid = useId();
|
|
12
14
|
const _ref = component || useRef(component);
|
|
13
|
-
const [_id, set_id] = useState(() => "tabs-" + uuid());
|
|
14
15
|
const [_name, set_name] = useState(() => "");
|
|
15
16
|
const [initialized, setInitialized] = useState(() => false);
|
|
16
17
|
const [showScrollLeft, setShowScrollLeft] = useState(() => false);
|
|
@@ -136,8 +137,7 @@ function DBTabsFn(props, component) {
|
|
|
136
137
|
}
|
|
137
138
|
}
|
|
138
139
|
useEffect(() => {
|
|
139
|
-
|
|
140
|
-
set_name(`tabs-${props.name || uuid()}`);
|
|
140
|
+
set_name(`tabs-${props.name || uuid}`);
|
|
141
141
|
setInitialized(true);
|
|
142
142
|
}, []);
|
|
143
143
|
useEffect(() => {
|
|
@@ -168,7 +168,7 @@ function DBTabsFn(props, component) {
|
|
|
168
168
|
set_resizeObserver(undefined);
|
|
169
169
|
};
|
|
170
170
|
}, []);
|
|
171
|
-
return (React.createElement("div", Object.assign({ 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", "onTabSelect", "onIndexChange"]), { id:
|
|
171
|
+
return (React.createElement("div", Object.assign({ 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", "onTabSelect", "onIndexChange"]), { id: props.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-tabs", props.className), "data-orientation": props.orientation, "data-scroll-behavior": props.behavior, "data-alignment": (_a = props.alignment) !== null && _a !== void 0 ? _a : "start", "data-width": (_b = props.width) !== null && _b !== void 0 ? _b : "auto", onInput: (event) => handleChange(event), onChange: (event) => handleChange(event) }),
|
|
172
172
|
showScrollLeft ? (React.createElement(DBButton, { className: "tabs-scroll-left", variant: "ghost", icon: "chevron_left", type: "button", noText: true, onClick: (event) => scroll(true) }, "Scroll left")) : null,
|
|
173
173
|
props.tabs ? (React.createElement(React.Fragment, null,
|
|
174
174
|
React.createElement(DBTabList, null, (_c = convertTabs()) === null || _c === void 0 ? void 0 : _c.map((tab, index) => (React.createElement(DBTabItem, { key: props.name + "tab-item" + index, active: tab.active, label: tab.label, iconTrailing: tab.iconTrailing, icon: tab.icon, noText: tab.noText })))), (_d = convertTabs()) === null || _d === void 0 ? void 0 :
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
declare const DBTextarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<any>,
|
|
2
|
+
declare const DBTextarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "value" | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | keyof import("../../shared/model").RequiredProps | "showLabel" | keyof import("../../shared/model").FormMessageProps | keyof import("../../shared/model").FormTextProps | keyof import("./model").DBTextareaDefaultProps | keyof import("../../shared/model").ChangeEventProps<HTMLTextAreaElement> | keyof import("../../shared/model").InputEventProps<HTMLTextAreaElement> | keyof import("../../shared/model").FocusEventProps<HTMLTextAreaElement>> & import("./model").DBTextareaDefaultProps & import("../../shared/model").ChangeEventProps<HTMLTextAreaElement> & import("../../shared/model").InputEventProps<HTMLTextAreaElement> & import("../../shared/model").FocusEventProps<HTMLTextAreaElement> & import("../../shared/model").CustomFormProps & import("../../shared/model").BaseFormProps & import("../../shared/model").RequiredProps & import("../../shared/model").ShowLabelProps & import("../../shared/model").ValueProps & import("../../shared/model").GlobalProps & import("../../shared/model").FormTextProps & import("../../shared/model").FormMessageProps & React.RefAttributes<any>>;
|
|
3
3
|
export default DBTextarea;
|
|
@@ -3,11 +3,13 @@ import * as React from "react";
|
|
|
3
3
|
import { filterPassingProps, getRootProps } from "../../utils/react";
|
|
4
4
|
import { useState, useRef, useEffect, forwardRef } from "react";
|
|
5
5
|
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";
|
|
6
|
-
import { cls, delay, getBoolean, getHideProp, getNumber, hasVoiceOver, stringPropVisible,
|
|
6
|
+
import { cls, delay, getBoolean, getHideProp, getNumber, hasVoiceOver, stringPropVisible, } from "../../utils";
|
|
7
7
|
import { addValueResetEventListener, } from "../../utils/form-components";
|
|
8
8
|
import DBInfotext from "../infotext/infotext";
|
|
9
|
+
import { useId } from "react";
|
|
9
10
|
function DBTextareaFn(props, component) {
|
|
10
11
|
var _a, _b, _c, _d;
|
|
12
|
+
const uuid = useId();
|
|
11
13
|
const _ref = component || useRef(component);
|
|
12
14
|
const [_id, set_id] = useState(() => undefined);
|
|
13
15
|
const [_messageId, set_messageId] = useState(() => undefined);
|
|
@@ -75,7 +77,7 @@ function DBTextareaFn(props, component) {
|
|
|
75
77
|
}
|
|
76
78
|
useEffect(() => {
|
|
77
79
|
var _a;
|
|
78
|
-
const mId = (_a = props.id) !== null && _a !== void 0 ? _a : `textarea-${uuid
|
|
80
|
+
const mId = (_a = props.id) !== null && _a !== void 0 ? _a : `textarea-${uuid}`;
|
|
79
81
|
set_id(mId);
|
|
80
82
|
set_messageId(mId + DEFAULT_MESSAGE_ID_SUFFIX);
|
|
81
83
|
set_validMessageId(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
|
|
@@ -3,11 +3,13 @@ import * as React from "react";
|
|
|
3
3
|
import { filterPassingProps, getRootProps } from "../../utils/react";
|
|
4
4
|
import { useState, useRef, useEffect, forwardRef } from "react";
|
|
5
5
|
import { DEFAULT_ID } from "../../shared/constants";
|
|
6
|
-
import { cls, getBooleanAsString, delay as utilsDelay
|
|
6
|
+
import { cls, getBooleanAsString, delay as utilsDelay } from "../../utils";
|
|
7
7
|
import { DocumentScrollListener } from "../../utils/document-scroll-listener";
|
|
8
8
|
import { handleFixedPopover } from "../../utils/floating-components";
|
|
9
|
+
import { useId } from "react";
|
|
9
10
|
function DBTooltipFn(props, component) {
|
|
10
11
|
var _a, _b;
|
|
12
|
+
const uuid = useId();
|
|
11
13
|
const _ref = component || useRef(component);
|
|
12
14
|
const [_id, set_id] = useState(() => DEFAULT_ID);
|
|
13
15
|
const [initialized, setInitialized] = useState(() => false);
|
|
@@ -63,9 +65,14 @@ function DBTooltipFn(props, component) {
|
|
|
63
65
|
_observer === null || _observer === void 0 ? void 0 : _observer.observe(getParent());
|
|
64
66
|
}
|
|
65
67
|
useEffect(() => {
|
|
66
|
-
set_id(props.id || "tooltip-" + uuid
|
|
68
|
+
set_id(props.id || "tooltip-" + uuid);
|
|
67
69
|
setInitialized(true);
|
|
68
70
|
}, []);
|
|
71
|
+
useEffect(() => {
|
|
72
|
+
if (props.id) {
|
|
73
|
+
set_id(props.id);
|
|
74
|
+
}
|
|
75
|
+
}, [props.id]);
|
|
69
76
|
useEffect(() => {
|
|
70
77
|
if (_ref.current && initialized && _id) {
|
|
71
78
|
const parent = getParent();
|
|
@@ -95,7 +102,7 @@ function DBTooltipFn(props, component) {
|
|
|
95
102
|
}
|
|
96
103
|
setInitialized(false);
|
|
97
104
|
}
|
|
98
|
-
}, [_ref.current, initialized]);
|
|
105
|
+
}, [_ref.current, initialized, _id]);
|
|
99
106
|
return (React.createElement("i", Object.assign({ role: "tooltip", "aria-hidden": "true", "data-gap": "true", 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"]), 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-tooltip", props.className), id: _id, "data-emphasis": props.emphasis, "data-animation": getBooleanAsString((_a = props.animation) !== null && _a !== void 0 ? _a : true), "data-delay": props.delay, "data-width": props.width, "data-show-arrow": getBooleanAsString((_b = props.showArrow) !== null && _b !== void 0 ? _b : true), "data-placement": props.placement, onClick: (event) => handleClick(event) }), props.children));
|
|
100
107
|
}
|
|
101
108
|
const DBTooltip = forwardRef(DBTooltipFn);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@db-ux/react-core-components",
|
|
3
|
-
"version": "4.4.
|
|
3
|
+
"version": "4.4.2-eslint-plugin2-696cb23",
|
|
4
4
|
"description": "React components for @db-ux/core-components",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
"tsc": "tsc --project . --sourceMap false"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@playwright/experimental-ct-react": "1.
|
|
34
|
-
"@types/react": "19.2.
|
|
33
|
+
"@playwright/experimental-ct-react": "1.58.2",
|
|
34
|
+
"@types/react": "19.2.13",
|
|
35
35
|
"react": "19.2.4",
|
|
36
36
|
"react-dom": "19.2.4"
|
|
37
37
|
},
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
},
|
|
42
42
|
"sideEffects": false,
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@db-ux/core-components": "4.4.
|
|
45
|
-
"@db-ux/core-foundations": "4.4.
|
|
44
|
+
"@db-ux/core-components": "4.4.2-eslint-plugin2-696cb23",
|
|
45
|
+
"@db-ux/core-foundations": "4.4.2-eslint-plugin2-696cb23"
|
|
46
46
|
}
|
|
47
47
|
}
|