@openg2p/registry-widgets 0.1.4 → 0.1.5

package/dist/index.js

@@ -951,32 +951,63 @@ const useBaseWidget = (options) => {
         if (isLayoutWidget) {
             return undefined; // Layout widgets don't have values
         }
+        // Helper to extract displayable value from object (especially geo hierarchy objects)
+        const extractValueFromObject = (obj) => {
+            if (!obj || typeof obj !== 'object' || Array.isArray(obj)) {
+                return obj;
+            }
+            // Check for geo hierarchy structure first
+            if ('geo_code_hierarchy_json' in obj || 'geo_lowest_level_value_id' in obj) {
+                if ('geo_lowest_level_value_id' in obj) {
+                    return obj.geo_lowest_level_value_id;
+                }
+                // If it's a geo hierarchy object but no extractable ID, return undefined to avoid rendering object
+                return undefined;
+            }
+            // Try common value fields
+            if ('value' in obj) {
+                return obj.value;
+            }
+            if ('id' in obj) {
+                return obj.id;
+            }
+            if ('label' in obj) {
+                return obj.label;
+            }
+            if ('name' in obj) {
+                return obj.name;
+            }
+            // If no extractable value found, return undefined to avoid rendering object as React child
+            // This prevents "Objects are not valid as a React child" errors
+            return undefined;
+        };
         // Try to get value from widgetId first (this should have the actual selected value)
         // For geo widgets with dataPath, widgetId stores the actual ID, while dataPath stores the hierarchy object
         let value = values[widgetId];
+        // Extract value if it's an object (handles geo hierarchy objects stored in widgetId)
+        if (value !== null && value !== undefined && typeof value === 'object' && !Array.isArray(value)) {
+            value = extractValueFromObject(value);
+        }
         // If widgetId doesn't have a value, try dataPath
         if (value === undefined && config['widget-data-path']) {
             value = getWidgetValue(values, config['widget-data-path'], widgetId);
-            // CRITICAL: For geo widgets with dataPath, the value might be stored as a hierarchy object
-            // Extract the actual value (geo_lowest_level_value_id) if it's an object
-            const geoConfig = config['widget-geo-config'];
-            if (geoConfig?.isLastLevel && value && typeof value === 'object' && !Array.isArray(value)) {
-                // If it's a geo hierarchy object, extract the actual value
-                if ('geo_lowest_level_value_id' in value) {
-                    value = value.geo_lowest_level_value_id;
-                }
-                else if ('value' in value) {
-                    value = value.value;
-                }
-                else if ('id' in value) {
-                    value = value.id;
-                }
+            // Extract value if it's an object (handles geo hierarchy objects from dataPath)
+            if (value !== null && value !== undefined && typeof value === 'object' && !Array.isArray(value)) {
+                value = extractValueFromObject(value);
             }
         }
         // If value is still undefined and user has set a value, try reading from widgetId as backup
         // This handles cases where dataPath lookup might fail temporarily
         if (value === undefined && userHasSetValueRef.current && values[widgetId] !== undefined) {
             value = values[widgetId];
+            // Extract value if it's an object (handles geo hierarchy objects)
+            if (value !== null && value !== undefined && typeof value === 'object' && !Array.isArray(value)) {
+                value = extractValueFromObject(value);
+            }
+        }
+        // Final safety check: if value is still an object, extract displayable value
+        if (value !== null && value !== undefined && typeof value === 'object' && !Array.isArray(value)) {
+            value = extractValueFromObject(value);
         }
         // If user has explicitly set a value, always return it (even if undefined/null)
         // This prevents the default from overwriting user selections
@@ -2246,7 +2277,7 @@ const WidgetProvider = ({ store, dataSourceRequestHandler, schemaData, translate
             widgetStore.dispatch(setValues(schemaData));
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []); // Only run on mount
+    }, [schemaData, widgetStore]); // Only run on mount
     const content = (jsxRuntimeExports.jsx(reactRedux.Provider, { store: widgetStore, children: jsxRuntimeExports.jsx(WidgetContext.Provider, { value: contextValue, children: jsxRuntimeExports.jsx(WidgetEventBusContext.Provider, { value: eventBus, children: children }) }) }));
     return content;
 };
@@ -2256,8 +2287,11 @@ const WidgetRenderer = ({ config, dataSourceRequestHandler: propDataSourceReques
     const context = useWidgetContext();
     const dataSourceRequestHandler = propDataSourceRequestHandler || context.dataSourceRequestHandler;
     const schemaData = propSchemaData || context.schemaData;
+    // Warn if dataSourceRequestHandler is missing for API data sources, but don't break rendering
+    // This allows widgets to render in read-only or static modes (e.g., CRView)
     if (!dataSourceRequestHandler && config['widget-data-source']?.type === 'api') {
-        console.error(`[WidgetRenderer] dataSourceRequestHandler is required for widget ${config['widget-id']} with API data source`);
+        console.warn(`[WidgetRenderer] dataSourceRequestHandler is not provided for widget ${config['widget-id']} with API data source. ` +
+            `The widget will render but API data source functionality will be disabled.`);
     }
     // Get values from Redux for cascade hooks
     const values = reactRedux.useSelector((state) => state.widget.values);
@@ -3193,7 +3227,7 @@ const namespaceSectionConfig = (section, namespace) => {
  * - Panels wrap when they exceed available width
  * - Sections can sit side-by-side if there's space
  */
-const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequestHandler, schemaData, onValueChange, gridColumnSpan, onSectionSave, hideEditButton = false, mode = 'RegistryView', namespace, }) => {
+const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequestHandler, schemaData, onValueChange, gridColumnSpan, onSectionSave, hideEditButton = false, mode = 'RegistryView', namespace, changeRequestType, showChangeRequestLabel = true, }) => {
     const { translateConfig, translate } = useWidgetTranslation();
     const { schemaData: contextSchemaData, dataSourceRequestHandler: contextDataSourceRequestHandler } = useWidgetContext();
     const store = reactRedux.useStore();
@@ -3811,11 +3845,12 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
           align-items: center;
           gap: 0.5rem;
         }
-      ` }), jsxRuntimeExports.jsxs("div", { ref: sectionRef, className: `section ${sectionClassId} px-4 sm:px-6 lg:px-8 border-2 border-white `, "data-section-id": sectionId, "data-has-table": hasTableWidget ? 'true' : 'false', "data-has-explicit-span": hasExplicitTableSpan ? 'true' : 'false', "data-edit-mode": isEditMode ? 'true' : 'false', "data-column-span": columnSpan, style: {
+      ` }), jsxRuntimeExports.jsxs("div", { ref: sectionRef, className: `section ${sectionClassId} px-4 sm:px-6 lg:px-8 border-2 border-white `, "data-section-id": sectionId, "data-has-table": hasTableWidget ? 'true' : 'false', "data-has-explicit-span": hasExplicitTableSpan ? 'true' : 'false', "data-edit-mode": isEditMode ? 'true' : 'false', "data-column-span": columnSpan, "data-change-request-type": changeRequestType, style: {
                     gridColumn: `span ${columnSpan}`,
                     width: '100%',
                     borderRadius: '10px',
-                    backgroundColor: '#FFFFFF',
+                    backgroundColor: changeRequestType === 'old' ? '#F9F9F9' : '#FFFFFF', // Faded background for old change requests
+                    opacity: changeRequestType === 'old' ? 0.95 : 1, // Slight opacity reduction for old sections
                     ...(isEditMode && sectionHeight ? {
                         height: `${sectionHeight}px`,
                         minHeight: `${sectionHeight}px`
@@ -3824,7 +3859,27 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                         minHeight: 'auto',
                         height: 'auto'
                     }),
-                }, children: [sectionToRender['section-title'] && (jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold mb-4", style: { marginTop: '35px' }, children: translateConfig(sectionToRender['section-title']) })), jsxRuntimeExports.jsxs("div", { id: gridId, className: "section-panels", style: mode === 'RegistryView' && hideEditButton ? { paddingBottom: '40px' } : {}, children: [editableSection.panels.map((panel, index) => (jsxRuntimeExports.jsx("div", { className: "panel-wrapper", children: jsxRuntimeExports.jsx(PanelRenderer, { panel: panel, dataSourceRequestHandler: dataSourceRequestHandler, schemaData: namespacedSchemaData, onValueChange: onValueChange }) }, panel['panel-id'] || `section-panel-${index}`))), mode === 'CRView' && crViewData && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("hr", { className: "border-gray-300 w-full", style: { height: '1px', marginTop: '20px', marginBottom: '0px' } }), jsxRuntimeExports.jsxs("div", { className: "cr-view-container", style: {
+                }, children: [sectionToRender['section-title'] && (jsxRuntimeExports.jsxs("div", { style: {
+                            marginTop: '35px',
+                            marginBottom: '16px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '12px',
+                            flexWrap: 'wrap',
+                        }, children: [jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold", style: { margin: 0 }, children: translateConfig(sectionToRender['section-title']) }), mode === 'CRView' && changeRequestType && showChangeRequestLabel && (jsxRuntimeExports.jsx("span", { style: {
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    padding: '4px 12px',
+                                    borderRadius: '4px',
+                                    fontSize: '12px',
+                                    fontWeight: 600,
+                                    textTransform: 'uppercase',
+                                    letterSpacing: '0.5px',
+                                    backgroundColor: changeRequestType === 'new' ? '#28a745' : '#ffcccc', // Green for new, faded red for old
+                                    color: changeRequestType === 'new' ? '#FFFFFF' : '#cc0000',
+                                    whiteSpace: 'nowrap',
+                                    boxShadow: changeRequestType === 'new' ? '0 2px 4px rgba(40, 167, 69, 0.3)' : 'none',
+                                }, children: changeRequestType === 'new' ? 'New' : 'Old' }))] })), jsxRuntimeExports.jsxs("div", { id: gridId, className: "section-panels", style: mode === 'RegistryView' && hideEditButton ? { paddingBottom: '40px' } : {}, children: [editableSection.panels.map((panel, index) => (jsxRuntimeExports.jsx("div", { className: "panel-wrapper", children: jsxRuntimeExports.jsx(PanelRenderer, { panel: panel, dataSourceRequestHandler: dataSourceRequestHandler, schemaData: namespacedSchemaData, onValueChange: onValueChange }) }, panel['panel-id'] || `section-panel-${index}`))), mode === 'CRView' && crViewData && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("hr", { className: "border-gray-300 w-full", style: { height: '1px', marginTop: '20px', marginBottom: '0px' } }), jsxRuntimeExports.jsxs("div", { className: "cr-view-container", style: {
                                             marginTop: '20px',
                                             paddingBottom: '30px',
                                             display: 'flex',
@@ -7397,8 +7452,41 @@ const CurrencyInputWidget = ({ config }) => {
 const DisplayWidget = ({ config }) => {
     const { value, formattedValue, config: widgetConfig, } = useBaseWidget({ config });
     const { translateConfig } = useWidgetTranslation();
-    // Use formatted value if available, otherwise raw value
-    const displayValue = formattedValue !== undefined ? formattedValue : (value || '');
+    // Helper to safely convert value to display string
+    const getDisplayValue = (val) => {
+        if (val === null || val === undefined) {
+            return '';
+        }
+        // If it's already a string or number, return as string
+        if (typeof val === 'string' || typeof val === 'number') {
+            return String(val);
+        }
+        // If it's an object (like geo hierarchy), try to extract a meaningful value
+        if (typeof val === 'object' && !Array.isArray(val)) {
+            // For geo hierarchy objects, try to extract the actual value
+            if ('geo_lowest_level_value_id' in val) {
+                return String(val.geo_lowest_level_value_id || '');
+            }
+            if ('value' in val) {
+                return String(val.value || '');
+            }
+            if ('id' in val) {
+                return String(val.id || '');
+            }
+            // If no extractable value, return empty string to avoid rendering object
+            return '';
+        }
+        // For arrays, join them or return empty
+        if (Array.isArray(val)) {
+            return val.length > 0 ? val.map(String).join(', ') : '';
+        }
+        // Fallback: convert to string
+        return String(val);
+    };
+    // Use formatted value if available, otherwise safely convert raw value
+    const displayValue = formattedValue !== undefined
+        ? (typeof formattedValue === 'object' ? getDisplayValue(formattedValue) : String(formattedValue))
+        : getDisplayValue(value);
     const label = translateConfig(widgetConfig['widget-label']);
     // If no label, render as paragraph text
     if (!label || label.trim() === '') {