@mantine/core/cjs/components/Table/Table.components.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Table.components.cjs","names":["factory","useProps","useTableContext","Box","classes"],"sources":["../../../src/components/Table/Table.components.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  FactoryPayload,\n  useProps,\n} from '../../core';\nimport type { TableFactory } from './Table';\nimport { TableContextValue, useTableContext } from './Table.context';\nimport classes from './Table.module.css';\n\nexport interface TableElementProps<Selector extends string>\n  extends\n    BoxProps,\n    CompoundStylesApiProps<Omit<TableFactory, 'stylesNames'> & { stylesNames: Selector }> {}\n\nexport interface TableThProps extends TableElementProps<'th'>, ElementProps<'th'> {}\nexport interface TableTdProps extends TableElementProps<'td'>, ElementProps<'td'> {}\nexport interface TableTrProps extends TableElementProps<'tr'>, ElementProps<'tr'> {}\nexport interface TableTheadProps extends TableElementProps<'thead'>, ElementProps<'thead'> {}\nexport interface TableTbodyProps extends TableElementProps<'tbody'>, ElementProps<'tbody'> {}\nexport interface TableTfootProps extends TableElementProps<'tfoot'>, ElementProps<'tfoot'> {}\nexport interface TableCaptionProps extends TableElementProps<'caption'>, ElementProps<'caption'> {}\n\nexport type TableThFactory = Factory<{\n  props: TableThProps;\n  ref: HTMLTableCellElement;\n  stylesNames: 'th';\n  compound: true;\n}>;\n\nexport type TableTdFactory = Factory<{\n  props: TableTdProps;\n  ref: HTMLTableCellElement;\n  stylesNames: 'td';\n  compound: true;\n}>;\n\nexport type TableTrFactory = Factory<{\n  props: TableTrProps;\n  ref: HTMLTableRowElement;\n  stylesNames: 'tr';\n  compound: true;\n}>;\n\nexport type TableTheadFactory = Factory<{\n  props: TableTheadProps;\n  ref: HTMLTableSectionElement;\n  stylesNames: 'thead';\n  compound: true;\n}>;\n\nexport type TableTbodyFactory = Factory<{\n  props: TableTbodyProps;\n  ref: HTMLTableSectionElement;\n  stylesNames: 'tbody';\n  compound: true;\n}>;\n\nexport type TableTfootFactory = Factory<{\n  props: TableTfootProps;\n  ref: HTMLTableSectionElement;\n  stylesNames: 'tfoot';\n  compound: true;\n}>;\n\nexport type TableCaptionFactory = Factory<{\n  props: TableCaptionProps;\n  ref: HTMLTableCaptionElement;\n  stylesNames: 'caption';\n  compound: true;\n}>;\n\ninterface TableElementOptions {\n  columnBorder?: true;\n  rowBorder?: true;\n  striped?: true;\n  highlightOnHover?: true;\n  captionSide?: true;\n  stickyHeader?: true;\n}\n\nfunction getDataAttributes(ctx: TableContextValue, options?: TableElementOptions) {\n  if (!options) {\n    return undefined;\n  }\n\n  const data: Record<string, boolean | string> = {};\n\n  if (options.columnBorder && ctx.withColumnBorders) {\n    data['data-with-column-border'] = true;\n  }\n\n  if (options.rowBorder && ctx.withRowBorders) {\n    data['data-with-row-border'] = true;\n  }\n\n  if (options.striped && ctx.striped) {\n    data['data-striped'] = ctx.striped;\n  }\n\n  if (options.highlightOnHover && ctx.highlightOnHover) {\n    data['data-hover'] = true;\n  }\n\n  if (options.captionSide && ctx.captionSide) {\n    data['data-side'] = ctx.captionSide;\n  }\n\n  if (options.stickyHeader && ctx.stickyHeader) {\n    data['data-sticky'] = true;\n  }\n\n  return data;\n}\n\nexport function tableElement<Factory extends FactoryPayload>(\n  element: 'th' | 'td' | 'tr' | 'thead' | 'tbody' | 'tfoot' | 'caption',\n  options?: TableElementOptions\n) {\n  const name = `Table${element.charAt(0).toUpperCase()}${element.slice(1)}`;\n  const Component = factory<Factory>((_props) => {\n    const props = useProps(name, {}, _props);\n    const { classNames, className, style, styles, ...others } = props;\n\n    const ctx = useTableContext();\n\n    return (\n      <Box\n        component={element}\n        {...getDataAttributes(ctx, options)}\n        {...ctx.getStyles(element, { className, classNames, style, styles, props })}\n        {...others}\n      />\n    );\n  });\n\n  Component.displayName = `@mantine/core/${name}`;\n  Component.classes = classes;\n  return Component;\n}\n\nexport const TableTh = tableElement<TableThFactory>('th', { columnBorder: true });\nexport const TableTd = tableElement<TableTdFactory>('td', { columnBorder: true });\nexport const TableTr = tableElement<TableTrFactory>('tr', {\n  rowBorder: true,\n  striped: true,\n  highlightOnHover: true,\n});\nexport const TableThead = tableElement<TableTheadFactory>('thead', { stickyHeader: true });\nexport const TableTbody = tableElement<TableTbodyFactory>('tbody');\nexport const TableTfoot = tableElement<TableTfootFactory>('tfoot');\nexport const TableCaption = tableElement<TableCaptionFactory>('caption', { captionSide: true });\n"],"mappings":";;;;;;;;;AAqFA,SAAS,kBAAkB,KAAwB,SAA+B;CAChF,IAAI,CAAC,SACH;CAGF,MAAM,OAAyC,CAAC;CAEhD,IAAI,QAAQ,gBAAgB,IAAI,mBAC9B,KAAK,6BAA6B;CAGpC,IAAI,QAAQ,aAAa,IAAI,gBAC3B,KAAK,0BAA0B;CAGjC,IAAI,QAAQ,WAAW,IAAI,SACzB,KAAK,kBAAkB,IAAI;CAG7B,IAAI,QAAQ,oBAAoB,IAAI,kBAClC,KAAK,gBAAgB;CAGvB,IAAI,QAAQ,eAAe,IAAI,aAC7B,KAAK,eAAe,IAAI;CAG1B,IAAI,QAAQ,gBAAgB,IAAI,cAC9B,KAAK,iBAAiB;CAGxB,OAAO;AACT;AAEA,SAAgB,aACd,SACA,SACA;CACA,MAAM,OAAO,QAAQ,QAAQ,OAAO,CAAC,EAAE,YAAY,IAAI,QAAQ,MAAM,CAAC;CACtE,MAAM,YAAYA,gBAAAA,SAAkB,WAAW;EAC7C,MAAM,QAAQC,kBAAAA,SAAS,MAAM,CAAC,GAAG,MAAM;EACvC,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,GAAG,WAAW;EAE5D,MAAM,MAAMC,sBAAAA,gBAAgB;EAE5B,OACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;GACE,WAAW;GACX,GAAI,kBAAkB,KAAK,OAAO;GAClC,GAAI,IAAI,UAAU,SAAS;IAAE;IAAW;IAAY;IAAO;IAAQ;GAAM,CAAC;GAC1E,GAAI;EACL,CAAA;CAEL,CAAC;CAED,UAAU,cAAc,iBAAiB;CACzC,UAAU,UAAUC,qBAAAA;CACpB,OAAO;AACT;AAEA,MAAa,UAAU,aAA6B,MAAM,EAAE,cAAc,KAAK,CAAC;AAChF,MAAa,UAAU,aAA6B,MAAM,EAAE,cAAc,KAAK,CAAC;AAChF,MAAa,UAAU,aAA6B,MAAM;CACxD,WAAW;CACX,SAAS;CACT,kBAAkB;AACpB,CAAC;AACD,MAAa,aAAa,aAAgC,SAAS,EAAE,cAAc,KAAK,CAAC;AACzF,MAAa,aAAa,aAAgC,OAAO;AACjE,MAAa,aAAa,aAAgC,OAAO;AACjE,MAAa,eAAe,aAAkC,WAAW,EAAE,aAAa,KAAK,CAAC"}