onekijs-ui 0.19.9 → 0.19.11

package/dist/components/dashboard/DashboardService.d.ts

@@ -1,21 +1,25 @@
-import { DefaultService } from 'onekijs-framework';
-import React from 'react';
+import { AnonymousObject, DefaultService } from 'onekijs-framework';
+import React, { MutableRefObject } from 'react';
 import { ResizeStep } from '../resizer/typings';
 import { DashboardArea, DashboardBodyPanel, DashboardBodyPanelProps, DashboardHorizontalArea, DashboardHorizontalPanel, DashboardHorizontalPanelProps, DashboardSize, DashboardState, DashboardVerticalArea, DashboardVerticalPanel, DashboardVerticalPanelProps } from './typings';
 export declare class DashboardService extends DefaultService<DashboardState> {
     protected areas: DashboardArea[][];
+    refs: AnonymousObject<MutableRefObject<HTMLDivElement | null> | null | undefined>;
     collapse(area: DashboardArea | 'all', collapse?: boolean): void;
     collapseFloating(): void;
+    destroyPanel(area: 'left' | 'right' | 'header' | 'footer' | 'body' | 'container'): void;
     float(area: DashboardArea | 'all', float?: boolean): void;
     getBodyPanel(): DashboardBodyPanel | undefined;
     getHorizontalPanel(area: 'footer' | 'header'): DashboardHorizontalPanel | undefined;
+    getRef(area: 'left' | 'right' | 'header' | 'footer' | 'body' | 'container'): React.MutableRefObject<HTMLDivElement | null> | null | undefined;
     getVerticalPanel(area: 'left' | 'right'): DashboardVerticalPanel | undefined;
-    initBodyPanel(_props: DashboardBodyPanelProps, ref: React.RefObject<HTMLDivElement>): void;
-    initContainer(ref: React.RefObject<HTMLDivElement>): void;
-    initHorizontalPanel(area: 'footer' | 'header', props: DashboardHorizontalPanelProps, ref: React.RefObject<HTMLDivElement>): void;
-    initVerticalPanel(area: 'left' | 'right', props: DashboardVerticalPanelProps, ref: React.RefObject<HTMLDivElement>): void;
+    initBodyPanel(_props: DashboardBodyPanelProps): void;
+    initContainer(ref: React.MutableRefObject<HTMLDivElement | null>): void;
+    initHorizontalPanel(area: 'footer' | 'header', props: DashboardHorizontalPanelProps): void;
+    initVerticalPanel(area: 'left' | 'right', props: DashboardVerticalPanelProps): void;
     resizeHeight(area: DashboardHorizontalArea, nextHeight: number, step: ResizeStep): void;
     resizeWidth(area: DashboardVerticalArea, nextWidth: number, step: ResizeStep): void;
+    setRef(area: 'left' | 'right' | 'header' | 'footer' | 'body' | 'container', ref: React.MutableRefObject<HTMLDivElement | null> | null | undefined): void;
     showOverlay(): boolean;
     toggle(area: DashboardArea | 'all'): void;
     _compileAreas(): void;

package/dist/components/dashboard/typings.d.ts

@@ -11,14 +11,11 @@ export type DashboardBodyComponentProps = {
 };
 export type DashboardBodyPanel = {
     className?: string;
-    ref: React.RefObject<HTMLDivElement>;
 };
 export type DashboardBodyPanelProps = {
     className?: string;
 };
-export type DashboardContainer = {
-    ref: React.RefObject<HTMLDivElement>;
-};
+export type DashboardContainer = {};
 export type DashboardContainerProps = {
     areas?: DashboardArea[][];
     className?: string;
@@ -27,7 +24,8 @@ export type DashboardContainerProps = {
     left?: DashboardVerticalPanel;
     right?: DashboardVerticalPanel;
     body?: DashboardBodyPanel;
-    onInit: (ref: React.RefObject<HTMLDivElement>) => void;
+    onInit: (ref: React.MutableRefObject<HTMLDivElement | null>) => void;
+    onDestroy: () => void;
 };
 export type DashboardHorizontalArea = 'header' | 'footer';
 export type DashboardHorizontalPanel = DashboardSidePanel & Required<DashboardHorizontalProps> & {
@@ -51,9 +49,7 @@ export type DashboardProps = StylableProps & {
 export type DashboardOverlayProps = React.InputHTMLAttributes<HTMLDivElement> & {
     show: boolean;
 };
-export type DashboardSidePanel = Omit<Required<DashboardSidePanelProps>, 'collapse' | 'floating'> & {
-    ref: React.RefObject<HTMLDivElement>;
-};
+export type DashboardSidePanel = Omit<Required<DashboardSidePanelProps>, 'collapse' | 'floating'>;
 export type DashboardSidePanelProps = {
     className?: string;
     collapse?: boolean;

package/dist/components/properties/typings.d.ts

@@ -1,9 +1,10 @@
 import { AnonymousObject } from 'onekijs-framework';
-import React, { ReactNode } from 'react';
+import React, { ComponentType, PropsWithChildren, ReactNode } from 'react';
 import { GridSize } from '../grid/typings';
 export type PropertiesProps = {
     properties: PropertiesList;
     PropertyComponent?: React.FC<PropertyProps>;
+    ErrorBoundaryComponent?: ComponentType<PropsWithChildren<PropertyProps>>;
     order?: boolean;
     className?: string;
     size?: GridSize;
@@ -15,6 +16,7 @@ export type PropertiesProps = {
 export type PropertyProps = {
     value: ReactNode;
     name: string;
+    ErrorBoundaryComponent?: ComponentType<PropsWithChildren<PropertyProps>>;
 };
 export type PropertiesContext = {
     size?: GridSize;

package/dist/components/table/typings.d.ts

@@ -1,5 +1,5 @@
 import { Collection, CollectionBy, CollectionProxy, FormDisplayerProps, FormFieldProps, Item, ItemAdaptee, Primitive, QueryFilterCriteriaOperator, QueryFilterOrCriteria, QuerySortBy, UseCollectionOptions, ValidationStatus } from 'onekijs-framework';
-import React, { FC, ReactNode } from 'react';
+import React, { ComponentType, FC, PropsWithChildren, ReactNode } from 'react';
 import { StylableProps, TshirtSize } from '../../styles/typings';
 import { ButtonProps } from '../button/typings';
 import { CheckboxProps } from '../checkbox/typings';
@@ -164,6 +164,7 @@ export type TableColumnSpec<T, I extends TableItem<T> = TableItem<T>> = {
     className?: string | ((item: I, column: TableColumn<T, I>, rowIndex: number) => string);
     CellComponent?: Cell<T, I>;
     Displayer?: React.FC<TableCellDisplayerProps<T>>;
+    ErrorBoundaryComponent?: ComponentType<PropsWithChildren<TableBodyCellProps<T, I>>>;
     footerClassName?: string | ((column: TableColumn<T, I>) => string);
     FooterComponent?: React.FC<TableFooterCellProps<T, I>>;
     filterable?: boolean;

package/dist/components/tree/components/TreeBodyComponent.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ControllerTreeProps, TreeItem } from '../typings';
 declare const TreeBodyComponent: {
-    <T = any, I extends TreeItem<T> = TreeItem<T>>({ className, controller, }: ControllerTreeProps<T, I>): React.JSX.Element;
+    <T extends unknown = any, I extends TreeItem<T> = TreeItem<T>>({ className, controller, }: ControllerTreeProps<T, I>): React.JSX.Element;
     displayName: string;
 };
 export default TreeBodyComponent;

package/dist/components/tree/components/VirtualTreeBodyComponent.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ControllerTreeProps, TreeItem } from '../typings';
 declare const VirtualTreeBodyComponent: {
-    <T = any, I extends TreeItem<T> = TreeItem<T>>({ className, controller, height, }: ControllerTreeProps<T, I>): React.JSX.Element;
+    <T extends unknown = any, I extends TreeItem<T> = TreeItem<T>>({ className, controller, height, }: ControllerTreeProps<T, I>): React.JSX.Element;
     displayName: string;
 };
 export default VirtualTreeBodyComponent;

package/dist/index.js

@@ -2451,6 +2451,9 @@ const DashboardContainerComponent = (props) => {
     React.useEffect(() => {
         props.onInit(ref);
         // eslint-disable-next-line react-hooks/exhaustive-deps
+        return () => {
+            props.onDestroy();
+        };
     }, []);
     return (React.createElement("div", { className: addClassname('o-dashboard', props.className), ref: ref }, props.children));
 };
@@ -2488,7 +2491,7 @@ const DashboardOverlay = styled(DashboardOverlayComponent) `
 const DashboardComponent = ({ ContainerComponent = DashboardContainer, OverlayComponent = DashboardOverlay, children, service, }) => {
     return (React.createElement(DashboardServiceContext.Provider, { value: service },
         React.createElement(DashboardStateContext.Provider, { value: service.state },
-            React.createElement(ContainerComponent, { areas: service.state.areas, header: service.state.header, footer: service.state.footer, left: service.state.left, right: service.state.right, body: service.state.body, onInit: (ref) => service.initContainer(ref) },
+            React.createElement(ContainerComponent, { areas: service.state.areas, header: service.state.header, footer: service.state.footer, left: service.state.left, right: service.state.right, body: service.state.body, onInit: () => undefined, onDestroy: () => service.destroyPanel('container') },
                 React.createElement(OverlayComponent, { show: service.showOverlay(), onClick: () => service.collapseFloating() }),
                 children))));
 };
@@ -2575,6 +2578,7 @@ exports.DashboardService = class DashboardService extends onekijsFramework.Defau
         ['none', 'none', 'none'],
         ['none', 'none', 'none'],
     ];
+    refs = {};
     collapse(area, collapse = true) {
         if (area === 'all') {
             ['left', 'right', 'header', 'footer'].forEach((area) => {
@@ -2593,6 +2597,9 @@ exports.DashboardService = class DashboardService extends onekijsFramework.Defau
             }
         });
     }
+    destroyPanel(area) {
+        this.refs[area] = null;
+    }
     float(area, float = true) {
         if (area === 'all') {
             ['left', 'right', 'header', 'footer'].forEach((area) => {
@@ -2609,18 +2616,21 @@ exports.DashboardService = class DashboardService extends onekijsFramework.Defau
     getHorizontalPanel(area) {
         return this.state[area];
     }
+    getRef(area) {
+        return this.refs[area];
+    }
     getVerticalPanel(area) {
         return this.state[area];
     }
-    initBodyPanel(_props, ref) {
+    initBodyPanel(_props) {
         this.areas[1][1] = 'body';
-        this.state.body = { ref };
+        this.state.body = {};
         this._compileAreas();
     }
     initContainer(ref) {
         this.state.container = { ref };
     }
-    initHorizontalPanel(area, props, ref) {
+    initHorizontalPanel(area, props) {
         const dashboardPanel = {
             area,
             className: props.className || '',
@@ -2634,14 +2644,13 @@ exports.DashboardService = class DashboardService extends onekijsFramework.Defau
             minHeight: props.minHeight ?? 0,
             height: props.height ?? '70px',
             maxHeight: props.maxHeight ?? 0,
-            ref,
             resizable: props.resizable || false,
             resizerGap: props.resizerGap || 0,
         };
         this.state[area] = dashboardPanel;
         this._fillRow(area === 'header' ? 0 : 2, area);
     }
-    initVerticalPanel(area, props, ref) {
+    initVerticalPanel(area, props) {
         const dashboardPanel = {
             area,
             className: props.className || '',
@@ -2655,7 +2664,6 @@ exports.DashboardService = class DashboardService extends onekijsFramework.Defau
             minWidth: props.minWidth ?? 0,
             maxWidth: props.maxWidth ?? 0,
             width: props.width ?? '200px',
-            ref,
             resizable: props.resizable || false,
             resizerGap: props.resizerGap || 0,
         };
@@ -2664,6 +2672,7 @@ exports.DashboardService = class DashboardService extends onekijsFramework.Defau
     }
     resizeHeight(area, nextHeight, step) {
         const panel = this.state[area];
+        const panelRef = this.refs[area];
         if (panel) {
             const maxHeight = parseInt(`${panel.maxHeight}`);
             const minHeight = parseInt(`${panel.minHeight}`);
@@ -2678,20 +2687,20 @@ exports.DashboardService = class DashboardService extends onekijsFramework.Defau
         const header = this.state.header;
         const footer = this.state.footer;
         const elements = {};
-        elements['panel'] = panel !== undefined && panel.ref.current !== null ? panel.ref.current : undefined;
-        elements['body'] = body !== undefined && body.ref.current !== null ? body.ref.current : undefined;
+        elements['panel'] = panel !== undefined && panelRef && panelRef.current !== null ? panelRef.current : undefined;
+        elements['body'] = body !== undefined && this.refs.body && this.refs.body.current !== null ? this.refs.body.current : undefined;
         // only touch the left panel if it's at the footer of the header panel or at the header of the footer panel
         elements['left'] =
-            isAreaInColumn('first', area, this.state.areas) && left !== undefined && left.ref.current !== null
-                ? left.ref.current
+            isAreaInColumn('first', area, this.state.areas) && left !== undefined && this.refs.left && this.refs.left.current !== null
+                ? this.refs.left.current
                 : undefined;
         // only touch the right panel if it's at the footer of the header panel or at the header of the footer panel
         elements['right'] =
-            isAreaInColumn('last', area, this.state.areas) && right !== undefined && right.ref.current !== null
-                ? right.ref.current
+            isAreaInColumn('last', area, this.state.areas) && right !== undefined && this.refs.right && this.refs.right.current !== null
+                ? this.refs.right.current
                 : undefined;
-        elements['header'] = header !== undefined && header.ref.current !== null ? header.ref.current : undefined;
-        elements['footer'] = footer !== undefined && footer.ref.current !== null ? footer.ref.current : undefined;
+        elements['header'] = header !== undefined && this.refs.header && this.refs.header.current !== null ? this.refs.header.current : undefined;
+        elements['footer'] = footer !== undefined && this.refs.footer && this.refs.footer.current !== null ? this.refs.footer.current : undefined;
         switch (step) {
             case 'start':
                 // deactivate transition animation during the resize
@@ -2753,6 +2762,7 @@ exports.DashboardService = class DashboardService extends onekijsFramework.Defau
     }
     resizeWidth(area, nextWidth, step) {
         const panel = this.state[area];
+        const panelRef = this.refs[area];
         if (panel) {
             const maxWidth = parseInt(`${panel.maxWidth}`);
             const minWidth = parseInt(`${panel.minWidth}`);
@@ -2767,20 +2777,20 @@ exports.DashboardService = class DashboardService extends onekijsFramework.Defau
         const left = this.state.left;
         const right = this.state.right;
         const elements = {};
-        elements['panel'] = panel !== undefined && panel.ref.current !== null ? panel.ref.current : undefined;
-        elements['body'] = body !== undefined && body.ref.current !== null ? body.ref.current : undefined;
+        elements['panel'] = panel !== undefined && panelRef && panelRef.current !== null ? panelRef.current : undefined;
+        elements['body'] = body !== undefined && this.refs.body && this.refs.body.current !== null ? this.refs.body.current : undefined;
         // only touch the header panel if it's at the right of the left panel or at the left of the right panel
         elements['header'] =
-            isAreaInRow('first', area, this.state.areas) && header !== undefined && header.ref.current !== null
-                ? header.ref.current
+            isAreaInRow('first', area, this.state.areas) && header !== undefined && this.refs.header && this.refs.header.current !== null
+                ? this.refs.header.current
                 : undefined;
         // only touch the footer panel if it's at the right of the left panel or at the left of the right panel
         elements['footer'] =
-            isAreaInRow('last', area, this.state.areas) && footer !== undefined && footer.ref.current !== null
-                ? footer.ref.current
+            isAreaInRow('last', area, this.state.areas) && footer !== undefined && this.refs.footer && this.refs.footer.current !== null
+                ? this.refs.footer.current
                 : undefined;
-        elements['left'] = left !== undefined && left.ref.current !== null ? left.ref.current : undefined;
-        elements['right'] = right !== undefined && right.ref.current !== null ? right.ref.current : undefined;
+        elements['left'] = left !== undefined && this.refs.left && this.refs.left.current !== null ? this.refs.left.current : undefined;
+        elements['right'] = right !== undefined && this.refs.right && this.refs.right.current !== null ? this.refs.right.current : undefined;
         switch (step) {
             case 'start':
                 clearSelection();
@@ -2840,6 +2850,9 @@ exports.DashboardService = class DashboardService extends onekijsFramework.Defau
                 break;
         }
     }
+    setRef(area, ref) {
+        this.refs[area] = ref;
+    }
     showOverlay() {
         let result = false;
         const areas = ['right', 'left', 'header', 'footer'];
@@ -2896,10 +2909,10 @@ exports.DashboardService = class DashboardService extends onekijsFramework.Defau
         return getFloatingKey(this._getSize());
     }
     _getSize() {
-        if (!this.state.container || !this.state.container.ref.current) {
+        if (!this.state.container || !this.refs.container?.current) {
             return onekijsFramework.isMobile() ? 'small' : 'large';
         }
-        const dashboardWidth = this.state.container.ref.current.offsetWidth;
+        const dashboardWidth = this.refs.container.current.offsetWidth;
         if (dashboardWidth < 768)
             return 'small';
         if (dashboardWidth < 992)
@@ -2931,6 +2944,12 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], exports.DashboardService.prototype, "collapseFloating", null);
+__decorate([
+    onekijsFramework.reducer,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String]),
+    __metadata("design:returntype", void 0)
+], exports.DashboardService.prototype, "destroyPanel", null);
 __decorate([
     onekijsFramework.reducer,
     __metadata("design:type", Function),
@@ -2940,7 +2959,7 @@ __decorate([
 __decorate([
     onekijsFramework.reducer,
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object, Object]),
+    __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", void 0)
 ], exports.DashboardService.prototype, "initBodyPanel", null);
 __decorate([
@@ -2952,13 +2971,13 @@ __decorate([
 __decorate([
     onekijsFramework.reducer,
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", [String, Object, Object]),
+    __metadata("design:paramtypes", [String, Object]),
     __metadata("design:returntype", void 0)
 ], exports.DashboardService.prototype, "initHorizontalPanel", null);
 __decorate([
     onekijsFramework.reducer,
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", [String, Object, Object]),
+    __metadata("design:paramtypes", [String, Object]),
     __metadata("design:returntype", void 0)
 ], exports.DashboardService.prototype, "initVerticalPanel", null);
 __decorate([
@@ -3015,14 +3034,18 @@ const DashboardBodyComponent = (props) => {
         style.transition = 'none';
     }
     React.useEffect(() => {
+        service.setRef('body', ref);
         if (stepRef.current === undefined) {
             stepRef.current = 'initializing';
-            service.initBodyPanel(props, ref);
+            service.initBodyPanel(props);
         }
         else if (stepRef.current === 'initializing' && ref.current) {
             stepRef.current = 'initialized';
             ref.current.style.transition = '';
         }
+        return () => {
+            service.destroyPanel('body');
+        };
     });
     return (React.createElement("div", { className: props.className, ref: ref, style: style }, stepRef.current && props.children));
 };
@@ -3601,14 +3624,18 @@ const Component$1 = (props) => {
         style.transition = 'none';
     }
     React.useEffect(() => {
+        service.setRef(props.area, ref);
         if (stepRef.current === undefined) {
             stepRef.current = 'initializing';
-            service.initHorizontalPanel(props.area, props, ref);
+            service.initHorizontalPanel(props.area, props);
         }
         else if (stepRef.current === 'initializing' && ref.current) {
             stepRef.current = 'initialized';
             ref.current.style.transition = '';
         }
+        return () => {
+            service.destroyPanel(props.area);
+        };
     });
     return (React.createElement("div", { className: addClassname(props.area === 'header' ? 'o-dashboard-header' : 'o-dashboard-footer', props.className), ref: ref, style: style }, stepRef.current && props.children));
 };
@@ -3707,14 +3734,18 @@ const Component = (props) => {
         style.transition = 'none';
     }
     React.useEffect(() => {
+        service.setRef(props.area, ref);
         if (stepRef.current === undefined) {
             stepRef.current = 'initializing';
-            service.initVerticalPanel(props.area, props, ref);
+            service.initVerticalPanel(props.area, props);
         }
         else if (stepRef.current === 'initializing' && ref.current) {
             stepRef.current = 'initialized';
             ref.current.style.transition = '';
         }
+        return () => {
+            service.destroyPanel(props.area);
+        };
     });
     return (React.createElement("div", { className: addClassname(props.area === 'left' ? 'o-dashboard-left' : 'o-dashboard-right', props.className), ref: ref, style: style }, stepRef.current && props.children));
 };
@@ -5116,7 +5147,6 @@ const ListBodyComponent = ({ autoRefresh, bodyRef, className, follow, height, it
     });
     React.useEffect(() => {
         const ref = parentRef ? parentRef : bodyRef;
-        //console.log('parentRef', parentRef, 'ref', ref)
         const atBottom = () => {
             if (ref && ref.current) {
                 const sh = ref.current.scrollHeight;
@@ -5128,18 +5158,6 @@ const ListBodyComponent = ({ autoRefresh, bodyRef, className, follow, height, it
             return false;
         };
         if (tail && scrollToIndex && totalSize && ref && ref.current) {
-            // console.log(
-            //   'scrollTop',
-            //   ref.current.scrollTop,
-            //   'mouseRef',
-            //   mouseRef.current,
-            //   'wheelRef',
-            //   wheelRef.current,
-            //   'applyTail',
-            //   tailRef.current.applyTail,
-            //   'atBottom',
-            //   atBottom(),
-            // );
             tailRef.current.lastScrollTop = ref.current.scrollTop;
             if (!atBottom() && (mouseRef.current || wheelRef.current)) {
                 tailRef.current.applyTail = false;
@@ -6008,7 +6026,8 @@ const usePropertiesContext = () => {
     return React.useContext(DefaultPropertiesContext);
 };
 
-const Property = React.memo(({ name, value }) => {
+const Property = React.memo((props) => {
+    const { name, value, ErrorBoundaryComponent } = props;
     const context = usePropertiesContext();
     const nameSize = context.size ?? 3;
     const valueSize = (nameSize === 12 ? 12 : 12 - nameSize);
@@ -6020,11 +6039,13 @@ const Property = React.memo(({ name, value }) => {
     });
     return (React.createElement(Row, { className: "o-property", gapX: "10px", gapY: "0px" },
         React.createElement(Col, { size: nameSize, sm: context.sm, md: context.md, lg: context.lg, xl: context.xl, className: "o-property-name" }, name),
-        React.createElement(Col, { size: valueSize, sm: variantValueSize.sm, md: variantValueSize.md, lg: variantValueSize.lg, xl: variantValueSize.xl, className: "o-property-value" }, value)));
+        React.createElement(Col, { size: valueSize, sm: variantValueSize.sm, md: variantValueSize.md, lg: variantValueSize.lg, xl: variantValueSize.xl, className: "o-property-value" },
+            ErrorBoundaryComponent && React.createElement(ErrorBoundaryComponent, { ...props }, value),
+            !ErrorBoundaryComponent && React.createElement(React.Fragment, null, value))));
 });
 Property.displayName = 'Property';
 
-const PropertiesComponent = ({ className, properties, PropertyComponent = Property, order = false, size, sm, md, lg, xl, }) => {
+const PropertiesComponent = ({ className, properties, PropertyComponent = Property, ErrorBoundaryComponent, order = false, size, sm, md, lg, xl, }) => {
     const classNames = addClassname('o-properties', className);
     const keys = Object.keys(properties);
     if (order) {
@@ -6040,7 +6061,7 @@ const PropertiesComponent = ({ className, properties, PropertyComponent = Proper
         };
     }, [size, sm, md, lg, xl]);
     return (React.createElement(DefaultPropertiesContext.Provider, { value: context },
-        React.createElement("div", { className: classNames }, keys.map((key) => (React.createElement(PropertyComponent, { key: key, name: key, value: properties[key] }))))));
+        React.createElement("div", { className: classNames }, keys.map((key) => (React.createElement(PropertyComponent, { key: key, name: key, value: properties[key], ErrorBoundaryComponent: ErrorBoundaryComponent }))))));
 };
 
 const propertiesStyle = ({ theme }) => {
@@ -6048,7 +6069,7 @@ const propertiesStyle = ({ theme }) => {
     return styled.css `
     .o-property {
       ${paddingY(t.paddingY)}
-      ${flexWrap('nowrap')}
+      ${flexWrap('wrap')}
     }
     .o-property-name {
       ${fontWeight(t.fontWeight)}
@@ -9327,12 +9348,16 @@ const TableBodyCellComponent = React.memo((props) => {
     const ref = React.useRef(null);
     const initializedRef = React.useRef(false);
     const Component = column.CellComponent || DefaultCellComponent$1;
+    const ErrorBoundaryComponent = column.ErrorBoundaryComponent;
     React.useEffect(() => {
         if (!initializedRef.current && ref.current !== null) {
             service.initCell(rowIndex, column.id, ref);
         }
     });
-    return (React.createElement("div", { ref: ref, className: addClassname('o-table-body-cell', className), style: getCellWidth(column, fit, grow) }, props.item && React.createElement(Component, { ...props, data: props.item.data })));
+    return (React.createElement("div", { ref: ref, className: addClassname('o-table-body-cell', className), style: getCellWidth(column, fit, grow) },
+        props.item && ErrorBoundaryComponent && React.createElement(ErrorBoundaryComponent, { ...props, data: props.item?.data },
+            React.createElement(Component, { ...props, data: props.item.data })),
+        props.item && !ErrorBoundaryComponent && React.createElement(Component, { ...props, data: props.item.data })));
 });
 TableBodyCellComponent.displayName = 'TableCell';