superdesk-ui-framework 3.0.47 → 3.0.49

package/app-typescript/components/ResizeObserverComponent.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+interface IDimensions {
+    width: number;
+}
+
+interface IProps {
+    children: (props: IDimensions) => JSX.Element;
+}
+
+interface IState {
+    dimensions: IDimensions | 'not-initialized';
+}
+
+export class ResizeObserverComponent extends React.PureComponent<IProps, IState> {
+    el: HTMLDivElement | null | undefined;
+    observerInstance: any;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            dimensions: 'not-initialized',
+        };
+    }
+
+    componentDidMount() {
+        this.observerInstance = new ResizeObserver((entries) => {
+            this.setState({
+                dimensions: {
+                    width: Math.floor(entries[0].contentRect.width),
+                },
+            });
+        });
+
+        this.observerInstance.observe(this.el);
+    }
+
+    componentWillUnmount() {
+        this.observerInstance.unobserve(this.el);
+    }
+
+    render() {
+        const {dimensions} = this.state;
+
+        return (
+            <div
+                ref={(el) => {
+                    this.el = el;
+                }}
+            >
+                {
+                    dimensions === 'not-initialized'
+                        ? null
+                        : this.props.children(dimensions)
+                }
+            </div>
+        );
+    }
+}

package/app-typescript/components/TreeSelect/TreeSelect.tsx

@@ -176,7 +176,9 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         if (!isEqual(prevState.value, this.state.value)) {
             this.props.onChange(this.state.value);
         } else if (!isEqual(prevProps.value, this.props.value)) {
-            this.props.onChange(this.state.value);
+            this.setState({
+                value: this.props.value ?? [],
+            });
         }
 
         if (prevState.openDropdown !== this.state.openDropdown) {

package/app-typescript/index.ts

@@ -97,6 +97,7 @@ export { MultiSelect } from './components/MultiSelect';
 export { ResizablePanels } from './components/ResizablePanels';
 export { WithPopover } from './components/WithPopover';
 export { Spacer, SpacerBlock } from './components/Spacer';
+export { ResizeObserverComponent } from './components/ResizeObserverComponent';
 export { DragHandle } from './components/DragHandle';
 
 // declare non-typescript exports to prevent errors