@openg2p/registry-widgets 0.1.4 → 0.1.5

package/dist/components/SectionRenderer.d.ts

@@ -16,6 +16,8 @@ export interface SectionRendererProps {
     hideEditButton?: boolean;
     mode?: SectionMode;
     namespace?: string;
+    changeRequestType?: 'new' | 'old';
+    showChangeRequestLabel?: boolean;
 }
 /**
  * Renders a section with its panels
@@ -25,5 +27,5 @@ export interface SectionRendererProps {
  * - Panels wrap when they exceed available width
  * - Sections can sit side-by-side if there's space
  */
-export declare const SectionRenderer: ({ section, dataSourceRequestHandler: propDataSourceRequestHandler, schemaData, onValueChange, gridColumnSpan, onSectionSave, hideEditButton, mode, namespace, }: SectionRendererProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SectionRenderer: ({ section, dataSourceRequestHandler: propDataSourceRequestHandler, schemaData, onValueChange, gridColumnSpan, onSectionSave, hideEditButton, mode, namespace, changeRequestType, showChangeRequestLabel, }: SectionRendererProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SectionRenderer.d.ts.map

package/dist/components/SectionRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionRenderer.d.ts","sourceRoot":"","sources":["../../src/components/SectionRenderer.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAyC,MAAM,UAAU,CAAC;AAChF,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAM9D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAIlD,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,aAAa,CAAC;IACvB,wBAAwB,CAAC,EAAE,oBAAoB,CAAC,0BAA0B,CAAC,CAAC;IAC5E,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAChD,aAAa,CAAC,EAAE,oBAAoB,CAAC,eAAe,CAAC,CAAC;IACtD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAClE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CAEpB;AAGD;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAAI,iKAU7B,oBAAoB,4CA07BtB,CAAC"}
+{"version":3,"file":"SectionRenderer.d.ts","sourceRoot":"","sources":["../../src/components/SectionRenderer.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAyC,MAAM,UAAU,CAAC;AAChF,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAM9D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAIlD,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,aAAa,CAAC;IACvB,wBAAwB,CAAC,EAAE,oBAAoB,CAAC,0BAA0B,CAAC,CAAC;IAC5E,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAChD,aAAa,CAAC,EAAE,oBAAoB,CAAC,eAAe,CAAC,CAAC;IACtD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAClE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAClC,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAElC;AAGD;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAAI,4MAY7B,oBAAoB,4CA69BtB,CAAC"}

package/dist/components/WidgetRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetRenderer.d.ts","sourceRoot":"","sources":["../../src/components/WidgetRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAsB,MAAM,UAAU,CAAC;AAChE,OAAO,EAAiB,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAO7E,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,QAAQ,CAAC;IAC/E,MAAM,EAAE,gBAAgB,CAAC;IACzB,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;CAC7C;AAED,eAAO,MAAM,cAAc,GAAI,kIAM5B,mBAAmB,mDAoDrB,CAAC"}
+{"version":3,"file":"WidgetRenderer.d.ts","sourceRoot":"","sources":["../../src/components/WidgetRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAsB,MAAM,UAAU,CAAC;AAChE,OAAO,EAAiB,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAO7E,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,QAAQ,CAAC;IAC/E,MAAM,EAAE,gBAAgB,CAAC;IACzB,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;CAC7C;AAED,eAAO,MAAM,cAAc,GAAI,kIAM5B,mBAAmB,mDAyDrB,CAAC"}

package/dist/hooks/useBaseWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBaseWidget.d.ts","sourceRoot":"","sources":["../../src/hooks/useBaseWidget.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAetE,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,gBAAgB,CAAC;IACzB,wBAAwB,CAAC,EAAE,wBAAwB,CAAC;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACxD;AAMD,eAAO,MAAM,aAAa,GAAI,SAAS,oBAAoB;;;;;;;;;yBAiG5C,GAAG,aAAY,OAAO;;uBA0Qd,MAAM,EAAE;;;;;;;0BAtKpB,MAAM;;;CA2KhB,CAAC"}
+{"version":3,"file":"useBaseWidget.d.ts","sourceRoot":"","sources":["../../src/hooks/useBaseWidget.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAetE,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,gBAAgB,CAAC;IACzB,wBAAwB,CAAC,EAAE,wBAAwB,CAAC;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACxD;AAMD,eAAO,MAAM,aAAa,GAAI,SAAS,oBAAoB;;;;;;;;;yBAwI5C,GAAG,aAAY,OAAO;;uBA0Qd,MAAM,EAAE;;;;;;;0BAtKpB,MAAM;;;CA2KhB,CAAC"}

package/dist/index.d.ts

@@ -543,6 +543,8 @@ interface SectionRendererProps {
     hideEditButton?: boolean;
     mode?: SectionMode;
     namespace?: string;
+    changeRequestType?: 'new' | 'old';
+    showChangeRequestLabel?: boolean;
 }
 /**
  * Renders a section with its panels
@@ -552,7 +554,7 @@ interface SectionRendererProps {
  * - Panels wrap when they exceed available width
  * - Sections can sit side-by-side if there's space
  */
-declare const SectionRenderer: ({ section, dataSourceRequestHandler: propDataSourceRequestHandler, schemaData, onValueChange, gridColumnSpan, onSectionSave, hideEditButton, mode, namespace, }: SectionRendererProps) => react_jsx_runtime.JSX.Element;
+declare const SectionRenderer: ({ section, dataSourceRequestHandler: propDataSourceRequestHandler, schemaData, onValueChange, gridColumnSpan, onSectionSave, hideEditButton, mode, namespace, changeRequestType, showChangeRequestLabel, }: SectionRendererProps) => react_jsx_runtime.JSX.Element;
 
 interface SectionBuilderProps {
     initialSection?: SectionConfig;

package/dist/index.esm.js

@@ -950,32 +950,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
@@ -2245,7 +2276,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(Provider, { store: widgetStore, children: jsxRuntimeExports.jsx(WidgetContext.Provider, { value: contextValue, children: jsxRuntimeExports.jsx(WidgetEventBusContext.Provider, { value: eventBus, children: children }) }) }));
     return content;
 };
@@ -2255,8 +2286,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 = useSelector((state) => state.widget.values);
@@ -3192,7 +3226,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 = useStore();
@@ -3810,11 +3844,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`
@@ -3823,7 +3858,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',
@@ -7396,8 +7451,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() === '') {