@djangocfg/ui-tools 2.1.319 → 2.1.321

package/dist/JsonSchemaForm-OSPUUUHM.cjs

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

package/dist/{JsonSchemaForm-IIYKSH6X.cjs.map → JsonSchemaForm-OSPUUUHM.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"JsonSchemaForm-IIYKSH6X.cjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"JsonSchemaForm-OSPUUUHM.cjs"}

package/dist/JsonSchemaForm-TSLX2GRO.mjs

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

package/dist/{JsonSchemaForm-RN3XWSWX.mjs.map → JsonSchemaForm-TSLX2GRO.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"JsonSchemaForm-RN3XWSWX.mjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"JsonSchemaForm-TSLX2GRO.mjs"}

package/dist/{chunk-L37FZYJU.cjs → chunk-4IW7GZFQ.cjs}

@@ -33,24 +33,41 @@ function FieldTemplate(props) {
     hidden,
     rawErrors
   } = props;
+  const formContext = props.formContext;
   if (hidden) {
     return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: lib.cn("space-y-2", classNames),
+      className: lib.cn(compact ? "space-y-1" : "space-y-2", classNames),
       style,
       children: [
-        displayLabel && label && /* @__PURE__ */ jsxRuntime.jsxs(components.Label, { htmlFor: id, className: lib.cn(hasError && "text-destructive"), children: [
-          label,
-          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ml-1", children: "*" })
-        ] }),
-        description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: description }),
+        displayLabel && label && /* @__PURE__ */ jsxRuntime.jsxs(
+          components.Label,
+          {
+            htmlFor: id,
+            className: lib.cn(
+              hasError && "text-destructive",
+              compact && "text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70"
+            ),
+            title: labelTitle,
+            children: [
+              label,
+              required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ml-1", children: "*" })
+            ]
+          }
+        ),
+        showDescription && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: description }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { children }),
-        errors && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-destructive", children: errors }),
-        help && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: help })
+        errors && /* @__PURE__ */ jsxRuntime.jsx("div", { className: compact ? "text-xs text-destructive" : "text-sm text-destructive", children: errors }),
+        help && !compact && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: help })
       ]
     }
   );
@@ -64,14 +81,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] = react.useState(!defaultCollapsed);
   const isRoot = !title;
-  const gridClass = gridCols ? `grid gap-4 grid-cols-${gridCols}` : "space-y-4";
-  const content = /* @__PURE__ */ jsxRuntime.jsx("div", { className: lib.cn(gridClass, className), children: properties.map((element) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: lib.cn(gridClass, className), children: properties.map((element) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "property-wrapper", children: element.content }, element.name)) });
   if (isRoot) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6", children: content });
   }
@@ -110,6 +132,64 @@ function ObjectFieldTemplate(props) {
   ] });
 }
 chunkWGEGR3DF_cjs.__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__ */ jsxRuntime.jsxs("div", { className: lib.cn(compact ? "space-y-2" : "space-y-3", className), children: [
+    ungrouped.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: gridClass, children: ungrouped.map((element) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        UiGroupSection,
+        {
+          group,
+          gridClass,
+          compact,
+          children: groupProps.map((element) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "property-wrapper", children: element.content }, element.name))
+        },
+        group.title
+      );
+    })
+  ] });
+}
+chunkWGEGR3DF_cjs.__name(renderUiGroups, "renderUiGroups");
+function UiGroupSection({ group, gridClass, compact, children }) {
+  const [open, setOpen] = react.useState(group.defaultOpen ?? true);
+  return /* @__PURE__ */ jsxRuntime.jsxs(components.Collapsible, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      components.CollapsibleTrigger,
+      {
+        className: lib.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__ */ jsxRuntime.jsx(
+            lucideReact.ChevronRight,
+            {
+              className: lib.cn(
+                "h-3 w-3 shrink-0 transition-transform duration-200",
+                open && "rotate-90"
+              ),
+              "aria-hidden": true
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: group.title })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(components.CollapsibleContent, { className: "overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: lib.cn("border-l border-border/40 pl-3 pb-2 pt-1", gridClass), children }) })
+  ] });
+}
+chunkWGEGR3DF_cjs.__name(UiGroupSection, "UiGroupSection");
 function ArrayFieldTemplate(props) {
   const {
     title,
@@ -400,6 +480,18 @@ function getNestedValue(obj, path) {
   return path.split(".").reduce((current, key) => current?.[key], obj);
 }
 chunkWGEGR3DF_cjs.__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;
+}
+chunkWGEGR3DF_cjs.__name(evaluateDisabledWhen, "evaluateDisabledWhen");
 function TextWidget(props) {
   const {
     id,
@@ -544,17 +636,26 @@ function NumberWidget(props) {
   );
 }
 chunkWGEGR3DF_cjs.__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
+  };
+}
+chunkWGEGR3DF_cjs.__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__ */ chunkWGEGR3DF_cjs.__name((checked) => {
     onChange(checked);
   }, "handleChange");
@@ -563,11 +664,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
     }
   );
 }
@@ -578,8 +680,6 @@ function SelectWidget(props) {
     options,
     value,
     required,
-    disabled,
-    readonly,
     autofocus,
     onChange,
     onBlur,
@@ -587,6 +687,7 @@ function SelectWidget(props) {
     placeholder,
     rawErrors
   } = props;
+  const { disabled, compact, tooltipText } = useWidgetEnv(props);
   const enumOptions = react.useMemo(() => {
     const opts = options?.enumOptions;
     if (!Array.isArray(opts)) return [];
@@ -613,8 +714,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
       }
@@ -625,35 +727,32 @@ function SelectWidget(props) {
     {
       value: safeValue,
       onValueChange: handleChange,
-      disabled: disabled || readonly,
+      disabled,
       required,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           components.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__ */ jsxRuntime.jsx(components.SelectValue, { placeholder: placeholder || "Select an option" })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(components.SelectContent, { children: enumOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(components.SelectItem, { value: String(option.value), children: option.label || String(option.value) }, String(option.value))) })
+        /* @__PURE__ */ jsxRuntime.jsx(components.SelectContent, { children: enumOptions.map((option) => {
+          const optValue = String(option.value);
+          return /* @__PURE__ */ jsxRuntime.jsx(components.SelectItem, { value: optValue, children: option.label || optValue }, optValue || "__empty__");
+        }) })
       ]
     }
   );
 }
 chunkWGEGR3DF_cjs.__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__ */ chunkWGEGR3DF_cjs.__name((checked) => {
     onChange(checked);
   }, "handleChange");
@@ -662,10 +761,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
     }
   );
 }
@@ -849,14 +949,13 @@ chunkWGEGR3DF_cjs.__name(ColorWidget, "ColorWidget");
 function SliderWidget(props) {
   const {
     id,
-    disabled,
-    readonly,
     value,
     onChange,
     schema,
     options,
     rawErrors
   } = props;
+  const { disabled, tooltipText } = useWidgetEnv(props);
   const config = react.useMemo(() => {
     const min = schema.minimum ?? options?.min ?? 0;
     const max = schema.maximum ?? options?.max ?? 100;
@@ -910,35 +1009,42 @@ function SliderWidget(props) {
     }
     return String(numericValue);
   }, [numericValue, config.unit]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: lib.cn("flex items-center gap-3", hasError && "text-destructive"), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      components.Slider,
-      {
-        id,
-        disabled: disabled || readonly,
-        value: [numericValue],
-        onValueChange: handleSliderChange,
-        min: config.min,
-        max: config.max,
-        step: config.step,
-        className: "flex-1"
-      }
-    ),
-    config.showInput ? /* @__PURE__ */ jsxRuntime.jsx(
-      components.Input,
-      {
-        type: "text",
-        value: displayValue,
-        onChange: handleInputChange,
-        disabled,
-        readOnly: readonly,
-        className: lib.cn(
-          "w-20 text-center font-mono text-sm",
-          hasError && "border-destructive"
-        )
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-16 text-right font-mono text-sm text-muted-foreground", children: displayValue })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: lib.cn("flex items-center gap-3", hasError && "text-destructive"),
+      title: tooltipText,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          components.Slider,
+          {
+            id,
+            disabled,
+            value: [numericValue],
+            onValueChange: handleSliderChange,
+            min: config.min,
+            max: config.max,
+            step: config.step,
+            className: "flex-1"
+          }
+        ),
+        config.showInput ? /* @__PURE__ */ jsxRuntime.jsx(
+          components.Input,
+          {
+            type: "text",
+            value: displayValue,
+            onChange: handleInputChange,
+            disabled,
+            readOnly: disabled,
+            className: lib.cn(
+              "w-20 text-center font-mono text-sm",
+              hasError && "border-destructive"
+            )
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-16 text-right font-mono text-sm text-muted-foreground", children: displayValue })
+      ]
+    }
+  );
 }
 chunkWGEGR3DF_cjs.__name(SliderWidget, "SliderWidget");
 function JsonSchemaForm(props) {
@@ -956,6 +1062,8 @@ function JsonSchemaForm(props) {
     className,
     showSubmitButton = true,
     submitButtonText = "Submit",
+    density = "comfortable",
+    formContext: callerFormContext,
     ...restProps
   } = props;
   const validatedSchema = react.useMemo(() => {
@@ -1037,7 +1145,12 @@ function JsonSchemaForm(props) {
       /* @__PURE__ */ jsxRuntime.jsx(components.AlertDescription, { children: "Invalid schema provided. Please check the schema format." })
     ] }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(
+  const formContext = react.useMemo(() => ({
+    ...callerFormContext,
+    density,
+    formData: normalizedFormData
+  }), [callerFormContext, density, normalizedFormData]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "data-jsonform-density": density, children: /* @__PURE__ */ jsxRuntime.jsx(
     Form__default.default,
     {
       schema: validatedSchema,
@@ -1046,6 +1159,7 @@ function JsonSchemaForm(props) {
       validator: validator__default.default,
       widgets,
       templates,
+      formContext,
       onSubmit: handleSubmit,
       onChange: handleChange,
       onError: handleError,
@@ -1074,6 +1188,7 @@ exports.SelectWidget = SelectWidget;
 exports.SliderWidget = SliderWidget;
 exports.SwitchWidget = SwitchWidget;
 exports.TextWidget = TextWidget;
+exports.evaluateDisabledWhen = evaluateDisabledWhen;
 exports.getRequiredFields = getRequiredFields;
 exports.hasRequiredFields = hasRequiredFields;
 exports.mergeDefaults = mergeDefaults;
@@ -1082,5 +1197,5 @@ exports.safeJsonParse = safeJsonParse;
 exports.safeJsonStringify = safeJsonStringify;
 exports.validateRequiredFields = validateRequiredFields;
 exports.validateSchema = validateSchema;
-//# sourceMappingURL=chunk-L37FZYJU.cjs.map
-//# sourceMappingURL=chunk-L37FZYJU.cjs.map
+//# sourceMappingURL=chunk-4IW7GZFQ.cjs.map
+//# sourceMappingURL=chunk-4IW7GZFQ.cjs.map