@sap-ux/ui-components 1.0.0

package/dist/components/UIFlexibleTable/UIFlexibleTable.scss

@@ -0,0 +1,408 @@
+$valid-drop-color: var(--vscode-notebookStatusSuccessIcon-foreground, var(--vscode-successBackground, #84c881));
+$invalid-drop-color: var(--vscode-notificationsWarningIcon-foreground, var(--vscode-warningBackground, #cca700));
+$readonly-labels-opacity: 0.4;
+
+.flexible-table {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 1px;
+    box-sizing: border-box;
+
+    ul {
+        margin-block-start: 0.1em;
+        margin-block-end: 0em;
+        margin-inline-start: 0px;
+        margin-inline-end: 0px;
+        padding-inline-start: 0px;
+    }
+
+    &-header {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        row-gap: 5px;
+        column-gap: 10px;
+        &-primary-actions {
+            display: flex;
+            column-gap: 10px;
+        }
+        &-secondary-actions {
+            display: flex;
+            column-gap: 10px;
+        }
+    }
+
+    .ui-loader-blocker {
+        margin: 0;
+    }
+    &-content {
+        display: flex;
+        margin-top: 10px;
+        flex-direction: column;
+        position: relative;
+        border: 1px solid var(--vscode-editorWidget-border);
+
+        &.loading {
+            min-height: 60px;
+        }
+
+        &.empty-table {
+            border: none;
+            .flexible-table-content-table-title-row {
+                border: 1px solid var(--vscode-editorWidget-border);
+            }
+            margin-top: 0px;
+        }
+
+        &-table {
+            overflow-y: auto;
+            max-height: 220px;
+            overflow-x: hidden;
+
+            &-title-row {
+                font-weight: bold;
+                background: var(--vscode-editor-background);
+                border-bottom: 1px solid var(--vscode-editorWidget-border);
+                &-item-data-cells-value {
+                    width: 100%;
+                }
+            }
+
+            &-row {
+                &.even {
+                    background: var(--vscode-editor-background);
+                }
+                &.odd {
+                    background: var(--vscuie-sideBar-background);
+                }
+                // Reverse background for zebra pattern
+                &.reverse-background {
+                    &.even {
+                        background: var(--vscuie-sideBar-background);
+                    }
+                    &.odd {
+                        background: var(--vscode-editor-background);
+                    }
+                }
+
+                &.no-background {
+                    background: none;
+                    .flexible-table-content-table-row-header {
+                        background: transparent;
+                    }
+                    &.dragged {
+                        // Background should not be transparent while dragging
+                        background-color: var(--vscode-editor-background);
+                    }
+                }
+
+                &:last-child {
+                    border-bottom: none;
+                }
+
+                border-bottom: 1px solid var(--vscode-editorWidget-border);
+
+                &:focus {
+                    outline: none;
+                    .flexible-table-content-table-row-wrapper {
+                        outline: 1px solid var(--vscode-focusBorder);
+                    }
+                }
+
+                &.selected {
+                    .flexible-table-content-table-row-wrapper {
+                        outline: 1px solid $valid-drop-color;
+                    }
+                }
+
+                &.dragged {
+                    z-index: 1000000;
+                    // Free drag - horizontal and vertical allowed at same time
+                    &.unlocked-axis {
+                        .flexible-table-content-table-row-wrapper {
+                            outline: 1px solid $valid-drop-color;
+                        }
+                        &.out-of-bounds {
+                            .flexible-table-content-table-row-wrapper {
+                                outline: 1px solid $invalid-drop-color;
+                            }
+                        }
+                    }
+                    // Locked drag by single axis
+                    &.locked-axis {
+                        .flexible-table-content-table-row-wrapper {
+                            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
+                        }
+                    }
+                }
+                &-item-wrapper {
+                    display: flex;
+                    width: 100%;
+                }
+            }
+
+            &-row-header {
+                display: flex;
+                justify-content: space-between;
+                flex-wrap: wrap;
+                background-color: var(--vscode-debugView-stateLabelBackground);
+                padding: 5px 10px;
+                align-items: center;
+                row-gap: 5px;
+
+                &-text-content {
+                    font-size: 13px;
+                    font-weight: bold;
+                }
+
+                &-actions {
+                    display: flex;
+                    flex-direction: row;
+                    flex-wrap: wrap;
+
+                    &-icon {
+                        width: 16px;
+                    }
+
+                    &-divider {
+                        margin: 0 10px;
+                        height: 20px;
+                    }
+
+                    &-item-wrapper {
+                        display: flex;
+                    }
+                }
+            }
+
+            &-row,
+            &-title-row {
+                padding: 0;
+                margin: 0;
+                list-style-type: none;
+
+                &-wrapper {
+                    outline-offset: -1px;
+                    display: flex;
+                    flex-direction: column;
+                    &-cells {
+                        display: flex;
+                        align-items: stretch;
+                        justify-content: space-between;
+                    }
+                }
+
+                &-wrapper.inline-layout {
+                    &-cells {
+                        flex-direction: row;
+                    }
+                }
+
+                &-wrapper.wrapping-layout {
+                    &-cells {
+                        flex-direction: column;
+                    }
+                    .flexible-table-content-table-row-header {
+                        background-color: transparent;
+                        border: 1px solid var(--vscode-editorWidget-border);
+                        padding: 4px 9px;
+                    }
+                    .flexible-table-content-table-row-wrapper-cells {
+                        border: 1px solid var(--vscode-editorWidget-border);
+                        border-top: 0;
+                    }
+                }
+
+                &-item {
+                    &-title {
+                        height: 16px;
+                        font-weight: bold;
+                        padding: 0 5px;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                    &-index {
+                        border-right: 1px solid var(--vscode-editorWidget-border);
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-around;
+
+                        &-value {
+                            text-align: center;
+                            width: 40px;
+                        }
+                    }
+                    &-data-cells {
+                        display: flex;
+                        width: 100%;
+
+                        &.in-row {
+                            flex-direction: row;
+                        }
+                        &.in-column {
+                            flex-direction: column;
+
+                            .flexible-table-content-table-row-item-data-cells-wrapper {
+                                width: auto;
+                                border-right: none;
+                            }
+                        }
+                        &.dynamic {
+                            flex-direction: row;
+                            flex-wrap: wrap;
+                            width: auto;
+                            // Border + padding should 5px on each side
+                            padding: 5px 4px 4px;
+                        }
+
+                        &-value {
+                            padding: 5px;
+                        }
+                        &-wrapper {
+                            border-right: 1px solid var(--vscode-editorWidget-border);
+                            padding: 0px;
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: flex-start;
+                            width: 100%;
+
+                            &:last-of-type {
+                                border-right: none;
+                            }
+                            &.not-editable {
+                                padding: 10px;
+
+                                span {
+                                    &:not(:last-child) {
+                                        padding-bottom: 4px;
+                                    }
+
+                                    i {
+                                        vertical-align: middle;
+
+                                        svg > path,
+                                        svg > rect {
+                                            fill: var(--vscode-textLink-activeForeground);
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    &-actions {
+                        display: flex;
+                        flex-direction: row;
+                        justify-content: flex-start;
+                        min-width: 87px;
+                        border-left: 1px solid var(--vscode-editorWidget-border);
+                        padding: 5px;
+                        align-items: center;
+
+                        &-icon {
+                            width: 16px;
+                        }
+
+                        &-divider {
+                            margin: 0 10px;
+                            height: 20px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+$wrapping-table-space-between-scrollbar-and-border: 5px;
+.flexible-table.wrapping-layout {
+    .flexible-table-header {
+        // Increase space between scrollbar and border
+        padding-right: $wrapping-table-space-between-scrollbar-and-border;
+        box-sizing: border-box;
+    }
+    .flexible-table-content {
+        border: none;
+        &-table {
+            // Increase space between scrollbar and border
+            padding-right: $wrapping-table-space-between-scrollbar-and-border;
+            box-sizing: border-box;
+            &-row,
+            &-title-row {
+                border: none;
+                &-item {
+                    &-index {
+                        border: none;
+                    }
+                    &-data-cells {
+                        &-wrapper {
+                            border-right: none;
+                        }
+                    }
+                }
+            }
+            &-row {
+                margin-bottom: 10px;
+                &:last-child {
+                    margin-bottom: 0px;
+                }
+            }
+        }
+    }
+}
+
+li.flexible-table-content-table-row.dragged {
+    border: none;
+    .flexible-table-content-table-row-wrapper.wrapping-layout {
+        .flexible-table-content-table-row-item {
+            &-index {
+                border: none;
+            }
+            &-data-cells {
+                &-wrapper {
+                    border-right: none;
+                }
+            }
+        }
+    }
+    margin-bottom: 0px;
+}
+
+.small-cell1 {
+    width: 30%;
+}
+
+.small-cell2 {
+    width: 40%;
+}
+
+.small-cell3 {
+    width: 30%;
+}
+
+.flexible-table.readonly {
+    .flexible-table-content-table {
+        &-title-row-item {
+            &-index-value {
+                opacity: $readonly-labels-opacity;
+            }
+            &-data-cells-value {
+                opacity: $readonly-labels-opacity;
+            }
+        }
+
+        &-row {
+            &-header-text-content {
+                opacity: $readonly-labels-opacity;
+            }
+            &-item-index-value {
+                opacity: $readonly-labels-opacity;
+            }
+            &-item-title {
+                opacity: $readonly-labels-opacity;
+            }
+        }
+    }
+}

package/dist/components/UIFlexibleTable/UIFlexibleTableActionButton.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { UiIcons } from '..';
+export interface UIFlexibleTableActionProps {
+    actionName: string;
+    className?: string;
+    iconName: UiIcons;
+    disabled?: boolean;
+    tableId: string;
+    title?: string;
+    onClick?: () => void;
+    onFocus?: () => void;
+}
+/**
+ * UIFlexibleTableActionButton component.
+ * @exports
+ * @param {UIFlexibleTableActionProps} props
+ * @returns { React.ReactElement}
+ */
+export declare function UIFlexibleTableActionButton(props: UIFlexibleTableActionProps): React.ReactElement;
+//# sourceMappingURL=UIFlexibleTableActionButton.d.ts.map

package/dist/components/UIFlexibleTable/UIFlexibleTableActionButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIFlexibleTableActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/UIFlexibleTable/UIFlexibleTableActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;AAGlC,MAAM,WAAW,0BAA0B;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;;;;GAKG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,0BAA0B,GAAG,KAAK,CAAC,YAAY,CAYjG"}

package/dist/components/UIFlexibleTable/UIFlexibleTableActionButton.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIFlexibleTableActionButton = void 0;
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const utils_1 = require("./utils");
+/**
+ * UIFlexibleTableActionButton component.
+ * @exports
+ * @param {UIFlexibleTableActionProps} props
+ * @returns { React.ReactElement}
+ */
+function UIFlexibleTableActionButton(props) {
+    return (react_1.default.createElement(__1.UIIconButton, { id: utils_1.getTableActionButtonId(props.tableId, props.actionName), className: `flexible-table-actions-${props.actionName}${props.className ? ' ' + props.className : ''}`, onClick: props.onClick, onFocus: props.onFocus, disabled: props.disabled, iconProps: { iconName: props.iconName }, title: props.title }));
+}
+exports.UIFlexibleTableActionButton = UIFlexibleTableActionButton;
+//# sourceMappingURL=UIFlexibleTableActionButton.js.map

package/dist/components/UIFlexibleTable/UIFlexibleTableActionButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIFlexibleTableActionButton.js","sourceRoot":"","sources":["../../../src/components/UIFlexibleTable/UIFlexibleTableActionButton.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,0BAAkC;AAElC,mCAAiD;AAajD;;;;;GAKG;AACH,SAAgB,2BAA2B,CAAC,KAAiC;IACzE,OAAO,CACH,8BAAC,gBAAY,IACT,EAAE,EAAE,8BAAsB,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,EAC3D,SAAS,EAAE,0BAA0B,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,EACtG,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,SAAS,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,EACvC,KAAK,EAAE,KAAK,CAAC,KAAK,GACpB,CACL,CAAC;AACN,CAAC;AAZD,kEAYC"}

package/dist/components/UIFlexibleTable/UIFlexibleTableRow.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { UIFlexibleTableProps, NodeDragAndDropSortingParams } from './types';
+export interface UIFlexibleTableRowProps<T> {
+    dragAndDropParams: NodeDragAndDropSortingParams;
+    rowActions: React.ReactElement;
+    rowData: React.ReactElement;
+    rowRef?: React.RefObject<HTMLDivElement>;
+    tableProps: UIFlexibleTableProps<T>;
+}
+/**
+ * On render title row.
+ *
+ * @param {UIFlexibleTableProps<T>} props
+ * @param {number} paddingRight
+ *
+ * @returns {React.ReactNode}
+ */
+export declare function renderTitleRow<T>(props: UIFlexibleTableProps<T>, paddingRight: number): React.ReactNode;
+/**
+ * UIFlexibleTableRow component.
+ *
+ * @exports
+ * @param {UIFlexibleTableRowProps} props
+ *
+ * @returns {JSX.Element}
+ */
+export declare function UIFlexibleTableRow<T>(props: UIFlexibleTableRowProps<T>): JSX.Element;
+//# sourceMappingURL=UIFlexibleTableRow.d.ts.map

package/dist/components/UIFlexibleTable/UIFlexibleTableRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIFlexibleTableRow.d.ts","sourceRoot":"","sources":["../../../src/components/UIFlexibleTable/UIFlexibleTableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,oBAAoB,EAA0B,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAG1G,MAAM,WAAW,uBAAuB,CAAC,CAAC;IACtC,iBAAiB,EAAE,4BAA4B,CAAC;IAChD,UAAU,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B,OAAO,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACzC,UAAU,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;CACvC;AAuDD;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAiGvG;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,KAAK,EAAE,uBAAuB,CAAC,CAAC,CAAC,eAmEtE"}

package/dist/components/UIFlexibleTable/UIFlexibleTableRow.js

@@ -0,0 +1,165 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIFlexibleTableRow = exports.renderTitleRow = void 0;
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const types_1 = require("./types");
+const utils_1 = require("./utils");
+/**
+ * Render row title.
+ *
+ * @param {UIFlexibleTableProps<T>} props
+ * @param {UIFlexibleTableRowType<T>} row
+ * @param {number | undefined} rowIndex
+ * @param {React.ReactElement} rowActions
+ * @returns {React.ReactNode}
+ */
+function renderRowTitle(props, row, rowIndex, rowActions) {
+    return (react_1.default.createElement("div", { className: "flexible-table-content-table-row-header" },
+        react_1.default.createElement("div", { className: "flexible-table-content-table-row-header-text-content" }, row.title || react_1.default.createElement("span", null)),
+        props.layout === types_1.UIFlexibleTableLayout.Wrapping &&
+            getActionsContainer(false, rowIndex, rowActions, 'flexible-table-content-table-row-header-actions')));
+}
+/**
+ *
+ * @param {boolean} useFocusZone
+ * @param {number | undefined} rowIndex
+ * @param {React.ReactElement} rowActions
+ * @param {string} className
+ * @returns {JSX.Element}
+ */
+function getActionsContainer(useFocusZone, rowIndex, rowActions, className) {
+    return useFocusZone ? (react_1.default.createElement(__1.UIFocusZone, { as: "div", key: `cell-actions-${rowIndex ?? 'unknown'}`, className: className, direction: __1.UIFocusZoneDirection.horizontal, isCircularNavigation: true, shouldEnterInnerZone: (ev) => ev.key === 'Enter' }, rowActions)) : (react_1.default.createElement("div", { className: className }, rowActions));
+}
+/**
+ * On render title row.
+ *
+ * @param {UIFlexibleTableProps<T>} props
+ * @param {number} paddingRight
+ *
+ * @returns {React.ReactNode}
+ */
+function renderTitleRow(props, paddingRight) {
+    const rowCells = [];
+    if (props.showIndexColumn) {
+        if (props.onRenderTitleColumnCell) {
+            const { content, cellClassNames } = props.onRenderTitleColumnCell({
+                isIndexColumn: true
+            });
+            const className = utils_1.composeClassNames('flexible-table-content-table-title-row-item-index', [cellClassNames]);
+            rowCells.push(react_1.default.createElement("div", { key: "title-cell-index", className: className }, content));
+        }
+        else {
+            rowCells.push(react_1.default.createElement("div", { key: "title-cell-index", className: "flexible-table-content-table-title-row-item-index" },
+                react_1.default.createElement("span", { className: "flexible-table-content-table-title-row-item-index-value" }, "#")));
+        }
+    }
+    const rowCellsData = [];
+    for (let i = 0; i < props.columns.length; i++) {
+        if (props.columns[i].hidden) {
+            continue;
+        }
+        const key = props.columns[i].key;
+        if (props.onRenderTitleColumnCell) {
+            const { content, isSpan, cellClassNames } = props.onRenderTitleColumnCell({
+                colIndex: i,
+                colKey: key
+            });
+            const className = utils_1.composeClassNames('flexible-table-content-table-title-row-item-data-cells-value', [
+                cellClassNames,
+                props.columns[i].className
+            ]);
+            if (isSpan) {
+                rowCellsData.push(react_1.default.createElement("div", { key: `title-cell-unknown`, className: className }, content));
+                break;
+            }
+            else {
+                rowCellsData.push(react_1.default.createElement("div", { key: `cell-${key}-${i}`, className: className }, content));
+            }
+        }
+        else {
+            const className = utils_1.composeClassNames('flexible-table-content-table-title-row-item-data-cells-value', [
+                props.columns[i].className
+            ]);
+            rowCellsData.push(react_1.default.createElement("div", { key: `title-cell-${key}-${i}`, className: className }, props.columns[i].title));
+        }
+    }
+    // Add data cells titles
+    rowCells.push(react_1.default.createElement("div", { key: `flexible-table-content-table-title-row-item-data-cells}`, className: `flexible-table-content-table-title-row-item-data-cells in-row` }, rowCellsData));
+    // Add actions title
+    if (props.onRenderTitleColumnCell) {
+        const { content, cellClassNames } = props.onRenderTitleColumnCell({
+            isActionsColumn: true
+        });
+        const className = utils_1.composeClassNames('flexible-table-content-table-title-row-item-actions', [cellClassNames]);
+        rowCells.push(react_1.default.createElement("div", { key: "title-row", className: className }, content));
+    }
+    else {
+        rowCells.push(react_1.default.createElement("div", { key: `title-cell-actions`, className: "flexible-table-content-table-title-row-item-actions" }));
+    }
+    return (react_1.default.createElement("div", { className: "flexible-table-content-table-title-row", key: "title-row", style: { paddingRight }, tabIndex: -1 },
+        react_1.default.createElement("div", { className: "flexible-table-content-table-title-row-wrapper" },
+            react_1.default.createElement("div", { className: "flexible-table-content-table-title-row-wrapper-cells" }, rowCells))));
+}
+exports.renderTitleRow = renderTitleRow;
+/**
+ * UIFlexibleTableRow component.
+ *
+ * @exports
+ * @param {UIFlexibleTableRowProps} props
+ *
+ * @returns {JSX.Element}
+ */
+function UIFlexibleTableRow(props) {
+    const { dragAndDropParams: params, rowData, rowActions, rowRef, tableProps } = props;
+    const row = params.value;
+    const rowIndex = params.index;
+    const rowCells = [];
+    const { isDragged, isSelected, isOutOfBounds } = params;
+    const isRow = row && rowIndex !== undefined;
+    if (isRow) {
+        rowCells.push(rowData);
+        if (tableProps.layout === types_1.UIFlexibleTableLayout.InlineFlex) {
+            // Add row actions
+            rowCells.push(getActionsContainer(true, rowIndex, rowActions, 'flexible-table-content-table-row-item-actions'));
+        }
+    }
+    let parityClassName = '';
+    if (rowIndex !== undefined) {
+        // Index is zero based - odd/even opposite
+        parityClassName = rowIndex % 2 === 0 ? 'odd' : 'even';
+    }
+    const rowClassName = utils_1.composeClassNames('flexible-table-content-table-row', [
+        tableProps.noRowBackground ? 'no-background' : '',
+        isDragged ? 'dragged' : '',
+        isSelected ? 'selected' : '',
+        isOutOfBounds ? 'out-of-bounds' : '',
+        row.className ?? '',
+        tableProps.lockVertically ? 'locked-axis' : 'unlocked-axis',
+        parityClassName,
+        tableProps.reverseBackground && !tableProps.noRowBackground ? 'reverse-background' : ''
+    ]);
+    const rowWrapperClassNames = [
+        'flexible-table-content-table-row-wrapper',
+        tableProps.layout === types_1.UIFlexibleTableLayout.InlineFlex ? 'inline-layout' : 'wrapping-layout'
+    ].join(' ');
+    const showRowTitle = isRow && (tableProps.showRowTitles || tableProps.layout === types_1.UIFlexibleTableLayout.Wrapping);
+    const style = {
+        ...params.props.style,
+        pointerEvents: 'all',
+        cursor: isDragged ? 'grabbing' : 'inherit'
+    };
+    if (tableProps.isContentLoading) {
+        style.pointerEvents = 'none';
+        style.cursor = 'none';
+    }
+    return (react_1.default.createElement("li", { ...params.props, className: rowClassName, "data-movable-handle": true, key: `row-${rowIndex}`, id: `row-${rowIndex}`, style: style },
+        react_1.default.createElement("div", { className: rowWrapperClassNames, ref: rowRef },
+            showRowTitle && renderRowTitle(tableProps, row, rowIndex, rowActions),
+            react_1.default.createElement("div", { className: "flexible-table-content-table-row-wrapper-cells" }, rowCells))));
+}
+exports.UIFlexibleTableRow = UIFlexibleTableRow;
+//# sourceMappingURL=UIFlexibleTableRow.js.map

package/dist/components/UIFlexibleTable/UIFlexibleTableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIFlexibleTableRow.js","sourceRoot":"","sources":["../../../src/components/UIFlexibleTable/UIFlexibleTableRow.tsx"],"names":[],"mappings":"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"}