@mantine/core/cjs/components/Scroller/Scroller.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Scroller.cjs","names":["createVarsResolver","rem","getThemeColor","factory","useProps","useStyles","Box","UnstyledButton","AccordionChevron","classes"],"sources":["../../../src/components/Scroller/Scroller.tsx"],"sourcesContent":["import { Ref } from 'react';\nimport { useScroller } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { AccordionChevron } from '../Accordion';\nimport { UnstyledButton } from '../UnstyledButton';\nimport classes from './Scroller.module.css';\n\nexport type ScrollerStylesNames = 'root' | 'container' | 'content' | 'control' | 'chevron';\nexport type ScrollerCssVariables = {\n  root: '--scroller-control-size' | '--scroller-background-color';\n};\n\nexport interface ScrollerProps\n  extends BoxProps, StylesApiProps<ScrollerFactory>, ElementProps<'div'> {\n  /** Content to display */\n  children: React.ReactNode;\n\n  /** Amount of pixels to scroll when clicking the control buttons, `200` by default */\n  scrollAmount?: number;\n\n  /** Size of the control buttons, @default 60px */\n  controlSize?: string | number;\n\n  /** Background color for the gradient fade on controls, `'var(--mantine-color-body)'` by default */\n  edgeGradientColor?: string;\n\n  /** Props passed to the start control button */\n  startControlProps?: React.ComponentProps<'button'>;\n\n  /** Props passed to the end control button */\n  endControlProps?: React.ComponentProps<'button'>;\n\n  /** Icon component for the start control, AccordionChevron by default */\n  startControlIcon?: React.ReactNode;\n\n  /** Icon component for the end control, AccordionChevron by default */\n  endControlIcon?: React.ReactNode;\n\n  /** Determines whether start control should always be visible regardless of scroll position, `false` by default */\n  showStartControl?: boolean;\n\n  /** Determines whether end control should always be visible regardless of scroll position, `false` by default */\n  showEndControl?: boolean;\n\n  /** Determines whether content can be scrolled by dragging with mouse, `true` by default */\n  draggable?: boolean;\n\n  /** Ref for the scroll container element */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport type ScrollerFactory = Factory<{\n  props: ScrollerProps;\n  ref: HTMLDivElement;\n  stylesNames: ScrollerStylesNames;\n  vars: ScrollerCssVariables;\n}>;\n\nconst defaultProps: Partial<ScrollerProps> = {\n  scrollAmount: 200,\n  draggable: true,\n};\n\nconst varsResolver = createVarsResolver<ScrollerFactory>(\n  (theme, { controlSize, edgeGradientColor }) => ({\n    root: {\n      '--scroller-control-size': rem(controlSize),\n      '--scroller-background-color': edgeGradientColor\n        ? getThemeColor(edgeGradientColor, theme)\n        : undefined,\n    },\n  })\n);\n\nexport const Scroller = factory<ScrollerFactory>((_props) => {\n  const props = useProps('Scroller', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    scrollAmount,\n    controlSize,\n    edgeGradientColor,\n    startControlProps,\n    endControlProps,\n    startControlIcon,\n    endControlIcon,\n    showStartControl,\n    showEndControl,\n    draggable,\n    mod,\n    ref,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ScrollerFactory>({\n    name: 'Scroller',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    varsResolver,\n    attributes,\n  });\n\n  const scroller = useScroller({\n    scrollAmount,\n    draggable,\n  });\n\n  const showStart = showStartControl || scroller.canScrollStart;\n  const showEnd = showEndControl || scroller.canScrollEnd;\n\n  return (\n    <Box {...getStyles('root')} ref={ref} mod={mod} {...others}>\n      <UnstyledButton\n        {...getStyles('control')}\n        onClick={scroller.scrollStart}\n        data-position=\"start\"\n        data-hidden={!showStart || undefined}\n        aria-label=\"Scroll left\"\n        tabIndex={showStart ? 0 : -1}\n        {...startControlProps}\n      >\n        {startControlIcon || <AccordionChevron {...getStyles('chevron')} />}\n      </UnstyledButton>\n\n      <div\n        {...getStyles('container')}\n        ref={scroller.ref}\n        role=\"presentation\"\n        data-draggable={draggable || undefined}\n        {...scroller.dragHandlers}\n      >\n        <div {...getStyles('content')}>{children}</div>\n      </div>\n\n      <UnstyledButton\n        {...getStyles('control')}\n        onClick={scroller.scrollEnd}\n        data-position=\"end\"\n        data-hidden={!showEnd || undefined}\n        aria-label=\"Scroll right\"\n        tabIndex={showEnd ? 0 : -1}\n        {...endControlProps}\n      >\n        {endControlIcon || <AccordionChevron {...getStyles('chevron')} />}\n      </UnstyledButton>\n    </Box>\n  );\n});\n\nScroller.classes = classes;\nScroller.varsResolver = varsResolver;\nScroller.displayName = '@mantine/core/Scroller';\n"],"mappings":";;;;;;;;;;;;;;;AAsEA,MAAM,eAAuC;CAC3C,cAAc;CACd,WAAW;CACZ;AAED,MAAM,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,aAAa,yBAAyB,EAC9C,MAAM;CACJ,2BAA2BC,YAAAA,IAAI,YAAY;CAC3C,+BAA+B,oBAC3BC,wBAAAA,cAAc,mBAAmB,MAAM,GACvC,KAAA;CACL,EACF,EACF;AAED,MAAa,WAAWC,gBAAAA,SAA0B,WAAW;CAC3D,MAAM,QAAQC,kBAAAA,SAAS,YAAY,cAAc,OAAO;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,cACA,aACA,mBACA,mBACA,iBACA,kBACA,gBACA,kBACA,gBACA,WACA,KACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA2B;EAC3C,MAAM;EACN,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,YAAA,GAAA,eAAA,aAAuB;EAC3B;EACA;EACD,CAAC;CAEF,MAAM,YAAY,oBAAoB,SAAS;CAC/C,MAAM,UAAU,kBAAkB,SAAS;AAE3C,QACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EAAK,GAAI,UAAU,OAAO;EAAO;EAAU;EAAK,GAAI;YAApD;GACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,gBAAD;IACE,GAAI,UAAU,UAAU;IACxB,SAAS,SAAS;IAClB,iBAAc;IACd,eAAa,CAAC,aAAa,KAAA;IAC3B,cAAW;IACX,UAAU,YAAY,IAAI;IAC1B,GAAI;cAEH,oBAAoB,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,kBAAD,EAAkB,GAAI,UAAU,UAAU,EAAI,CAAA;IACpD,CAAA;GAEjB,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,GAAI,UAAU,YAAY;IAC1B,KAAK,SAAS;IACd,MAAK;IACL,kBAAgB,aAAa,KAAA;IAC7B,GAAI,SAAS;cAEb,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,GAAI,UAAU,UAAU;KAAG;KAAe,CAAA;IAC3C,CAAA;GAEN,iBAAA,GAAA,kBAAA,KAACD,uBAAAA,gBAAD;IACE,GAAI,UAAU,UAAU;IACxB,SAAS,SAAS;IAClB,iBAAc;IACd,eAAa,CAAC,WAAW,KAAA;IACzB,cAAW;IACX,UAAU,UAAU,IAAI;IACxB,GAAI;cAEH,kBAAkB,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,kBAAD,EAAkB,GAAI,UAAU,UAAU,EAAI,CAAA;IAClD,CAAA;GACb;;EAER;AAEF,SAAS,UAAUC,wBAAAA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc"}