add Popout component, make sure the user has at least 1 addon for settings context menu

src/core/modules/components/index.js

@@ -36,6 +36,7 @@ export const TextBadge = AsyncComponent.fetchFromProps('TextBadge');
 // "icon",  "color", "shape", "disableColor", "className"
 export const IconBadge = AsyncComponent.fetchFromProps('IconBadge');
 export const Checkbox = AsyncComponent.fromDisplayName('Checkbox');
+export const Popout = AsyncComponent.fromDisplayName('Popout');
 /**
  * @deprecated
  */
@@ -160,6 +161,12 @@ getModuleByDisplayName('Checkbox', true, true).then(Checkbox => {
   this.Checkbox.Aligns = Checkbox.Aligns;
   this.Checkbox.Shapes = Checkbox.Shapes;
   this.Checkbox.Types = Checkbox.Types;
+  this.Checkbox.DEFAULT_PROPS = Checkbox.defaultProps;
+});
+
+getModuleByDisplayName('Popout', true, true).then(Popout => {
+  this.Popout.Aligns = Popout.Align;
+  this.Popout.Positions = Popout.Positions;
 });
 
 getModuleByDisplayName('HeaderBar', true, true).then(HeaderBar => {

src/core/modules/components/vizality/SettingsContextMenu.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-vars */
+import { toTitleCase, toSingular } from '@vizality/util/string';
 import React, { memo, useState, useEffect } from 'react';
 import { FilterInput } from '@vizality/components';
-import { toTitleCase, toSingular } from '@vizality/util/string';
 import { useForceUpdate } from '@vizality/hooks';
 import { contextMenu } from '@vizality/webpack';
 import { error } from '@vizality/util/logger';
@@ -133,7 +133,12 @@ export default memo(() => {
         />
         <ContextMenu.Item
           id='appearance'
-          label={() => <>Appearance<TextBadge text='SOON™' /></>}
+          label={() => (
+            <>
+              Appearance
+              <TextBadge text='SOON™' />
+            </>
+          )}
           action={() => vizality.api.routes.navigateTo('settings/appearance')}
           disabled
         />
@@ -172,7 +177,7 @@ export default memo(() => {
             label={toTitleCase(type)}
             action={() => vizality.api.routes.navigateTo(type)}
           >
-            <ContextMenu.Group
+            {eval(`filtered${toTitleCase(type)}`).length && <ContextMenu.Group
               id='search'
               className='vz-settings-context-menu-search'
               label={
@@ -299,7 +304,7 @@ export default memo(() => {
                     )
                 );
               })}
-            </ContextMenu.Group>
+            </ContextMenu.Group>}
           </ContextMenu.Item>
         );
       })}