@dnb/eufemia 10.19.0 → 10.20.0

package/es/components/flex/style/dnb-flex.css

@@ -60,6 +60,9 @@
 .dnb-flex-container--wrap {
   flex-wrap: wrap;
 }
+.dnb-flex-container--row-gap-off {
+  --gap: 0;
+}
 .dnb-flex-container--row-gap-small {
   --gap: var(--spacing-small);
 }

package/es/components/flex/style/dnb-flex.min.css

@@ -1 +1 @@
-.dnb-flex-container{display:flex;row-gap:var(--gap,0)}.dnb-flex-container--direction-horizontal{flex-direction:row;margin-right:calc(var(--gap)*-1)}.dnb-flex-container--direction-vertical{flex-direction:column}.dnb-flex-container--justify-flex-start{justify-content:flex-start}.dnb-flex-container--justify-flex-end{justify-content:flex-end}.dnb-flex-container--justify-center{justify-content:center}.dnb-flex-container--justify-space-between{justify-content:space-between}.dnb-flex-container--justify-space-around{justify-content:space-around}.dnb-flex-container--justify-space-evenly{justify-content:space-evenly}.dnb-flex-container--align-flex-start{align-items:flex-start}.dnb-flex-container--align-flex-end{align-items:flex-end}.dnb-flex-container--align-center{align-items:center}.dnb-flex-container--align-stretch{align-items:stretch}.dnb-flex-container--align-baseline{align-items:baseline}.dnb-flex-container--align-self-flex-start{align-self:flex-start}.dnb-flex-container--align-self-flex-end{align-self:flex-end}.dnb-flex-container--align-self-center{align-self:center}.dnb-flex-container--align-self-baseline{align-self:baseline}.dnb-flex-container--align-self-stretch{align-self:stretch}.dnb-flex-container--wrap{flex-wrap:wrap}.dnb-flex-container--row-gap-small{--gap:var(--spacing-small)}.dnb-flex-container--row-gap-medium{--gap:var(--spacing-medium)}.dnb-flex-container--row-gap-large{--gap:var(--spacing-large)}.dnb-flex-container__hr.dnb-hr{color:var(--color-black-8);width:100%}.dnb-flex-item--grow{flex-grow:1}.dnb-flex-item--shrink{flex-shrink:1}.dnb-flex-item--align-self-flex-start{align-self:flex-start}.dnb-flex-item--align-self-flex-end{align-self:flex-end}.dnb-flex-item--align-self-center{align-self:center}.dnb-flex-item--align-self-baseline{align-self:baseline}.dnb-flex-item--align-self-stretch{align-self:stretch}.dnb-flex-item--responsive{--sizeCount--default:12;--size--default:var(--small);--flex-basis:calc(100%/var(--sizeCount, var(--sizeCount--default))*var(--size, var(--size--default)));flex-basis:var(--flex-basis);flex-grow:0;max-width:var(--flex-basis)}.dnb-flex-container[data-media-key=small] .dnb-flex-item--responsive{--size:var(--small,var(--medium))}.dnb-flex-container[data-media-key=medium] .dnb-flex-item--responsive{--size:var(--medium,var(--large))}.dnb-flex-container[data-media-key=large] .dnb-flex-item--responsive{--size:var(--large,var(--medium))}.dnb-flex-stack+.dnb-flex-stack{margin-top:var(--spacing-large)}
+.dnb-flex-container{display:flex;row-gap:var(--gap,0)}.dnb-flex-container--direction-horizontal{flex-direction:row;margin-right:calc(var(--gap)*-1)}.dnb-flex-container--direction-vertical{flex-direction:column}.dnb-flex-container--justify-flex-start{justify-content:flex-start}.dnb-flex-container--justify-flex-end{justify-content:flex-end}.dnb-flex-container--justify-center{justify-content:center}.dnb-flex-container--justify-space-between{justify-content:space-between}.dnb-flex-container--justify-space-around{justify-content:space-around}.dnb-flex-container--justify-space-evenly{justify-content:space-evenly}.dnb-flex-container--align-flex-start{align-items:flex-start}.dnb-flex-container--align-flex-end{align-items:flex-end}.dnb-flex-container--align-center{align-items:center}.dnb-flex-container--align-stretch{align-items:stretch}.dnb-flex-container--align-baseline{align-items:baseline}.dnb-flex-container--align-self-flex-start{align-self:flex-start}.dnb-flex-container--align-self-flex-end{align-self:flex-end}.dnb-flex-container--align-self-center{align-self:center}.dnb-flex-container--align-self-baseline{align-self:baseline}.dnb-flex-container--align-self-stretch{align-self:stretch}.dnb-flex-container--wrap{flex-wrap:wrap}.dnb-flex-container--row-gap-off{--gap:0}.dnb-flex-container--row-gap-small{--gap:var(--spacing-small)}.dnb-flex-container--row-gap-medium{--gap:var(--spacing-medium)}.dnb-flex-container--row-gap-large{--gap:var(--spacing-large)}.dnb-flex-container__hr.dnb-hr{color:var(--color-black-8);width:100%}.dnb-flex-item--grow{flex-grow:1}.dnb-flex-item--shrink{flex-shrink:1}.dnb-flex-item--align-self-flex-start{align-self:flex-start}.dnb-flex-item--align-self-flex-end{align-self:flex-end}.dnb-flex-item--align-self-center{align-self:center}.dnb-flex-item--align-self-baseline{align-self:baseline}.dnb-flex-item--align-self-stretch{align-self:stretch}.dnb-flex-item--responsive{--sizeCount--default:12;--size--default:var(--small);--flex-basis:calc(100%/var(--sizeCount, var(--sizeCount--default))*var(--size, var(--size--default)));flex-basis:var(--flex-basis);flex-grow:0;max-width:var(--flex-basis)}.dnb-flex-container[data-media-key=small] .dnb-flex-item--responsive{--size:var(--small,var(--medium))}.dnb-flex-container[data-media-key=medium] .dnb-flex-item--responsive{--size:var(--medium,var(--large))}.dnb-flex-container[data-media-key=large] .dnb-flex-item--responsive{--size:var(--large,var(--medium))}.dnb-flex-stack+.dnb-flex-stack{margin-top:var(--spacing-large)}

package/es/components/flex/style/flex-container.scss

@@ -88,6 +88,9 @@
     flex-wrap: wrap;
   }
 
+  &--row-gap-off {
+    --gap: 0;
+  }
   &--row-gap-small {
     --gap: var(--spacing-small);
   }

package/es/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/es/components/flex/utils.js

@@ -1,8 +1,11 @@
-import React from 'react';
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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; }
+import React, { Fragment } from 'react';
 import Space from '../space/Space';
 import { removeSpaceProps } from '../space/SpacingUtils';
-import * as EufemiaElements from '../../elements';
-export const pickSpacingProps = props => {
+export const omitSpacingProps = removeSpaceProps;
+export function pickSpacingProps(props) {
   return {
     space: props === null || props === void 0 ? void 0 : props.space,
     top: props === null || props === void 0 ? void 0 : props.top,
@@ -10,38 +13,66 @@ export const pickSpacingProps = props => {
     left: props === null || props === void 0 ? void 0 : props.left,
     right: props === null || props === void 0 ? void 0 : props.right
   };
-};
-export const omitSpacingProps = removeSpaceProps;
-export const getSpaceValue = (type, element) => {
+}
+export function getSpaceValue(type, element) {
   var _element$props$type, _element$props, _element$props2;
   if (!React.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;
-};
+}
 export function isHeadingElement(element) {
   var _element$type;
   return React.isValidElement(element) && (element === null || element === void 0 ? void 0 : (_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type['_isHeadingElement']) === true;
 }
-export const isEufemiaElement = element => {
-  return Object.values(EufemiaElements).some(eufemiaElement => (element === null || element === void 0 ? void 0 : element.type) === eufemiaElement);
-};
-export const isSpacePropsComponent = element => {
-  var _element$type2;
-  if (React.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;
+export function getSpaceVariant(element) {
+  if (React.isValidElement(element)) {
+    var _element$type2, _element$props3;
+    if ((element === null || element === void 0 ? void 0 : element.type) === 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;
-};
-export const renderWithSpacing = (element, props) => {
-  const takesSpaceProps = isSpacePropsComponent(element);
-  if (takesSpaceProps === false) {
+}
+export function renderWithSpacing(element, spaceProps) {
+  const variant = getSpaceVariant(element);
+  if (variant === false) {
     return element;
   }
-  return takesSpaceProps ? React.cloneElement(element, props) : React.createElement(Space, props, element);
-};
+  if (variant === 'children') {
+    return React.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.Children.toArray(children).map((element, i) => {
+        return React.cloneElement(child, _objectSpread({
+          key: i
+        }, child === null || child === void 0 ? void 0 : child.props), wrapWithSpace({
+          element,
+          spaceProps
+        }));
+      });
+    });
+  }
+  return wrapWithSpace({
+    element,
+    spaceProps,
+    variant
+  });
+}
+function wrapWithSpace({
+  element,
+  spaceProps,
+  variant = null
+}) {
+  return (variant !== null && variant !== void 0 ? variant : getSpaceVariant(element) === true) ? React.cloneElement(element, spaceProps) : React.createElement(Space, spaceProps, element);
+}
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":["React","Space","removeSpaceProps","EufemiaElements","pickSpacingProps","props","space","top","bottom","left","right","omitSpacingProps","getSpaceValue","type","element","_element$props$type","_element$props","_element$props2","isValidElement","undefined","isHeadingElement","_element$type","isEufemiaElement","Object","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","Fragment","Space","removeSpaceProps","omitSpacingProps","pickSpacingProps","props","space","top","bottom","left","right","getSpaceValue","type","element","_element$props$type","_element$props","_element$props2","isValidElement","undefined","isHeadingElement","_element$type","getSpaceVariant","_element$type2","_element$props3","check","keys","some","key","renderWithSpacing","spaceProps","variant","Children","toArray","map","child","_child$props","children","i","cloneElement","_objectSpread","wrapWithSpace","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/es/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/es/components/form-status/FormStatus.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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 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; }
 import React from 'react';
@@ -12,7 +12,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Context from '../../shared/Context';
 import { isTrue, makeUniqueId, validateDOMAttributes, processChildren, extendPropsWithContextInClassComponent } from '../../shared/component-helper';
-import HeightAnimationInstance from '../height-animation/HeightAnimationInstance';
+import HeightAnimation from '../height-animation/HeightAnimation';
 import { spacingPropTypes, createSpacingClasses } from '../space/SpacingHelper';
 import Icon from '../icon/Icon';
 import GlobalStatusProvider from '../global-status/GlobalStatusProvider';
@@ -85,13 +85,13 @@ export default class FormStatus extends React.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", () => {
@@ -129,21 +129,6 @@ export default class FormStatus extends React.PureComponent {
       }
     });
     this._ref = React.createRef();
-    this._heightAnim = new HeightAnimationInstance({
-      animate: props.no_animation === false
-    });
-    this._heightAnim.onStart(() => {
-      this.setState({
-        isAnimating: true,
-        keepContentInDom: true
-      });
-    });
-    this._heightAnim.onEnd(() => {
-      this.setState({
-        isAnimating: false,
-        keepContentInDom: isTrue(this.props.show)
-      });
-    });
   }
   componentDidMount() {
     this._isMounted = true;
@@ -156,6 +141,17 @@ export default class FormStatus extends React.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();
@@ -164,7 +160,6 @@ export default class FormStatus extends React.PureComponent {
       window.removeEventListener('load', this.init);
       window.removeEventListener('resize', this.updateWidth);
     }
-    this._heightAnim.remove();
   }
   componentDidUpdate(prevProps) {
     const {
@@ -176,9 +171,7 @@ export default class FormStatus extends React.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 (isTrue(show)) {
@@ -201,39 +194,35 @@ export default class FormStatus extends React.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(props = this.props) {
     return 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 = extendPropsWithContextInClassComponent(this.props, FormStatus.defaultProps, {
       skeleton: this.context && this.context.skeleton
     }, pickFormElementProps((_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.FormRow), 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,
@@ -246,20 +235,17 @@ export default class FormStatus extends React.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: classnames(`dnb-form-status dnb-form-status--${state} dnb-form-status__size--${size}`, 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', isTrue(no_animation) && 'dnb-form-status--no-animation', stretch && 'dnb-form-status--stretch', hasStringContent && 'dnb-form-status--has-content'),
+      className: classnames(`dnb-form-status dnb-form-status__size--${size}`, 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
@@ -277,14 +263,22 @@ export default class FormStatus extends React.PureComponent {
       className: classnames('dnb-form-status__text', createSkeletonClass('font', skeleton, this.context)),
       id: !String(text_id).startsWith('null') ? text_id : null
     };
+    const shellParams = {
+      className: classnames('dnb-form-status__shell', createSpacingClasses({
+        space: shellSpace
+      }))
+    };
     skeletonDOMAttributes(params, skeleton, this.context);
     validateDOMAttributes(this.props, params);
     validateDOMAttributes(null, textParams);
-    return React.createElement("span", _extends({}, params, {
-      ref: this._ref
-    }), React.createElement("span", {
-      className: "dnb-form-status__shell"
-    }, iconToRender, React.createElement("span", textParams, contentToRender)));
+    return React.createElement(HeightAnimation, _extends({
+      element: "span",
+      open: this.isReadyToGetVisible(),
+      animate: this.shouldAnimate(),
+      duration: 600
+    }, params, {
+      innerRef: this._ref
+    }), React.createElement("span", shellParams, iconToRender, React.createElement("span", textParams, contentToRender || this.contentCache)));
   }
 }
 _defineProperty(FormStatus, "contextType", Context);