@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 4.37 kB
Source Map (JSON)
{"version":3,"file":"SimpleGrid.cjs","names":["factory","useProps","useStyles","useRandomClassName","SimpleGridContainerVariables","Box","SimpleGridMediaVariables","classes"],"sources":["../../../src/components/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n ElementProps,\n Factory,\n factory,\n MantineSpacing,\n StyleProp,\n StylesApiProps,\n useProps,\n useRandomClassName,\n useStyles,\n} from '../../core';\nimport { SimpleGridContainerVariables, SimpleGridMediaVariables } from './SimpleGridVariables';\nimport classes from './SimpleGrid.module.css';\n\nexport type SimpleGridStylesNames = 'root' | 'container';\n\nexport interface SimpleGridProps\n extends BoxProps, StylesApiProps<SimpleGridFactory>, ElementProps<'div'> {\n /** Number of columns @default 1 */\n cols?: StyleProp<number>;\n\n /** Spacing between columns @default 'md' */\n spacing?: StyleProp<MantineSpacing>;\n\n /** Spacing between rows. When not set, falls back to spacing value @default undefined */\n verticalSpacing?: StyleProp<MantineSpacing>;\n\n /** Determines type of queries that are used for responsive styles @default 'media' */\n type?: 'media' | 'container';\n\n /** Minimum column width when using auto-fit/auto-fill. When set, cols prop is ignored */\n minColWidth?: string | number;\n\n /** Grid repeat type when minColWidth is set @default 'auto-fill' */\n autoFlow?: 'auto-fit' | 'auto-fill';\n\n /** Sets the size of implicitly created grid rows */\n autoRows?: string;\n}\n\nexport type SimpleGridFactory = Factory<{\n props: SimpleGridProps;\n ref: HTMLDivElement;\n stylesNames: SimpleGridStylesNames;\n}>;\n\nconst defaultProps = {\n cols: 1,\n spacing: 'md',\n type: 'media',\n} satisfies Partial<SimpleGridProps>;\n\nexport const SimpleGrid = factory<SimpleGridFactory>((_props) => {\n const props = useProps('SimpleGrid', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n cols,\n verticalSpacing,\n spacing,\n type,\n minColWidth,\n autoFlow,\n autoRows,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<SimpleGridFactory>({\n name: 'SimpleGrid',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n });\n\n const responsiveClassName = useRandomClassName();\n\n const autoColsAttr = minColWidth !== undefined ? autoFlow || 'auto-fill' : undefined;\n\n if (type === 'container') {\n return (\n <>\n <SimpleGridContainerVariables {...props} selector={`.${responsiveClassName}`} />\n <div {...getStyles('container')}>\n <Box\n {...getStyles('root', { className: responsiveClassName })}\n {...others}\n data-auto-cols={autoColsAttr}\n />\n </div>\n </>\n );\n }\n\n return (\n <>\n <SimpleGridMediaVariables {...props} selector={`.${responsiveClassName}`} />\n <Box\n {...getStyles('root', { className: responsiveClassName })}\n {...others}\n data-auto-cols={autoColsAttr}\n />\n </>\n );\n});\n\nSimpleGrid.classes = classes;\nSimpleGrid.displayName = '@mantine/core/SimpleGrid';\n"],"mappings":";;;;;;;;;;;AAgDA,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACT,MAAM;CACP;AAED,MAAa,aAAaA,gBAAAA,SAA4B,WAAW;CAC/D,MAAM,QAAQC,kBAAAA,SAAS,cAAc,cAAc,OAAO;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,iBACA,SACA,MACA,aACA,UACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA6B;EAC7C,MAAM;EACN,SAAA,0BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,sBAAsBC,6BAAAA,oBAAoB;CAEhD,MAAM,eAAe,gBAAgB,KAAA,IAAY,YAAY,cAAc,KAAA;AAE3E,KAAI,SAAS,YACX,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,4BAAAA,8BAAD;EAA8B,GAAI;EAAO,UAAU,IAAI;EAAyB,CAAA,EAChF,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,GAAI,UAAU,YAAY;YAC7B,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;GACE,GAAI,UAAU,QAAQ,EAAE,WAAW,qBAAqB,CAAC;GACzD,GAAI;GACJ,kBAAgB;GAChB,CAAA;EACE,CAAA,CACL,EAAA,CAAA;AAIP,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,4BAAAA,0BAAD;EAA0B,GAAI;EAAO,UAAU,IAAI;EAAyB,CAAA,EAC5E,iBAAA,GAAA,kBAAA,KAACD,YAAAA,KAAD;EACE,GAAI,UAAU,QAAQ,EAAE,WAAW,qBAAqB,CAAC;EACzD,GAAI;EACJ,kBAAgB;EAChB,CAAA,CACD,EAAA,CAAA;EAEL;AAEF,WAAW,UAAUE,0BAAAA;AACrB,WAAW,cAAc"}