@openg2p/registry-widgets 1.1.3 → 1.1.4-dev.1

package/dist/index.js

@@ -2990,6 +2990,15 @@ const extractProfileImage = (records) => {
                 profileImage = value;
                 copy[key] = '';
             }
+            else if (isSerializedFile(value)) {
+                try {
+                    profileImage = deserializeFile(value);
+                    copy[key] = '';
+                }
+                catch (err) {
+                    console.error('Failed to deserialize profile image:', err);
+                }
+            }
         }
         return copy;
     });
@@ -8697,10 +8706,6 @@ const DEFAULT_LABELS = {
     lastApprovedBy: 'Last Approved by',
     lastApprovedAt: 'Last Approved at',
 };
-// Options are loaded in both view and edit modes because view mode
-// needs them to resolve display labels (e.g. "active" → "Active").
-// For API data sources, loading is deferred to edit mode to avoid
-// unnecessary network calls when only labels are needed.
 function useFieldDataSource(fieldKey, fieldConfig, isReadonly) {
     const [options, setOptions] = React.useState([]);
     const { dataSourceRequestHandler, schemaData } = useWidgetContext();
@@ -8804,11 +8809,15 @@ const HeaderSectionWidget = ({ config }) => {
     const imageUrlVal = findValue('imageUrl');
     const [previewUrl, setPreviewUrl] = React.useState(null);
     React.useEffect(() => {
-        if (imageUrlVal instanceof File) {
+        if (isFile(imageUrlVal)) {
             const url = URL.createObjectURL(imageUrlVal);
             setPreviewUrl(url);
             return () => URL.revokeObjectURL(url);
         }
+        if (isSerializedFile(imageUrlVal) && imageUrlVal.data) {
+            setPreviewUrl(`data:${imageUrlVal.type};base64,${imageUrlVal.data}`);
+            return;
+        }
         setPreviewUrl(null);
     }, [imageUrlVal]);
     const displayImageUrl = previewUrl || (typeof imageUrlVal === 'string' && imageUrlVal ? imageUrlVal : null);
@@ -8912,16 +8921,25 @@ const HeaderSectionWidget = ({ config }) => {
     }, [statusValue, statusOptions]);
     const statusColor = statusColors[String(statusValue).toLowerCase()] || 'var(--owt-color-text-muted, #6B7280)';
     const fileInputRef = React.useRef(null);
-    const handleImageUpload = React.useCallback((e) => {
+    const handleImageUpload = React.useCallback(async (e) => {
         const file = e.target.files?.[0];
         if (!file || !paths.imageUrl)
             return;
-        dispatch(setValues(setValueByPath({ ...values }, paths.imageUrl, file)));
-        e.target.value = '';
+        try {
+            const serialized = await serializeFile(file);
+            dispatch(setValues(setValueByPath({ ...values }, paths.imageUrl, serialized)));
+        }
+        catch (err) {
+            console.error('[HeaderSectionWidget] Error serializing image:', err);
+        }
+        finally {
+            e.target.value = '';
+        }
     }, [paths.imageUrl, values, dispatch]);
     const handleImageDelete = React.useCallback(() => {
         if (!paths.imageUrl)
             return;
+        setPreviewUrl(null);
         dispatch(setValues(setValueByPath({ ...values }, paths.imageUrl, null)));
     }, [paths.imageUrl, values, dispatch]);
     const cls = `header-section-widget-${widgetConfig['widget-id']}`;
@@ -10598,6 +10616,33 @@ function buildOrderedLevels(flat) {
     return ordered;
 }
 const GEO_SECTION_COLUMN_SLOTS = 3;
+/**
+ * Suggested panel/widget column span from hierarchy depth:
+ * ≤3 levels → 1, 4–5 → 2, ≥6 → 3.
+ */
+function suggestedGeoColumnSpan(levelCount) {
+    if (levelCount <= 0) {
+        return 1;
+    }
+    if (levelCount <= 3) {
+        return 1;
+    }
+    if (levelCount < 6) {
+        return 2;
+    }
+    return GEO_SECTION_COLUMN_SLOTS;
+}
+/** Clamp span to 1…GEO_SECTION_COLUMN_SLOTS and at most the level count. */
+function resolveGeoColumnSpan(levelCount, explicitSpan) {
+    const preferred = explicitSpan !== undefined && explicitSpan !== null
+        ? explicitSpan
+        : suggestedGeoColumnSpan(levelCount);
+    const clamped = Math.min(GEO_SECTION_COLUMN_SLOTS, Math.max(1, Math.floor(preferred)));
+    if (levelCount <= 0) {
+        return clamped;
+    }
+    return Math.min(clamped, levelCount);
+}
 /** Slice ordered levels into section columns per counts, e.g. [3, 2, 0]. */
 function distributeLevelsToColumns(levels, columnCounts) {
     const columns = columnCounts.map(() => []);
@@ -10628,19 +10673,22 @@ function resolveGeoLevelColumns(levels, layout) {
         const columnCounts = layout.distribution === 'fixed'
             ? padColumnCounts(layout.columns, GEO_SECTION_COLUMN_SLOTS)
             : layout.columns;
+        const columns = distributeLevelsToColumns(levels, columnCounts);
+        const occupied = columns.filter((column) => column.length > 0).length;
         return {
             columnCounts,
-            columns: distributeLevelsToColumns(levels, columnCounts),
+            columns,
+            columnSpan: resolveGeoColumnSpan(levels.length, layout.columnSpan ?? occupied),
         };
     }
-    // Default (no explicit layout): fill top-to-bottom across up to
-    // GEO_SECTION_COLUMN_SLOTS columns, each holding a contiguous block of levels
-    // so the order stays correct when columns stack on small screens.
-    const columnCount = Math.min(GEO_SECTION_COLUMN_SLOTS, Math.max(levels.length, 1));
-    const columns = distributeLevelsContiguous(levels, columnCount);
+    // Distribute top-to-bottom across the allotted column span so order stays
+    // correct when columns stack on small screens.
+    const columnSpan = resolveGeoColumnSpan(levels.length, layout?.columnSpan);
+    const columns = distributeLevelsContiguous(levels, columnSpan);
     return {
         columnCounts: columns.map((column) => column.length),
         columns,
+        columnSpan,
     };
 }
 function padColumnCounts(counts, slotCount) {
@@ -10783,6 +10831,42 @@ function getDeepestSelectedValue(orderedLevels, selectedValues) {
     }
     return deepest;
 }
+/** Build geo_code_hierarchy_json document from current selections (for save payload). */
+function buildHierarchyJson(orderedLevels, selectedValues, options, resolvedLabels = {}) {
+    const hierarchy = [];
+    for (const level of orderedLevels) {
+        const levelValueId = selectedValues[level.level_id];
+        if (!levelValueId) {
+            break;
+        }
+        const optionLabel = options[level.level_id]?.find((item) => item.value === levelValueId)?.label;
+        const mnemonic = optionLabel || resolvedLabels[levelValueId] || levelValueId;
+        hierarchy.push({
+            level_id: level.level_id,
+            level: level.level_mnemonic,
+            level_mnemonic: level.level_mnemonic,
+            level_value_id: levelValueId,
+            level_value_mnemonic: mnemonic,
+        });
+    }
+    if (hierarchy.length === 0) {
+        return null;
+    }
+    return {
+        hierarchy,
+        lowest_level_value_id: hierarchy[hierarchy.length - 1].level_value_id,
+    };
+}
+/** Preserve string vs object storage shape used by the existing hierarchy field. */
+function formatHierarchyForPersist(document, previous) {
+    if (document === null) {
+        return typeof previous === 'string' ? '' : null;
+    }
+    if (typeof previous === 'string') {
+        return JSON.stringify(document);
+    }
+    return document;
+}
 function clearDescendants(orderedLevels, fromIndex, selectedValues, options) {
     const nextSelected = { ...selectedValues };
     const nextOptions = { ...options };
@@ -10858,7 +10942,10 @@ function useGeoHierarchy({ config }) {
     const geoLayout = config['widget-geo-layout'];
     const hierarchyJsonPath = React.useMemo(() => resolveHierarchyPath(config), [config]);
     const dataPath = React.useMemo(() => resolveDataPath(config), [config]);
-    /** Read-only base: geo_code_hierarchy_json is never written — schema first, then store. */
+    /**
+     * Approved hierarchy for hydrate/display: schema first, then store.
+     * Edits persist draft hierarchy into store values for save; schema keeps approved.
+     */
     const baseHierarchyJson = React.useMemo(() => {
         if (!hierarchyJsonPath) {
             return null;
@@ -10958,17 +11045,23 @@ function useGeoHierarchy({ config }) {
         });
         return transformGeoValueOptions(payload);
     }, [fetchRawValues]);
-    /** Write only geo_lowest_level_value_id — never geo_code_hierarchy_json. */
-    const persistDeepestValue = React.useCallback((nextSelectedValues, orderedLevels) => {
+    /** Persist leaf id + current hierarchy structure for save (schema approved value stays preferred for read). */
+    const persistDeepestValue = React.useCallback((nextSelectedValues, orderedLevels, nextOptions, nextResolvedLabels) => {
         if (initializingRef.current || hydratingRef.current || isReadonly) {
             return;
         }
         const deepest = getDeepestSelectedValue(orderedLevels, nextSelectedValues);
         selfPersistedValueRef.current = deepest ? String(deepest) : '';
+        const hierarchyDocument = buildHierarchyJson(orderedLevels, nextSelectedValues, nextOptions, nextResolvedLabels);
+        const hierarchyPayload = formatHierarchyForPersist(hierarchyDocument, baseHierarchyRef.current);
         const rawDataPath = config['widget-data-path'];
         const nextValue = deepest ?? null;
         if (rawDataPath && typeof rawDataPath === 'object') {
-            base.onChange({ value: nextValue });
+            const payload = { value: nextValue };
+            if ('hierarchy' in rawDataPath) {
+                payload.hierarchy = hierarchyPayload;
+            }
+            base.onChange(payload);
         }
         else {
             base.onChange(nextValue);
@@ -11110,9 +11203,7 @@ function useGeoHierarchy({ config }) {
         nextSelectedValues = cleared.selectedValues;
         setSelectedValues(nextSelectedValues);
         setOptions(cleared.options);
-        if (nextValue || Object.values(nextSelectedValues).some((value) => value)) {
-            persistDeepestValue(nextSelectedValues, levels);
-        }
+        persistDeepestValue(nextSelectedValues, levels, cleared.options, resolvedLabels);
         if (!nextValue || levelIndex >= levels.length - 1) {
             return;
         }
@@ -11124,9 +11215,17 @@ function useGeoHierarchy({ config }) {
             const message = error instanceof Error ? error.message : 'Failed to load child geo level values';
             setGeoError(message);
         }
-    }, [isReadonly, levels, selectedValues, options, persistDeepestValue, loadOptionsForLevel]);
+    }, [
+        isReadonly,
+        levels,
+        selectedValues,
+        options,
+        resolvedLabels,
+        persistDeepestValue,
+        loadOptionsForLevel,
+    ]);
     const readonlyPath = React.useMemo(() => buildReadonlyPath(levels, selectedValues, options, resolvedLabels), [levels, selectedValues, options, resolvedLabels]);
-    const { columnCounts, columns: levelColumns } = React.useMemo(() => resolveGeoLevelColumns(levels, geoLayout), [levels, geoLayout]);
+    const { columnCounts, columns: levelColumns, columnSpan } = React.useMemo(() => resolveGeoLevelColumns(levels, geoLayout), [levels, geoLayout]);
     const visibleColumns = React.useMemo(() => {
         const columnIndex = geoLayout?.columnIndex;
         if (columnIndex === undefined || columnIndex === null) {
@@ -11144,6 +11243,7 @@ function useGeoHierarchy({ config }) {
         options,
         resolvedLabels,
         columnCounts,
+        columnSpan,
         visibleColumns,
         loadingLevels,
         loadingLevelId,
@@ -11213,11 +11313,12 @@ const GeoHierarchyWidget = ({ config }) => {
         isLevelEnabled,
         formatLevelLabel,
     };
+    const layoutColumnCount = Math.max(visibleColumns.length, 1);
     const content = visibleColumns.length <= 1 ? (renderLevelRows({
         ...rowProps,
         columnLevels: visibleColumns[0]?.levels ?? levels,
     })) : (jsxRuntimeExports.jsx("div", { className: "flex flex-col lg:grid w-full", style: {
-            gridTemplateColumns: `repeat(${visibleColumns.length}, minmax(200px, 1fr))`,
+            gridTemplateColumns: `repeat(${layoutColumnCount}, minmax(200px, 1fr))`,
         }, children: visibleColumns.map((column, position) => {
             const isLast = position === visibleColumns.length - 1;
             const columnClassName = [
@@ -11345,7 +11446,22 @@ const DocsWidget = ({ config }) => {
                                                 fileInputRefs.current[docKey] = el;
                                             } })] })), hasFile && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: (e) => handlePreview(file, e), className: "inline-flex items-center px-3 py-1 rounded-md border border-gray-300 text-sm font-medium text-gray-900 bg-gray-50 focus:outline-none", title: fileName, children: t?.('common.view') ?? 'View' }), jsxRuntimeExports.jsx("button", { type: "button", onClick: () => handleRemove(docKey), className: "inline-flex items-center px-3 py-1 rounded-md border border-gray-300 text-sm font-medium text-gray-900 bg-gray-50 focus:outline-none", title: "Remove", children: t?.('common.remove') ?? 'Remove' })] }))] }) })] }) }, docKey));
     };
-    return (jsxRuntimeExports.jsxs("div", { className: isReadonly ? 'DocsDisplayWidget mb-[10px]' : 'DocsWidget mb-[10px]', children: [jsxRuntimeExports.jsx("div", { className: "flex flex-col lg:grid gap-x-8 gap-y-0", style: { gridTemplateColumns: `repeat(${docColumns.length || 1}, minmax(0, 1fr))` }, children: docColumns.map((column, columnIndex) => (jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: column.map((doc) => renderSlot(doc)) }, `docs-column-${columnIndex}`))) }), jsxRuntimeExports.jsx(FilePreviewModal, { file: previewFile, isOpen: isPreviewOpen && !!previewFile, onClose: () => {
+    return (jsxRuntimeExports.jsxs("div", { className: isReadonly ? 'DocsDisplayWidget mb-[10px]' : 'DocsWidget mb-[10px]', children: [jsxRuntimeExports.jsx("div", { className: "flex flex-col lg:grid w-full", style: { gridTemplateColumns: `repeat(${docColumns.length || 1}, minmax(0, 1fr))` }, children: docColumns.map((column, columnIndex) => {
+                    const isLast = columnIndex === docColumns.length - 1;
+                    const columnClassName = [
+                        'flex flex-col min-w-0 relative',
+                        columnIndex > 0 ? 'lg:pl-10' : '',
+                        isLast ? '' : 'lg:pr-10',
+                    ]
+                        .filter(Boolean)
+                        .join(' ');
+                    return (jsxRuntimeExports.jsxs("div", { className: columnClassName, children: [!isLast && (jsxRuntimeExports.jsx("div", { className: "hidden lg:block absolute right-0 top-0 w-px", style: {
+                                    bottom: '5px',
+                                    backgroundColor: isReadonly
+                                        ? 'var(--owt-panel-divider-color, #C4C4C4)'
+                                        : 'var(--owt-color-primary, #F5BB1A)',
+                                } })), column.map((doc) => renderSlot(doc))] }, `docs-column-${columnIndex}`));
+                }) }), jsxRuntimeExports.jsx(FilePreviewModal, { file: previewFile, isOpen: isPreviewOpen && !!previewFile, onClose: () => {
                     setIsPreviewOpen(false);
                     setPreviewFile(null);
                 } })] }));