@itwin/itwinui-react 3.12.2 → 3.13.0

package/DEV-cjs/core/Table/TablePaginator.js

@@ -0,0 +1,188 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TablePaginator", {
+    enumerable: true,
+    get: function() {
+        return TablePaginator;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _IconButton = require("../Buttons/IconButton.js");
+const _Button = require("../Buttons/Button.js");
+const _DropdownButton = require("../Buttons/DropdownButton.js");
+const _ProgressRadial = require("../ProgressIndicators/ProgressRadial.js");
+const _MenuItem = require("../Menu/MenuItem.js");
+const _index = require("../../utils/index.js");
+const defaultLocalization = {
+    pageSizeLabel: (size)=>`${size} per page`,
+    rangeLabel: (startIndex, endIndex, totalRows, isLoading)=>isLoading ? `${startIndex}-${endIndex}…` : `${startIndex}-${endIndex} of ${totalRows}`,
+    previousPage: 'Previous page',
+    nextPage: 'Next page',
+    goToPageLabel: (page)=>`Go to page ${page}`,
+    rowsPerPageLabel: 'Rows per page',
+    rowsSelectedLabel: (totalSelectedRowsCount)=>`${totalSelectedRowsCount} ${1 === totalSelectedRowsCount ? 'row' : 'rows'} selected`
+};
+const TablePaginator = (props)=>{
+    let { currentPage, totalRowsCount, pageSize, onPageChange, totalSelectedRowsCount = 0, focusActivationMode = 'manual', isLoading = false, size = 'default', pageSizeList, onPageSizeChange, localization: userLocalization, className, ...rest } = props;
+    (0, _index.useGlobals)();
+    let localization = _react.useMemo(()=>({
+            ...defaultLocalization,
+            ...userLocalization
+        }), [
+        userLocalization
+    ]);
+    let pageListRef = _react.useRef(null);
+    let [focusedIndex, setFocusedIndex] = _react.useState(currentPage);
+    _react.useEffect(()=>{
+        setFocusedIndex(currentPage);
+    }, [
+        currentPage
+    ]);
+    let needFocus = _react.useRef(false);
+    let isMounted = _react.useRef(false);
+    _react.useEffect(()=>{
+        if (isMounted.current && needFocus.current) {
+            let buttonToFocus = Array.from(pageListRef.current?.querySelectorAll('.iui-table-paginator-page-button') ?? []).find((el)=>el.textContent?.trim() === (focusedIndex + 1).toString());
+            buttonToFocus?.focus();
+            needFocus.current = false;
+        }
+        isMounted.current = true;
+    }, [
+        focusedIndex
+    ]);
+    let buttonSize = 'default' != size ? 'small' : void 0;
+    let pageButton = _react.useCallback((index, tabIndex = index === focusedIndex ? 0 : -1)=>_react.createElement(_Button.Button, {
+            key: index,
+            className: "iui-table-paginator-page-button",
+            styleType: "borderless",
+            size: buttonSize,
+            "data-iui-active": index === currentPage,
+            onClick: ()=>onPageChange(index),
+            "aria-current": index === currentPage,
+            "aria-label": localization.goToPageLabel(index + 1),
+            tabIndex: tabIndex
+        }, index + 1), [
+        focusedIndex,
+        currentPage,
+        localization,
+        buttonSize,
+        onPageChange
+    ]);
+    let totalPagesCount = Math.ceil(totalRowsCount / pageSize);
+    let pageList = _react.useMemo(()=>new Array(totalPagesCount).fill(null).map((_, index)=>pageButton(index)), [
+        pageButton,
+        totalPagesCount
+    ]);
+    let [overflowRef, visibleCount] = (0, _index.useOverflow)(pageList);
+    let [paginatorResizeRef, paginatorWidth] = (0, _index.useContainerWidth)();
+    let onKeyDown = (event)=>{
+        if (event.altKey) return;
+        let focusPage = (delta)=>{
+            let newFocusedIndex = (0, _index.getBoundedValue)(focusedIndex + delta, 0, totalPagesCount - 1);
+            needFocus.current = true;
+            if ('auto' === focusActivationMode) onPageChange(newFocusedIndex);
+            else setFocusedIndex(newFocusedIndex);
+        };
+        switch(event.key){
+            case 'ArrowRight':
+                focusPage(1);
+                event.preventDefault();
+                break;
+            case 'ArrowLeft':
+                focusPage(-1);
+                event.preventDefault();
+                break;
+            case 'Enter':
+            case ' ':
+            case 'Spacebar':
+                if ('manual' === focusActivationMode) onPageChange(focusedIndex);
+                break;
+            default:
+                break;
+        }
+    };
+    let halfVisibleCount = Math.floor(visibleCount / 2);
+    let startPage = focusedIndex - halfVisibleCount;
+    let endPage = focusedIndex + halfVisibleCount + 1;
+    if (startPage < 0) {
+        endPage = Math.min(totalPagesCount, endPage + Math.abs(startPage));
+        startPage = 0;
+    }
+    if (endPage > totalPagesCount) {
+        startPage = Math.max(0, startPage - (endPage - totalPagesCount));
+        endPage = totalPagesCount;
+    }
+    let hasNoRows = 0 === totalPagesCount;
+    let showPagesList = totalPagesCount > 1 || isLoading;
+    let showPageSizeList = pageSizeList && !!onPageSizeChange && !!totalRowsCount;
+    let ellipsis = _react.createElement(_index.Box, {
+        as: "span",
+        className: (0, _classnames.default)('iui-table-paginator-ellipsis', {
+            'iui-table-paginator-ellipsis-small': 'small' === size
+        })
+    }, "…");
+    let noRowsContent = _react.createElement(_react.Fragment, null, isLoading ? _react.createElement(_ProgressRadial.ProgressRadial, {
+        indeterminate: true,
+        size: "small"
+    }) : _react.createElement(_Button.Button, {
+        styleType: "borderless",
+        disabled: true,
+        size: buttonSize
+    }, "1"));
+    if (!showPagesList && !showPageSizeList) return null;
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-table-paginator', className),
+        ref: paginatorResizeRef,
+        ...rest
+    }, _react.createElement(_index.Box, {
+        className: "iui-left"
+    }, totalSelectedRowsCount > 0 && _react.createElement("span", null, localization.rowsSelectedLabel(totalSelectedRowsCount))), showPagesList && _react.createElement(_index.Box, {
+        className: "iui-center",
+        ref: overflowRef
+    }, _react.createElement(_IconButton.IconButton, {
+        styleType: "borderless",
+        disabled: 0 === currentPage,
+        onClick: ()=>onPageChange(currentPage - 1),
+        size: buttonSize,
+        "aria-label": localization.previousPage
+    }, _react.createElement(_index.SvgChevronLeft, null)), _react.createElement(_index.Box, {
+        as: "span",
+        className: "iui-table-paginator-pages-group",
+        onKeyDown: onKeyDown,
+        ref: pageListRef
+    }, (()=>{
+        if (hasNoRows) return noRowsContent;
+        if (1 === visibleCount) return pageButton(focusedIndex);
+        return _react.createElement(_react.Fragment, null, 0 !== startPage && _react.createElement(_react.Fragment, null, pageButton(0, 0), ellipsis), pageList.slice(startPage, endPage), endPage !== totalPagesCount && !isLoading && _react.createElement(_react.Fragment, null, ellipsis, pageButton(totalPagesCount - 1, 0)), isLoading && _react.createElement(_react.Fragment, null, ellipsis, _react.createElement(_ProgressRadial.ProgressRadial, {
+            indeterminate: true,
+            size: "small"
+        })));
+    })()), _react.createElement(_IconButton.IconButton, {
+        styleType: "borderless",
+        disabled: currentPage === totalPagesCount - 1 || hasNoRows,
+        onClick: ()=>onPageChange(currentPage + 1),
+        size: buttonSize,
+        "aria-label": localization.nextPage
+    }, _react.createElement(_index.SvgChevronRight, null))), _react.createElement(_index.Box, {
+        className: "iui-right"
+    }, showPageSizeList && _react.createElement(_react.Fragment, null, null !== localization.rowsPerPageLabel && paginatorWidth >= 1024 && _react.createElement(_index.Box, {
+        as: "span",
+        className: "iui-table-paginator-page-size-label"
+    }, localization.rowsPerPageLabel), _react.createElement(_DropdownButton.DropdownButton, {
+        styleType: "borderless",
+        size: buttonSize,
+        menuItems: (close)=>pageSizeList.map((size)=>_react.createElement(_MenuItem.MenuItem, {
+                    key: size,
+                    isSelected: size === pageSize,
+                    onClick: ()=>{
+                        close();
+                        onPageSizeChange(size);
+                    }
+                }, localization.pageSizeLabel(size)))
+    }, localization.rangeLabel(currentPage * pageSize + 1, Math.min(totalRowsCount, (currentPage + 1) * pageSize), totalRowsCount, isLoading)))));
+};

package/DEV-cjs/core/Table/TableRowMemoized.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TableRow: function() {
+        return TableRow;
+    },
+    TableRowMemoized: function() {
+        return TableRowMemoized;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _index = require("../../utils/index.js");
+const _TableCell = require("./TableCell.js");
+const TableRow = (props)=>{
+    let { row, rowProps, isLast, onRowInViewport, onBottomReached, intersectionMargin, onClick, subComponent, isDisabled, tableHasSubRows, tableInstance, expanderCell, scrollContainerRef, tableRowRef, density, virtualItem, virtualizer } = props;
+    let onIntersect = _react.useCallback(()=>{
+        onRowInViewport.current?.(row.original);
+        isLast && onBottomReached.current?.();
+    }, [
+        isLast,
+        onBottomReached,
+        onRowInViewport,
+        row.original
+    ]);
+    let intersectionRoot = _react.useMemo(()=>{
+        let isTableScrollable = (scrollContainerRef?.scrollHeight ?? 0) > (scrollContainerRef?.offsetHeight ?? 0);
+        if (isTableScrollable) return scrollContainerRef;
+    }, [
+        scrollContainerRef
+    ]);
+    let intersectionRef = (0, _index.useIntersection)(onIntersect, {
+        rootMargin: `${intersectionMargin}px`,
+        root: intersectionRoot
+    });
+    let userRowProps = rowProps?.(row) ?? {};
+    let { status, isLoading, ...restUserRowProps } = userRowProps;
+    let mergedProps = {
+        ...row.getRowProps({
+            style: {
+                flex: "0 0 auto",
+                minWidth: '100%',
+                ...null != virtualItem ? {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    transform: `translateY(${virtualItem.start}px)`
+                } : {}
+            }
+        }),
+        ...restUserRowProps,
+        className: (0, _classnames.default)('iui-table-row', {
+            'iui-table-row-expanded': row.isExpanded && subComponent,
+            'iui-loading': isLoading
+        }, userRowProps?.className),
+        'aria-selected': row.isSelected || void 0,
+        'aria-disabled': isDisabled || void 0,
+        'data-iui-status': status,
+        'data-iui-index': virtualItem?.index
+    };
+    let refs = (0, _index.useMergedRefs)(intersectionRef, mergedProps.ref, tableRowRef, virtualizer?.measureElement);
+    return _react.createElement(_react.Fragment, null, _react.createElement(_index.Box, {
+        ...mergedProps,
+        ref: refs,
+        onClick: (event)=>{
+            mergedProps?.onClick?.(event);
+            onClick?.(event, row);
+        }
+    }, row.cells.map((cell, index)=>_react.createElement(_TableCell.TableCell, {
+            key: cell.getCellProps().key,
+            cell: cell,
+            cellIndex: index,
+            isDisabled: isDisabled,
+            tableHasSubRows: tableHasSubRows,
+            tableInstance: tableInstance,
+            expanderCell: expanderCell,
+            density: density
+        }))), subComponent && _react.createElement(_index.WithCSSTransition, {
+        in: row.isExpanded
+    }, _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-table-row', 'iui-table-expanded-content'),
+        "aria-disabled": isDisabled
+    }, subComponent(row))));
+};
+const hasAnySelectedSubRow = (row, selectedRowIds)=>{
+    if (selectedRowIds?.[row.id]) return true;
+    return row.subRows.some((subRow)=>hasAnySelectedSubRow(subRow, selectedRowIds));
+};
+const TableRowMemoized = _react.memo(TableRow, (prevProp, nextProp)=>prevProp.isLast === nextProp.isLast && prevProp.state.hiddenColumns?.length === nextProp.state.hiddenColumns?.length && !!prevProp.state.hiddenColumns?.every((column, index)=>nextProp.state.hiddenColumns?.[index] === column) && prevProp.onRowInViewport === nextProp.onRowInViewport && prevProp.onBottomReached === nextProp.onBottomReached && prevProp.onClick === nextProp.onClick && prevProp.row.original === nextProp.row.original && prevProp.state.selectedRowIds?.[prevProp.row.id] === nextProp.state.selectedRowIds?.[nextProp.row.id] && prevProp.row.subRows.some((subRow)=>hasAnySelectedSubRow(subRow, prevProp.state.selectedRowIds)) === nextProp.row.subRows.some((subRow)=>hasAnySelectedSubRow(subRow, nextProp.state.selectedRowIds)) && prevProp.state.expanded?.[prevProp.row.id] === nextProp.state.expanded?.[nextProp.row.id] && prevProp.subComponent === nextProp.subComponent && prevProp.row.cells.every((cell, index)=>nextProp.row.cells[index].column === cell.column) && prevProp.isDisabled === nextProp.isDisabled && prevProp.rowProps === nextProp.rowProps && prevProp.expanderCell === nextProp.expanderCell && prevProp.tableHasSubRows === nextProp.tableHasSubRows && prevProp.scrollContainerRef === nextProp.scrollContainerRef && prevProp.state.columnOrder === nextProp.state.columnOrder && !nextProp.state.columnResizing.isResizingColumn && prevProp.state.isTableResizing === nextProp.state.isTableResizing && prevProp.state.sticky.isScrolledToLeft === nextProp.state.sticky.isScrolledToLeft && prevProp.state.sticky.isScrolledToRight === nextProp.state.sticky.isScrolledToRight && prevProp.density === nextProp.density && prevProp.virtualizer === nextProp.virtualizer && prevProp.virtualItem?.index === nextProp.virtualItem?.index && prevProp.virtualItem?.start === nextProp.virtualItem?.start);

package/DEV-cjs/core/Table/actionHandlers/expandHandler.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "onExpandHandler", {
+    enumerable: true,
+    get: function() {
+        return onExpandHandler;
+    }
+});
+const onExpandHandler = (newState, instance, onExpand)=>{
+    if (!instance?.preFilteredFlatRows.length) {
+        onExpand?.([], newState);
+        return;
+    }
+    let expandedData = [];
+    instance.preFilteredFlatRows.forEach((row)=>{
+        if (newState.expanded[row.id]) expandedData.push(row.original);
+    });
+    onExpand?.(expandedData, newState);
+};

package/DEV-cjs/core/Table/actionHandlers/filterHandler.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "onFilterHandler", {
+    enumerable: true,
+    get: function() {
+        return onFilterHandler;
+    }
+});
+const onFilterHandler = (newState, action, previousState, currentFilter, instance)=>{
+    let previousFilter = previousState.filters.find((f)=>f.id === action.columnId);
+    if (previousFilter?.value != action.filterValue) {
+        let filters = newState.filters.map((f)=>{
+            let column = instance?.allColumns.find((c)=>c.id === f.id);
+            return {
+                id: f.id,
+                value: f.value,
+                fieldType: column?.fieldType ?? 'text',
+                filterType: column?.filter ?? 'text'
+            };
+        });
+        return filters;
+    }
+    return currentFilter;
+};

package/DEV-cjs/core/Table/actionHandlers/index.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    onExpandHandler: function() {
+        return _expandHandler.onExpandHandler;
+    },
+    onFilterHandler: function() {
+        return _filterHandler.onFilterHandler;
+    },
+    onShiftSelectHandler: function() {
+        return _selectHandler.onShiftSelectHandler;
+    },
+    onSingleSelectHandler: function() {
+        return _selectHandler.onSingleSelectHandler;
+    },
+    onTableResizeEnd: function() {
+        return _resizeHandler.onTableResizeEnd;
+    },
+    onTableResizeStart: function() {
+        return _resizeHandler.onTableResizeStart;
+    },
+    onToggleHandler: function() {
+        return _selectHandler.onToggleHandler;
+    }
+});
+const _expandHandler = require("./expandHandler.js");
+const _filterHandler = require("./filterHandler.js");
+const _selectHandler = require("./selectHandler.js");
+const _resizeHandler = require("./resizeHandler.js");

package/DEV-cjs/core/Table/actionHandlers/resizeHandler.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    onTableResizeEnd: function() {
+        return onTableResizeEnd;
+    },
+    onTableResizeStart: function() {
+        return onTableResizeStart;
+    }
+});
+const onTableResizeStart = (state)=>({
+        ...state,
+        isTableResizing: true
+    });
+const onTableResizeEnd = (state, action)=>({
+        ...state,
+        isTableResizing: false,
+        columnResizing: {
+            ...state.columnResizing,
+            columnWidths: {
+                ...action.columnWidths
+            }
+        }
+    });

package/DEV-cjs/core/Table/actionHandlers/selectHandler.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    onShiftSelectHandler: function() {
+        return onShiftSelectHandler;
+    },
+    onSingleSelectHandler: function() {
+        return onSingleSelectHandler;
+    },
+    onToggleHandler: function() {
+        return onToggleHandler;
+    }
+});
+const onSelectHandler = (newState, instance, onSelect, isRowDisabled)=>{
+    if (!instance?.rows.length) {
+        onSelect?.([], newState);
+        return;
+    }
+    let newSelectedRowIds = {};
+    let handleRow = (row)=>{
+        if (isRowDisabled?.(row.original)) return false;
+        let isAllSubSelected = true;
+        row.initialSubRows.forEach((subRow)=>{
+            let result = handleRow(subRow);
+            if (!result) isAllSubSelected = false;
+        });
+        if (!instance.selectSubRows && newState.selectedRowIds[row.id] || !row.initialSubRows.length && newState.selectedRowIds[row.id] || row.initialSubRows.length && isAllSubSelected) newSelectedRowIds[row.id] = true;
+        return !!newSelectedRowIds[row.id];
+    };
+    instance.initialRows.forEach((row)=>handleRow(row));
+    let selectedData = getSelectedData(newSelectedRowIds, instance);
+    newState.selectedRowIds = newSelectedRowIds;
+    onSelect?.(selectedData, newState);
+};
+const onToggleHandler = (newState, action, instance, onSelect, isRowDisabled)=>{
+    onSelectHandler(newState, instance, onSelect, isRowDisabled);
+    newState.lastSelectedRowId = action.id;
+};
+const onSingleSelectHandler = (state, action, instance, onSelect, isRowDisabled)=>{
+    let selectedRowIds = {
+        [action.id]: true
+    };
+    if (instance?.selectSubRows) {
+        let handleRow = (row)=>{
+            selectedRowIds[row.id] = true;
+            row.subRows.forEach((r)=>handleRow(r));
+        };
+        handleRow(instance.rowsById[action.id]);
+    }
+    let newState = {
+        ...state,
+        lastSelectedRowId: action.id,
+        selectedRowIds
+    };
+    onSelectHandler(newState, instance, onSelect, isRowDisabled);
+    return newState;
+};
+const onShiftSelectHandler = (state, action, instance, onSelect, isRowDisabled)=>{
+    if (null == instance) return state;
+    let startIndex = Math.max(0, instance.flatRows.findIndex((row)=>row.id === state.lastSelectedRowId));
+    let endIndex = Math.max(0, instance.flatRows.findIndex((row)=>row.id === action.id));
+    if (startIndex > endIndex) {
+        let temp = startIndex;
+        startIndex = endIndex;
+        endIndex = temp;
+    }
+    let isLastSelectedRowIdSelected = null == state.lastSelectedRowId || !!state.selectedRowIds[state.lastSelectedRowId];
+    let selectedRowIds = action.ctrlPressed ? {
+        ...state.selectedRowIds
+    } : {};
+    instance.flatRows.slice(startIndex, endIndex + 1).forEach((r)=>selectedRowIds[r.id] = isLastSelectedRowIdSelected);
+    let handleRow = (row)=>{
+        selectedRowIds[row.id] = isLastSelectedRowIdSelected;
+        row.subRows.forEach((r)=>handleRow(r));
+    };
+    handleRow(instance.flatRows[endIndex]);
+    let newState = {
+        ...state,
+        selectedRowIds
+    };
+    onSelectHandler(newState, instance, onSelect, isRowDisabled);
+    return newState;
+};
+const getSelectedData = (selectedRowIds, instance)=>{
+    let selectedData = [];
+    let setSelectedData = (row)=>{
+        if (selectedRowIds[row.id]) selectedData.push(row.original);
+        row.initialSubRows.forEach((subRow)=>setSelectedData(subRow));
+    };
+    instance?.initialRows.forEach((row)=>setSelectedData(row));
+    return selectedData;
+};

package/DEV-cjs/core/Table/cells/DefaultCell.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DefaultCell", {
+    enumerable: true,
+    get: function() {
+        return DefaultCell;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _index = require("../../../utils/index.js");
+const _utils = require("../utils.js");
+const DefaultCell = (props)=>{
+    let columnsProp = _react.useContext(_utils.TableColumnsContext);
+    let isCustomCell = _react.useMemo(()=>columnsProp.find(({ id })=>props.cellProps.column.id === id)?.hasOwnProperty('Cell'), [
+        props.cellProps.column.id,
+        columnsProp
+    ]);
+    let { cellElementProps: { className: cellElementClassName, style: cellElementStyle, ...cellElementProps }, children, startIcon, endIcon, cellProps, isDisabled, className, style, status, clamp = 'string' == typeof cellProps.value && !isCustomCell, ...rest } = props;
+    return _react.createElement(_index.Box, {
+        ...cellElementProps,
+        ...rest,
+        className: (0, _classnames.default)(cellElementClassName, className),
+        "aria-disabled": isDisabled?.(cellProps.row.original) || void 0,
+        "data-iui-status": status,
+        style: {
+            ...cellElementStyle,
+            ...style
+        }
+    }, _react.createElement(_index.ShadowRoot, null, _react.createElement("slot", {
+        name: "start"
+    }), clamp ? _react.createElement(_index.LineClamp, null, _react.createElement("slot", null)) : _react.createElement("slot", null), _react.createElement("slot", {
+        name: "end"
+    }), _react.createElement("slot", {
+        name: "shadows"
+    })), startIcon && _react.createElement(_index.Box, {
+        className: "iui-table-cell-start-icon",
+        slot: "start"
+    }, startIcon), children, endIcon && _react.createElement(_index.Box, {
+        className: "iui-table-cell-end-icon",
+        slot: "end"
+    }, endIcon));
+};
+DefaultCell.displayName = 'DefaultCell';

package/DEV-cjs/core/Table/cells/EditableCell.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "EditableCell", {
+    enumerable: true,
+    get: function() {
+        return EditableCell;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _index = require("../../../utils/index.js");
+const _classnames = _interop_require_default._(require("classnames"));
+const EditableCell = (props)=>{
+    let { cellElementProps: { className: cellElementClassName, style: cellElementStyle, ...cellElementProps }, cellProps, onCellEdit, children, isDisabled, className, style, ...rest } = props;
+    let sanitizeString = (text)=>text.replace(/(\r\n|\n|\r)+/gm, ' ');
+    let [value, setValue] = _react.useState(()=>sanitizeString(cellProps.value));
+    _react.useEffect(()=>{
+        setValue(sanitizeString(cellProps.value));
+    }, [
+        cellProps.value
+    ]);
+    let [key, setKey] = _react.useState((0, _index.getRandomValue)(10));
+    let [isDirty, setIsDirty] = _react.useState(false);
+    return _react.createElement(_index.Box, {
+        ...cellElementProps,
+        contentEditable: true,
+        suppressContentEditableWarning: true,
+        key: key,
+        ...rest,
+        className: (0, _classnames.default)(cellElementClassName, className),
+        style: {
+            ...cellElementStyle,
+            ...style
+        },
+        onInput: (e)=>{
+            setValue(sanitizeString(e.target.innerText));
+            setIsDirty(true);
+            props.onInput?.(e);
+        },
+        onBlur: (e)=>{
+            if (isDirty) onCellEdit(cellProps.column.id, value, cellProps.row.original);
+            props.onBlur?.(e);
+            setKey((0, _index.getRandomValue)(10));
+        },
+        onKeyDown: (e)=>{
+            if ('Enter' === e.key) e.preventDefault();
+            props.onKeyDown?.(e);
+        },
+        onPaste: (e)=>{
+            e.preventDefault();
+            document.execCommand('inserttext', false, sanitizeString(e.clipboardData.getData('text/plain')));
+            props.onPaste?.(e);
+        },
+        onDrop: (e)=>{
+            e.preventDefault();
+            props.onDrop?.(e);
+        },
+        onClick: (e)=>{
+            e.stopPropagation();
+            props.onClick?.(e);
+        }
+    }, children);
+};
+EditableCell.displayName = 'EditableCell';

package/DEV-cjs/core/Table/cells/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DefaultCell: function() {
+        return _DefaultCell.DefaultCell;
+    },
+    EditableCell: function() {
+        return _EditableCell.EditableCell;
+    }
+});
+const _DefaultCell = require("./DefaultCell.js");
+const _EditableCell = require("./EditableCell.js");