@deviceinsight/ng-ui-components 7.10.0 → 7.12.0

package/dist/index.js

@@ -10,7 +10,7 @@ import { HexColorPicker, RgbaStringColorPicker, RgbStringColorPicker } from "rea
 import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 import DatePicker, { registerLocale } from "react-datepicker";
-import { debounce, isEqual, orderBy, uniqWith, difference } from "lodash";
+import { debounce, isEqual, kebabCase, orderBy, uniqWith, difference } from "lodash";
 import dayjs from "dayjs";
 import localeData from "dayjs/plugin/localeData";
 import localizedFormat from "dayjs/plugin/localizedFormat";
@@ -1576,6 +1576,7 @@ class SelectWithSearch extends Component {
   render() {
     const { noResultsMessage, placeholder, value, onChange, clearable, loading, disabled } = this.props;
     const { options } = this.state;
+    const dataTestId = this.props["data-testid"];
     return /* @__PURE__ */ jsx(
       Select,
       {
@@ -1599,6 +1600,7 @@ class SelectWithSearch extends Component {
         isLoading: loading,
         menuPortalTarget: this.portalRoot,
         isDisabled: disabled,
+        formatOptionLabel: dataTestId ? (option) => /* @__PURE__ */ jsx("span", { "data-testid": `${dataTestId}-option-${kebabCase(option.label)}`, children: option.label }) : void 0,
         onBlur: () => {
           if (this.props.freeForm && this.state.inputValue !== null) {
             this.setState({ options: this.props.options });
@@ -2747,6 +2749,7 @@ class SelectWithSearchAsync extends Component {
   render() {
     const { clearable, noResultsMessage, disabled, menuPortalTarget } = this.props;
     const { currentItem } = this.state;
+    const dataTestId = this.props["data-testid"];
     return /* @__PURE__ */ jsx(
       AsyncPaginate,
       {
@@ -2760,7 +2763,8 @@ class SelectWithSearchAsync extends Component {
         loadOptions: this.fetchOptions,
         isDisabled: disabled,
         menuPortalTarget,
-        placeholder: this.props.placeholder
+        placeholder: this.props.placeholder,
+        formatOptionLabel: dataTestId ? (option) => /* @__PURE__ */ jsx("span", { "data-testid": `${dataTestId}-option-${kebabCase(option.label)}`, children: option.label }) : void 0
       }
     );
   }