amis-core 3.4.0 → 3.4.1

package/esm/env.js

@@ -1,5 +1,5 @@
 /**
- * amis-core v3.4.0
+ * amis-core v3.4.1
  * Copyright 2018-2023 fex
  */
 

package/esm/envOverwrite.js

@@ -1,5 +1,5 @@
 /**
- * amis-core v3.4.0
+ * amis-core v3.4.1
  * Copyright 2018-2023 fex
  */
 

package/esm/factory.d.ts

@@ -50,22 +50,22 @@ export interface RendererConfig extends RendererBasicConfig {
 export interface RenderSchemaFilter {
     (schema: Schema, renderer: RendererConfig, props?: any): Schema;
 }
-export interface wsObject {
+export interface WsObject {
     url: string;
     responseKey?: string;
     body?: any;
 }
-export interface RenderOptions extends Partial<Omit<RendererEnv, 'fetcher' | 'theme'>> {
-    session?: string;
-    theme?: string;
-    fetcher?: (config: fetcherConfig) => Promise<fetcherResult>;
-}
-export interface fetcherConfig {
+export interface FetcherConfig {
     url: string;
     method?: 'get' | 'post' | 'put' | 'patch' | 'delete' | 'jsonp' | 'js';
     data?: any;
     config?: any;
 }
+export interface RenderOptions extends Partial<Omit<RendererEnv, 'fetcher' | 'theme'>> {
+    session?: string;
+    theme?: string;
+    fetcher?: (config: FetcherConfig) => Promise<fetcherResult>;
+}
 export declare const renderersMap: {
     [propName: string]: boolean;
 };

package/esm/factory.js

@@ -1,5 +1,5 @@
 /**
- * amis-core v3.4.0
+ * amis-core v3.4.1
  * Copyright 2018-2023 fex
  */
 

package/esm/index.d.ts

@@ -5,6 +5,7 @@
  * This source code is licensed under the Apache license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/// <reference types="react" />
 import { Renderer, getRendererByName, getRenderers, registerRenderer, unRegisterRenderer, resolveRenderer, filterSchema, clearStoresCache, updateEnv, addSchemaFilter, extendDefaultEnv } from './factory';
 import type { RenderOptions, RendererConfig, RendererProps } from './factory';
 import './polyfills';

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * amis-core v3.4.0
+ * amis-core v3.4.1
  * Copyright 2018-2023 fex
  */
 
@@ -20,7 +20,7 @@ export { DataSchema } from './utils/DataSchema.js';
 export { DATASCHEMA_TYPE_MAP, DataScope } from './utils/DataScope.js';
 export { filterDate, normalizeDate, parseDuration, relativeValueRe } from './utils/date.js';
 import { enableDebug, disableDebug } from './utils/debug.js';
-export { DebugWrapper, JsonView, debug, disableDebug, enableDebug, warning } from './utils/debug.js';
+export { DebugWrapper, JsonView, debug, disableDebug, enableDebug, traceProps, warning } from './utils/debug.js';
 export { calculatePosition, getContainer, getStyleNumber, ownerDocument, renderTextByKeyword } from './utils/dom.js';
 export { ServerError } from './utils/errors.js';
 export { escapeHtml } from './utils/escapeHtml.js';
@@ -34,7 +34,7 @@ export { handleAction } from './utils/handleAction.js';
 import { promisify } from './utils/helper.js';
 import * as helper from './utils/helper.js';
 export { helper as utils };
-export { JSONTraverse, JSONValueMap, SkipOperation, ValidateError, __uri, anyChanged, autobind, bulkBindFunctions, camel, chainEvents, chainFunctions, convertArrayValueToMoment, detectPropValueChanged, difference, differenceFromAll, eachTree, everyTree, filterTree, findIndex, findObjectsWithKey, findTree, findTreeAll, findTreeIndex, flattenTree, flattenTreeWithLeafNodes, getLevelFromClassName, getPropValue, getRange, getScrollParent, getScrollbarWidth, getTree, getTreeAncestors, getTreeDepth, getTreeParent, getWidthRate, guid, hasAbility, hasFile, hasOwnPropertyInPath, hasVisibleExpression, hashCode, immutableExtends, injectPropsToObject, isArrayChildrenModified, isBreakpoint, isClickOnInput, isDisabled, isEmpty, isMobile, isNumeric, isObjectShallowModified, isSuperDataModified, isUnfolded, isVisible, lcFirst, loadScript, loadStyle, makeColumnClassBuild, makeHorizontalDeeper, mapObject, mapTree, noop, normalizeNodePath, object2formData, omitControls, padArr, parseQuery, pickEventsProps, preventDefault, promisify, qsparse, qsstringify, range, removeHTMLTag, repeatCount, rmUndefined, someTree, sortArray, spliceTree, syncDataFromSuper, ucFirst, until, uuid, uuidv4, visibilityFilter } from './utils/helper.js';
+export { JSONTraverse, JSONValueMap, SkipOperation, ValidateError, __uri, anyChanged, autobind, buildTrackExpression, bulkBindFunctions, camel, chainEvents, chainFunctions, changedEffect, convertArrayValueToMoment, detectPropValueChanged, difference, differenceFromAll, eachTree, evalTrackExpression, everyTree, filterTree, findIndex, findObjectsWithKey, findTree, findTreeAll, findTreeIndex, flattenTree, flattenTreeWithLeafNodes, getLevelFromClassName, getPropValue, getRange, getScrollParent, getScrollbarWidth, getTree, getTreeAncestors, getTreeDepth, getTreeParent, getWidthRate, guid, hasAbility, hasFile, hasOwnPropertyInPath, hasVisibleExpression, hashCode, immutableExtends, injectPropsToObject, isArrayChildrenModified, isBreakpoint, isClickOnInput, isDisabled, isEmpty, isMobile, isNumeric, isObjectShallowModified, isSuperDataModified, isUnfolded, isVisible, lcFirst, loadScript, loadStyle, makeColumnClassBuild, makeHorizontalDeeper, mapObject, mapTree, noop, normalizeNodePath, object2formData, omitControls, padArr, parseQuery, pickEventsProps, preventDefault, promisify, qsparse, qsstringify, range, removeHTMLTag, repeatCount, rmUndefined, someTree, sortArray, spliceTree, syncDataFromSuper, ucFirst, until, uuid, uuidv4, visibilityFilter } from './utils/helper.js';
 export { highlight } from './utils/highlight.js';
 export { generateIcon } from './utils/icon.js';
 export { getImageDimensions, toDataURL } from './utils/image.js';
@@ -69,7 +69,7 @@ export { uncontrollable } from './utils/uncontrollable.js';
 export { addRule, str2rules, validate, validateMessages, validateObject, validations } from './utils/validations.js';
 export { toNumber } from './utils/toNumber.js';
 export { decodeEntity } from './utils/decodeEntity.js';
-export { addStyle, findOrCreactStyle, formatStyle, getValueByPath, inheritValueMap, insertCustomStyle, insertStyle, valueMap as styleMap, valueMap } from './utils/style-helper.js';
+export { addStyle, findOrCreateStyle, formatInputThemeCss, formatStyle, getValueByPath, inheritValueMap, insertCustomStyle, insertEditCustomStyle, insertStyle, removeCustomStyle, setThemeClassName, valueMap as styleMap, valueMap } from './utils/style-helper.js';
 export { getConditionComputers, registerConditionComputer, resolveCondition, setConditionComputeErrorHandler } from './utils/resolveCondition.js';
 export { arraySlice } from './utils/arraySlice.js';
 export { isIntegerInRange, numberFormatter, safeAdd, safeSub } from './utils/math.js';
@@ -140,7 +140,7 @@ export { StoreNode } from './store/node.js';
  */
 var classPrefix = getClassPrefix();
 // @ts-ignore
-var version = '3.4.0';
+var version = '3.4.1';
 function render(schema, props, options, pathPrefix) {
     if (props === void 0) { props = {}; }
     if (options === void 0) { options = {}; }

package/esm/locale.d.ts

@@ -10,7 +10,7 @@ export declare function extendLocale(name: string, config: LocaleConfig, cover?:
 export declare function removeLocaleData(name: string, key: Array<string> | string): void;
 export declare function makeTranslator(locale?: string): TranslateFn;
 export declare function getDefaultLocale(): string;
-export declare function setDefaultLocale(loacle: string): void;
+export declare function setDefaultLocale(locale: string): void;
 export interface LocaleProps {
     locale: string;
     translate: TranslateFn;

package/esm/locale.js

@@ -1,5 +1,5 @@
 /**
- * amis-core v3.4.0
+ * amis-core v3.4.1
  * Copyright 2018-2023 fex
  */
 
@@ -80,8 +80,8 @@ function makeTranslator(locale) {
 function getDefaultLocale() {
     return defaultLocale;
 }
-function setDefaultLocale(loacle) {
-    defaultLocale = loacle;
+function setDefaultLocale(locale) {
+    defaultLocale = locale;
 }
 var LocaleContext = React.createContext('');
 function localeable(ComposedComponent) {

package/esm/polyfills.js

@@ -1,5 +1,5 @@
 /**
- * amis-core v3.4.0
+ * amis-core v3.4.1
  * Copyright 2018-2023 fex
  */
 

package/esm/renderers/Form.d.ts

@@ -348,7 +348,7 @@ export default class Form extends React.Component<FormProps, object> {
     addHook(fn: () => any, type?: 'validate' | 'init' | 'flush'): () => void;
     removeHook(fn: () => any, type?: string): void;
     handleChange(value: any, name: string, submit: boolean, changePristine?: boolean): void;
-    formItemDispatchEvent(dispatchEvent: any): (type: string, data: any) => void;
+    formItemDispatchEvent(type: string, data: any): any;
     emitChange(submit: boolean): Promise<void>;
     handleBulkChange(values: Object, submit: boolean): void;
     handleFormSubmit(e: React.UIEvent<any>): any;

package/esm/renderers/Form.js

@@ -1,5 +1,5 @@
 /**
- * amis-core v3.4.0
+ * amis-core v3.4.1
  * Copyright 2018-2023 fex
  */
 
@@ -42,6 +42,8 @@ import 'react-overlays/useRootClose';
 import '../utils/SimpleMap.js';
 import 'lodash/mapValues';
 import 'lodash/camelCase';
+import 'lodash/map';
+import 'lodash/isEmpty';
 import 'uncontrollable';
 import 'hoist-non-react-statics';
 import '../utils/validations.js';
@@ -81,6 +83,7 @@ var Form = /** @class */ (function (_super) {
         _this.dispatchInited = _this.dispatchInited.bind(_this);
         _this.blockRouting = _this.blockRouting.bind(_this);
         _this.beforePageUnload = _this.beforePageUnload.bind(_this);
+        _this.formItemDispatchEvent = _this.formItemDispatchEvent.bind(_this);
         var store = props.store, canAccessSuperData = props.canAccessSuperData, persistData = props.persistData, simpleMode = props.simpleMode;
         store.setCanAccessSuperData(canAccessSuperData !== false);
         store.setPersistData(persistData);
@@ -441,10 +444,9 @@ var Form = /** @class */ (function (_super) {
             store.setLocalPersistData(persistDataKeys);
         }
     };
-    Form.prototype.formItemDispatchEvent = function (dispatchEvent) {
-        return function (type, data) {
-            dispatchEvent(type, data);
-        };
+    Form.prototype.formItemDispatchEvent = function (type, data) {
+        var dispatchEvent = this.props.dispatchEvent;
+        return dispatchEvent(type, data);
     };
     Form.prototype.emitChange = function (submit) {
         return __awaiter(this, void 0, void 0, function () {
@@ -969,7 +971,7 @@ var Form = /** @class */ (function (_super) {
         }
         var props = __assign(__assign({}, this.props), otherProps);
         var form = this.props.store;
-        var render = props.render, mode = props.mode, horizontal = props.horizontal, store = props.store, disabled = props.disabled, controlWidth = props.controlWidth, resolveDefinitions = props.resolveDefinitions, lazyChange = props.lazyChange; props.formLazyChange; var dispatchEvent = props.dispatchEvent, labelAlign = props.labelAlign, labelWidth = props.labelWidth; props.static; props.canAccessSuperData;
+        var render = props.render, mode = props.mode, horizontal = props.horizontal, store = props.store, disabled = props.disabled, controlWidth = props.controlWidth, resolveDefinitions = props.resolveDefinitions, lazyChange = props.lazyChange; props.formLazyChange; props.dispatchEvent; var labelAlign = props.labelAlign, labelWidth = props.labelWidth; props.static; props.canAccessSuperData;
         var subProps = {
             formStore: form,
             data: store.data,
@@ -996,7 +998,7 @@ var Form = /** @class */ (function (_super) {
             addHook: this.addHook,
             removeHook: this.removeHook,
             renderFormItems: this.renderFormItems,
-            formItemDispatchEvent: this.formItemDispatchEvent(dispatchEvent),
+            formItemDispatchEvent: this.formItemDispatchEvent,
             formPristine: form.pristine
             // value: (control as any)?.name
             //   ? getVariable(form.data, (control as any)?.name, canAccessSuperData)
@@ -1016,7 +1018,7 @@ var Form = /** @class */ (function (_super) {
         var WrapperComponent = this.props.wrapperComponent ||
             (/(?:\/|^)form\//.test($path) ? 'div' : 'form');
         var padDom = repeatCount(columnCount && Array.isArray(body)
-            ? columnCount - (body.length % columnCount)
+            ? (columnCount - (body.length % columnCount)) % columnCount
             : 0, function (index) { return (React.createElement("div", { className: cx("Form-item Form-item--".concat(mode, " is-placeholder")), key: index })); });
         return (React.createElement(WrapperComponent, { className: cx("Form", "Form--".concat(mode || 'normal'), columnCount ? "Form--column Form--column-".concat(columnCount) : null, staticClassName && isStatic ? staticClassName : className, isStatic ? 'Form--isStatic' : null), onSubmit: this.handleFormSubmit, noValidate: true },
             React.createElement("input", { type: "submit", style: { display: 'none' } }),

package/esm/renderers/Item.d.ts

@@ -496,9 +496,7 @@ export declare function asFormItem(config: Omit<FormItemConfig, 'component'>): (
         storeType: string;
     } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
         readonly fetcher: any;
-        readonly notify: any; /**
-         * 只读条件
-         */
+        readonly notify: any;
         readonly isCancel: (value: any) => boolean;
         readonly __: import("..").TranslateFn<any>;
         getStoreById(id: string): {
@@ -515,9 +513,7 @@ export declare function asFormItem(config: Omit<FormItemConfig, 'component'>): (
             readonly children: any[];
         } & {
             onChildStoreDispose(child: any): void;
-            syncProps(props: any, prevProps: any, list?: string[]): void; /**
-             * 配置当前表单项展示模式
-             */
+            syncProps(props: any, prevProps: any, list?: string[]): void;
             dispose: (callback?: (() => void) | undefined) => void;
             addChildId: (id: string) => void;
             removeChildId: (id: string) => void;
@@ -535,9 +531,7 @@ export declare function asFormItem(config: Omit<FormItemConfig, 'component'>): (
             readonly children: any[];
         } & {
             onChildStoreDispose(child: any): void;
-            syncProps(props: any, prevProps: any, list?: string[]): void; /**
-             * 配置当前表单项展示模式
-             */
+            syncProps(props: any, prevProps: any, list?: string[]): void;
             dispose: (callback?: (() => void) | undefined) => void;
             addChildId: (id: string) => void;
             removeChildId: (id: string) => void;
@@ -557,9 +551,7 @@ export declare function asFormItem(config: Omit<FormItemConfig, 'component'>): (
                 readonly children: any[];
             } & {
                 onChildStoreDispose(child: any): void;
-                syncProps(props: any, prevProps: any, list?: string[]): void; /**
-                 * 配置当前表单项展示模式
-                 */
+                syncProps(props: any, prevProps: any, list?: string[]): void;
                 dispose: (callback?: (() => void) | undefined) => void;
                 addChildId: (id: string) => void;
                 removeChildId: (id: string) => void;
@@ -577,9 +569,7 @@ export declare function asFormItem(config: Omit<FormItemConfig, 'component'>): (
                 readonly children: any[];
             } & {
                 onChildStoreDispose(child: any): void;
-                syncProps(props: any, prevProps: any, list?: string[]): void; /**
-                 * 配置当前表单项展示模式
-                 */
+                syncProps(props: any, prevProps: any, list?: string[]): void;
                 dispose: (callback?: (() => void) | undefined) => void;
                 addChildId: (id: string) => void;
                 removeChildId: (id: string) => void;
@@ -606,9 +596,7 @@ export declare function asFormItem(config: Omit<FormItemConfig, 'component'>): (
             readonly children: any[];
         } & {
             onChildStoreDispose(child: any): void;
-            syncProps(props: any, prevProps: any, list?: string[]): void; /**
-             * 配置当前表单项展示模式
-             */
+            syncProps(props: any, prevProps: any, list?: string[]): void;
             dispose: (callback?: (() => void) | undefined) => void;
             addChildId: (id: string) => void;
             removeChildId: (id: string) => void;
@@ -626,13 +614,13 @@ export declare function asFormItem(config: Omit<FormItemConfig, 'component'>): (
             readonly children: any[];
         } & {
             onChildStoreDispose(child: any): void;
-            syncProps(props: any, prevProps: any, list?: string[]): void; /**
-             * 配置当前表单项展示模式
-             */
+            syncProps(props: any, prevProps: any, list?: string[]): void;
             dispose: (callback?: (() => void) | undefined) => void;
             addChildId: (id: string) => void;
             removeChildId: (id: string) => void;
-        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>; /**
+         * 验证失败的提示信息
+         */
         removeStore(store: {
             id: string;
             path: string;
@@ -647,9 +635,7 @@ export declare function asFormItem(config: Omit<FormItemConfig, 'component'>): (
             readonly children: any[];
         } & {
             onChildStoreDispose(child: any): void;
-            syncProps(props: any, prevProps: any, list?: string[]): void; /**
-             * 配置当前表单项展示模式
-             */
+            syncProps(props: any, prevProps: any, list?: string[]): void;
             dispose: (callback?: (() => void) | undefined) => void;
             addChildId: (id: string) => void;
             removeChildId: (id: string) => void;
@@ -667,9 +653,7 @@ export declare function asFormItem(config: Omit<FormItemConfig, 'component'>): (
             readonly children: any[];
         } & {
             onChildStoreDispose(child: any): void;
-            syncProps(props: any, prevProps: any, list?: string[]): void; /**
-             * 配置当前表单项展示模式
-             */
+            syncProps(props: any, prevProps: any, list?: string[]): void;
             dispose: (callback?: (() => void) | undefined) => void;
             addChildId: (id: string) => void;
             removeChildId: (id: string) => void;
@@ -678,9 +662,7 @@ export declare function asFormItem(config: Omit<FormItemConfig, 'component'>): (
         storeType: import("mobx-state-tree").IType<string | undefined, string, string>;
     }, {
         readonly fetcher: any;
-        readonly notify: any; /**
-         * 只读条件
-         */
+        readonly notify: any;
         readonly isCancel: (value: any) => boolean;
         readonly __: import("..").TranslateFn<any>;
         getStoreById(id: string): {
@@ -697,9 +679,7 @@ export declare function asFormItem(config: Omit<FormItemConfig, 'component'>): (
             readonly children: any[];
         } & {
             onChildStoreDispose(child: any): void;
-            syncProps(props: any, prevProps: any, list?: string[]): void; /**
-             * 配置当前表单项展示模式
-             */
+            syncProps(props: any, prevProps: any, list?: string[]): void;
             dispose: (callback?: (() => void) | undefined) => void;
             addChildId: (id: string) => void;
             removeChildId: (id: string) => void;
@@ -717,9 +697,7 @@ export declare function asFormItem(config: Omit<FormItemConfig, 'component'>): (
             readonly children: any[];
         } & {
             onChildStoreDispose(child: any): void;
-            syncProps(props: any, prevProps: any, list?: string[]): void; /**
-             * 配置当前表单项展示模式
-             */
+            syncProps(props: any, prevProps: any, list?: string[]): void;
             dispose: (callback?: (() => void) | undefined) => void;
             addChildId: (id: string) => void;
             removeChildId: (id: string) => void;
@@ -739,9 +717,7 @@ export declare function asFormItem(config: Omit<FormItemConfig, 'component'>): (
                 readonly children: any[];
             } & {
                 onChildStoreDispose(child: any): void;
-                syncProps(props: any, prevProps: any, list?: string[]): void; /**
-                 * 配置当前表单项展示模式
-                 */
+                syncProps(props: any, prevProps: any, list?: string[]): void;
                 dispose: (callback?: (() => void) | undefined) => void;
                 addChildId: (id: string) => void;
                 removeChildId: (id: string) => void;
@@ -759,9 +735,7 @@ export declare function asFormItem(config: Omit<FormItemConfig, 'component'>): (
                 readonly children: any[];
             } & {
                 onChildStoreDispose(child: any): void;
-                syncProps(props: any, prevProps: any, list?: string[]): void; /**
-                 * 配置当前表单项展示模式
-                 */
+                syncProps(props: any, prevProps: any, list?: string[]): void;
                 dispose: (callback?: (() => void) | undefined) => void;
                 addChildId: (id: string) => void;
                 removeChildId: (id: string) => void;
@@ -788,9 +762,7 @@ export declare function asFormItem(config: Omit<FormItemConfig, 'component'>): (
             readonly children: any[];
         } & {
             onChildStoreDispose(child: any): void;
-            syncProps(props: any, prevProps: any, list?: string[]): void; /**
-             * 配置当前表单项展示模式
-             */
+            syncProps(props: any, prevProps: any, list?: string[]): void;
             dispose: (callback?: (() => void) | undefined) => void;
             addChildId: (id: string) => void;
             removeChildId: (id: string) => void;
@@ -808,13 +780,13 @@ export declare function asFormItem(config: Omit<FormItemConfig, 'component'>): (
             readonly children: any[];
         } & {
             onChildStoreDispose(child: any): void;
-            syncProps(props: any, prevProps: any, list?: string[]): void; /**
-             * 配置当前表单项展示模式
-             */
+            syncProps(props: any, prevProps: any, list?: string[]): void;
             dispose: (callback?: (() => void) | undefined) => void;
             addChildId: (id: string) => void;
             removeChildId: (id: string) => void;
-        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>; /**
+         * 验证失败的提示信息
+         */
         removeStore(store: {
             id: string;
             path: string;
@@ -829,9 +801,7 @@ export declare function asFormItem(config: Omit<FormItemConfig, 'component'>): (
             readonly children: any[];
         } & {
             onChildStoreDispose(child: any): void;
-            syncProps(props: any, prevProps: any, list?: string[]): void; /**
-             * 配置当前表单项展示模式
-             */
+            syncProps(props: any, prevProps: any, list?: string[]): void;
             dispose: (callback?: (() => void) | undefined) => void;
             addChildId: (id: string) => void;
             removeChildId: (id: string) => void;
@@ -849,9 +819,7 @@ export declare function asFormItem(config: Omit<FormItemConfig, 'component'>): (
             readonly children: any[];
         } & {
             onChildStoreDispose(child: any): void;
-            syncProps(props: any, prevProps: any, list?: string[]): void; /**
-             * 配置当前表单项展示模式
-             */
+            syncProps(props: any, prevProps: any, list?: string[]): void;
             dispose: (callback?: (() => void) | undefined) => void;
             addChildId: (id: string) => void;
             removeChildId: (id: string) => void;

package/esm/renderers/Item.js

@@ -1,5 +1,5 @@
 /**
- * amis-core v3.4.0
+ * amis-core v3.4.1
  * Copyright 2018-2023 fex
  */
 
@@ -27,7 +27,7 @@ import 'amis-formula';
 import '../utils/debug.js';
 import '../utils/errors.js';
 import 'lodash/isPlainObject';
-import 'classnames';
+import cx from 'classnames';
 import '../utils/filter.js';
 import 'lodash/isObject';
 import 'lodash/isString';
@@ -42,6 +42,7 @@ import 'react-overlays/useRootClose';
 import '../utils/SimpleMap.js';
 import 'lodash/mapValues';
 import 'lodash/camelCase';
+import { setThemeClassName } from '../utils/style-helper.js';
 import 'uncontrollable';
 import '../utils/validations.js';
 import '../utils/resolveCondition.js';
@@ -51,10 +52,10 @@ import PopOver from '../components/PopOver.js';
 import CustomStyle from '../components/CustomStyle.js';
 
 var getItemLabelClassName = function (props) {
-    var staticLabelClassName = props.staticLabelClassName, labelClassName = props.labelClassName;
+    var staticLabelClassName = props.staticLabelClassName, labelClassName = props.labelClassName, id = props.id, themeCss = props.themeCss;
     return props.static && staticLabelClassName
         ? staticLabelClassName
-        : labelClassName;
+        : cx(labelClassName, setThemeClassName('labelClassName', id, themeCss, 'item'));
 };
 var getItemInputClassName = function (props) {
     var staticInputClassName = props.staticInputClassName, inputClassName = props.inputClassName;
@@ -346,12 +347,12 @@ var FormItemWrap = /** @class */ (function (_super) {
                         typeof controlSize === 'string' &&
                         !!controlSize &&
                         controlSize !== 'full',
-                    _a), model === null || model === void 0 ? void 0 : model.errClassNames, getItemInputClassName(this.props)) }));
+                    _a), model === null || model === void 0 ? void 0 : model.errClassNames, setThemeClassName('wrapperCustomStyle', rest.id, rest.wrapperCustomStyle, 'item'), getItemInputClassName(this.props)) }));
         }
         return null;
     };
     FormItemWrap.prototype.render = function () {
-        var _a = this.props, formMode = _a.formMode, inputOnly = _a.inputOnly, wrap = _a.wrap, render = _a.render, model = _a.formItem, css = _a.css, themeCss = _a.themeCss, id = _a.id, labelClassName = _a.labelClassName, descriptionClassName = _a.descriptionClassName, env = _a.env;
+        var _a = this.props, formMode = _a.formMode, inputOnly = _a.inputOnly, wrap = _a.wrap, render = _a.render, model = _a.formItem, css = _a.css, themeCss = _a.themeCss, id = _a.id, wrapperCustomStyle = _a.wrapperCustomStyle, env = _a.env;
         var mode = this.props.mode || formMode;
         if (wrap === false || inputOnly) {
             return this.renderControl();
@@ -373,21 +374,14 @@ var FormItemWrap = /** @class */ (function (_super) {
                     themeCss: themeCss || css,
                     classNames: [
                         {
-                            key: 'labelClassName',
-                            value: labelClassName
-                        }
-                    ],
-                    id: id + '-label'
-                }, env: env }),
-            React.createElement(CustomStyle, { config: {
-                    themeCss: themeCss || css,
-                    classNames: [
+                            key: 'labelClassName'
+                        },
                         {
-                            key: 'descriptionClassName',
-                            value: descriptionClassName
+                            key: 'descriptionClassName'
                         }
                     ],
-                    id: id + '-description'
+                    wrapperCustomStyle: wrapperCustomStyle,
+                    id: id && id + '-item'
                 }, env: env })));
     };
     /**
@@ -396,7 +390,7 @@ var FormItemWrap = /** @class */ (function (_super) {
     FormItemWrap.layoutRenderers = {
         horizontal: function (props, renderControl) {
             var _a, _b, _c;
-            var className = props.className, style = props.style, cx = props.classnames, description = props.description, descriptionClassName = props.descriptionClassName, captionClassName = props.captionClassName, desc = props.desc, label = props.label, render = props.render, required = props.required, caption = props.caption, remark = props.remark, labelRemark = props.labelRemark, env = props.env, model = props.formItem, renderLabel = props.renderLabel, renderDescription = props.renderDescription, hint = props.hint, data = props.data, showErrorMsg = props.showErrorMsg, mobileUI = props.mobileUI; props.translate; var isStatic = props.static, staticClassName = props.staticClassName;
+            var className = props.className, style = props.style, cx = props.classnames, description = props.description, descriptionClassName = props.descriptionClassName, captionClassName = props.captionClassName, desc = props.desc, label = props.label, render = props.render, required = props.required, caption = props.caption, remark = props.remark, labelRemark = props.labelRemark, env = props.env, model = props.formItem, renderLabel = props.renderLabel, renderDescription = props.renderDescription, hint = props.hint, data = props.data, showErrorMsg = props.showErrorMsg, mobileUI = props.mobileUI; props.translate; var isStatic = props.static, staticClassName = props.staticClassName, id = props.id, wrapperCustomStyle = props.wrapperCustomStyle, themeCss = props.themeCss;
             // 强制不渲染 label 的话
             if (renderLabel === false) {
                 label = label === false ? false : '';
@@ -412,7 +406,7 @@ var FormItemWrap = /** @class */ (function (_super) {
                     },
                     _a["is-error"] = model && !model.valid,
                     _a["is-required"] = required,
-                    _a), model === null || model === void 0 ? void 0 : model.errClassNames), style: style },
+                    _a), model === null || model === void 0 ? void 0 : model.errClassNames, setThemeClassName('wrapperCustomStyle', id, wrapperCustomStyle, 'item')), style: style },
                 label !== false ? (React.createElement("label", { className: cx("Form-label", (_b = {},
                         _b["Form-itemColumn--".concat(typeof horizontal.leftFixed === 'string'
                             ? horizontal.leftFixed
@@ -467,19 +461,19 @@ var FormItemWrap = /** @class */ (function (_super) {
                         Array.isArray(model.errors) ? (React.createElement("ul", { className: cx("Form-feedback") }, model.errors.map(function (msg, key) { return (React.createElement("li", { key: key }, msg)); }))) : null,
                     renderDescription !== false && description
                         ? render('description', description, {
-                            className: cx("Form-description", descriptionClassName)
+                            className: cx("Form-description", descriptionClassName, setThemeClassName('descriptionClassName', id, themeCss, 'item'))
                         })
                         : null)));
         },
         normal: function (props, renderControl) {
             var _a;
-            var className = props.className, style = props.style, cx = props.classnames, desc = props.desc, description = props.description, label = props.label, render = props.render, required = props.required, caption = props.caption, remark = props.remark, labelRemark = props.labelRemark, env = props.env, descriptionClassName = props.descriptionClassName, captionClassName = props.captionClassName, model = props.formItem, renderLabel = props.renderLabel, renderDescription = props.renderDescription, hint = props.hint, data = props.data, showErrorMsg = props.showErrorMsg, mobileUI = props.mobileUI; props.translate; var isStatic = props.static, staticClassName = props.staticClassName;
+            var className = props.className, style = props.style, cx = props.classnames, desc = props.desc, description = props.description, label = props.label, render = props.render, required = props.required, caption = props.caption, remark = props.remark, labelRemark = props.labelRemark, env = props.env, descriptionClassName = props.descriptionClassName, captionClassName = props.captionClassName, model = props.formItem, renderLabel = props.renderLabel, renderDescription = props.renderDescription, hint = props.hint, data = props.data, showErrorMsg = props.showErrorMsg, mobileUI = props.mobileUI; props.translate; var isStatic = props.static, staticClassName = props.staticClassName, themeCss = props.themeCss, wrapperCustomStyle = props.wrapperCustomStyle, id = props.id;
             description = description || desc;
             return (React.createElement("div", { "data-role": "form-item", className: cx("Form-item Form-item--normal", isStatic && staticClassName ? staticClassName : className, (_a = {
                         'is-error': model && !model.valid
                     },
                     _a["is-required"] = required,
-                    _a), model === null || model === void 0 ? void 0 : model.errClassNames), style: style },
+                    _a), model === null || model === void 0 ? void 0 : model.errClassNames, setThemeClassName('wrapperCustomStyle', id, wrapperCustomStyle, 'item')), style: style },
                 label && renderLabel !== false ? (React.createElement("label", { className: cx("Form-label", getItemLabelClassName(props)) },
                     React.createElement("span", null,
                         label
@@ -524,7 +518,7 @@ var FormItemWrap = /** @class */ (function (_super) {
                         Array.isArray(model.errors) ? (React.createElement("ul", { className: cx("Form-feedback") }, model.errors.map(function (msg, key) { return (React.createElement("li", { key: key }, msg)); }))) : null,
                     renderDescription !== false && description
                         ? render('description', description, {
-                            className: cx("Form-description", descriptionClassName)
+                            className: cx("Form-description", descriptionClassName, setThemeClassName('descriptionClassName', id, themeCss, 'item'))
                         })
                         : null)) : (React.createElement(React.Fragment, null,
                     renderControl(),
@@ -554,20 +548,20 @@ var FormItemWrap = /** @class */ (function (_super) {
                         Array.isArray(model.errors) ? (React.createElement("ul", { className: cx("Form-feedback") }, model.errors.map(function (msg, key) { return (React.createElement("li", { key: key }, msg)); }))) : null,
                     renderDescription !== false && description
                         ? render('description', description, {
-                            className: cx("Form-description", descriptionClassName)
+                            className: cx("Form-description", descriptionClassName, setThemeClassName('descriptionClassName', id, themeCss, 'item'))
                         })
                         : null))));
         },
         inline: function (props, renderControl) {
             var _a;
-            var className = props.className, style = props.style, cx = props.classnames, desc = props.desc, description = props.description, label = props.label, render = props.render, required = props.required, caption = props.caption, descriptionClassName = props.descriptionClassName, captionClassName = props.captionClassName, model = props.formItem, remark = props.remark, labelRemark = props.labelRemark, env = props.env, hint = props.hint, renderLabel = props.renderLabel, renderDescription = props.renderDescription, data = props.data, showErrorMsg = props.showErrorMsg, mobileUI = props.mobileUI; props.translate; var isStatic = props.static, staticClassName = props.staticClassName;
+            var className = props.className, style = props.style, cx = props.classnames, desc = props.desc, description = props.description, label = props.label, render = props.render, required = props.required, caption = props.caption, descriptionClassName = props.descriptionClassName, captionClassName = props.captionClassName, model = props.formItem, remark = props.remark, labelRemark = props.labelRemark, env = props.env, hint = props.hint, renderLabel = props.renderLabel, renderDescription = props.renderDescription, data = props.data, showErrorMsg = props.showErrorMsg, mobileUI = props.mobileUI; props.translate; var isStatic = props.static, staticClassName = props.staticClassName, themeCss = props.themeCss, wrapperCustomStyle = props.wrapperCustomStyle, id = props.id;
             var labelWidth = props.labelWidth || props.formLabelWidth;
             description = description || desc;
             return (React.createElement("div", { "data-role": "form-item", className: cx("Form-item Form-item--inline", isStatic && staticClassName ? staticClassName : className, (_a = {
                         'is-error': model && !model.valid
                     },
                     _a["is-required"] = required,
-                    _a), model === null || model === void 0 ? void 0 : model.errClassNames), style: style },
+                    _a), model === null || model === void 0 ? void 0 : model.errClassNames, setThemeClassName('wrapperCustomStyle', id, wrapperCustomStyle, 'item')), style: style },
                 label && renderLabel !== false ? (React.createElement("label", { className: cx("Form-label", getItemLabelClassName(props)), style: labelWidth != null ? { width: labelWidth } : undefined },
                     React.createElement("span", null,
                         label
@@ -612,20 +606,20 @@ var FormItemWrap = /** @class */ (function (_super) {
                         Array.isArray(model.errors) ? (React.createElement("ul", { className: cx("Form-feedback") }, model.errors.map(function (msg, key) { return (React.createElement("li", { key: key }, msg)); }))) : null,
                     renderDescription !== false && description
                         ? render('description', description, {
-                            className: cx("Form-description", descriptionClassName)
+                            className: cx("Form-description", descriptionClassName, setThemeClassName('descriptionClassName', id, themeCss, 'item'))
                         })
                         : null)));
         },
         row: function (props, renderControl) {
             var _a;
-            var className = props.className, style = props.style, cx = props.classnames, desc = props.desc, description = props.description, label = props.label, render = props.render, required = props.required, caption = props.caption, remark = props.remark, labelRemark = props.labelRemark, env = props.env, descriptionClassName = props.descriptionClassName, captionClassName = props.captionClassName, model = props.formItem, renderLabel = props.renderLabel, renderDescription = props.renderDescription, hint = props.hint, data = props.data, showErrorMsg = props.showErrorMsg, mobileUI = props.mobileUI; props.translate; var isStatic = props.static, staticClassName = props.staticClassName;
+            var className = props.className, style = props.style, cx = props.classnames, desc = props.desc, description = props.description, label = props.label, render = props.render, required = props.required, caption = props.caption, remark = props.remark, labelRemark = props.labelRemark, env = props.env, descriptionClassName = props.descriptionClassName, captionClassName = props.captionClassName, model = props.formItem, renderLabel = props.renderLabel, renderDescription = props.renderDescription, hint = props.hint, data = props.data, showErrorMsg = props.showErrorMsg, mobileUI = props.mobileUI; props.translate; var isStatic = props.static, staticClassName = props.staticClassName, wrapperCustomStyle = props.wrapperCustomStyle, themeCss = props.themeCss, id = props.id;
             var labelWidth = props.labelWidth || props.formLabelWidth;
             description = description || desc;
             return (React.createElement("div", { "data-role": "form-item", className: cx("Form-item Form-item--row", isStatic && staticClassName ? staticClassName : className, (_a = {
                         'is-error': model && !model.valid
                     },
                     _a["is-required"] = required,
-                    _a), model === null || model === void 0 ? void 0 : model.errClassNames), style: style },
+                    _a), model === null || model === void 0 ? void 0 : model.errClassNames, setThemeClassName('wrapperCustomStyle', id, wrapperCustomStyle, 'item')), style: style },
                 React.createElement("div", { className: cx('Form-rowInner') },
                     label && renderLabel !== false ? (React.createElement("label", { className: cx("Form-label", getItemLabelClassName(props)), style: labelWidth != null ? { width: labelWidth } : undefined },
                         React.createElement("span", null,
@@ -667,7 +661,7 @@ var FormItemWrap = /** @class */ (function (_super) {
                     Array.isArray(model.errors) ? (React.createElement("ul", { className: cx('Form-feedback') }, model.errors.map(function (msg, key) { return (React.createElement("li", { key: key }, msg)); }))) : null,
                 description && renderDescription !== false
                     ? render('description', description, {
-                        className: cx("Form-description", descriptionClassName)
+                        className: cx("Form-description", descriptionClassName, setThemeClassName('descriptionClassName', id, themeCss, 'item'))
                     })
                     : null));
         }