@react-typed-forms/schemas 11.7.3 → 11.9.0

package/lib/components/DefaultAccordion.d.ts

@@ -1,15 +1,12 @@
-import React, { CSSProperties, ReactElement, ReactNode } from "react";
+import React, { CSSProperties, ReactElement } from "react";
 import { AccordionAdornment } from "../types";
-import { Control } from "@react-typed-forms/core";
-export declare function DefaultAccordion({ children, accordion, contentStyle, contentClassName, designMode, togglerOpenClass, togglerClosedClass, className, renderTitle, renderToggler, }: {
+import { FormRenderer } from "../controlRender";
+import { DefaultAccordionRendererOptions } from "../createDefaultRenderers";
+export declare function DefaultAccordion({ children, accordion, contentStyle, contentClassName, designMode, iconOpenClass, iconClosedClass, className, renderTitle, renderToggler, renderers, titleClass, }: {
     children: ReactElement;
     accordion: Partial<AccordionAdornment>;
     contentStyle?: CSSProperties;
     contentClassName?: string;
     designMode?: boolean;
-    className?: string;
-    togglerOpenClass?: string;
-    togglerClosedClass?: string;
-    renderTitle?: (title: string | undefined, current: Control<boolean>) => ReactNode;
-    renderToggler?: (current: Control<boolean>) => ReactNode;
-}): React.JSX.Element;
+    renderers: FormRenderer;
+} & DefaultAccordionRendererOptions): React.JSX.Element;

package/lib/controlRender.d.ts

@@ -13,6 +13,7 @@ export interface FormRenderer {
     renderLabel: (props: LabelRendererProps, labelStart: ReactNode, labelEnd: ReactNode) => ReactNode;
     renderLayout: (props: ControlLayoutProps) => RenderedControl;
     renderVisibility: (props: VisibilityRendererProps) => ReactNode;
+    renderLabelText: (props: ReactNode) => ReactNode;
 }
 export interface AdornmentProps {
     adornment: ControlAdornment;

package/lib/createDefaultRenderers.d.ts

@@ -49,14 +49,17 @@ interface DefaultDataRendererOptions {
     optionRenderer?: DataRendererRegistration;
 }
 export declare function createDefaultDataRenderer(options?: DefaultDataRendererOptions): DataRendererRegistration;
+export interface DefaultAccordionRendererOptions {
+    className?: string;
+    titleClass?: string;
+    togglerClass?: string;
+    iconOpenClass?: string;
+    iconClosedClass?: string;
+    renderTitle?: (title: string | undefined, current: Control<boolean>) => ReactNode;
+    renderToggler?: (current: Control<boolean>, title: ReactNode) => ReactNode;
+}
 export interface DefaultAdornmentRendererOptions {
-    accordion?: {
-        className?: string;
-        togglerOpenClass?: string;
-        togglerClosedClass?: string;
-        renderTitle?: (title: string | undefined, current: Control<boolean>) => ReactNode;
-        renderToggler?: (current: Control<boolean>) => ReactNode;
-    };
+    accordion?: DefaultAccordionRendererOptions;
 }
 export declare function createDefaultAdornmentRenderer(options?: DefaultAdornmentRendererOptions): AdornmentRendererRegistration;
 interface DefaultLabelRendererOptions {

package/lib/index.js

@@ -1941,8 +1941,9 @@ var defaultTailwindTheme = {
   adornment: {
     accordion: {
       className: "flex items-center gap-2 my-2",
-      togglerOpenClass: "fa fa-chevron-up",
-      togglerClosedClass: "fa fa-chevron-down"
+      titleClass: "cursor-pointer",
+      iconOpenClass: "fa fa-chevron-up",
+      iconClosedClass: "fa fa-chevron-down"
     }
   }
 };
@@ -2429,31 +2430,35 @@ function DefaultAccordion(_ref) {
       contentStyle = _ref.contentStyle,
       contentClassName = _ref.contentClassName,
       designMode = _ref.designMode,
-      togglerOpenClass = _ref.togglerOpenClass,
-      togglerClosedClass = _ref.togglerClosedClass,
+      iconOpenClass = _ref.iconOpenClass,
+      iconClosedClass = _ref.iconClosedClass,
       className = _ref.className,
       _ref$renderTitle = _ref.renderTitle,
-      renderTitle = _ref$renderTitle === void 0 ? function (x) {
-        return /*#__PURE__*/React__default["default"].createElement("span", null, x);
+      renderTitle = _ref$renderTitle === void 0 ? function (t) {
+        return t;
       } : _ref$renderTitle,
-      renderToggler = _ref.renderToggler;
+      renderToggler = _ref.renderToggler,
+      renderers = _ref.renderers,
+      titleClass = _ref.titleClass;
     var open = core.useControl(!!accordion.defaultExpanded);
     var isOpen = open.value;
     var fullContentStyle = isOpen || designMode ? contentStyle : _extends({}, contentStyle, {
       display: "none"
     });
-    var toggler = renderToggler ? renderToggler(open) : /*#__PURE__*/React__default["default"].createElement("button", {
+    var title = renderers.renderLabelText(renderTitle(accordion.title, open));
+    var toggler = renderToggler ? renderToggler(open, title) : /*#__PURE__*/React__default["default"].createElement("button", {
+      className: className,
       onClick: function onClick() {
         return open.setValue(function (x) {
           return !x;
         });
       }
-    }, /*#__PURE__*/React__default["default"].createElement("i", {
-      className: clsx__default["default"](isOpen ? togglerOpenClass : togglerClosedClass)
+    }, /*#__PURE__*/React__default["default"].createElement("label", {
+      className: titleClass
+    }, title), /*#__PURE__*/React__default["default"].createElement("i", {
+      className: clsx__default["default"](isOpen ? iconOpenClass : iconClosedClass)
     }));
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: className
-    }, renderTitle(accordion.title, open), toggler), /*#__PURE__*/React__default["default"].createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, toggler, /*#__PURE__*/React__default["default"].createElement("div", {
       style: fullContentStyle,
       className: contentClassName
     }, children));
@@ -2634,7 +2639,7 @@ function createDefaultAdornmentRenderer(options) {
   }
   return {
     type: "adornment",
-    render: function render(_ref6) {
+    render: function render(_ref6, renderers) {
       var adornment = _ref6.adornment,
         designMode = _ref6.designMode;
       return {
@@ -2648,6 +2653,7 @@ function createDefaultAdornmentRenderer(options) {
           if (isAccordionAdornment(adornment)) {
             return wrapLayout(function (x) {
               return /*#__PURE__*/React__default["default"].createElement(DefaultAccordion, _extends({
+                renderers: renderers,
                 children: x,
                 accordion: adornment,
                 contentStyle: rl.style,
@@ -2701,10 +2707,7 @@ function createDefaultLabelRenderer(options) {
       return labelContainer( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("label", {
         htmlFor: props.forId,
         className: rendererClass(props.className, clsx__default["default"](className, props.type === exports.LabelType.Group && groupLabelClass, props.type === exports.LabelType.Control && controlLabelClass))
-      }, labelStart, renderers.renderLabel({
-        label: props.label,
-        type: exports.LabelType.Text
-      }, undefined, undefined), props.required && requiredElement), labelEnd));
+      }, labelStart, renderers.renderLabelText(props.label), props.required && requiredElement), labelEnd));
     },
     type: "label"
   };
@@ -2752,8 +2755,15 @@ function createFormRenderer(customRenderers, defaultRenderers) {
     renderArray: renderArray,
     renderAdornment: renderAdornment,
     renderLayout: renderLayout,
-    renderVisibility: visibilityRenderer.render
+    renderVisibility: visibilityRenderer.render,
+    renderLabelText: renderLabelText
   };
+  function renderLabelText(label) {
+    return renderLabel({
+      label: label,
+      type: exports.LabelType.Text
+    }, undefined, undefined);
+  }
   function renderLayout(props) {
     var _layoutRenderers$find;
     var renderer = (_layoutRenderers$find = layoutRenderers.find(function (x) {