@mantine/core/cjs/components/Accordion/AccordionControl/AccordionControl.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"AccordionControl.cjs","names":["factory","useProps","useAccordionItemContext","useAccordionContext","UnstyledButton","createScopedKeydownHandler","Box","classes"],"sources":["../../../../src/components/Accordion/AccordionControl/AccordionControl.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  createScopedKeydownHandler,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { useAccordionContext } from '../Accordion.context';\nimport { useAccordionItemContext } from '../AccordionItem.context';\nimport classes from '../Accordion.module.css';\n\nexport type AccordionControlStylesNames = 'control' | 'chevron' | 'label' | 'itemTitle' | 'icon';\n\nexport interface AccordionControlProps\n  extends BoxProps, CompoundStylesApiProps<AccordionControlFactory>, ElementProps<'button'> {\n  /** Sets `disabled` attribute, prevents interactions */\n  disabled?: boolean;\n\n  /** Custom chevron icon */\n  chevron?: React.ReactNode;\n\n  /** Control label */\n  children?: React.ReactNode;\n\n  /** Icon displayed next to the label */\n  icon?: React.ReactNode;\n}\n\nexport type AccordionControlFactory = Factory<{\n  props: AccordionControlProps;\n  ref: HTMLButtonElement;\n  stylesNames: AccordionControlStylesNames;\n  compound: true;\n}>;\n\nexport const AccordionControl = factory<AccordionControlFactory>((props) => {\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    chevron,\n    icon,\n    onClick,\n    onKeyDown,\n    children,\n    disabled,\n    mod,\n    ...others\n  } = useProps('AccordionControl', null, props);\n\n  const { value } = useAccordionItemContext();\n  const ctx = useAccordionContext();\n  const isActive = ctx.isItemActive(value);\n  const shouldWrapWithHeading = typeof ctx.order === 'number';\n  const Heading = `h${ctx.order!}` as const;\n\n  const content = (\n    <UnstyledButton\n      {...ctx.getStyles('control', { className, classNames, style, styles, variant: ctx.variant })}\n      unstyled={ctx.unstyled}\n      mod={[\n        'accordion-control',\n        { active: isActive, 'chevron-position': ctx.chevronPosition, disabled },\n        mod,\n      ]}\n      onClick={(event) => {\n        onClick?.(event);\n        ctx.onChange(value);\n      }}\n      type=\"button\"\n      disabled={disabled}\n      aria-expanded={isActive}\n      aria-controls={ctx.getRegionId(value)}\n      id={ctx.getControlId(value)}\n      onKeyDown={createScopedKeydownHandler({\n        siblingSelector: '[data-accordion-control]',\n        parentSelector: '[data-accordion]',\n        activateOnFocus: false,\n        loop: ctx.loop,\n        orientation: 'vertical',\n        onKeyDown,\n      })}\n      {...others}\n    >\n      <Box\n        component=\"span\"\n        mod={{ rotate: !ctx.disableChevronRotation && isActive, position: ctx.chevronPosition }}\n        {...ctx.getStyles('chevron', { classNames, styles })}\n      >\n        {chevron || ctx.chevron}\n      </Box>\n      <span {...ctx.getStyles('label', { classNames, styles })}>{children}</span>\n      {icon && (\n        <Box\n          component=\"span\"\n          mod={{ 'chevron-position': ctx.chevronPosition }}\n          {...ctx.getStyles('icon', { classNames, styles })}\n        >\n          {icon}\n        </Box>\n      )}\n    </UnstyledButton>\n  );\n\n  return shouldWrapWithHeading ? (\n    <Heading {...ctx.getStyles('itemTitle', { classNames, styles })}>{content}</Heading>\n  ) : (\n    content\n  );\n});\n\nAccordionControl.displayName = '@mantine/core/AccordionControl';\nAccordionControl.classes = classes;\n"],"mappings":";;;;;;;;;;;;AAuCA,MAAa,mBAAmBA,gBAAAA,SAAkC,UAAU;CAC1E,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,SACA,MACA,SACA,WACA,UACA,UACA,KACA,GAAG,WACDC,kBAAAA,SAAS,oBAAoB,MAAM,MAAM;CAE7C,MAAM,EAAE,UAAUC,8BAAAA,yBAAyB;CAC3C,MAAM,MAAMC,0BAAAA,qBAAqB;CACjC,MAAM,WAAW,IAAI,aAAa,MAAM;CACxC,MAAM,wBAAwB,OAAO,IAAI,UAAU;CACnD,MAAM,UAAU,IAAI,IAAI;CAExB,MAAM,UACJ,iBAAA,GAAA,kBAAA,MAACC,uBAAAA,gBAAD;EACE,GAAI,IAAI,UAAU,WAAW;GAAE;GAAW;GAAY;GAAO;GAAQ,SAAS,IAAI;GAAS,CAAC;EAC5F,UAAU,IAAI;EACd,KAAK;GACH;GACA;IAAE,QAAQ;IAAU,oBAAoB,IAAI;IAAiB;IAAU;GACvE;GACD;EACD,UAAU,UAAU;AAClB,aAAU,MAAM;AAChB,OAAI,SAAS,MAAM;;EAErB,MAAK;EACK;EACV,iBAAe;EACf,iBAAe,IAAI,YAAY,MAAM;EACrC,IAAI,IAAI,aAAa,MAAM;EAC3B,WAAWC,sCAAAA,2BAA2B;GACpC,iBAAiB;GACjB,gBAAgB;GAChB,iBAAiB;GACjB,MAAM,IAAI;GACV,aAAa;GACb;GACD,CAAC;EACF,GAAI;YAzBN;GA2BE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;IACE,WAAU;IACV,KAAK;KAAE,QAAQ,CAAC,IAAI,0BAA0B;KAAU,UAAU,IAAI;KAAiB;IACvF,GAAI,IAAI,UAAU,WAAW;KAAE;KAAY;KAAQ,CAAC;cAEnD,WAAW,IAAI;IACZ,CAAA;GACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,IAAI,UAAU,SAAS;KAAE;KAAY;KAAQ,CAAC;IAAG;IAAgB,CAAA;GAC1E,QACC,iBAAA,GAAA,kBAAA,KAACA,YAAAA,KAAD;IACE,WAAU;IACV,KAAK,EAAE,oBAAoB,IAAI,iBAAiB;IAChD,GAAI,IAAI,UAAU,QAAQ;KAAE;KAAY;KAAQ,CAAC;cAEhD;IACG,CAAA;GAEO;;AAGnB,QAAO,wBACL,iBAAA,GAAA,kBAAA,KAAC,SAAD;EAAS,GAAI,IAAI,UAAU,aAAa;GAAE;GAAY;GAAQ,CAAC;YAAG;EAAkB,CAAA,GAEpF;EAEF;AAEF,iBAAiB,cAAc;AAC/B,iBAAiB,UAAUC,yBAAAA"}