@isi-ui7/bos7-shared 0.2.6 → 0.2.8

package/dist/crud-types.d.ts

@@ -63,6 +63,8 @@ export type CrudListSchema = {
     showSort?: boolean;
     /** Enable search bar. Defaults to true. */
     showSearch?: boolean;
+    /** Endpoint for LookupInput (defaults to apiPath if omitted). In Pattern B both DataTable and LookupInput share the same /query endpoint. */
+    lookupApiPath?: string;
     /**
      * Level 2: schema-driven confirmation modals for custom popup actions.
      * Keyed by popup menu item id. Actions not listed here fall through to onCustomAction (Level 1).

package/dist/form-types.d.ts

@@ -19,9 +19,15 @@ export type FieldValidation<TData extends Record<string, unknown>> = {
     /** Array of validators — compose Rules.* or custom functions. Runs after built-in rules. */
     validators?: FieldValidatorFn<TData>[];
 };
-export type FormFieldType = "text" | "textarea" | "number" | "date" | "select" | "lookup" | "checkbox" | "toggle" | "detail-rows";
+export type FormFieldType = "text" | "textarea" | "number" | "date" | "datetime" | "select" | "lookup" | "checkbox" | "toggle" | "detail-rows";
+/**
+ * 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;
+    value: string | number;
     label: string;
 };
 export type FormFieldLookupConfig<TData extends Record<string, unknown>> = {
@@ -90,6 +96,13 @@ export type DetailRowsConfig = {
     newRowFactory: () => Record<string, unknown>;
     validateRow?: (row: Record<string, unknown>, 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>> = {
     key: keyof TData;

package/dist/index.js

@@ -20872,7 +20872,10 @@ function Nx(e, t, r) {
   return (a == null ? void 0 : a.kind) === "currency" ? {
     type: "currency",
     precision: a.defaultPrecision ?? qa.defaultPrecision
-  } : (a == null ? void 0 : a.kind) === "percent" ? { type: "number", decimals: a.maxFractionDigits ?? 2, min: e.minimum, max: e.maximum } : (a == null ? void 0 : a.kind) === "integer" || e.type === "integer" ? { type: "number", decimals: 0, min: e.minimum, max: e.maximum } : n === "number" ? { type: "number", min: e.minimum, max: e.maximum } : n === "select" ? { type: "select", options: mc(e, t, r) ?? [] } : n === "date" ? { type: "date" } : { type: "text", maxLength: e.maxLength, placeholder: t == null ? void 0 : t.placeholder };
+  } : (a == null ? void 0 : a.kind) === "percent" ? { type: "number", decimals: a.maxFractionDigits ?? 2, min: e.minimum, max: e.maximum } : (a == null ? void 0 : a.kind) === "integer" || e.type === "integer" ? { type: "number", decimals: 0, min: e.minimum, max: e.maximum } : n === "number" ? { type: "number", min: e.minimum, max: e.maximum } : n === "select" ? {
+    type: "select",
+    options: (mc(e, t, r) ?? []).map((i) => ({ value: String(i.value), label: i.label }))
+  } : n === "date" ? { type: "date" } : { type: "text", maxLength: e.maxLength, placeholder: t == null ? void 0 : t.placeholder };
 }
 function Ix(e, t) {
   const r = e.items;

package/dist/shell/app-shell-layout.d.ts

@@ -78,7 +78,7 @@ export interface AppShellLayoutProps {
     notificationsViewAllTarget?: string;
     hideMenuButton?: boolean;
     disableAppsMenu?: boolean;
-    sideNavMode?: "drilldown" | "overlay";
+    sideNavMode?: "drilldown" | "overlay" | "expand";
     sideNavItems?: ShellNavItemLike[];
 }
 export declare function AppShellLayout({ children, deps, navItems, markActive, appNameFallback, auth7UiUrlFallback, portalUrlFallback, roleFallback, appSwitchMode, resolveNotificationHref, notificationsViewAllHref, notificationsViewAllTarget, hideMenuButton, disableAppsMenu, sideNavMode, sideNavItems, }: AppShellLayoutProps): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isi-ui7/bos7-shared",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "Shared auth7 and layout primitives for bos7 applications.",
   "license": "MIT",
   "repository": {
@@ -99,14 +99,14 @@
     "next": "16.1.1",
     "@carbon/react": "^1.97.0",
     "@carbon/icons-react": "^11.71.0",
-    "@isi-ui7/i18n": "0.2.0",
     "@isi-ui7/corporate-themes": "0.2.4",
     "@isi-ui7/ui-shell": "0.2.4",
-    "@isi-ui7/modal-manager": "0.2.1",
-    "@isi-ui7/realtime": "0.2.2",
-    "@isi-ui7/data-table": "0.2.2",
-    "@isi-ui7/lookup-input": "0.2.2",
-    "@isi-ui7/editable-table": "0.2.2"
+    "@isi-ui7/i18n": "0.2.1",
+    "@isi-ui7/modal-manager": "0.2.2",
+    "@isi-ui7/realtime": "0.2.3",
+    "@isi-ui7/data-table": "0.2.3",
+    "@isi-ui7/lookup-input": "0.2.3",
+    "@isi-ui7/editable-table": "0.2.3"
   },
   "dependencies": {
     "@carbon/icons-react": "^11.71.0",
@@ -119,9 +119,9 @@
     "@opentelemetry/sdk-node": "^0.57.0",
     "@opentelemetry/exporter-trace-otlp-http": "^0.57.0",
     "@opentelemetry/auto-instrumentations-node": "^0.57.0",
-    "@isi-ui7/data-table": "0.2.2",
-    "@isi-ui7/lookup-input": "0.2.2",
-    "@isi-ui7/editable-table": "0.2.2"
+    "@isi-ui7/data-table": "0.2.3",
+    "@isi-ui7/lookup-input": "0.2.3",
+    "@isi-ui7/editable-table": "0.2.3"
   },
   "scripts": {
     "build": "vite build",

package/src/crud-types.ts

@@ -44,6 +44,8 @@ export type CrudListSchema = {
   showSort?: boolean;
   /** Enable search bar. Defaults to true. */
   showSearch?: boolean;
+  /** Endpoint for LookupInput (defaults to apiPath if omitted). In Pattern B both DataTable and LookupInput share the same /query endpoint. */
+  lookupApiPath?: string;
   /**
    * Level 2: schema-driven confirmation modals for custom popup actions.
    * Keyed by popup menu item id. Actions not listed here fall through to onCustomAction (Level 1).

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;