@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 6.27 kB
Source Map (JSON)
{"version":3,"file":"Alert.cjs","names":["createVarsResolver","getRadius","factory","useProps","useStyles","Box","CloseButton","classes"],"sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { useId } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getRadius,\n MantineColor,\n MantineRadius,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { CloseButton } from '../CloseButton';\nimport classes from './Alert.module.css';\n\nexport type AlertStylesNames =\n | 'root'\n | 'body'\n | 'label'\n | 'title'\n | 'icon'\n | 'wrapper'\n | 'message'\n | 'closeButton';\nexport type AlertVariant = 'filled' | 'light' | 'outline' | 'default' | 'transparent' | 'white';\nexport type AlertCssVariables = {\n root: '--alert-radius' | '--alert-bg' | '--alert-color' | '--alert-bd';\n};\n\nexport interface AlertProps\n extends BoxProps, StylesApiProps<AlertFactory>, ElementProps<'div', 'title'> {\n /** Key of `theme.radius` or any valid CSS value to set border-radius @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Key of `theme.colors` or any valid CSS color @default theme.primaryColor */\n color?: MantineColor;\n\n /** Alert title */\n title?: React.ReactNode;\n\n /** Icon displayed next to the title */\n icon?: React.ReactNode;\n\n /** Determines whether close button should be displayed @default false */\n withCloseButton?: boolean;\n\n /** Called when the close button is clicked */\n onClose?: () => void;\n\n /** Close button `aria-label` */\n closeButtonLabel?: string;\n\n /** If set, adjusts text color based on background color for `filled` variant */\n autoContrast?: boolean;\n}\n\nexport type AlertFactory = Factory<{\n props: AlertProps;\n ref: HTMLDivElement;\n stylesNames: AlertStylesNames;\n vars: AlertCssVariables;\n variant: AlertVariant;\n}>;\n\nconst varsResolver = createVarsResolver<AlertFactory>(\n (theme, { radius, color, variant, autoContrast }) => {\n const colors = theme.variantColorResolver({\n color: color || theme.primaryColor,\n theme,\n variant: variant || 'light',\n autoContrast,\n });\n\n return {\n root: {\n '--alert-radius': radius === undefined ? undefined : getRadius(radius),\n '--alert-bg': color || variant ? colors.background : undefined,\n '--alert-color': colors.color,\n '--alert-bd': color || variant ? colors.border : undefined,\n },\n };\n }\n);\n\nexport const Alert = factory<AlertFactory>((_props) => {\n const props = useProps('Alert', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n radius,\n color,\n title,\n children,\n id,\n icon,\n withCloseButton,\n onClose,\n closeButtonLabel,\n variant,\n autoContrast,\n role,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<AlertFactory>({\n name: 'Alert',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const rootId = useId(id);\n const titleId = (title && `${rootId}-title`) || undefined;\n const bodyId = `${rootId}-body`;\n\n return (\n <Box\n id={rootId}\n {...getStyles('root', { variant })}\n variant={variant}\n {...others}\n role={role || 'alert'}\n aria-describedby={children ? bodyId : undefined}\n aria-labelledby={title ? titleId : undefined}\n >\n <div {...getStyles('wrapper')}>\n {icon && <div {...getStyles('icon')}>{icon}</div>}\n\n <div {...getStyles('body')}>\n {title && (\n <div {...getStyles('title')} data-with-close-button={withCloseButton || undefined}>\n <span id={titleId} {...getStyles('label')}>\n {title}\n </span>\n </div>\n )}\n\n {children && (\n <div id={bodyId} {...getStyles('message')} data-variant={variant}>\n {children}\n </div>\n )}\n </div>\n\n {withCloseButton && (\n <CloseButton\n {...getStyles('closeButton')}\n onClick={onClose}\n variant=\"transparent\"\n size={16}\n iconSize={16}\n aria-label={closeButtonLabel}\n unstyled={unstyled}\n />\n )}\n </div>\n </Box>\n );\n});\n\nAlert.classes = classes;\nAlert.varsResolver = varsResolver;\nAlert.displayName = '@mantine/core/Alert';\n"],"mappings":";;;;;;;;;;;;;AAmEA,MAAM,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,QAAQ,OAAO,SAAS,mBAAmB;CACnD,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA,SAAS,WAAW;EACpB;EACD,CAAC;AAEF,QAAO,EACL,MAAM;EACJ,kBAAkB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,OAAO;EACtE,cAAc,SAAS,UAAU,OAAO,aAAa,KAAA;EACrD,iBAAiB,OAAO;EACxB,cAAc,SAAS,UAAU,OAAO,SAAS,KAAA;EAClD,EACF;EAEJ;AAED,MAAa,QAAQC,gBAAAA,SAAuB,WAAW;CACrD,MAAM,QAAQC,kBAAAA,SAAS,SAAS,MAAM,OAAO;CAC7C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,OACA,OACA,UACA,IACA,MACA,iBACA,SACA,kBACA,SACA,cACA,MACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAwB;EACxC,MAAM;EACN,SAAA,qBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,UAAA,GAAA,eAAA,OAAe,GAAG;CACxB,MAAM,UAAW,SAAS,GAAG,OAAO,WAAY,KAAA;CAChD,MAAM,SAAS,GAAG,OAAO;AAEzB,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,IAAI;EACJ,GAAI,UAAU,QAAQ,EAAE,SAAS,CAAC;EACzB;EACT,GAAI;EACJ,MAAM,QAAQ;EACd,oBAAkB,WAAW,SAAS,KAAA;EACtC,mBAAiB,QAAQ,UAAU,KAAA;YAEnC,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,GAAI,UAAU,UAAU;aAA7B;IACG,QAAQ,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,GAAI,UAAU,OAAO;eAAG;KAAW,CAAA;IAEjD,iBAAA,GAAA,kBAAA,MAAC,OAAD;KAAK,GAAI,UAAU,OAAO;eAA1B,CACG,SACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;MAAK,GAAI,UAAU,QAAQ;MAAE,0BAAwB,mBAAmB,KAAA;gBACtE,iBAAA,GAAA,kBAAA,KAAC,QAAD;OAAM,IAAI;OAAS,GAAI,UAAU,QAAQ;iBACtC;OACI,CAAA;MACH,CAAA,EAGP,YACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;MAAK,IAAI;MAAQ,GAAI,UAAU,UAAU;MAAE,gBAAc;MACtD;MACG,CAAA,CAEJ;;IAEL,mBACC,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;KACE,GAAI,UAAU,cAAc;KAC5B,SAAS;KACT,SAAQ;KACR,MAAM;KACN,UAAU;KACV,cAAY;KACF;KACV,CAAA;IAEA;;EACF,CAAA;EAER;AAEF,MAAM,UAAUC,qBAAAA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc"}