@mantine/core/esm/components/Collapse/Collapse.mjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Collapse.mjs","names":[],"sources":["../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport { useCollapse, useHorizontalCollapse, useReducedMotion } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  Factory,\n  factory,\n  getStyleObject,\n  useMantineEnv,\n  useMantineTheme,\n  useProps,\n} from '../../core';\n\nexport interface CollapseProps extends BoxProps, Omit<React.ComponentProps<'div'>, keyof BoxProps> {\n  /** Collapse orientation @default 'vertical' */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** Expanded state */\n  expanded: boolean;\n\n  /** Called when the transition ends */\n  onTransitionEnd?: () => void;\n\n  /** Called when transition starts */\n  onTransitionStart?: () => void;\n\n  /** Transition duration in ms @default 200 */\n  transitionDuration?: number;\n\n  /** Transition timing function @default ease */\n  transitionTimingFunction?: string;\n\n  /** Determines whether the opacity is animated @default true */\n  animateOpacity?: boolean;\n\n  /** If set, the element is kept in the DOM when collapsed. When `true`, React 19 `Activity` is used to preserve state while collapsed. When `false`, the element is unmounted after the exit animation. @default true */\n  keepMounted?: boolean;\n\n  /** Controls how the element is hidden when `keepMounted` is set:\n   * `'activity'` – hidden with React 19 `Activity` component,\n   * `'display-none'` – hidden with `display: none` styles\n   * @default 'activity'\n   */\n  keepMountedMode?: 'activity' | 'display-none';\n}\n\nexport type CollapseFactory = Factory<{\n  props: CollapseProps;\n  ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n  animateOpacity: true,\n  orientation: 'vertical',\n  keepMounted: true,\n  keepMountedMode: 'activity',\n} satisfies Partial<CollapseProps>;\n\nexport const Collapse = factory<CollapseFactory>((props) => {\n  const {\n    children,\n    expanded,\n    transitionDuration,\n    transitionTimingFunction,\n    style,\n    onTransitionEnd,\n    onTransitionStart,\n    animateOpacity,\n    keepMounted,\n    keepMountedMode,\n    ref,\n    orientation,\n    ...others\n  } = useProps('Collapse', defaultProps, props);\n\n  const env = useMantineEnv();\n  const theme = useMantineTheme();\n  const shouldReduceMotion = useReducedMotion();\n  const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n  const duration = reduceMotion ? 0 : transitionDuration;\n  const hook = orientation === 'horizontal' ? useHorizontalCollapse : useCollapse;\n\n  const collapse = hook({\n    expanded,\n    transitionDuration: duration,\n    transitionTimingFunction,\n    onTransitionEnd,\n    onTransitionStart,\n    keepMounted: false,\n  });\n\n  if (duration === 0) {\n    if (keepMounted === true && (keepMountedMode === 'display-none' || env !== 'test')) {\n      if (keepMountedMode === 'display-none') {\n        return (\n          <Box\n            {...others}\n            style={{\n              ...getStyleObject(style, theme),\n              ...(!expanded ? { display: 'none' } : {}),\n            }}\n            ref={ref}\n          >\n            {children}\n          </Box>\n        );\n      }\n\n      return (\n        <Activity mode={expanded ? 'visible' : 'hidden'}>\n          <Box {...others} style={style} ref={ref}>\n            {children}\n          </Box>\n        </Activity>\n      );\n    }\n\n    return expanded ? (\n      <Box {...others} style={style} ref={ref}>\n        {children}\n      </Box>\n    ) : null;\n  }\n\n  const isExited = collapse.state === 'exited';\n\n  let content: React.ReactNode;\n  if (keepMounted === false) {\n    content = isExited ? null : children;\n  } else if (keepMounted === true) {\n    content =\n      keepMountedMode === 'display-none' ? (\n        children\n      ) : (\n        <Activity mode={isExited ? 'hidden' : 'visible'}>{children}</Activity>\n      );\n  } else {\n    content = children;\n  }\n\n  return (\n    <Box\n      {...others}\n      {...collapse.getCollapseProps({\n        style: {\n          opacity: expanded || !animateOpacity ? 1 : 0,\n          transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : 'none',\n          ...getStyleObject(style, theme),\n          ...(keepMounted && keepMountedMode === 'display-none' && isExited\n            ? { display: 'none' }\n            : {}),\n        },\n        ref,\n      })}\n    >\n      {content}\n    </Box>\n  );\n});\n\nCollapse.displayName = '@mantine/core/Collapse';\n\nexport namespace Collapse {\n  export type Props = CollapseProps;\n  export type Factory = CollapseFactory;\n}\n"],"mappings":";;;;;;;;;;;AAmDA,MAAM,eAAe;CACnB,oBAAoB;CACpB,0BAA0B;CAC1B,gBAAgB;CAChB,aAAa;CACb,aAAa;CACb,iBAAiB;AACnB;AAEA,MAAa,WAAW,SAA0B,UAAU;CAC1D,MAAM,EACJ,UACA,UACA,oBACA,0BACA,OACA,iBACA,mBACA,gBACA,aACA,iBACA,KACA,aACA,GAAG,WACD,SAAS,YAAY,cAAc,KAAK;CAE5C,MAAM,MAAM,cAAc;CAC1B,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,qBAAqB,iBAAiB;CAE5C,MAAM,YADe,MAAM,uBAAuB,qBAAqB,SACvC,IAAI;CAGpC,MAAM,YAFO,gBAAgB,eAAe,wBAAwB,YAAA,CAE9C;EACpB;EACA,oBAAoB;EACpB;EACA;EACA;EACA,aAAa;CACf,CAAC;CAED,IAAI,aAAa,GAAG;EAClB,IAAI,gBAAgB,SAAS,oBAAoB,kBAAkB,QAAQ,SAAS;GAClF,IAAI,oBAAoB,gBACtB,OACE,oBAAC,KAAD;IACE,GAAI;IACJ,OAAO;KACL,GAAG,eAAe,OAAO,KAAK;KAC9B,GAAI,CAAC,WAAW,EAAE,SAAS,OAAO,IAAI,CAAC;IACzC;IACK;IAEJ;GACE,CAAA;GAIT,OACE,oBAAC,UAAD;IAAU,MAAM,WAAW,YAAY;cACrC,oBAAC,KAAD;KAAK,GAAI;KAAe;KAAY;KACjC;IACE,CAAA;GACG,CAAA;EAEd;EAEA,OAAO,WACL,oBAAC,KAAD;GAAK,GAAI;GAAe;GAAY;GACjC;EACE,CAAA,IACH;CACN;CAEA,MAAM,WAAW,SAAS,UAAU;CAEpC,IAAI;CACJ,IAAI,gBAAgB,OAClB,UAAU,WAAW,OAAO;MACvB,IAAI,gBAAgB,MACzB,UACE,oBAAoB,iBAClB,WAEA,oBAAC,UAAD;EAAU,MAAM,WAAW,WAAW;EAAY;CAAmB,CAAA;MAGzE,UAAU;CAGZ,OACE,oBAAC,KAAD;EACE,GAAI;EACJ,GAAI,SAAS,iBAAiB;GAC5B,OAAO;IACL,SAAS,YAAY,CAAC,iBAAiB,IAAI;IAC3C,YAAY,iBAAiB,WAAW,SAAS,KAAK,6BAA6B;IACnF,GAAG,eAAe,OAAO,KAAK;IAC9B,GAAI,eAAe,oBAAoB,kBAAkB,WACrD,EAAE,SAAS,OAAO,IAClB,CAAC;GACP;GACA;EACF,CAAC;YAEA;CACE,CAAA;AAET,CAAC;AAED,SAAS,cAAc"}