@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 4.68 kB
Source Map (JSON)
{"version":3,"file":"Group.cjs","names":["createVarsResolver","getSpacing","factory","useProps","filterFalsyChildren","Box","useStyles","classes"],"sources":["../../../src/components/Group/Group.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSpacing,\n MantineSpacing,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { filterFalsyChildren } from './filter-falsy-children/filter-falsy-children';\nimport classes from './Group.module.css';\n\nexport type GroupStylesNames = 'root';\nexport type GroupCssVariables = {\n root:\n | '--group-gap'\n | '--group-align'\n | '--group-justify'\n | '--group-wrap'\n | '--group-child-width';\n};\n\nexport interface GroupStylesCtx {\n childWidth: string;\n}\n\nexport interface GroupProps extends BoxProps, StylesApiProps<GroupFactory>, ElementProps<'div'> {\n __size?: any;\n\n /** Controls `justify-content` CSS property @default 'flex-start' */\n justify?: React.CSSProperties['justifyContent'];\n\n /** Controls `align-items` CSS property @default 'center' */\n align?: React.CSSProperties['alignItems'];\n\n /** Controls `flex-wrap` CSS property @default 'wrap' */\n wrap?: React.CSSProperties['flexWrap'];\n\n /** Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem @default 'md' */\n gap?: MantineSpacing;\n\n /** Determines whether each child element should have `flex-grow: 1` style @default false */\n grow?: boolean;\n\n /** Determines whether children should take only dedicated amount of space (`max-width` style is set based on the number of children) @default true */\n preventGrowOverflow?: boolean;\n}\n\nexport type GroupFactory = Factory<{\n props: GroupProps;\n ref: HTMLDivElement;\n stylesNames: GroupStylesNames;\n vars: GroupCssVariables;\n ctx: GroupStylesCtx;\n}>;\n\nconst defaultProps = {\n preventGrowOverflow: true,\n gap: 'md',\n align: 'center',\n justify: 'flex-start',\n wrap: 'wrap',\n} satisfies Partial<GroupProps>;\n\nconst varsResolver = createVarsResolver<GroupFactory>(\n (_, { grow, preventGrowOverflow, gap, align, justify, wrap }, { childWidth }) => ({\n root: {\n '--group-child-width': grow && preventGrowOverflow ? childWidth : undefined,\n '--group-gap': getSpacing(gap),\n '--group-align': align,\n '--group-justify': justify,\n '--group-wrap': wrap,\n },\n })\n);\n\nexport const Group = factory<GroupFactory>((_props) => {\n const props = useProps('Group', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n children,\n gap,\n align,\n justify,\n wrap,\n grow,\n preventGrowOverflow,\n vars,\n variant,\n __size,\n mod,\n attributes,\n ...others\n } = props;\n\n const filteredChildren = filterFalsyChildren(children);\n const childrenCount = filteredChildren.length;\n const resolvedGap = getSpacing(gap ?? 'md');\n const childWidth = `calc(${\n 100 / childrenCount\n }% - (${resolvedGap} - ${resolvedGap} / ${childrenCount}))`;\n\n const stylesCtx: GroupStylesCtx = { childWidth };\n\n const getStyles = useStyles<GroupFactory>({\n name: 'Group',\n props,\n stylesCtx,\n className,\n style,\n classes,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <Box {...getStyles('root')} variant={variant} mod={[{ grow }, mod]} size={__size} {...others}>\n {filteredChildren}\n </Box>\n );\n});\n\nGroup.classes = classes;\nGroup.varsResolver = varsResolver;\nGroup.displayName = '@mantine/core/Group';\n"],"mappings":";;;;;;;;;;;;AA4DA,MAAM,eAAe;CACnB,qBAAqB;CACrB,KAAK;CACL,OAAO;CACP,SAAS;CACT,MAAM;CACP;AAED,MAAM,eAAeA,6BAAAA,oBAClB,GAAG,EAAE,MAAM,qBAAqB,KAAK,OAAO,SAAS,QAAQ,EAAE,kBAAkB,EAChF,MAAM;CACJ,uBAAuB,QAAQ,sBAAsB,aAAa,KAAA;CAClE,eAAeC,iBAAAA,WAAW,IAAI;CAC9B,iBAAiB;CACjB,mBAAmB;CACnB,gBAAgB;CACjB,EACF,EACF;AAED,MAAa,QAAQC,gBAAAA,SAAuB,WAAW;CACrD,MAAM,QAAQC,kBAAAA,SAAS,SAAS,cAAc,OAAO;CACrD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,UACA,KACA,OACA,SACA,MACA,MACA,qBACA,MACA,SACA,QACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,mBAAmBC,8BAAAA,oBAAoB,SAAS;CACtD,MAAM,gBAAgB,iBAAiB;CACvC,MAAM,cAAcH,iBAAAA,WAAW,OAAO,KAAK;AAsB3C,QACE,iBAAA,GAAA,kBAAA,KAACI,YAAAA,KAAD;EAAK,GAhBWC,mBAAAA,UAAwB;GACxC,MAAM;GACN;GACA,WALgC,EAAE,YAJjB,QACjB,MAAM,cACP,OAAO,YAAY,KAAK,YAAY,KAAK,cAAc,KAER;GAM9C;GACA;GACA,SAAA,qBAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAC,CAGmB,OAAO;EAAW;EAAS,KAAK,CAAC,EAAE,MAAM,EAAE,IAAI;EAAE,MAAM;EAAQ,GAAI;YACnF;EACG,CAAA;EAER;AAEF,MAAM,UAAUC,qBAAAA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc"}