@micromerce/formbuilder-react 1.0.986 → 1.0.989

package/dist/index.d.ts

@@ -16,8 +16,8 @@ import TrafficLightCardSelect from "./components/controls/TrafficLightCardSelect
 import { useValueGenerator } from "./hooks/useValueGenerator/useValueGenerator";
 import { queryControl } from "./components/QueryControl/data/defaultControls";
 import { FormBuilderConfig } from "./types";
-import { FormBuilderThemeProvider, FORM_BUILDER_TOKENS, toCssVars } from "./theme";
+import { FormBuilderThemeProvider, FORM_BUILDER_TOKENS, LEGACY_CSS_VARS, toCssVars } from "./theme";
 import type { FormBuilderTheme, FormBuilderThemeKey, FormBuilderThemePreset } from "./theme";
 export type { FormBuilderTheme, FormBuilderThemeKey, FormBuilderThemePreset };
-export { FormBuilderThemeProvider, FORM_BUILDER_TOKENS, toCssVars, FormBuilder, FormBuilderConfig, queryControl, Select, MultiSelect, Checkbox, ControlWrapper, FormFooter, Input, InputFreeSolo, FormList, FormGroup, MrnInput, PasswordInput, Textarea, TrafficLightCardSelect, useValueGenerator, };
+export { FormBuilderThemeProvider, FORM_BUILDER_TOKENS, LEGACY_CSS_VARS, toCssVars, FormBuilder, FormBuilderConfig, queryControl, Select, MultiSelect, Checkbox, ControlWrapper, FormFooter, Input, InputFreeSolo, FormList, FormGroup, MrnInput, PasswordInput, Textarea, TrafficLightCardSelect, useValueGenerator, };
 export default FormBuilder;

package/dist/theme/FormBuilderThemeProvider.d.ts

@@ -1,17 +1,89 @@
 import React, { HTMLAttributes, ReactNode } from "react";
 import { FormBuilderTheme, FormBuilderThemePreset } from "./tokens";
 export interface FormBuilderThemeProviderProps extends HTMLAttributes<HTMLDivElement> {
-    /** A ready-made token set: "design" is the webclient design system (DESIGN.md). */
+    /** A ready-made token set: "legacy" is the look before the design system ("design" is the default). */
     preset?: FormBuilderThemePreset;
     /** Single token values; they win over the preset. */
     theme?: FormBuilderTheme;
     children?: ReactNode;
 }
+export interface FormBuilderThemeContextValue {
+    preset?: FormBuilderThemePreset;
+    theme?: FormBuilderTheme;
+}
+/**
+ * The theme of the nearest providers, for what the cascade does not reach: FormBuilder gives it
+ * to the tooltips and menus MUI renders into a portal under <body>. The inner preset wins, the
+ * tokens are merged.
+ */
+export declare const FormBuilderThemeContext: React.Context<FormBuilderThemeContextValue>;
+export declare const useFormBuilderTheme: (preset?: FormBuilderThemePreset, theme?: FormBuilderTheme) => {
+    preset: FormBuilderThemePreset | undefined;
+    theme: {
+        value?: string | number | undefined;
+        error?: string | number | undefined;
+        placeholder?: string | number | undefined;
+        success?: string | number | undefined;
+        icon?: string | number | undefined;
+        label?: string | number | undefined;
+        primary?: string | number | undefined;
+        border?: string | number | undefined;
+        fontFamily?: string | number | undefined;
+        fontSize?: string | number | undefined;
+        background?: string | number | undefined;
+        radius?: string | number | undefined;
+        helper?: string | number | undefined;
+        accent?: string | number | undefined;
+        accentStrong?: string | number | undefined;
+        accentHover?: string | number | undefined;
+        accentDark?: string | number | undefined;
+        accentLight?: string | number | undefined;
+        onAccent?: string | number | undefined;
+        primaryDark?: string | number | undefined;
+        primaryLight?: string | number | undefined;
+        primaryHover?: string | number | undefined;
+        textPrimary?: string | number | undefined;
+        textSecondary?: string | number | undefined;
+        fieldText?: string | number | undefined;
+        fieldFontWeight?: string | number | undefined;
+        iconMuted?: string | number | undefined;
+        tooltipBackground?: string | number | undefined;
+        borderHover?: string | number | undefined;
+        borderFocus?: string | number | undefined;
+        borderLight?: string | number | undefined;
+        checkboxOff?: string | number | undefined;
+        switchOff?: string | number | undefined;
+        optionSelected?: string | number | undefined;
+        optionSelectedFocus?: string | number | undefined;
+        backgroundHover?: string | number | undefined;
+        backgroundReadonly?: string | number | undefined;
+        backgroundMuted?: string | number | undefined;
+        backgroundSubtle?: string | number | undefined;
+        errorText?: string | number | undefined;
+        errorBackground?: string | number | undefined;
+        alertText?: string | number | undefined;
+        alertBackground?: string | number | undefined;
+        danger?: string | number | undefined;
+        successBackground?: string | number | undefined;
+        errorFontSize?: string | number | undefined;
+        errorIcon?: string | number | undefined;
+        helperFontSize?: string | number | undefined;
+        inputHeight?: string | number | undefined;
+        inputPadding?: string | number | undefined;
+        labelWidth?: string | number | undefined;
+        labelGap?: string | number | undefined;
+        buttonHeight?: string | number | undefined;
+        buttonPadding?: string | number | undefined;
+        buttonRadius?: string | number | undefined;
+        buttonTextTransform?: string | number | undefined;
+        focusRing?: string | number | undefined;
+        fieldFocusShadow?: string | number | undefined;
+    };
+};
 /**
  * Themes every formbuilder component inside it. The tokens are CSS custom properties, so they
- * cascade without a React context: providers can be nested and the inner one wins, and content
- * MUI renders into a portal (tooltips, menus) inherits them only when the provider is an
- * ancestor of the portal target (theme <body> for those, e.g. with toCssVars).
+ * cascade: providers can be nested and the inner one wins. Tooltips and menus of a FormBuilder
+ * inside get the same tokens, although MUI renders them into a portal under <body>.
  */
 declare const FormBuilderThemeProvider: ({ preset, theme, className, style, children, ...rest }: FormBuilderThemeProviderProps) => React.JSX.Element;
 export default FormBuilderThemeProvider;

package/dist/theme/index.d.ts

@@ -1,4 +1,4 @@
-export { default as FormBuilderThemeProvider } from "./FormBuilderThemeProvider";
-export type { FormBuilderThemeProviderProps } from "./FormBuilderThemeProvider";
-export { FORM_BUILDER_TOKENS, PRESET_CLASS_NAMES, toCssVars } from "./tokens";
+export { default as FormBuilderThemeProvider, FormBuilderThemeContext, useFormBuilderTheme } from "./FormBuilderThemeProvider";
+export type { FormBuilderThemeContextValue, FormBuilderThemeProviderProps } from "./FormBuilderThemeProvider";
+export { FORM_BUILDER_TOKENS, LEGACY_CSS_VARS, PRESET_CLASS_NAMES, toCssVars } from "./tokens";
 export type { FormBuilderTheme, FormBuilderThemeKey, FormBuilderThemePreset } from "./tokens";

package/dist/theme/tokens.d.ts

@@ -68,9 +68,19 @@ export declare const FORM_BUILDER_TOKENS: {
 export type FormBuilderThemeKey = keyof typeof FORM_BUILDER_TOKENS;
 /** A partial set of token values; every key is optional. */
 export type FormBuilderTheme = Partial<Record<FormBuilderThemeKey, string | number>>;
-/** Ready-made sets of token values, applied as a class (see styles/theme.module.scss). */
-export type FormBuilderThemePreset = "design";
+/**
+ * Ready-made sets of token values, applied as a class (see styles/theme.module.scss): "design"
+ * is the default and needs no preset; "legacy" is the look before the design system.
+ */
+export type FormBuilderThemePreset = "design" | "legacy";
 export declare const PRESET_CLASS_NAMES: Record<FormBuilderThemePreset, string>;
+/**
+ * The legacy preset as custom properties, the same as `.fb-theme-legacy` in
+ * styles/theme.module.scss. FormBuilder gives them to the tooltips and menus MUI renders into a
+ * portal under <body>, outside the element that carries the class. `initial` makes a component
+ * use its fallback, the former value.
+ */
+export declare const LEGACY_CSS_VARS: Readonly<Record<string, string>>;
 /**
  * The CSS custom properties for a theme, ready for a `style` prop, e.g. when the host applies
  * the theme to an element of its own instead of using FormBuilderThemeProvider.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micromerce/formbuilder-react",
-  "version": "1.0.986",
+  "version": "1.0.989",
   "description": "creates a form based on configuration",
   "main": "dist/formbuilder.js",
   "types": "dist/index.d.ts",