@mantine/core/cjs/components/Splitter/SplitterPane/SplitterPane.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"SplitterPane.cjs","names":["factory","useProps","useSplitterContext","Box","classes"],"sources":["../../../../src/components/Splitter/SplitterPane/SplitterPane.tsx"],"sourcesContent":["import type { SplitterPaneSize } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useSplitterContext } from '../Splitter.context';\nimport classes from '../Splitter.module.css';\n\nexport type SplitterPaneStylesNames = 'pane';\n\nexport interface SplitterPaneProps\n  extends BoxProps, CompoundStylesApiProps<SplitterPaneFactory>, ElementProps<'div'> {\n  /** Initial size, a `number`/`%` is a flexible size (shares leftover space), `px`/`rem` is a fixed size. A bare number is treated as a percentage. */\n  defaultSize: SplitterPaneSize;\n\n  /** Minimum size in the same units as `defaultSize` @default 0 */\n  min?: SplitterPaneSize;\n\n  /** Maximum size in the same units as `defaultSize`, no limit by default */\n  max?: SplitterPaneSize;\n\n  /** Whether this pane can be collapsed @default false */\n  collapsible?: boolean;\n\n  /** Size below which the pane snaps to collapsed, defaults to `min` */\n  collapseThreshold?: SplitterPaneSize;\n\n  /** Pane content */\n  children?: React.ReactNode;\n\n  /** @internal Index set by parent */\n  __index?: number;\n}\n\nexport type SplitterPaneFactory = Factory<{\n  props: SplitterPaneProps;\n  ref: HTMLDivElement;\n  stylesNames: SplitterPaneStylesNames;\n  compound: true;\n}>;\n\nexport const SplitterPane = factory<SplitterPaneFactory>((_props) => {\n  const props = useProps('SplitterPane', null, _props);\n  const {\n    className,\n    classNames,\n    style,\n    styles,\n    vars,\n    children,\n    defaultSize,\n    min,\n    max,\n    collapsible,\n    collapseThreshold,\n    __index,\n    mod,\n    ...others\n  } = props;\n\n  const ctx = useSplitterContext();\n  const isCollapsed = ctx.collapsed[__index!];\n\n  const sizeStyle = ctx.getPaneStyle(__index!);\n\n  return (\n    <Box\n      {...ctx.getStyles('pane', {\n        className,\n        classNames,\n        style: [sizeStyle, style],\n        styles,\n        props,\n      })}\n      mod={[{ collapsed: isCollapsed || undefined }, mod]}\n      {...others}\n    >\n      {children}\n    </Box>\n  );\n});\n\nSplitterPane.classes = classes;\nSplitterPane.displayName = '@mantine/core/SplitterPane';\n"],"mappings":";;;;;;;;AA8CA,MAAa,eAAeA,gBAAAA,SAA8B,WAAW;CACnE,MAAM,QAAQC,kBAAAA,SAAS,gBAAgB,MAAM,MAAM;CACnD,MAAM,EACJ,WACA,YACA,OACA,QACA,MACA,UACA,aACA,KACA,KACA,aACA,mBACA,SACA,KACA,GAAG,WACD;CAEJ,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,cAAc,IAAI,UAAU;CAElC,MAAM,YAAY,IAAI,aAAa,OAAQ;CAE3C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GACxB;GACA;GACA,OAAO,CAAC,WAAW,KAAK;GACxB;GACA;EACF,CAAC;EACD,KAAK,CAAC,EAAE,WAAW,eAAe,KAAA,EAAU,GAAG,GAAG;EAClD,GAAI;EAEH;CACE,CAAA;AAET,CAAC;AAED,aAAa,UAAUC,wBAAAA;AACvB,aAAa,cAAc"}