@dnb/eufemia 10.18.0 → 10.20.0

package/cjs/components/flex/utils.d.ts

@@ -1,18 +1,46 @@
 import React from 'react';
 import { SpaceType, SpacingProps } from '../../shared/types';
 import { End, Start } from './types';
-export declare const pickSpacingProps: <Props extends SpacingProps>(props: Props) => SpacingProps;
 export declare const omitSpacingProps: <Props extends SpacingProps>(props: Props) => Omit<Props, "space" | "innerSpace" | keyof import("../space/types").SpacingElementProps>;
-export declare const getSpaceValue: (type: Start | End, element: React.ReactChild | React.ReactFragment | React.ReactPortal) => SpaceType | undefined;
+/**
+ * Picks the spacing props from the given props object.
+ * @template Props - The type of the props object.
+ * @param {Props} props - The props object.
+ * @returns {SpacingProps} - The spacing props object.
+ */
+export declare function pickSpacingProps<Props extends SpacingProps>(props: Props): SpacingProps;
+/**
+ * Retrieves the space value of a Flex component based on the specified type and element.
+ * @param type - The type of space value to retrieve (Start or End).
+ * @param element - The React element to extract the space value from.
+ * @returns The space value of the element, or undefined if it cannot be determined.
+ */
+export declare function getSpaceValue(type: Start | End, element: React.ReactNode): SpaceType | undefined;
+/**
+ * Checks if the provided element is a heading element.
+ * @param element - The element to check.
+ * @returns `true` if the element is a heading element, `false` otherwise.
+ */
 export declare function isHeadingElement(element: React.ReactNode & {
     _isHeadingElement?: boolean;
 }): boolean;
-export declare const isEufemiaElement: (element: any) => boolean;
 /**
- * Is the requested element a component that can receive Eufemia space props (space, top, bottom, left and right)?
+ * Determines the spacing variant of a React node element.
+ * @param element - The React node element to check.
+ * @returns The spacing variant (true, false or "children") of the element, or undefined if it does not support spacing props.
+ */
+export declare function getSpaceVariant(element: React.ReactNode): any;
+/**
+ * Renders an element with spacing props applied.
+ * If the element is a component that accepts spacing props, the props are directly applied.
+ * If the element is a component that has children and accepts spacing props, the props are applied to the children.
+ * If the element does not accept spacing props, the element is returned as is.
+ *
+ * @param element - The element to render with spacing props.
+ * @param spaceProps - The spacing props to apply.
+ * @returns The rendered element with spacing props applied.
  */
-export declare const isSpacePropsComponent: (element: React.ReactNode) => boolean;
-export declare const renderWithSpacing: (element: React.ReactNode, props: SpacingProps & {
+export declare function renderWithSpacing(element: React.ReactNode, spaceProps: SpacingProps & {
     key?: string;
     className?: string;
-}) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode>;
+}): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode>;

package/cjs/components/flex/utils.js

@@ -3,17 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isEufemiaElement = exports.getSpaceValue = void 0;
+exports.getSpaceValue = getSpaceValue;
+exports.getSpaceVariant = getSpaceVariant;
 exports.isHeadingElement = isHeadingElement;
-exports.renderWithSpacing = exports.pickSpacingProps = exports.omitSpacingProps = exports.isSpacePropsComponent = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.omitSpacingProps = void 0;
+exports.pickSpacingProps = pickSpacingProps;
+exports.renderWithSpacing = renderWithSpacing;
+var _react = _interopRequireWildcard(require("react"));
 var _Space = _interopRequireDefault(require("../space/Space"));
 var _SpacingUtils = require("../space/SpacingUtils");
-var EufemiaElements = _interopRequireWildcard(require("../../elements"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const pickSpacingProps = props => {
+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) { _defineProperty(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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+const omitSpacingProps = _SpacingUtils.removeSpaceProps;
+exports.omitSpacingProps = omitSpacingProps;
+function pickSpacingProps(props) {
   return {
     space: props === null || props === void 0 ? void 0 : props.space,
     top: props === null || props === void 0 ? void 0 : props.top,
@@ -21,44 +30,67 @@ const pickSpacingProps = props => {
     left: props === null || props === void 0 ? void 0 : props.left,
     right: props === null || props === void 0 ? void 0 : props.right
   };
-};
-exports.pickSpacingProps = pickSpacingProps;
-const omitSpacingProps = _SpacingUtils.removeSpaceProps;
-exports.omitSpacingProps = omitSpacingProps;
-const getSpaceValue = (type, element) => {
+}
+function getSpaceValue(type, element) {
   var _element$props$type, _element$props, _element$props2;
   if (!_react.default.isValidElement(element)) {
     return;
   }
   return (_element$props$type = (_element$props = element.props) === null || _element$props === void 0 ? void 0 : _element$props[type]) !== null && _element$props$type !== void 0 ? _element$props$type : typeof ((_element$props2 = element.props) === null || _element$props2 === void 0 ? void 0 : _element$props2.space) === 'object' ? element.props.space[type] : undefined;
-};
-exports.getSpaceValue = getSpaceValue;
+}
 function isHeadingElement(element) {
   var _element$type;
   return _react.default.isValidElement(element) && (element === null || element === void 0 ? void 0 : (_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type['_isHeadingElement']) === true;
 }
-const isEufemiaElement = element => {
-  return Object.values(EufemiaElements).some(eufemiaElement => (element === null || element === void 0 ? void 0 : element.type) === eufemiaElement);
-};
-exports.isEufemiaElement = isEufemiaElement;
-const isSpacePropsComponent = element => {
-  var _element$type2;
-  if (_react.default.isValidElement(element) && typeof (element === null || element === void 0 ? void 0 : (_element$type2 = element.type) === null || _element$type2 === void 0 ? void 0 : _element$type2['_supportsSpacingProps']) === 'boolean') {
-    var _element$type3;
-    return element === null || element === void 0 ? void 0 : (_element$type3 = element.type) === null || _element$type3 === void 0 ? void 0 : _element$type3['_supportsSpacingProps'];
-  }
-  if (isEufemiaElement(element)) {
-    return true;
+function getSpaceVariant(element) {
+  if (_react.default.isValidElement(element)) {
+    var _element$type2, _element$props3;
+    if ((element === null || element === void 0 ? void 0 : element.type) === _react.Fragment) {
+      return 'children';
+    }
+    const check = element === null || element === void 0 ? void 0 : (_element$type2 = element.type) === null || _element$type2 === void 0 ? void 0 : _element$type2['_supportsSpacingProps'];
+    if (typeof check !== 'undefined') {
+      return check;
+    }
+    const keys = ['space', 'top', 'right', 'bottom', 'left'];
+    const props = (_element$props3 = element === null || element === void 0 ? void 0 : element.props) !== null && _element$props3 !== void 0 ? _element$props3 : {};
+    if (keys.some(key => key in props)) {
+      return true;
+    }
   }
   return undefined;
-};
-exports.isSpacePropsComponent = isSpacePropsComponent;
-const renderWithSpacing = (element, props) => {
-  const takesSpaceProps = isSpacePropsComponent(element);
-  if (takesSpaceProps === false) {
+}
+function renderWithSpacing(element, spaceProps) {
+  const variant = getSpaceVariant(element);
+  if (variant === false) {
     return element;
   }
-  return takesSpaceProps ? _react.default.cloneElement(element, props) : _react.default.createElement(_Space.default, props, element);
-};
-exports.renderWithSpacing = renderWithSpacing;
+  if (variant === 'children') {
+    return _react.default.Children.toArray(element).map(child => {
+      var _child$props;
+      const children = child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children;
+      return _react.default.Children.toArray(children).map((element, i) => {
+        return _react.default.cloneElement(child, _objectSpread({
+          key: i
+        }, child === null || child === void 0 ? void 0 : child.props), wrapWithSpace({
+          element,
+          spaceProps
+        }));
+      });
+    });
+  }
+  return wrapWithSpace({
+    element,
+    spaceProps,
+    variant
+  });
+}
+function wrapWithSpace(_ref) {
+  let {
+    element,
+    spaceProps,
+    variant = null
+  } = _ref;
+  return (variant !== null && variant !== void 0 ? variant : getSpaceVariant(element) === true) ? _react.default.cloneElement(element, spaceProps) : _react.default.createElement(_Space.default, spaceProps, element);
+}
 //# sourceMappingURL=utils.js.map

package/cjs/components/flex/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":["_react","_interopRequireDefault","require","_Space","_SpacingUtils","EufemiaElements","_interopRequireWildcard","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","pickSpacingProps","props","space","top","bottom","left","right","exports","omitSpacingProps","removeSpaceProps","getSpaceValue","type","element","_element$props$type","_element$props","_element$props2","React","isValidElement","undefined","isHeadingElement","_element$type","isEufemiaElement","values","some","eufemiaElement","isSpacePropsComponent","_element$type2","_element$type3","renderWithSpacing","takesSpaceProps","cloneElement","createElement"],"sources":["../../../../src/components/flex/utils.tsx"],"sourcesContent":["import React from 'react'\nimport { SpaceType, SpacingProps } from '../../shared/types'\nimport Space from '../space/Space'\nimport { removeSpaceProps } from '../space/SpacingUtils'\nimport * as EufemiaElements from '../../elements'\nimport { End, Start } from './types'\n\nexport const pickSpacingProps = <Props extends SpacingProps>(\n  props: Props\n): SpacingProps => {\n  return {\n    space: props?.space,\n    top: props?.top,\n    bottom: props?.bottom,\n    left: props?.left,\n    right: props?.right,\n  }\n}\n\nexport const omitSpacingProps = removeSpaceProps\n\nexport const getSpaceValue = (\n  type: Start | End,\n  element: React.ReactChild | React.ReactFragment | React.ReactPortal\n): SpaceType | undefined => {\n  if (!React.isValidElement(element)) {\n    return\n  }\n\n  return (\n    element.props?.[type] ??\n    (typeof element.props?.space === 'object'\n      ? element.props.space[type]\n      : undefined)\n  )\n}\n\nexport function isHeadingElement(\n  element: React.ReactNode & { _isHeadingElement?: boolean }\n): boolean {\n  return (\n    React.isValidElement(element) &&\n    element?.type?.['_isHeadingElement'] === true\n  )\n}\n\nexport const isEufemiaElement = (element): boolean => {\n  return Object.values(EufemiaElements).some(\n    (eufemiaElement) => element?.type === eufemiaElement\n  )\n}\n\n/**\n * Is the requested element a component that can receive Eufemia space props (space, top, bottom, left and right)?\n */\nexport const isSpacePropsComponent = (\n  element: React.ReactNode\n): boolean => {\n  if (\n    React.isValidElement(element) &&\n    typeof element?.type?.['_supportsSpacingProps'] === 'boolean'\n  ) {\n    return element?.type?.['_supportsSpacingProps']\n  }\n\n  if (isEufemiaElement(element)) {\n    return true\n  }\n\n  return undefined\n}\n\nexport const renderWithSpacing = (\n  element: React.ReactNode,\n  props: SpacingProps & { key?: string; className?: string }\n) => {\n  const takesSpaceProps = isSpacePropsComponent(element)\n\n  if (takesSpaceProps === false) {\n    return element\n  }\n\n  return takesSpaceProps ? (\n    React.cloneElement(element as React.ReactElement<unknown>, props)\n  ) : (\n    <Space {...props}>{element}</Space>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"utils.js","names":["_react","_interopRequireWildcard","require","_Space","_interopRequireDefault","_SpacingUtils","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","omitSpacingProps","removeSpaceProps","exports","pickSpacingProps","props","space","top","bottom","left","right","getSpaceValue","type","element","_element$props$type","_element$props","_element$props2","React","isValidElement","isHeadingElement","_element$type","getSpaceVariant","_element$type2","_element$props3","Fragment","check","some","renderWithSpacing","spaceProps","variant","Children","toArray","map","child","_child$props","children","cloneElement","wrapWithSpace","_ref","createElement"],"sources":["../../../../src/components/flex/utils.tsx"],"sourcesContent":["import React, { Fragment } from 'react'\nimport { SpaceType, SpacingProps } from '../../shared/types'\nimport Space from '../space/Space'\nimport { removeSpaceProps } from '../space/SpacingUtils'\nimport { End, Start } from './types'\n\nexport const omitSpacingProps = removeSpaceProps\n\n/**\n * Picks the spacing props from the given props object.\n * @template Props - The type of the props object.\n * @param {Props} props - The props object.\n * @returns {SpacingProps} - The spacing props object.\n */\nexport function pickSpacingProps<Props extends SpacingProps>(\n  props: Props\n): SpacingProps {\n  return {\n    space: props?.space,\n    top: props?.top,\n    bottom: props?.bottom,\n    left: props?.left,\n    right: props?.right,\n  }\n}\n\n/**\n * Retrieves the space value of a Flex component based on the specified type and element.\n * @param type - The type of space value to retrieve (Start or End).\n * @param element - The React element to extract the space value from.\n * @returns The space value of the element, or undefined if it cannot be determined.\n */\nexport function getSpaceValue(\n  type: Start | End,\n  element: React.ReactNode\n): SpaceType | undefined {\n  if (!React.isValidElement(element)) {\n    return\n  }\n\n  return (\n    element.props?.[type] ??\n    (typeof element.props?.space === 'object'\n      ? element.props.space[type]\n      : undefined)\n  )\n}\n\n/**\n * Checks if the provided element is a heading element.\n * @param element - The element to check.\n * @returns `true` if the element is a heading element, `false` otherwise.\n */\nexport function isHeadingElement(\n  element: React.ReactNode & { _isHeadingElement?: boolean }\n): boolean {\n  return (\n    React.isValidElement(element) &&\n    element?.type?.['_isHeadingElement'] === true\n  )\n}\n\n/**\n * Determines the spacing variant of a React node element.\n * @param element - The React node element to check.\n * @returns The spacing variant (true, false or \"children\") of the element, or undefined if it does not support spacing props.\n */\nexport function getSpaceVariant(element: React.ReactNode) {\n  if (React.isValidElement(element)) {\n    if (element?.type === Fragment) {\n      return 'children'\n    }\n\n    const check = element?.type?.['_supportsSpacingProps']\n    if (typeof check !== 'undefined') {\n      return check\n    }\n\n    const keys = ['space', 'top', 'right', 'bottom', 'left']\n    const props = element?.props ?? {}\n    if (keys.some((key) => key in props)) {\n      return true\n    }\n  }\n\n  return undefined\n}\n\n/**\n * Renders an element with spacing props applied.\n * If the element is a component that accepts spacing props, the props are directly applied.\n * If the element is a component that has children and accepts spacing props, the props are applied to the children.\n * If the element does not accept spacing props, the element is returned as is.\n *\n * @param element - The element to render with spacing props.\n * @param spaceProps - The spacing props to apply.\n * @returns The rendered element with spacing props applied.\n */\nexport function renderWithSpacing(\n  element: React.ReactNode,\n  spaceProps: SpacingProps & { key?: string; className?: string }\n) {\n  const variant = getSpaceVariant(element)\n\n  if (variant === false) {\n    return element\n  }\n\n  if (variant === 'children') {\n    return React.Children.toArray(element).map(\n      (child: React.ReactElement) => {\n        const children = child?.props?.children\n\n        return React.Children.toArray(children).map((element, i) => {\n          return React.cloneElement(\n            child,\n            { key: i, ...child?.props },\n            wrapWithSpace({ element, spaceProps })\n          )\n        })\n      }\n    )\n  }\n\n  return wrapWithSpace({ element, spaceProps, variant })\n}\n\nfunction wrapWithSpace({ element, spaceProps, variant = null }) {\n  return variant ?? getSpaceVariant(element) === true ? (\n    React.cloneElement(element as React.ReactElement, spaceProps)\n  ) : (\n    <Space {...spaceProps}>{element}</Space>\n  )\n}\n"],"mappings":"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"}

package/cjs/components/form-status/FormStatus.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { GlobalStatusConfigObject } from '../GlobalStatus';
 import type { IconIcon, IconSize } from '../Icon';
 import type { SkeletonShow } from '../Skeleton';
-import type { SpacingProps } from '../space/types';
+import type { SpacingProps, SpaceTypeAll } from '../space/types';
 export type FormStatusText =
   | string
   | boolean
@@ -84,6 +84,10 @@ export interface FormStatusProps
    * The `role` attribute for accessibility, defaults to `alert`
    */
   role?: string;
+  /**
+   * Use it to set an inner margin. It supports the same props as `space`. Useful for animation.
+   */
+  shellSpace?: SpaceTypeAll;
   className?: string;
   /**
    * The `text` appears as the status message. Beside plain text, you can send in a React component as well.

package/cjs/components/form-status/FormStatus.js

@@ -11,14 +11,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Context = _interopRequireDefault(require("../../shared/Context"));
 var _componentHelper = require("../../shared/component-helper");
-var _HeightAnimationInstance = _interopRequireDefault(require("../height-animation/HeightAnimationInstance"));
+var _HeightAnimation = _interopRequireDefault(require("../height-animation/HeightAnimation"));
 var _SpacingHelper = require("../space/SpacingHelper");
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _GlobalStatusProvider = _interopRequireDefault(require("../global-status/GlobalStatusProvider"));
 var _SkeletonHelper = require("../skeleton/SkeletonHelper");
 var _filterValidProps = require("../../shared/helpers/filterValidProps");
 var _path, _path2, _path3, _path4, _path5, _path6, _circle, _path7, _path8;
-const _excluded = ["show", "title", "state", "size", "variant", "className", "no_animation", "stretch", "class", "text_id", "label", "status_id", "globalStatus", "id", "text", "icon", "icon_size", "skeleton", "children", "role"];
+const _excluded = ["title", "state", "size", "variant", "className", "stretch", "shellSpace", "class", "text_id", "show", "no_animation", "label", "status_id", "globalStatus", "id", "text", "icon", "icon_size", "skeleton", "children", "role"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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; }
@@ -96,13 +96,13 @@ class FormStatus extends _react.default.PureComponent {
     var _props$globalStatus, _context$FormStatus, _context$FormStatus$g, _context$FormRow, _context$FormRow$glob, _context$formElement, _context$formElement$;
     super(props);
     _defineProperty(this, "state", {
-      id: null,
-      keepContentInDom: null
+      id: null
     });
     _defineProperty(this, "init", () => {
       if (this._isMounted) {
         this._globalStatus.isReady();
         this.updateWidth();
+        this.fillCache();
       }
     });
     _defineProperty(this, "updateWidth", () => {
@@ -140,21 +140,6 @@ class FormStatus extends _react.default.PureComponent {
       }
     });
     this._ref = _react.default.createRef();
-    this._heightAnim = new _HeightAnimationInstance.default({
-      animate: props.no_animation === false
-    });
-    this._heightAnim.onStart(() => {
-      this.setState({
-        isAnimating: true,
-        keepContentInDom: true
-      });
-    });
-    this._heightAnim.onEnd(() => {
-      this.setState({
-        isAnimating: false,
-        keepContentInDom: (0, _componentHelper.isTrue)(this.props.show)
-      });
-    });
   }
   componentDidMount() {
     this._isMounted = true;
@@ -167,6 +152,17 @@ class FormStatus extends _react.default.PureComponent {
       window.addEventListener('resize', this.updateWidth);
     }
   }
+  fillCache() {
+    const shouldAnimate = this.shouldAnimate();
+    const content = shouldAnimate && FormStatus.getContent(this.props);
+    if (content && content !== this.contentCache) {
+      this.contentCache = content;
+    }
+    const state = shouldAnimate && FormStatus.correctStatus(this.props.state);
+    if (state) {
+      this.stateCache = state;
+    }
+  }
   componentWillUnmount() {
     this._isMounted = false;
     const status_id = this.getStatusId();
@@ -175,7 +171,6 @@ class FormStatus extends _react.default.PureComponent {
       window.removeEventListener('load', this.init);
       window.removeEventListener('resize', this.updateWidth);
     }
-    this._heightAnim.remove();
   }
   componentDidUpdate(prevProps) {
     const {
@@ -187,9 +182,7 @@ class FormStatus extends _react.default.PureComponent {
       label
     } = this.props;
     if (prevProps.text !== text || prevProps.children !== children || prevProps.show !== show || prevProps.state !== state) {
-      this.setState({
-        keepContentInDom: false
-      });
+      this.fillCache();
       if (state === 'error') {
         const status_id = this.getStatusId();
         if ((0, _componentHelper.isTrue)(show)) {
@@ -212,40 +205,36 @@ class FormStatus extends _react.default.PureComponent {
       }
       if (this.isReadyToGetVisible()) {
         this.updateWidth();
-        this._heightAnim.setElement(this._ref.current);
-        this._heightAnim.open();
-      } else {
-        this._heightAnim.close();
       }
     }
   }
   getStatusId() {
     return `${this.state.id}-gs`;
   }
+  shouldAnimate() {
+    return this.props.no_animation === false;
+  }
   isReadyToGetVisible() {
     let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
     return (0, _componentHelper.isTrue)(props.show) && FormStatus.getContent(props) ? true : false;
   }
   render() {
     var _this$context, _this$context2, _this$context3, _this$context3$theme;
-    const isReadyToGetVisible = this.isReadyToGetVisible();
-    if (!isReadyToGetVisible && !this.state.keepContentInDom) {
-      return null;
-    }
     const props = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, FormStatus.defaultProps, {
       skeleton: this.context && this.context.skeleton
     }, (0, _filterValidProps.pickFormElementProps)((_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.FormRow), (0, _filterValidProps.pickFormElementProps)((_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : _this$context2.formElement), this.context.FormStatus);
     const {
-        show,
         title,
         state: rawState,
         size,
         variant,
         className,
-        no_animation,
         stretch,
+        shellSpace,
         class: _className,
         text_id,
+        show,
+        no_animation,
         label,
         status_id,
         globalStatus,
@@ -258,20 +247,17 @@ class FormStatus extends _react.default.PureComponent {
         role
       } = props,
       rest = _objectWithoutProperties(props, _excluded);
-    const state = FormStatus.correctStatus(rawState);
+    const state = FormStatus.correctStatus(rawState) || this.stateCache;
     const iconToRender = FormStatus.getIcon({
       state,
       icon,
       icon_size,
       theme: (_this$context3 = this.context) === null || _this$context3 === void 0 ? void 0 : (_this$context3$theme = _this$context3.theme) === null || _this$context3$theme === void 0 ? void 0 : _this$context3$theme.name
     });
-    const contentToRender = this.state.keepContentInDom && this._cachedContent ? this._cachedContent : FormStatus.getContent(this.props);
-    if (!this.state.isAnimating) {
-      this._cachedContent = contentToRender;
-    }
+    const contentToRender = FormStatus.getContent(this.props);
     const hasStringContent = typeof contentToRender === 'string' && contentToRender.length > 0;
     const params = _objectSpread({
-      className: (0, _classnames.default)(`dnb-form-status dnb-form-status--${state} dnb-form-status__size--${size}`, (0, _SpacingHelper.createSpacingClasses)(props), className, _className, !isReadyToGetVisible && (this.state.keepContentInDom ? 'dnb-form-status--disappear' : 'dnb-form-status--hidden'), variant && `dnb-form-status__variant--${variant}`, this.state.isAnimating && 'dnb-form-status--is-animating', (0, _componentHelper.isTrue)(no_animation) && 'dnb-form-status--no-animation', stretch && 'dnb-form-status--stretch', hasStringContent && 'dnb-form-status--has-content'),
+      className: (0, _classnames.default)(`dnb-form-status dnb-form-status__size--${size}`, (0, _SpacingHelper.createSpacingClasses)(props), className, _className, state && `dnb-form-status--${state}`, variant && `dnb-form-status__variant--${variant}`, stretch && 'dnb-form-status--stretch', hasStringContent && 'dnb-form-status--has-content'),
       id: !String(id).startsWith('null') ? this.state.id : null,
       title,
       role
@@ -289,14 +275,22 @@ class FormStatus extends _react.default.PureComponent {
       className: (0, _classnames.default)('dnb-form-status__text', (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, this.context)),
       id: !String(text_id).startsWith('null') ? text_id : null
     };
+    const shellParams = {
+      className: (0, _classnames.default)('dnb-form-status__shell', (0, _SpacingHelper.createSpacingClasses)({
+        space: shellSpace
+      }))
+    };
     (0, _SkeletonHelper.skeletonDOMAttributes)(params, skeleton, this.context);
     (0, _componentHelper.validateDOMAttributes)(this.props, params);
     (0, _componentHelper.validateDOMAttributes)(null, textParams);
-    return _react.default.createElement("span", _extends({}, params, {
-      ref: this._ref
-    }), _react.default.createElement("span", {
-      className: "dnb-form-status__shell"
-    }, iconToRender, _react.default.createElement("span", textParams, contentToRender)));
+    return _react.default.createElement(_HeightAnimation.default, _extends({
+      element: "span",
+      open: this.isReadyToGetVisible(),
+      animate: this.shouldAnimate(),
+      duration: 600
+    }, params, {
+      innerRef: this._ref
+    }), _react.default.createElement("span", shellParams, iconToRender, _react.default.createElement("span", textParams, contentToRender || this.contentCache)));
   }
 }
 exports.default = FormStatus;