@rio-cloud/rio-uikit 1.7.1 → 1.9.0

package/hooks/useTableSelection.d.ts

@@ -0,0 +1,166 @@
+/**
+ * CSS class applied to the currently active row.
+ */
+export declare const ACTIVE_CLASS = "active";
+/**
+ * Default HTML data attribute name used to store the unique ID on table row elements.
+ */
+export declare const DEFAULT_DATA_ATTRIBUTE = "data-id";
+export declare const DEFAULT_TABLE_CHECKBOX_CELL_CLASS = ".table-checkbox";
+export declare const DEFAULT_TABLE_ACTION_CELL_CLASS = ".table-action";
+/**
+ * Options for the `useTableSelection` hook.
+ */
+export type UseTableSelectionOptions<TData extends Record<string, any>> = {
+    /**
+     * The array of data items to be displayed in the table.
+     * The hook uses this to determine all possible row IDs for "select all" functionality.
+     */
+    tableData: TData[];
+    /**
+     * The key in `TData` objects that serves as the unique identifier for each row.
+     */
+    idKey: keyof TData;
+    /**
+     * Optional array of row IDs that should be initially selected.
+     */
+    initialSelectedRowIds?: string[];
+    /**
+     * Optional ID of the row that should be initially marked as active.
+     */
+    initialActiveRowId?: string;
+    /**
+     * Optional CSS query selector to find the checkbox input element within each table row.
+     * @default '.table-checkbox input[type="checkbox"]'
+     */
+    checkboxQuerySelector?: string;
+    /**
+     * Optional name of the HTML data attribute on `<tr>` elements that holds the unique row ID.
+     * @default 'data-id' (matches DEFAULT_DATA_ATTRIBUTE)
+     */
+    dataAttributeName?: string;
+    /**
+     * Optional external ref for the table element. If not provided, the hook creates its own.
+     * Useful if the parent component needs direct access to the table DOM element for other purposes.
+     */
+    ref?: React.RefObject<HTMLTableElement>;
+};
+/**
+ * Return value of the `useTableSelection` hook.
+ */
+export type UseTableSelectionReturn = {
+    /**
+     * React ref attached to the `<table>` HTML element.
+     * Ensure this ref is assigned to your table element to enable DOM manipulations.
+     */
+    tableRef: React.RefObject<HTMLTableElement>;
+    /**
+     * An array of strings, where each string is the ID of a currently selected row.
+     */
+    selectedRowIds: string[];
+    /**
+     * The ID of the currently active row. An empty string signifies no row is active.
+     */
+    activeRowId: string;
+    /**
+     * Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes).
+     * It expects the clicked element to be within a `<tr>` that has the specified `dataAttributeName`.
+     * Manages the selection state of a single row.
+     *
+     * @param event The React mouse event from the selection UI element.
+     */
+    onSelection: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Callback handler to be attached to the click event of table row (`<tr>`) elements.
+     * Manages the active row state.
+     * @param event The React mouse event from the `<tr>` element.
+     */
+    onActiveRowChange: (event: React.MouseEvent<HTMLTableRowElement>) => void;
+    /**
+     * Callback handler to select or deselect all rows.
+     * @param shouldSelect If true, all rows in `tableData` will be selected; otherwise, all selections will be cleared.
+     */
+    onToggleAll: (shouldSelect: boolean) => void;
+    /**
+     * Function to update row selection and active highlighting. This is useful when the row data changes due to a search value
+     * or any other filter.
+     *
+     * @returns
+     */
+    updateRowSelection: () => void;
+    /**
+     * Setter function to change selected rows from the outside in a controlled manner.
+     *
+     * @param rowIds
+     * @returns
+     */
+    setSelectedRowIds: (rowIds: string[]) => void;
+    /**
+     * Setter function to change the active row from the outside in a controlled manner.
+     * Use this to deselect an active row.
+     *
+     * @param activeRowId
+     * @returns
+     */
+    setActiveRowId: (activeRowId: string | undefined) => void;
+    /**
+     * A boolean indicating whether at least one row is currently selected.
+     */
+    hasSelection: boolean;
+    /**
+     * A boolean indicating whether all rows in the current `tableData` are selected.
+     */
+    isAllSelected: boolean;
+};
+/**
+ * A React hook to manage row selection and active row state for an HTML table,
+ * including DOM manipulations for visual feedback to optimize performance by
+ * preventing individual row re-renders.
+ *
+ * @param {UseTableSelectionOptions<TData>} options The configuration properties for the hook.
+ * @returns {UseTableSelectionReturn} The state and handlers for managing table selection and active row.
+ */
+declare const useTableSelection: <TData extends Record<string, any>>(props: UseTableSelectionOptions<TData>) => UseTableSelectionReturn;
+/**
+ * Finds a table row element by its data attribute value.
+ *
+ * @param rows Array of HTMLTableRowElements to search within.
+ * @param value The value of the data attribute to find.
+ * @param attribute The name of the data attribute (e.g., 'data-id').
+ * @returns The found HTMLTableRowElement or undefined.
+ */
+export declare const getRowByDataAttribute: (rows: HTMLTableRowElement[], value: string | null | undefined, attribute: string) => HTMLTableRowElement | undefined;
+/**
+ * Adds an "active" class to a specified table row.
+ *
+ * @param rows Array of HTMLTableRowElements to search within.
+ * @param rowId The ID of the row to highlight.
+ * @param dataAttributeName The data attribute used to identify the row.
+ */
+export declare const highlightRow: (rows: HTMLTableRowElement[], rowId: string | null, dataAttributeName: string) => void;
+/**
+ * Removes the "active" class from a specified table row.
+ *
+ * @param rows Array of HTMLTableRowElements to search within.
+ * @param rowId The ID of the row to unhighlight.
+ * @param dataAttributeName The data attribute used to identify the row.
+ */
+export declare const removeHighlightFromRow: (rows: HTMLTableRowElement[], rowId: string | null, dataAttributeName: string) => void;
+/**
+ * Sets the checked state of a checkbox within a specific table row.
+ * @param rows Array of HTMLTableRowElements to search within.
+ * @param rowId The ID of the row to target (value of dataAttribute).
+ * @param dataAttribute The data attribute used to identify the row.
+ * @param checkboxQuerySelector A CSS selector to find the checkbox input within the row.
+ * @param isChecked The desired checked state (true for checked, false for unchecked).
+ */
+export declare const setRowCheckboxState: (rows: HTMLTableRowElement[], rowId: string, dataAttribute: string, checkboxQuerySelector: string, isChecked: boolean) => void;
+/**
+ * Marks a specific row as selected by checking its checkbox.
+ */
+export declare const selectRow: (rows: HTMLTableRowElement[], rowId: string, dataAttribute: string, checkboxQuerySelector: string) => void;
+/**
+ * Marks a specific row as deselected by unchecking its checkbox.
+ */
+export declare const deselectRow: (rows: HTMLTableRowElement[], rowId: string, dataAttribute: string, checkboxQuerySelector: string) => void;
+export default useTableSelection;

package/hooks/useTableSelection.js

@@ -0,0 +1,201 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+/**
+ * CSS class applied to the currently active row.
+ */
+export const ACTIVE_CLASS = 'active';
+/**
+ * Default HTML data attribute name used to store the unique ID on table row elements.
+ */
+export const DEFAULT_DATA_ATTRIBUTE = 'data-id';
+// Default classes for the checkbox and action cells
+export const DEFAULT_TABLE_CHECKBOX_CELL_CLASS = '.table-checkbox';
+export const DEFAULT_TABLE_ACTION_CELL_CLASS = '.table-action';
+/**
+ * A React hook to manage row selection and active row state for an HTML table,
+ * including DOM manipulations for visual feedback to optimize performance by
+ * preventing individual row re-renders.
+ *
+ * @param {UseTableSelectionOptions<TData>} options The configuration properties for the hook.
+ * @returns {UseTableSelectionReturn} The state and handlers for managing table selection and active row.
+ */
+const useTableSelection = (props) => {
+    const { tableData, idKey, initialSelectedRowIds = [], initialActiveRowId = '', checkboxQuerySelector = '.table-checkbox input[type="checkbox"]', dataAttributeName = DEFAULT_DATA_ATTRIBUTE, ref, } = props;
+    const [selectedRowIds, setSelectedRowIds] = useState(initialSelectedRowIds);
+    const [activeRowId, setActiveRowId] = useState(initialActiveRowId);
+    const [lastActiveRowId, setLastActiveRowId] = useState(initialActiveRowId);
+    const tableRef = ref ?? useRef(null);
+    // --- DOM Manipulation Effect (The performance workaround) ---
+    /**
+     * Effect to handle DOM manipulations for active row highlighting and ensuring
+     * checkboxes for selected rows are visually checked.
+     * This effect runs when active row state or selection state changes.
+     * Note: This effect currently only *selects* rows based on `selectedRowIds`.
+     * Deselection in the DOM is handled directly by `onSelection` and `onToggleAll` handlers.
+     * For a more centralized DOM update, this effect could be expanded to handle deselection as well.
+     */
+    useEffect(() => {
+        updateRowSelection();
+    }, [activeRowId, lastActiveRowId, selectedRowIds]); // Rerun when these change
+    const updateRowSelection = () => {
+        if (!tableRef.current) {
+            return;
+        }
+        const rows = [...tableRef.current.rows];
+        if (lastActiveRowId !== activeRowId) {
+            // Due to performance reasons the individual rows should not re-render when the
+            // selected driver changes, hence we need to avoid passing that information as props
+            // to the row component otherwise it would re-render as the props have changed.
+            // Instead, we check here which row to highlight.
+            removeHighlightFromRow(rows, lastActiveRowId, dataAttributeName);
+            highlightRow(rows, activeRowId, dataAttributeName);
+        }
+        // handle multi-selection
+        selectedRowIds.forEach(rowId => selectRow(rows, rowId, dataAttributeName, checkboxQuerySelector));
+    };
+    const handleActiveRowChange = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const targetRow = event.currentTarget;
+        const rowId = targetRow.getAttribute(dataAttributeName) ?? '';
+        // Avoid activation if click is on checkbox/action area (more robust check needed if complex row structure)
+        const clickedElement = event.target;
+        const isCheckboxCell = clickedElement.closest(DEFAULT_TABLE_CHECKBOX_CELL_CLASS);
+        const isActionCell = clickedElement.closest(DEFAULT_TABLE_ACTION_CELL_CLASS);
+        if (isCheckboxCell || isActionCell) {
+            return;
+        }
+        changeActiveRow(rowId);
+    }, []);
+    const changeActiveRow = (rowId = '') => {
+        setActiveRowId(currentActiveRow => {
+            const newActiveRowId = currentActiveRow === rowId ? '' : rowId;
+            setLastActiveRowId(currentActiveRow); // Update lastActive for the effect
+            return newActiveRowId;
+        });
+    };
+    const handleSelection = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        // Find the correct row element containing the data attribute
+        const rowElement = event.target.closest(`tr[${dataAttributeName}]`);
+        const selectedRowId = rowElement?.getAttribute(dataAttributeName);
+        if (!selectedRowId) {
+            console.warn('Could not find row ID for selection event.');
+            return;
+        }
+        setSelectedRowIds(prevSelectedRowIds => {
+            if (prevSelectedRowIds.includes(selectedRowId)) {
+                deselectRows([selectedRowId]);
+                return prevSelectedRowIds.filter(id => id !== selectedRowId);
+            }
+            return [...prevSelectedRowIds, selectedRowId];
+        });
+    }, []);
+    const handleToggleAll = useCallback((shouldSelect) => {
+        const allRowIds = tableData.map(row => `${row[idKey]}`);
+        setSelectedRowIds(shouldSelect ? allRowIds : []);
+        // Deselect all rows when there is at least one row selected, else select all rows
+        if (shouldSelect) {
+            setSelectedRowIds(allRowIds);
+        }
+        else {
+            setSelectedRowIds([]);
+            deselectRows(allRowIds);
+            for (const id in allRowIds) {
+                const rows = tableRef.current ? [...tableRef.current.rows] : [];
+                deselectRow([...rows], id, dataAttributeName, checkboxQuerySelector);
+            }
+        }
+        // DOM updates are handled by useEffect -> updateRowsDOM
+    }, [tableData]);
+    const deselectRows = (rowIds) => {
+        const rows = tableRef.current ? [...tableRef.current.rows] : [];
+        rowIds.forEach(rowId => deselectRow(rows, rowId, dataAttributeName, checkboxQuerySelector));
+    };
+    const hasSelection = selectedRowIds.length > 0;
+    const isAllSelected = hasSelection && selectedRowIds.length === tableData.length && tableData.length > 0;
+    // --- Return hook state and handlers ---
+    return {
+        tableRef,
+        selectedRowIds,
+        activeRowId,
+        onSelection: handleSelection,
+        onActiveRowChange: handleActiveRowChange,
+        onToggleAll: handleToggleAll,
+        updateRowSelection,
+        setSelectedRowIds: (rowIds) => setSelectedRowIds(rowIds),
+        setActiveRowId: (activeRowId) => changeActiveRow(activeRowId),
+        hasSelection,
+        isAllSelected,
+    };
+};
+/**
+ * Finds a table row element by its data attribute value.
+ *
+ * @param rows Array of HTMLTableRowElements to search within.
+ * @param value The value of the data attribute to find.
+ * @param attribute The name of the data attribute (e.g., 'data-id').
+ * @returns The found HTMLTableRowElement or undefined.
+ */
+export const getRowByDataAttribute = (rows, value, attribute) => {
+    if (!value) {
+        return undefined;
+    }
+    return rows.find(row => row.getAttribute(attribute) === value);
+};
+/**
+ * Adds an "active" class to a specified table row.
+ *
+ * @param rows Array of HTMLTableRowElements to search within.
+ * @param rowId The ID of the row to highlight.
+ * @param dataAttributeName The data attribute used to identify the row.
+ */
+export const highlightRow = (rows, rowId, dataAttributeName) => {
+    const row = getRowByDataAttribute(rows, rowId, dataAttributeName);
+    row?.classList.add(ACTIVE_CLASS);
+};
+/**
+ * Removes the "active" class from a specified table row.
+ *
+ * @param rows Array of HTMLTableRowElements to search within.
+ * @param rowId The ID of the row to unhighlight.
+ * @param dataAttributeName The data attribute used to identify the row.
+ */
+export const removeHighlightFromRow = (rows, rowId, dataAttributeName) => {
+    const row = getRowByDataAttribute(rows, rowId, dataAttributeName);
+    row?.classList.remove(ACTIVE_CLASS);
+};
+// Helper to get the checkbox input for a single row
+const getCheckboxFromRow = (row, checkboxQuerySelector) => {
+    return row.querySelector(checkboxQuerySelector);
+};
+/**
+ * Sets the checked state of a checkbox within a specific table row.
+ * @param rows Array of HTMLTableRowElements to search within.
+ * @param rowId The ID of the row to target (value of dataAttribute).
+ * @param dataAttribute The data attribute used to identify the row.
+ * @param checkboxQuerySelector A CSS selector to find the checkbox input within the row.
+ * @param isChecked The desired checked state (true for checked, false for unchecked).
+ */
+export const setRowCheckboxState = (rows, rowId, dataAttribute, checkboxQuerySelector, isChecked) => {
+    const row = getRowByDataAttribute(rows, rowId, dataAttribute);
+    if (row) {
+        const checkbox = getCheckboxFromRow(row, checkboxQuerySelector);
+        if (checkbox) {
+            checkbox.checked = isChecked;
+        }
+    }
+};
+/**
+ * Marks a specific row as selected by checking its checkbox.
+ */
+export const selectRow = (rows, rowId, dataAttribute, checkboxQuerySelector) => {
+    setRowCheckboxState(rows, rowId, dataAttribute, checkboxQuerySelector, true);
+};
+/**
+ * Marks a specific row as deselected by unchecking its checkbox.
+ */
+export const deselectRow = (rows, rowId, dataAttribute, checkboxQuerySelector) => {
+    setRowCheckboxState(rows, rowId, dataAttribute, checkboxQuerySelector, false);
+};
+export default useTableSelection;

package/lib/es/BarList.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/barList/BarList';
+export * from './components/barList/BarList';

package/lib/es/BarList.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var BarList_1 = require("./components/barList/BarList");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(BarList_1).default; } });
+tslib_1.__exportStar(require("./components/barList/BarList"), exports);

package/lib/es/SaveableDateInput.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/saveableInput/SaveableDateInput';
+export * from './components/saveableInput/SaveableDateInput';

package/lib/es/SaveableDateInput.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var SaveableDateInput_1 = require("./components/saveableInput/SaveableDateInput");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(SaveableDateInput_1).default; } });
+tslib_1.__exportStar(require("./components/saveableInput/SaveableDateInput"), exports);

package/lib/es/SvgImage.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/svgImage/SvgImage';
+export * from './components/svgImage/SvgImage';

package/lib/es/SvgImage.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var SvgImage_1 = require("./components/svgImage/SvgImage");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(SvgImage_1).default; } });
+tslib_1.__exportStar(require("./components/svgImage/SvgImage"), exports);

package/lib/es/TableCol.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/table/TableCol';
+export * from './components/table/TableCol';

package/lib/es/TableCol.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var TableCol_1 = require("./components/table/TableCol");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(TableCol_1).default; } });
+tslib_1.__exportStar(require("./components/table/TableCol"), exports);

package/lib/es/TableHead.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/table/TableHead';
+export * from './components/table/TableHead';

package/lib/es/TableHead.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var TableHead_1 = require("./components/table/TableHead");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(TableHead_1).default; } });
+tslib_1.__exportStar(require("./components/table/TableHead"), exports);

package/lib/es/components/actionBarItem/ActionBarItemIcon.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const ActionBarItemIcon = (0, react_1.forwardRef)((props, ref) => {

package/lib/es/components/actionBarItem/ActionBarOverlay.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));

package/lib/es/components/activity/Activity.d.ts

@@ -7,13 +7,13 @@ declare const STATUS_MAP: {
     readonly RESTING: "resting";
     readonly WORKING: "working";
 };
-type ActivityStatus = ObjectValues<typeof STATUS_MAP>;
+export type ActivityStatus = ObjectValues<typeof STATUS_MAP>;
 declare const SIZE_MAP: {
     readonly SIZE_SM: "sm";
     readonly SIZE_LG: "lg";
     readonly SIZE_XL: "xl";
 };
-type ActivitySize = ObjectValues<typeof SIZE_MAP>;
+export type ActivitySize = ObjectValues<typeof SIZE_MAP>;
 export type ActivityProps = {
     /**
      * Defines the type of activity.

package/lib/es/components/applicationHeader/CollapsedNavItem.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 const react_1 = require("react");
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
 const CollapsedNavItem = (0, react_1.forwardRef)((props, ref) => {

package/lib/es/components/assetTree/Tree.d.ts

@@ -150,6 +150,14 @@ export type TreeProps = {
      * @default false
      */
     hideSummary?: boolean;
+    /**
+     * Callback triggered when the built-in asset type filter changes.
+     * This is only available when the default summary is used.
+     *
+     * @param type
+     * @returns
+     */
+    onTypeFilterChange?: (currentTypes: string[]) => void;
     /**
      * Defines whether the entire area below the search field is shown or not. Note: Disabling the
      * tree head will hide the select all checkbox and the tree options as well as the tree summary.
@@ -192,6 +200,18 @@ export type TreeProps = {
      * @default false
      */
     disableAnimation?: boolean;
+    /**
+     * The number of items (including groups and children) used for virtualizing the tree.
+     *
+     * @default 50
+     */
+    virtualizeThreshold?: number;
+    /**
+     * The number of items rendered beyond the visible area of a virtualized tree.
+     *
+     * @default 5
+     */
+    overscan?: number;
     /**
      * Additional classes added to the wrapping element.
      */