@fgv/ts-res-ui-components 5.0.0-29 → 5.0.0-31

package/README.md

@@ -451,16 +451,49 @@ is a generic component used by all of the views, which can also be used to power
 - **Type safety**: Full TypeScript support with generic resource types
 - **Debug controls**: Optional ResourcePickerOptionsControl for development and debugging
 
+#### ResourcePicker Configuration
+
+The ResourcePicker supports two distinct configuration mechanisms:
+
+1. **`pickerOptions`** - Controls actual picker behavior (defaultView, rootPath, search settings, etc.)
+2. **`pickerOptionsPanelPresentation`** - Controls whether/how the debug options control panel is displayed
+
+```tsx
+// Example: Configure picker behavior programmatically
+<SourceView
+  resources={state.processedResources}
+  pickerOptions={{
+    defaultView: 'tree',
+    rootPath: 'user.messages',  // Focus on specific branch
+    hideRootNode: true,         // Hide the root node itself
+    enableSearch: true,
+    searchPlaceholder: 'Search user messages...',
+    height: '500px'
+  }}
+  pickerOptionsPanelPresentation="hidden"  // Hide debug controls in production
+/>
+
+// Example: Enable debug controls during development
+<SourceView
+  resources={state.processedResources}
+  pickerOptions={{
+    defaultView: 'list',
+    enableSearch: true
+  }}
+  pickerOptionsPanelPresentation={isDevelopment ? 'collapsible' : 'hidden'}
+/>
+```
+
 #### ResourcePickerOptionsControl
 
 A debugging/design tool for interactively configuring ResourcePicker behavior. Hidden by default for production use, but can be enabled in development:
 
 ```tsx
-// All view components support pickerOptionsPresentation  
+// All view components support pickerOptionsPanelPresentation
 <ObservabilityProvider observabilityContext={myObservabilityContext}>
   <SourceView
     resources={state.processedResources}
-    pickerOptionsPresentation="collapsible"  // Enable picker options UI
+    pickerOptionsPanelPresentation="collapsible"  // Enable picker options UI
   />
 </ObservabilityProvider>
 
@@ -1002,7 +1035,7 @@ Enable the context options gear icon during development for interactive configur
 ```tsx
 <ResolutionView
   resources={processedResources}
-  pickerOptionsPresentation="collapsible"  // Shows both picker & context gear icons
+  pickerOptionsPanelPresentation="collapsible"  // Shows both picker & context gear icons
   resolutionState={resolutionState}
   resolutionActions={resolutionActions}
 />
@@ -1145,7 +1178,7 @@ Enable the context options gear icon during development for interactive filter c
 ```tsx
 <FilterView
   resources={processedResources}
-  pickerOptionsPresentation="collapsible"  // Shows both picker & context gear icons
+  pickerOptionsPanelPresentation="collapsible"  // Shows both picker & context gear icons
   filterState={filterState}
   filterActions={filterActions}
 />