@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 5 kB
Source Map (JSON)
{"version":3,"file":"DataList.cjs","names":["createVarsResolver","getFontSize","getLineHeight","getSpacing","factory","useProps","useStyles","DataListProvider","Box","classes","DataListItem","DataListItemLabel","DataListItemValue"],"sources":["../../../src/components/DataList/DataList.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getFontSize,\n getLineHeight,\n getSpacing,\n MantineSize,\n MantineSpacing,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { DataListProvider } from './DataList.context';\nimport { DataListItem, DataListItemStylesNames } from './DataListItem/DataListItem';\nimport {\n DataListItemLabel,\n DataListItemLabelStylesNames,\n} from './DataListItemLabel/DataListItemLabel';\nimport {\n DataListItemValue,\n DataListItemValueStylesNames,\n} from './DataListItemValue/DataListItemValue';\nimport classes from './DataList.module.css';\n\nexport type DataListStylesNames =\n | 'root'\n | DataListItemStylesNames\n | DataListItemLabelStylesNames\n | DataListItemValueStylesNames;\n\nexport type DataListCssVariables = {\n root: '--data-list-fz' | '--data-list-lh' | '--data-list-gap' | '--data-list-label-width';\n};\n\nexport interface DataListProps\n extends BoxProps, StylesApiProps<DataListFactory>, ElementProps<'dl'> {\n /** DataList.Item components */\n children?: React.ReactNode;\n\n /** Controls `font-size` and `line-height` @default 'sm' */\n size?: MantineSize;\n\n /** Key of `theme.spacing` or any valid CSS value to set gap between items @default 'sm' */\n gap?: MantineSpacing;\n\n /** Controls arrangement of label and value within each item. `horizontal` renders label and value side by side, `vertical` stacks label on top of value @default 'horizontal' */\n orientation?: 'horizontal' | 'vertical';\n\n /** Adds border between items @default false */\n withDivider?: boolean;\n\n /** Controls min-width of the label (dt) element, any valid CSS value @default '120px' */\n labelWidth?: React.CSSProperties['minWidth'];\n}\n\nexport type DataListFactory = Factory<{\n props: DataListProps;\n ref: HTMLDListElement;\n stylesNames: DataListStylesNames;\n vars: DataListCssVariables;\n staticComponents: {\n Item: typeof DataListItem;\n ItemLabel: typeof DataListItemLabel;\n ItemValue: typeof DataListItemValue;\n };\n}>;\n\nconst defaultProps = {\n orientation: 'horizontal',\n} satisfies Partial<DataListProps>;\n\nconst varsResolver = createVarsResolver<DataListFactory>((_, { size, gap, labelWidth }) => ({\n root: {\n '--data-list-fz': getFontSize(size),\n '--data-list-lh': getLineHeight(size),\n '--data-list-gap': getSpacing(gap),\n '--data-list-label-width':\n labelWidth !== undefined\n ? typeof labelWidth === 'number'\n ? `${labelWidth}px`\n : labelWidth\n : undefined,\n },\n}));\n\nexport const DataList = factory<DataListFactory>((_props) => {\n const props = useProps('DataList', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n gap,\n orientation,\n withDivider,\n labelWidth,\n mod,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<DataListFactory>({\n name: 'DataList',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <DataListProvider value={{ getStyles }}>\n <Box<any>\n {...getStyles('root')}\n component=\"dl\"\n mod={[{ orientation, 'with-divider': withDivider }, mod]}\n {...others}\n >\n {children}\n </Box>\n </DataListProvider>\n );\n});\n\nDataList.classes = classes;\nDataList.varsResolver = varsResolver;\nDataList.displayName = '@mantine/core/DataList';\nDataList.Item = DataListItem;\nDataList.ItemLabel = DataListItemLabel;\nDataList.ItemValue = DataListItemValue;\n"],"mappings":";;;;;;;;;;;;;;AAuEA,MAAM,eAAe,EACnB,aAAa,aACf;AAEA,MAAM,eAAeA,6BAAAA,oBAAqC,GAAG,EAAE,MAAM,KAAK,kBAAkB,EAC1F,MAAM;CACJ,kBAAkBC,iBAAAA,YAAY,IAAI;CAClC,kBAAkBC,iBAAAA,cAAc,IAAI;CACpC,mBAAmBC,iBAAAA,WAAW,GAAG;CACjC,2BACE,eAAe,KAAA,IACX,OAAO,eAAe,WACpB,GAAG,WAAW,MACd,aACF,KAAA;AACR,EACF,EAAE;AAEF,MAAa,WAAWC,gBAAAA,SAA0B,WAAW;CAC3D,MAAM,QAAQC,kBAAAA,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,KACA,aACA,aACA,YACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA2B;EAC3C,MAAM;EACN,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,kBAAD;EAAkB,OAAO,EAAE,UAAU;YACnC,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;GACE,GAAI,UAAU,MAAM;GACpB,WAAU;GACV,KAAK,CAAC;IAAE;IAAa,gBAAgB;GAAY,GAAG,GAAG;GACvD,GAAI;GAEH;EACE,CAAA;CACW,CAAA;AAEtB,CAAC;AAED,SAAS,UAAUC,wBAAAA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,OAAOC,qBAAAA;AAChB,SAAS,YAAYC,0BAAAA;AACrB,SAAS,YAAYC,0BAAAA"}