Inspector v2: Add exports for inspector and shared ui components needed for extending inspector features (#17174)

This PR is mostly about adding the needed exports to extend the
inspector with new features. This includes:
1. Exports from the inspector package itself - these I did selectively
from the root index.ts, because what should be part of the public API is
only a subset of what is used internally within the inspector itself and
future internal tool usage.
2. Exports from the shared ui package - these I did with an index.ts
hierarchy as the intention is that 95% of the Fluent directory should be
exported, so I thought this made more sense for this case.

I also included a small change in this PR where Scene Explorer now hides
empty sections (e.g. if there are no post proesses, the "Post Processes"
section won't be displayed). This is to minimize the noise/cognitive
load when you are only using a subset of the Babylon features.

Author: ryantrem

packages/dev/inspector-v2/src/components/scene/sceneExplorer.tsx

@@ -560,7 +560,12 @@ export const SceneExplorer: FunctionComponent<{
         visibleItems.add(sceneTreeItem);
 
         for (const sectionTreeItem of sectionTreeItems) {
+            const children = sectionTreeItem.children;
             traversedItems.push(sectionTreeItem);
+            if (!children.length) {
+                continue;
+            }
+
             // Section tree items are always visible when not filtering.
             if (!filter) {
                 visibleItems.add(sectionTreeItem);
@@ -569,7 +574,7 @@ export const SceneExplorer: FunctionComponent<{
             // When an item filter is present, always traverse the full scene graph (e.g. ignore the open item state).
             if (filter || openItems.has(sectionTreeItem.sectionName)) {
                 TraverseGraph(
-                    sectionTreeItem.children,
+                    children,
                     // Get children
                     (treeItem) => {
                         if (filter || openItems.has(treeItem.entity.uniqueId)) {

packages/dev/inspector-v2/src/index.ts

@@ -1 +1,61 @@
+// Export the parts of inspector that are intended to be part of the public API.
+export * from "./components/properties/boundProperty";
+export * from "./components/properties/linkToEntityPropertyLine";
+export { EntityBase, EntityDisplayInfo, SceneExplorerCommand, SceneExplorerCommandProvider, SceneExplorerSection } from "./components/scene/sceneExplorer";
+export * from "./components/extensibleAccordion";
+export { Pane as PaneContainer } from "./components/pane";
+export * from "./components/teachingMoment";
+export * from "./extensibility/extensionFeed";
+export * from "./hooks/compoundPropertyHooks";
+export * from "./hooks/instrumentationHooks";
+export * from "./hooks/observableHooks";
+export * from "./hooks/pollingHooks";
+export * from "./hooks/resourceHooks";
+export * from "./hooks/settingsHooks";
+export * from "./hooks/teachingMomentHooks";
+export * from "./instrumentation/functionInstrumentation";
+export * from "./instrumentation/propertyInstrumentation";
+export * from "./modularity/serviceDefinition";
+export { IPropertiesService, PropertiesServiceIdentity } from "./services/panes/properties/propertiesService";
+export { ISceneExplorerService, SceneExplorerServiceIdentity } from "./services/panes/scene/sceneExplorerService";
+export { IDebugService, DebugServiceIdentity } from "./services/panes/debugService";
+export { ISettingsService, SettingsServiceIdentity } from "./services/panes/settingsService";
+export { IStatsService, StatsServiceIdentity } from "./services/panes/statsService";
+export { IToolsService, ToolsServiceIdentity } from "./services/panes/toolsService";
+export * from "./services/sceneContext";
+export * from "./services/selectionService";
+export * from "./services/settingsContext";
+export { IShellService, ToolbarItem, SidePane, CentralContent, ShellServiceIdentity } from "./services/shellService";
 export * from "./inspector";
+
+// Export the shared primitive UI controls that can be used for extending the inspector.
+export * from "shared-ui-components/fluent/primitives/accordion";
+export * from "shared-ui-components/fluent/primitives/button";
+export * from "shared-ui-components/fluent/primitives/checkbox";
+export * from "shared-ui-components/fluent/primitives/collapse";
+export * from "shared-ui-components/fluent/primitives/colorPicker";
+export * from "shared-ui-components/fluent/primitives/comboBox";
+export * from "shared-ui-components/fluent/primitives/draggable";
+export * from "shared-ui-components/fluent/primitives/dropdown";
+export * from "shared-ui-components/fluent/primitives/gradient";
+export * from "shared-ui-components/fluent/primitives/infoLabel";
+export * from "shared-ui-components/fluent/primitives/lazyComponent";
+export * from "shared-ui-components/fluent/primitives/link";
+export * from "shared-ui-components/fluent/primitives/list";
+export * from "shared-ui-components/fluent/primitives/messageBar";
+export * from "shared-ui-components/fluent/primitives/positionedPopover";
+export * from "shared-ui-components/fluent/primitives/primitive";
+export * from "shared-ui-components/fluent/primitives/searchBar";
+export * from "shared-ui-components/fluent/primitives/searchBox";
+export * from "shared-ui-components/fluent/primitives/spinButton";
+export * from "shared-ui-components/fluent/primitives/switch";
+export * from "shared-ui-components/fluent/primitives/syncedSlider";
+export * from "shared-ui-components/fluent/primitives/textarea";
+export * from "shared-ui-components/fluent/primitives/textInput";
+export * from "shared-ui-components/fluent/primitives/toggleButton";
+
+// Export the shared hoc UI controls that can be used for extending the inspector.
+export * from "shared-ui-components/fluent/hoc/buttonLine";
+export * from "shared-ui-components/fluent/hoc/fileUploadLine";
+export * from "shared-ui-components/fluent/hoc/gradientList";
+export * from "shared-ui-components/fluent/hoc/pane";

packages/dev/sharedUiComponents/src/fluent/primitives/spinButton.tsx

@@ -1,9 +1,10 @@
 import { makeStyles, SpinButton as FluentSpinButton, useId, tokens } from "@fluentui/react-components";
 import type { SpinButtonOnChangeData, SpinButtonChangeEvent } from "@fluentui/react-components";
-import type { FunctionComponent, KeyboardEvent, FocusEvent } from "react";
+import type { FunctionComponent, KeyboardEvent } from "react";
 import { useEffect, useState, useRef } from "react";
 import type { PrimitiveProps } from "./primitive";
 import { InfoLabel } from "./infoLabel";
+import { HandleKeyDown, HandleOnBlur } from "./utils";
 
 const useSpinStyles = makeStyles({
     base: {
@@ -140,17 +141,3 @@ function PrecisionRound(value: number, precision: number) {
     const exp = Math.pow(10, precision);
     return Math.round(value * exp) / exp;
 }
-
-export function HandleOnBlur(event: FocusEvent<HTMLInputElement>) {
-    event.stopPropagation();
-    event.preventDefault();
-}
-
-export function HandleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
-    event.stopPropagation(); // Prevent event propagation
-
-    // Prevent Enter key from causing form submission or value reversion
-    if (event.key === "Enter") {
-        event.preventDefault();
-    }
-}

packages/dev/sharedUiComponents/src/fluent/primitives/textInput.tsx

@@ -4,7 +4,7 @@ import type { InputOnChangeData } from "@fluentui/react-components";
 import { Input as FluentInput, makeStyles, tokens, useId } from "@fluentui/react-components";
 import type { PrimitiveProps } from "./primitive";
 import { InfoLabel } from "./infoLabel";
-import { HandleOnBlur, HandleKeyDown } from "./spinButton";
+import { HandleOnBlur, HandleKeyDown } from "./utils";
 
 const useInputStyles = makeStyles({
     base: {

packages/dev/sharedUiComponents/src/fluent/primitives/utils.ts

@@ -0,0 +1,15 @@
+import type { KeyboardEvent, FocusEvent } from "react";
+
+export function HandleOnBlur(event: FocusEvent<HTMLInputElement>) {
+    event.stopPropagation();
+    event.preventDefault();
+}
+
+export function HandleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+    event.stopPropagation(); // Prevent event propagation
+
+    // Prevent Enter key from causing form submission or value reversion
+    if (event.key === "Enter") {
+        event.preventDefault();
+    }
+}