superdesk-ui-framework 4.0.20 → 4.0.22

package/app/styles/components/_sd-collapse-box.scss

@@ -152,6 +152,10 @@
     overflow: hidden;
     transition: all 0.2s ease;
     outline: 1px solid var(--sd-colour-line--x-light);
+
+    .toggle-box__content--animation {
+        animation: fadeIn 0.3s ease-in 0s 1;
+    }
 }
 .new-collapse-box__header {
     grid-row: 1 / 2;

package/app-typescript/components/IconPicker.tsx

@@ -1,6 +1,4 @@
 import * as React from 'react';
-// @ts-ignore
-import * as iconFont from '../../app/styles/_icon-font.scss';
 import { Button } from './Button';
 import { Icon } from './Icon';
 import { IItem, SelectGrid } from "./SelectGrid";
@@ -85,7 +83,7 @@ export class IconPicker extends React.PureComponent<IProps, IState> {
 }
 
 const getIcons = (translateFunction: (text: string) => string): Array<IItem> => {
-    const translatedIconNameMap: any = {
+    const translatedIconNameMap = {
         'add-gallery': 'Add Gallery',
         'add-image': 'Add Image',
         'adjust': 'Adjust',
@@ -271,11 +269,8 @@ const getIcons = (translateFunction: (text: string) => string): Array<IItem> =>
         'zoom-out': 'Zoom Out',
     };
 
-    return iconFont.icon
-        .split(', ')
-        .sort()
-        .map((icon: string) => ({
-            value: icon,
-            label: translatedIconNameMap[icon] ? translateFunction(translatedIconNameMap[icon]) : icon,
-        }));
+    return Object.keys(translatedIconNameMap).sort().map((icon) => ({
+        value: icon as keyof typeof translatedIconNameMap,
+        label: translateFunction(translatedIconNameMap[icon as keyof typeof translatedIconNameMap]),
+    }));
 };

package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx

@@ -32,9 +32,24 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
         return this.state.isOpen;
     }
 
-    public toggle = (): void => {
-        this.setState({isOpen: !this.state.isOpen}, () => {
-            this.props.onToggle?.(this.state.isOpen);
+    public toggle = (): Promise<boolean> => {
+        return new Promise((resolve, reject) => {
+            this.setState(
+                {isOpen: !this.state.isOpen, isAnimating: true},
+                () => {
+                    if (this.contentRef.current) {
+                        const handleAnimation = () => {
+                            this.props.onToggle?.(this.state.isOpen);
+                            this.handleAnimationEnd();
+                            resolve(this.state.isOpen);
+                        };
+
+                        this.contentRef.current.addEventListener("animationend", handleAnimation, {once: true});
+                    } else {
+                        reject();
+                    }
+                },
+            );
         });
     }
 
@@ -91,6 +106,7 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
                 {/** render wrapper unconditionally in order not to break the animation */}
                 <div className='new-collapse-box__content'>
                     <div
+                        ref={this.contentRef}
                         id={this.htmlId}
                         aria-hidden={!isOpen}
                         className={classNames('new-collapse-box__content-inner p-2 pt-0-5', {