xmlui 0.11.4 → 0.11.7

package/dist/scripts/src/components/Table/Table.js

@@ -1,268 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.tableComponentRenderer = exports.TableMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const immer_1 = __importDefault(require("immer"));
-const Table_module_scss_1 = __importDefault(require("./Table.module.scss"));
-require("./react-table-config.d.ts");
-const renderers_1 = require("../../components-core/renderers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const constants_1 = require("../../components-core/constants");
-const metadata_helpers_1 = require("../metadata-helpers");
-const TableContext_1 = require("../Column/TableContext");
-const SelectionStoreNative_1 = require("../SelectionStore/SelectionStoreNative");
-const TableNative_1 = require("./TableNative");
-const PaginationNative_1 = require("../Pagination/PaginationNative");
-const COMP = "Table";
-exports.TableMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`Table` presents structured data for viewing, sorting, selection, and interaction.",
-    props: {
-        items: (0, metadata_helpers_1.dInternal)(`You can use \`items\` as an alias for the \`data\` property. ` +
-            `When you bind the table to a data source (e.g. an API endpoint), ` +
-            `the \`data\` acts as the property that accepts a URL to fetch information from an API. ` +
-            `When both \`items\` and \`data\` are used, \`items\` has priority.`),
-        data: (0, metadata_helpers_1.d)(`The component receives data via this property. The \`data\` property is a list of items ` +
-            `that the \`Table\` can display.`),
-        isPaginated: {
-            description: `This property adds pagination controls to the \`${COMP}\`.`,
-            valueType: "boolean",
-            defaultValue: TableNative_1.defaultProps.isPaginated,
-        },
-        loading: (0, metadata_helpers_1.d)(`This boolean property indicates if the component is fetching (or processing) data. This ` +
-            `property is useful when data is loaded conditionally or receiving it takes some time.`),
-        headerHeight: (0, metadata_helpers_1.d)(`This optional property is used to specify the height of the table header.`),
-        rowsSelectable: (0, metadata_helpers_1.d)(`Indicates whether the rows are selectable (\`true\`) or not (\`false\`).`),
-        initiallySelected: (0, metadata_helpers_1.d)(`An array of IDs that should be initially selected when the table is rendered. ` +
-            `This property only has an effect when the rowsSelectable property is set to \`true\`.`),
-        syncWithAppState: (0, metadata_helpers_1.d)(`An AppState instance to synchronize the table's selection state with. The table will ` +
-            `read from and write to the 'selectedIds' property of the AppState object. When provided, ` +
-            `this takes precedence over the initiallySelected property for initial selection. ` +
-            `You can use the AppState's didUpdate event to receive notifications when the selection changes.`),
-        pageSize: (0, metadata_helpers_1.d)(`This property defines the number of rows to display per page when pagination is enabled.`),
-        pageSizeOptions: {
-            description: "This property holds an array of page sizes (numbers) the user can select for " +
-                "pagination. If this property is not defined, the component allows only a page size of 10 items.",
-        },
-        showPageInfo: (0, metadata_helpers_1.d)("Whether to show page information. It works the same as the [Pagination component property](./Pagination#showpageinfo).", undefined, "boolean", TableNative_1.defaultProps.showPageInfo),
-        showPageSizeSelector: (0, metadata_helpers_1.d)("Whether to show the page size selector. It works the same as the [Pagination component property](./Pagination#showpagesizeselector).", undefined, "boolean", TableNative_1.defaultProps.showPageSizeSelector),
-        showCurrentPage: (0, metadata_helpers_1.d)("Whether to show the current page indicator. It works the same as the [Pagination component property](./Pagination#showcurrentpage).", undefined, "boolean", TableNative_1.defaultProps.showCurrentPage),
-        pageSizeSelectorPosition: {
-            description: "Determines where to place the page size selector in the layout. " +
-                "It works the same as the [Pagination component property](./Pagination#pagesizeselectorposition).",
-            options: PaginationNative_1.PositionValues,
-            type: "string",
-            default: TableNative_1.defaultProps.pageSizeSelectorPosition,
-        },
-        pageInfoPosition: {
-            description: "Determines where to place the page information in the layout. " +
-                "It works the same as the [Pagination component property](./Pagination#pageinfoposition).",
-            options: PaginationNative_1.PositionValues,
-            type: "string",
-            default: TableNative_1.defaultProps.pageInfoPosition,
-        },
-        buttonRowPosition: (0, metadata_helpers_1.d)("Determines where to place the pagination button row in the layout. " +
-            "It works the same as the [Pagination component property](./Pagination#buttonrowposition).", PaginationNative_1.PositionValues, "string", TableNative_1.defaultProps.buttonRowPosition),
-        rowDisabledPredicate: (0, metadata_helpers_1.d)(`This property defines a predicate function with a return value that determines if the ` +
-            `row should be disabled. The function retrieves the item to display and should return ` +
-            `a Boolean-like value.`),
-        noDataTemplate: (0, metadata_helpers_1.dComponent)(`A property to customize what to display if the table does not contain any data.`),
-        sortBy: (0, metadata_helpers_1.d)("This property is used to determine which data property to sort by. If not defined, " +
-            "the data is not sorted"),
-        sortDirection: (0, metadata_helpers_1.d)("This property determines the sort order to be \`ascending\` or \`descending\`. This " +
-            "property only works if the [\`sortBy\`](#sortby) property is also set. By default " +
-            "ascending order is used."),
-        autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
-        hideHeader: {
-            description: "Set the header visibility using this property. Set it to \`true\` to hide the header.",
-            valueType: "boolean",
-            defaultValue: TableNative_1.defaultProps.hideHeader,
-        },
-        iconNoSort: (0, metadata_helpers_1.d)(`Allows setting an alternate icon displayed in the ${COMP} column header when sorting is ` +
-            `enabled, but the column remains unsorted. You can change the default icon for all ${COMP} ` +
-            `instances with the "icon.nosort:Table" declaration in the app configuration file.`),
-        iconSortAsc: (0, metadata_helpers_1.d)(`Allows setting an alernate icon displayed in the ${COMP} column header when sorting is enabled, ` +
-            `and the column is sorted in ascending order. You can change the default icon for all ${COMP} ` +
-            `instances with the "icon.sortasc:Table" declaration in the app configuration file.`),
-        iconSortDesc: (0, metadata_helpers_1.d)(`Allows setting an alternate icon displayed in the ${COMP} column header when sorting is enabled, ` +
-            `and the column is sorted in descending order. You can change the default icon for all ${COMP} ` +
-            `instances with the "icon.sortdesc:Table" declaration in the app configuration file.`),
-        enableMultiRowSelection: {
-            description: `This boolean property indicates whether you can select multiple rows in the table. ` +
-                `This property only has an effect when the rowsSelectable property is set. Setting it ` +
-                `to \`false\` limits selection to a single row.`,
-            valueType: "boolean",
-            defaultValue: TableNative_1.defaultProps.enableMultiRowSelection,
-        },
-        alwaysShowSelectionHeader: {
-            description: "This property indicates when the row selection header is displayed. When the value is " +
-                "`true,` the selection header is always visible. Otherwise, it is displayed only " +
-                "when hovered.",
-            valueType: "boolean",
-            defaultValue: false,
-        },
-        noBottomBorder: {
-            description: `This property indicates whether the table should have a bottom border. When set to ` +
-                `\`true\`, the table does not have a bottom border. Otherwise, it has a bottom border.`,
-            valueType: "boolean",
-            defaultValue: false,
-        },
-        paginationControlsLocation: {
-            description: `This property determines the location of the pagination controls.` +
-                ` It can be set to \`top\`, \`bottom\`, or \`both\`.`,
-            valueType: "string",
-            availableValues: TableNative_1.TablePaginationControlsLocationValues,
-            defaultValue: TableNative_1.defaultProps.paginationControlsLocation,
-        },
-        cellVerticalAlign: {
-            description: `This property controls the vertical alignment of cell content. ` +
-                `It can be set to \`top\`, \`center\`, or \`bottom\`.`,
-            valueType: "string",
-            availableValues: ["top", "center", "bottom"],
-            defaultValue: "center",
-        },
-        checkboxTolerance: {
-            description: `This property controls the tolerance area around checkboxes for easier interaction. ` +
-                `This property only has an effect when the rowsSelectable property is set to \`true\`. ` +
-                `\`none\` provides no tolerance (0px), \`compact\` provides minimal tolerance (8px), ` +
-                `\`comfortable\` provides medium tolerance (12px), and \`spacious\` provides generous tolerance (16px) ` +
-                `for improved accessibility.`,
-            valueType: "string",
-            availableValues: TableNative_1.CheckboxToleranceValues,
-            defaultValue: TableNative_1.defaultProps.checkboxTolerance,
-        },
-    },
-    events: {
-        sortingDidChange: (0, metadata_helpers_1.d)(`This event is fired when the table data sorting has changed. It has two arguments: ` +
-            `the column's name and the sort direction. When the column name is empty, the table ` +
-            `displays the data list as it received it.`),
-        willSort: (0, metadata_helpers_1.d)(`This event is fired before the table data is sorted. It has two arguments: the ` +
-            `column's name and the sort direction. When the method returns a literal \`false\` ` +
-            `value (and not any other falsy one), the method indicates that the sorting should be aborted.`),
-        selectionDidChange: (0, metadata_helpers_1.d)(`This event is triggered when the table's current selection (the rows selected) changes. ` +
-            `Its parameter is an array of the selected table row items. `),
-    },
-    apis: {
-        clearSelection: {
-            description: `This method clears the list of currently selected table rows.`,
-            signature: "clearSelection(): void",
-        },
-        getSelectedItems: {
-            description: `This method returns the list of currently selected table rows items.`,
-            signature: "getSelectedItems(): Array<TableRowItem>",
-        },
-        getSelectedIds: {
-            description: `This method returns the list of currently selected table rows IDs.`,
-            signature: "getSelectedIds(): Array<string>",
-        },
-        selectAll: {
-            description: `This method selects all the rows in the table. This method has no effect if the ` +
-                `rowsSelectable property is set to \`false\`.`,
-            signature: "selectAll(): void",
-        },
-        selectId: {
-            description: `This method selects the row with the specified ID. This method has no effect if the ` +
-                `\`rowsSelectable\` property is set to \`false\`. The method argument can be a ` +
-                `single id or an array of them.`,
-            signature: "selectId(id: string | Array<string>): void",
-            parameters: {
-                id: `The ID of the row to select, or an array of IDs to select multiple rows.`,
-            },
-        },
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(Table_module_scss_1.default.themeVars),
-    defaultThemeVars: {
-        [`padding-heading-${COMP}`]: `$space-2 $space-1 $space-2 $space-2`,
-        [`padding-cell-${COMP}`]: "$space-2 $space-1 $space-2 $space-2",
-        [`paddingHorizontal-cell-first-${COMP}`]: "$space-5",
-        [`paddingHorizontal-cell-last-${COMP}`]: "$space-1",
-        [`border-cell-${COMP}`]: "1px solid $borderColor",
-        [`outlineWidth-heading-${COMP}--focus`]: "$outlineWidth--focus",
-        [`outlineStyle-heading-${COMP}--focus`]: "$outlineStyle--focus",
-        [`outlineOffset-heading-${COMP}--focus`]: "$outlineOffset--focus",
-        [`fontSize-heading-${COMP}`]: "$fontSize-tiny",
-        [`fontWeight-heading-${COMP}`]: "$fontWeight-bold",
-        [`textTransform-heading-${COMP}`]: "uppercase",
-        [`fontSize-row-${COMP}`]: "$fontSize-sm",
-        // [`backgroundColor-${COMP}`]: "transparent",
-        // [`backgroundColor-row-${COMP}`]: "inherit",
-        [`backgroundColor-selected-${COMP}--hover`]: `$backgroundColor-row-${COMP}--hover`,
-        [`backgroundColor-pagination-${COMP}`]: `$backgroundColor-${COMP}`,
-        [`outlineColor-heading-${COMP}--focus`]: "$outlineColor--focus",
-        [`textColor-pagination-${COMP}`]: "$color-secondary",
-        [`backgroundColor-row-${COMP}--hover`]: "$color-primary-50",
-        [`backgroundColor-selected-${COMP}`]: "$color-primary-100",
-        [`backgroundColor-heading-${COMP}--hover`]: "$color-surface-200",
-        [`backgroundColor-heading-${COMP}--active`]: "$color-surface-300",
-        [`backgroundColor-heading-${COMP}`]: "$color-surface-100",
-        [`textColor-heading-${COMP}`]: "$color-surface-500",
-        [`border-${COMP}`]: "0px solid transparent",
-        [`borderBottom-last-row-${COMP}`]: `$borderBottom-cell-${COMP}`,
-        [`borderRadius-${COMP}`]: "$borderRadius",
-    },
-});
-const TableWithColumns = (0, react_1.memo)((0, react_1.forwardRef)(({ extractValue, node, renderChild, lookupEventHandler, lookupSyncCallback, className, registerComponentApi, }, ref) => {
-    var _a, _b, _c, _d, _e, _f;
-    const data = extractValue(node.props.items) || extractValue(node.props.data);
-    const [columnIds, setColumnIds] = (0, react_1.useState)(constants_1.EMPTY_ARRAY);
-    const [columnsByIds, setColumnByIds] = (0, react_1.useState)(constants_1.EMPTY_OBJECT);
-    const columnIdsRef = (0, react_1.useRef)([]);
-    const [tableKey, setTableKey] = (0, react_1.useState)(0);
-    const tableContextValue = (0, react_1.useMemo)(() => {
-        return {
-            registerColumn: (column, id) => {
-                setColumnIds((0, immer_1.default)((draft) => {
-                    const existing = draft.findIndex((colId) => colId === id);
-                    if (existing < 0) {
-                        draft.push(id);
-                    }
-                }));
-                setColumnByIds((0, immer_1.default)((draft) => {
-                    draft[id] = column;
-                }));
-            },
-            unRegisterColumn: (id) => {
-                setColumnIds((0, immer_1.default)((draft) => {
-                    return draft.filter((colId) => colId !== id);
-                }));
-                setColumnByIds((0, immer_1.default)((draft) => {
-                    delete draft[id];
-                }));
-            },
-        };
-    }, []);
-    const columnRefresherContextValue = (0, react_1.useMemo)(() => {
-        return {
-            registerColumn: (column, id) => {
-                if (!columnIdsRef.current.find((colId) => colId === id)) {
-                    setTableKey((prev) => prev + 1);
-                    columnIdsRef.current.push(id);
-                }
-            },
-            unRegisterColumn: (id) => {
-                if (columnIdsRef.current.find((colId) => colId === id)) {
-                    columnIdsRef.current = columnIdsRef.current.filter((colId) => colId !== id);
-                    setTableKey((prev) => prev + 1);
-                }
-            },
-        };
-    }, []);
-    const columns = (0, react_1.useMemo)(() => columnIds.map((colId) => columnsByIds[colId]), [columnIds, columnsByIds]);
-    const selectionContext = (0, SelectionStoreNative_1.useSelectionContext)();
-    const tableContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableContext_1.TableContext.Provider, { value: tableContextValue, children: renderChild(node.children) }, tableKey), (0, jsx_runtime_1.jsx)(TableContext_1.TableContext.Provider, { value: columnRefresherContextValue, children: renderChild(node.children) }), (0, jsx_runtime_1.jsx)(TableNative_1.Table, { className: className, ref: ref, data: data, columns: columns, pageSizeOptions: extractValue(node.props.pageSizeOptions), pageSize: extractValue.asOptionalNumber(node.props.pageSize), rowsSelectable: extractValue.asOptionalBoolean(node.props.rowsSelectable), registerComponentApi: registerComponentApi, noDataRenderer: node.props.noDataTemplate &&
-                    (() => {
-                        return renderChild(node.props.noDataTemplate);
-                    }), hideNoDataView: node.props.noDataTemplate === null || node.props.noDataTemplate === "", loading: extractValue.asOptionalBoolean(node.props.loading), isPaginated: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.isPaginated), headerHeight: extractValue.asSize(node.props.headerHeight), rowDisabledPredicate: lookupSyncCallback(node.props.rowDisabledPredicate), sortBy: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.sortBy), sortingDirection: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.sortDirection), iconSortAsc: extractValue.asOptionalString((_d = node.props) === null || _d === void 0 ? void 0 : _d.iconSortAsc), iconSortDesc: extractValue.asOptionalString((_e = node.props) === null || _e === void 0 ? void 0 : _e.iconSortDesc), iconNoSort: extractValue.asOptionalString((_f = node.props) === null || _f === void 0 ? void 0 : _f.iconNoSort), sortingDidChange: lookupEventHandler("sortingDidChange"), onSelectionDidChange: lookupEventHandler("selectionDidChange"), willSort: lookupEventHandler("willSort"), uid: node.uid, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), hideHeader: extractValue.asOptionalBoolean(node.props.hideHeader), enableMultiRowSelection: extractValue.asOptionalBoolean(node.props.enableMultiRowSelection), alwaysShowSelectionHeader: extractValue.asOptionalBoolean(node.props.alwaysShowSelectionHeader), noBottomBorder: extractValue.asOptionalBoolean(node.props.noBottomBorder), paginationControlsLocation: extractValue.asOptionalString(node.props.paginationControlsLocation), cellVerticalAlign: extractValue.asOptionalString(node.props.cellVerticalAlign), buttonRowPosition: extractValue.asOptionalString(node.props.buttonRowPosition), pageSizeSelectorPosition: extractValue.asOptionalString(node.props.pageSizeSelectorPosition), pageInfoPosition: extractValue.asOptionalString(node.props.pageInfoPosition), showCurrentPage: extractValue.asOptionalBoolean(node.props.showCurrentPage), showPageInfo: extractValue.asOptionalBoolean(node.props.showPageInfo), showPageSizeSelector: extractValue.asOptionalBoolean(node.props.showPageSizeSelector), checkboxTolerance: extractValue.asOptionalString(node.props.checkboxTolerance), initiallySelected: extractValue(node.props.initiallySelected), syncWithAppState: extractValue(node.props.syncWithAppState) })] }));
-    if (selectionContext === null) {
-        return (0, jsx_runtime_1.jsx)(SelectionStoreNative_1.StandaloneSelectionStore, { children: tableContent });
-    }
-    return tableContent;
-}));
-TableWithColumns.displayName = "TableWithColumns";
-exports.tableComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TableMd, ({ extractValue, node, renderChild, lookupEventHandler, lookupSyncCallback, className, registerComponentApi, }) => {
-    return ((0, jsx_runtime_1.jsx)(TableWithColumns, { node: node, extractValue: extractValue, lookupEventHandler: lookupEventHandler, lookupSyncCallback: lookupSyncCallback, className: className, renderChild: renderChild, registerComponentApi: registerComponentApi }));
-});