@djangocfg/ui-tools 2.1.319 → 2.1.321

package/dist/{chunk-JUGQNNDC.mjs → chunk-EXGXUK2N.mjs}

@@ -1,7 +1,7 @@
 import { __name } from './chunk-CGILA3WO.mjs';
 import consola from 'consola';
 import { cn, isDev } from '@djangocfg/ui-core/lib';
-import { ChevronDown, Plus, AlertCircle } from 'lucide-react';
+import { ChevronDown, ChevronRight, Plus, AlertCircle } from 'lucide-react';
 import { useState, useMemo, useCallback, useRef } from 'react';
 import { Label, Collapsible, CollapsibleTrigger, CollapsibleContent, Button, Alert, AlertTitle, AlertDescription, Input, Checkbox, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Switch, Slider } from '@djangocfg/ui-core/components';
 import Form from '@rjsf/core';
@@ -25,24 +25,41 @@ function FieldTemplate(props) {
     hidden,
     rawErrors
   } = props;
+  const formContext = props.formContext;
   if (hidden) {
     return /* @__PURE__ */ jsx("div", { className: "hidden", children });
   }
   const hasError = rawErrors && rawErrors.length > 0;
+  const density = formContext?.density ?? "comfortable";
+  const compact = density === "compact";
+  const descriptionText = typeof description === "string" ? description : void 0;
+  const labelTitle = compact ? descriptionText : void 0;
+  const showDescription = !compact && Boolean(description);
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn("space-y-2", classNames),
+      className: cn(compact ? "space-y-1" : "space-y-2", classNames),
       style,
       children: [
-        displayLabel && label && /* @__PURE__ */ jsxs(Label, { htmlFor: id, className: cn(hasError && "text-destructive"), children: [
-          label,
-          required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
-        ] }),
-        description && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: description }),
+        displayLabel && label && /* @__PURE__ */ jsxs(
+          Label,
+          {
+            htmlFor: id,
+            className: cn(
+              hasError && "text-destructive",
+              compact && "text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70"
+            ),
+            title: labelTitle,
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+            ]
+          }
+        ),
+        showDescription && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: description }),
         /* @__PURE__ */ jsx("div", { children }),
-        errors && /* @__PURE__ */ jsx("div", { className: "text-sm text-destructive", children: errors }),
-        help && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: help })
+        errors && /* @__PURE__ */ jsx("div", { className: compact ? "text-xs text-destructive" : "text-sm text-destructive", children: errors }),
+        help && !compact && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: help })
       ]
     }
   );
@@ -56,14 +73,19 @@ function ObjectFieldTemplate(props) {
     required,
     uiSchema
   } = props;
+  const formContext = props.formContext;
   const isCollapsible = uiSchema?.["ui:collapsible"] === true;
   const defaultCollapsed = uiSchema?.["ui:collapsed"] === true;
   const gridCols = uiSchema?.["ui:grid"];
   const className = uiSchema?.["ui:className"];
+  const uiGroups = uiSchema?.["ui:groups"];
+  const density = formContext?.density ?? "comfortable";
+  const compact = density === "compact";
   const [isOpen, setIsOpen] = useState(!defaultCollapsed);
   const isRoot = !title;
-  const gridClass = gridCols ? `grid gap-4 grid-cols-${gridCols}` : "space-y-4";
-  const content = /* @__PURE__ */ jsx("div", { className: cn(gridClass, className), children: properties.map((element) => /* @__PURE__ */ jsx("div", { className: "property-wrapper", children: element.content }, element.name)) });
+  const gridClass = gridCols ? `grid gap-4 grid-cols-${gridCols}` : compact ? "space-y-2" : "space-y-4";
+  const groupedContent = uiGroups ? renderUiGroups({ properties, uiGroups, gridClass, className, compact }) : null;
+  const content = groupedContent ?? /* @__PURE__ */ jsx("div", { className: cn(gridClass, className), children: properties.map((element) => /* @__PURE__ */ jsx("div", { className: "property-wrapper", children: element.content }, element.name)) });
   if (isRoot) {
     return /* @__PURE__ */ jsx("div", { className: "space-y-6", children: content });
   }
@@ -102,6 +124,64 @@ function ObjectFieldTemplate(props) {
   ] });
 }
 __name(ObjectFieldTemplate, "ObjectFieldTemplate");
+function renderUiGroups({
+  properties,
+  uiGroups,
+  gridClass,
+  className,
+  compact
+}) {
+  const propsByName = new Map(properties.map((p) => [p.name, p]));
+  const groupedFieldNames = new Set(uiGroups.flatMap((g) => g.fields));
+  const ungrouped = properties.filter((p) => !groupedFieldNames.has(p.name));
+  return /* @__PURE__ */ jsxs("div", { className: cn(compact ? "space-y-2" : "space-y-3", className), children: [
+    ungrouped.length > 0 ? /* @__PURE__ */ jsx("div", { className: gridClass, children: ungrouped.map((element) => /* @__PURE__ */ jsx("div", { className: "property-wrapper", children: element.content }, element.name)) }) : null,
+    uiGroups.map((group) => {
+      const groupProps = group.fields.map((name) => propsByName.get(name)).filter((p) => Boolean(p));
+      if (groupProps.length === 0) return null;
+      return /* @__PURE__ */ jsx(
+        UiGroupSection,
+        {
+          group,
+          gridClass,
+          compact,
+          children: groupProps.map((element) => /* @__PURE__ */ jsx("div", { className: "property-wrapper", children: element.content }, element.name))
+        },
+        group.title
+      );
+    })
+  ] });
+}
+__name(renderUiGroups, "renderUiGroups");
+function UiGroupSection({ group, gridClass, compact, children }) {
+  const [open, setOpen] = useState(group.defaultOpen ?? true);
+  return /* @__PURE__ */ jsxs(Collapsible, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs(
+      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"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              className: cn(
+                "h-3 w-3 shrink-0 transition-transform duration-200",
+                open && "rotate-90"
+              ),
+              "aria-hidden": true
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: group.title })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(CollapsibleContent, { className: "overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", children: /* @__PURE__ */ jsx("div", { className: cn("border-l border-border/40 pl-3 pb-2 pt-1", gridClass), children }) })
+  ] });
+}
+__name(UiGroupSection, "UiGroupSection");
 function ArrayFieldTemplate(props) {
   const {
     title,
@@ -392,6 +472,18 @@ function getNestedValue(obj, path) {
   return path.split(".").reduce((current, key) => current?.[key], obj);
 }
 __name(getNestedValue, "getNestedValue");
+function evaluateDisabledWhen(rule, formData) {
+  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;
+}
+__name(evaluateDisabledWhen, "evaluateDisabledWhen");
 function TextWidget(props) {
   const {
     id,
@@ -536,17 +628,26 @@ function NumberWidget(props) {
   );
 }
 __name(NumberWidget, "NumberWidget");
+
+// src/tools/JsonForm/widgets/_useWidgetEnv.ts
+function useWidgetEnv(props) {
+  const { disabled, readonly, formContext, uiSchema, schema } = props;
+  const density = formContext?.density ?? "comfortable";
+  const compact = density === "compact";
+  const disabledWhen = uiSchema?.["ui:disabledWhen"];
+  const disabledByRule = evaluateDisabledWhen(disabledWhen, formContext?.formData);
+  const tooltipText = compact ? uiSchema?.["ui:description"] ?? schema?.description : void 0;
+  return {
+    density,
+    compact,
+    disabled: Boolean(disabled || readonly || disabledByRule),
+    tooltipText
+  };
+}
+__name(useWidgetEnv, "useWidgetEnv");
 function CheckboxWidget(props) {
-  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 = /* @__PURE__ */ __name((checked) => {
     onChange(checked);
   }, "handleChange");
@@ -555,11 +656,12 @@ function CheckboxWidget(props) {
     {
       id,
       checked: value || false,
-      disabled: disabled || readonly,
+      disabled,
       autoFocus: autofocus,
       onCheckedChange: handleChange,
       onBlur: () => onBlur(id, value),
-      onFocus: () => onFocus(id, value)
+      onFocus: () => onFocus(id, value),
+      title: tooltipText
     }
   );
 }
@@ -570,8 +672,6 @@ function SelectWidget(props) {
     options,
     value,
     required,
-    disabled,
-    readonly,
     autofocus,
     onChange,
     onBlur,
@@ -579,6 +679,7 @@ function SelectWidget(props) {
     placeholder,
     rawErrors
   } = props;
+  const { disabled, compact, tooltipText } = useWidgetEnv(props);
   const enumOptions = useMemo(() => {
     const opts = options?.enumOptions;
     if (!Array.isArray(opts)) return [];
@@ -605,8 +706,9 @@ function SelectWidget(props) {
         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,
+        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`,
         placeholder
       }
@@ -617,35 +719,32 @@ function SelectWidget(props) {
     {
       value: safeValue,
       onValueChange: handleChange,
-      disabled: disabled || readonly,
+      disabled,
       required,
       children: [
         /* @__PURE__ */ jsx(
           SelectTrigger,
           {
             id,
-            className: hasError ? "border-destructive" : "",
+            className: `${hasError ? "border-destructive" : ""} ${compact ? "h-7 text-xs" : ""}`.trim(),
             autoFocus: autofocus,
             onFocus: () => onFocus(id, value),
+            title: tooltipText,
             children: /* @__PURE__ */ jsx(SelectValue, { placeholder: placeholder || "Select an option" })
           }
         ),
-        /* @__PURE__ */ jsx(SelectContent, { children: enumOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: String(option.value), children: option.label || String(option.value) }, String(option.value))) })
+        /* @__PURE__ */ jsx(SelectContent, { children: enumOptions.map((option) => {
+          const optValue = String(option.value);
+          return /* @__PURE__ */ jsx(SelectItem, { value: optValue, children: option.label || optValue }, optValue || "__empty__");
+        }) })
       ]
     }
   );
 }
 __name(SelectWidget, "SelectWidget");
 function SwitchWidget(props) {
-  const {
-    id,
-    value,
-    disabled,
-    readonly,
-    onChange,
-    onBlur,
-    onFocus
-  } = props;
+  const { id, value, onChange, onBlur, onFocus } = props;
+  const { disabled, tooltipText } = useWidgetEnv(props);
   const handleChange = /* @__PURE__ */ __name((checked) => {
     onChange(checked);
   }, "handleChange");
@@ -654,10 +753,11 @@ function SwitchWidget(props) {
     {
       id,
       checked: value || false,
-      disabled: disabled || readonly,
+      disabled,
       onCheckedChange: handleChange,
       onBlur: () => onBlur(id, value),
-      onFocus: () => onFocus(id, value)
+      onFocus: () => onFocus(id, value),
+      title: tooltipText
     }
   );
 }
@@ -841,14 +941,13 @@ __name(ColorWidget, "ColorWidget");
 function SliderWidget(props) {
   const {
     id,
-    disabled,
-    readonly,
     value,
     onChange,
     schema,
     options,
     rawErrors
   } = props;
+  const { disabled, tooltipText } = useWidgetEnv(props);
   const config = useMemo(() => {
     const min = schema.minimum ?? options?.min ?? 0;
     const max = schema.maximum ?? options?.max ?? 100;
@@ -902,35 +1001,42 @@ function SliderWidget(props) {
     }
     return String(numericValue);
   }, [numericValue, config.unit]);
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", hasError && "text-destructive"), children: [
-    /* @__PURE__ */ jsx(
-      Slider,
-      {
-        id,
-        disabled: disabled || readonly,
-        value: [numericValue],
-        onValueChange: handleSliderChange,
-        min: config.min,
-        max: config.max,
-        step: config.step,
-        className: "flex-1"
-      }
-    ),
-    config.showInput ? /* @__PURE__ */ jsx(
-      Input,
-      {
-        type: "text",
-        value: displayValue,
-        onChange: handleInputChange,
-        disabled,
-        readOnly: readonly,
-        className: cn(
-          "w-20 text-center font-mono text-sm",
-          hasError && "border-destructive"
-        )
-      }
-    ) : /* @__PURE__ */ jsx("span", { className: "w-16 text-right font-mono text-sm text-muted-foreground", children: displayValue })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex items-center gap-3", hasError && "text-destructive"),
+      title: tooltipText,
+      children: [
+        /* @__PURE__ */ jsx(
+          Slider,
+          {
+            id,
+            disabled,
+            value: [numericValue],
+            onValueChange: handleSliderChange,
+            min: config.min,
+            max: config.max,
+            step: config.step,
+            className: "flex-1"
+          }
+        ),
+        config.showInput ? /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "text",
+            value: displayValue,
+            onChange: handleInputChange,
+            disabled,
+            readOnly: disabled,
+            className: cn(
+              "w-20 text-center font-mono text-sm",
+              hasError && "border-destructive"
+            )
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "w-16 text-right font-mono text-sm text-muted-foreground", children: displayValue })
+      ]
+    }
+  );
 }
 __name(SliderWidget, "SliderWidget");
 function JsonSchemaForm(props) {
@@ -948,6 +1054,8 @@ function JsonSchemaForm(props) {
     className,
     showSubmitButton = true,
     submitButtonText = "Submit",
+    density = "comfortable",
+    formContext: callerFormContext,
     ...restProps
   } = props;
   const validatedSchema = useMemo(() => {
@@ -1029,7 +1137,12 @@ function JsonSchemaForm(props) {
       /* @__PURE__ */ jsx(AlertDescription, { children: "Invalid schema provided. Please check the schema format." })
     ] }) });
   }
-  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
+  const formContext = useMemo(() => ({
+    ...callerFormContext,
+    density,
+    formData: normalizedFormData
+  }), [callerFormContext, density, normalizedFormData]);
+  return /* @__PURE__ */ jsx("div", { className, "data-jsonform-density": density, children: /* @__PURE__ */ jsx(
     Form,
     {
       schema: validatedSchema,
@@ -1038,6 +1151,7 @@ function JsonSchemaForm(props) {
       validator,
       widgets,
       templates,
+      formContext,
       onSubmit: handleSubmit,
       onChange: handleChange,
       onError: handleError,
@@ -1052,6 +1166,6 @@ function JsonSchemaForm(props) {
 }
 __name(JsonSchemaForm, "JsonSchemaForm");
 
-export { ArrayFieldItemTemplate, ArrayFieldTemplate, BaseInputTemplate, CheckboxWidget, ColorWidget, ErrorListTemplate, FieldTemplate, JsonSchemaForm, NumberWidget, ObjectFieldTemplate, SelectWidget, SliderWidget, SwitchWidget, TextWidget, getRequiredFields, hasRequiredFields, mergeDefaults, normalizeFormData, safeJsonParse, safeJsonStringify, validateRequiredFields, validateSchema };
-//# sourceMappingURL=chunk-JUGQNNDC.mjs.map
-//# sourceMappingURL=chunk-JUGQNNDC.mjs.map
+export { ArrayFieldItemTemplate, ArrayFieldTemplate, BaseInputTemplate, CheckboxWidget, ColorWidget, ErrorListTemplate, FieldTemplate, JsonSchemaForm, NumberWidget, ObjectFieldTemplate, SelectWidget, SliderWidget, SwitchWidget, TextWidget, evaluateDisabledWhen, getRequiredFields, hasRequiredFields, mergeDefaults, normalizeFormData, safeJsonParse, safeJsonStringify, validateRequiredFields, validateSchema };
+//# sourceMappingURL=chunk-EXGXUK2N.mjs.map
+//# sourceMappingURL=chunk-EXGXUK2N.mjs.map