@mantine/core/esm/components/Accordion/Accordion.mjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Accordion.mjs","names":["classes"],"sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  Factory,\n  genericFactory,\n  getRadius,\n  getSafeId,\n  MantineRadius,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { AccordionProvider } from './Accordion.context';\nimport { AccordionChevronPosition, AccordionHeadingOrder, AccordionValue } from './Accordion.types';\nimport { AccordionChevron } from './AccordionChevron';\nimport { AccordionControl } from './AccordionControl/AccordionControl';\nimport { AccordionItem } from './AccordionItem/AccordionItem';\nimport { AccordionPanel } from './AccordionPanel/AccordionPanel';\nimport classes from './Accordion.module.css';\n\nexport type AccordionStylesNames =\n  | 'root'\n  | 'content'\n  | 'item'\n  | 'panel'\n  | 'icon'\n  | 'chevron'\n  | 'label'\n  | 'itemTitle'\n  | 'control';\n\nexport type AccordionVariant = 'default' | 'contained' | 'filled' | 'separated';\nexport type AccordionCssVariables = {\n  root: '--accordion-transition-duration' | '--accordion-chevron-size' | '--accordion-radius';\n};\n\nexport interface AccordionProps<Multiple extends boolean = false>\n  extends\n    BoxProps,\n    StylesApiProps<AccordionFactory>,\n    ElementProps<'div', 'value' | 'defaultValue' | 'onChange'> {\n  /** If set, multiple items can be opened at the same time */\n  multiple?: Multiple;\n\n  /** Controlled component value */\n  value?: AccordionValue<Multiple>;\n\n  /** Uncontrolled component default value */\n  defaultValue?: AccordionValue<Multiple>;\n\n  /** Called when value changes, payload type depends on `multiple` prop */\n  onChange?: (value: AccordionValue<Multiple>) => void;\n\n  /** If set, arrow keys loop through items (first to last and last to first) @default true */\n  loop?: boolean;\n\n  /** Transition duration in ms @default 200 */\n  transitionDuration?: number;\n\n  /** If set, chevron rotation is disabled */\n  disableChevronRotation?: boolean;\n\n  /** Position of the chevron relative to the item label @default right */\n  chevronPosition?: AccordionChevronPosition;\n\n  /** Size of the chevron icon container @default auto */\n  chevronSize?: number | string;\n\n  /** Size of the default chevron icon. Ignored when `chevron` prop is set. Use `chevronSize` instead when using custom chevron. @default 16 */\n  chevronIconSize?: number | string;\n\n  /** Sets heading level (h2-h6) for `Accordion.Control` elements to meet WAI-ARIA requirements. Has no visual effect. */\n  order?: AccordionHeadingOrder;\n\n  /** Custom chevron icon */\n  chevron?: React.ReactNode;\n\n  /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** If set to `false`, panels are unmounted when collapsed. By default, panels stay mounted when collapsed. */\n  keepMounted?: boolean;\n}\n\nexport type AccordionFactory = Factory<{\n  props: AccordionProps;\n  ref: HTMLDivElement;\n  stylesNames: AccordionStylesNames;\n  vars: AccordionCssVariables;\n  variant: AccordionVariant;\n  signature: <Multiple extends boolean = false>(\n    props: AccordionProps<Multiple>\n  ) => React.JSX.Element;\n  staticComponents: {\n    Item: typeof AccordionItem;\n    Panel: typeof AccordionPanel;\n    Control: typeof AccordionControl;\n    Chevron: typeof AccordionChevron;\n  };\n}>;\n\nconst defaultProps = {\n  multiple: false,\n  disableChevronRotation: false,\n  chevronPosition: 'right',\n  variant: 'default',\n  chevronSize: 'auto',\n  chevronIconSize: 16,\n} satisfies Partial<AccordionProps>;\n\nconst varsResolver = createVarsResolver<AccordionFactory>(\n  (_, { transitionDuration, chevronSize, radius }) => ({\n    root: {\n      '--accordion-transition-duration':\n        transitionDuration === undefined ? undefined : `${transitionDuration}ms`,\n      '--accordion-chevron-size': chevronSize === undefined ? undefined : rem(chevronSize),\n      '--accordion-radius': radius === undefined ? undefined : getRadius(radius),\n    },\n  })\n);\n\nexport const Accordion = genericFactory<AccordionFactory>((_props) => {\n  const props = useProps('Accordion', defaultProps as any, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    multiple,\n    value,\n    defaultValue,\n    onChange,\n    id,\n    loop,\n    transitionDuration,\n    disableChevronRotation,\n    chevronPosition,\n    chevronSize,\n    order,\n    chevron,\n    variant,\n    radius,\n    chevronIconSize,\n    attributes,\n    keepMounted,\n    ...others\n  } = props;\n\n  const uid = useId(id);\n  const [_value, handleChange] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: multiple ? ([] as any) : null,\n    onChange,\n  });\n\n  const isItemActive = (itemValue: string) =>\n    Array.isArray(_value) ? _value.includes(itemValue) : itemValue === _value;\n\n  const handleItemChange = (itemValue: string) => {\n    const nextValue = Array.isArray(_value)\n      ? _value.includes(itemValue)\n        ? _value.filter((selectedValue) => selectedValue !== itemValue)\n        : [..._value, itemValue]\n      : itemValue === _value\n        ? null\n        : (itemValue as any);\n\n    handleChange(nextValue);\n  };\n\n  const getStyles = useStyles<AccordionFactory>({\n    name: 'Accordion',\n    classes,\n    props: props as AccordionProps,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <AccordionProvider\n      value={{\n        isItemActive,\n        onChange: handleItemChange,\n        getControlId: getSafeId(\n          `${uid}-control`,\n          'Accordion.Item component was rendered with invalid value or without value'\n        ),\n        getRegionId: getSafeId(\n          `${uid}-panel`,\n          'Accordion.Item component was rendered with invalid value or without value'\n        ),\n        chevron: chevron === null ? null : chevron || <AccordionChevron size={chevronIconSize} />,\n        transitionDuration,\n        disableChevronRotation,\n        chevronPosition,\n        order,\n        loop,\n        getStyles,\n        variant,\n        unstyled,\n        keepMounted,\n      }}\n    >\n      <Box {...getStyles('root')} id={uid} {...others} variant={variant} data-accordion>\n        {children}\n      </Box>\n    </AccordionProvider>\n  );\n});\n\nAccordion.classes = classes;\nAccordion.varsResolver = varsResolver;\nAccordion.displayName = '@mantine/core/Accordion';\nAccordion.Item = AccordionItem;\nAccordion.Panel = AccordionPanel;\nAccordion.Control = AccordionControl;\nAccordion.Chevron = AccordionChevron;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAyGA,MAAM,eAAe;CACnB,UAAU;CACV,wBAAwB;CACxB,iBAAiB;CACjB,SAAS;CACT,aAAa;CACb,iBAAiB;CAClB;AAED,MAAM,eAAe,oBAClB,GAAG,EAAE,oBAAoB,aAAa,cAAc,EACnD,MAAM;CACJ,mCACE,uBAAuB,KAAA,IAAY,KAAA,IAAY,GAAG,mBAAmB;CACvE,4BAA4B,gBAAgB,KAAA,IAAY,KAAA,IAAY,IAAI,YAAY;CACpF,sBAAsB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;CAC3E,EACF,EACF;AAED,MAAa,YAAY,gBAAkC,WAAW;CACpE,MAAM,QAAQ,SAAS,aAAa,cAAqB,OAAO;CAChE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,UACA,OACA,cACA,UACA,IACA,MACA,oBACA,wBACA,iBACA,aACA,OACA,SACA,SACA,QACA,iBACA,YACA,aACA,GAAG,WACD;CAEJ,MAAM,MAAM,MAAM,GAAG;CACrB,MAAM,CAAC,QAAQ,gBAAgB,gBAAgB;EAC7C;EACA;EACA,YAAY,WAAY,EAAE,GAAW;EACrC;EACD,CAAC;CAEF,MAAM,gBAAgB,cACpB,MAAM,QAAQ,OAAO,GAAG,OAAO,SAAS,UAAU,GAAG,cAAc;CAErE,MAAM,oBAAoB,cAAsB;AAS9C,eARkB,MAAM,QAAQ,OAAO,GACnC,OAAO,SAAS,UAAU,GACxB,OAAO,QAAQ,kBAAkB,kBAAkB,UAAU,GAC7D,CAAC,GAAG,QAAQ,UAAU,GACxB,cAAc,SACZ,OACC,UAEgB;;CAGzB,MAAM,YAAY,UAA4B;EAC5C,MAAM;EACN,SAAA;EACO;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,mBAAD;EACE,OAAO;GACL;GACA,UAAU;GACV,cAAc,UACZ,GAAG,IAAI,WACP,4EACD;GACD,aAAa,UACX,GAAG,IAAI,SACP,4EACD;GACD,SAAS,YAAY,OAAO,OAAO,WAAW,oBAAC,kBAAD,EAAkB,MAAM,iBAAmB,CAAA;GACzF;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;YAED,oBAAC,KAAD;GAAK,GAAI,UAAU,OAAO;GAAE,IAAI;GAAK,GAAI;GAAiB;GAAS,kBAAA;GAChE;GACG,CAAA;EACY,CAAA;EAEtB;AAEF,UAAU,UAAUA;AACpB,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,UAAU,OAAO;AACjB,UAAU,QAAQ;AAClB,UAAU,UAAU;AACpB,UAAU,UAAU"}