@isi-ui7/bos7-shared 0.2.6 → 0.2.7

package/src/form-renderer.tsx

@@ -12,6 +12,7 @@ import {
   Toggle,
 } from "@carbon/react";
 import { LookupInput } from "@isi-ui7/lookup-input";
+import type { T_LookupTblStruct } from "@isi-ui7/lookup-input";
 import { EditableTable } from "@isi-ui7/editable-table";
 import { useI18n } from "@isi-ui7/i18n";
 import type { Ui7Locale } from "@isi-ui7/i18n";
@@ -91,6 +92,39 @@ function makeDisplayRenderer(
       }
       return value ? labels.toggleOn : labels.toggleOff;
     }
+    if (field.type === "select") {
+      // Resolve the option label so read-only mode shows "Active" rather than
+      // the stored code "active". Falls back to the raw value when no option
+      // matches (e.g. a legacy value no longer in the options list).
+      const match = (field.options ?? []).find((o) => String(o.value) === asString(value));
+      if (match) return match.label;
+      return asString(value) || labels.emptyValue;
+    }
+    if (field.type === "date") {
+      const raw = asString(value);
+      if (!raw) return labels.emptyValue;
+      const d = new Date(raw);
+      if (Number.isNaN(d.getTime())) return raw;
+      const nloc = locale === "en" ? "en-GB" : "id-ID";
+      return new Intl.DateTimeFormat(nloc, { day: "2-digit", month: "short", year: "numeric" }).format(d);
+    }
+    if (field.type === "datetime") {
+      // ISO timestamp → locale-aware "18 Jun 2026, 10:23" (24h). Echoes the
+      // raw value if unparseable. Edit mode falls through to a text input.
+      const raw = asString(value);
+      if (!raw) return labels.emptyValue;
+      const d = new Date(raw);
+      if (Number.isNaN(d.getTime())) return raw;
+      const nloc = locale === "en" ? "en-GB" : "id-ID";
+      return new Intl.DateTimeFormat(nloc, {
+        day: "2-digit",
+        month: "short",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+      }).format(d);
+    }
     if (field.type === "lookup") {
       // View/read-only mode mirrors the LookupInput initialDisplay logic:
       // when initialDisplayFields is set and all referenced FormData
@@ -338,7 +372,6 @@ function NumericField({
       size={size}
       disabled={disabled}
       inputMode={numericKind === "integer" ? "numeric" : "decimal"}
-      light
       invalid={invalid}
       invalidText={invalidText}
       placeholder={placeholder}
@@ -461,7 +494,10 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
             style={{
               padding: "1rem 1.125rem",
               border: "1px solid var(--cds-border-subtle, #e0e0e0)",
-              background: "var(--cds-layer-01, #ffffff)",
+              // Section sits flat on the page background (white) and is set
+              // apart by its border line only — fields carry the contrasting
+              // fill instead (see read-only box + non-light Carbon inputs).
+              background: "var(--cds-background, #ffffff)",
             }}
           >
             {showSectionHeader && (section.title || section.description) ? (
@@ -570,7 +606,40 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                           newRowFactory={detail.newRowFactory}
                           maxRows={detail.maxRows}
                           readOnly={effectiveReadonly}
+                          lockExistingRows={detail.lockExistingRows}
                           validateRow={detail.validateRow}
+                          lookupCellRenderer={(args) => {
+                            const ct = args.column.columnType;
+                            if (ct.type !== "lookup") return null;
+                            let initialDisplay: string | undefined;
+                            if (ct.initialDisplayFields?.length) {
+                              const sep = ct.initialDisplaySeparator ?? " ";
+                              const parts = ct.initialDisplayFields.map((k) => asString(args.row[k]));
+                              if (parts.every((p) => p !== "")) initialDisplay = parts.join(sep);
+                            }
+                            return (
+                              <LookupInput
+                                id={`et-${String(field.key)}-${args.rowIndex}-${args.column.field}`}
+                                labelText=""
+                                value={args.value}
+                                initialDisplay={initialDisplay}
+                                onChange={() => {}}
+                                onDataSelected={(picked: Record<string, unknown>) => {
+                                  const patch = ct.patch
+                                    ? ct.patch(picked)
+                                    : { [args.column.field]: asString(picked[args.column.field]) };
+                                  args.onPatch(patch);
+                                }}
+                                dataSource="api"
+                                lookupAPI={ct.lookupAPI}
+                                lookupDataStructure={ct.lookupDataStructure as Record<string, T_LookupTblStruct>}
+                                lookupFieldTitles={ct.lookupFieldTitles ?? {}}
+                                displayFieldNames={ct.displayFieldNames ?? []}
+                                popupWidthPx={ct.popupWidthPx}
+                                readOnly={args.readOnly}
+                              />
+                            );
+                          }}
                         />
                       </FieldShell>
                     </div>,
@@ -585,12 +654,18 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                         <div
                           className={`${UI7_FORM_VISUAL_CLASSNAMES.control} ${UI7_FORM_VISUAL_CLASSNAMES.controlReadonly}`}
                           style={{
-                            minHeight: UI7_FORM_VISUAL_TOKENS.controlHeight,
+                            // Match the editable control height for the active
+                            // density (compact = 2rem) so read-only fields line
+                            // up with create/edit inputs instead of being 40px.
+                            minHeight: dt.controlHeight,
                             display: "flex",
                             alignItems: "center",
                             fontSize: UI7_FORM_VISUAL_TOKENS.inputFontSize,
                             lineHeight: UI7_FORM_VISUAL_TOKENS.inputLineHeight,
                             background: "var(--ui7-form-readonly-background, #f4f4f4)",
+                            // No bottom rule for non-editable fields — the gray
+                            // fill alone sets them apart from the white section;
+                            // an input-style underline would imply editability.
                             cursor: "var(--ui7-form-readonly-cursor, default)",
                             width: "100%",
                             padding: "0 0.75rem",
@@ -695,7 +770,6 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                         value={asString(rawValue)}
                         onChange={(e) => setValue(field.key, e.target.value as TData[keyof TData])}
                         disabled={disabled}
-                        light
                         invalid={Boolean(invalidText)}
                         invalidText={invalidText}
                       >
@@ -873,7 +947,6 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                         disabled={disabled}
                         maxLength={field.maxLength}
                         inputMode="tel"
-                        light
                         invalid={Boolean(invalidText)}
                         invalidText={invalidText}
                         placeholder={field.placeholder}
@@ -897,7 +970,6 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                       disabled={disabled}
                       maxLength={field.maxLength}
                       inputMode={field.inputMode}
-                      light
                       invalid={Boolean(invalidText)}
                       invalidText={invalidText}
                       placeholder={field.placeholder}

package/src/form-types.ts

@@ -31,11 +31,17 @@ export type FieldValidation<TData extends Record<string, unknown>> = {
 // ── Field ─────────────────────────────────────────────────────────────────────
 
 export type FormFieldType =
-  | "text" | "textarea" | "number" | "date"
+  | "text" | "textarea" | "number" | "date" | "datetime"
   | "select" | "lookup" | "checkbox" | "toggle"
   | "detail-rows";
 
-export type FormFieldOption = { value: string; label: string };
+/**
+ * Select option. `value` may be a number for numeric-coded columns (e.g.
+ * kolektibilitas 1–5); the renderer compares via `String(value)` and the
+ * native `<select>` still round-trips strings, so `format`/`onDataPatch`
+ * should not assume the runtime type survives an edit.
+ */
+export type FormFieldOption = { value: string | number; label: string };
 
 export type FormFieldLookupConfig<TData extends Record<string, unknown>> = {
   lookupAPI: string;
@@ -98,6 +104,13 @@ export type DetailRowsConfig = {
     index: number,
   ) => Record<string, string>;
   maxRows?: number;
+  /**
+   * Assignment/master-detail mode: rows loaded from the server render
+   * delete-only (read-only cells, no lookup picker) while rows added in the
+   * current session stay editable. Defaults to `false` (normal edit-in-place).
+   * Forwarded to `<EditableTable lockExistingRows>`.
+   */
+  lockExistingRows?: boolean;
 };
 
 export type FormField<TData extends Record<string, unknown>> = {

package/src/form-value-schema.ts

@@ -250,7 +250,12 @@ function buildColumnType(schema: JSONSchema, xui: XUi | undefined, t: T): Editab
     return { type: "number", min: schema.minimum, max: schema.maximum };
   }
   if (type === "select") {
-    return { type: "select", options: buildOptions(schema, xui, t) ?? [] };
+    // EditableTable select options are value:string only — coerce, since
+    // FormFieldOption.value may be a number.
+    return {
+      type: "select",
+      options: (buildOptions(schema, xui, t) ?? []).map((o) => ({ value: String(o.value), label: o.label })),
+    };
   }
   if (type === "date") return { type: "date" };
   return { type: "text", maxLength: schema.maxLength, placeholder: xui?.placeholder };

package/src/shell/app-shell-layout.tsx

@@ -100,7 +100,7 @@ export interface AppShellLayoutProps {
   notificationsViewAllTarget?: string;
   hideMenuButton?: boolean;
   disableAppsMenu?: boolean;
-  sideNavMode?: "drilldown" | "overlay";
+  sideNavMode?: "drilldown" | "overlay" | "expand";
   sideNavItems?: ShellNavItemLike[];
 }
 
@@ -364,7 +364,7 @@ function ShellInner({
   notificationsViewAllTarget: string;
   hideMenuButton: boolean;
   disableAppsMenu: boolean;
-  sideNavMode: "drilldown" | "overlay";
+  sideNavMode: "drilldown" | "overlay" | "expand";
   sideNavItems: ShellNavItemLike[];
   notifBadgeCount: number;
   userName?: string | null;