{"version":3,"file":"Spoiler.cjs","sources":["../../../src/components/Spoiler/Spoiler.tsx"],"sourcesContent":["import { useElementSize, useId, useUncontrolled } from '@raikou/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Anchor } from '../Anchor';\nimport { SpoilerContentStyle, SpoilerControlStyle, SpoilerRootStyle } from './Spoiler.css';\n\nexport type SpoilerStylesNames = 'root' | 'control' | 'content';\nexport type SpoilerCssVariables = {\n  root: '--spoiler-transition-duration';\n};\n\nexport interface SpoilerProps\n  extends BoxProps,\n    StylesApiProps<SpoilerFactory>,\n    ElementProps<'div'> {\n  /** Maximum height of the visible content, when this point is reached spoiler appears, `100` by default */\n  maxHeight?: number;\n\n  /** Label for close spoiler action */\n  hideLabel: React.ReactNode;\n\n  /** Label for open spoiler action */\n  showLabel: React.ReactNode;\n\n  /** Get ref of spoiler toggle button */\n  controlRef?: React.ForwardedRef<HTMLButtonElement>;\n\n  /** Initial spoiler state, true to wrap content in spoiler, false to show content without spoiler, opened state is updated on mount */\n  initialState?: boolean;\n\n  /** Controlled expanded state value */\n  expanded?: boolean;\n\n  /** Called when expanded state changes (when spoiler visibility is toggled by the user) */\n  onExpandedChange?: (expanded: boolean) => void;\n\n  /** Spoiler reveal transition duration in ms, set 0 or null to turn off animation, `200` by default */\n  transitionDuration?: number;\n}\n\nexport type SpoilerFactory = Factory<{\n  props: SpoilerProps;\n  ref: HTMLDivElement;\n  stylesNames: SpoilerStylesNames;\n  vars: SpoilerCssVariables;\n}>;\n\nconst defaultProps: Partial<SpoilerProps> = {\n  maxHeight: 100,\n  initialState: false,\n};\n\nconst varsResolver = createVarsResolver<SpoilerFactory>((_, { transitionDuration }) => ({\n  root: {\n    '--spoiler-transition-duration':\n      transitionDuration !== undefined ? `${transitionDuration}ms` : undefined,\n  },\n}));\n\nexport const Spoiler = factory<SpoilerFactory>((_props, ref) => {\n  const props = useProps('Spoiler', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    initialState,\n    maxHeight,\n    hideLabel,\n    showLabel,\n    children,\n    controlRef,\n    transitionDuration,\n    id,\n    expanded,\n    onExpandedChange,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<SpoilerFactory>({\n    name: 'Spoiler',\n    classes: {\n      root: SpoilerRootStyle,\n      content: SpoilerContentStyle,\n      control: SpoilerControlStyle,\n    },\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    varsResolver,\n  });\n\n  const _id = useId(id);\n  const regionId = `${_id}-region`;\n  const [show, setShowState] = useUncontrolled({\n    value: expanded,\n    defaultValue: initialState,\n    finalValue: false,\n    onChange: onExpandedChange,\n  });\n  const { ref: contentRef, height } = useElementSize();\n  const spoilerMoreContent = show ? hideLabel : showLabel;\n  const spoiler = spoilerMoreContent !== null && maxHeight! < height;\n\n  return (\n    <Box\n      {...getStyles('root')}\n      id={_id}\n      ref={ref}\n      data-has-spoiler={spoiler || undefined}\n      {...others}\n    >\n      {spoiler && (\n        <Anchor\n          component=\"button\"\n          type=\"button\"\n          ref={controlRef}\n          onClick={() => setShowState(!show)}\n          aria-expanded={show}\n          aria-controls={regionId}\n          {...getStyles('control')}\n        >\n          {spoilerMoreContent}\n        </Anchor>\n      )}\n      <div\n        {...getStyles('content', {\n          style: { maxHeight: !show ? rem(maxHeight) : height ? rem(height) : undefined },\n        })}\n        data-reduce-motion\n        role=\"region\"\n        id={regionId}\n      >\n        <div ref={contentRef}>{children}</div>\n      </div>\n    </Box>\n  );\n});\n\nSpoiler.displayName = '@raikou/core/Spoiler';\n"],"names":["createVarsResolver","factory","useProps","useStyles","SpoilerRootStyle","SpoilerContentStyle","SpoilerControlStyle","useId","useUncontrolled","useElementSize","jsxs","Box","jsx","Anchor","rem"],"mappings":"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"}