@atlaskit/form 8.8.2 → 8.8.4

package/dist/cjs/messages.js

@@ -1,54 +1,36 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ValidMessage = exports.HelperMessage = exports.ErrorMessage = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@emotion/react");
-
 var _success = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/success"));
-
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _components = require("@atlaskit/theme/components");
-
 var _constants = require("@atlaskit/theme/constants");
-
 var _typography = require("@atlaskit/theme/typography");
-
 var _field = require("./field");
-
 /** @jsx jsx */
+
 var gridSize = (0, _constants.gridSize)();
-var fontFamily = (0, _constants.fontFamily)(); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+var fontFamily = (0, _constants.fontFamily)();
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var lightH200Styles = (0, _react2.css)((0, _typography.h200)({
   theme: {
     mode: 'light'
   }
-})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
+}));
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var darkH200Styles = (0, _react2.css)((0, _typography.h200)({
   theme: {
     mode: 'dark'
   }
 }));
-var messageErrorColorStyles = (0, _react2.css)({
-  color: "var(--ds-text-danger, #AE2A19)"
-});
-var messageNeutralColorStyles = (0, _react2.css)({
-  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
-});
-var messageValidColorStyles = (0, _react2.css)({
-  color: "var(--ds-text-success, #216E4E)"
-});
 var messageStyles = (0, _react2.css)({
   display: 'flex',
   marginTop: "".concat(gridSize * 0.5, "px"),
@@ -56,32 +38,60 @@ var messageStyles = (0, _react2.css)({
   fontFamily: "".concat(fontFamily),
   fontWeight: 'normal'
 });
+var messageAppearanceStyles = {
+  default: (0, _react2.css)({
+    color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
+  }),
+  error: (0, _react2.css)({
+    color: "var(--ds-text-danger, #AE2A19)"
+  }),
+  valid: (0, _react2.css)({
+    color: "var(--ds-text-success, #216E4E)"
+  })
+};
 var iconWrapperStyles = (0, _react2.css)({
   display: 'flex'
 });
-
 var IconWrapper = function IconWrapper(_ref) {
   var children = _ref.children;
   return (0, _react2.jsx)("span", {
     css: iconWrapperStyles
   }, children);
 };
-
+var messageIcons = {
+  error: (0, _react2.jsx)(_error.default, {
+    size: "small",
+    label: "error"
+  }),
+  valid: (0, _react2.jsx)(_success.default, {
+    size: "small",
+    label: "success"
+  })
+};
 var Message = function Message(_ref2) {
   var children = _ref2.children,
-      error = _ref2.error,
-      valid = _ref2.valid,
-      fieldId = _ref2.fieldId,
-      testId = _ref2.testId;
-
+    _ref2$appearance = _ref2.appearance,
+    appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
+    fieldId = _ref2.fieldId,
+    testId = _ref2.testId;
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-      mode = _useGlobalTheme.mode;
-
+    mode = _useGlobalTheme.mode;
+  var icon = messageIcons[appearance];
+
+  /**
+   * The wrapping span is necessary to preserve spaces between children.
+   * Otherwise the flex layout of the message will remove any whitespace
+   * between children.
+   *
+   * If the child is just a string, this is not required and we can use one
+   * less DOM element.
+   */
+  var content = typeof children === 'string' ? children : (0, _react2.jsx)("span", null, children);
   return (0, _react2.jsx)("div", {
-    css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, error ? messageErrorColorStyles : valid ? messageValidColorStyles : messageNeutralColorStyles],
+    css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, messageAppearanceStyles[appearance]],
     "data-testid": testId,
     id: fieldId
-  }, children);
+  }, icon && (0, _react2.jsx)(IconWrapper, null, icon), content);
 };
 
 /**
@@ -93,7 +103,7 @@ var Message = function Message(_ref2) {
  */
 var HelperMessage = function HelperMessage(_ref3) {
   var children = _ref3.children,
-      testId = _ref3.testId;
+    testId = _ref3.testId;
   return (0, _react2.jsx)(_field.FieldId.Consumer, null, function (fieldId) {
     return (0, _react2.jsx)(Message, {
       fieldId: fieldId ? "".concat(fieldId, "-helper") : undefined,
@@ -101,6 +111,7 @@ var HelperMessage = function HelperMessage(_ref3) {
     }, children);
   });
 };
+
 /**
  * __Error message__
  *
@@ -108,24 +119,19 @@ var HelperMessage = function HelperMessage(_ref3) {
  * 'Invalid username, needs to be more than 4 characters'.
  *
  */
-
-
 exports.HelperMessage = HelperMessage;
-
 var ErrorMessage = function ErrorMessage(_ref4) {
   var children = _ref4.children,
-      testId = _ref4.testId;
+    testId = _ref4.testId;
   return (0, _react2.jsx)(_field.FieldId.Consumer, null, function (fieldId) {
     return (0, _react2.jsx)(Message, {
-      error: true,
+      appearance: "error",
       fieldId: fieldId ? "".concat(fieldId, "-error") : undefined,
       testId: testId
-    }, (0, _react2.jsx)(IconWrapper, null, (0, _react2.jsx)(_error.default, {
-      size: "small",
-      label: "error"
-    })), children);
+    }, children);
   });
 };
+
 /**
  * __Valid message__
  *
@@ -133,23 +139,16 @@ var ErrorMessage = function ErrorMessage(_ref4) {
  * a helper message could be 'Nice one, this username is available'.
  *
  */
-
-
 exports.ErrorMessage = ErrorMessage;
-
 var ValidMessage = function ValidMessage(_ref5) {
   var children = _ref5.children,
-      testId = _ref5.testId;
+    testId = _ref5.testId;
   return (0, _react2.jsx)(_field.FieldId.Consumer, null, function (fieldId) {
     return (0, _react2.jsx)(Message, {
+      appearance: "valid",
       fieldId: fieldId ? "".concat(fieldId, "-valid") : undefined,
-      testId: testId,
-      valid: true
-    }, (0, _react2.jsx)(IconWrapper, null, (0, _react2.jsx)(_success.default, {
-      size: "small",
-      label: "success"
-    })), children);
+      testId: testId
+    }, children);
   });
 };
-
 exports.ValidMessage = ValidMessage;

package/dist/cjs/range-field.js

@@ -1,30 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _field = _interopRequireDefault(require("./field"));
-
 var _excluded = ["children"],
-    _excluded2 = ["isInvalid", "isRequired"],
-    _excluded3 = ["fieldProps"];
-
+  _excluded2 = ["isInvalid", "isRequired"],
+  _excluded3 = ["fieldProps"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /**
  * __Range field__
  *
@@ -36,8 +26,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 var RangeField = function RangeField(props) {
   var children = props.children,
-      strippedProps = (0, _objectWithoutProperties2.default)(props, _excluded); // isInvalid and isRequired are specifically invalid for range inputs
-
+    strippedProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  // isInvalid and isRequired are specifically invalid for range inputs
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
@@ -45,16 +35,15 @@ var RangeField = function RangeField(props) {
       transform: Number
     }), function (_ref) {
       var _ref$fieldProps = _ref.fieldProps,
-          isInvalid = _ref$fieldProps.isInvalid,
-          isRequired = _ref$fieldProps.isRequired,
-          fieldProps = (0, _objectWithoutProperties2.default)(_ref$fieldProps, _excluded2),
-          rest = (0, _objectWithoutProperties2.default)(_ref, _excluded3);
+        isInvalid = _ref$fieldProps.isInvalid,
+        isRequired = _ref$fieldProps.isRequired,
+        fieldProps = (0, _objectWithoutProperties2.default)(_ref$fieldProps, _excluded2),
+        rest = (0, _objectWithoutProperties2.default)(_ref, _excluded3);
       return children(_objectSpread({
         fieldProps: fieldProps
       }, rest));
     })
   );
 };
-
 var _default = RangeField;
 exports.default = _default;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/form",
-	"version": "8.8.2",
+	"version": "8.8.4",
 	"sideEffects": false
 }

package/dist/es2019/checkbox-field.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback } from 'react';
 import Field from './field';
-
 /**
  * __Checkbox field__
  *
@@ -17,8 +16,9 @@ const CheckboxField = props => {
     defaultIsChecked = false,
     value,
     ...rest
-  } = props; // Maintains a memoised list of the default values
+  } = props;
 
+  // Maintains a memoised list of the default values
   const defaultValue = useCallback((currentValue = []) => defaultIsChecked && value !== undefined ? [...currentValue, value] : currentValue, [value, defaultIsChecked]);
   return value !== undefined ? /*#__PURE__*/React.createElement(Field, _extends({}, rest, {
     defaultValue: defaultValue,
@@ -30,7 +30,8 @@ const CheckboxField = props => {
     },
     ...others
   }) => children({
-    fieldProps: { ...otherFieldProps,
+    fieldProps: {
+      ...otherFieldProps,
       isChecked: !!fieldValue.find(v => v === value),
       value
     },
@@ -45,14 +46,14 @@ const CheckboxField = props => {
     },
     ...others
   }) => children({
-    fieldProps: { ...otherFieldProps,
+    fieldProps: {
+      ...otherFieldProps,
       isChecked: fieldValue,
       value
     },
     ...others
   }));
 };
-
 CheckboxField.defaultProps = {
   defaultIsChecked: false
 };

package/dist/es2019/field.js

@@ -17,56 +17,48 @@ const requiredIndicatorStyles = css({
   color: `var(--ds-text-danger, ${R400})`,
   fontFamily
 });
-
 function isEvent(event) {
   return Boolean(event && event.target);
 }
-
 function isFunction(x) {
   return typeof x === 'function';
 }
-
 /**
  * __Field id__
  *
  * A field id uses the context API. It provides the id of the field to message components. This links the message with the field of screenreaders.
  */
 export const FieldId = /*#__PURE__*/createContext(undefined);
-
 function usePreviousRef(current) {
-  const ref = useRef(current); // will be updated on the next render
+  const ref = useRef(current);
 
+  // will be updated on the next render
   useEffect(() => {
     ref.current = current;
-  }); // return the existing current (pre render)
+  });
 
+  // return the existing current (pre render)
   return ref;
 }
-
 function isShallowEqual(previousValue, currentValue) {
   if (previousValue === currentValue) {
     return true;
-  } // not checking functions
-
+  }
 
+  // not checking functions
   if (typeof previousValue === 'function' && typeof currentValue === 'function') {
     return true;
   }
-
   if (Array.isArray(previousValue) && Array.isArray(currentValue)) {
     return JSON.stringify(previousValue) === JSON.stringify(currentValue);
   }
-
   if (typeof previousValue === 'object' && typeof currentValue === 'object') {
     return JSON.stringify(previousValue) === JSON.stringify(currentValue);
   }
-
   return false;
 }
-
 export default function Field(props) {
   var _getCurrentValue;
-
   const {
     registerField,
     getCurrentValue
@@ -74,19 +66,18 @@ export default function Field(props) {
   const isDisabled = useContext(IsDisabledContext) || props.isDisabled || false;
   const defaultValue = isFunction(props.defaultValue) ? props.defaultValue() : props.defaultValue;
   const latestPropsRef = usePreviousRef(props);
+
   /**
    * HACK: defaultValue can potentially be an array or object which cannot be
    * passed directly into a `useEffect` dependency array, since it will trigger
    * the hook every time.
    */
-
   const isDefaultValueChanged = !isShallowEqual(latestPropsRef.current.defaultValue, props.defaultValue);
   const [state, setState] = useState({
     fieldProps: {
       onChange: () => {},
       onBlur: () => {},
       onFocus: () => {},
-
       /* Previously, defaultValue was being set as undefined in Field.defaultProps, which
        * effectively made it an optional prop to external consumers of Field. However the
        * prop types defined defaultValue as required, so inside the component it was not
@@ -119,7 +110,6 @@ export default function Field(props) {
     if (process.env.NODE_ENV !== 'production' && !process.env.CI) {
       invariant(latestPropsRef.current.name, '@atlaskit/form: Field components have a required name prop');
     }
-
     function fieldStateToMeta(value = {}) {
       return {
         dirty: value.dirty || false,
@@ -133,7 +123,6 @@ export default function Field(props) {
         validating: !!value.validating
       };
     }
-
     const unregister = registerField(latestPropsRef.current.name,
     /**
      * Similar as for setting initial state value.
@@ -144,47 +133,44 @@ export default function Field(props) {
      * the key prop to re-run validation.
      */
     // @ts-ignore
-    isDefaultValueChanged || // @ts-ignore
+    isDefaultValueChanged ||
+    // @ts-ignore
     isFunction(latestPropsRef.current.defaultValue) ? latestPropsRef.current.defaultValue : latestStateRef.current.fieldProps.value, fieldState => {
       /**
        * Do not update dirtySinceLastSubmit until submission has finished.
        */
       const modifiedDirtySinceLastSubmit = fieldState.submitting ? latestStateRef.current.meta.dirtySinceLastSubmit : fieldState.dirtySinceLastSubmit;
+
       /**
        * Do not update submitFailed until submission has finished.
        */
-
       const modifiedSubmitFailed = fieldState.submitting ? latestStateRef.current.meta.submitFailed : fieldState.submitFailed;
+
       /**
        * Do not use submitError if the value has changed.
        */
-
       const modifiedSubmitError = modifiedDirtySinceLastSubmit && latestPropsRef.current.validate ? undefined : fieldState.submitError;
       const modifiedError = modifiedSubmitError || (fieldState.touched || fieldState.dirty) && fieldState.error;
+
       /**
        * If there has been a submit error, then use logic in modifiedError to determine validity,
        * so we can determine when there is a submit error which we do not want to display
        * because the value has been changed.
        */
-
       const modifiedValid = modifiedSubmitFailed ? modifiedError === undefined : fieldState.valid;
-
       function getTransform(eventOrValue, currentValue) {
         if (latestPropsRef.current.transform) {
           return latestPropsRef.current.transform(eventOrValue, currentValue);
         }
-
         if (isEvent(eventOrValue)) {
           const {
             currentTarget
           } = eventOrValue;
-
           if (currentTarget.type === 'checkbox') {
             //@ts-expect-error TODO Fix legit TypeScript 3.9.6 improved inference error
             if (currentTarget.checked) {
               return currentTarget.value || true;
             }
-
             return currentTarget.value ? undefined : false;
           } else if (currentTarget) {
             return currentTarget.value;
@@ -193,7 +179,6 @@ export default function Field(props) {
           return eventOrValue;
         }
       }
-
       setState({
         fieldProps: {
           onChange: e => {
@@ -204,7 +189,6 @@ export default function Field(props) {
           value: fieldState.value
         },
         error: modifiedError || undefined,
-
         /**
          * The following parameters are optionally typed in final-form to indicate that not all parameters need
          * to be subscribed to. We cast them as booleans (using || false), since this is what they are semantically.
@@ -226,7 +210,6 @@ export default function Field(props) {
     }, {
       getValidator: () => function validate(value, formState, fieldState) {
         const supplied = latestPropsRef.current.validate;
-
         if (supplied && fieldState) {
           return supplied(value, formState, fieldStateToMeta(fieldState));
         }
@@ -234,11 +217,13 @@ export default function Field(props) {
     });
     return unregister;
   }, [latestPropsRef, latestStateRef, registerField, props.name, isDefaultValueChanged]);
-  const fieldId = useMemo( // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
+  const fieldId = useMemo(
+  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
   () => props.id ? props.id : `${props.name}-${uid({
     id: props.name
   })}`, [props.id, props.name]);
-  const extendedFieldProps = { ...state.fieldProps,
+  const extendedFieldProps = {
+    ...state.fieldProps,
     name: props.name,
     isDisabled,
     isInvalid: Boolean(state.error),

package/dist/es2019/fieldset.js

@@ -1,5 +1,7 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
+import { subtleHeading } from '@atlaskit/theme/colors';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
@@ -13,20 +15,29 @@ const fieldsetLabelStyles = css({
 });
 const fieldSetStyles = css({
   marginTop: `${gridSize}px`
-}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+});
 
-const lightH200Styles = css(h200({
+/**
+ * TODO: Address duplication with packages/design-system/form/src/label.tsx
+ * in https://product-fabric.atlassian.net/browse/DSP-7731
+ */
+const getFieldsetLabelDynamicStyles = mode => css([h200({
   theme: {
-    mode: 'light'
+    mode
   }
-})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+}), {
+  color: `var(--ds-text-subtle, ${subtleHeading({
+    theme: {
+      mode
+    }
+  })})`
+}]);
 
-const darkH200Styles = css(h200({
-  theme: {
-    mode: 'dark'
-  }
-}));
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+const lightH200Styles = getFieldsetLabelDynamicStyles('light');
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+const darkH200Styles = getFieldsetLabelDynamicStyles('dark');
 const FieldsetLabel = ({
   children
 }) => {
@@ -37,6 +48,7 @@ const FieldsetLabel = ({
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, fieldsetLabelStyles]
   }, children);
 };
+
 /**
  * __Fieldset__
  *
@@ -47,8 +59,6 @@ const FieldsetLabel = ({
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields)
  */
-
-
 const Fieldset = ({
   children,
   legend
@@ -57,5 +67,4 @@ const Fieldset = ({
     css: fieldSetStyles
   }, legend && jsx("legend", null, jsx(FieldsetLabel, null, legend)), children);
 };
-
 export default Fieldset;

package/dist/es2019/form-footer.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 const gridSize = getGridSize();
@@ -10,6 +11,7 @@ const formFooterWrapperStyles = css({
 const justifyContentStyles = css({
   justifyContent: 'flex-start'
 });
+
 /**
  * __Form footer__
  *
@@ -19,7 +21,6 @@ const justifyContentStyles = css({
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  */
-
 export default function FormFooter({
   align = 'end',
   children

package/dist/es2019/form-header.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
@@ -22,20 +23,20 @@ const formHeaderTitleStyles = css({
 });
 const formHeaderWrapperStyles = css({
   fontFamily: `${fontFamily}`
-}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+});
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 const darkH700Styles = css(h700({
   theme: {
     mode: 'dark'
   }
-})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
+}));
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 const lightH700Styles = css(h700({
   theme: {
     mode: 'light'
   }
 }));
-
 const FormHeaderContent = ({
   children
 }) => {
@@ -43,7 +44,6 @@ const FormHeaderContent = ({
     css: formHeaderContentStyles
   }, children);
 };
-
 const FormHeaderDescription = ({
   children
 }) => {
@@ -51,7 +51,6 @@ const FormHeaderDescription = ({
     css: formHeaderDescriptionStyles
   }, children);
 };
-
 const FormHeaderTitle = ({
   children
 }) => {
@@ -62,7 +61,6 @@ const FormHeaderTitle = ({
     css: [mode === 'light' ? lightH700Styles : darkH700Styles, formHeaderTitleStyles]
   }, children);
 };
-
 const FormHeaderWrapper = ({
   children
 }) => {
@@ -70,6 +68,7 @@ const FormHeaderWrapper = ({
     css: formHeaderWrapperStyles
   }, children);
 };
+
 /**
  * __Form header__
  *
@@ -80,8 +79,6 @@ const FormHeaderWrapper = ({
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  */
-
-
 const FormHeader = ({
   children,
   description,
@@ -89,6 +86,5 @@ const FormHeader = ({
 }) => {
   return jsx(FormHeaderWrapper, null, title && jsx(FormHeaderTitle, null, title), description && jsx(FormHeaderDescription, null, description), children && jsx(FormHeaderContent, null, children));
 };
-
 export default FormHeader;
 export { FormHeaderContent, FormHeaderDescription, FormHeaderTitle };