{
  "id": "uilib/components/height-animation",
  "name": "HeightAnimation",
  "description": "HeightAnimation is a helper component to animate from 0 to height:auto powered by CSS.",
  "group": "components",
  "slug": "/uilib/components/height-animation/",
  "props": [
    {
      "name": "open",
      "doc": "Set to `true` on second re-render when the view should animate from 0px to auto. Defaults to `true`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "animate",
      "doc": "Set to `false` to omit the animation. Defaults to `true`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "keepInDOM",
      "doc": "Set to `true` ensure the nested children content will be kept in the DOM. Defaults to `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "compensateForGap",
      "doc": "To compensate for CSS gap between the rows, so animation does not jump during the animation. Provide a CSS unit or `auto`. Defaults to `null`.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "showOverflow",
      "doc": "Set to `true` to omit the usage of \"overflow: hidden;\". Defaults to `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "duration",
      "doc": "Custom duration of the animation in milliseconds. Defaults to `400ms`.",
      "type": "number",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "delay",
      "doc": "Custom delay of the animation in milliseconds. Defaults to `0ms`.",
      "type": "number",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "element",
      "doc": "Custom HTML element for the component. Defaults to `div` HTML Element.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "innerRef",
      "doc": "Send along a custom React Ref.",
      "type": "React.RefObject",
      "status": "optional",
      "defaultValue": null
    }
  ],
  "events": [
    {
      "name": "onOpen",
      "doc": "Is called when fully opened or closed. Returns `true` or `false` depending on the state.",
      "type": "function",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "onAnimationStart",
      "doc": "Is called when animation has started. The first parameter is a string. Depending on the state, the value can be `opening`, `closing` or `adjusting`.",
      "type": "function",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "onAnimationEnd",
      "doc": "Is called when animation is done and the full height is reached. The first parameter is a string. Depending on the state, the value can be `opened`, `closed` or `adjusted`.",
      "type": "function",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "onInit",
      "doc": "Is called once before mounting the component (useLayoutEffect). Returns the instance of the internal animation class.",
      "type": "function",
      "status": "optional",
      "defaultValue": null
    }
  ],
  "related": [
    "Space"
  ],
  "checksum": "e0e191b006825baa4c059b83f7381c2d7f5b176cd8b7e531631b3ae754bb2124",
  "source": {
    "repo": "https://github.com/dnbexperience/eufemia",
    "file": "packages/dnb-eufemia/src/components/height-animation/HeightAnimation.tsx",
    "permalink": "https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-eufemia/src/components/height-animation/HeightAnimation.tsx"
  },
  "sources": {
    "entry": {
      "local": "src/docs/uilib/components/height-animation.mdx",
      "public": "https://7054fffd.eufemia-e25.pages.dev/uilib/components/height-animation/"
    },
    "props": {
      "local": "src/docs/uilib/components/height-animation/properties.mdx",
      "public": "https://7054fffd.eufemia-e25.pages.dev/uilib/components/height-animation/properties/"
    },
    "events": {
      "local": "src/docs/uilib/components/height-animation/events.mdx",
      "public": "https://7054fffd.eufemia-e25.pages.dev/uilib/components/height-animation/events/"
    },
    "demos": {
      "local": "src/docs/uilib/components/height-animation/demos.mdx",
      "public": "https://7054fffd.eufemia-e25.pages.dev/uilib/components/height-animation/demos/"
    }
  },
  "version": "0.0.0-development",
  "generatedAt": "2025-12-18T10:03:59.906Z",
  "schemaVersion": 1
}