@deviceinsight/ng-ui-components 7.9.0 → 7.11.0

package/dist/index.js

@@ -1503,6 +1503,127 @@ function Pagination({ onChangePage, page, totalPages, onChangeSize, size }) {
     ) })
   ] }) });
 }
+function getSortedOptions(options, compareOptions) {
+  if (!compareOptions) {
+    return orderBy(options, "label", "asc");
+  }
+  if (options.every((option) => !option.options)) {
+    const singleOptions = options;
+    return [...singleOptions].sort(compareOptions);
+  }
+  if (options.every((option) => option.options)) {
+    const groupOptions = options;
+    return groupOptions.map((option) => ({ ...option, options: [...option.options].sort(compareOptions) }));
+  }
+  throw new Error("Mixing groups with single options not allowed");
+}
+class SelectWithSearch extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      options: [],
+      inputValue: null
+    };
+    this.selectRef = createRef();
+    this.portalRoot = null;
+    this.updateOptions = () => {
+      const { options, specialOptions, compareOptions } = this.props;
+      const sortedOptions = getSortedOptions(options, compareOptions);
+      if (specialOptions) {
+        this.setState({
+          // @ts-ignore
+          options: [...sortedOptions, ...specialOptions]
+        });
+      } else {
+        this.setState({
+          options: sortedOptions
+        });
+      }
+    };
+    this.filterOption = (option, inputValue) => {
+      return option.label.toString().toLowerCase().startsWith(inputValue.toLowerCase());
+    };
+    this.getContainerClasses = () => {
+      const { specialOptions } = this.props;
+      if (specialOptions) {
+        return ["select-search-container", "special"];
+      }
+      return ["select-search-container"];
+    };
+  }
+  componentDidMount() {
+    this.updateOptions();
+    if (this.props["data-testid"] && this.selectRef && this.selectRef.current) {
+      this.selectRef.current.controlRef.setAttribute("data-testid", this.props["data-testid"]);
+    }
+    if (this.props.menuPortalTarget) {
+      this.portalRoot = document.createElement("div");
+      const classes = this.getContainerClasses();
+      this.portalRoot.classList.add(...classes);
+      this.props.menuPortalTarget.appendChild(this.portalRoot);
+    }
+  }
+  componentDidUpdate(prevProps) {
+    if (!isEqual(prevProps.options, this.props.options) || prevProps.freeForm !== this.props.freeForm) {
+      this.updateOptions();
+    }
+  }
+  componentWillUnmount() {
+    if (this.props.menuPortalTarget && this.portalRoot) {
+      this.props.menuPortalTarget.removeChild(this.portalRoot);
+    }
+  }
+  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,
+      {
+        ref: this.selectRef,
+        joinValues: true,
+        name: "form-field-name",
+        className: this.getContainerClasses().join(" "),
+        classNamePrefix: "select-search",
+        isClearable: clearable,
+        noOptionsMessage: noResultsMessage ? () => noResultsMessage : void 0,
+        options,
+        value: value || null,
+        onChange,
+        onInputChange: (newValue) => {
+          if (this.props.freeForm && newValue) {
+            this.setState({ inputValue: newValue });
+          }
+        },
+        placeholder,
+        filterOption: this.filterOption,
+        isLoading: loading,
+        menuPortalTarget: this.portalRoot,
+        isDisabled: disabled,
+        formatOptionLabel: dataTestId ? (option) => /* @__PURE__ */ jsx("span", { "data-testid": `${dataTestId}-option-${option.label}`, children: option.label }) : void 0,
+        onBlur: () => {
+          if (this.props.freeForm && this.state.inputValue !== null) {
+            this.setState({ options: this.props.options });
+            this.setState({ inputValue: this.state.inputValue }, () => {
+              const newItem = {
+                type: "item",
+                value: this.state.inputValue,
+                label: this.state.inputValue
+              };
+              this.setState(
+                (prevState) => ({
+                  options: [newItem, ...prevState.options]
+                })
+              );
+              this.state.inputValue = null;
+              onChange(newItem);
+            });
+          }
+        }
+      }
+    );
+  }
+}
 const getInitialValueFromColumnDef = (columnDef) => {
   return columnDef.filterable?.initialValue ?? "";
 };
@@ -1623,125 +1744,6 @@ function extendColumnDefsWithCheckboxes(columnDefs, onSelectChange, onSelectAllC
 function getClassName(tableName, columnName) {
   return `${tableName || "unnamedTable"}-${columnName}`;
 }
-function getSortedOptions(options, compareOptions) {
-  if (!compareOptions) {
-    return orderBy(options, "label", "asc");
-  }
-  if (options.every((option) => !option.options)) {
-    const singleOptions = options;
-    return [...singleOptions].sort(compareOptions);
-  }
-  if (options.every((option) => option.options)) {
-    const groupOptions = options;
-    return groupOptions.map((option) => ({ ...option, options: [...option.options].sort(compareOptions) }));
-  }
-  throw new Error("Mixing groups with single options not allowed");
-}
-class SelectWithSearch extends Component {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      options: [],
-      inputValue: null
-    };
-    this.selectRef = createRef();
-    this.portalRoot = null;
-    this.updateOptions = () => {
-      const { options, specialOptions, compareOptions } = this.props;
-      const sortedOptions = getSortedOptions(options, compareOptions);
-      if (specialOptions) {
-        this.setState({
-          // @ts-ignore
-          options: [...sortedOptions, ...specialOptions]
-        });
-      } else {
-        this.setState({
-          options: sortedOptions
-        });
-      }
-    };
-    this.filterOption = (option, inputValue) => {
-      return option.label.toString().toLowerCase().startsWith(inputValue.toLowerCase());
-    };
-    this.getContainerClasses = () => {
-      const { specialOptions } = this.props;
-      if (specialOptions) {
-        return ["select-search-container", "special"];
-      }
-      return ["select-search-container"];
-    };
-  }
-  componentDidMount() {
-    this.updateOptions();
-    if (this.props["data-testid"] && this.selectRef && this.selectRef.current) {
-      this.selectRef.current.controlRef.setAttribute("data-testid", this.props["data-testid"]);
-    }
-    if (this.props.menuPortalTarget) {
-      this.portalRoot = document.createElement("div");
-      const classes = this.getContainerClasses();
-      this.portalRoot.classList.add(...classes);
-      this.props.menuPortalTarget.appendChild(this.portalRoot);
-    }
-  }
-  componentDidUpdate(prevProps) {
-    if (!isEqual(prevProps.options, this.props.options) || prevProps.freeForm !== this.props.freeForm) {
-      this.updateOptions();
-    }
-  }
-  componentWillUnmount() {
-    if (this.props.menuPortalTarget && this.portalRoot) {
-      this.props.menuPortalTarget.removeChild(this.portalRoot);
-    }
-  }
-  render() {
-    const { noResultsMessage, placeholder, value, onChange, clearable, loading, disabled } = this.props;
-    const { options } = this.state;
-    return /* @__PURE__ */ jsx(
-      Select,
-      {
-        ref: this.selectRef,
-        joinValues: true,
-        name: "form-field-name",
-        className: this.getContainerClasses().join(" "),
-        classNamePrefix: "select-search",
-        isClearable: clearable,
-        noOptionsMessage: noResultsMessage ? () => noResultsMessage : void 0,
-        options,
-        value: value || null,
-        onChange,
-        onInputChange: (newValue) => {
-          if (this.props.freeForm && newValue) {
-            this.setState({ inputValue: newValue });
-          }
-        },
-        placeholder,
-        filterOption: this.filterOption,
-        isLoading: loading,
-        menuPortalTarget: this.portalRoot,
-        isDisabled: disabled,
-        onBlur: () => {
-          if (this.props.freeForm && this.state.inputValue !== null) {
-            this.setState({ options: this.props.options });
-            this.setState({ inputValue: this.state.inputValue }, () => {
-              const newItem = {
-                type: "item",
-                value: this.state.inputValue,
-                label: this.state.inputValue
-              };
-              this.setState(
-                (prevState) => ({
-                  options: [newItem, ...prevState.options]
-                })
-              );
-              this.state.inputValue = null;
-              onChange(newItem);
-            });
-          }
-        }
-      }
-    );
-  }
-}
 const ReactableTableFilterRow = ({ columnDefs, onFilter, tableName }) => {
   const { t } = useTranslation();
   const [state, setState] = useState({});
@@ -1838,7 +1840,15 @@ const ReactableTableFilterRow = ({ columnDefs, onFilter, tableName }) => {
       );
     }
   };
-  return /* @__PURE__ */ jsx("tr", { className: "di filterrow form", children: columnDefs.map((columnDef) => /* @__PURE__ */ jsx("td", { style: { textAlign: columnDef.align || "left" }, children: getFilterByColumnDef(columnDef) }, columnDef.name)) });
+  return /* @__PURE__ */ jsx("tr", { className: "di filterrow form", children: columnDefs.map((columnDef) => /* @__PURE__ */ jsx(
+    "td",
+    {
+      className: getClassName(tableName, columnDef.name),
+      style: { textAlign: columnDef.align || "left" },
+      children: getFilterByColumnDef(columnDef)
+    },
+    columnDef.name
+  )) });
 };
 const toggleSortDirection = (direction) => direction === "ASC" ? "DESC" : "ASC";
 class ReactableTableHeader extends Component {
@@ -2739,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,
       {
@@ -2752,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-${option.label}`, children: option.label }) : void 0
       }
     );
   }