UNPKG

@mantine/core

Version:

React components library focused on usability, accessibility and developer experience

1 lines 4.88 kB
{"version":3,"file":"Collapse.cjs","names":["factory","useProps","useMantineEnv","useMantineTheme","useHorizontalCollapse","useCollapse","Activity","Box","getStyleObject"],"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 false */\n keepMounted?: boolean;\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} 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 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 && env !== 'test') {\n return (\n <Activity mode={expanded ? 'visible' : 'hidden'}>\n <Box {...others}>{children}</Box>\n </Activity>\n );\n }\n return expanded ? <Box {...others}>{children}</Box> : 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 = <Activity mode={isExited ? 'hidden' : 'visible'}>{children}</Activity>;\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 },\n ref,\n })}\n >\n {content}\n </Box>\n );\n});\n\nCollapse.displayName = '@mantine/core/Collapse';\n"],"mappings":";;;;;;;;;;;;AA4CA,MAAM,eAAe;CACnB,oBAAoB;CACpB,0BAA0B;CAC1B,gBAAgB;CAChB,aAAa;CACd;AAED,MAAa,WAAWA,gBAAAA,SAA0B,UAAU;CAC1D,MAAM,EACJ,UACA,UACA,oBACA,0BACA,OACA,iBACA,mBACA,gBACA,aACA,KACA,aACA,GAAG,WACDC,kBAAAA,SAAS,YAAY,cAAc,MAAM;CAE7C,MAAM,MAAMC,wBAAAA,eAAe;CAC3B,MAAM,QAAQC,6BAAAA,iBAAiB;CAC/B,MAAM,sBAAA,GAAA,eAAA,mBAAuC;CAE7C,MAAM,YADe,MAAM,uBAAuB,qBAAqB,SACvC,IAAI;CAGpC,MAAM,YAFO,gBAAgB,eAAeC,eAAAA,wBAAwBC,eAAAA,aAE9C;EACpB;EACA,oBAAoB;EACpB;EACA;EACA;EACA,aAAa;EACd,CAAC;AAEF,KAAI,aAAa,GAAG;AAClB,MAAI,gBAAgB,QAAQ,QAAQ,OAClC,QACE,iBAAA,GAAA,kBAAA,KAACC,MAAAA,UAAD;GAAU,MAAM,WAAW,YAAY;aACrC,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;IAAK,GAAI;IAAS;IAAe,CAAA;GACxB,CAAA;AAGf,SAAO,WAAW,iBAAA,GAAA,kBAAA,KAACA,YAAAA,KAAD;GAAK,GAAI;GAAS;GAAe,CAAA,GAAG;;CAGxD,MAAM,WAAW,SAAS,UAAU;CAEpC,IAAI;AACJ,KAAI,gBAAgB,MAClB,WAAU,WAAW,OAAO;UACnB,gBAAgB,KACzB,WAAU,iBAAA,GAAA,kBAAA,KAACD,MAAAA,UAAD;EAAU,MAAM,WAAW,WAAW;EAAY;EAAoB,CAAA;KAEhF,WAAU;AAGZ,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI;EACJ,GAAI,SAAS,iBAAiB;GAC5B,OAAO;IACL,SAAS,YAAY,CAAC,iBAAiB,IAAI;IAC3C,YAAY,iBAAiB,WAAW,SAAS,KAAK,6BAA6B;IACnF,GAAGC,yBAAAA,eAAe,OAAO,MAAM;IAChC;GACD;GACD,CAAC;YAED;EACG,CAAA;EAER;AAEF,SAAS,cAAc"}