@db-ux/react-core-components 2.3.1 → 2.4.0-0-af2a02f

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.
@@ -21,7 +21,7 @@ function DBBadgeFn(props, component) {
21
21
  parent = parent.parentElement;
22
22
  }
23
23
  if (parent) {
24
- parent.dataset["hasBadge"] = "true";
24
+ parent.setAttribute("data-has-badge", "true");
25
25
  }
26
26
  }
27
27
  }
@@ -1,3 +1,3 @@
1
1
  import * as React from "react";
2
- declare const DBButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<any>, "width" | "text" | "size" | "icon" | "onClick" | keyof import("./model").DBButtonDefaultProps | keyof import("../..").GlobalProps | "showIcon"> & import("./model").DBButtonDefaultProps & import("../..").GlobalProps & import("../..").ClickEventProps<HTMLButtonElement> & import("../..").IconProps & import("../..").WidthProps & import("../..").SizeProps & import("../..").ShowIconProps & import("../..").TextProps & React.RefAttributes<any>>;
2
+ declare const DBButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<any>, "width" | "text" | "size" | "icon" | "onClick" | keyof import("./model").DBButtonDefaultProps | keyof import("../../shared/model").GlobalProps | "showIcon"> & import("./model").DBButtonDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLButtonElement> & import("../../shared/model").IconProps & import("../../shared/model").WidthProps & import("../../shared/model").SizeProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<any>>;
3
3
  export default DBButton;
@@ -5,7 +5,12 @@ import { useRef, forwardRef } from "react";
5
5
  import { cls, getBoolean, getBooleanAsString, getHideProp } from "../../utils";
6
6
  function DBButtonFn(props, component) {
7
7
  const _ref = component || useRef(component);
8
- return (React.createElement("button", 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-button", props.className), type: props.type || "button", disabled: getBoolean(props.disabled, "disabled"), "aria-label": props.label, "data-icon": props.icon, "data-hide-icon": getHideProp(props.showIcon), "data-size": props.size, "data-state": props.state, "data-width": props.width, "data-variant": props.variant, "data-no-text": getBooleanAsString(props.noText), name: props.name, form: props.form, value: props.value, "aria-describedby": props.describedbyid, "aria-expanded": props.ariaexpanded, "aria-pressed": props.ariapressed }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
8
+ function handleClick(event) {
9
+ if (props.onClick) {
10
+ props.onClick(event);
11
+ }
12
+ }
13
+ return (React.createElement("button", 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-button", props.className), type: props.type || "button", disabled: getBoolean(props.disabled, "disabled"), "aria-label": props.label, "data-icon": props.icon, "data-hide-icon": getHideProp(props.showIcon), "data-size": props.size, "data-state": props.state, "data-width": props.width, "data-variant": props.variant, "data-no-text": getBooleanAsString(props.noText), name: props.name, form: props.form, value: props.value, "aria-describedby": props.describedbyid, "aria-expanded": props.ariaexpanded, "aria-pressed": props.ariapressed, onClick: (event) => handleClick(event) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
9
14
  }
10
15
  const DBButton = forwardRef(DBButtonFn);
11
16
  export default DBButton;
@@ -117,7 +117,7 @@ function DBInputFn(props, component) {
117
117
  React.createElement("label", { htmlFor: _id }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL),
118
118
  React.createElement("input", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, "data-field-sizing": props.fieldSizing, 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, type: props.type || "text", placeholder: (_b = props.placeholder) !== null && _b !== void 0 ? _b : DEFAULT_PLACEHOLDER, disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), step: getNumber(props.step), value: props.value, maxLength: getNumber(props.maxLength, props.maxlength), minLength: getNumber(props.minLength, props.minlength), max: getInputValue(props.max, props.type), min: getInputValue(props.min, props.type), readOnly: getBoolean(props.readOnly, "readOnly") ||
119
119
  getBoolean(props.readonly, "readonly"), form: props.form, pattern: props.pattern, size: props.size, autoComplete: props.autocomplete, autoFocus: getBoolean(props.autofocus, "autofocus"), onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), list: props.dataList && _dataListId, "aria-describedby": (_c = props.ariaDescribedBy) !== null && _c !== void 0 ? _c : _descByIds })),
120
- props.dataList ? (React.createElement("datalist", { id: _dataListId }, (_d = getDataList()) === null || _d === void 0 ? void 0 : _d.map((option) => (React.createElement("option", { key: _dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null,
120
+ props.dataList ? (React.createElement("datalist", { id: _dataListId }, (_d = getDataList()) === null || _d === void 0 ? void 0 : _d.map((option) => (React.createElement("option", { key: _dataListId + "-option-" + option.value, value: option.value, "data-value": option.hiddenValue }, option.label))))) : null,
121
121
  props.children,
122
122
  stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
123
123
  hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, props.validMessage || DEFAULT_VALID_MESSAGE)) : null,
@@ -1,3 +1,3 @@
1
1
  import * as React from "react";
2
- declare const DBLink: React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<any>, "text" | "onClick" | keyof import("../..").GlobalProps | "showIcon" | keyof import("./model").DBLinkDefaultProps | keyof import("../..").LinkProps> & import("./model").DBLinkDefaultProps & import("../..").GlobalProps & import("../..").ClickEventProps<HTMLAnchorElement> & import("../..").LinkProps & import("../..").ShowIconProps & import("../..").TextProps & React.RefAttributes<any>>;
2
+ declare const DBLink: React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<any>, "text" | "onClick" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("./model").DBLinkDefaultProps | keyof import("../../shared/model").LinkProps> & import("./model").DBLinkDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLAnchorElement> & import("../../shared/model").LinkProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<any>>;
3
3
  export default DBLink;
@@ -6,7 +6,12 @@ import { cls, getBooleanAsString, getHideProp } from "../../utils";
6
6
  function DBLinkFn(props, component) {
7
7
  var _a;
8
8
  const _ref = component || useRef(component);
9
- return (React.createElement("a", 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-link", props.className), href: props.href, target: props.target, rel: props.rel, role: props.role, hrefLang: props.hreflang, "aria-disabled": getBooleanAsString(props.disabled), tabIndex: props.disabled ? -1 : 0, "aria-selected": getBooleanAsString(props.selected), "aria-label": props.label, "aria-current": props.current, "data-size": props.size, "data-hide-icon-after": getHideProp((_a = props.showIcon) !== null && _a !== void 0 ? _a : true), "data-variant": props.variant, "data-content": props.content || "internal" }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
9
+ function handleClick(event) {
10
+ if (props.onClick) {
11
+ props.onClick(event);
12
+ }
13
+ }
14
+ return (React.createElement("a", 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-link", props.className), href: props.href, target: props.target, rel: props.rel, role: props.role, hrefLang: props.hreflang, "aria-disabled": getBooleanAsString(props.disabled), tabIndex: props.disabled ? -1 : 0, "aria-selected": getBooleanAsString(props.selected), "aria-label": props.label, "aria-current": props.current, "data-size": props.size, "data-hide-icon-after": getHideProp((_a = props.showIcon) !== null && _a !== void 0 ? _a : true), "data-variant": props.variant, "data-content": props.content || "internal", onClick: (event) => handleClick(event) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
10
15
  }
11
16
  const DBLink = forwardRef(DBLinkFn);
12
17
  export default DBLink;
@@ -74,7 +74,7 @@ function DBTooltipFn(props, component) {
74
74
  ["mouseleave", "focusout"].forEach((event) => {
75
75
  parent.addEventListener(event, () => handleLeave());
76
76
  });
77
- parent.dataset["hasTooltip"] = "true";
77
+ parent.setAttribute("data-has-tooltip", "true");
78
78
  if (props.variant === "label") {
79
79
  parent.setAttribute("aria-labelledby", _id);
80
80
  }
@@ -498,6 +498,7 @@ export type AriaControlsProps = {
498
498
  export type ValueLabelType = {
499
499
  value: string;
500
500
  label?: string;
501
+ hiddenValue?: string;
501
502
  };
502
503
  export type DocumentScrollState = {
503
504
  _documentScrollListenerCallbackId?: string;
@@ -301,5 +301,5 @@ export const handleFixedPopover = (element, parent, placement) => {
301
301
  element.style.insetBlockEnd = `calc(${end > innerHeight ? innerHeight : end}px + ${distance})`;
302
302
  }
303
303
  element.style.position = 'fixed';
304
- element.dataset['correctedPlacement'] = correctedPlacement;
304
+ element.setAttribute('data-corrected-placement', correctedPlacement);
305
305
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@db-ux/react-core-components",
3
- "version": "2.3.1",
3
+ "version": "2.4.0-0-af2a02f",
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.3.1",
42
- "@db-ux/core-foundations": "2.3.1"
41
+ "@db-ux/core-components": "2.4.0-0-af2a02f",
42
+ "@db-ux/core-foundations": "2.4.0-0-af2a02f"
43
43
  }
44
44
  }