@djangocfg/ui-tools 2.1.320 → 2.1.322

package/src/tools/JsonForm/templates/ObjectFieldTemplate.tsx

@@ -1,12 +1,14 @@
 "use client"
 
-import { ChevronDown } from 'lucide-react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
 import React, { useState } from 'react';
 
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 import { ObjectFieldTemplateProps } from '@rjsf/utils';
 
+import type { JsonFormDensity, UiGroup } from '../types';
+
 /**
  * Object field template for JSON Schema Form
  *
@@ -34,12 +36,16 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
     required,
     uiSchema,
   } = props;
+  const formContext = (props as { formContext?: { density?: JsonFormDensity } }).formContext;
 
   // UI options
   const isCollapsible = uiSchema?.['ui:collapsible'] === true;
   const defaultCollapsed = uiSchema?.['ui:collapsed'] === true;
   const gridCols = uiSchema?.['ui:grid'] as number | undefined;
   const className = uiSchema?.['ui:className'] as string | undefined;
+  const uiGroups = uiSchema?.['ui:groups'] as readonly UiGroup[] | undefined;
+  const density = (formContext?.density as JsonFormDensity | undefined) ?? 'comfortable';
+  const compact = density === 'compact';
 
   // Collapsible state
   const [isOpen, setIsOpen] = useState(!defaultCollapsed);
@@ -50,10 +56,18 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
   // Grid class based on columns
   const gridClass = gridCols
     ? `grid gap-4 grid-cols-${gridCols}`
-    : 'space-y-4';
+    : compact
+      ? 'space-y-2'
+      : 'space-y-4';
+
+  // When `ui:groups` is specified, render listed fields inside collapsible
+  // sub-sections; remaining (ungrouped) fields render flat above the groups.
+  const groupedContent = uiGroups
+    ? renderUiGroups({ properties, uiGroups, gridClass, className, compact })
+    : null;
 
   // Content wrapper
-  const content = (
+  const content = groupedContent ?? (
     <div className={cn(gridClass, className)}>
       {properties.map((element) => (
         <div key={element.name} className="property-wrapper">
@@ -114,3 +128,96 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
     </div>
   );
 }
+
+interface RenderUiGroupsOptions {
+  properties: ObjectFieldTemplateProps['properties'];
+  uiGroups: readonly UiGroup[];
+  gridClass: string;
+  className?: string;
+  compact: boolean;
+}
+
+function renderUiGroups({
+  properties,
+  uiGroups,
+  gridClass,
+  className,
+  compact,
+}: RenderUiGroupsOptions) {
+  const propsByName = new Map(properties.map((p) => [p.name, p]));
+  const groupedFieldNames = new Set(uiGroups.flatMap((g) => g.fields));
+  // Fields not listed in any group render flat above the groups.
+  const ungrouped = properties.filter((p) => !groupedFieldNames.has(p.name));
+
+  return (
+    <div className={cn(compact ? 'space-y-2' : 'space-y-3', className)}>
+      {ungrouped.length > 0 ? (
+        <div className={gridClass}>
+          {ungrouped.map((element) => (
+            <div key={element.name} className="property-wrapper">
+              {element.content}
+            </div>
+          ))}
+        </div>
+      ) : null}
+
+      {uiGroups.map((group) => {
+        const groupProps = group.fields
+          .map((name) => propsByName.get(name))
+          .filter((p): p is ObjectFieldTemplateProps['properties'][number] => Boolean(p));
+        if (groupProps.length === 0) return null;
+        return (
+          <UiGroupSection
+            key={group.title}
+            group={group}
+            gridClass={gridClass}
+            compact={compact}
+          >
+            {groupProps.map((element) => (
+              <div key={element.name} className="property-wrapper">
+                {element.content}
+              </div>
+            ))}
+          </UiGroupSection>
+        );
+      })}
+    </div>
+  );
+}
+
+interface UiGroupSectionProps {
+  group: UiGroup;
+  gridClass: string;
+  compact: boolean;
+  children: React.ReactNode;
+}
+
+function UiGroupSection({ group, gridClass, compact, children }: UiGroupSectionProps) {
+  const [open, setOpen] = useState(group.defaultOpen ?? true);
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <CollapsibleTrigger
+        className={cn(
+          'flex w-full items-center gap-1.5 py-1 transition-colors hover:text-foreground',
+          compact
+            ? 'text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70'
+            : 'text-xs font-semibold uppercase tracking-wide text-muted-foreground',
+        )}
+      >
+        <ChevronRight
+          className={cn(
+            'h-3 w-3 shrink-0 transition-transform duration-200',
+            open && 'rotate-90',
+          )}
+          aria-hidden
+        />
+        <span>{group.title}</span>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
+        <div className={cn('border-l border-border/40 pl-3 pb-2 pt-1', gridClass)}>
+          {children}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

package/src/tools/JsonForm/types.ts

@@ -1,15 +1,44 @@
 import type { RJSFSchema, UiSchema } from '@rjsf/utils';
 import type { IChangeEvent, FormProps } from '@rjsf/core';
+import type {
+  CustomJsonSchema7,
+  CustomJsonUiSchema7,
+  CustomJsonUiDisabledWhenRule,
+  CustomJsonUiGroup,
+} from '@djangocfg/ui-core/lib';
+
+/** Visual density for form controls. */
+export type JsonFormDensity = 'comfortable' | 'compact';
+
+/**
+ * Aliases that point to the portable schema types in `@djangocfg/ui-core/lib`.
+ * Kept under their old short names for back-compat — new code can import the
+ * `CustomJson*` originals directly from ui-core.
+ */
+export type DisabledWhenRule = CustomJsonUiDisabledWhenRule;
+export type UiGroup = CustomJsonUiGroup;
+
+/** What we put into RJSF's `formContext` so widgets/templates can react to global form state. */
+export interface JsonFormContext {
+  density: JsonFormDensity;
+  /** Latest form data — used by `evaluateDisabledWhen`. */
+  formData: unknown;
+}
 
 /**
  * JSON Schema Form props interface
  */
-export interface JsonSchemaFormProps<T = any> extends Partial<FormProps<T>> {
-  /** JSON Schema that defines the form structure */
-  schema: RJSFSchema;
+export interface JsonSchemaFormProps<T = any>
+  extends Omit<Partial<FormProps<T>>, 'schema' | 'uiSchema'> {
+  /**
+   * JSON Schema that defines the form structure. Accepts either RJSF's
+   * `RJSFSchema` directly or our portable `CustomJsonSchema7` from
+   * `@djangocfg/ui-core/lib` — both are cast to RJSF internally.
+   */
+  schema: RJSFSchema | CustomJsonSchema7;
 
-  /** UI Schema for customizing the form appearance */
-  uiSchema?: UiSchema;
+  /** UI Schema for customizing the form appearance. Same dual-shape acceptance as `schema`. */
+  uiSchema?: UiSchema | CustomJsonUiSchema7;
 
   /** Initial form data */
   formData?: T;
@@ -43,6 +72,9 @@ export interface JsonSchemaFormProps<T = any> extends Partial<FormProps<T>> {
 
   /** Submit button text */
   submitButtonText?: string;
+
+  /** Visual density preset. `'compact'` shrinks rows and hides description text (moves it to label `title=` tooltip). */
+  density?: JsonFormDensity;
 }
 
 /**

package/src/tools/JsonForm/utils.ts

@@ -212,3 +212,28 @@ export function validateRequiredFields(
 function getNestedValue(obj: any, path: string): any {
   return path.split('.').reduce((current, key) => current?.[key], obj);
 }
+
+import type { DisabledWhenRule } from './types';
+
+/**
+ * Evaluates a `ui:disabledWhen` rule against form data. Returns `true` when the
+ * field should be disabled. If `rule` is undefined, returns `false`.
+ *
+ * Supported rule shapes:
+ *   { path, eq } | { path, notEq } | { path, in } | { path, notIn }
+ *   | { path, truthy: true } | { path, falsy: true }
+ */
+export function evaluateDisabledWhen(
+  rule: DisabledWhenRule | undefined,
+  formData: unknown,
+): boolean {
+  if (!rule) return false;
+  const value = getNestedValue(formData, rule.path);
+  if ('eq' in rule) return value === rule.eq;
+  if ('notEq' in rule) return value !== rule.notEq;
+  if ('in' in rule) return rule.in.includes(value);
+  if ('notIn' in rule) return !rule.notIn.includes(value);
+  if ('truthy' in rule) return Boolean(value);
+  if ('falsy' in rule) return !value;
+  return false;
+}

package/src/tools/JsonForm/widgets/CheckboxWidget.tsx

@@ -3,21 +3,15 @@ import React from 'react';
 import { Checkbox } from '@djangocfg/ui-core/components';
 import { WidgetProps } from '@rjsf/utils';
 
+import { useWidgetEnv } from './_useWidgetEnv';
+
 /**
  * Checkbox widget for JSON Schema Form
  * Handles boolean fields
  */
 export function CheckboxWidget(props: WidgetProps) {
-  const {
-    id,
-    value,
-    disabled,
-    readonly,
-    autofocus,
-    onChange,
-    onBlur,
-    onFocus,
-  } = props;
+  const { id, value, autofocus, onChange, onBlur, onFocus } = props;
+  const { disabled, tooltipText } = useWidgetEnv(props);
 
   const handleChange = (checked: boolean) => {
     onChange(checked);
@@ -27,11 +21,12 @@ export function CheckboxWidget(props: WidgetProps) {
     <Checkbox
       id={id}
       checked={value || false}
-      disabled={disabled || readonly}
+      disabled={disabled}
       autoFocus={autofocus}
       onCheckedChange={handleChange}
       onBlur={() => onBlur(id, value)}
       onFocus={() => onFocus(id, value)}
+      title={tooltipText}
     />
   );
 }

package/src/tools/JsonForm/widgets/SelectWidget.tsx

@@ -7,6 +7,8 @@ import {
 } from '@djangocfg/ui-core/components';
 import { WidgetProps } from '@rjsf/utils';
 
+import { useWidgetEnv } from './_useWidgetEnv';
+
 /**
  * Select dropdown widget for JSON Schema Form
  * Handles enum fields
@@ -17,8 +19,6 @@ export function SelectWidget(props: WidgetProps) {
     options,
     value,
     required,
-    disabled,
-    readonly,
     autofocus,
     onChange,
     onBlur,
@@ -26,6 +26,7 @@ export function SelectWidget(props: WidgetProps) {
     placeholder,
     rawErrors,
   } = props;
+  const { disabled, compact, tooltipText } = useWidgetEnv(props);
 
   // Safely extract and validate enum options
   const enumOptions = useMemo(() => {
@@ -38,7 +39,9 @@ export function SelectWidget(props: WidgetProps) {
     return rawErrors && rawErrors.length > 0;
   }, [rawErrors]);
 
-  // Ensure value is always a string
+  // Empty-string enum values are handled by the ui-core <Select> wrapper
+  // (which substitutes a Radix-safe sentinel internally), so we can pass
+  // values through verbatim here.
   const safeValue = useMemo(() => {
     if (value === null || value === undefined) return '';
     return String(value);
@@ -60,8 +63,9 @@ export function SelectWidget(props: WidgetProps) {
         onChange={(e) => onChange(e.target.value)}
         onBlur={(e) => onBlur(id, e.target.value)}
         onFocus={(e) => onFocus(id, e.target.value)}
-        disabled={disabled || readonly}
-        readOnly={readonly}
+        disabled={disabled}
+        readOnly={disabled}
+        title={tooltipText}
         className={`flex h-10 w-full rounded-md border ${
           hasError ? 'border-destructive' : 'border-input'
         } bg-transparent px-3 py-2 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm`}
@@ -74,23 +78,27 @@ export function SelectWidget(props: WidgetProps) {
     <Select
       value={safeValue}
       onValueChange={handleChange}
-      disabled={disabled || readonly}
+      disabled={disabled}
       required={required}
     >
       <SelectTrigger
         id={id}
-        className={hasError ? 'border-destructive' : ''}
+        className={`${hasError ? 'border-destructive' : ''} ${compact ? 'h-7 text-xs' : ''}`.trim()}
         autoFocus={autofocus}
         onFocus={() => onFocus(id, value)}
+        title={tooltipText}
       >
         <SelectValue placeholder={placeholder || 'Select an option'} />
       </SelectTrigger>
       <SelectContent>
-        {enumOptions.map((option: any) => (
-          <SelectItem key={String(option.value)} value={String(option.value)}>
-            {option.label || String(option.value)}
-          </SelectItem>
-        ))}
+        {enumOptions.map((option: any) => {
+          const optValue = String(option.value);
+          return (
+            <SelectItem key={optValue || '__empty__'} value={optValue}>
+              {option.label || optValue}
+            </SelectItem>
+          );
+        })}
       </SelectContent>
     </Select>
   );

package/src/tools/JsonForm/widgets/SliderWidget.tsx

@@ -6,6 +6,8 @@ import { Input, Slider } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 import { WidgetProps } from '@rjsf/utils';
 
+import { useWidgetEnv } from './_useWidgetEnv';
+
 /**
  * Slider widget for JSON Schema Form
  *
@@ -33,14 +35,13 @@ import { WidgetProps } from '@rjsf/utils';
 export function SliderWidget(props: WidgetProps) {
   const {
     id,
-    disabled,
-    readonly,
     value,
     onChange,
     schema,
     options,
     rawErrors,
   } = props;
+  const { disabled, tooltipText } = useWidgetEnv(props);
 
   // Extract configuration
   const config = useMemo(() => {
@@ -112,11 +113,14 @@ export function SliderWidget(props: WidgetProps) {
   }, [numericValue, config.unit]);
 
   return (
-    <div className={cn('flex items-center gap-3', hasError && 'text-destructive')}>
+    <div
+      className={cn('flex items-center gap-3', hasError && 'text-destructive')}
+      title={tooltipText}
+    >
       {/* Slider */}
       <Slider
         id={id}
-        disabled={disabled || readonly}
+        disabled={disabled}
         value={[numericValue]}
         onValueChange={handleSliderChange}
         min={config.min}
@@ -132,7 +136,7 @@ export function SliderWidget(props: WidgetProps) {
           value={displayValue}
           onChange={handleInputChange}
           disabled={disabled}
-          readOnly={readonly}
+          readOnly={disabled}
           className={cn(
             'w-20 text-center font-mono text-sm',
             hasError && 'border-destructive'

package/src/tools/JsonForm/widgets/SwitchWidget.tsx

@@ -3,20 +3,15 @@ import React from 'react';
 import { Switch } from '@djangocfg/ui-core/components';
 import { WidgetProps } from '@rjsf/utils';
 
+import { useWidgetEnv } from './_useWidgetEnv';
+
 /**
  * Switch toggle widget for JSON Schema Form
  * Alternative boolean input
  */
 export function SwitchWidget(props: WidgetProps) {
-  const {
-    id,
-    value,
-    disabled,
-    readonly,
-    onChange,
-    onBlur,
-    onFocus,
-  } = props;
+  const { id, value, onChange, onBlur, onFocus } = props;
+  const { disabled, tooltipText } = useWidgetEnv(props);
 
   const handleChange = (checked: boolean) => {
     onChange(checked);
@@ -26,10 +21,11 @@ export function SwitchWidget(props: WidgetProps) {
     <Switch
       id={id}
       checked={value || false}
-      disabled={disabled || readonly}
+      disabled={disabled}
       onCheckedChange={handleChange}
       onBlur={() => onBlur(id, value)}
       onFocus={() => onFocus(id, value)}
+      title={tooltipText}
     />
   );
 }

package/src/tools/JsonForm/widgets/_useWidgetEnv.ts

@@ -0,0 +1,43 @@
+/**
+ * Internal helper that resolves widget-level environment from RJSF props:
+ * - density (from formContext, default 'comfortable')
+ * - effective `disabled` flag (combines props.disabled with `ui:disabledWhen`)
+ *
+ * Keeps each widget terse — no need to repeat the formContext + disabledWhen
+ * boilerplate.
+ */
+
+import type { WidgetProps } from '@rjsf/utils';
+
+import { evaluateDisabledWhen } from '../utils';
+import type { DisabledWhenRule, JsonFormDensity } from '../types';
+
+export interface WidgetEnv {
+  density: JsonFormDensity;
+  compact: boolean;
+  disabled: boolean;
+  /** Title-attribute text — in compact mode the description moves into a tooltip on the label/control. */
+  tooltipText?: string;
+}
+
+export function useWidgetEnv(props: WidgetProps): WidgetEnv {
+  const { disabled, readonly, formContext, uiSchema, schema } = props;
+  const density: JsonFormDensity =
+    (formContext?.density as JsonFormDensity | undefined) ?? 'comfortable';
+  const compact = density === 'compact';
+
+  const disabledWhen = uiSchema?.['ui:disabledWhen'] as DisabledWhenRule | undefined;
+  const disabledByRule = evaluateDisabledWhen(disabledWhen, formContext?.formData);
+
+  const tooltipText = compact
+    ? (uiSchema?.['ui:description'] as string | undefined)
+        ?? (schema?.description as string | undefined)
+    : undefined;
+
+  return {
+    density,
+    compact,
+    disabled: Boolean(disabled || readonly || disabledByRule),
+    tooltipText,
+  };
+}

package/dist/JsonSchemaForm-IIYKSH6X.cjs

@@ -1,13 +0,0 @@
-'use strict';
-
-var chunkL37FZYJU_cjs = require('./chunk-L37FZYJU.cjs');
-require('./chunk-WGEGR3DF.cjs');
-
-
-
-Object.defineProperty(exports, "JsonSchemaForm", {
-  enumerable: true,
-  get: function () { return chunkL37FZYJU_cjs.JsonSchemaForm; }
-});
-//# sourceMappingURL=JsonSchemaForm-IIYKSH6X.cjs.map
-//# sourceMappingURL=JsonSchemaForm-IIYKSH6X.cjs.map

package/dist/JsonSchemaForm-RN3XWSWX.mjs

@@ -1,4 +0,0 @@
-export { JsonSchemaForm } from './chunk-JUGQNNDC.mjs';
-import './chunk-CGILA3WO.mjs';
-//# sourceMappingURL=JsonSchemaForm-RN3XWSWX.mjs.map
-//# sourceMappingURL=JsonSchemaForm-RN3XWSWX.mjs.map