@insync-stageplayer/measurements 0.5.37 → 0.6.0

package/lib/components/MeasurementsTable/MeasurementsTableNoldus.js

@@ -1,86 +1,86 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-/**
- * A component that displays a list of measurements. Provides searching/sorting/selecting capabilities.
- *
- * Also allows a user to change the colors of measurements.
- */
-import React, { useMemo, useCallback, useState } from "react";
-import { useTable, useFilters, useFlexLayout, useResizeColumns, useSortBy, } from "react-table";
-import { useTheme as useSelectedTheme } from "@insync-stageplayer/ui-components";
-import styled from "styled-components";
-import { SelectedContext } from "./SelectedContext";
-import { CheckboxCell } from "./CheckboxCell";
-import * as filters from "./filters";
-import { TextColumnFilter } from "./TextColumnFilter";
-import { ColumnResizer } from "./ColumnResizer";
-import { useScrollbarWidth } from "react-use/lib/useScrollbarWidth";
-import { ColumnSorting } from "./ColumnSorting";
-import "bootstrap/dist/css/bootstrap.css";
-/**
- * Toggles a value inside an array. If a value is present in the array, it will be removed, if not
- * it will be added.
- * @param arr The array to toggle the value in.
- * @param v The value being toggled.
- * @returns
- */
-const toggle = (arr, v) => {
-    if (arr.indexOf(v) === -1) {
-        return [...arr, v];
-    }
-    else {
-        return arr.filter((cv) => cv !== v);
-    }
-};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/**
+ * A component that displays a list of measurements. Provides searching/sorting/selecting capabilities.
+ *
+ * Also allows a user to change the colors of measurements.
+ */
+import React, { useMemo, useCallback, useState } from "react";
+import { useTable, useFilters, useFlexLayout, useResizeColumns, useSortBy, } from "react-table";
+import { useTheme as useSelectedTheme } from "@insync-stageplayer/ui-components";
+import styled from "styled-components";
+import { SelectedContext } from "./SelectedContext";
+import { CheckboxCell } from "./CheckboxCell";
+import * as filters from "./filters";
+import { TextColumnFilter } from "./TextColumnFilter";
+import { ColumnResizer } from "./ColumnResizer";
+import { useScrollbarWidth } from "react-use/lib/useScrollbarWidth";
+import { ColumnSorting } from "./ColumnSorting";
+import "bootstrap/dist/css/bootstrap.css";
+/**
+ * Toggles a value inside an array. If a value is present in the array, it will be removed, if not
+ * it will be added.
+ * @param arr The array to toggle the value in.
+ * @param v The value being toggled.
+ * @returns
+ */
+const toggle = (arr, v) => {
+    if (arr.indexOf(v) === -1) {
+        return [...arr, v];
+    }
+    else {
+        return arr.filter((cv) => cv !== v);
+    }
+};
 const Table = styled.div `
   display: flex;
   flex-direction: column;
-`;
+`;
 const TableHead = styled.div `
   border-top: 1px solid ${(props) => props.theme.colors.accent};
-`;
+`;
 const Tr = styled.div `
   line-height: 1.5em;
   &:hover {
     background-color: ${(props) => !props.selected ? props.theme.colors.action.selected : undefined};
   }
-  ${(props) => props.selected
-    ? `background-color: ${props.theme.colors.action.selected}`
+  ${(props) => props.selected
+    ? `background-color: ${props.theme.colors.action.selected}`
     : undefined};
-`;
+`;
 const TableBody = styled.div `
   max-height: 100%;
-`;
+`;
 const TableBodyContainer = styled.div `
   flex: 1;
   scrollbar-width: thin;
-`;
+`;
 const Cell = styled.div `
   border: 1px solid ${(props) => props.theme.colors.accent};
-`;
+`;
 const Td = styled(Cell) `
   padding: 0 0.5em 0 0.5em;
   display: flex;
   align-items: center;
-`;
+`;
 const Truncated = styled.div `
   display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-`;
+`;
 const StyledTextColumnFilter = styled(TextColumnFilter) `
   width: 100%;
-`;
+`;
 const Th = styled(Cell) `
   padding: 0 0.5em 0.5em 0.5em;
   display: flex;
@@ -89,145 +89,145 @@ const Th = styled(Cell) `
   &:last-child {
     border-right: 2px solid ${(props) => props.theme.colors.accent};
   }
-`;
+`;
 const ColumnHeader = styled.div `
   user-select: none;
-`;
-/**
- * Definitions for the filters, please check https://react-table.tanstack.com/docs/api/useFilters#table-options
- */
-const filterTypes = {
-    text: filters.textFilter,
-};
-/**
- * The initial state of the table.
- */
-const initialState = {
-    // Sorting by the measurement name.
-    sortBy: [{ id: "stageplayer_name_filter", desc: false }],
-};
-/**
- * Convenience function for quickly creating a non-selectable column definition for react table.
- * @param options
- * @returns
- */
-const createColumn = (options) => (Object.assign({ Filter: StyledTextColumnFilter, selectable: true }, options));
-const defaultOnChange = () => { };
-/**
- * A component to render a list of measurements in a table. This table provides functionalities like:
- *
- * Please read up here https://react-table.tanstack.com/ for more information as to how this component works internally.
- *
- * - Sorting
- * - Resizable columns
- * - Changing measurement colors
- * - Searching measurements
- * - Selecting measurements
- * @param props
- * @returns
- */
-export const MeasurementsTableNoldus = (props) => {
-    const { selected = [], measurements, onChange = defaultOnChange, onColorChange, onYAxisPosChange, widths, single, formatFrequency, globallyUniqueMeasurementColors, dataViewerId } = props, rest = __rest(props, ["selected", "measurements", "onChange", "onColorChange", "onYAxisPosChange", "widths", "single", "formatFrequency", "globallyUniqueMeasurementColors", "dataViewerId"]);
-    const [showColorPicker, setShowColorPicker] = useState();
-    let selectedDataScaleValue = 0;
-    // This doesn't work correctly, the column separators between the top row and rest don't align nicely.
-    const scrollbarWidth = useScrollbarWidth();
-    const widthProps = useCallback((index, defaultVal = undefined) => {
-        return widths && widths[index] !== -1
-            ? { width: widths[index], minWidth: widths[index] }
-            : defaultVal
-                ? { width: defaultVal, minWidth: defaultVal }
-                : {};
-    }, [widths]);
-    const columns = useMemo(() => [
-        createColumn(Object.assign({ Header: React.createElement("div", { "aria-label": "Active" }), accessor: "id", Cell: (data) => {
-                return (React.createElement(CheckboxCell, { id: data.value, rowToDisable: selected.length !== 0 &&
-                        data.row.original.dataScale !== selectedDataScaleValue }));
-            }, disableFilters: true, disableResizing: true, disableSortBy: true, maxWidth: 30 }, widthProps(0, 35))),
-        createColumn(Object.assign({ id: "stageplayer_name_filter", Header: "Name", accessor: "name" }, widthProps(1))),
-        createColumn(Object.assign({ Header: "Unit", accessor: "unit" }, widthProps(2, 35))),
-        createColumn(Object.assign({ Header: "Min", accessor: "min" }, widthProps(3, 50))),
-        createColumn(Object.assign({ Header: "Max", accessor: "max" }, widthProps(4, 50))),
-        createColumn(Object.assign({ Header: "Sample Rate", id: "sampleRate", accessor: "frequency", Cell: (data) => {
-                return formatFrequency ? formatFrequency(data.value) : data.value;
-            }, readable: "sample rate", disableFilters: true }, widthProps(5, 100))),
-    ], [
-        onColorChange,
-        widthProps,
-        showColorPicker,
-        formatFrequency,
-        globallyUniqueMeasurementColors,
-        dataViewerId,
-        selected.length,
-        selectedDataScaleValue,
-    ]);
-    const selectedTheme = useSelectedTheme();
-    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
-        columns,
-        data: measurements,
-        filterTypes,
-        initialState,
-        disableSortRemove: true,
-        autoResetSortBy: false,
-        autoResetFilters: false,
-    }, useFilters, useFlexLayout, useResizeColumns, useSortBy);
-    return (
-    // apply the table props
-    React.createElement(SelectedContext.Provider, { value: { single, selected, yAxisLeftSelected: [], onChange } },
-        React.createElement(Table, Object.assign({}, getTableProps(), rest),
-            React.createElement(TableHead, { scrollbarWidth: scrollbarWidth }, headerGroups.map((headerGroup) => (React.createElement("div", Object.assign({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map((column) => (React.createElement(Th, Object.assign({}, column.getHeaderProps()),
-                React.createElement(ColumnHeader, Object.assign({}, column.getSortByToggleProps(), { role: "button" }),
-                    column.render("Header"),
-                    React.createElement(ColumnSorting, { column: column })),
-                column.canFilter && React.createElement("div", null, column.render("Filter")),
-                column.getResizerProps ? (React.createElement(ColumnResizer, Object.assign({}, column.getResizerProps(), { resizing: column.isResizing }))) : null))))))),
-            React.createElement(TableBodyContainer, null,
-                React.createElement(TableBody, Object.assign({}, getTableBodyProps()), rows.map((row, i) => {
-                    prepareRow(row);
-                    if (selected.indexOf(row.values.id) !== -1)
-                        selectedDataScaleValue = row.original.dataScale;
-                    return (React.createElement(Tr, Object.assign({}, row.getRowProps(), { tabIndex: 0, selected: selected.indexOf(row.values.id) !== -1, onKeyDown: (e) => {
-                            if (e.key === "Enter" &&
-                                (selected.length === 0 ||
-                                    row.original.dataScale === selectedDataScaleValue)) {
-                                onChange && onChange(toggle(selected, row.values.id));
-                            }
-                            else if (e.key === "ArrowDown") {
-                                const target = e.target;
-                                if (target instanceof HTMLElement &&
-                                    target.nextSibling instanceof HTMLElement) {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                    target.nextSibling.focus();
-                                }
-                            }
-                            else if (e.key === "ArrowUp") {
-                                const target = e.target;
-                                if (target instanceof HTMLElement &&
-                                    target.previousSibling instanceof HTMLElement) {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                    target.previousSibling.focus();
-                                }
-                            }
-                        } }), row.cells.map((cell) => {
-                        const clickHandler = () => {
-                            if (selected.length === 0 ||
-                                cell.row.original.dataScale === selectedDataScaleValue) {
-                                cell.column.selectable && onChange
-                                    ? onChange(single
-                                        ? [cell.row.original.id]
-                                        : toggle(selected, cell.row.original.id))
-                                    : onYAxisPosChange &&
-                                        onYAxisPosChange(single
-                                            ? [cell.row.original.id]
-                                            : toggle(selected, cell.row.original.id));
-                                selectedDataScaleValue = cell.row.original.dataScale;
-                            }
-                        };
-                        return (React.createElement(Td, Object.assign({}, cell.getCellProps(), { onClick: clickHandler }),
-                            React.createElement(Truncated, { title: cell.value }, cell.render("Cell"))));
-                    })));
-                }))))));
-};
+`;
+/**
+ * Definitions for the filters, please check https://react-table.tanstack.com/docs/api/useFilters#table-options
+ */
+const filterTypes = {
+    text: filters.textFilter,
+};
+/**
+ * The initial state of the table.
+ */
+const initialState = {
+    // Sorting by the measurement name.
+    sortBy: [{ id: "stageplayer_name_filter", desc: false }],
+};
+/**
+ * Convenience function for quickly creating a non-selectable column definition for react table.
+ * @param options
+ * @returns
+ */
+const createColumn = (options) => (Object.assign({ Filter: StyledTextColumnFilter, selectable: true }, options));
+const defaultOnChange = () => { };
+/**
+ * A component to render a list of measurements in a table. This table provides functionalities like:
+ *
+ * Please read up here https://react-table.tanstack.com/ for more information as to how this component works internally.
+ *
+ * - Sorting
+ * - Resizable columns
+ * - Changing measurement colors
+ * - Searching measurements
+ * - Selecting measurements
+ * @param props
+ * @returns
+ */
+export const MeasurementsTableNoldus = (props) => {
+    const { selected = [], measurements, onChange = defaultOnChange, onColorChange, onYAxisPosChange, widths, single, formatFrequency, globallyUniqueMeasurementColors, dataViewerId } = props, rest = __rest(props, ["selected", "measurements", "onChange", "onColorChange", "onYAxisPosChange", "widths", "single", "formatFrequency", "globallyUniqueMeasurementColors", "dataViewerId"]);
+    const [showColorPicker, setShowColorPicker] = useState();
+    let selectedDataScaleValue = 0;
+    // This doesn't work correctly, the column separators between the top row and rest don't align nicely.
+    const scrollbarWidth = useScrollbarWidth();
+    const widthProps = useCallback((index, defaultVal = undefined) => {
+        return widths && widths[index] !== -1
+            ? { width: widths[index], minWidth: widths[index] }
+            : defaultVal
+                ? { width: defaultVal, minWidth: defaultVal }
+                : {};
+    }, [widths]);
+    const columns = useMemo(() => [
+        createColumn(Object.assign({ Header: React.createElement("div", { "aria-label": "Active" }), accessor: "id", Cell: (data) => {
+                return (React.createElement(CheckboxCell, { id: data.value, rowToDisable: selected.length !== 0 &&
+                        data.row.original.dataScale !== selectedDataScaleValue }));
+            }, disableFilters: true, disableResizing: true, disableSortBy: true, maxWidth: 30 }, widthProps(0, 35))),
+        createColumn(Object.assign({ id: "stageplayer_name_filter", Header: "Name", accessor: "name" }, widthProps(1))),
+        createColumn(Object.assign({ Header: "Unit", accessor: "unit" }, widthProps(2, 35))),
+        createColumn(Object.assign({ Header: "Min", accessor: "min" }, widthProps(3, 50))),
+        createColumn(Object.assign({ Header: "Max", accessor: "max" }, widthProps(4, 50))),
+        createColumn(Object.assign({ Header: "Sample Rate", id: "sampleRate", accessor: "frequency", Cell: (data) => {
+                return formatFrequency ? formatFrequency(data.value) : data.value;
+            }, readable: "sample rate", disableFilters: true }, widthProps(5, 100))),
+    ], [
+        onColorChange,
+        widthProps,
+        showColorPicker,
+        formatFrequency,
+        globallyUniqueMeasurementColors,
+        dataViewerId,
+        selected.length,
+        selectedDataScaleValue,
+    ]);
+    const selectedTheme = useSelectedTheme();
+    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
+        columns,
+        data: measurements,
+        filterTypes,
+        initialState,
+        disableSortRemove: true,
+        autoResetSortBy: false,
+        autoResetFilters: false,
+    }, useFilters, useFlexLayout, useResizeColumns, useSortBy);
+    return (
+    // apply the table props
+    React.createElement(SelectedContext.Provider, { value: { single, selected, yAxisLeftSelected: [], onChange } },
+        React.createElement(Table, Object.assign({}, getTableProps(), rest),
+            React.createElement(TableHead, { scrollbarWidth: scrollbarWidth }, headerGroups.map((headerGroup) => (React.createElement("div", Object.assign({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map((column) => (React.createElement(Th, Object.assign({}, column.getHeaderProps()),
+                React.createElement(ColumnHeader, Object.assign({}, column.getSortByToggleProps(), { role: "button" }),
+                    column.render("Header"),
+                    React.createElement(ColumnSorting, { column: column })),
+                column.canFilter && React.createElement("div", null, column.render("Filter")),
+                column.getResizerProps ? (React.createElement(ColumnResizer, Object.assign({}, column.getResizerProps(), { resizing: column.isResizing }))) : null))))))),
+            React.createElement(TableBodyContainer, null,
+                React.createElement(TableBody, Object.assign({}, getTableBodyProps()), rows.map((row, i) => {
+                    prepareRow(row);
+                    if (selected.indexOf(row.values.id) !== -1)
+                        selectedDataScaleValue = row.original.dataScale;
+                    return (React.createElement(Tr, Object.assign({}, row.getRowProps(), { tabIndex: 0, selected: selected.indexOf(row.values.id) !== -1, onKeyDown: (e) => {
+                            if (e.key === "Enter" &&
+                                (selected.length === 0 ||
+                                    row.original.dataScale === selectedDataScaleValue)) {
+                                onChange && onChange(toggle(selected, row.values.id));
+                            }
+                            else if (e.key === "ArrowDown") {
+                                const target = e.target;
+                                if (target instanceof HTMLElement &&
+                                    target.nextSibling instanceof HTMLElement) {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    target.nextSibling.focus();
+                                }
+                            }
+                            else if (e.key === "ArrowUp") {
+                                const target = e.target;
+                                if (target instanceof HTMLElement &&
+                                    target.previousSibling instanceof HTMLElement) {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    target.previousSibling.focus();
+                                }
+                            }
+                        } }), row.cells.map((cell) => {
+                        const clickHandler = () => {
+                            if (selected.length === 0 ||
+                                cell.row.original.dataScale === selectedDataScaleValue) {
+                                cell.column.selectable && onChange
+                                    ? onChange(single
+                                        ? [cell.row.original.id]
+                                        : toggle(selected, cell.row.original.id))
+                                    : onYAxisPosChange &&
+                                        onYAxisPosChange(single
+                                            ? [cell.row.original.id]
+                                            : toggle(selected, cell.row.original.id));
+                                selectedDataScaleValue = cell.row.original.dataScale;
+                            }
+                        };
+                        return (React.createElement(Td, Object.assign({}, cell.getCellProps(), { onClick: clickHandler }),
+                            React.createElement(Truncated, { title: cell.value }, cell.render("Cell"))));
+                    })));
+                }))))));
+};
 //# sourceMappingURL=MeasurementsTableNoldus.js.map

package/lib/components/MeasurementsTable/SelectedContext.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
-/**
- * A context for keeping track of selected values. This will keep rerenders in the table to a minimum.
- */
-export declare const SelectedContext: import("react").Context<{
-    single: boolean | undefined;
-    selected: string[];
-    yAxisLeftSelected: string[];
-    onChange: (newSelected: string[]) => void;
-}>;
+/// <reference types="react" />
+/**
+ * A context for keeping track of selected values. This will keep rerenders in the table to a minimum.
+ */
+export declare const SelectedContext: import("react").Context<{
+    single: boolean | undefined;
+    selected: string[];
+    yAxisLeftSelected: string[];
+    onChange: (newSelected: string[]) => void;
+}>;
 //# sourceMappingURL=SelectedContext.d.ts.map

package/lib/components/MeasurementsTable/SelectedContext.js

@@ -1,11 +1,11 @@
-import { createContext } from "react";
-/**
- * A context for keeping track of selected values. This will keep rerenders in the table to a minimum.
- */
-export const SelectedContext = createContext({
-    single: false,
-    selected: [],
-    yAxisLeftSelected: [],
-    onChange: (newSelected) => { },
-});
+import { createContext } from "react";
+/**
+ * A context for keeping track of selected values. This will keep rerenders in the table to a minimum.
+ */
+export const SelectedContext = createContext({
+    single: false,
+    selected: [],
+    yAxisLeftSelected: [],
+    onChange: (newSelected) => { },
+});
 //# sourceMappingURL=SelectedContext.js.map

package/lib/components/MeasurementsTable/TextColumnFilter.d.ts

@@ -1,9 +1,9 @@
-import React from "react";
-import { FilterProps } from "react-table";
-interface TextColumnFilterProps<T extends object> extends FilterProps<T> {
-    className: string;
-    style: React.CSSProperties;
-}
-export declare function TextColumnFilter<T extends object>({ column: { id, filterValue, setFilter, readable }, style, className, }: TextColumnFilterProps<T>): JSX.Element;
-export {};
+import React from "react";
+import { FilterProps } from "react-table";
+interface TextColumnFilterProps<T extends object> extends FilterProps<T> {
+    className: string;
+    style: React.CSSProperties;
+}
+export declare function TextColumnFilter<T extends object>({ column: { id, filterValue, setFilter, readable }, style, className, }: TextColumnFilterProps<T>): React.JSX.Element;
+export {};
 //# sourceMappingURL=TextColumnFilter.d.ts.map

package/lib/components/MeasurementsTable/TextColumnFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextColumnFilter.d.ts","sourceRoot":"","sources":["../../../src/components/MeasurementsTable/TextColumnFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,UAAU,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,WAAW,CAAC,CAAC,CAAC;IACtE,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC;CAC5B;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,EACjD,MAAM,EAAE,EAAE,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,EAChD,KAAK,EACL,SAAS,GACV,EAAE,qBAAqB,CAAC,CAAC,CAAC,eA4B1B"}
+{"version":3,"file":"TextColumnFilter.d.ts","sourceRoot":"","sources":["../../../src/components/MeasurementsTable/TextColumnFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,UAAU,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,WAAW,CAAC,CAAC,CAAC;IACtE,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC;CAC5B;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,EACjD,MAAM,EAAE,EAAE,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,EAChD,KAAK,EACL,SAAS,GACV,EAAE,qBAAqB,CAAC,CAAC,CAAC,qBA4B1B"}

package/lib/components/MeasurementsTable/TextColumnFilter.js

@@ -1,16 +1,16 @@
-import React, { useEffect } from "react";
-export function TextColumnFilter({ column: { id, filterValue, setFilter, readable }, style, className, }) {
-    const [value, setValue] = React.useState(filterValue || "");
-    const handleChange = (event) => {
-        setValue(event.target.value);
-        setFilter(event.target.value);
-    };
-    // ensure that reset loads the new value
-    useEffect(() => {
-        setValue(filterValue || "");
-    }, [filterValue]);
-    return (React.createElement("input", { style: style, className: className, placeholder: "Filter", autoComplete: "off", "aria-label": `Filter by ${readable || id}`, type: "text", name: id, value: value, onChange: handleChange, onBlur: (e) => {
-            setFilter(e.target.value || undefined);
-        } }));
-}
+import React, { useEffect } from "react";
+export function TextColumnFilter({ column: { id, filterValue, setFilter, readable }, style, className, }) {
+    const [value, setValue] = React.useState(filterValue || "");
+    const handleChange = (event) => {
+        setValue(event.target.value);
+        setFilter(event.target.value);
+    };
+    // ensure that reset loads the new value
+    useEffect(() => {
+        setValue(filterValue || "");
+    }, [filterValue]);
+    return (React.createElement("input", { style: style, className: className, placeholder: "Filter", autoComplete: "off", "aria-label": `Filter by ${readable || id}`, type: "text", name: id, value: value, onChange: handleChange, onBlur: (e) => {
+            setFilter(e.target.value || undefined);
+        } }));
+}
 //# sourceMappingURL=TextColumnFilter.js.map

package/lib/components/MeasurementsTable/filters.d.ts

@@ -1,4 +1,4 @@
-import { FilterValue, IdType, Row } from "react-table";
-export declare function textMatcher<T extends object>(match: string, id: IdType<T>): (row: Row<T>) => boolean;
-export declare function textFilter<T extends object>(rows: Array<Row<T>>, id: IdType<T>, filterValue: FilterValue): Row<T>[];
+import { FilterValue, IdType, Row } from "react-table";
+export declare function textMatcher<T extends object>(match: string, id: IdType<T>): (row: Row<T>) => boolean;
+export declare function textFilter<T extends object>(rows: Array<Row<T>>, id: IdType<T>, filterValue: FilterValue): Row<T>[];
 //# sourceMappingURL=filters.d.ts.map

package/lib/components/MeasurementsTable/filters.js

@@ -1,10 +1,10 @@
-export function textMatcher(match, id) {
-    return (row) => {
-        const val = row.values[id[0]];
-        return `${val}`.toLowerCase().indexOf(match) !== -1;
-    };
-}
-export function textFilter(rows, id, filterValue) {
-    return rows.filter(textMatcher(filterValue, id));
-}
+export function textMatcher(match, id) {
+    return (row) => {
+        const val = row.values[id[0]];
+        return `${val}`.toLowerCase().indexOf(match) !== -1;
+    };
+}
+export function textFilter(rows, id, filterValue) {
+    return rows.filter(textMatcher(filterValue, id));
+}
 //# sourceMappingURL=filters.js.map

package/lib/components/MeasurementsTable/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./MeasurementsTable";
-export * from "./MeasurementsTableNoldus";
+export * from "./MeasurementsTable";
+export * from "./MeasurementsTableNoldus";
 //# sourceMappingURL=index.d.ts.map

package/lib/components/MeasurementsTable/index.js

@@ -1,3 +1,3 @@
-export * from "./MeasurementsTable";
-export * from "./MeasurementsTableNoldus";
+export * from "./MeasurementsTable";
+export * from "./MeasurementsTableNoldus";
 //# sourceMappingURL=index.js.map

package/lib/components/ModalMeasurementChooser.d.ts

@@ -1,20 +1,20 @@
-import React from "react";
-import { MeasurementsChooserProps } from "./MeasurementsChooser";
-interface ModalMeasurementsChooserProps extends MeasurementsChooserProps {
-    /**
-     * If set to true, the modal will be visible.
-     */
-    open?: boolean;
-    /**
-     * Called when the modal is closed.
-     */
-    onClose?: () => void;
-}
-/**
- * A modal wrapper around MeasurementsChooser.
- * @param props
- * @returns
- */
-export declare const ModalMeasurementsChooser: React.FC<ModalMeasurementsChooserProps>;
-export {};
+import React from "react";
+import { MeasurementsChooserProps } from "./MeasurementsChooser";
+interface ModalMeasurementsChooserProps extends MeasurementsChooserProps {
+    /**
+     * If set to true, the modal will be visible.
+     */
+    open?: boolean;
+    /**
+     * Called when the modal is closed.
+     */
+    onClose?: () => void;
+}
+/**
+ * A modal wrapper around MeasurementsChooser.
+ * @param props
+ * @returns
+ */
+export declare const ModalMeasurementsChooser: React.FC<ModalMeasurementsChooserProps>;
+export {};
 //# sourceMappingURL=ModalMeasurementChooser.d.ts.map